fee page, table, labels

src/app/features/fee/default-price/default-price.component.html

@@ -4,7 +4,7 @@
     label name. Duplicates label will be simply overriden
   </div>
   <form [formGroup]="form" (submit)="submit()">
-    <div class="d-flex justify-content-end me-1 mb-1">
+    <div class="d-flex justify-content-end me-1 mb-1" *ngIf="hasRoleAdmin">
       <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Submit</button>
     </div>
     <ng-container formArrayName="defaultPrices">
@@ -15,7 +15,7 @@
             <th>Label</th>
             <th>Price HVAT</th>
             <th>VAT</th>
-            <th class="text-center fit">
+            <th class="text-center fit" *ngIf="hasRoleAdmin">
               <button (click)="add($event)" class="btn btn-link me-1">
                 <fa-icon class="text-primary" icon="plus"></fa-icon>
               </button>
@@ -29,14 +29,8 @@
                 <p-colorPicker [autoZIndex]="true" [id]="'colorHex' + i" formControlName="colorHex"></p-colorPicker>
               </td>
               <td>
-                <input
-                  type="text"
-                  (input)="changeTextToUppercase(i)"
-                  pattern="[a-zA-Z0-9]+"
-                  class="form-control form-control-sm"
-                  [id]="'tag' + i"
-                  formControlName="tag"
-                />
+                <input type="text" (input)="changeTextToUppercase(i)" pattern="[a-zA-Z0-9]+"
+                  class="form-control form-control-sm" [id]="'tag' + i" formControlName="tag" />
               </td>
               <td>
                 <div class="input-group input-group-sm mb-3">
@@ -50,7 +44,7 @@
                   <input type="number" class="form-control" [id]="'vat' + i" formControlName="vat" />
                 </div>
               </td>
-              <td class="text-center fit">
+              <td class="text-center fit" *ngIf="hasRoleAdmin">
                 <button class="btn btn-link text-danger" (click)="remove($event, i)" [disabled]="canRemove(i)">
                   <fa-icon [icon]="['fas', 'times']"></fa-icon>
                 </button>

src/app/features/fee/default-price/default-price.component.ts

@@ -5,6 +5,7 @@ import { Label } from '@core/models/fee';
 import { firstValueFrom, Observable } from 'rxjs';
 import { LabelService } from '@core/service/label.service';
 import { ToastService } from '@core/service/toast.service';
+import { User } from '@core/models/user';
 
 @Component({
   selector: 'app-default-price',
@@ -14,21 +15,31 @@ import { ToastService } from '@core/service/toast.service';
 export class DefaultPriceComponent implements OnInit {
   form: UntypedFormGroup;
   tags: Label[];
+  @Input()
+  user: User;
+
+  get hasRoleAdmin(): boolean {
+    return this.user.authorities.includes('ADMIN');
+  }
   constructor(
     @Optional() public activeModal: NgbActiveModal,
     private labelService: LabelService,
     private toastService: ToastService,
-    private fb: UntypedFormBuilder
-  ) {}
+    private fb: UntypedFormBuilder,
+  ) { }
 
   async ngOnInit() {
     this.tags = await firstValueFrom(this.labelService.findAll());
     this.loadForm();
   }
 
   loadForm() {
+    const defaultPrices = [];
+    for (const tag of this.tags.sort((a, b) => a.name.localeCompare(b.name))) {
+      defaultPrices.push(this.convertPrice(tag));
+    }
     this.form = this.fb.group({
-      defaultPrices: this.fb.array(this.tags.sort((a, b) => a.name.localeCompare(b.name)).map(this.convertPrice)),
+      defaultPrices: this.fb.array(defaultPrices),
     });
   }
 
@@ -38,18 +49,27 @@ export class DefaultPriceComponent implements OnInit {
 
   add($event: MouseEvent) {
     $event.preventDefault();
+    if (!this.hasRoleAdmin) {
+      return;
+    }
     this.defaultPrices.push(
       this.convertPrice({
         id: null,
-      })
+      }),
     );
   }
   remove($event: MouseEvent, idx: number) {
     $event.preventDefault();
+    if (!this.hasRoleAdmin) {
+      return;
+    }
     this.defaultPrices.removeAt(idx);
   }
   canRemove(idx: number) {
     const group = this.defaultPrices.at(idx);
+    if (!this.hasRoleAdmin) {
+      return;
+    }
     return group.get('id').value?.length;
   }
 
@@ -62,39 +82,42 @@ export class DefaultPriceComponent implements OnInit {
       colorHex: new UntypedFormControl(
         {
           value: price.colorHex,
-          disabled: false,
+          disabled: !this.hasRoleAdmin,
         },
-        [Validators.required]
+        [Validators.required],
       ),
       tag: new UntypedFormControl(
         {
           value: price.name,
-          disabled: price.name?.length,
+          disabled: price.name?.length || !this.hasRoleAdmin,
         },
-        [Validators.required]
+        [Validators.required],
       ),
       priceHVAT: new UntypedFormControl(
         {
           value: price.priceHVAT,
-          disabled: price.noDefaultPrice,
+          disabled: price.noDefaultPrice || !this.hasRoleAdmin,
         },
-        [Validators.required]
+        [Validators.required],
       ),
       vat: new UntypedFormControl(
         {
           value: price.vat,
-          disabled: price.noDefaultPrice,
+          disabled: price.noDefaultPrice || !this.hasRoleAdmin,
         },
-        [Validators.required]
+        [Validators.required],
       ),
     });
   }
-  changeTextToUppercase(idx) {
+  changeTextToUppercase(idx: any) {
     const field = this.defaultPrices.at(idx).get('tag');
     field.patchValue(field.value?.toUpperCase());
   }
 
   async submit() {
+    if (!this.hasRoleAdmin) {
+      return;
+    }
     const labels = this.defaultPrices.controls?.map((p) => {
       return {
         id: p.get('id').value,

src/app/features/fee/fee-page/fee-page.component.html

@@ -14,12 +14,10 @@ <h4 [class.pt-3]="!fullScreen">{{ title }}</h4>
     <a ngbNavLink routerLink="/fee/unprocessed">Unprocessed</a>
     <ng-template ngbNavContent>
       <div [class.fullscreen]="fullScreen" [class.p-3]="fullScreen">
-        <ng-component
-          [ngTemplateOutlet]="fullScreenTemplate"
-          [ngTemplateOutletContext]="{ title: 'Unprocessed' }"
-        ></ng-component>
-        <div class="d-block">
-          <app-fee-table-result [archived]="false"></app-fee-table-result>
+        <ng-component [ngTemplateOutlet]="fullScreenTemplate"
+          [ngTemplateOutletContext]="{ title: 'Unprocessed' }"></ng-component>
+        <div class="d-block" *ngIf="user">
+          <app-fee-table-result [archived]="false" [user]="user"></app-fee-table-result>
         </div>
       </div>
     </ng-template>
@@ -28,13 +26,11 @@ <h4 [class.pt-3]="!fullScreen">{{ title }}</h4>
     <a ngbNavLink routerLink="/fee/processed">Processed</a>
     <ng-template ngbNavContent>
       <div [class.fullscreen]="fullScreen" [class.p-3]="fullScreen">
-        <ng-component
-          [ngTemplateOutlet]="fullScreenTemplate"
-          [ngTemplateOutletContext]="{ title: 'Processed' }"
-        ></ng-component>
+        <ng-component [ngTemplateOutlet]="fullScreenTemplate"
+          [ngTemplateOutletContext]="{ title: 'Processed' }"></ng-component>
 
-        <div class="d-block">
-          <app-fee-table-result [archived]="true"></app-fee-table-result>
+        <div class="d-block" *ngIf="user">
+          <app-fee-table-result [archived]="true" [user]="user"></app-fee-table-result>
         </div>
       </div>
     </ng-template>
@@ -43,13 +39,11 @@ <h4 [class.pt-3]="!fullScreen">{{ title }}</h4>
     <a ngbNavLink routerLink="/fee/labels">Labels</a>
     <ng-template ngbNavContent>
       <div [class.fullscreen]="fullScreen" [class.p-3]="fullScreen">
-        <ng-component
-          [ngTemplateOutlet]="fullScreenTemplate"
-          [ngTemplateOutletContext]="{ title: 'Labels' }"
-        ></ng-component>
+        <ng-component [ngTemplateOutlet]="fullScreenTemplate"
+          [ngTemplateOutletContext]="{ title: 'Labels' }"></ng-component>
 
-        <div class="d-block">
-          <app-default-price></app-default-price>
+        <div class="d-block" *ngIf="user">
+          <app-default-price [user]="user"></app-default-price>
         </div>
       </div>
     </ng-template>

src/app/features/fee/fee-page/fee-page.component.ts

@@ -2,6 +2,8 @@ import { Component, HostListener, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { PersonalInfoService } from '@core/service/personal.info.service';
+import { User } from '@core/models/user';
 
 @Component({
   selector: 'app-fee-page',
@@ -11,17 +13,24 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 export class FeePageComponent implements OnInit {
   activeId: string;
   fullScreen: boolean;
+  user: User;
 
   @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
     if (!this.modalService.hasOpenModals()) {
       this.fullScreen = false;
     }
   }
 
-  constructor(public route: ActivatedRoute, private modalService: NgbModal, private titleService: Title) {}
+  constructor(
+    public route: ActivatedRoute,
+    private personalInfoService: PersonalInfoService,
+    private modalService: NgbModal,
+    private titleService: Title,
+  ) { }
 
   ngOnInit(): void {
     this.titleService.setTitle('Expenses');
     this.activeId = this.route.snapshot.params.name || 'unprocessed';
+    this.personalInfoService.me().subscribe((u) => (this.user = u));
   }
 }

src/app/features/fee/fee-table-result/fee-table-result.component.html

@@ -6,31 +6,24 @@
     <p>
       Total Elements: <span class="text-danger">{{ fees.totalElements }}</span>
     </p>
-    <div *ngIf="!archived" ngbDropdown class="d-inline-block mt-0" container="body">
+    <div *ngIf="!archived && hasRoleAdmin" ngbDropdown class="d-inline-block mt-0" container="body">
       <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
         <fa-icon icon="exclamation"></fa-icon>&nbsp;Actions
       </button>
       <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
         <button [disabled]="showTagForm || !selectedRows.length" (click)="showTagForm = !showTagForm" ngbDropdownItem>
           <fa-icon [icon]="['fas', 'dot-circle']"></fa-icon>&nbsp;Set Tag
         </button>
-        <button
-          (click)="openProcessValidation()"
-          [disabled]="showTagForm || !selectedRows.length || !activeDossier"
-          ngbDropdownItem
-        >
+        <button (click)="openProcessValidation()" [disabled]="showTagForm || !selectedRows.length || !activeDossier"
+          ngbDropdownItem>
           <fa-icon [icon]="['fas', 'cog']"></fa-icon>&nbsp;Process
         </button>
         <button [disabled]="showTagForm || !selectedRows.length" ngbDropdownItem (click)="deleteFees()">
           <fa-icon [icon]="['fas', 'times']"></fa-icon>&nbsp;Delete
         </button>
         <button ngbDropdownItem (click)="load()"><fa-icon [icon]="['fas', 'sync']"></fa-icon>&nbsp;Reload</button>
-        <button
-          *ngIf="!archived"
-          [disabled]="showTagForm || selectedRows.length > 0"
-          ngbDropdownItem
-          (click)="manualSubmit()"
-        >
+        <button *ngIf="!archived" [disabled]="showTagForm || selectedRows.length > 0" ngbDropdownItem
+          (click)="manualSubmit()">
           <fa-icon [icon]="['fas', 'upload']"></fa-icon>&nbsp;Manual Submit
         </button>
       </div>
@@ -52,16 +45,11 @@
           <th>Subject</th>
           <th class="d-md-table-cell d-none">Date received</th>
           <th class="d-md-table-cell d-none fit">Files</th>
-          <th class="fit"></th>
-          <th class="text-center fit" *ngIf="!archived">
-            <input
-              type="checkbox"
-              class="form-check-input"
-              aria-label="select"
-              (change)="toggleAllRows($event, fees.content)"
-              [checked]="isAllFeesSelected(fees.content)"
-              [disabled]="!fees.content.length"
-            />
+          <th class="fit" *ngIf="hasRoleAdmin"></th>
+          <th class="text-center fit" *ngIf="!archived && hasRoleAdmin">
+            <input type="checkbox" class="form-check-input" aria-label="select"
+              (change)="toggleAllRows($event, fees.content)" [checked]="isAllFeesSelected(fees.content)"
+              [disabled]="!fees.content.length" />
           </th>
         </tr>
       </thead>
@@ -78,26 +66,20 @@
               <div class="d-flex justify-content-between">
                 <span>{{ f.subject }}</span>
                 <ng-container *ngIf="f.imported">
-                  <ng-template #infoFrontend>
-                    Imported on {{ f.importedDate | date : 'dd/MM/yyyy HH:mm' }}
-                  </ng-template>
-                  <button
-                    (click)="$event.stopPropagation()"
-                    type="button"
-                    class="ps-0 ms-0 mt-0 pt-0 mb-0 pb-0 me-0 btn btn-link text-dark"
-                    [ngbTooltip]="infoFrontend"
-                    triggers="click:blur"
-                  >
+                  <ng-template #infoFrontend> Imported on {{ f.importedDate | date: 'dd/MM/yyyy HH:mm' }} </ng-template>
+                  <button (click)="$event.stopPropagation()" type="button"
+                    class="ps-0 ms-0 mt-0 pt-0 mb-0 pb-0 me-0 btn btn-link text-dark" [ngbTooltip]="infoFrontend"
+                    triggers="click:blur">
                     <fa-icon [icon]="['fas', 'info-circle']"></fa-icon>
                   </button>
                 </ng-container>
               </div>
             </td>
-            <td class="d-md-table-cell d-none">{{ f.date | date : 'dd/MM/yyyy HH:mm' }}</td>
+            <td class="d-md-table-cell d-none">{{ f.date | date: 'dd/MM/yyyy HH:mm' }}</td>
             <td class="d-md-table-cell d-none text-center fit">
               {{ f.attachmentIds.length }}
             </td>
-            <td class="text-center fit">
+            <td class="text-center fit" *ngIf="hasRoleAdmin">
               <a class="btn btn-link" (click)="sendMail(f, $event)">
                 <fa-icon [icon]="['fas', 'mail-bulk']" />
               </a>
@@ -123,14 +105,8 @@
     </table>
   </div>
   <div class="d-flex justify-content-between mb-2">
-    <ngb-pagination
-      *ngIf="fees && fees.totalPages > 1"
-      [page]="pageNumber"
-      [pageSize]="fees.size"
-      [maxSize]="5"
-      [collectionSize]="fees.totalElements"
-      (pageChange)="load($event)"
-    >
+    <ngb-pagination *ngIf="fees && fees.totalPages > 1" [page]="pageNumber" [pageSize]="fees.size" [maxSize]="5"
+      [collectionSize]="fees.totalElements" (pageChange)="load($event)">
     </ngb-pagination>
   </div>
 </ng-container>

src/app/features/fee/fee-table-result/fee-table-result.component.ts

@@ -20,6 +20,7 @@ import { MailService } from '@core/service/mail.service';
 import { MailFormComponent } from '@shared/mail-form/mail-form.component';
 import { MailRequest } from '@core/models/mail';
 import { ToastService } from '@core/service/toast.service';
+import { User } from '@core/models/user';
 
 @Component({
   selector: 'app-fee-table-result',
@@ -32,7 +33,11 @@ export class FeeTableResultComponent implements OnInit, OnApplicationEvent {
   searchCriteria: FeeSearchCriteria;
   fees: Page<Fee>;
   pageSize: number = 5;
-
+  @Input()
+  user: User;
+  get hasRoleAdmin(): boolean {
+    return this.user.authorities.includes('ADMIN');
+  }
   tags: Label[];
 
   selectedRows: Fee[] = [];