style: add styling for automation (#2450)

---------

Co-authored-by: Antoine Hurard <antoine.reliefapps@gmail.com>

Author: MwanPygmay

libs/shared/src/i18n/en.json

@@ -653,6 +653,28 @@
 				"ariaLabel": "Select page of applications"
 			}
 		},
+		"automation": {
+			"actions": {
+				"add.layer": "Add layer",
+				"add.tab": "Add tab",
+				"display.collapse": "Collapse the display",
+				"display.expand": "Expand the display",
+				"map.click": "On map click",
+				"map.get.country": "Get country from map",
+				"open.tab": "Open tab",
+				"remove.layer": "Remove layer",
+				"remove.tab": "Remove tab",
+				"set.context": "Set context"
+			},
+			"addRule": "Add a new automation rule",
+			"component": {
+				"add": "Add a new component",
+				"select": "Select a component"
+			},
+			"configuration": "Automation configuration",
+			"ruleName": "Name of the automation rule",
+			"rules": "Automation rules"
+		},
 		"calculatedFields": {
 			"add": "Create a new Calculated field",
 			"delete": {

libs/shared/src/i18n/fr.json

@@ -659,6 +659,28 @@
 				"ariaLabel": "Sélectionnez la page d'applications"
 			}
 		},
+		"automation": {
+			"actions": {
+				"add.layer": "Ajouter une couche",
+				"add.tab": "Ajouter un onglet",
+				"display.collapse": "Réduire l'affichage",
+				"display.expand": "Développer l'affichage",
+				"map.click": "En cliquant sur la carte",
+				"map.get.country": "Obtenir le pays sur la carte",
+				"open.tab": "Ouvrir un onglet",
+				"remove.layer": "Supprimer une couche",
+				"remove.tab": "Supprimer un onglet",
+				"set.context": "Définir le contexte"
+			},
+			"addRule": "Ajouter une nouvelle règle d'automatisation",
+			"component": {
+				"add": "Ajoutez un nouveau composant",
+				"select": "Sélectionnez un composant"
+			},
+			"configuration": "Configuration de l'automatisation",
+			"ruleName": "Nom de la règle d'automatisation",
+			"rules": "Règles d'automatisation"
+		},
 		"calculatedFields": {
 			"add": "Créer un nouveau champ dérivé",
 			"delete": {

libs/shared/src/i18n/test.json

@@ -653,6 +653,28 @@
 				"ariaLabel": "******"
 			}
 		},
+		"automation": {
+			"actions": {
+				"add.layer": "******",
+				"add.tab": "******",
+				"display.collapse": "******",
+				"display.expand": "******",
+				"map.click": "******",
+				"map.get.country": "******",
+				"open.tab": "******",
+				"remove.layer": "******",
+				"remove.tab": "******",
+				"set.context": "******"
+			},
+			"addRule": "******",
+			"component": {
+				"add": "******",
+				"select": "******"
+			},
+			"configuration": "******",
+			"ruleName": "******",
+			"rules": "******"
+		},
 		"calculatedFields": {
 			"add": "******",
 			"delete": {

libs/shared/src/index.ts

@@ -55,6 +55,7 @@ export * from './lib/models/layout.model';
 export * from './lib/models/aggregation.model';
 export * from './lib/models/reference-data.model';
 export * from './lib/models/metadata.model';
+export * from './lib/models/automation.model';
 
 // === COMPONENTS ===
 export * from './lib/components/aggregation/edit-aggregation-modal/edit-aggregation-modal.component';

libs/shared/src/lib/components/ui/map/map.component.ts

@@ -64,6 +64,7 @@ import { MapPolygonsService } from '../../../services/map/map-polygons.service';
 import { DOCUMENT } from '@angular/common';
 import { ShadowDomService } from '@oort-front/ui';
 import { DashboardAutomationService } from '../../../services/dashboard-automation/dashboard-automation.service';
+import { ActionComponent, ActionType } from '../../../models/automation.model';
 
 /** Component for the map widget */
 @Component({
@@ -319,11 +320,11 @@ export class MapComponent
 
     if (this.mapSettingsValue.automationRules) {
       for (const rule of this.mapSettingsValue.automationRules) {
-        const trigger = get(rule, 'components[0]');
+        const trigger: ActionComponent = get(rule, 'components[0]');
         if (
           trigger &&
           trigger.component === 'trigger' &&
-          trigger.type === 'map.click'
+          trigger.type === ActionType.mapClick
         ) {
           // Save rule in map object to populate to all layers attached to it
           if ((this.map as any)._rules) {

libs/shared/src/lib/components/widgets/common/tab-widget-automations/tab-widget-automations.component.html

@@ -1,12 +1,12 @@
 <div class="flex justify-between">
-  <h2>Automation rules</h2>
+  <h2>{{ 'components.automation.rules' | translate }}</h2>
   <ui-button
     class="mb-6"
     category="secondary"
     variant="primary"
     (click)="addEditRule()"
   >
-    Add a new automation rule
+    {{ 'components.automation.addRule' | translate }}
   </ui-button>
 </div>
 <ng-template #emptyTmpl>
@@ -38,14 +38,6 @@ <h2>Automation rules</h2>
       <th uiCellHeader *cdkHeaderCellDef></th>
       <td uiCell *cdkCellDef="let element; let i = index">
         <div class="flex gap-2 text-neutral-500 justify-end">
-          <ui-button
-            variant="danger"
-            [isIcon]="true"
-            icon="delete"
-            (click)="removeRow(i)"
-            [uiTooltip]="'common.delete' | translate"
-          >
-          </ui-button>
           <ui-button
             uiSuffix
             variant="primary"
@@ -54,6 +46,14 @@ <h2>Automation rules</h2>
             (click)="addEditRule(i)"
             [uiTooltip]="'common.edit' | translate"
           ></ui-button>
+          <ui-button
+            variant="danger"
+            [isIcon]="true"
+            icon="delete"
+            (click)="removeRow(i)"
+            [uiTooltip]="'common.delete' | translate"
+          >
+          </ui-button>
         </div>
       </td>
     </ng-container>

libs/shared/src/lib/components/widgets/common/widget-automation/automation-component-selector/automation-component-selector.component.html

@@ -1,13 +1,19 @@
-<ui-dialog>
-  <ng-container ngProjectAs="header">Select a component</ng-container>
+<ui-dialog size="medium">
+  <ng-container ngProjectAs="header"
+    ><h3 class="font-semibold">
+      {{ 'components.automation.component.select' | translate }}
+    </h3></ng-container
+  >
   <ng-container ngProjectAs="content">
-    <div class="flex gap-2 flex-wrap flex-row">
+    <div class="flex flex-wrap justify-between">
       <div
         *ngFor="let action of actionComponents"
+        class="mb-4 mx-0.5 border border-gray-300 rounded-lg p-2 cursor-pointer hover:shadow-md"
         (click)="onSelect(action)"
-        class="relative flex flex-row justify-between bg-white shadow border border-gray-300 rounded-lg ring ring-white items-center p-2"
       >
-        <h3 class="!m-0">{{ action.type }}</h3>
+        <h3 class="!m-0">
+          {{ 'components.automation.actions.' + action.type | translate }}
+        </h3>
       </div>
     </div>
   </ng-container>

libs/shared/src/lib/components/widgets/common/widget-automation/automation-component-selector/automation-component-selector.component.ts

@@ -1,79 +1,80 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ButtonModule, DialogModule } from '@oort-front/ui';
+import { ButtonModule, DialogModule, TooltipModule } from '@oort-front/ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { DialogRef } from '@angular/cdk/dialog';
+import {
+  ActionWithValue,
+  ActionType,
+} from '../../../../../models/automation.model';
 
 /** Available action components */
-const ACTION_COMPONENTS = [
-  {
-    component: 'trigger',
-    type: 'map.click',
-  },
+const ACTION_COMPONENTS: ActionWithValue[] = [
+  { component: 'trigger', type: ActionType.mapClick },
   {
     component: 'action',
-    type: 'add.layer',
+    type: ActionType.addLayer,
     value: {
       widget: null,
       layers: null,
     },
   },
   {
     component: 'action',
-    type: 'remove.layer',
+    type: ActionType.removeLayer,
     value: {
       widget: null,
       layers: null,
     },
   },
   {
     component: 'action',
-    type: 'add.tab',
+    type: ActionType.addTab,
     value: {
       widget: null,
       tabs: null,
     },
   },
   {
     component: 'action',
-    type: 'open.tab',
+    type: ActionType.openTab,
     value: {
       widget: null,
       tab: null,
     },
   },
   {
     component: 'action',
-    type: 'remove.tab',
+    type: ActionType.removeTab,
     value: {
       widget: null,
       tabs: null,
     },
   },
   {
     component: 'action',
-    type: 'display.collapse',
+    type: ActionType.displayCollapse,
     value: {
       widget: null,
     },
   },
   {
     component: 'action',
-    type: 'display.expand',
+    type: ActionType.displayExpand,
     value: {
       widget: null,
     },
   },
   {
     component: 'action',
-    type: 'set.context',
+    type: ActionType.setContext,
     value: {
       mapping: '',
     },
   },
   {
     component: 'action',
-    type: 'map.get.country',
+    type: ActionType.mapGetCountry,
   },
 ];
 
@@ -83,7 +84,13 @@ const ACTION_COMPONENTS = [
 @Component({
   selector: 'shared-automation-component-selector',
   standalone: true,
-  imports: [CommonModule, DialogModule, TranslateModule, ButtonModule],
+  imports: [
+    CommonModule,
+    DialogModule,
+    TranslateModule,
+    ButtonModule,
+    TooltipModule,
+  ],
   templateUrl: './automation-component-selector.component.html',
   styleUrls: ['./automation-component-selector.component.scss'],
 })

libs/shared/src/lib/components/widgets/common/widget-automation/edit-automation-component/edit-automation-component.component.html

@@ -1,6 +1,6 @@
 <ui-dialog size="medium">
   <ng-container ngProjectAs="header">
-    <h3>{{ data.type }}</h3>
+    <h3>{{ 'components.automation.actions.' + data.type | translate }}</h3>
   </ng-container>
   <ng-container ngProjectAs="content">
     <ng-container *ngIf="editor" [formGroup]="formGroup.controls.value">
@@ -14,10 +14,10 @@ <h3>{{ data.type }}</h3>
               <ui-select-menu
                 *ngIf="property.async"
                 [formControlName]="property.name"
-                [multiselect]="property.multiselect"
+                [multiselect]="property.multiselect || false"
               >
                 <ui-select-option
-                  *ngFor="let choice of property.choices | async"
+                  *ngFor="let choice of $any(property).choices | async"
                   [value]="choice.value"
                 >
                   {{ choice.text }}
@@ -27,10 +27,10 @@ <h3>{{ data.type }}</h3>
               <ui-select-menu
                 *ngIf="!property.async"
                 [formControlName]="property.name"
-                [multiselect]="property.multiselect"
+                [multiselect]="property.multiselect || false"
               >
                 <ui-select-option
-                  *ngFor="let choice of property.choices"
+                  *ngFor="let choice of $any(property).choices"
                   [value]="choice.value"
                 >
                   {{ choice.text }}