display-model

dysTOS · Jan 23, 2024 · f5a38ba · f5a38ba
1 parent 484e31a
commit f5a38ba
Show file tree

Hide file tree

Showing 17 changed files with 96 additions and 142 deletions.
diff --git a/src/app/app.main.component.html b/src/app/app.main.component.html
@@ -14,7 +14,7 @@
     <p-confirmDialog
         header="Bestätigen"
         icon="pi pi-exclamation-triangle"
-        [dismissableMask]="true"
+        [dismissableMask]="false"
         defaultFocus="reject"
         acceptButtonStyleClass="p-button-text"
         rejectButtonStyleClass="p-button-text"

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -112,7 +112,6 @@ import { AatestComponent } from "./components/aatest/aatest.component";
 import { TestApiComponent } from "./components/aatest/test-api/test-api.component";
 import { InstrumenteEditorComponent } from "./components/archiv/instrumente/instrumente-editor/instrumente-editor.component";
 import { InstrumenteOverviewComponent } from "./components/archiv/instrumente/instrumente-overview/instrumente-overview.component";
-import { NotenCardComponent } from "./components/archiv/noten/noten-card/noten-card.component";
 import { NotenEditorComponent } from "./components/archiv/noten/noten-editor/noten-editor.component";
 import { NotenOverviewComponent } from "./components/archiv/noten/noten-overview/noten-overview.component";
 import { NotenmappeEditComponent } from "./components/archiv/notenmappen/notenmappe-edit/notenmappe-edit.component";
@@ -159,7 +158,7 @@ import { MkjColorPickerComponent } from "./utilities/form-input-components/mkj-c
 import { MkjDateInputComponent } from "./utilities/form-input-components/mkj-date-input/mkj-date-input.component";
 import { MkjLinkInputComponent } from "./utilities/form-input-components/mkj-link-input/mkj-link-input.component";
 import { MkjContentLoaderComponent } from "./utilities/mkj-content-loader/mkj-content-loader.component";
-import { MkjDisplayFieldComponent } from "./utilities/mkj-display-field/mkj-display-field.component";
+import { MkjDisplayFieldComponent } from "./utilities/mkj-display-model/mkj-display-field/mkj-display-field.component";
 import { MkjRechnungComponent } from "./utilities/mkj-rechnung/mkj-rechnung.component";
 import { TerminTeilnahmeSelectorComponent } from "./utilities/mkj-termin-teilnahme-selector/termin-teilnahme-selector.component";
 import { MkjTileComponent } from "./utilities/mkj-tile-view/mkj-tile/mkj-tile.component";
@@ -352,7 +351,6 @@ registerLocaleData(localeDe);
         TerminCardComponent,
         StatistikTermineComponent,
         StatistikNotenComponent,
-        NotenCardComponent,
         StatistikOverviewComponent,
         MitgliedRolesPickerComponent,
         InstrumenteOverviewComponent,

diff --git a/src/app/components/archiv/noten/noten-card/noten-card.component.html b/src/app/components/archiv/noten/noten-card/noten-card.component.html
diff --git a/src/app/components/archiv/noten/noten-card/noten-card.component.scss b/src/app/components/archiv/noten/noten-card/noten-card.component.scss
diff --git a/src/app/components/archiv/noten/noten-card/noten-card.component.ts b/src/app/components/archiv/noten/noten-card/noten-card.component.ts
diff --git a/src/app/components/archiv/noten/noten-editor/noten-editor.component.html b/src/app/components/archiv/noten/noten-editor/noten-editor.component.html
@@ -63,11 +63,8 @@
         </div>
 
         <p-accordion class="p-field col-12 md:col-6">
-            <p-accordionTab header=" Hörbeispiele (Links)">
-                <mkj-link-input
-                    label="Links"
-                    formControlName="links"
-                ></mkj-link-input>
+            <p-accordionTab header="Links">
+                <mkj-link-input formControlName="links"></mkj-link-input>
             </p-accordionTab>
         </p-accordion>
     </div>

diff --git a/src/app/components/archiv/noten/noten-overview/noten-overview.component.html b/src/app/components/archiv/noten/noten-overview/noten-overview.component.html
@@ -9,10 +9,12 @@
 </mkj-list>
 
 <ng-template #rowexpansion let-noten>
-    <mkj-display-model [model]="noten"></mkj-display-model>
-    <div class="col-12 flex justify-content-center">
+    <mkj-display-model *ngIf="noten" [model]="noten"></mkj-display-model>
+    <div
+        *visibleFor="[PermissionMap.NOTEN_SAVE]"
+        class="col-12 flex justify-content-center"
+    >
         <button
-            *visibleFor="[PermissionMap.NOTEN_SAVE]"
             pButton
             pRipple
             label="Bearbeiten"

diff --git a/src/app/providers/display-model.ts b/src/app/providers/display-model.ts
@@ -6,6 +6,5 @@ export function displayModel(component: any): Provider {
     return {
         provide: DISPLAY_MODEL,
         useClass: component,
-        multi: true,
     };
 }
diff --git a/src/app/utilities/_display-model-configurations/display-model-configuration.interface.ts b/src/app/utilities/_display-model-configurations/display-model-configuration.interface.ts
@@ -4,8 +4,8 @@ export interface DisplayModelConfiguration<T> {
 
 export interface DisplayModelField<T> {
     label: string;
+    getValue: (model: T) => unknown;
     type?: "value" | "links";
-    field?: string;
     styleClass?: string;
     value?: unknown;
 }
diff --git a/src/app/utilities/_display-model-configurations/noten-display-model.class.ts b/src/app/utilities/_display-model-configurations/noten-display-model.class.ts
@@ -4,47 +4,59 @@ import {
     DisplayModelField,
 } from "./display-model-configuration.interface";
 import { Noten } from "src/app/models/Noten";
+import { MkjDatePipe } from "src/app/pipes/mkj-date.pipe";
 
 @Injectable()
 export class NotenDisplayModel implements DisplayModelConfiguration<Noten> {
-    fields: DisplayModelField<Noten>[] = [
+    constructor(private datePipe: MkjDatePipe) {}
+
+    public fields: DisplayModelField<Noten>[] = [
         {
             label: "Inventar Nr.",
-            field: "titel",
+            getValue: (model: Noten) => model.inventarId,
+        },
+        {
+            label: "Titel",
+            getValue: (model: Noten) => model.titel,
         },
         {
             label: "Komponist",
-            field: "komponist",
+            getValue: (model: Noten) => model.komponist,
         },
         {
             label: "Arrangeur",
-            field: "arrangeur",
+            getValue: (model: Noten) => model.arrangeur,
         },
         {
             label: "Verlag",
-            field: "verlag",
+            getValue: (model: Noten) => model.verlag,
         },
         {
             label: "Gattung",
-            field: "gattung",
+            getValue: (model: Noten) => model.gattung,
         },
         {
             label: "Ausgeliehen von",
-            field: "ausgeliehenVon",
+            getValue: (model: Noten) => model.ausgeliehenVon,
+        },
+        {
+            label: "Ausgeliehen seit",
+            getValue: (model: Noten) =>
+                this.datePipe.transform(model.ausgeliehenAb),
         },
         {
             label: "Aufbewahrungsort",
-            field: "aufbewahrungsort",
+            getValue: (model: Noten) => model.aufbewahrungsort,
         },
         {
             label: "Anmerkungen",
-            field: "aufbewahrungsort",
+            getValue: (model: Noten) => model.anmerkungen,
             styleClass: "lg:col-6 md:col-12 col-12",
         },
         {
             label: "Links",
             type: "links",
-            field: "links",
+            getValue: (model: Noten) => model.links,
             styleClass: "col-12",
         },
     ];

diff --git a/src/app/utilities/form-input-components/mkj-link-input/mkj-link-input.component.html b/src/app/utilities/form-input-components/mkj-link-input/mkj-link-input.component.html
@@ -21,14 +21,16 @@
     </div>
 </div>
 
-<div *ngIf="!readonly" class="flex flex-column gap-3 mt-5">
+@if(!readonly){
+<div class="flex flex-column gap-3 mt-5">
     <span class="p-float-label">
         <input
             type="text"
             [(ngModel)]="addLink.label"
+            (ngModelChange)="touch()"
             pInputText
             inputId="label"
-            [disabled]="disabled"
+            [disabled]="disabled$ | async"
             placeholder="z.B. Youtube"
             [ngClass]="{
                 'ng-invalid ng-dirty': !addLink.label && addLink.url
@@ -41,9 +43,10 @@
         <textarea
             type="text"
             [(ngModel)]="addLink.url"
+            (ngModelChange)="touch()"
             pInputTextarea
             inputId="label"
-            [disabled]="disabled"
+            [disabled]="disabled$ | async"
             placeholder="z.B. youtube.com/abc2345dfa2"
             [ngClass]="{
                 'ng-invalid ng-dirty': !addLink.url && addLink.label
@@ -57,7 +60,8 @@
         class="p-button-secondary p-button-rounded"
         label="Hinzufügen"
         icon="pi pi-plus"
-        [disabled]="!addLink.label || !addLink.url"
+        [disabled]="!addLink.label || !addLink.url || disabled$ | async"
         (click)="addLinkToList()"
     ></button>
 </div>
+}
diff --git a/src/app/utilities/form-input-components/mkj-link-input/mkj-link-input.component.ts b/src/app/utilities/form-input-components/mkj-link-input/mkj-link-input.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { Component, Injector, Input } from "@angular/core";
 import {
     AbstractControl,
     ControlValueAccessor,
@@ -7,6 +7,7 @@ import {
 } from "@angular/forms";
 import { controlValidator } from "src/app/providers/control-validator";
 import { controlValueAccessor } from "src/app/providers/control-value-accessor";
+import { AbstractControlAccessor } from "../abstract-control-accessor";
 
 export type Link = {
     url: string;
@@ -22,7 +23,10 @@ export type Link = {
         controlValidator(MkjLinkInputComponent),
     ],
 })
-export class MkjLinkInputComponent implements ControlValueAccessor, Validator {
+export class MkjLinkInputComponent
+    extends AbstractControlAccessor<string>
+    implements Validator
+{
     private _jsonLinks: string;
     @Input()
     public get jsonLinks(): string {
@@ -43,12 +47,16 @@ export class MkjLinkInputComponent implements ControlValueAccessor, Validator {
         label: "",
     };
 
-    public disabled: boolean;
-
-    public onChange: (value: string) => void;
-    public onTouch: () => void;
-
-    constructor() {}
+    constructor(inj: Injector) {
+        super(inj);
+        this.subs.sink = this.value$.subscribe((value) => {
+            try {
+                this.links = JSON.parse(value) ?? [];
+            } catch {
+                this.links = [];
+            }
+        });
+    }
 
     public addLinkToList(): void {
         if (this.addLink.url && this.addLink.label) {
@@ -71,32 +79,15 @@ export class MkjLinkInputComponent implements ControlValueAccessor, Validator {
 
     public onInternChange(): void {
         if (this.links.length === 0) {
-            this.onChange(null);
+            this.change(null);
         } else {
             const formattedValue = JSON.stringify(this.links);
-            this.onChange(formattedValue);
+            this.change(formattedValue);
         }
-        this.onTouch();
-    }
-
-    writeValue(obj: string): void {
-        try {
-            this.links = JSON.parse(obj) ?? [];
-        } catch {
-            this.links = [];
-        }
-    }
-    registerOnChange(fn: any): void {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn: any): void {
-        this.onTouch = fn;
-    }
-    setDisabledState(isDisabled: boolean): void {
-        this.disabled = isDisabled;
+        this.touch();
     }
 
-    validate(control: AbstractControl<any, any>): ValidationErrors {
+    public validate(control: AbstractControl<any, any>): ValidationErrors {
         if (!this.addLink.label && !this.addLink.url) {
             return null;
         }

diff --git a/...ay-field/mkj-display-field.component.html → ...ay-field/mkj-display-field.component.html b/...ay-field/mkj-display-field.component.html → ...ay-field/mkj-display-field.component.html
diff --git a/...ay-field/mkj-display-field.component.scss → ...ay-field/mkj-display-field.component.scss b/...ay-field/mkj-display-field.component.scss → ...ay-field/mkj-display-field.component.scss
diff --git a/...play-field/mkj-display-field.component.ts → ...play-field/mkj-display-field.component.ts b/...play-field/mkj-display-field.component.ts → ...play-field/mkj-display-field.component.ts
diff --git a/src/app/utilities/mkj-display-model/mkj-display-model.component.html b/src/app/utilities/mkj-display-model/mkj-display-model.component.html
@@ -3,17 +3,26 @@
         @for(c of config.fields; track c.label){ @if(c.value){
         <div [class]="c.styleClass ?? 'lg:col-3 md:col-4 col-12'">
             <mkj-display-field [label]="c.label">
+                @switch(c.type){ @case('links'){
+                <mkj-link-input
+                    [jsonLinks]="c.value"
+                    [readonly]="true"
+                ></mkj-link-input>
+                } @default {
                 {{ c.value }}
+                } }
             </mkj-display-field>
         </div>
         } }
+
+        <div class="col-12 flex text-sm opacity-50 justify-space-start gap-2">
+            @if(model.created_at){
+            <p>Erstellt: {{ model.created_at | mkjDate }}</p>
+            } @if(model.created_by && model.updated_at){
+            <p>|</p>
+            } @if(model.updated_at){
+            <p>Aktualisiert: {{ model.updated_at | mkjDate }}</p>
+            }
+        </div>
     </div>
-    <!-- <div class="col-12">
-        <mkj-display-field label="Links">
-            <mkj-link-input
-                [jsonLinks]="noten.links"
-                [readonly]="true"
-            ></mkj-link-input>
-        </mkj-display-field>
-    </div> -->
 </div>