Improving some more styling.

Author: renemadsen

eform-client/src/app/plugins/modules/backend-configuration-pn/modules/task-management/components/task-management-table/task-management-table.component.html

@@ -2,6 +2,7 @@
   <mtx-grid
     [data]="workOrderCases"
     [columns]="tableHeaders"
+    [cellTemplate]="{propertyName: propertyNameTpl, createdByName: createdByNameTpl, lastAssignedTo: lastAssignedToTpl, lastUpdatedBy: lastUpdatedByTpl, priority: priorityTpl, status: statusTpl}"
     [showPaginator]="false"
     [pageOnFront]="false"
     [rowStriped]="true"
@@ -16,3 +17,41 @@
   </mtx-grid>
 
 </div>
+
+
+
+<ng-template #propertyNameTpl let-row>
+<!--  <mat-chip color="primary">-->
+    <span>{{row.propertyName}}</span>
+<!--  </mat-chip>-->
+</ng-template>
+
+<ng-template #createdByNameTpl let-row>
+<!--  <mat-chip color="primary">-->
+    <div>{{row.createdByName}}</div>
+<!--  </mat-chip>-->
+</ng-template>
+
+<ng-template #lastAssignedToTpl let-row>
+<!--  <mat-chip color="primary">-->
+    <div>{{row.lastAssignedTo}}</div>
+<!--  </mat-chip>-->
+</ng-template>
+
+<ng-template #lastUpdatedByTpl let-row>
+<!--  <mat-chip color="primary">-->
+    <div>{{row.lastUpdatedBy}}</div>
+<!--  </mat-chip>-->
+</ng-template>
+
+<ng-template #priorityTpl let-row>
+  <mat-chip color="primary" [ngClass]="getPriorityClass(row.priority)">
+    <div>{{TaskManagementPrioritiesEnum[row.priority] | translate}}</div>
+  </mat-chip>
+</ng-template>
+
+<ng-template #statusTpl let-row>
+  <mat-chip color="primary">
+    <div>{{row.status | translate}}</div>
+  </mat-chip>
+</ng-template>

eform-client/src/app/plugins/modules/backend-configuration-pn/modules/task-management/components/task-management-table/task-management-table.component.ts

@@ -65,13 +65,14 @@ export class TaskManagementTableComponent implements OnInit {
       sortProp: {id: 'Priority'},
       sortable: true,
       class: 'priority',
-      formatter: (rowData: WorkOrderCaseModel) => this.translateService.instant(TaskManagementPrioritiesEnum[rowData.priority])},
+      // formatter: (rowData: WorkOrderCaseModel) => this.translateService.instant(TaskManagementPrioritiesEnum[rowData.priority])
+    },
     {
       header: this.translateService.stream('Status'),
       field: 'status',
       sortProp: {id: 'CaseStatusesEnum'},
       sortable: true,
-      formatter: (rowData: WorkOrderCaseModel) => `<span>${this.translateService.instant(rowData.status)}</span>`,
+      // formatter: (rowData: WorkOrderCaseModel) => `<span>${this.translateService.instant(rowData.status)}</span>`,
       class: 'status'
     },
     {
@@ -130,4 +131,17 @@ export class TaskManagementTableComponent implements OnInit {
   onOpenDeleteModal(workOrderCaseModel: WorkOrderCaseModel) {
     this.openDeleteModal.emit(workOrderCaseModel);
   }
+
+  protected readonly TaskManagementPrioritiesEnum = TaskManagementPrioritiesEnum;
+
+  priorityClassMap = {
+    [TaskManagementPrioritiesEnum.Urgent]: 'priority-urgent',
+    [TaskManagementPrioritiesEnum.High]: 'priority-high',
+    [TaskManagementPrioritiesEnum.Medium]: 'priority-medium',
+    [TaskManagementPrioritiesEnum.Low]: 'priority-low',
+  };
+
+  getPriorityClass(priority: number): string {
+    return this.priorityClassMap[priority] || '';
+  }
 }

eform-client/src/app/plugins/modules/backend-configuration-pn/modules/task-management/task-management.module.ts

@@ -24,6 +24,7 @@ import {MatDialogModule} from '@angular/material/dialog';
 import {MatCardModule} from '@angular/material/card';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {StatisticsModule} from '../statistics/statistics.module';
+import {MatChip} from "@angular/material/chips";
 
 @NgModule({
   declarations: [
@@ -33,27 +34,28 @@ import {StatisticsModule} from '../statistics/statistics.module';
     TaskManagementCreateShowModalComponent,
     TaskManagementDeleteModalComponent
   ],
-  imports: [
-    CommonModule,
-    TranslateModule,
-    RouterModule,
-    TaskManagementRouting,
-    EformSharedModule,
-    ReactiveFormsModule,
-    EformImportedModule,
-    FormsModule,
-    MatButtonModule,
-    MatTooltipModule,
-    MatIconModule,
-    MatFormFieldModule,
-    MtxSelectModule,
-    MatInputModule,
-    MtxGridModule,
-    MatDialogModule,
-    MatCardModule,
-    MatDatepickerModule,
-    StatisticsModule,
-  ],
+    imports: [
+        CommonModule,
+        TranslateModule,
+        RouterModule,
+        TaskManagementRouting,
+        EformSharedModule,
+        ReactiveFormsModule,
+        EformImportedModule,
+        FormsModule,
+        MatButtonModule,
+        MatTooltipModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MtxSelectModule,
+        MatInputModule,
+        MtxGridModule,
+        MatDialogModule,
+        MatCardModule,
+        MatDatepickerModule,
+        StatisticsModule,
+        MatChip,
+    ],
   providers: [],
 })
 export class TaskManagementModule {