FEAT #11779 TIME 5 add indexing page skeleton

src/frontend/app/app-routing.module.ts

@@ -11,7 +11,8 @@ import { SignatureBookComponent }           from './signature-book.component';
 import { SaveNumericPackageComponent }      from './save-numeric-package.component';
 import { PrintSeparatorComponent }          from './separator/print-separator/print-separator.component';
 import { AppGuard }                         from '../service/app.guard';
-import { FolderDocumentListComponent } from './folder/document-list/folder-document-list.component';
+import { FolderDocumentListComponent }      from './folder/document-list/folder-document-list.component';
+import { IndexationComponent }              from './indexation/indexation.component';
 
 @NgModule({
     imports: [
@@ -26,6 +27,7 @@ import { FolderDocumentListComponent } from './folder/document-list/folder-docum
             { path: 'saveNumericPackage', canActivate: [AppGuard], component: SaveNumericPackageComponent },
             { path: 'separators/print', canActivate: [AppGuard], component: PrintSeparatorComponent },
             { path: 'signatureBook/users/:userId/groups/:groupId/baskets/:basketId/resources/:resId', canActivate: [AppGuard],component: SignatureBookComponent },
+            { path: 'indexing/:group', canActivate: [AppGuard],component: IndexationComponent },
             { path: '**',  redirectTo: 'home', pathMatch: 'full' },
         ], { useHash: true }),
     ],

src/frontend/app/app.module.ts

@@ -65,6 +65,8 @@ import { AvisWorkflowComponent }             from './avis/avis-workflow.componen
 
 import { PrintSeparatorComponent }                        from './separator/print-separator/print-separator.component';
 
+import { IndexationComponent }                        from './indexation/indexation.component';
+
 
 @NgModule({
     imports: [
@@ -123,7 +125,8 @@ import { PrintSeparatorComponent }                        from './separator/prin
         FolderDocumentListComponent,
         FolderMenuComponent,
         FolderUpdateComponent,
-        FolderActionListComponent
+        FolderActionListComponent,
+        IndexationComponent
     ],
     entryComponents: [
         CustomSnackbarComponent,

src/frontend/app/indexation/indexation.component.html

+<mat-sidenav-container class="maarch-container">
+    <mat-sidenav #snavLeft class="panel-left" #snav [mode]="appService.getViewMode() ? 'over' : 'side'"
+        [fixedInViewport]="appService.getViewMode()" [opened]="appService.getViewMode() ? false : true"
+        autoFocus="false" style="overflow-x:hidden;" [ngStyle]="{'width': appService.getViewMode() ? '95%' : '600px'}">
+        <header-panel [snavLeft]="snav"></header-panel>
+        <div style="background: #F9F9F9;display: flex;padding: 10px;padding-left: 40px;padding-right: 40px;">
+            <button mat-button class="button-form-primary" [matMenuTriggerFor]="menu" style="flex:1;margin-right:20px;">
+                <span class="menu-label">
+                    Mon modèle (par défaut)
+                </span>
+                <i class="fa fa-chevron-down menu-icon"></i></button>
+            <mat-menu #menu="matMenu" [class]="'menuForm'">
+                <button mat-menu-item>Item 1</button>
+                <button mat-menu-item>Item 2</button>
+            </mat-menu>
+            <button mat-button class="button-form-primary"
+                style="flex:1;align-items: center;justify-content: center;text-align: center;display: flex;">Enregistrer
+                comme modèle</button>
+        </div>
+        <div class="indexing-form-container">
+            <app-indexing-form #indexingForm [indexingFormId]="1"></app-indexing-form>
+        </div>
+        <div class="actions-indexing-form">
+            <button mat-button class="button-form-primary" [matMenuTriggerFor]="menu" style="flex:1;margin-right:20px;">
+                <span class="menu-label">
+                    Enregistrer (par défaut)
+                </span>
+                <i class="fa fa-chevron-down menu-icon"></i></button>
+            <mat-menu #menu="matMenu" [class]="'menuForm'">
+                <button mat-menu-item>Item 1</button>
+                <button mat-menu-item>Item 2</button>
+            </mat-menu>
+            <button mat-button class="button-form-primary"
+                style="width: 150px;align-items: center;justify-content: center;text-align: center;display: flex;">Valider</button>
+        </div>
+    </mat-sidenav>
+    <mat-sidenav-content>
+        <div class="bg-head">
+            <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">
+                <div class="bg-head-title-label">
+                    <header-left [snavLeft]="snav"></header-left>
+                </div>
+                <div class="bg-head-title-tool">
+                    <header-right></header-right>
+                </div>
+            </div>
+        </div>
+        <div class="document-container" [class.fullContainer]="appService.getViewMode()">
+            <div class="content">
+                <i class="fa fa-file-upload upload-icon"></i><br />
+                Glisser-déposer<br />ou
+                <div style="display: flex;">
+                    <button mat-button class="button-form-primary" [matMenuTriggerFor]="menu"
+                        style="margin-right:20px;align-items: center;justify-content: center;text-align: center;display: flex;">
+                        <span class="menu-label">
+                            Choisir un modèle
+                        </span>
+                        <i class="fa fa-chevron-down menu-icon"></i>
+                    </button>
+                    <mat-menu #menu="matMenu" [class]="'menuForm'">
+                        <button mat-menu-item>Item 1</button>
+                        <button mat-menu-item>Item 2</button>
+                    </mat-menu>
+                    <button mat-button class="button-form-primary" style="align-items: center;justify-content: center;text-align: center;display: flex;">Choisissez votre fichier</button>
+                </div>
+            </div>
+        </div>
+    </mat-sidenav-content>
+    <mat-sidenav #snav2 [fixedInViewport]="appService.getViewMode()" position='end'
+        [opened]="appService.getViewMode() ? false : false" [mode]="appService.getViewMode() ? 'over' : 'side'"
+        class="panel-right" style="overflow-x:hidden;" [class.docView]="!filtersListService.filterMode"
+        [ngStyle]="{'width': appService.getViewMode() ? '80%' : '30%'}" autoFocus="false">
+    </mat-sidenav>
+</mat-sidenav-container>
\ No newline at end of file

src/frontend/app/indexation/indexation.component.scss

+@import '../../css/vars.scss';
+
+.panel-left {
+    ::ng-deep.mat-drawer-inner-container {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.document-container {
+    flex: 1;
+    padding-left: 50px;
+    padding-right: 50px;
+    color: white;
+    margin-top: 0px;
+    width: 100%;
+    overflow: hidden;
+    background-color: $primary;
+
+    .content {
+        overflow-y: auto;
+        overflow-x: hidden;
+        position: relative;
+        height: 100%;
+        min-height: 200px;
+        width: 100%;
+        border-radius: 0px;
+        box-shadow: none;
+        border: solid 1px white;
+        justify-content: center;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        font-weight: bold;
+        flex-direction: column;
+    }
+}
+
+.upload-icon {
+    font-size: 180px;
+    opacity: 0.4;
+    margin-bottom: 30px;
+}
+
+.indexing-form-container {
+    height: 100%;
+    overflow: auto;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 20px;
+}
+
+.actions-indexing-form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.07);
+    padding-left: 40px;
+    padding-right: 40px;
+}
\ No newline at end of file

src/frontend/app/indexation/indexation.component.ts

+import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { LANG } from '../translate.component';
+import { NotificationService } from '../notification.service';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSidenav } from '@angular/material/sidenav';
+
+import { DomSanitizer } from '@angular/platform-browser';
+import { ActivatedRoute, Router } from '@angular/router';
+import { HeaderService } from '../../service/header.service';
+import { FiltersListService } from '../../service/filtersList.service';
+
+import { Overlay } from '@angular/cdk/overlay';
+import { AppService } from '../../service/app.service';
+
+@Component({
+    templateUrl: "indexation.component.html",
+    styleUrls: [
+        'indexation.component.scss',
+        'indexing-form/indexing-form.component.scss'
+    ],
+    providers: [NotificationService, AppService],
+})
+export class IndexationComponent implements OnInit {
+
+    lang: any = LANG;
+
+    loading: boolean = false;
+
+
+    @ViewChild('snav', { static: true }) sidenavLeft: MatSidenav;
+    @ViewChild('snav2', { static: true }) sidenavRight: MatSidenav;
+
+    currentSelectedChrono: string = '';
+
+    constructor(
+        private route: ActivatedRoute,
+        public http: HttpClient,
+        public dialog: MatDialog,
+        private headerService: HeaderService,
+        public filtersListService: FiltersListService,
+        private notify: NotificationService,
+        public overlay: Overlay,
+        public viewContainerRef: ViewContainerRef,
+        public appService: AppService) { }
+
+    ngOnInit(): void {
+        this.loading = false;
+
+        this.headerService.setHeader("Enregistrement d'un courrer");
+
+        this.route.params.subscribe(params => {
+
+        },
+        (err: any) => {
+            this.notify.handleErrors(err);
+        });
+    }
+}
\ No newline at end of file

src/frontend/app/indexation/indexing-form/indexing-form.component.html

@@ -2,6 +2,11 @@
     <mat-spinner style="margin:auto;"></mat-spinner>
 </div>
 <ng-container *ngIf="!loading">
+    <div *ngIf="!adminMode" style="display: flex;align-items: center;justify-content: flex-end;">
+        <button mat-icon-button>
+            <mat-icon color="primary" class="far fa-star" style="font-size: 20px;"></mat-icon>
+        </button>
+    </div>
     <div class="banner" *ngFor="let category of fieldCategories">
         <div class="title">
             {{lang[category] | uppercase}}
@@ -10,15 +15,17 @@
         <div class="content">
             <div cdkDropList id="indexingModelsCustomFieldsList_{{category}}"
                 [cdkDropListConnectedTo]="['indexingModelsCustomFieldsList_mail','indexingModelsCustomFieldsList_contact','indexingModelsCustomFieldsList_process','indexingModelsCustomFieldsList_classement','customFieldsList','fieldsList']"
-                [cdkDropListData]="this['indexingModels_'+category]" (cdkDropListDropped)="drop($event)"
-                class="indexingModelsCustomFieldsList" style="min-height: 50px;">
+                [cdkDropListData]="this['indexingModels_'+category]" [cdkDropListDisabled]="!adminMode"
+                (cdkDropListDropped)="drop($event)" class="indexingModelsCustomFieldsList" style="min-height: 50px;">
                 <ng-container *ngFor="let field of this['indexingModels_'+category];let i=index">
                     <div class="fieldRow" *ngIf="field.unit === category" cdkDrag cdkDragLockAxis="y"
                         [cdkDragData]="field">
                         <div class="fieldLabel">
-                            <i class="fas fa-bars fa-2x" color="primary" style="cursor: move" cdkDragHandle></i>&nbsp;
+                            <i *ngIf="adminMode" class="fas fa-bars fa-2x" color="primary" style="cursor: move"
+                                cdkDragHandle></i>&nbsp;
                             {{field.label}}
-                            <button mat-icon-button [matMenuTriggerFor]="fieldActions" *ngIf="!field.system">
+                            <button *ngIf="adminMode && !field.system" mat-icon-button
+                                [matMenuTriggerFor]="fieldActions">
                                 <mat-icon class="fa fa-ellipsis-v" color="secondary"></mat-icon>
                             </button>
                             <mat-menu #fieldActions="matMenu">

src/frontend/app/indexation/indexing-form/indexing-form.component.scss

@@ -141,6 +141,127 @@
     }
 }
 
+.button-form-primary {
+    background: $primary;
+    border: solid 1px white;
+    color: white;
+    border-radius: 30px;
+    padding: 5px;
+    padding-left: 20px;
+    padding-right: 20px;
+    width: 240px;
+    transition: all 0.1s;
+    ::ng-deep.mat-button-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        
+        .menu-label {
+            display: flex;
+            flex: 1;
+        }
+        
+        .menu-icon {
+            display: flex;
+        }
+    }
+}
+
+.button-form-primary-alt {
+    font-size: 13px;
+    background: white;
+    border: solid 1px $primary;
+    color: $primary;
+    border-radius: 30px;
+    padding: 5px;
+    padding-left: 20px;
+    padding-right: 20px;
+    width: 240px;
+    transition: all 0.1s;
+
+    ::ng-deep.mat-button-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+
+        .menu-label {
+            display: flex;
+            flex: 1;
+        }
+        
+        .menu-icon {
+            display: flex;
+        }
+    }
+    
+}
+
+
+
+.button-form-primary:hover {
+    color: $primary;
+    background: white;
+    transition: all 0.1s;
+    border: solid 1px $primary;
+}
+
+
+.button-form-primary[aria-expanded=true] {
+    color: $primary;
+    background: white;
+    transition: all 0.1s;
+    border: solid 1px $primary;
+    /*border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-top-left-radius: 30px;
+    border-top-right-radius: 30px;*/
+}
+
+.button-form {
+    background: white;
+    color: $primary;
+    border-radius: 30px;
+    padding: 5px;
+    padding-left: 20px;
+    padding-right: 20px;
+    width: 240px;
+    transition: all 0.1s; 
+}
+
+.button-form[aria-expanded=true] {
+    transition: all 0.1s; 
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-top-left-radius: 30px;
+    border-top-right-radius: 30px;
+}
+
+::ng-deep.menuForm {
+    width: 240px;
+    border-radius: 30px;
+
+    border: solid 1px white;
+
+    .mat-menu-content {
+        padding-top: 0px;
+        padding-bottom: 0px;
+
+        .mat-menu-item {
+            transition: all 0.1s;
+            font-size: 12px;
+            color: #666;
+        }
+
+        .mat-menu-item:hover {
+            transition: all 0.1s;
+            color: white;
+            background: $primary;
+        }
+    }
+}
+
 .mat-form-field-disabled {
     ::ng-deep.mat-input-element {
         cursor: not-allowed;

src/frontend/app/indexation/indexing-form/indexing-form.component.ts

@@ -24,6 +24,7 @@ export class IndexingFormComponent implements OnInit {
     loading: boolean = true;
 
     @Input('indexingFormId') indexingFormId: number;
+    @Input('admin') adminMode: boolean;
 
     fieldCategories: any[] = ['mail', 'contact', 'process', 'classement'];
 
@@ -160,7 +161,8 @@ export class IndexingFormComponent implements OnInit {
     }
 
     ngOnInit(): void {
-
+        this.adminMode === undefined ? this.adminMode = false : this.adminMode = true;
+        
         this.fieldCategories.forEach(category => {
             this['indexingModels_' + category] = [];
         });

src/frontend/app/menu/menu-shortcut.component.ts

@@ -39,11 +39,14 @@ export class MenuShortcutComponent implements OnInit {
     }
 
     onSpeedDialFabClicked(group: any, shortcut:any) {
-        location.href = shortcut.servicepage+'&groupId='+group.id;
+        this.router.navigate(['/indexing/' + group.id]);
+        // location.href = shortcut.servicepage+'&groupId='+group.id;
     }
 
     gotToMenu(shortcut:any) {
-        if (shortcut.angular == 'true') {
+        if (shortcut.id === 'indexing') {
+            this.router.navigate([shortcut.servicepage + '/' + shortcut.groups[0].id]);
+        } else if (shortcut.angular == 'true') {
             this.router.navigate([shortcut.servicepage]);
         } else {
             location.href = shortcut.servicepage;

src/frontend/service/header.service.ts

@@ -37,6 +37,7 @@ export class HeaderService {
         if (this.shortcut === null) {
             this.http.get('../../rest/shortcuts').pipe(
                 tap((data: any) => this.setShortcut(data.shortcuts)),
+                tap((data: any) => console.log(this.shortcut)),
                 catchError((err: any) => {
                     console.log(err);
                     return of(false);
@@ -72,7 +73,7 @@ export class HeaderService {
     setShortcut(shortcuts: any) {
         this.shortcut = [];
         shortcuts.forEach((element: any) => {
-            if (['indexing', 'search'].indexOf(element.id) > -1) {
+            if (['search'].indexOf(element.id) > -1) {
                 // TO DO : DELETE AFTER FULL V2
                 this.setShortcutV1(element);
             } else {