From 2ba338343f160d619125c1a6dd9a60510bdd1483 Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Fri, 8 Feb 2019 20:05:23 +0100
Subject: [PATCH] FEAT #9156 front admin list result
---
.../administration/administration.module.ts | 8 +-
.../basket-administration.component.html | 118 +-------
.../basket-administration.component.scss | 189 ------------
.../basket/basket-administration.component.ts | 271 ------------------
.../list/list-administration.component.html | 108 +++++++
.../list/list-administration.component.scss | 201 +++++++++++++
.../list/list-administration.component.ts | 245 ++++++++++++++++
7 files changed, 563 insertions(+), 577 deletions(-)
create mode 100644 src/frontend/app/administration/basket/list/list-administration.component.html
create mode 100644 src/frontend/app/administration/basket/list/list-administration.component.scss
create mode 100644 src/frontend/app/administration/basket/list/list-administration.component.ts
diff --git a/src/frontend/app/administration/administration.module.ts b/src/frontend/app/administration/administration.module.ts
index 540492c59a4..e0b35ee967c 100755
--- a/src/frontend/app/administration/administration.module.ts
+++ b/src/frontend/app/administration/administration.module.ts
@@ -46,7 +46,9 @@ import { SecuritiesAdministrationComponent } from './security/securit
import { SendmailAdministrationComponent } from './sendmail/sendmail-administration.component';
import { TechnicalAdministrationComponent } from './technical/technical-administration.component';
+// TO DO CHANGE COMPONENT NAME
import { ListAdministrationComponent } from './list/list-administration.component';
+import { ListAdministrationComponent2 } from './basket/list/list-administration.component';
@NgModule({
imports: [
@@ -100,7 +102,8 @@ import { ListAdministrationComponent } from './list/list-administrati
SecuritiesAdministrationComponent,
SendmailAdministrationComponent,
TechnicalAdministrationComponent,
- ListAdministrationComponent
+ ListAdministrationComponent,
+ ListAdministrationComponent2
],
entryComponents: [
UsersAdministrationRedirectModalComponent,
@@ -111,7 +114,8 @@ import { ListAdministrationComponent } from './list/list-administrati
BasketAdministrationGroupListModalComponent,
DoctypesAdministrationRedirectModalComponent,
TechnicalAdministrationComponent,
- ListAdministrationComponent
+ ListAdministrationComponent,
+ ListAdministrationComponent2
],
})
export class AdministrationModule {}
\ No newline at end of file
diff --git a/src/frontend/app/administration/basket/basket-administration.component.html b/src/frontend/app/administration/basket/basket-administration.component.html
index 3213f0a9fcb..03f771d820d 100755
--- a/src/frontend/app/administration/basket/basket-administration.component.html
+++ b/src/frontend/app/administration/basket/basket-administration.component.html
@@ -113,7 +113,7 @@
<span>{{group.group_desc}}</span>
<mat-icon color="warn" class="fa fa-times" matTooltip="{{lang.unlinkGroup}}" (click)="unlinkGroup(i)"></mat-icon>
</ng-template>
- <mat-tab-group (selectedTabChange)="initResultList($event,i)">
+ <mat-tab-group>
<mat-tab label="Action(s)">
<div class="col-md-6">
<mat-form-field style="margin-top:5px;">
@@ -194,120 +194,8 @@
</mat-accordion>
</div>
</mat-tab>
- <mat-tab label="Page de résultat">
- <mat-toolbar class="editorTool">
- <span>
- <button *ngIf="displayMode=='label'" color="default" mat-button (click)="toggleData()">
- Mode données
- </button>
- <button *ngIf="displayMode=='sample'" color="primary" mat-button (click)="toggleData()">
- Mode édition
- </button>
- <span class="separator"></span>
- </span>
- <span class="area">
- <form style="width:100%;">
- <mat-form-field appearance="outline" floatLabel="never">
- <input name="availableData" type="text" matInput [formControl]="dataControl"
- placeholder="Données disponibles" [matAutocomplete]="auto">
- <mat-autocomplete #auto="matAutocomplete">
- <mat-option *ngFor="let item of filteredDataOptions | async"
- [value]="item.label" (click)="addData(item)" class="dataList">
- <span class="dataIcon">
- <i color="primary" class="fa {{item.icon}} fa-2x"></i>
- </span>
- <span class="dataLabel">
- {{item.label}}
- </span>
- </mat-option>
- </mat-autocomplete>
- </mat-form-field>
- </form>
- </span>
- <span>
- <span class="separator"></span>
- <button color="warn" mat-button (click)="removeAllData()" style="float:right;">
- Tout effacer
- </button>
- </span>
- </mat-toolbar>
- <mat-card style="border-bottom: solid 1px rgba(0,0,0,0.12);">
- <mat-toolbar class="secondaryInformations example-list" cdkDropListOrientation="horizontal"
- cdkDropList [cdkDropListData]="displayedSecondaryData" (cdkDropListDropped)="drop($event)">
- <span class="example-box" *ngFor="let item of displayedSecondaryData;let itData=index"
- cdkDrag>
- <button *ngIf="displayMode=='label'" color="primary" mat-icon-button
- [matMenuTriggerFor]="menu">
- <mat-icon fontSet="fas" fontIcon="fa-ellipsis-v fa-2x"></mat-icon>
- </button>
- <mat-menu #menu="matMenu">
- <button mat-menu-item style="text-align: center;" (click)="removeData(item,itData)">
- <mat-icon style="height: auto;" color="warn" fontSet="fas" fontIcon="fa-trash fa-2x"></mat-icon>
- <span>{{lang.delete}}</span>
- </button>
- <mat-divider></mat-divider>
- <button mat-menu-item (click)="setFont(item,'boldFontData')">
- <mat-icon style="height: auto;" fontSet="fas" fontIcon="fa-bold fa-2x"></mat-icon>
- <span>Gras</span>
- </button>
- <button mat-menu-item (click)="setFont(item,'centerData')">
- <mat-icon style="height: auto;" fontSet="fas" fontIcon="fa-align-center fa-2x"></mat-icon>
- <span>Centré</span>
- </button>
- <button mat-menu-item (click)="setFont(item,'rightData')">
- <mat-icon style="height: auto;" fontSet="fas" fontIcon="fa-align-right fa-2x"></mat-icon>
- <span>Droite</span>
- </button>
- <button mat-menu-item (click)="setFont(item,'bigFontData')">
- <mat-icon style="height: auto;" fontSet="fas" fontIcon="fa-text-height fa-2x"></mat-icon>
- <span>Grand</span>
- </button>
- </mat-menu>
- <span style="width:100%;" [class]="item.class.join(' ')">
- <i class="fa {{item.icon}}"></i>
- <span style="width:100%;" [innerHTML]="item[displayMode]"></span>
- </span>
- </span>
- </mat-toolbar>
- <div class="resultRow newRow">
- <span class="resultCol" *ngFor="let item of displayedMainData;let i=index"
- [class]="item.class.join(' ')">
- <span *ngIf="i == 0">
- <mat-icon color="primary" class="fm fm-letter-status-inprogress fm-2x"></mat-icon><br />
- <span style="color: rgba(0,0,0,0.4);font-size: 90%;">{{item[displayMode]}}</span>
- </span>
- <span *ngIf="i == 1">
- {{item[displayMode]}}
- </span>
- </span>
- <mat-button-toggle-group class="actions" multiple>
- <button color="primary" mat-icon-button title="{{lang.notes}}" [disabled]="displayMode == 'label'">
- <mat-icon [matBadgeHidden]="displayMode == 'label'" fontSet="fas"
- matBadge="2" fontIcon="fa-comments fa-2x"></mat-icon>
- </button>
- <button color="primary" mat-icon-button title="{{lang.attachments}}"
- [disabled]="displayMode == 'label'">
- <mat-icon [matBadgeHidden]="displayMode == 'label'" fontSet="fas"
- matBadge="7" fontIcon="fa-paperclip fa-2x"></mat-icon>
- </button>
- <button color="primary" mat-icon-button title="{{lang.diffusionList}}"
- [disabled]="displayMode == 'label'">
- <mat-icon fontSet="fas" fontIcon="fa-sitemap fa-2x"></mat-icon>
- </button>
- <button color="primary" mat-icon-button title="{{lang.linkDetails}}"
- [disabled]="displayMode == 'label'">
- <mat-icon fontSet="fas" fontIcon="fa-info-circle fa-2x"></mat-icon>
- </button>
- </mat-button-toggle-group>
- </div>
- </mat-card>
- <div class="row">
- <div class="col-md-12 text-center">
- <button color="primary" mat-raised-button (click)="saveTemplate()">
- {{lang.validate}}
- </button>
- </div>
- </div>
+ <mat-tab label="Page de résultats">
+ <list-administration [currentBasketGroup]="group"></list-administration>
</mat-tab>
</mat-tab-group>
</mat-tab>
diff --git a/src/frontend/app/administration/basket/basket-administration.component.scss b/src/frontend/app/administration/basket/basket-administration.component.scss
index 513a6d3325d..a9f5f1be551 100644
--- a/src/frontend/app/administration/basket/basket-administration.component.scss
+++ b/src/frontend/app/administration/basket/basket-administration.component.scss
@@ -1,192 +1,3 @@
.mat-chip {
padding: 25px !important;
-}
-
-.availableData {
- margin: 10px;
- display: flex;
-}
-
-.secondaryInformations {
- border: solid 1px #F9983066;
- font-size: 10px;
- height: 30px;
- color: #666;
-}
-
-.resultRow {
- align-items: center;
- display: flex;
- padding: 5px;
-
- &-mobile {
- font-size: 80%;
- }
-}
-
-.resultCol {
- flex: 1;
- overflow: hidden;
- text-overflow: ellipsis;
-
- &-mobile {
- overflow: inherit;
- text-overflow: inherit;
- word-break: break-all;
- }
-}
-
-.actions {
- text-align: right;
- box-shadow: none;
- border: none;
- flex: 1;
- justify-content: flex-end;
- overflow: inherit;
-}
-
-.elemToDrag {
- flex: 1;
- border: dashed 1px;
- padding: 10px;
- height: 10px;
- line-height: 0px;
- cursor: move;
- margin-right: 5px;
- margin-left: 5px;
-}
-
-.columns {
- width: 100%;
- height: 90px;
- padding: 20px 10px;
- border-bottom: solid 1px #ccc;
- color: rgba(0, 0, 0, 0.87);
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- box-sizing: border-box;
- background: white;
- font-size: 14px;
-}
-
-.mat-badge-content {
- background: #F99830;
-}
-
-.example-list {
- max-width: 100%;
- height: 30px;
- display: flex;
- flex-direction: row;
- border-radius: 4px;
- overflow: hidden;
- border: solid 1px #F9983066;
- font-size: 10px;
- background: #f5f5f5;
-}
-
-.example-box {
- padding: 20px 10px;
- //border-right: solid 1px #ccc;
- color: #666;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- box-sizing: border-box;
- cursor: move;
- background: #f5f5f5;
- flex-grow: 1;
- flex-basis: 0;
-}
-
-.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);
-}
-
-.cdk-drag-placeholder {
- opacity: 0;
-}
-
-.cdk-drag-animating {
- transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.example-box:last-child {
- border: none;
-}
-
-.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
- transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.editorTool {
- display: flex;
- height: 44px;
- font-size: 10px;
- margin-bottom: 10px;
-
- .area {
- flex: 1;
- }
-
- .separator {
- border-left: solid 1px #666;
- height: 70%;
- margin-left: 10px;
- margin-right: 10px;
- }
-
- .mat-form-field {
- height: 35px;
- }
-}
-
-/deep/ .mat-option-text {
- display: flex !important;
-
- .dataIcon {
- width: 30px;
-
- i {
- font-size: 14px;
- }
- }
- .dataLabel {
- flex: 1;
- }
-}
-
-.centerData {
- text-align: center;
-}
-
-.rightData {
- text-align: right;
-}
-
-.boldFontData {
- font-weight: bold;
-}
-
-.bigFontData {
- font-size: 14px;
-}
-
-.smallFontData {
- font-size: 10px;
-}
-
-.normalData {
- flex: 1;
-}
-
-.longData {
- flex: 3;
}
\ No newline at end of file
diff --git a/src/frontend/app/administration/basket/basket-administration.component.ts b/src/frontend/app/administration/basket/basket-administration.component.ts
index cf2d263e736..d766f57a94d 100755
--- a/src/frontend/app/administration/basket/basket-administration.component.ts
+++ b/src/frontend/app/administration/basket/basket-administration.component.ts
@@ -8,9 +8,6 @@ import { NotificationService } from '../../notification.service';
import { HeaderService } from '../../../service/header.service';
import { AutoCompletePlugin } from '../../../plugins/autocomplete.plugin';
import { FormControl } from '@angular/forms';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { Observable } from 'rxjs';
-import { startWith, map } from 'rxjs/operators';
declare function $j(selector: any): any;
declare var angularGlobals: any;
@@ -47,101 +44,6 @@ export class BasketAdministrationComponent implements OnInit {
resultPages: any[] = [];
list_display: any[] = [];
creationMode: boolean;
- availableData: any = [
- {
- 'id': 'priority_label',
- 'label': 'Priorité',
- 'sample': 'normal',
- 'class': [],
- 'icon': 'fa-traffic-light '
- },
- {
- 'id': 'category',
- 'label': 'Catégorie',
- 'sample': 'courrier arrivée',
- 'class': [],
- 'icon': 'fa-file'
- },
- {
- 'id': 'type',
- 'label': 'Type de courrier',
- 'sample': 'Réclamation',
- 'class': [],
- 'icon': 'fa-suitcase'
- },
- {
- 'id': 'attribution',
- 'label': 'Attributaire (entité destinatrice)',
- 'sample': 'Barbara BAIN (Pôle Jeunesse et Sport)',
- 'class': [],
- 'icon': 'fa-sitemap'
- },
- {
- 'id': 'senders',
- 'label': 'Destinataire',
- 'sample': 'Patricia PETIT',
- 'class': [],
- 'icon': 'fa-user'
- },
- {
- 'id': 'recipients',
- 'label': 'Expéditeur',
- 'sample': 'Alain DUBOIS (MAARCH)',
- 'class': [],
- 'icon': 'fa-book'
- },
- {
- 'id': 'creation_limit_date',
- 'label': 'Date de création - Date limite',
- 'sample': '1er mai - <i class="fa fa-stopwatch"></i> <b color="warn">3 jour(s)</b>',
- 'class': [],
- 'icon': 'fa-calendar'
- },
- {
- 'id': 'workflow_visa',
- 'label': 'Circuit de visa',
- 'sample': '<i color="accent" class="fa fa-check"></i> Barbara BAIN -> <i class="fa fa-hourglass-half"></i> <b>Bruno BOULE</b> -> <i class="fa fa-hourglass-half"></i> Patricia PETIT',
- 'class': [],
- 'icon': 'fa-list-ol'
- },
- {
- 'id': 'workflow_avis',
- 'label': 'Nombre d\'avis donné',
- 'sample': '<b>3</b> avis donné(s)',
- 'class': [],
- 'icon': 'fa-comment-alt'
- },
- ];
- displayedMainData: any = [];
- displayedSecondaryData: any = [{
- 'id': 'priority_label',
- 'class': [],
- },
- {
- 'id': 'category',
- 'class': [],
- },
- {
- 'id': 'type',
- 'class': [],
- },
- {
- 'id': 'senders',
- 'class': [],
- },
- {
- 'id': 'recipients',
- 'class': [],
- },
- {
- 'id': 'creation_limit_date',
- 'class': [],
- }
- ];
- displayMode: string = 'label';
- dataControl = new FormControl();
- filteredDataOptions: Observable<string[]>;
- resultListLoaded: boolean = false;
displayedColumns = ['label_action', 'actions'];
orderColumns = ['alt_identifier', 'creation_date', 'process_limit_date', 'res_id', 'priority'];
@@ -442,179 +344,6 @@ export class BasketAdministrationComponent implements OnInit {
});
}
}
-
- toggleData() {
- if (this.displayMode == 'label') {
- this.displayMode = 'sample';
- } else {
- this.displayMode = 'label';
- }
-
- }
-
- initResultList(e: any, indexGroup: any) {
- if (e.index == 1) {
- console.log('init');
-
- this.filteredDataOptions = this.dataControl.valueChanges
- .pipe(
- startWith(''),
- map(value => this._filterData(value))
- );
-
- let indexData: number = 0;
-
- this.availableData = [
- {
- 'id': 'priority_label',
- 'label': 'Priorité',
- 'sample': 'normal',
- 'class': [],
- 'icon': 'fa-traffic-light '
- },
- {
- 'id': 'category',
- 'label': 'Catégorie',
- 'sample': 'courrier arrivée',
- 'class': [],
- 'icon': 'fa-file'
- },
- {
- 'id': 'type',
- 'label': 'Type de courrier',
- 'sample': 'Réclamation',
- 'class': [],
- 'icon': 'fa-suitcase'
- },
- {
- 'id': 'attribution',
- 'label': 'Attributaire (entité destinatrice)',
- 'sample': 'Barbara BAIN (Pôle Jeunesse et Sport)',
- 'class': [],
- 'icon': 'fa-sitemap'
- },
- {
- 'id': 'senders',
- 'label': 'Destinataire',
- 'sample': 'Patricia PETIT',
- 'class': [],
- 'icon': 'fa-user'
- },
- {
- 'id': 'recipients',
- 'label': 'Expéditeur',
- 'sample': 'Alain DUBOIS (MAARCH)',
- 'class': [],
- 'icon': 'fa-book'
- },
- {
- 'id': 'creation_limit_date',
- 'label': 'Date de création - Date limite',
- 'sample': '1er mai - <i class="fa fa-stopwatch"></i> <b color="warn">3 jour(s)</b>',
- 'class': [],
- 'icon': 'fa-calendar'
- },
- {
- 'id': 'workflow_visa',
- 'label': 'Circuit de visa',
- 'sample': '<i color="accent" class="fa fa-check"></i> Barbara BAIN -> <i class="fa fa-hourglass-half"></i> <b>Bruno BOULE</b> -> <i class="fa fa-hourglass-half"></i> Patricia PETIT',
- 'class': [],
- 'icon': 'fa-list-ol'
- },
- {
- 'id': 'workflow_avis',
- 'label': 'Nombre d\'avis donné',
- 'sample': '<b>3</b> avis donné(s)',
- 'class': [],
- 'icon': 'fa-comment-alt'
- },
- ];
- if (this.basketGroups[indexGroup].list_display.length > 0) {
- this.displayedSecondaryData = [];
- this.basketGroups[indexGroup].list_display.forEach((element: any) => {
- indexData = this.availableData.map((e: any) => { return e.id; }).indexOf(element.id);
- this.availableData[indexData].class = element.class;
- this.displayedSecondaryData.push(this.availableData[indexData]);
- this.availableData.splice(indexData, 1);
- });
- }
-
- this.displayedMainData = [
- {
- 'id': 'status_chrono',
- 'label': 'N°Chrono',
- 'sample': 'MAARCH/2018A/1',
- 'class': ['centerData', 'normalData'],
- 'icon': ''
- },
- {
- 'id': 'subject',
- 'label': 'Objet',
- 'sample': 'Plainte concernant des nuisances sonore nocturne (le 20/12/2018)',
- 'class': ['longData'],
- 'icon': ''
- },
- ];
-
- this.resultListLoaded = true;
- }
-
- }
-
- setFont(item: any, value: string) {
- const index = item.class.indexOf(value);
-
- if (index === -1) {
- item.class.push(value);
- } else {
- item.class.splice(index, 1);
- }
- }
-
- addData(data: any) {
- let i = this.availableData.map((e: any) => { return e.id; }).indexOf(data.id);
- this.displayedSecondaryData.push(data);
- this.availableData.splice(i, 1);
- this.dataControl.setValue('');
- }
-
- removeData(data: any, i: number) {
- this.availableData.push(data);
- this.displayedSecondaryData.splice(i, 1);
- this.dataControl.setValue('');
- }
-
- removeAllData() {
- this.availableData = this.availableData.concat(this.displayedSecondaryData);
- this.displayedSecondaryData = [];
- this.dataControl.setValue('');
- }
-
- drop(event: CdkDragDrop<string[]>) {
- if (event.previousContainer === event.container) {
- moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
- }
- }
-
- saveTemplate() {
- let template: any = [];
- this.displayedSecondaryData.forEach((element: any) => {
- template.push(
- {
- 'id': element.id,
- 'class': element.class,
- }
- );
- });
-
- console.log(template);
- }
-
- private _filterData(value: string): string[] {
- const filterValue = value.toLowerCase();
-
- return this.availableData.filter((option:any) => option.label.toLowerCase().includes(filterValue));
- }
}
@Component({
diff --git a/src/frontend/app/administration/basket/list/list-administration.component.html b/src/frontend/app/administration/basket/list/list-administration.component.html
new file mode 100644
index 00000000000..ce349963bdf
--- /dev/null
+++ b/src/frontend/app/administration/basket/list/list-administration.component.html
@@ -0,0 +1,108 @@
+<mat-toolbar class="editorTool">
+ <span>
+ <button color="primary" *ngIf="displayMode=='label'" mat-icon-button (click)="toggleData()" title="Prévisualisation">
+ <mat-icon fontSet="fas" fontIcon="fa-eye" title="Mode données"></mat-icon>
+ </button>
+ <button color="primary" *ngIf="displayMode=='sample'" mat-icon-button (click)="toggleData()" title="Édition">
+ <mat-icon fontSet="fas" fontIcon="fa-edit" title="Mode édition"></mat-icon>
+ </button>
+ </span>
+ <span class="area">
+ <form style="width:100%;">
+ <mat-form-field appearance="outline" floatLabel="never">
+ <input name="availableData" type="text" matInput [formControl]="dataControl" placeholder="Données disponibles"
+ [matAutocomplete]="auto">
+ <mat-autocomplete #auto="matAutocomplete" (optionSelected)="addData($event)">
+ <mat-option *ngFor="let item of filteredDataOptions | async" [value]="item" class="dataList">
+ <span class="dataIcon">
+ <i color="primary" class="fa {{item.icon}} fa-2x"></i>
+ </span>
+ <span class="dataLabel">
+ {{item.label}}
+ </span>
+ </mat-option>
+ </mat-autocomplete>
+ </mat-form-field>
+ </form>
+ </span>
+ <span>
+ <button color="warn" mat-button (click)="removeAllData()" style="float:right;" [disabled]="displayMode=='sample'">
+ Tout effacer
+ </button>
+ </span>
+</mat-toolbar>
+<mat-card style="border-bottom: solid 1px rgba(0,0,0,0.12);">
+ <ng-container *ngIf="(displayedSecondaryData.length > 0 && displayMode=='sample') || displayMode=='label'">
+ <mat-toolbar class="secondaryInformations example-list" cdkDropListOrientation="horizontal" cdkDropList
+ [cdkDropListData]="displayedSecondaryData" (cdkDropListDropped)="drop($event)">
+ <span class="example-box" *ngFor="let item of displayedSecondaryData;let itData=index" cdkDrag>
+ <button *ngIf="displayMode=='label'" color="primary" mat-icon-button [matMenuTriggerFor]="menu">
+ <mat-icon fontSet="fas" fontIcon="fa-ellipsis-v fa-2x"></mat-icon>
+ </button>
+ <mat-menu #menu="matMenu">
+ <button mat-menu-item style="text-align: center;" (click)="removeData(item,itData)">
+ <mat-icon style="height: auto;" color="warn" fontSet="fas" fontIcon="fa-trash fa-2x"></mat-icon>
+ <span>{{lang.delete}}</span>
+ </button>
+ <mat-divider></mat-divider>
+ <button [class.isSelectedMenu]="item.cssClasses.indexOf('boldFontData') > 0" mat-menu-item (click)="setStyle(item,'boldFontData')">
+ <mat-icon style="height: auto;" fontSet="fas" fontIcon="fa-bold fa-2x"></mat-icon>
+ <span>Gras</span>
+ </button>
+ <button [class.isSelectedMenu]="item.cssClasses.indexOf('align_centerData') > 0" mat-menu-item (click)="setStyle(item,'align_centerData')">
+ <mat-icon style="height: auto;" fontSet="fas" fontIcon="fa-align-center fa-2x"></mat-icon>
+ <span>Centré</span>
+ </button>
+ <button [class.isSelectedMenu]="item.cssClasses.indexOf('align_rightData') > 0" mat-menu-item (click)="setStyle(item,'align_rightData')">
+ <mat-icon style="height: auto;" fontSet="fas" fontIcon="fa-align-right fa-2x"></mat-icon>
+ <span>Droite</span>
+ </button>
+ <button [class.isSelectedMenu]="item.cssClasses.indexOf('bigFontData') > 0" mat-menu-item (click)="setStyle(item,'bigFontData')">
+ <mat-icon style="height: auto;" fontSet="fas" fontIcon="fa-text-height fa-2x"></mat-icon>
+ <span>Grand</span>
+ </button>
+ </mat-menu>
+ <span style="width:100%;" [class]="item.cssClasses.join(' ')">
+ <i class="fa {{item.icon}}"></i>
+ <span style="width:100%;" [innerHTML]="item[displayMode]"></span>
+ </span>
+ </span>
+ </mat-toolbar>
+ </ng-container>
+ <div class="resultRow newRow">
+ <span class="resultCol" *ngFor="let item of displayedMainData;let i=index" [class]="item.cssClasses.join(' ')">
+ <span *ngIf="i == 0">
+ <mat-icon *ngIf="displayMode=='label'" color="primary" class="fm fm-letter fm-2x"></mat-icon>
+ <mat-icon *ngIf="displayMode=='sample'" color="warn" class="fm fm-letter-status-inprogress fm-2x"></mat-icon><br />
+ <span style="color: rgba(0,0,0,0.4);font-size: 90%;">{{item[displayMode]}}</span>
+ </span>
+ <span *ngIf="i == 1">
+ {{item[displayMode]}}
+ </span>
+ </span>
+ <mat-button-toggle-group class="actions" multiple>
+ <button color="primary" mat-icon-button title="{{lang.notes}}" [disabled]="displayMode == 'label'">
+ <mat-icon [matBadgeHidden]="displayMode == 'label'" fontSet="fas" matBadge="2" fontIcon="fa-comments fa-2x"></mat-icon>
+ </button>
+ <button color="primary" mat-icon-button title="{{lang.attachments}}" [disabled]="displayMode == 'label'">
+ <mat-icon [matBadgeHidden]="displayMode == 'label'" fontSet="fas" matBadge="7" fontIcon="fa-paperclip fa-2x"></mat-icon>
+ </button>
+ <button color="primary" mat-icon-button title="{{lang.diffusionList}}" [disabled]="displayMode == 'label'">
+ <mat-icon fontSet="fas" fontIcon="fa-sitemap fa-2x"></mat-icon>
+ </button>
+ <button color="primary" mat-icon-button title="{{lang.linkDetails}}" [disabled]="displayMode == 'label'">
+ <mat-icon fontSet="fas" fontIcon="fa-info-circle fa-2x"></mat-icon>
+ </button>
+ </mat-button-toggle-group>
+ </div>
+</mat-card>
+<div class="row">
+ <div class="col-md-12 text-center">
+ <button color="primary" mat-raised-button (click)="saveTemplate()" [disabled]="checkModif()">
+ {{lang.validate}}
+ </button>
+ <button color="default" mat-raised-button (click)="cancelModification()" [disabled]="checkModif()">
+ {{lang.cancel}}
+ </button>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/frontend/app/administration/basket/list/list-administration.component.scss b/src/frontend/app/administration/basket/list/list-administration.component.scss
new file mode 100644
index 00000000000..30e2d8c659d
--- /dev/null
+++ b/src/frontend/app/administration/basket/list/list-administration.component.scss
@@ -0,0 +1,201 @@
+.availableData {
+ margin: 10px;
+ display: flex;
+}
+
+.secondaryInformations {
+ border: solid 1px #F9983066;
+ font-size: 10px;
+ height: 30px;
+ color: #666;
+}
+
+.resultRow {
+ align-items: center;
+ display: flex;
+ padding: 5px;
+
+ &-mobile {
+ font-size: 80%;
+ }
+}
+
+.resultCol {
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &-mobile {
+ overflow: inherit;
+ text-overflow: inherit;
+ word-break: break-all;
+ }
+}
+
+.actions {
+ text-align: right;
+ box-shadow: none;
+ border: none;
+ flex: 1;
+ justify-content: flex-end;
+ overflow: inherit;
+}
+
+.elemToDrag {
+ flex: 1;
+ border: dashed 1px;
+ padding: 10px;
+ height: 10px;
+ line-height: 0px;
+ cursor: move;
+ margin-right: 5px;
+ margin-left: 5px;
+}
+
+.columns {
+ width: 100%;
+ height: 90px;
+ padding: 20px 10px;
+ border-bottom: solid 1px #ccc;
+ color: rgba(0, 0, 0, 0.87);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ background: white;
+ font-size: 14px;
+}
+
+.mat-badge-content {
+ background: #F99830;
+}
+
+.example-list {
+ max-width: 100%;
+ height: 30px;
+ display: flex;
+ flex-direction: row;
+ border-radius: 4px;
+ overflow: hidden;
+ border: solid 1px #F9983066;
+ font-size: 10px;
+ background: #f5f5f5;
+}
+
+.example-box {
+ padding: 20px 10px;
+ //border-right: solid 1px #ccc;
+ color: #666;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ cursor: move;
+ background: #f5f5f5;
+ flex-grow: 1;
+ flex-basis: 0;
+}
+
+.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);
+}
+
+.cdk-drag-placeholder {
+ opacity: 0;
+}
+
+.cdk-drag-animating {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-box:last-child {
+ border: none;
+}
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.editorTool {
+ display: flex;
+ height: 44px;
+ font-size: 10px;
+ margin-bottom: 10px;
+
+ .area {
+ flex: 1;
+ }
+
+ .separator {
+ border-left: solid 1px #666;
+ height: 70%;
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
+ .mat-form-field {
+ height: 35px;
+ }
+
+ /deep/ .mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline {
+ background: inherit;
+ }
+
+ /deep/ .mat-form-field-outline {
+ background: white;
+ }
+}
+
+/deep/ .mat-option-text {
+ display: flex !important;
+
+ .dataIcon {
+ width: 30px;
+
+ i {
+ font-size: 14px;
+ }
+ }
+
+ .dataLabel {
+ flex: 1;
+ }
+}
+
+.isSelectedMenu {
+ box-shadow: inset 0px 0px 5px 0px #656565;
+}
+
+.align_centerData {
+ text-align: center;
+}
+
+.align_rightData {
+ text-align: right;
+}
+
+.boldFontData {
+ font-weight: bold;
+}
+
+.bigFontData {
+ font-size: 14px;
+}
+
+.smallFontData {
+ font-size: 10px;
+}
+
+.normalData {
+ flex: 1;
+}
+
+.longData {
+ flex: 3;
+}
\ No newline at end of file
diff --git a/src/frontend/app/administration/basket/list/list-administration.component.ts b/src/frontend/app/administration/basket/list/list-administration.component.ts
new file mode 100644
index 00000000000..37048a19a48
--- /dev/null
+++ b/src/frontend/app/administration/basket/list/list-administration.component.ts
@@ -0,0 +1,245 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { LANG } from '../../../translate.component';
+import { NotificationService } from '../../../notification.service';
+import { Observable } from 'rxjs';
+import { FormControl } from '@angular/forms';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { startWith, map } from 'rxjs/operators';
+
+@Component({
+ selector: 'list-administration',
+ templateUrl: "list-administration.component.html",
+ styleUrls: ['list-administration.component.scss'],
+ providers: [NotificationService],
+})
+export class ListAdministrationComponent2 implements OnInit {
+
+ lang: any = LANG;
+ loading: boolean = false;
+
+ displayedMainData: any = [
+ {
+ 'value': 'status_chrono',
+ 'label': 'N°Chrono',
+ 'sample': 'MAARCH/2018A/1',
+ 'cssClasses': ['align_centerData', 'normalData'],
+ 'icon': ''
+ },
+ {
+ 'value': 'subject',
+ 'label': 'Objet',
+ 'sample': 'Plainte concernant des nuisances sonore nocturne (le 20/12/2018)',
+ 'cssClasses': ['longData'],
+ 'icon': ''
+ },];
+
+ availableData: any = [
+ {
+ 'value': 'priority_label',
+ 'label': 'Priorité',
+ 'sample': 'normal',
+ 'cssClasses': [],
+ 'icon': 'fa-traffic-light '
+ },
+ {
+ 'value': 'category',
+ 'label': 'Catégorie',
+ 'sample': 'courrier arrivée',
+ 'cssClasses': [],
+ 'icon': 'fa-exchange-alt'
+ },
+ {
+ 'value': 'type',
+ 'label': 'Type de courrier',
+ 'sample': 'Réclamation',
+ 'cssClasses': [],
+ 'icon': 'fa-suitcase'
+ },
+ {
+ 'value': 'attribution',
+ 'label': 'Attributaire (entité destinatrice)',
+ 'sample': 'Barbara BAIN (Pôle Jeunesse et Sport)',
+ 'cssClasses': [],
+ 'icon': 'fa-sitemap'
+ },
+ {
+ 'value': 'senders',
+ 'label': 'Destinataire',
+ 'sample': 'Patricia PETIT',
+ 'cssClasses': [],
+ 'icon': 'fa-user'
+ },
+ {
+ 'value': 'recipients',
+ 'label': 'Expéditeur',
+ 'sample': 'Alain DUBOIS (MAARCH)',
+ 'cssClasses': [],
+ 'icon': 'fa-book'
+ },
+ {
+ 'value': 'creation_limit_date',
+ 'label': 'Date de création - Date limite',
+ 'sample': '1er mai - <i class="fa fa-stopwatch"></i> <b color="warn">3 jour(s)</b>',
+ 'cssClasses': [],
+ 'icon': 'fa-calendar'
+ },
+ {
+ 'value': 'workflow_visa',
+ 'label': 'Circuit de visa',
+ 'sample': '<i color="accent" class="fa fa-check"></i> Barbara BAIN -> <i class="fa fa-hourglass-half"></i> <b>Bruno BOULE</b> -> <i class="fa fa-hourglass-half"></i> Patricia PETIT',
+ 'cssClasses': [],
+ 'icon': 'fa-list-ol'
+ },
+ {
+ 'value': 'workflow_avis',
+ 'label': 'Nombre d\'avis donné',
+ 'sample': '<b>3</b> avis donné(s)',
+ 'cssClasses': [],
+ 'icon': 'fa-comment-alt'
+ },
+ ];
+ availableDataClone: any = [];
+
+ displayedSecondaryData: any = [];
+ displayedSecondaryDataClone: any = [];
+
+ displayMode: string = 'label';
+ dataControl = new FormControl();
+ filteredDataOptions: Observable<string[]>;
+
+ @Input('currentBasketGroup') private basketGroup: any;
+
+ constructor(public http: HttpClient, private notify: NotificationService) { }
+
+ ngOnInit(): void {
+ this.filteredDataOptions = this.dataControl.valueChanges
+ .pipe(
+ startWith(''),
+ map(value => this._filterData(value))
+ );
+
+ this.availableDataClone = JSON.parse(JSON.stringify(this.availableData));
+ this.displayedSecondaryData = [];
+ let indexData: number = 0;
+ this.basketGroup.list_display.forEach((element: any) => {
+ indexData = this.availableData.map((e: any) => { return e.value; }).indexOf(element.value);
+ this.availableData[indexData].cssClasses = element.cssClasses;
+ this.displayedSecondaryData.push(this.availableData[indexData]);
+ this.availableData.splice(indexData, 1);
+ });
+ this.displayedSecondaryDataClone = JSON.parse(JSON.stringify(this.displayedSecondaryData));
+ }
+
+ toggleData() {
+ this.dataControl.disabled ? this.dataControl.enable() : this.dataControl.disable();
+
+ if (this.displayMode == 'label') {
+ this.displayMode = 'sample';
+ } else {
+ this.displayMode = 'label';
+ }
+
+ }
+
+ setStyle(item: any, value: string) {
+ let typeFont = value.split('_');
+
+ if(typeFont.length == 2) {
+ item.cssClasses.forEach((element: any, index: number) => {
+ if (element.includes(typeFont[0]) && element != value) {
+ item.cssClasses.splice(index, 1);
+ }
+ });
+ }
+
+ const index = item.cssClasses.indexOf(value);
+
+ if (index === -1) {
+ item.cssClasses.push(value);
+ } else {
+ item.cssClasses.splice(index, 1);
+ }
+ }
+
+ addData(event: any) {
+ if (this.displayedSecondaryData.length >= 7) {
+ this.dataControl.setValue('');
+ alert("Le nombre maximal d'élements affichés a été atteint");
+ } else {
+ let i = this.availableData.map((e: any) => { return e.value; }).indexOf(event.option.value.value);
+ this.displayedSecondaryData.push(event.option.value);
+ this.availableData.splice(i, 1);
+ this.dataControl.setValue('');
+ }
+ }
+
+ removeData(data: any, i: number) {
+ this.availableData.push(data);
+ this.displayedSecondaryData.splice(i, 1);
+ this.dataControl.setValue('');
+ }
+
+ removeAllData() {
+ this.availableData = this.availableData.concat(this.displayedSecondaryData);
+ this.displayedSecondaryData = [];
+ this.dataControl.setValue('');
+ }
+
+ drop(event: CdkDragDrop<string[]>) {
+ if (event.previousContainer === event.container) {
+ moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+ }
+ }
+
+ saveTemplate() {
+ let template: any = [];
+ this.displayedSecondaryData.forEach((element: any) => {
+ template.push(
+ {
+ 'value': element.value,
+ 'cssClasses': element.cssClasses,
+ }
+ );
+ });
+
+ this.http.put("../../rest/baskets/" + this.basketGroup.basket_id + "/groups/" + this.basketGroup.group_id, { 'list_display': template })
+ .subscribe(() => {
+ this.displayedSecondaryDataClone = JSON.parse(JSON.stringify(this.displayedSecondaryData));
+ this.notify.success(this.lang.actionsGroupBasketUpdated);
+ }, (err) => {
+ this.notify.error(err.error.errors);
+ });
+ }
+
+ private _filterData(value: any): string[] {
+ let filterValue = '';
+
+ if (typeof value === 'string') {
+ filterValue = value.toLowerCase();
+ } else if (value !== null) {
+ filterValue = value.label.toLowerCase();
+ }
+ return this.availableData.filter((option: any) => option.label.toLowerCase().includes(filterValue));
+ }
+
+ checkModif() {
+ if (JSON.stringify(this.displayedSecondaryData) === JSON.stringify(this.displayedSecondaryDataClone)) {
+ return true
+ } else {
+ return false;
+ }
+ }
+
+ cancelModification() {
+ this.displayedSecondaryData = JSON.parse(JSON.stringify(this.displayedSecondaryDataClone));
+ this.availableData = JSON.parse(JSON.stringify(this.availableDataClone));
+
+ let indexData: number = 0;
+ this.displayedSecondaryData.forEach((element: any) => {
+ indexData = this.availableData.map((e: any) => { return e.value; }).indexOf(element.value);
+ this.availableData.splice(indexData, 1);
+ });
+ this.dataControl.setValue('');
+ }
+}
--
GitLab