Commit 8d5e76d0 authored by Yorrd's avatar Yorrd
Browse files

feat: cleaner admin interface

parent 4de91445
Pipeline #1410 passed with stages
in 10 minutes and 8 seconds
......@@ -8,6 +8,7 @@ import { generateFontResets, fontReset } from 'imports/git_modules/design/genera
import { AdornisRouter } from 'imports/git_modules/adornis-components/a-router';
import { colors } from 'imports/client/globals';
import '../../imports/db';
import '@adornis/users/client/auto-relogin';
import '@adornis/design/generate-base/molecules';
......
......@@ -22,7 +22,9 @@ import { repeat } from 'lit-html/directives/repeat';
@element('ccb-contents-admin')
export class CCBContentsAdmin extends AdornisDBView<Content> {
@rerender public filterForOwnEntities = new BehaviorSubject(true);
@rerender public filterForOwnEntities = new BehaviorSubject(false);
@rerender public chosenRechtsgebiet = new BehaviorSubject('');
@rerender public opened = new BehaviorSubject(-1);
constructor() {
super();
......@@ -62,9 +64,11 @@ export class CCBContentsAdmin extends AdornisDBView<Content> {
)}
Einträge.</ccb-text
>
${this.filterForOwn()} ${this.csvUploadButton()}
<a-stack horizontal size="md">
${this.filterForOwn()} ${this.csvUploadButton()}
</a-stack>
</a-stack>
<a-stack size="md">
<a-stack size="">
${rxRepeat(
combineLatest(entities, AdornisUser.currentUser).pipe(
map(([ents, user]) =>
......@@ -80,13 +84,47 @@ export class CCBContentsAdmin extends AdornisDBView<Content> {
`;
}
protected searchBar() {
return html`
<a-stack size="md">
<mwc-textfield
class="${this.css({ width: '100%' })}"
label="Suche in selektierten Feldern"
icon="search"
@input="${e => {
const val = e.currentTarget.value;
this.applySearch(val);
}}"
></mwc-textfield>
<a-inline size="md">
${rxRepeat(
Content.find({}).pipe(map(contents => [...new Set(contents.map(content => content.Rechtsgebiet))])),
rechtsgebiet =>
html`
<mwc-button
?raised=${this.chosenRechtsgebiet.pipe(map(gebiet => gebiet === rechtsgebiet))}
@click=${() => {
if (this.chosenRechtsgebiet.getValue() === rechtsgebiet) this.chosenRechtsgebiet.next('');
else this.chosenRechtsgebiet.next(rechtsgebiet);
this.applySearch('');
}}
>
${rechtsgebiet}
</mwc-button>
`,
)}
</a-inline>
</a-stack>
`;
}
protected itemCard(entity: Content, selectedFields: string[], index: number) {
let fileToUpload: File;
return html`
<ccb-stack
padding="lg"
padding="${this.opened.pipe(map(opened => (opened === index ? 'lg' : '')))}"
size="md"
elevation="2"
style=${{ borderTop: '1px solid #ddd' }}
class="${AdornisUser.currentUser.pipe(
map(user =>
this.css({
......@@ -96,99 +134,145 @@ export class CCBContentsAdmin extends AdornisDBView<Content> {
),
)}"
>
${virtualize(html`
${this.fieldDisplays(this.getField('Rechtsgebiet')!, entity, index)}
${this.fieldDisplays(this.getField('Frage')!, entity, index)}
${this.fieldDisplays(this.getField('Antwort')!, entity, index)}
${this.fieldDisplays(this.getField('Quelle')!, entity, index)}
${this.fieldDisplays(this.getField('intent')!, entity, index)}
<a-stack horizontal centeraligned size="md">
<div class="${this.css({ flex: '1' })}">
${this.fieldDisplays(this.getField('Ansprechpartner')!, entity, index)}
</div>
<ccb-button
@click="${() =>
AdornisDialog.showPopup(
resolve => html`
<a-box vertical elevation="2" padding="lg">
${rxRepeat(
AdornisUser.find().whenReady,
user => html`<a-box padding="md" style="background: white; max-height: 50vh; overflow: auto; cursor: pointer;" @click="${() => {
if (entity.createdBy !== user._id) entity.createdBy = user._id;
resolve();
}}">
<ccb-h4>${user.username}</ccb-h4>
</a-box>
</a-box>
`,
)}<ccb-button secondary @click="${resolve}">Schließen</ccb-button></a-box
${this.opened.pipe(
map(opened =>
opened !== index
? html`
<a-box padding="sm" @click=${() => this.opened.next(index)}>
<ccb-stack horizontal size="md" centered>
<mwc-icon> ${entity.Frage ? 'question_answer' : 'warning'} </mwc-icon>
<a-text style=${{ flex: '1' }}> ${entity.Frage || 'kein Fragetext angegeben'} </a-text>
</ccb-stack>
</a-box>
`
: html`
<a-stack horizontal size="md">
<mwc-icon style=${{ cursor: 'pointer' }} @click=${() => this.opened.next(-1)}> close </mwc-icon>
<mwc-icon
@click=${() => {
if (confirm('wirklich löschen?')) entity.remove().subscribe();
}}
style=${{ cursor: 'pointer' }}
>
`,
)}"
>
${entity.whenChanging.pipe(
switchMap(ent =>
AdornisUser.findOne({ _id: ent.createdBy }).whenReady.pipe(
map(user => (user ? 'Autor: ' + user.username : 'Autor zuweisen')),
),
),
)}
</ccb-button>
</a-stack>
<ccb-stack horizontal centeraligned size="md">
<a-file-input @file-changed="${e => (fileToUpload = e.detail.file)}"></a-file-input>
<ccb-button
secondary
@click="${() => {
if (fileToUpload) {
entity.upload(fileToUpload);
}
}}"
>Datei hochladen</ccb-button
>
</ccb-stack>
delete
</mwc-icon>
</a-stack>
<a-stack size="md" horizontal>
<a-box style=${{ width: '200px' }}>
${this.fieldDisplays(this.getField('Rechtsgebiet')!, entity, index)}
</a-box>
${this.fieldDisplays(this.getField('Frage')!, entity, index)}
</a-stack>
${this.fieldDisplays(this.getField('Antwort')!, entity, index)}
${this.fieldDisplays(this.getField('Quelle')!, entity, index)}
${this.fieldDisplays(this.getField('intent')!, entity, index)}
<a-stack horizontal centeraligned size="md">
<div class="${this.css({ flex: '1' })}">
${this.fieldDisplays(this.getField('Ansprechpartner')!, entity, index)}
</div>
<ccb-button
@click="${() =>
AdornisDialog.showPopup(
resolve => html`
<a-box vertical elevation="2" padding="lg">
${rxRepeat(
AdornisUser.find().whenReady,
user => html`
<a-box
padding="md"
style="background: white; max-height: 50vh; overflow: auto; cursor: pointer;"
@click="${() => {
if (entity.createdBy !== user._id) entity.createdBy = user._id;
resolve();
}}"
>
<ccb-h4>${user.username}</ccb-h4>
</a-box>
`,
)} <ccb-button secondary @click="${resolve}">Schließen</ccb-button>
</a-box>
`,
)}"
>
${entity.whenChanging.pipe(
switchMap(ent =>
AdornisUser.findOne({ _id: ent.createdBy }).whenReady.pipe(
map(user => (user ? 'Autor: ' + user.username : 'Autor zuweisen')),
),
),
)}
</ccb-button>
</a-stack>
<ccb-stack horizontal centeraligned size="md">
<a-file-input @file-changed="${e => (fileToUpload = e.detail.file)}"></a-file-input>
<ccb-button
secondary
@click="${() => {
if (fileToUpload) {
entity.upload(fileToUpload);
}
}}"
>Datei hochladen</ccb-button
>
<ccb-button
@click="${() =>
AdornisDialog.showPopup(
resolve => html`
<a-box vertical elevation="2" padding="lg">
${repeat(
Object.keys(Country),
countryKey => html`
<a-box
padding="md"
style="background: white; max-height: 50vh; overflow: auto; cursor: pointer;"
@click="${() => {
if (entity.country !== Country[countryKey]) entity.country = Country[countryKey];
resolve();
}}"
>
<ccb-h4>${Country[countryKey]}</ccb-h4>
</a-box>
`,
)}
<ccb-button secondary @click="${resolve}">Schließen</ccb-button>
</a-box>
`,
)}"
>
${entity.whenChanging.pipe(map(ent => (ent.country ? 'Land: ' + ent.country : 'Land zuweisen')))}
</ccb-button>
<ccb-button @click="${() => entity.save()}" secondary
>Diesen Inhalt als "aktuell" markieren (letzte Aktualisierung
${moment(entity.updateAt).format('DD.MM.YYYY HH:mm')})
</ccb-button>
</ccb-stack>
<ccb-button
@click="${() =>
AdornisDialog.showPopup(
resolve => html`
<a-box vertical elevation="2" padding="lg">
${repeat(
Object.keys(Country),
countryKey => html`<a-box padding="md" style="background: white; max-height: 50vh; overflow: auto; cursor: pointer;" @click="${() => {
if (entity.country !== Country[countryKey]) entity.country = Country[countryKey];
resolve();
}}">
<ccb-h4>${Country[countryKey]}</ccb-h4>
</a-box>
</a-box>
`,
)}<ccb-button secondary @click="${resolve}">Schließen</ccb-button></a-box
<div
class="${this.css({
position: 'absolute',
top: spacing.sm,
right: spacing.sm,
})}"
>
${this.saveField(entity, index)}
</div>
`,
)}"
>
${entity.whenChanging.pipe(map(ent => (ent.country ? 'Land: ' + ent.country : 'Land zuweisen')))}
</ccb-button>
<ccb-button @click="${() => entity.save()}" secondary
>Diesen Inhalt als "aktuell" markieren (letzte Aktualisierung
${moment(entity.updateAt).format('DD.MM.YYYY HH:mm')})</ccb-button
>
<div
class="${this.css({
position: 'absolute',
top: spacing.sm,
right: spacing.sm,
})}"
>
${this.saveField(entity, index)}
</div>
`)}
),
)}
</ccb-stack>
`;
}
protected applySearch(newValue: string) {
this.entities.next(
this.baseQLClass.getValue().find({
Rechtsgebiet: this.chosenRechtsgebiet.getValue() || undefined,
$or: this.selectedFields.getValue().map(f => ({ [f]: { $regex: newValue } })),
}).whenReady,
);
}
protected saveField(data: Content, index: number) {
return html`
<a-box ?secondary="${index % 2}" fullsize centered>
......@@ -280,10 +364,7 @@ export class CCBContentsAdmin extends AdornisDBView<Content> {
protected csvUploadButton() {
return html`
<ccb-button
horizontal
centerjustified
centeraligned
<mwc-button
secondary
@click="${async () => {
const contents = await this.askForFile('*.csv');
......@@ -308,20 +389,20 @@ export class CCBContentsAdmin extends AdornisDBView<Content> {
}),
);
}}"
>CSV hochladen!</ccb-button
>
CSV hochladen!
</mwc-button>
`;
}
protected filterForOwn() {
return html`
<ccb-button
class="${this.css({ alignItems: 'center', display: 'flex', flexDirection: 'row' })}"
?secondary="${!this.filterForOwnEntities.getValue()}"
@click="${() => this.filterForOwnEntities.next(!this.filterForOwnEntities.getValue())}"
><mwc-checkbox .checked="${this.filterForOwnEntities.getValue()}"></mwc-checkbox>Filter nach eigenen
Inhalten</ccb-button
<mwc-button
?raised=${this.filterForOwnEntities}
@click=${() => this.filterForOwnEntities.next(!this.filterForOwnEntities.getValue())}
>
nach eigenen Inhalten filtern
</mwc-button>
`;
}
}
Subproject commit 5483275c2fbc7eea73784b271a3fca2dcca777d7
Subproject commit 153388095f8befaf4b5b07f282ffaebc015a3eba
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment