Update material type list

src/app/modules/company/pages/list/list.component.html

@@ -17,7 +17,7 @@
 
   <ng-container matColumnDef="editButton">
     <th mat-header-cell *matHeaderCellDef></th>
-    <td mat-cell *matCellDef="let company; let i = index">
+    <td mat-cell [class.disabled]="!hasEditPermission" *matCellDef="let company; let i = index">
       <cre-accent-button [creInteractiveCell]="i" routerLink="/catalog/company/edit/{{company.id}}">
         Modifier
       </cre-accent-button>

src/app/modules/company/pages/list/list.component.ts

@@ -15,19 +15,10 @@ import {AccountService} from '../../../accounts/services/account.service'
 })
 export class ListComponent extends ErrorHandlingComponent {
   companies$ = this.companyService.all.pipe(tap(companies => this.companiesEmpty = companies.length <= 0))
-
-  // columns = [
-  //   {def: 'name', title: 'Nom', valueFn: c => c.name}
-  // ]
-  columns = ['name', 'editButton']
-  buttons = [{
-    text: 'Modifier',
-    linkFn: t => `/catalog/company/edit/${t.id}`,
-    permission: Permission.EDIT_COMPANIES
-  }]
-
   companiesEmpty = false
 
+  columns = ['name', 'editButton']
+
   constructor(
     private companyService: CompanyService,
     private accountService: AccountService,

src/app/modules/material-type/material-type.module.ts

@@ -6,6 +6,9 @@ import { ListComponent } from './pages/list/list.component';
 import {SharedModule} from "../shared/shared.module";
 import { AddComponent } from './pages/add/add.component';
 import { EditComponent } from './pages/edit/edit.component';
+import {CreActionBarModule} from '../shared/components/action-bar/action-bar.module'
+import {CreButtonsModule} from '../shared/components/buttons/buttons.module'
+import {CreTablesModule} from '../shared/components/tables/tables.module'
 
 
 @NgModule({
@@ -13,7 +16,10 @@ import { EditComponent } from './pages/edit/edit.component';
   imports: [
     CommonModule,
     MaterialTypeRoutingModule,
-    SharedModule
+    SharedModule,
+    CreActionBarModule,
+    CreButtonsModule,
+    CreTablesModule
   ]
 })
 export class MaterialTypeModule { }

src/app/modules/material-type/pages/list/list.component.html

@@ -1,7 +1,40 @@
-<cre-entity-list
+<cre-action-bar [reverse]="true">
-  [entities$]="materialTypes$"
+  <cre-action-group>
-  [columns]="columns"
+    <cre-accent-button routerLink="/catalog/materialtype/add">Ajouter</cre-accent-button>
-  [buttons]="buttons"
+  </cre-action-group>
-  addLink="/catalog/materialtype/add"
+</cre-action-bar>
-  addPermission="EDIT_MATERIAL_TYPES">
+
-</cre-entity-list>
+<cre-warning-alert *ngIf="materialTypesEmpty">
+  <p>Il n'y a actuellement aucun type de produit enregistré dans le système.</p>
+  <p *ngIf="hasEditPermission">Vous pouvez en créer un <b><a routerLink="/catalog/materialtype/add">ici</a></b>.</p>
+</cre-warning-alert>
+
+<cre-table
+  *ngIf="!materialTypesEmpty"
+  class="mx-auto"
+  [dataSource]="materialTypes$ | async"
+  [columns]="columns">
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef>Nom</th>
+    <td mat-cell *matCellDef="let materialType">{{materialType.name}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="prefix">
+    <th mat-header-cell *matHeaderCellDef>Préfix</th>
+    <td mat-cell *matCellDef="let materialType">{{materialType.prefix}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="usePercentages">
+    <th mat-header-cell *matHeaderCellDef>Utilise les pourcentages</th>
+    <td mat-cell *matCellDef="let materialType">{{materialType.usePercentages ? 'Oui' : 'Non'}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="editButton">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell [class.disabled]="!hasEditPermission" *matCellDef="let materialType; let i = index">
+      <cre-accent-button [creInteractiveCell]="i" routerLink="/catalog/materialtype/edit/{{materialType.id}}">
+        Modifier
+      </cre-accent-button>
+    </td>
+  </ng-container>
+</cre-table>

src/app/modules/material-type/pages/list/list.component.ts

@@ -5,6 +5,8 @@ import {Permission} from '../../../shared/model/user'
 import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorService} from '../../../shared/service/error.service'
 import {AppState} from '../../../shared/app-state'
+import {tap} from 'rxjs/operators'
+import {AccountService} from '../../../accounts/services/account.service'
 
 @Component({
   selector: 'cre-list',
@@ -12,23 +14,16 @@ import {AppState} from '../../../shared/app-state'
   styleUrls: ['./list.component.sass']
 })
 export class ListComponent extends ErrorHandlingComponent {
-  materialTypes$ = this.materialTypeService.all
+  materialTypes$ = this.materialTypeService.all.pipe(
-  columns = [
+    tap(materialTypes => this.materialTypesEmpty = materialTypes.length <= 0)
-    {def: 'name', title: 'Nom', valueFn: t => t.name},
+  )
-    {def: 'prefix', title: 'Préfixe', valueFn: t => t.prefix},
+  materialTypesEmpty = false
-    {def: 'usePercentages', title: 'Utilise les pourcentages', valueFn: t => t.usePercentages ? 'Oui' : 'Non'}
+
-  ]
+  columns = ['name', 'prefix', 'usePercentages', 'editButton']
-  buttons = [
-    {
-      text: 'Modifier',
-      linkFn: t => `/catalog/materialtype/edit/${t.id}`,
-      permission: Permission.EDIT_MATERIAL_TYPES,
-      disabledFn: t => t.systemType
-    }
-  ]
 
   constructor(
     private materialTypeService: MaterialTypeService,
+    private accountService: AccountService,
     private appState: AppState,
     errorService: ErrorService,
     router: Router,
@@ -37,4 +32,8 @@ export class ListComponent extends ErrorHandlingComponent {
     super(errorService, activatedRoute, router)
     this.appState.title = 'Types de produit'
   }
+
+  get hasEditPermission(): boolean {
+    return this.accountService.hasPermission(Permission.EDIT_COMPANIES)
+  }
 }