App recherche : Pouvoir agir sur la taille du panneau d'arborescence

ui/ui-frontend-common/src/app/modules/directives/resize-sidebar/resize-sidebar.directive.spec.ts

+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import {ResizeSidebarDirective} from './resize-sidebar.directive';
+import {ComponentFixture, TestBed, waitForAsync} from "@angular/core/testing";
+import {Component} from "@angular/core";
+import {By} from "@angular/platform-browser";
+
+@Component({
+  template: `
+    <div>
+      <div class="cadre" vitamuiCommonResizeSidebar="left">
+        Test component
+      </div>
+    </div>
+  `,
+  styles: [`
+    .cadre {
+      width: 500px;
+      height: 600px;
+      border: 1px solid #000000;
+      position: relative;
+    }
+  `]
+})
+class ResizeSidebarTestComponent {
+}
+
+describe('ResizeSidebarDirective', () => {
+
+  let fixture: ComponentFixture<ResizeSidebarTestComponent>;
+
+  beforeEach((() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [ResizeSidebarDirective, ResizeSidebarTestComponent]
+    }).createComponent(ResizeSidebarTestComponent);
+    fixture.detectChanges();
+  }));
+
+  it('should have one element resizeable', () => {
+    const div = fixture.debugElement.queryAll(By.directive(ResizeSidebarDirective));
+    expect(div.length).toBe(1);
+  });
+
+  it('should have default barColor to be #702382', () => {
+    const div = fixture.debugElement.queryAll(By.css('.vitamuiResizeSidebar'));
+    const borderRightColor = div[0].nativeElement.style.borderRightColor;
+    expect(borderRightColor).toBe('rgb(112, 35, 130)');
+  });
+});

ui/ui-frontend-common/src/app/modules/directives/resize-sidebar/resize-sidebar.directive.ts

+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import {Directive, ElementRef, HostListener, Inject, Input, OnInit, Renderer2} from '@angular/core';
+import {DOCUMENT} from "@angular/common";
+
+@Directive({
+  selector: '[vitamuiCommonResizeSidebar]'
+})
+export class ResizeSidebarDirective implements OnInit {
+  /**
+   * Orientation du block à redimensionner, permet de positionner à droite ou à gauche la barre permettant de
+   * redimensionner
+   * valeur possible: left (par défaut) ou right
+   */
+  @Input('vitamuiCommonResizeSidebar') orientation: 'right'|'left' = 'left';
+
+  /**
+   * largeur de la barre permettant de redimensionner
+   * valeur par défaut : 4px
+   */
+  @Input() barSize: string = '4px';
+
+  /**
+   * Couleur de la barre permettant de redimensionner
+   * valeur par défaut #702382
+   */
+  @Input() barColor: string = 'rgb(112, 35, 130)';
+
+  /**
+   * Largeur du block à redimensionner
+   * valeur par défaut 300 (px)
+   */
+  @Input() width: number = 300;
+
+  private status = 0;
+
+  @HostListener('window:mousemove', ['$event'])
+  onMouseMove(event: MouseEvent) {
+    let mouse = { x: event.clientX, y: event.clientY };
+    if(this.status === 1) {
+      const space = Number(mouse.x) ? mouse.x : 0;
+      if(this.orientation === 'left') {
+        this.width = space;
+        this.elementRef.nativeElement.style.width = this.width + 'px';
+      } else {
+        const {left} = this.elementRef.nativeElement.getBoundingClientRect();
+        this.width = left - space + this.width;
+        this.elementRef.nativeElement.style.width = this.width + 'px';
+      }
+    }
+  }
+
+  @HostListener('window:mouseup')
+  onMouseUp() {
+    this.status = 0;
+  }
+
+  constructor(private elementRef: ElementRef, private renderer: Renderer2, @Inject(DOCUMENT) private document) { }
+
+  ngOnInit(): void {
+    const nativeElt = this.elementRef.nativeElement;
+    nativeElt.style.width = this.width + 'px';
+    const child = this.createResizeBar();
+    this.renderer.appendChild(nativeElt, child);
+  }
+
+  private createResizeBar() {
+    const div = this.document.createElement('div');
+    div.style.display = 'block';
+    div.style.height = '100%';
+    div.style.position = 'absolute';
+    div.className = 'vitamuiResizeSidebar';
+    div.style.zIndex = '99';
+    div.style.top = '0';
+    if(this.orientation === 'left') {
+      div.style.left = `calc(100% - ${this.barSize})`;
+      div.style.borderRight = `${this.barSize} solid ${this.barColor}`;
+    } else {
+      div.style.right = `calc(100% - ${this.barSize})`;
+      div.style.borderLeft = `${this.barSize} solid ${this.barColor}`;
+    }
+
+    div.style.cursor = 'ew-resize';
+
+    div.addEventListener('mousedown', event => this.setStatus(event, 1));
+
+    return div;
+  }
+
+  private setStatus(event: MouseEvent, status: number) {
+    if(status === 1) {
+      event.stopPropagation();
+    }
+    this.status = status;
+  }
+}

ui/ui-frontend-common/src/app/modules/directives/resize-sidebar/resize-sidebar.module.ts

+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import { ResizeSidebarDirective } from './resize-sidebar.directive';
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [ResizeSidebarDirective],
+  exports: [ResizeSidebarDirective]
+})
+export class ResizeSidebarModule { }

ui/ui-frontend-common/src/app/modules/vitamui-common.module.ts

@@ -98,6 +98,7 @@ import { SidenavPage } from './sidenav-page.class';
 import { StartupService } from './startup.service';
 import { SubrogationModule } from './subrogation/subrogation.module';
 import { VitamUIHttpInterceptor } from './vitamui-http-interceptor';
+import {ResizeSidebarModule} from "./directives/resize-sidebar/resize-sidebar.module";
 
 export function startupServiceFactory(startupService: StartupService) {
   // leave it like this due to run packagr issue :
@@ -164,7 +165,8 @@ export function startupServiceFactory(startupService: StartupService) {
     VitamuiCommonBannerModule,
     UserPhotoModule,
     VitamuiMenuButtonModule,
-    VitamuiSidenavHeaderModule
+    VitamuiSidenavHeaderModule,
+    ResizeSidebarModule
   ],
   entryComponents: [
     ErrorDialogComponent
@@ -218,7 +220,8 @@ export function startupServiceFactory(startupService: StartupService) {
     CommonProgressBarModule,
     CommonTooltipModule,
     VitamuiSidenavHeaderModule,
-    VitamuiMenuButtonModule
+    VitamuiMenuButtonModule,
+    ResizeSidebarModule
   ],
   providers: [
     { provide: SUBROGRATION_REFRESH_RATE_MS, useValue: 10000 },

ui/ui-frontend/projects/archive-search/src/app/archive/archive.component.html

 <mat-sidenav-container [autosize]="true" [hasBackdrop]="false">
-  
-  <mat-sidenav mode="side" [fixedInViewport]="true" opened="{{show}}" *ngIf="foundAccessContract" >
+
+  <mat-sidenav mode="side" [fixedInViewport]="true" opened="{{show}}" *ngIf="foundAccessContract" vitamuiCommonResizeSidebar>
     <app-filing-holding-scheme (fillingSchemaClose)="closePanel()"  [accessContract]="accessContract"></app-filing-holding-scheme>
   </mat-sidenav>
 
@@ -22,7 +22,7 @@
     </div>
     <div class="vitamui-content" *ngIf="foundAccessContract">
           <div class="row">
-            
+
             <button *ngIf="!show" type="button" class="btn secondary right-arround left-not-arround"
               (click)="hiddenTreeBlock(show)" matTooltip="{{'ARCHIVE_SEARCH.SHOW_TREES_PLANS' | translate}}"
               matTooltipClass="vitamui-tooltip" [matTooltipShowDelay]="300">
@@ -32,7 +32,7 @@
           <app-archive-search (archiveUnitClick)="showPreviewArchiveUnit($event)"
                               [accessContract]="accessContract">
           </app-archive-search>
-         
+
     </div>
   </mat-sidenav-content>
 </mat-sidenav-container>

ui/ui-frontend/projects/archive-search/src/app/archive/filing-holding-scheme/filing-holding-scheme.component.scss

 @import '~ui-frontend-common/sass/variables/colors';
 .tree-filing-scheme-side-panel{
-    min-width: 416px;
+    min-width: 100%;
     height: 100vh;
     background: white;
     margin-top: 90px;
-
 }
 .tree-filing-scheme{
     height:auto;
     max-height: 70vh;
-    overflow:auto;   
+    overflow:auto;
     width: 100%;
     overflow-x: auto;
     white-space: nowrap;
@@ -77,4 +76,4 @@
 
 .area-show-tree {
     padding-top: 20px;
-}
\ No newline at end of file
+}