Merge pull request #27 from DSI-HUG/bugfix/layout

Bugfix/layout

projects/demo-app/src/app/app.component.html

@@ -44,6 +44,12 @@ <h1 class="demo-app-name">hug/ngx-components Demo</h1>
                     <span mat-line>Timpe Picker</span>
                 </mat-list-item>
             </mat-nav-list>
+            <mat-nav-list>
+                <mat-list-item title="Layout" routerLink="/layout" routerLinkActive="active">
+                    <mat-icon mat-list-icon>dashboard</mat-icon>
+                    <span mat-line>Layout</span>
+                </mat-list-item>
+            </mat-nav-list>
         </mat-sidenav>
 
         <mat-sidenav-content>

projects/demo-app/src/app/app.routes.ts

@@ -8,5 +8,6 @@ export const appRoutes: Routes = [
     { path: 'snackbar', loadComponent: () => import('./snackbar/snackbar-demo.component').then(m => m.SnackbarDemoComponent), data: { title: 'Snackbar' } },
     { path: 'splitter', loadComponent: () => import('./splitter/splitter-demo.component').then(m => m.SplitterDemoComponent), data: { title: 'Splitter' } },
     { path: 'time-picker', loadComponent: () => import('./time-picker/time-picker-demo.component').then(m => m.TimePickerDemoComponent), data: { title: 'Time Picker' } },
+    { path: 'layout', loadComponent: () => import('./layout/layout-demo.component').then(m => m.LayoutDemoComponent), data: { title: 'Layout' } },
     { path: '**', redirectTo: 'message-box', pathMatch: 'prefix' }
 ];

projects/demo-app/src/app/layout/layout-demo.component.html

@@ -0,0 +1,44 @@
+<ngx-layout toolbarColor="primary" [withBackButton]="withBackButton" backButtonLabel="Back button label" [withCloseButton]="withCloseButton" (backButtonClicked)="log('Back button clicked', $event)" (closeButtonClicked)="log('Close button clicked', $event)" (sideFilterOpened)="log('Side filter opened')" (sideFilterClosed)="log('Side filter closed')">
+    <ng-template #layoutToolbar>
+        <span toolbar-title>Accès dossier patient</span>
+        <ngx-search-container>
+            <input type="text" [(ngModel)]="search" (ngModelChange)="log('Search changed', $event)" placeholder="Search" autocomplete="off" ngx-search-input />
+        </ngx-search-container>
+
+        <button type="button" mat-icon-button matTooltip="Help" (click)="log('Help button clicked', $event)">
+            <mat-icon>help_outline</mat-icon>
+        </button>
+    </ng-template>
+
+    <!-- Primary action -->
+    <ng-template #layoutPrimaryAction>
+        <button type="button" mat-fab matTooltip="Add" (click)="log('Add button clicked', $event)">
+            <mat-icon>add</mat-icon>
+        </button>
+    </ng-template>
+
+    <!-- Actions panel -->
+    <ng-template #layoutActions>
+        <button type="button" mat-icon-button matTooltip="Refresh" (click)="log('Refresh button clicked', $event)">
+            <mat-icon>refresh</mat-icon>
+        </button>
+
+        <button type="button" mat-icon-button matTooltip="Favorite" (click)="log('Favorite button clicked', $event)">
+            <mat-icon>favorite</mat-icon>
+        </button>
+    </ng-template>
+
+    <!-- Right panel -->
+    <ng-template #layoutRight>
+        <div class="layout-right-container">Layout right</div>
+    </ng-template>
+
+    <!-- Info boxes panel -->
+    <ng-template #layoutInfoBoxes>
+        <span class="info-box">Info box</span>
+        <span class="info-box primary">Info box primary</span>
+        <span class="info-box accent">Info box accent</span>
+    </ng-template>
+
+    <div class="content-container">Layout content</div>
+</ngx-layout>

projects/demo-app/src/app/layout/layout-demo.component.scss

@@ -0,0 +1,18 @@
+@use '@angular/material' as mat;
+
+:host {
+    ngx-layout {
+        .content-container {
+            display: flex;
+            flex: 1 1 auto;
+            padding: 1rem;
+            background: mat.get-color-from-palette(mat.$green-palette, 100);
+        }
+
+        .layout-right-container {
+            display: flex;
+            flex: 1 1 auto;
+            background: mat.get-color-from-palette(mat.$red-palette, 100);
+        }
+    }
+}

projects/demo-app/src/app/layout/layout-demo.component.ts

@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NgxLayoutComponent } from '@hug/ngx-layout';
+import { NgxSearchContainerComponent, NgxSearchInputDirective } from '@hug/ngx-search-container';
+import { NgxStatusService } from '@hug/ngx-status';
+
+@Component({
+    selector: 'app-layout-demo',
+    templateUrl: './layout-demo.component.html',
+    styleUrls: ['./layout-demo.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        CommonModule,
+        FormsModule,
+        MatButtonModule,
+        MatIconModule,
+        MatTooltipModule,
+        NgxSearchContainerComponent,
+        NgxSearchInputDirective,
+        NgxLayoutComponent
+    ]
+})
+export class LayoutDemoComponent {
+
+    protected withBackButton = true;
+    protected withCloseButton = true;
+    protected search: string | undefined;
+
+    public constructor(
+        private ngxStatusService: NgxStatusService
+    ) {
+    }
+
+    protected log(msg: string, event?: Event): void {
+        console.log(msg, event);
+        this.ngxStatusService.showStatus({
+            title: msg,
+            type: 'info'
+        });
+    }
+}

projects/layout/src/layout.component.ts

@@ -56,8 +56,6 @@ export class NgxLayoutComponent {
     protected mediaService = inject(NgxMediaService);
     protected sidenavService = inject(NgxSidenavService);
 
-    private _withEditorToolbar = true;
-
     public get layoutToolbar(): TemplateRef<unknown> | undefined {
         return this.layoutToolbarExternal ?? this.layoutToolbarContent;
     }
@@ -80,15 +78,6 @@ export class NgxLayoutComponent {
         return value;
     }
 
-    @Input()
-    public set withEditorToolbar(value: BooleanInput) {
-        this._withEditorToolbar = coerceBooleanProperty(value);
-    }
-
-    public get withEditorToolbar(): BooleanInput {
-        return this._withEditorToolbar;
-    }
-
     private _withSidenav = false;
 
     @Input()
@@ -101,6 +90,7 @@ export class NgxLayoutComponent {
     }
 
     private _keepFilterButtonDisplayed = true;
+
     @Input()
     public set keepFilterButtonDisplayed(value: BooleanInput) {
         this._keepFilterButtonDisplayed = coerceBooleanProperty(value);
@@ -111,6 +101,7 @@ export class NgxLayoutComponent {
     }
 
     private _withCloseButton = false;
+
     @Input()
     public set withCloseButton(value: BooleanInput) {
         this._withCloseButton = coerceBooleanProperty(value);
@@ -131,17 +122,6 @@ export class NgxLayoutComponent {
         return this._withBackButton;
     }
 
-    private _displayEditorToolbar = true;
-
-    @Input()
-    public set displayEditorToolbar(value: BooleanInput) {
-        this._displayEditorToolbar = coerceBooleanProperty(value);
-    }
-
-    public get displayEditorToolbar(): BooleanInput {
-        return this._displayEditorToolbar;
-    }
-
     public closeSideFilter(): void {
         void this.sideFilter?.close();
     }

projects/search-container/src/search-container.component.html

@@ -1,10 +1,10 @@
 <div *ngIf="mediaService.isHandset$ | async; else noHandsetTpl" class="ngx-search-container-mobile mobile" [class.active]="activeSearch$ | async" #mobileSearch>
     <ng-container *ngIf="activeSearch$ | async; else noActiveSearchTpl">
-        <mat-icon (click)="activeSearch$.next(false)">arrow_back</mat-icon>
+        <mat-icon class="icon-close-search" [matTooltip]="closeSearchTooltip" (click)="activeSearch$.next(false)">arrow_back</mat-icon>
         <ng-container *ngTemplateOutlet="searchContainerTpl"></ng-container>
     </ng-container>
     <ng-template #noActiveSearchTpl>
-        <mat-icon (click)="activeSearch$.next(true)">search</mat-icon>
+        <mat-icon class="icon-open-search" [matTooltip]="openSearchTooltip" (click)="activeSearch$.next(true)">search</mat-icon>
     </ng-template>
 </div>
 

projects/search-container/src/search-container.component.scss

@@ -50,7 +50,7 @@ ngx-search-container {
         &.active {
             display: flex;
             align-items: center;
-            position: fixed;
+            position: absolute;
             top: 0;
             left: 0;
             width: 100vw;
@@ -61,5 +61,10 @@ ngx-search-container {
         .mat-icon {
             padding: 0.5rem;
         }
+
+        .icon-close-search,
+        .icon-open-search {
+            cursor: pointer;
+        }
     }
 }

projects/search-container/src/search-container.component.ts

@@ -1,4 +1,4 @@
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common';
 import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, Directive, ElementRef, EventEmitter, inject, Input, NgZone, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
@@ -34,6 +34,7 @@ export class NgxSearchInputDirective {
     imports: [
         AsyncPipe,
         NgIf,
+        NgTemplateOutlet,
         MatIconModule,
         MatTooltipModule
     ]
@@ -46,6 +47,12 @@ export class NgxSearchContainerComponent extends NgxDestroy implements AfterCont
     @Input()
     public clearTooltip = 'Effacer la recherche';
 
+    @Input()
+    public openSearchTooltip = 'Ouvrir la recherche';
+
+    @Input()
+    public closeSearchTooltip = 'Quitter la recherche';
+
     @ContentChild('mobileSearch')
     public mobileSearch: TemplateRef<unknown> | undefined;
 
@@ -58,10 +65,10 @@ export class NgxSearchContainerComponent extends NgxDestroy implements AfterCont
     @ContentChild(NgxSearchInputDirective)
     public set searchInput(searchInput: NgxSearchInputDirective) {
         if (!searchInput) {
-            throw new Error('You need to add the attribute ngx-search-input to the SearchContainerComponent');
+            throw new Error('You need to add the attribute ngx-search-input to the NgxSearchContainerComponent');
         }
         if (!searchInput.ngControl) {
-            throw new Error('You need to add the attribute ngModel to the SearchContainerComponent');
+            throw new Error('You need to add the attribute ngModel to the NgxSearchContainerComponent');
         }
         this._searchInput = searchInput;
     }