FEAT #16982 TIME 0:40 hide the button to add an otp if no connectors + display...

FEAT #16982 TIME 0:40 hide the button to add an otp if no connectors + display only the circuit models

src/frontend/app/app.module.ts

@@ -61,6 +61,7 @@ import { DocumentDateListComponent } from './documentDateList/document-date-list
 import { DateOptionModalComponent } from './documentDateList/dateOption/date-option-modal.component';
 import { OtpCreateComponent } from './document/visa-workflow/otps/otp-create.component';
 import { OtpYousignComponent } from './document/visa-workflow/otps/yousign/otp-yousign.component';
+import { VisaWorkflowModelsComponent } from './document/visa-workflow/models/visa-workflow-models.component';
 
 
 // ADMINISTRATION
@@ -154,7 +155,8 @@ registerLocaleData(localeFr, 'fr-FR');
         OtpCreateComponent,
         OtpYousignComponent,
         OtpListComponent,
-        OtpComponent
+        OtpComponent,
+        VisaWorkflowModelsComponent
     ],
     imports: [
         FormsModule,

src/frontend/app/document/visa-workflow/models/visa-workflow-models.component.html

+<ion-list lines="none">
+    <ion-list-header>
+        <ion-label color="secondary">{{'lang.circuitModels' | translate}}</ion-label>
+    </ion-list-header>
+    <ion-item button *ngFor="let model of visaWorkflowModels" (click)="loadVisaWorkflow(model)">
+        <ion-label>{{model.title}}</ion-label>
+        <ion-buttons slot="end">
+            <ion-button fill="clear" slot="icon-only" shape="round" color="danger" (click)="$event.stopPropagation();removeModel(model)">
+                <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
+            </ion-button>
+        </ion-buttons>
+    </ion-item>
+    <ion-item button (click)="createModel()" [disabled]="currentWorkflow.length === 0">
+        <ion-icon color="primary" slot="start" name="add-circle-outline"></ion-icon>
+        <ion-label color="primary">{{'lang.newTemplate' | translate}}</ion-label>
+    </ion-item>
+</ion-list>
\ No newline at end of file

src/frontend/app/document/visa-workflow/models/visa-workflow-models.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { AlertController, PopoverController } from '@ionic/angular';
+import { NotificationService } from '../../../service/notification.service';
+import { catchError, tap } from 'rxjs/operators';
+import { of } from 'rxjs';
+import { AuthService } from '../../../service/auth.service';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-visa-workflow-models',
+    templateUrl: 'visa-workflow-models.component.html',
+    styleUrls: ['visa-workflow-models.component.scss'],
+})
+export class VisaWorkflowModelsComponent implements OnInit {
+
+    @Input() currentWorkflow: any[] = [];
+
+    visaWorkflowModels: any[] = [];
+
+    constructor(
+        public http: HttpClient,
+        private translate: TranslateService,
+        public popoverController: PopoverController,
+        public alertController: AlertController,
+        public notificationService: NotificationService,
+        public authService: AuthService
+    ) { }
+
+    ngOnInit(): void {
+        this.getVisaUserModels();
+    }
+
+    async createModel() {
+        const alert = await this.alertController.create({
+            header: this.translate.instant('lang.newTemplate'),
+            message: this.translate.instant('lang.newTemplateDesc'),
+            inputs: [
+                {
+                    name: 'title',
+                    type: 'text',
+                    placeholder: this.translate.instant('lang.label') + ' *',
+                },
+            ],
+            buttons: [
+                {
+                    text: this.translate.instant('lang.cancel'),
+                    role: 'cancel',
+                    handler: () => { }
+                }, {
+                    text: this.translate.instant('lang.validate'),
+                    handler: (data: any) => {
+                        if (data.title !== '') {
+                            this.saveModel(data.title);
+                            return true;
+                        } else {
+                            this.notificationService.error(this.translate.instant('lang.label') + ' ' + this.translate.instant('lang.mandatory'));
+                            return false;
+                        }
+                    }
+                }
+            ]
+        });
+
+        await alert.present();
+    }
+
+    saveModel(title: string) {
+        const objToSend: any = {
+            title: title,
+            items: this.currentWorkflow.map((item: any) => ({
+                userId: item.userId,
+                mode: this.authService.getWorkflowMode(item.role),
+                signatureMode: this.authService.getSignatureMode(item.role)
+            }))
+        };
+        this.http.post('../rest/workflowTemplates', objToSend).pipe(
+            tap((res: any) => {
+                this.notificationService.success('lang.modelCreated');
+                this.visaWorkflowModels.push({ id: res.id, title: title });
+            }),
+            catchError(err => {
+                this.notificationService.handleErrors(err);
+                return of(false);
+            })
+        ).subscribe();
+    }
+
+    async removeModel(model: any) {
+        const alert = await this.alertController.create({
+            header: this.translate.instant('lang.delete'),
+            message: this.translate.instant('lang.deleteTemplate'),
+            buttons: [
+                {
+                    text: this.translate.instant('lang.no'),
+                    role: 'cancel',
+                    handler: () => { }
+                }, {
+                    text: this.translate.instant('lang.yes'),
+                    handler: () => {
+                        this.http.delete(`../rest/workflowTemplates/${model.id}`).pipe(
+                            tap(() => {
+                                this.visaWorkflowModels = this.visaWorkflowModels.filter((item: any) => item.id !== model.id);
+                                this.notificationService.success(`Modèle ${model.title} supprimé`);
+                            }),
+                            catchError(err => {
+                                this.notificationService.handleErrors(err);
+                                return of(false);
+                            })
+                        ).subscribe();
+                    }
+                }
+            ]
+        });
+
+        await alert.present();
+    }
+
+    getVisaUserModels() {
+        this.http.get('../rest/workflowTemplates').pipe(
+            tap((data: any) => {
+                this.visaWorkflowModels = data.workflowTemplates;
+            }),
+            catchError(err => {
+                this.notificationService.handleErrors(err);
+                return of(false);
+            })
+        ).subscribe();
+    }
+
+    loadVisaWorkflow(model: any) {
+        this.http.get(`../rest/workflowTemplates/${model.id}`).pipe(
+            tap((data: any) => {
+                const workflows: any[] = data.workflowTemplate.items.map((item: any) => {
+                    const obj: any = {
+                        'userId': item.userId,
+                        'userDisplay': item.userLabel,
+                        'role': item.mode === 'visa' ? 'visa' : item.signatureMode,
+                        'processDate': null,
+                        'current': false,
+                        'modes': ['visa'].concat(item.userSignatureModes)
+                    };
+                    return obj;
+                });
+                this.popoverController.dismiss(workflows);
+            }),
+            catchError(err => {
+                this.notificationService.handleErrors(err);
+                return of(false);
+            })
+        ).subscribe();
+    }
+}

src/frontend/app/document/visa-workflow/visa-workflow.component.html

@@ -13,33 +13,41 @@
         <ion-item lines="none">
             <ion-searchbar #searchInput [(ngModel)]="visaUsersSearchVal" [placeholder]="'lang.searchUser' | translate"
                 (ionChange)="getVisaUsers($event)" (ionFocus)="visaUsersSearchVal=''"></ion-searchbar>
-            <ion-buttons slot="end">
-                <ion-button fill="clear" slot="icon-only" shape="round" color="primary" [matMenuTriggerFor]="menu">
-                    <ion-icon slot="icon-only" name="ellipsis-vertical-outline"></ion-icon>
+            <ion-buttons *ngIf="!hasConnector; else elseHasConnector" slot="end">
+                 <ion-button fill="clear" slot="icon-only" shape="round" color="primary"
+                    (click)="openVisaWorkflowModels($event)" [title]="'lang.circuitModels' | translate">
+                    <ion-icon slot="icon-only" name="albums-outline"></ion-icon>
                 </ion-button>
             </ion-buttons>
-            <mat-menu #menu="matMenu">
-                <ion-item button (click)="openOtpModal()" lines="none">
-                    <ion-icon name="person-circle-outline" slot="start" color="primary"></ion-icon>
-                    <ion-label style="font-size: 14px;">{{'lang.newOtp' | translate}}</ion-label>
-                </ion-item>
-                <button mat-menu-item [matMenuTriggerFor]="model"
-                    (menuOpened)="getVisaUserModels()">{{'lang.circuitModels' | translate}}</button>
-            </mat-menu>
-            <mat-menu #model="matMenu">
-                <ion-item button lines="none" *ngFor="let model of visaWorkflowModels" (click)="loadVisaWorkflow(model)">
-                    <ion-label style="font-size: 14px;">{{model.title}}</ion-label>
-                    <ion-buttons slot="end">
-                        <ion-button fill="clear" slot="icon-only" shape="round" color="danger"
-                            (click)="$event.stopPropagation();removeModel(model)">
-                            <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
-                        </ion-button>
-                    </ion-buttons>
-                </ion-item>
-                <ion-item button (click)="createModel()" [disabled]="visaWorkflow.length === 0">
-                    <ion-label style="font-size: 14px;">{{'lang.newTemplate' | translate}}</ion-label>
-                </ion-item>
-            </mat-menu>
+            <ng-template #elseHasConnector>
+                <ion-buttons slot="end">
+                    <ion-button fill="clear" slot="icon-only" shape="round" color="primary" [matMenuTriggerFor]="menu">
+                        <ion-icon slot="icon-only" name="ellipsis-vertical-outline"></ion-icon>
+                    </ion-button>
+                </ion-buttons>
+                <mat-menu #menu="matMenu">
+                    <ion-item *ngIf="hasConnector" button (click)="openOtpModal()" lines="none">
+                        <ion-icon name="person-circle-outline" slot="start" color="primary"></ion-icon>
+                        <ion-label style="font-size: 14px;">{{'lang.newOtp' | translate}}</ion-label>
+                    </ion-item>
+                    <button mat-menu-item [matMenuTriggerFor]="model"
+                        (menuOpened)="getVisaUserModels()">{{'lang.circuitModels' | translate}}</button>
+                </mat-menu>
+                <mat-menu #model="matMenu">
+                    <ion-item button lines="none" *ngFor="let model of visaWorkflowModels" (click)="loadVisaWorkflow(model)">
+                        <ion-label style="font-size: 14px;">{{model.title}}</ion-label>
+                        <ion-buttons slot="end">
+                            <ion-button fill="clear" slot="icon-only" shape="round" color="danger"
+                                (click)="$event.stopPropagation();removeModel(model)">
+                                <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
+                            </ion-button>
+                        </ion-buttons>
+                    </ion-item>
+                    <ion-item button (click)="createModel()" [disabled]="visaWorkflow.length === 0">
+                        <ion-label style="font-size: 14px;">{{'lang.newTemplate' | translate}}</ion-label>
+                    </ion-item>
+                </mat-menu>
+            </ng-template>
         </ion-item>
         <ion-list *ngIf="visaUsersList.length > 0"
             style="position: absolute;z-index: 2;width: 100%;box-shadow: 0 4px 2px -2px gray;">

src/frontend/app/document/visa-workflow/visa-workflow.component.ts

@@ -10,6 +10,7 @@ import { ItemReorderEventDetail } from '@ionic/core';
 import { TranslateService } from '@ngx-translate/core';
 import { OtpCreateComponent } from './otps/otp-create.component';
 import { OtpService } from './otps/otp.service';
+import { VisaWorkflowModelsComponent } from './models/visa-workflow-models.component';
 
 @Component({
     selector: 'app-visa-workflow',
@@ -33,6 +34,8 @@ export class VisaWorkflowComponent implements OnInit {
     roles: any[] = [];
     visaWorkflowModels: any[] = [];
 
+    hasConnector: boolean = false;
+
     constructor(
         public http: HttpClient,
         private translate: TranslateService,
@@ -42,12 +45,16 @@ export class VisaWorkflowComponent implements OnInit {
         public notificationService: NotificationService,
         public modalController: ModalController,
         private otpService: OtpService,
+        public popoverController: PopoverController
     ) { }
 
-    ngOnInit(): void {
+    async ngOnInit(): Promise<void> {
         this.visaWorkflow.forEach((element: any, index: number) => {
             this.getAvatarUser(index);
         });
+        if (this.editMode) {
+            await this.getConnectors();
+        }
     }
 
     doReorder(ev: CustomEvent<ItemReorderEventDetail>) {
@@ -293,8 +300,6 @@ export class VisaWorkflowComponent implements OnInit {
         this.http.get(`../rest/workflowTemplates/${model.id}`).pipe(
             tap((data: any) => {
                 const workflows: any[] = data.workflowTemplate.items.map((item: any) => {
-                    console.log(item);
-                    
                     const obj: any = {
                         'userId': item.userId,
                         'userDisplay': item.userLabel,
@@ -328,4 +333,38 @@ export class VisaWorkflowComponent implements OnInit {
             })
         ).subscribe();
     }
+
+    getConnectors() {
+        return new Promise((resolve) => {
+            this.http.get('../rest/connectors').pipe(
+                tap((data: any) => {
+                    this.hasConnector = data.otp.length > 0 ? true : false;
+                    resolve(true);
+                }),
+                catchError(err => {
+                    this.notificationService.handleErrors(err);
+                    return of(false);
+                })
+            ).subscribe();
+        });
+    }
+
+    async openVisaWorkflowModels(ev: any) {
+        const popover = await this.popoverController.create({
+            component: VisaWorkflowModelsComponent,
+            componentProps: { currentWorkflow: this.visaWorkflow },
+            event: ev,
+        });
+        await popover.present();
+
+        popover.onDidDismiss()
+            .then((result: any) => {
+                if (result.role !== 'backdrop') {
+                    this.visaWorkflow = this.visaWorkflow.concat(result.data);
+                    this.visaWorkflow.forEach((element: any, index: number) => {
+                        this.getAvatarUser(index);
+                    });
+                }
+            });
+    }
 }