FEAT #7731 routes done and started front view

apps/maarch_entreprise/Views/docservers-administration.component.html

+<div class="admin-container" [class.admin-is-mobile]="mobileQuery.matches">
+    <mat-toolbar color="primary" class="admin-toolbar">
+        <button mat-button (click)="snav.toggle()">
+            <mat-icon class="maarchLogo" [svgIcon]="mobileQuery.matches ? 'maarchLogoOnly' : 'maarchLogo'"></mat-icon>
+        </button>
+        <h1 class="admin-toolbar-title">{{lang.docservers}}
+        </h1>
+        <span style="flex: 1 1 auto;"></span>
+        <menu-top></menu-top>
+    </mat-toolbar>
+    <mat-sidenav-container class="admin-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
+        <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56"
+            [opened]="mobileQuery.matches ? false : true" style="width:300px;">
+            <menu-nav></menu-nav>
+            <mat-divider></mat-divider>
+        </mat-sidenav>
+        <mat-sidenav-content>
+            <div *ngIf="loading" style="display:flex;height:100%;">
+                <mat-spinner style="margin:auto;"></mat-spinner>
+            </div>
+            <mat-card *ngIf="!loading" class="card-app-content">
+                <div class="row">
+                    <div class="col-md-6 col-xs-6">
+                        <mat-form-field>
+                            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{lang.filterBy}}">
+                        </mat-form-field>
+                    </div>
+                    <div class="col-md-6 col-xs-6">
+                        <mat-paginator #paginator [length]="100" [pageSize]="10">
+                        </mat-paginator>
+                    </div>
+                </div>
+                <mat-table #table [dataSource]="dataSource" matSort matSortActive="docserver_id" matSortDirection="asc">
+                    <ng-container matColumnDef="docserver_id">
+                        <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.id}}</mat-header-cell>
+                        <mat-cell *matCellDef="let element">
+                        {{element.docserver_id}} </mat-cell>
+                    </ng-container>
+                    <ng-container matColumnDef="device_label">
+                        <mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-for-mobile]="mobileQuery.matches">{{lang.description}}</mat-header-cell>
+                        <mat-cell *matCellDef="let element" [class.hide-for-mobile]="mobileQuery.matches">
+                        {{element.device_label}} </mat-cell>
+                    </ng-container>
+                    <ng-container matColumnDef="docserver_type_id">
+                        <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.value}}</mat-header-cell>
+                        <mat-cell *matCellDef="let element">
+                        {{element.docserver_type_id}} </mat-cell>
+                    </ng-container>
+                    <ng-container matColumnDef="actions">
+                        <mat-header-cell *matHeaderCellDef></mat-header-cell>
+                        <mat-cell *matCellDef="let element" style="justify-content: flex-end;">
+                            <button mat-icon-button color="warn" matTooltip="{{lang.delete}}" (click)="$event.stopPropagation();">
+                                <mat-icon class="fa fa-trash-alt fa-2x" aria-hidden="true"></mat-icon>
+                            </button>
+                        </mat-cell>
+                    </ng-container>
+                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+                    <mat-row *matRowDef="let row; columns: displayedColumns;" routerLink="/administration/docservers/{{row.docserver_id}}" style="cursor:pointer;" matTooltip="{{lang.view}}"></mat-row>
+                </mat-table>
+            </mat-card>
+        </mat-sidenav-content>
+    </mat-sidenav-container>   
+</div>
\ No newline at end of file

apps/maarch_entreprise/js/angular/app/administration/administration-routing.module.ts

@@ -29,6 +29,7 @@ import { UpdateStatusAdministrationComponent }          from './update-status-ad
 import { ContactsGroupsAdministrationComponent }        from './contacts-groups-administration.component';
 import { ContactsGroupAdministrationComponent }         from './contacts-group-administration.component';
 import { VersionsUpdateAdministrationComponent }        from './versions-update-administration.component';
+import { DocserversAdministrationComponent }            from './docservers-administration.component';
  
 @NgModule({
     imports: [
@@ -71,6 +72,7 @@ import { VersionsUpdateAdministrationComponent }        from './versions-update-
             { path: 'administration/contacts-groups/new', component: ContactsGroupAdministrationComponent },
             { path: 'administration/contacts-groups/:id', component: ContactsGroupAdministrationComponent },
             { path: 'administration/versions-update', component: VersionsUpdateAdministrationComponent },
+            { path: 'administration/docservers', component: DocserversAdministrationComponent },
         ]),
     ],
     exports: [

apps/maarch_entreprise/js/angular/app/administration/administration.module.ts

@@ -39,6 +39,7 @@ import { NotificationAdministrationComponent }          from './notification-adm
 import { ContactsGroupsAdministrationComponent }        from './contacts-groups-administration.component';
 import { ContactsGroupAdministrationComponent }         from './contacts-group-administration.component';
 import { VersionsUpdateAdministrationComponent }        from './versions-update-administration.component';
+import { DocserversAdministrationComponent }            from './docservers-administration.component';
 
 @NgModule({
     imports:      [
@@ -88,7 +89,8 @@ import { VersionsUpdateAdministrationComponent }        from './versions-update-
         DiffusionModelsAdministrationComponent,
         DiffusionModelAdministrationComponent,
         SortPipe,
-        VersionsUpdateAdministrationComponent
+        VersionsUpdateAdministrationComponent,
+        DocserversAdministrationComponent,
     ],
     entryComponents: [
         UsersAdministrationRedirectModalComponent,

apps/maarch_entreprise/js/angular/app/administration/docservers-administration.component.ts

+import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { MediaMatcher } from '@angular/cdk/layout';
+import { HttpClient } from '@angular/common/http';
+import { LANG } from '../translate.component';
+import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material';
+
+declare function $j(selector: any): any;
+
+declare var angularGlobals: any;
+
+
+@Component({
+    templateUrl: "../../../../Views/docservers-administration.component.html"
+})
+export class DocserversAdministrationComponent implements OnInit {
+
+    mobileQuery                     : MediaQueryList;
+    private _mobileQueryListener    : () => void;
+
+    coreUrl     : string;
+    lang        : any = LANG;
+    loading     : boolean = false;
+    dataSource  : any;
+
+    docservers    : any = {};
+
+    @ViewChild(MatPaginator) paginator: MatPaginator;
+    @ViewChild(MatSort) sort: MatSort;
+
+
+    constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher, public http: HttpClient) {
+        $j("link[href='merged_css.php']").remove();
+        this.mobileQuery = media.matchMedia('(max-width: 768px)');
+        this._mobileQueryListener = () => changeDetectorRef.detectChanges();
+        this.mobileQuery.addListener(this._mobileQueryListener);
+    }
+
+    ngOnDestroy(): void {
+        this.mobileQuery.removeListener(this._mobileQueryListener);
+    }
+
+    applyFilter(filterValue: string) {
+        filterValue = filterValue.trim(); // Remove whitespace
+        filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
+        this.dataSource.filter = filterValue;
+    }
+
+    ngOnInit(): void {
+        this.coreUrl = angularGlobals.coreUrl;
+
+        this.loading = true;
+
+        this.http.get(this.coreUrl + 'rest/docservers')
+            .subscribe((data: any) => {
+                this.docservers = data.docservers;
+                setTimeout(() => {
+                    this.dataSource = new MatTableDataSource(this.docservers);
+                    this.dataSource.paginator = this.paginator;
+                    this.dataSource.sort = this.sort;
+                }, 0);
+                this.loading = false;
+
+            });
+    }
+}

apps/maarch_entreprise/js/angular/lang/lang-en.ts

@@ -399,6 +399,7 @@ export const LANG_EN = {
     "firstLevelDoctype"                 : "Folder",
     "secondLevelDoctype"                : "Sub-folder",
     "doctype"                           : "Document types",
+    "docservers"                        : "Docservers",
     "folderTypeList"                    : "Folder types list",
     "firstLevelAttached"                : "Attach to folder",
     "secondLevelAttached"               : "Attach to subfolder",

apps/maarch_entreprise/js/angular/lang/lang-fr.ts

@@ -135,6 +135,7 @@ export const LANG_FR = {
     "dlAttachment"                      : "Télécharger la pièce jointe",
     "doctype"                           : "Type de document",
     "doctypesAdmin"                     : "Typologie(s) documentaire(s)",
+    "docservers"                        : "Zones de stockage",
     "documents"                         : "document(s)",
     "documentTypeAdded"                 : "Type de document ajouté",
     "documentTypeDeleted"               : "Type de document supprimé",