feat: allow to activate / deactivate edition in back-office, to preview changes

Author: AntoineRelief

apps/back-office/src/app/dashboard/pages/dashboard/dashboard.component.html

@@ -35,7 +35,19 @@ <h1 class="!m-0 overflow-hidden text-ellipsis">
             icon="settings"
             [uiTooltip]="'common.settings' | translate"
           ></ui-button>
+          <ui-button
+            *ngIf="canUpdate"
+            [icon]="editionActive ? 'edit' : 'preview'"
+            (click)="editionActive = !editionActive"
+            >{{
+              (editionActive
+                ? 'components.application.dashboard.enterPreviewMode'
+                : 'components.application.dashboard.enterEditMode')
+                  | translate
+            }}</ui-button
+          >
         </div>
+        <!-- Other dashboard settings -->
         <div
           class="flex items-center gap-1"
           *ngIf="!formActive"
@@ -164,7 +176,7 @@ <h1 class="!m-0 overflow-hidden text-ellipsis">
   <shared-widget-grid
     [loading]="loading"
     [widgets]="widgets"
-    [canUpdate]="dashboard?.canUpdate || false"
+    [canUpdate]="(canUpdate && editionActive) || false"
     (move)="onMove($event)"
     (edit)="onEditTile($event)"
     (delete)="onDeleteTile($event)"

apps/back-office/src/app/dashboard/pages/dashboard/dashboard.component.ts

@@ -16,7 +16,6 @@ import {
   ApplicationService,
   WorkflowService,
   DashboardService,
-  AuthService,
   Application,
   UnsubscribeComponent,
   WidgetGridComponent,
@@ -109,8 +108,10 @@ export class DashboardComponent
   public contextRecord: Record | null = null;
   /** Configured dashboard quick actions */
   public buttonActions: ButtonActionT[] = [];
-
+  /** Timeout to scroll to newly added widget */
   private timeoutListener!: NodeJS.Timeout;
+  /** Is edition active */
+  public editionActive = true;
 
   /** @returns get newest widget id from existing ids */
   get newestId(): number {
@@ -147,7 +148,6 @@ export class DashboardComponent
    * @param snackBar Shared snackbar service
    * @param dashboardService Shared dashboard service
    * @param translate Angular translate service
-   * @param authService Shared authentication service
    * @param confirmService Shared confirm service
    * @param contextService Dashboard context service
    * @param refDataService Shared reference data service
@@ -167,7 +167,6 @@ export class DashboardComponent
     private snackBar: SnackbarService,
     private dashboardService: DashboardService,
     private translate: TranslateService,
-    private authService: AuthService,
     private confirmService: ConfirmService,
     private contextService: ContextService,
     private refDataService: ReferenceDataService,
@@ -294,6 +293,7 @@ export class DashboardComponent
       return;
     }
 
+    this.editionActive = true;
     const rootElement = this.elementRef.nativeElement;
     this.renderer.setAttribute(rootElement, 'data-dashboard-id', id);
     this.formActive = false;

libs/shared/src/i18n/en.json

@@ -512,6 +512,8 @@
 			"dashboard": {
 				"editFilter": "Edit filter",
 				"empty": "No content available. Wait for your administrator to build some.",
+				"enterEditMode": "Enter edit mode",
+				"enterPreviewMode": "Enter preview mode",
 				"filter": {
 					"empty": "No filters have been defined by the administrators",
 					"filterPosition": {

libs/shared/src/i18n/fr.json

@@ -512,6 +512,8 @@
 			"dashboard": {
 				"editFilter": "Modifier le filtre",
 				"empty": "Aucun contenu n'est disponible. Veuillez attendre que votre administrateur en crée.",
+				"enterEditMode": "Entrer en mode édition",
+				"enterPreviewMode": "Entrer en mode prévisualisation",
 				"filter": {
 					"empty": "Aucun filtre n'a été défini par les administrateurs",
 					"filterPosition": {

libs/shared/src/i18n/test.json

@@ -512,6 +512,8 @@
 			"dashboard": {
 				"editFilter": "******",
 				"empty": "******",
+				"enterEditMode": "******",
+				"enterPreviewMode": "******",
 				"filter": {
 					"empty": "******",
 					"filterPosition": {

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

@@ -18,7 +18,7 @@ <h2 *ngIf="widgets.length === 0">{{ 'models.widget.add' | translate }}</h2>
     [columns]="colsNumber"
     [rowHeight]="200"
     [resizable]="canUpdate"
-    [reorderable]="true"
+    [reorderable]="canUpdate"
     (reorder)="onReorder($event)"
     (resize)="onResize($event)"
     class="-m-4"