feat: Show/Hide widget header (#2005)

---------

Co-authored-by: Antoine Hurard <[email protected]>

Author: viniciusriquieri1

libs/shared/src/i18n/en.json

@@ -2127,6 +2127,7 @@
 			},
 			"display": {
 				"border": "Show widget border",
+				"header": "Show widget header",
 				"searchable": "Allow search",
 				"sortable": "Allow sorting",
 				"title": "Widget display"

libs/shared/src/i18n/fr.json

@@ -2143,6 +2143,7 @@
 			},
 			"display": {
 				"border": "Afficher la bordure du widget",
+				"header": "Afficher l'en-tête du widget",
 				"searchable": "Autoriser la recherche",
 				"sortable": "Autoriser le tri",
 				"title": "Affichage des widgets"

libs/shared/src/i18n/test.json

@@ -2127,6 +2127,7 @@
 			},
 			"display": {
 				"border": "******",
+				"header": "******",
 				"searchable": "******",
 				"sortable": "******",
 				"title": "******"

libs/shared/src/lib/components/widget-grid/widget-actions/widget-actions.component.html

@@ -73,7 +73,7 @@
 
 <ng-template #defaultTemplate>
   <ui-button
-    *ngIf="!(widget.component === 'map')"
+    *ngIf="!(widget.component === 'map') && showHeader"
     [isIcon]="true"
     icon="open_in_full"
     [uiTooltip]="'components.widget.expand' | translate"

libs/shared/src/lib/components/widget-grid/widget-actions/widget-actions.component.ts

@@ -5,6 +5,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { Dialog } from '@angular/cdk/dialog';
 import { takeUntil } from 'rxjs';
 import { UnsubscribeComponent } from '../../utils/unsubscribe/unsubscribe.component';
+import get from 'lodash/get';
 
 /**
  * Button on top left of each widget, if user can see it, with menu of possible
@@ -29,6 +30,11 @@ export class WidgetActionsComponent extends UnsubscribeComponent {
   @Output() expand: EventEmitter<any> = new EventEmitter();
   @Output() style: EventEmitter<any> = new EventEmitter();
 
+  /** @returns should show widget header, based on widget settings */
+  get showHeader() {
+    return get(this.widget, 'settings.widgetDisplay.showHeader', true);
+  }
+
   /**
    * Button on top left of each widget, if user can see it, with menu of possible
    * actions for that widget.

libs/shared/src/lib/components/widget/widget.component.html

@@ -1,24 +1,45 @@
-<kendo-tilelayout-item-header
-  *ngIf="header"
-  class="widget-header border-b"
-  [ngClass]="{
-    '!border-transparent': !(widget.settings.widgetDisplay?.showBorder ?? true),
-    '!border-b-gray-300': widget.settings.widgetDisplay?.showBorder ?? true
-  }"
->
-  <ng-container
-    *ngIf="headerLeftTemplate"
-    [ngTemplateOutlet]="headerLeftTemplate"
-  ></ng-container>
-  <ng-container
-    *ngIf="widgetContentComponent?.headerTemplate"
-    [ngTemplateOutlet]="widgetContentComponent.headerTemplate"
-  ></ng-container>
-  <ng-container
-    *ngIf="headerRightTemplate"
-    [ngTemplateOutlet]="headerRightTemplate"
-  ></ng-container>
-</kendo-tilelayout-item-header>
+<ng-container *ngIf="header">
+  <ng-container *ngIf="!showHeader; else defaultHeaderTemplate">
+    <kendo-tilelayout-item-header class="floating-widget-header">
+      <ng-container
+        *ngIf="headerLeftTemplate"
+        [ngTemplateOutlet]="headerLeftTemplate"
+      ></ng-container>
+      <div class="bg-white/70 rounded-2xl">
+        <ng-container
+          *ngIf="headerRightTemplate"
+          [ngTemplateOutlet]="headerRightTemplate"
+        ></ng-container>
+      </div>
+    </kendo-tilelayout-item-header>
+  </ng-container>
+
+  <ng-template #defaultHeaderTemplate>
+    <kendo-tilelayout-item-header
+      class="widget-header border-b"
+      [ngClass]="{
+        '!border-transparent': !(
+          widget.settings.widgetDisplay?.showBorder ?? true
+        ),
+        '!border-b-gray-300': widget.settings.widgetDisplay?.showBorder ?? true
+      }"
+    >
+      <ng-container
+        *ngIf="headerLeftTemplate"
+        [ngTemplateOutlet]="headerLeftTemplate"
+      ></ng-container>
+      <ng-container
+        *ngIf="widgetContentComponent?.headerTemplate"
+        [ngTemplateOutlet]="widgetContentComponent.headerTemplate"
+      ></ng-container>
+      <ng-container
+        *ngIf="headerRightTemplate"
+        [ngTemplateOutlet]="headerRightTemplate"
+      ></ng-container>
+    </kendo-tilelayout-item-header>
+  </ng-template>
+</ng-container>
+
 <ng-container [ngSwitch]="widget.component">
   <!-- CHART -->
   <shared-chart

libs/shared/src/lib/components/widget/widget.component.ts

@@ -28,10 +28,16 @@ import { DOCUMENT } from '@angular/common';
   styleUrls: ['./widget.component.scss'],
 })
 export class WidgetComponent implements OnInit, OnDestroy {
+  /** Current widget definition */
   @Input() widget: any;
+  // todo: rename or delete
+  /** Is widget in fullscreen mode */
   @Input() header = true;
+  /** Can user update widget */
   @Input() canUpdate = false;
+  /** Template to display on the left of widget header */
   @Input() headerLeftTemplate?: TemplateRef<any>;
+  /** Template to display on the right of widget header */
   @Input() headerRightTemplate?: TemplateRef<any>;
 
   /** @returns would component block navigation */
@@ -43,6 +49,11 @@ export class WidgetComponent implements OnInit, OnDestroy {
     }
   }
 
+  /** @returns should show widget header, based on widget settings */
+  get showHeader() {
+    return get(this.widget, 'settings.widgetDisplay.showHeader', true);
+  }
+
   private customStyle?: HTMLStyleElement;
 
   @HostBinding()

libs/shared/src/lib/components/widgets/common/display-settings/display-settings.component.html

@@ -8,6 +8,11 @@ <h2>
         'models.widget.display.border' | translate
       }}</ng-container>
     </ui-toggle>
+    <ui-toggle formControlName="showHeader">
+      <ng-container ngProjectAs="label">{{
+        'models.widget.display.header' | translate
+      }}</ng-container>
+    </ui-toggle>
   </ng-container>
   <!-- Other specific options for each widget type -->
   <ng-content></ng-content>

libs/shared/src/lib/components/widgets/common/display-settings/extendWidgetForm.ts

@@ -7,6 +7,7 @@ import { get } from 'lodash';
  * @param form widget form
  * @param settings settings to apply
  * @param settings.showBorder show border setting
+ * @param settings.showHeader show border header
  * @param settings.style custom style of the widget
  * @param specificControls specific controls to add to the form, on a widget basis
  * @returns form with the common fields
@@ -18,12 +19,14 @@ export const extendWidgetForm = <
   form: FormGroup<T>,
   settings?: {
     showBorder?: boolean;
+    showHeader?: boolean;
     style?: string;
   },
   specificControls?: T2
 ) => {
   const controls = {
     showBorder: new FormControl(get(settings, 'showBorder', true)),
+    showHeader: new FormControl(get(settings, 'showHeader', true)),
     style: new FormControl(get(settings, 'style', '')),
   };
   Object.assign(controls, specificControls);
@@ -34,6 +37,7 @@ export const extendWidgetForm = <
       widgetDisplay: FormGroup<
         {
           showBorder: FormControl<boolean>;
+          showHeader: FormControl<boolean>;
           style: FormControl<string>;
         } & T2
       >;

libs/shared/src/lib/components/widgets/grid/grid.component.html

@@ -67,9 +67,9 @@
 <ng-template #floatingButtonsTemplate>
   <div
     class="flex overflow-hidden flex-1 max-w-fit"
-    *ngIf="settings.floatingButtons?.length > 0"
+    *ngIf="floatingButtons.length > 0"
   >
-    <ng-container *ngFor="let floatingButton of settings.floatingButtons">
+    <ng-container *ngFor="let floatingButton of floatingButtons">
       <ui-button
         variant="primary"
         (click)="onQuickAction(floatingButton)"