FEAT #9685 split workflows component

src/frontend/app/actions/create-acknowledgement-receipt-action/create-acknowledgement-receipt-action.component.scss

@@ -105,6 +105,8 @@
         max-height: 100px;
         overflow: auto;
         padding-left: 25px;
+        padding-right: 5px;
+        padding-bottom: 10px;
     }
 
     p {

src/frontend/app/app.module.ts

@@ -46,6 +46,8 @@ import { NoteEditorComponent }                  from './notes/note-editor.compon
 import { NotesListComponent }                   from './notes/notes.component';
 import { AttachmentsListComponent }             from './attachments/attachments-list.component';
 import { DiffusionsListComponent }             from './diffusions/diffusions-list.component';
+import { VisaWorkflowComponent }             from './visa/visa-workflow.component';
+import { AvisWorkflowComponent }             from './avis/avis-workflow.component';
 
 
 
@@ -73,6 +75,8 @@ import { DiffusionsListComponent }             from './diffusions/diffusions-lis
         NoteEditorComponent,
         AttachmentsListComponent,
         DiffusionsListComponent,
+        VisaWorkflowComponent,
+        AvisWorkflowComponent,
         FiltersListComponent,
         FiltersToolComponent,
         SummarySheetComponent,
@@ -97,7 +101,6 @@ import { DiffusionsListComponent }             from './diffusions/diffusions-lis
         InfoChangePasswordModalComponent,
         NotesListComponent,
         AttachmentsListComponent,
-        DiffusionsListComponent,
         SummarySheetComponent,
         ExportComponent,
         ConfirmActionComponent,

src/frontend/app/avis/avis-workflow.component.html

+<mat-list *ngIf="!loading">
+    <mat-form-field *ngIf="injectDatas.editable" appearance="outline" floatLabel="never" [style.fontSize.px]="10">
+        <input class="metaSearch" type="text" matInput placeholder="Ajouter une personne">
+    </mat-form-field>
+    <div cdkDropList #dataAvailableList="cdkDropList" [cdkDropListData]="avisWorkflow.items" class="cdk-list"
+        (cdkDropListDropped)="drop($event)" [cdkDropListDisabled]="!injectDatas.editable">
+        <div *ngIf="avisWorkflow.items.length === 0" style="opacity: 0.5;text-align: center;font-size: 10px;padding: 10px;">
+            Aucune personne
+        </div>
+        <mat-list-item *ngFor="let diffusion of avisWorkflow.items;let i=index" cdkDrag class="columns"
+            [cdkDragDisabled]="!injectDatas.editable" [class.notDraggable]="injectDatas.editable" [class.notEditable]="!injectDatas.editable"
+            [ngStyle]="{'opacity': diffusion.process_date == null ? '0.5' : '1','background': diffusion.process_date != null ? 'rgba(0, 128, 0, 0.11)' : ''}">
+            <mat-icon mat-list-icon class="fa fa-user fa-2x" color="primary"></mat-icon>
+            <mat-icon mat-list-icon class="fa fa-hourglass fa-2x" *ngIf="diffusion.process_date == null" style="opacity:0.5;"></mat-icon>
+            <mat-icon mat-list-icon class="fa fa-check fa-2x" *ngIf="diffusion.process_date != null" style="opacity:0.5;"
+                color="accent"></mat-icon>
+            <h4 mat-line style="display: flex;">
+                <span style="flex: 1;">{{diffusion.item_firstname}} {{diffusion.item_lastname}}</span>
+            </h4>
+            <p mat-line style="display: flex;">
+                <span style="opacity:0.5;flex: 1;">{{diffusion.item_entity}}</span>
+                <span *ngIf="diffusion.process_date != null" title='{{diffusion.process_date | date : "le dd/MM/y à HH:mm"}}'
+                    style="flex: 1;text-align: right;font-size: 90%;" color="accent">{{diffusion.process_date
+                    | timeAgo}}</span>
+            </p>
+            <button mat-icon-button *ngIf="injectDatas.editable" (click)="deleteItem(i)">
+                <mat-icon class="fa fa-times" color="warn"></mat-icon>
+            </button>
+        </mat-list-item>
+    </div>
\ No newline at end of file

src/frontend/app/avis/avis-workflow.component.scss

+.cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 4px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+        0 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    background: white;
+    padding: 10px;
+    .mat-icon {
+        display: none;
+    }
+}
+
+.cdk-drag-placeholder {
+    opacity: 0;
+}
+
+.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.columns:last-child {
+    border: none;
+}
+
+.cdk-list.cdk-drop-list-dragging .columns:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.columns {
+    cursor: move;
+}
+
+.notDraggable {
+    cursor: not-allowed;
+}
+
+.notEditable {
+    cursor: initial;
+}
\ No newline at end of file

src/frontend/app/avis/avis-workflow.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { LANG } from '../translate.component';
+import { NotificationService } from '../notification.service';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+
+@Component({
+    selector: 'app-avis-workflow',
+    templateUrl: 'avis-workflow.component.html',
+    styleUrls: ['avis-workflow.component.scss'],
+    providers: [NotificationService]
+})
+export class AvisWorkflowComponent implements OnInit {
+
+    lang: any = LANG;
+    avisWorkflow: any = {
+        items : []
+    };
+    loading: boolean = true;
+    data: any;
+
+    @Input('injectDatas') injectDatas: any;
+
+    constructor(public http: HttpClient, private notify: NotificationService) { }
+
+    ngOnInit(): void { }
+
+    drop(event: CdkDragDrop<string[]>) {
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        }
+    }
+
+    loadListModel(entityId: string) {
+        this.loading = true;
+
+        this.avisWorkflow.items = [];
+
+
+        // TO DO : ADD ROUTE
+        /*this.http.get("../../rest/???")
+            .subscribe((data: any) => {
+                this.loading = false;
+            });*/
+
+            this.avisWorkflow.items.push(
+            {
+                "listinstance_id": 20,
+                "sequence": 0,
+                "item_mode": "avis",
+                "item_id": "bbain",
+                "item_type": "user_id",
+                "item_firstname": "Barbara",
+                "item_lastname": "BAIN",
+                "item_entity": "P\u00f4le Jeunesse et Sport",
+                "viewed": 0,
+                "process_date": null,
+                "process_comment": "",
+                "signatory": false,
+                "requested_signature": false
+            });
+
+            this.avisWorkflow.items.push(
+            {
+                "listinstance_id": 21,
+                "sequence": 0,
+                "item_mode": "avis",
+                "item_id": "DSG",
+                "item_type": "entity_id",
+                "item_entity": "Secr\u00e9tariat G\u00e9n\u00e9ral",
+                "viewed": 0,
+                "process_date": null,
+                "process_comment": null,
+                "signatory": false,
+                "requested_signature": false
+            }
+        );
+
+        this.loading = false;
+    }
+
+    loadWorkflow(resId: number) {
+        this.loading = true;
+        this.avisWorkflow.items = [];
+        this.http.get("../../rest/res/" + resId + "/avisCircuit")
+         .subscribe((data: any) => {
+            data.forEach((element:any) => {
+                this.avisWorkflow.items.push(element);
+            });
+            this.loading = false;
+        }, (err: any) => {
+            this.notify.handleErrors(err);
+        });
+    }
+
+    deleteItem(index: number) {
+        this.avisWorkflow.items.splice(index, 1);
+    }
+
+    getAvisCount() {
+        return this.avisWorkflow.items.length;
+    }
+}
\ No newline at end of file

src/frontend/app/diffusions/diffusions-list.component.ts

@@ -140,7 +140,6 @@ export class DiffusionsListComponent implements OnInit {
                 this.diffList[element.id].items = [];
             });
             Object.keys(data).forEach(diffusionRole => {
-                console.log(data[diffusionRole]);
                 data[diffusionRole].forEach((line:any) => {
                     this.diffList[line.item_mode].items.push(line);
                 });

src/frontend/app/list/basket-list.component.html

@@ -15,7 +15,8 @@
                 <div class="example-loading-shade" *ngIf="isLoadingResults">
                     <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
                 </div>
-                <div *ngIf="(resultsLength == 0 && this.filtersListService.getUrlFilters() == '') && !isLoadingResults" class="emptyBasket">
+                <div *ngIf="(resultsLength == 0 && this.filtersListService.getUrlFilters() == '') && !isLoadingResults"
+                    class="emptyBasket">
                     <div class="emptyBasket_content">
                         <div class="emptyBasket_icon">
                             <i class="fa fa-inbox"></i>
@@ -25,11 +26,13 @@
                         </div>
                     </div>
                 </div>
-                <div [style.display]="(resultsLength > 0 || this.filtersListService.getUrlFilters() != '') ? 'block' : 'none'" class="row" style="margin:0px;">
+                <div [style.display]="(resultsLength > 0 || this.filtersListService.getUrlFilters() != '') ? 'block' : 'none'"
+                    class="row" style="margin:0px;">
                     <div class="col-md-12" style="display:flex;">
                         <app-filters-tool style="flex:1;" #filtersTool [currentBasketInfo]="currentBasketInfo"
                             [listProperties]="this.listProperties" [snavR]="snav2" [totalRes]="allResInBasket.length"
-                            [selectedRes]="selectedRes" (toggleAllRes)="toggleAllRes($event)" (refreshEventAfterAction)="refreshDaoAfterAction()" (refreshEvent)="refreshDao()"></app-filters-tool>
+                            [selectedRes]="selectedRes" (toggleAllRes)="toggleAllRes($event)" (refreshEventAfterAction)="refreshDaoAfterAction()"
+                            (refreshEvent)="refreshDao()"></app-filters-tool>
                         <mat-paginator #paginatorResultList [length]="resultsLength" [pageSize]="10" class="paginatorResultList"></mat-paginator>
                     </div>
                 </div>
@@ -76,7 +79,7 @@
                                         (click)="$event.stopPropagation();"></mat-checkbox>
                                 </div>
                                 <div class="resultCol" [class]="data.cssClasses.join(' ')" *ngFor="let data of displayedMainData"
-                                     style="cursor: pointer;" title="{{defaultAction.label_action}}" (click)="$event.stopPropagation();launch(defaultAction,row)">
+                                    style="cursor: pointer;" title="{{defaultAction.label_action}}" (click)="$event.stopPropagation();launch(defaultAction,row)">
                                     <span *ngIf="data.value == 'alt_identifier'">
                                         <mat-icon [ngStyle]="{'color': row.priorityColor}" color="primary" class="{{row.statusImage.charAt(0)}}{{row.statusImage.charAt(1)}} {{row.statusImage}} {{row.statusImage.charAt(0)}}{{row.statusImage.charAt(1)}}-2x"
                                             title="{{row.statusLabel}}" style="cursor: crosshair;" (click)="$event.stopPropagation();filterThis(row.statusLabel)"></mat-icon><br />
@@ -126,21 +129,28 @@
 
             <app-filters-list *ngIf="filtersListService.filterMode" [listProperties]="this.listProperties"
                 (refreshEvent)="refreshDao()"></app-filters-list>
-                <div style="display:flex;">
-                    <button mat-icon-button (click)="snav2.close()" style="font-size: 25px;">
-                        <mat-icon class="fa fa-arrow-right"></mat-icon>
-                    </button>
-                </div>
+            <div style="display:flex;">
+                <button mat-icon-button (click)="snav2.close()" style="font-size: 25px;">
+                    <mat-icon class="fa fa-arrow-right"></mat-icon>
+                </button>
+            </div>
             <div style="display:flex;justify-content: center;padding: 30px;">
                 {{this.currentResource.alt_identifier}}
             </div>
-            <mat-tab-group>
+            <mat-tab-group [(selectedIndex)]="selectedDiffusionTab">
                 <mat-tab label="{{lang.diffusionList}}">
                     <app-diffusions-list #appDiffusionsList [injectDatas]="injectDatasParam"></app-diffusions-list>
                 </mat-tab>
-                </mat-tab-group>
+                <mat-tab label="{{lang.visa}}" [disabled]="appVisaWorkflow.getVisaCount() == 0">
+                    <app-visa-workflow #appVisaWorkflow [injectDatas]="injectDatasParam"></app-visa-workflow>
+                </mat-tab>
+                <mat-tab label="{{lang.avis}}" [disabled]="appAvisWorkflow.getAvisCount() == 0">
+                    <app-avis-workflow #appAvisWorkflow [injectDatas]="injectDatasParam"></app-avis-workflow>
+                </mat-tab>
+            </mat-tab-group>
             <mat-divider></mat-divider>
         </mat-sidenav>
     </mat-sidenav-container>
 </div>
-<app-actions-list (triggerEvent)="refreshDaoAfterAction()" #actionsListContext [contextMode]="true" [totalRes]="allResInBasket.length" [selectedRes]="selectedRes" [currentBasketInfo]="currentBasketInfo"></app-actions-list>
+<app-actions-list (triggerEvent)="refreshDaoAfterAction()" #actionsListContext [contextMode]="true" [totalRes]="allResInBasket.length"
\ No newline at end of file
+    [selectedRes]="selectedRes" [currentBasketInfo]="currentBasketInfo"></app-actions-list>
\ No newline at end of file

src/frontend/app/list/basket-list.component.ts

@@ -18,6 +18,8 @@ import { FiltersToolComponent } from './filters/filters-tool.component';
 
 import { ActionsListComponent } from '../actions/actions-list.component';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { VisaWorkflowComponent } from '../visa/visa-workflow.component';
+import { AvisWorkflowComponent } from '../avis/avis-workflow.component';
 
 
 declare function $j(selector: any): any;
@@ -85,10 +87,13 @@ export class BasketListComponent implements OnInit {
 
     selectedRes: number[] = [];
     allResInBasket: number[] = [];
+    selectedDiffusionTab: number = 0;
 
     @ViewChild('actionsListContext') actionsList: ActionsListComponent;
     @ViewChild('filtersTool') filtersTool: FiltersToolComponent;
     @ViewChild('appDiffusionsList') appDiffusionsList: DiffusionsListComponent;
+    @ViewChild('appVisaWorkflow') appVisaWorkflow: VisaWorkflowComponent;
+    @ViewChild('appAvisWorkflow') appAvisWorkflow: AvisWorkflowComponent;
 
     currentSelectedChrono: string = '';
 
@@ -215,9 +220,12 @@ export class BasketListComponent implements OnInit {
         if(this.injectDatasParam.resId == row.res_id && this.sidenavRight.opened) {
             this.sidenavRight.close();
         } else {
+            this.selectedDiffusionTab = 0;
             this.currentResource = row;
             this.injectDatasParam.resId = row.res_id;
             this.appDiffusionsList.loadListinstance(row.res_id);
+            this.appVisaWorkflow.loadWorkflow(row.res_id);
+            this.appAvisWorkflow.loadWorkflow(row.res_id);
             this.sidenavRight.open();
         }
 
@@ -226,6 +234,7 @@ export class BasketListComponent implements OnInit {
         });*/
     }
 
+
     refreshDao() {
         this.paginator.pageIndex = this.listProperties.page;
         this.filtersChange.emit();

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

+<mat-list *ngIf="!loading">
+    <mat-form-field *ngIf="injectDatas.editable" appearance="outline" floatLabel="never" [style.fontSize.px]="10">
+        <input class="metaSearch" type="text" matInput placeholder="Ajouter une personne">
+    </mat-form-field>
+    <div cdkDropList #dataAvailableList="cdkDropList" [cdkDropListData]="visaWorkflow.items" class="cdk-list"
+        (cdkDropListDropped)="drop($event)" [cdkDropListDisabled]="!injectDatas.editable">
+        <div *ngIf="visaWorkflow.items.length === 0" style="opacity: 0.5;text-align: center;font-size: 10px;padding: 10px;">
+            Aucune personne
+        </div>
+        <mat-list-item *ngFor="let diffusion of visaWorkflow.items;let i=index" cdkDrag class="columns"
+            [cdkDragDisabled]="!injectDatas.editable" [class.notDraggable]="injectDatas.editable" [class.notEditable]="!injectDatas.editable" [ngStyle]="{'opacity': diffusion.process_date == null ? '0.5' : '1','background': diffusion.process_date != null ? 'rgba(0, 128, 0, 0.11)' : ''}">
+            <mat-icon mat-list-icon class="fa fa-user fa-2x" color="primary"></mat-icon>
+                <mat-icon mat-list-icon class="fa fa-hourglass fa-2x" *ngIf="diffusion.process_date == null" style="opacity:0.5;"></mat-icon>
+                <mat-icon mat-list-icon class="fa fa-check fa-2x" *ngIf="diffusion.process_date != null" style="opacity:0.5;"
+                    color="accent"></mat-icon>
+                    <h4 mat-line style="display: flex;">
+                            <span style="flex: 1;">{{diffusion.item_firstname}} {{diffusion.item_lastname}}</span>
+                            <span *ngIf="!diffusion.requested_signature" style="flex: 1;text-align: right;font-size: 90%;" color="primary">{{lang.visaUser}}</span>
+                            <span *ngIf="diffusion.requested_signature" style="flex: 1;text-align: right;font-size: 90%;" color="warn">{{lang.signUser}}</span>
+                        </h4>
+                        <p mat-line style="display: flex;">
+                                <span style="opacity:0.5;flex: 1;">{{diffusion.item_entity}}</span>
+                                <span *ngIf="diffusion.process_date != null" title='{{diffusion.process_date | date : "le dd/MM/y à HH:mm"}}'
+                                    style="flex: 1;text-align: right;font-size: 90%;" color="accent">{{diffusion.process_date
+                                    | timeAgo}}</span>
+                            </p>
+            <button mat-icon-button *ngIf="injectDatas.editable" (click)="deleteItem(i)">
+                <mat-icon class="fa fa-times" color="warn"></mat-icon>
+            </button>
+        </mat-list-item>
+    </div>
\ No newline at end of file

src/frontend/app/visa/visa-workflow.component.scss

+.cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 4px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+        0 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    background: white;
+    padding: 10px;
+    .mat-icon {
+        display: none;
+    }
+}
+
+.cdk-drag-placeholder {
+    opacity: 0;
+}
+
+.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.columns:last-child {
+    border: none;
+}
+
+.cdk-list.cdk-drop-list-dragging .columns:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.columns {
+    cursor: move;
+}
+
+.notDraggable {
+    cursor: not-allowed;
+}
+
+.notEditable {
+    cursor: initial;
+}
\ No newline at end of file

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

+import { Component, Input, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { LANG } from '../translate.component';
+import { NotificationService } from '../notification.service';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+
+@Component({
+    selector: 'app-visa-workflow',
+    templateUrl: 'visa-workflow.component.html',
+    styleUrls: ['visa-workflow.component.scss'],
+    providers: [NotificationService]
+})
+export class VisaWorkflowComponent implements OnInit {
+
+    lang: any = LANG;
+    visaWorkflow: any = {
+        items : []
+    };
+    loading: boolean = true;
+    data: any;
+
+    @Input('injectDatas') injectDatas: any;
+
+    constructor(public http: HttpClient, private notify: NotificationService) { }
+
+    ngOnInit(): void { }
+
+    drop(event: CdkDragDrop<string[]>) {
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        }
+    }
+
+    loadListModel(entityId: string) {
+        this.loading = true;
+
+        this.visaWorkflow.items = [];
+
+
+        // TO DO : ADD ROUTE
+        /*this.http.get("../../rest/???")
+            .subscribe((data: any) => {
+                this.loading = false;
+            });*/
+
+            this.visaWorkflow.items.push(
+            {
+                "listinstance_id": 20,
+                "sequence": 0,
+                "item_mode": "visa",
+                "item_id": "bbain",
+                "item_type": "user_id",
+                "item_firstname": "Barbara",
+                "item_lastname": "BAIN",
+                "item_entity": "P\u00f4le Jeunesse et Sport",
+                "viewed": 0,
+                "process_date": null,
+                "process_comment": "",
+                "signatory": false,
+                "requested_signature": false
+            });
+
+            this.visaWorkflow.items.push(
+            {
+                "listinstance_id": 21,
+                "sequence": 0,
+                "item_mode": "sign",
+                "item_id": "DSG",
+                "item_type": "entity_id",
+                "item_entity": "Secr\u00e9tariat G\u00e9n\u00e9ral",
+                "viewed": 0,
+                "process_date": null,
+                "process_comment": null,
+                "signatory": true,
+                "requested_signature": false
+            }
+        );
+
+        this.loading = false;
+    }
+
+    loadWorkflow(resId: number) {
+        this.loading = true;
+        this.visaWorkflow.items = [];
+        this.http.get("../../rest/res/" + resId + "/visaCircuit")
+         .subscribe((data: any) => {
+            console.log(data);
+            data.forEach((element:any) => {
+                this.visaWorkflow.items.push(element);
+            });
+            this.loading = false;
+        }, (err: any) => {
+            this.notify.handleErrors(err);
+        });
+    }
+
+    deleteItem(index: number) {
+        this.visaWorkflow.items.splice(index, 1);
+    }
+
+    getVisaCount() {
+        return this.visaWorkflow.items.length;
+    }
+}
\ No newline at end of file