replace p-tables with lists

dysTOS · Dec 18, 2023 · 2b9160c · 2b9160c
1 parent 93f2aa6
commit 2b9160c
Show file tree

Hide file tree

Showing 22 changed files with 313 additions and 105 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -194,6 +194,7 @@ import { PermissionSelectedPipe } from "./components/einstellungen/rollen-edit/p
 import { AnschriftenOverviewComponent as AnschriftOverviewComponent } from "./components/anschriften/anschriften-overview/anschriften-overview.component";
 import { AnschriftEditComponent } from "./components/anschriften/anschriften-edit/anschriften-edit.component";
 import { MkjListCellComponent } from "./utilities/mkj-list/mkj-list-cell/mkj-list-cell.component";
+import { ListCellValuePipe } from "./utilities/mkj-list/mkj-list-cell/list-cell-value.pipe";
 
 // FullCalendarModule.registerPlugins([
 //     dayGridPlugin,
@@ -331,6 +332,7 @@ registerLocaleData(localeDe);
         MkjToolbarComponent,
         AusrueckungEditorComponent,
         RollenEditComponent,
+        ListCellValuePipe,
         MkjTextTransformPipe,
         MkjDisplayFieldComponent,
         AatestComponent,

diff --git a/src/app/components/anschriften/anschriften-overview/anschriften-overview.component.html b/src/app/components/anschriften/anschriften-overview/anschriften-overview.component.html
@@ -1,14 +1,11 @@
-<mkj-content-loader [loading]="!adressen">
-    <div
-        *ngFor="let add of adressen"
-        class="col-12 flex justify-content-between border-1"
-    >
-        <span>{{ add.vorname }} {{ add.zuname }}{{ add.firma }}</span>
-        <button
-            pButton
-            icon="pi pi-pencil"
-            class="p-button-text p-button-small"
-            [routerLink]="add.id"
-        ></button>
-    </div>
-</mkj-content-loader>
+<mkj-list
+    [datasource]="datasource"
+    [configuration]="listConfig"
+    [templateMap]="{
+        rowexpansion: null,
+    }"
+    (onDoubleClick)="navigateToEdit($event)"
+>
+</mkj-list>
+
+<ng-template #rowexpansion let-anschrift> </ng-template>
diff --git a/src/app/components/anschriften/anschriften-overview/anschriften-overview.component.ts b/src/app/components/anschriften/anschriften-overview/anschriften-overview.component.ts
@@ -2,26 +2,26 @@ import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Anschrift } from "src/app/models/Anschrift";
 import { PermissionMap } from "src/app/models/User";
-import { AnschriftenApiService } from "src/app/services/api/anschriften-api.service";
+import { UserService } from "src/app/services/authentication/user.service";
+import { AnschriftenListConfig } from "src/app/utilities/_list-configurations/anschriften-list-config.class";
+import { AnschriftenListDatasource } from "src/app/utilities/_list-datasources/anschriften-list-datasource.class";
 import { MkjToolbarService } from "src/app/utilities/mkj-toolbar/mkj-toolbar.service";
 
 @Component({
     selector: "app-anschriften-overview",
     templateUrl: "./anschriften-overview.component.html",
     styleUrl: "./anschriften-overview.component.scss",
+    providers: [AnschriftenListConfig, AnschriftenListDatasource],
 })
 export class AnschriftenOverviewComponent {
-    public adressen: Anschrift[];
-
     constructor(
-        private apiService: AnschriftenApiService,
-        private toolbarService: MkjToolbarService,
+        public datasource: AnschriftenListDatasource,
+        public listConfig: AnschriftenListConfig,
+        toolbarService: MkjToolbarService,
         private router: Router,
-        private route: ActivatedRoute
+        private route: ActivatedRoute,
+        private userServie: UserService
     ) {
-        apiService.getList().subscribe((list) => {
-            this.adressen = list.values;
-        });
         toolbarService.header = "Adressen";
         toolbarService.buttons = [
             {
@@ -35,4 +35,12 @@ export class AnschriftenOverviewComponent {
             },
         ];
     }
+
+    public navigateToEdit(item: Anschrift): void {
+        if (this.userServie.hasPermission(PermissionMap.ANSCHRIFTEN_SAVE)) {
+            this.router.navigate([item.id], {
+                relativeTo: this.route,
+            });
+        }
+    }
 }
diff --git a/...pp/components/archiv/instrumente/instrumente-overview/instrumente-overview.component.html b/...pp/components/archiv/instrumente/instrumente-overview/instrumente-overview.component.html
@@ -1,29 +1,11 @@
-<p-table [value]="values" [loading]="!values" responsiveLayout="scroll">
-    <ng-template pTemplate="header">
-        <tr>
-            <th>Bezeichnung</th>
-            <th>Marke</th>
-            <th pSortableColumn="gruppe.name">
-                Register <p-sortIcon field="vonDatum"></p-sortIcon>
-            </th>
-            <th
-                *visibleFor="[PermissionMap.INSTRUMENTE_SAVE]"
-                style="width: 5rem"
-            ></th>
-        </tr>
-    </ng-template>
-    <ng-template pTemplate="body" let-item>
-        <tr>
-            <td>{{ item.bezeichnung }}</td>
-            <td>{{ item.marke }}</td>
-            <td>{{ item.gruppe?.name }}</td>
-            <td *visibleFor="[PermissionMap.INSTRUMENTE_SAVE]">
-                <button
-                    pButton
-                    icon="pi pi-pencil"
-                    class="p-button-rounded p-button-outlined p-button-info"
-                    (click)="navigateEditor(item)"
-                ></button>
-            </td>
-        </tr> </ng-template
-></p-table>
+<mkj-list
+    [datasource]="datasource"
+    [configuration]="listConfig"
+    [templateMap]="{
+        rowexpansion: null,
+    }"
+    (onDoubleClick)="navigateEditor($event)"
+>
+</mkj-list>
+
+<ng-template #rowexpansion let-anschrift> </ng-template>
diff --git a/src/app/components/archiv/instrumente/instrumente-overview/instrumente-overview.component.ts b/src/app/components/archiv/instrumente/instrumente-overview/instrumente-overview.component.ts
@@ -1,48 +1,45 @@
-import { Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Instrument } from "src/app/models/Instrument";
 import { PermissionMap } from "src/app/models/User";
-import { MkjToolbarService } from "src/app/utilities/mkj-toolbar/mkj-toolbar.service";
 import { AppConfigService } from "src/app/services/app-config.service";
-import { InstrumenteApiService } from "src/app/services/api/instrumente-api.service";
+import { UserService } from "src/app/services/authentication/user.service";
+import { InstrumenteListConfig } from "src/app/utilities/_list-configurations/instrumente-list-config.class";
+import { InstrumenteListDatasource } from "src/app/utilities/_list-datasources/instrumente-list-datasource.class";
+import { MkjToolbarService } from "src/app/utilities/mkj-toolbar/mkj-toolbar.service";
 
 @Component({
     selector: "app-instrumente-overview",
     templateUrl: "./instrumente-overview.component.html",
     styleUrls: ["./instrumente-overview.component.scss"],
+    providers: [InstrumenteListDatasource, InstrumenteListConfig],
 })
-export class InstrumenteOverviewComponent implements OnInit {
-    public values: Instrument[];
-    public readonly PermissionMap = PermissionMap;
-
+export class InstrumenteOverviewComponent {
     constructor(
-        private toolbarService: MkjToolbarService,
-        private apiService: InstrumenteApiService,
+        public datasource: InstrumenteListDatasource,
+        public listConfig: InstrumenteListConfig,
         private router: Router,
         private route: ActivatedRoute,
+        private userService: UserService,
+        toolbarService: MkjToolbarService,
         configService: AppConfigService
     ) {
-        this.toolbarService.header = configService.appNaming.Instrumente;
-        this.toolbarService.backButton = null;
-        this.toolbarService.buttons = [
+        toolbarService.header = configService.appNaming.Instrumente;
+        toolbarService.buttons = [
             {
                 icon: "pi pi-plus",
                 label: "Neu",
                 permissions: [PermissionMap.INSTRUMENTE_SAVE],
-                click: () => {
-                    this.router.navigate(["new"], { relativeTo: this.route });
-                },
+                click: () => this.navigateEditor(),
             },
         ];
     }
 
-    public ngOnInit(): void {
-        this.apiService.getList(null).subscribe((data) => {
-            this.values = data.values;
+    public navigateEditor(instrument?: Instrument): void {
+        if (!this.userService.hasPermission(PermissionMap.INSTRUMENTE_SAVE))
+            return;
+        this.router.navigate([instrument?.id ?? "new"], {
+            relativeTo: this.route,
         });
     }
-
-    public navigateEditor(instrument: Instrument): void {
-        this.router.navigate([instrument.id], { relativeTo: this.route });
-    }
 }
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
@@ -4,6 +4,7 @@
     [templateMap]="{
         rowexpansion: rowexpansion,
     }"
+    (onDoubleClick)="navigateToEditView($event)"
 >
 </mkj-list>
 

diff --git a/src/app/components/archiv/noten/noten-overview/noten-overview.component.ts b/src/app/components/archiv/noten/noten-overview/noten-overview.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { Noten } from "src/app/models/Noten";
 import { PermissionMap } from "src/app/models/User";
 import { AppConfigService } from "src/app/services/app-config.service";
+import { UserService } from "src/app/services/authentication/user.service";
 import { NotenListConfig } from "src/app/utilities/_list-configurations/noten-list-config.class";
 import { NotenListDatasource } from "src/app/utilities/_list-datasources/noten-list-datasource.class";
 import { MkjToolbarService } from "src/app/utilities/mkj-toolbar/mkj-toolbar.service";
@@ -22,7 +23,8 @@ export class NotenOverviewComponent {
         private toolbarService: MkjToolbarService,
         private router: Router,
         private route: ActivatedRoute,
-        private namingService: AppConfigService
+        private namingService: AppConfigService,
+        private userService: UserService
     ) {
         this.toolbarService.header = this.namingService.appNaming.Noten;
         this.toolbarService.buttons = [
@@ -36,6 +38,9 @@ export class NotenOverviewComponent {
     }
 
     public navigateToEditView(noten?: Noten) {
+        if (!this.userService.hasPermission(PermissionMap.NOTEN_SAVE)) {
+            return;
+        }
         this.router.navigate([noten?.id ?? "new"], { relativeTo: this.route });
     }
 }
diff --git a/src/app/components/einstellungen/rollen-edit/permission-included.pipe.ts b/src/app/components/einstellungen/rollen-edit/permission-included.pipe.ts
@@ -5,7 +5,7 @@ import { Permission } from "../../../models/User";
     name: "permissionIncluded",
 })
 export class PermissionSelectedPipe implements PipeTransform {
-    transform(value: Permission, permissions: Permission[]) {
+    public transform(value: Permission, permissions: Permission[]) {
         return permissions?.some((p) => p.id === value.id);
     }
 }
diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html
@@ -1,4 +1,7 @@
-<p-toast></p-toast>
+<div style="z-index: 10000">
+    <p-toast></p-toast>
+    <p-toast key="bottom-center" position="bottom-center"></p-toast>
+</div>
 <div class="login-body">
     <div class="login-panel p-fluid">
         <div class="grid grid-nogutter">

diff --git a/src/app/pages/signup/signup.component.html b/src/app/pages/signup/signup.component.html
@@ -1,4 +1,7 @@
-<p-toast></p-toast>
+<div style="z-index: 10000">
+    <p-toast></p-toast>
+    <p-toast key="bottom-center" position="bottom-center"></p-toast>
+</div>
 <div class="login-body">
     <div class="login-panel p-fluid">
         <div class="grid grid-nogutter">

diff --git a/src/app/utilities/_list-configurations/_list-configuration.class.ts b/src/app/utilities/_list-configurations/_list-configuration.class.ts
@@ -2,23 +2,31 @@ export interface ListConfiguration<T> {
     listName: string;
     columns: MkjListColumn<T>[];
     showTotalCount?: boolean;
-    sort?: {
-        field: string;
-        order: number;
-    };
-    globalFilter?: {
-        fields: string[];
-        matchMode?: string;
-    };
+    sort?: MkjListSortConfiguration<T>;
+    globalFilter?: MkjListGlobalFilterConfiguration<T>;
 }
 
 export interface MkjListColumn<T> {
-    type: "string" | "currency" | "date" | "boolean" | "template";
+    type: "string" | "currency" | "date" | "boolean" | "template" | "value";
     header?: string;
     field?: keyof T;
+    templateName?: string;
     styleClass?: string;
     sortable?: boolean;
-    filter?: {
-        filterOptions?: any;
-    };
+    filter?: MkjListColumnFilter;
+    getValue?: (item: T) => any;
+}
+
+export interface MkjListSortConfiguration<T> {
+    field: keyof T;
+    order: number;
+}
+
+export interface MkjListGlobalFilterConfiguration<T> {
+    fields: Array<keyof T>;
+    matchMode?: string;
+}
+
+export interface MkjListColumnFilter {
+    filterOptions?: any;
 }
diff --git a/src/app/utilities/_list-configurations/anschriften-list-config.class.ts b/src/app/utilities/_list-configurations/anschriften-list-config.class.ts
@@ -0,0 +1,43 @@
+import { Noten, NotenGattungMap } from "src/app/models/Noten";
+import {
+    ListConfiguration,
+    MkjListColumn,
+    MkjListGlobalFilterConfiguration,
+    MkjListSortConfiguration,
+} from "./_list-configuration.class";
+import { Injectable } from "@angular/core";
+import { Anschrift } from "src/app/models/Anschrift";
+
+@Injectable()
+export class AnschriftenListConfig implements ListConfiguration<Anschrift> {
+    listName: string = "Anschriften";
+    showTotalCount = true;
+    sort: MkjListSortConfiguration<Anschrift> = {
+        field: "zuname",
+        order: 1,
+    };
+    globalFilter: MkjListGlobalFilterConfiguration<Anschrift> = {
+        fields: ["vorname", "zuname", "firma"],
+        matchMode: "contains",
+    };
+    columns: MkjListColumn<Anschrift>[] = [
+        {
+            header: "Vorname",
+            field: "vorname",
+            type: "string",
+            sortable: true,
+        },
+        {
+            header: "Nachname",
+            field: "zuname",
+            type: "string",
+            sortable: true,
+        },
+        {
+            header: "Firma",
+            field: "firma",
+            type: "string",
+            sortable: true,
+        },
+    ];
+}
diff --git a/src/app/utilities/_list-configurations/instrumente-list-config.class.ts b/src/app/utilities/_list-configurations/instrumente-list-config.class.ts
@@ -0,0 +1,48 @@
+import { Noten, NotenGattungMap } from "src/app/models/Noten";
+import {
+    ListConfiguration,
+    MkjListColumn,
+    MkjListGlobalFilterConfiguration,
+    MkjListSortConfiguration,
+} from "./_list-configuration.class";
+import { Injectable } from "@angular/core";
+import { Anschrift } from "src/app/models/Anschrift";
+import { Instrument } from "src/app/models/Instrument";
+import { AppConfigService } from "src/app/services/app-config.service";
+
+@Injectable()
+export class InstrumenteListConfig implements ListConfiguration<Instrument> {
+    constructor(private appNaming: AppConfigService) {}
+
+    listName: string = "Instrumente";
+    showTotalCount = true;
+    sort: MkjListSortConfiguration<Instrument> = {
+        field: "marke",
+        order: 1,
+    };
+    globalFilter: MkjListGlobalFilterConfiguration<Instrument> = {
+        fields: ["bezeichnung", "marke"],
+        matchMode: "contains",
+    };
+    columns: MkjListColumn<Instrument>[] = [
+        {
+            header: "Bezeichung",
+            field: "bezeichnung",
+            type: "string",
+            sortable: true,
+        },
+        {
+            header: "Marke",
+            field: "marke",
+            type: "string",
+            sortable: true,
+        },
+        {
+            header: this.appNaming.appNaming.Gruppen,
+            field: null,
+            templateName: "gruppen",
+            type: "value",
+            getValue: (item: Instrument) => item.gruppe?.name,
+        },
+    ];
+}