@dative-gpi/foundation-core-components 1.0.65 → 1.0.67-map-edit

package/components/explorers/FSBaseFoldersExplorer.vue

@@ -1,10 +1,13 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
     :items="items"
     :item-to="$props.itemTo"
     :loading="fetchingFolders || fetchingDashboardOrganisations || fetchingDashboardShallows"
     :tableCode="$props.tableCode"
+    :headersOptions="headersOptions"
     :modelValue="selecteds"
+    :selectable="$props.selectable"
     @update:modelValue="onSelect"
     v-bind="$attrs"
   >
@@ -17,7 +20,31 @@
         v-bind="slotData"
       />
     </template>
-
+    <template
+      #header.imageId-title
+    >
+      <FSIcon>
+        mdi-panorama-variant-outline
+      </FSIcon>
+    </template>
+    <template
+      #item.imageId="{ item }"
+    >
+      <FSImage
+        v-if="item.imageId"
+        height="32px"
+        width="32px"
+        :imageId="item.imageId"
+        :thumbnail="true"
+      />
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
     <template
       #item.main="{ item }"
     >
@@ -32,29 +59,54 @@
         mdi-home
       </FSIcon>
     </template>
-
     <template
-      #item.icon="{ item }"
+      #item.locked="{ item }"
     >
-      <FSIcon>
-        {{ item.icon }}
-      </FSIcon>
+      <FSIconCheck
+        :value="item.locked"
+      />
     </template>
-
     <template
-      #item.tile="{ item, toggleSelect }"
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :showRemove="false"
+        :tags="item.tags"
+      />
+    </template>
+    <template
+      #item.dashboardType="{ item }"
+    >
+      <FSChip
+        v-if="item.type === FoldersListType.Dashboard"
+        :color="ColorEnum.Light"
+        :label="dashboardTypeLabel(item.dashboardType)"
+      />
+      <FSChip
+        v-else-if="item.type === FoldersListType.Folder"
+        :color="ColorEnum.Light"
+        :label="$tr('ui.common.folder', 'Folder')"
+      />
+    </template>
+    <template
+      #item.tile="{ index, item, toggleSelect }"
     >
       <FSFolderTileUI
         v-if="item.type == FoldersListType.Folder"
+        :key="index"
         :bottomColor="item.colors"
         v-bind="item"
+        :selectable="$props.selectable"
         :modelValue="isSelected(item.id)"
         @update:modelValue="toggleSelect(item)"
         :to="$props.itemTo && $props.itemTo(item)"
       />
       <FSDashboardOrganisationTileUI
         v-if="item.type == FoldersListType.Dashboard && item.dashboardType == DashboardType.Organisation"
+        :key="index"
         :bottomColor="item.colors"
+        :selectable="$props.selectable"
         :modelValue="isSelected(item.id)"
         @update:modelValue="toggleSelect(item)"
         :to="$props.itemTo && $props.itemTo(item)"
@@ -62,7 +114,9 @@
       />
       <FSDashboardShallowTileUI
         v-if="item.type == FoldersListType.Dashboard && item.dashboardType == DashboardType.Shallow"
+        :key="index"
         :bottomColor="item.colors"
+        :selectable="$props.selectable"
         :modelValue="isSelected(item.id)"
         @update:modelValue="toggleSelect(item)"
         :to="$props.itemTo && $props.itemTo(item)"
@@ -74,31 +128,41 @@
 
 <script lang="ts">
 import _ from "lodash";
-import type { PropType} from "vue";
 import type { RouteLocation } from "vue-router";
-import { computed, defineComponent, onMounted, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
 
 import { useOrganisation } from "@dative-gpi/foundation-shared-services/composables";
 import { useDashboardOrganisations, useFolders, useDashboardShallows, useAppOrganisationId, useCurrentUserOrganisation } from "@dative-gpi/foundation-core-services/composables";
 
 import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
-import { FoldersListType, type FoldersListItem } from "@dative-gpi/foundation-core-components/utils";
+import { dashboardTypeLabel, FoldersListType, type FoldersListItem } from "@dative-gpi/foundation-core-components/utils";
 import type { FolderFilters, DashboardOrganisationFilters, DashboardShallowFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
 
-import FSDataTable from "../lists/FSDataTable.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSChip from '@dative-gpi/foundation-shared-components/components/FSChip.vue';
+import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
+import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
+import FSIconCheck from "@dative-gpi/foundation-shared-components/components/FSIconCheck.vue";
 import FSFolderTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSFolderTileUI.vue";
-import FSDashboardOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTileUI.vue";
 import FSDashboardShallowTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardShallowTileUI.vue";
+import FSDashboardOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTileUI.vue";
+
+import FSDataTable from "../lists/FSDataTable.vue";
+import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
+import { useTranslations } from '@dative-gpi/bones-ui';
 
 export default defineComponent({
   name: "FSBaseFoldersExplorer",
   components: {
-    FSDataTable,
-    FSIcon,
-    FSFolderTileUI,
     FSDashboardOrganisationTileUI,
-    FSDashboardShallowTileUI
+    FSDashboardShallowTileUI,
+    FSFolderTileUI,
+    FSDataTable,
+    FSIconCheck,
+    FSTagGroup,
+    FSImage,
+    FSChip,
+    FSIcon
   },
   props: {
     foldersFilters: {
@@ -128,11 +192,16 @@ export default defineComponent({
     tableCode: {
       type: String,
       required: true
+    },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
-  emits: ["update:modelValue", "update:type", "update:dashboard-type"],
+  emits: ["update", "update:modelValue", "update:type", "update:dashboard-type"],
   setup(props, { emit }) {
-
+    const { $tr } = useTranslations();
     const { fetch: fetchUserOrganisation, entity: userOrganisation } = useCurrentUserOrganisation();
     const { entity: organisation, get: getOrganisation } = useOrganisation();
     const { organisationId } = useAppOrganisationId();
@@ -171,14 +240,44 @@ export default defineComponent({
           })) as FoldersListItem[]
         ], d => d.label)
       ]
-    })
+    });
+
+    const headersOptions = computed(() => ({
+      dashboardType: {
+        fixedFilters: [
+          {
+            value: DashboardType.Organisation,
+            text: dashboardTypeLabel(DashboardType.Organisation)
+          },
+          {
+            value: DashboardType.Shallow,
+            text: dashboardTypeLabel(DashboardType.Shallow)
+          },
+          {
+            value: 10,
+            text: $tr("ui.common.folder", "Folder")
+          },
+        ],
+        methodFilter: (value: number, dashboardType: DashboardType) => {
+          if(dashboardType !== DashboardType.None) {
+            return value === dashboardType;
+          } else {
+            return value === 10;
+          }
+        }
+      }
+    }));
 
     const onSelect = (values: string[]) => {
       selecteds.value = values;
       const selectedItems = items.value.filter(i => selecteds.value!.includes(i.id));
-      emit("update:dashboard-type", selectedItems.map(i => i.dashboardType));
-      emit("update:modelValue", selectedItems.map(i => i.id));
-      emit("update:type", selectedItems.map(i => i.type));
+      const newDashboardType = selectedItems.map(i => i.dashboardType);
+      const newModelValue = selectedItems.map(i => i.id);
+      const newType = selectedItems.map(i => i.type);
+      emit("update:dashboard-type", newDashboardType);
+      emit("update:modelValue", newModelValue);
+      emit("update:type", newType);
+      emit("update", { dashboardType: newDashboardType, modelValue: newModelValue, type: newType });
     };
 
     const isSelected = (id: string) => {
@@ -223,12 +322,15 @@ export default defineComponent({
       fetchingFolders,
       mainOrganisationDashboardId,
       mainUserDashboardId,
+      headersOptions,
+      ColorEnum,
       selecteds,
       items,
       onSelect,
       isSelected,
       FoldersListType,
-      DashboardType
+      DashboardType,
+      dashboardTypeLabel
     };
   }
 });

package/components/lists/FSDataTable.vue

@@ -1,10 +1,11 @@
 <template>
   <FSLoadDataTable
-    v-if="!initialized || gettingUserOrganisationTable"
+    v-if="($props.tableCode && !initialized) || gettingUserOrganisationTable || !table"
   />
   <FSDataTableUI
     v-else
     @update:rowsPerPage="table.rowsPerPage = $event"
+    @update:showFilters="table.showFilters = $event"
     @update:filters="table.filters = $event"
     @update:headers="table.headers = $event"
     @update:sortBy="table.sortBy = $event"
@@ -41,15 +42,26 @@ export default defineComponent({
     FSDataTableUI
   },
   props: {
+    defaultMode: {
+      type: String as PropType<"table" | "iterator">,
+      required: false,
+      default: "table"
+    },
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     debounceTime: {
       type: Number,
       required: false,
       default: 1000
     },
+    extraHeaders: {
+      type: Array as PropType<FSDataTableColumn[]>,
+      required: false,
+      default: () => []
+    },
     headersOptions: {
       type: Object as PropType<{ [key: string]: Partial<FSDataTableColumn> }>,
       required: false,
@@ -63,7 +75,7 @@ export default defineComponent({
     const { getTable, setTable } = useTables();
     const { debounce, cancel } = useDebounce();
 
-    const computedTable = computed(() => computeTable(props.headersOptions));
+    const computedTable = computed(() => computeTable(props.headersOptions, props.defaultMode, props.extraHeaders));
 
     onUnmounted(() => {
       cancel();
@@ -71,23 +83,17 @@ export default defineComponent({
     });
 
     const update = () => {
-      updateTable(
-        updateUserOrganisationTable,
-        setTable,
-        props.tableCode
-      );
+      if (props.tableCode) {
+        updateTable(updateUserOrganisationTable, setTable, props.tableCode, props.defaultMode);
+      }
     }
 
     watch(() => props.tableCode, async (): Promise<void> => {
-      onTableCodeChange(
-        getUserOrganisationTable,
-        getTable,
-        props.tableCode
-      );
+      onTableCodeChange(getUserOrganisationTable, getTable, props.tableCode, props.defaultMode);
     }, { immediate: true });
 
-    watch(() => table.value, () => {
-      if (table.value && initialized.value) {
+    watch(() => (table.value ? { ...table.value } : null), (_, former) => {
+      if (table.value && former && initialized.value) {
         debounce(update, props.debounceTime);
       }
     }, { deep: true });

package/components/lists/alerts/FSBaseAlertsList.vue

@@ -5,8 +5,10 @@
     :itemTo="$props.itemTo"
     :items="alertsOrdered"
     :loading="fetchingAlerts"
+    :headersOptions="headersOptions"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
+    :selectable="$props.selectable"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
@@ -19,39 +21,12 @@
         v-bind="slotData"
       />
     </template>
-    <template
-      #toolbar
-    >
-      <FSButtonCheckbox
-        :label="$tr('page.alerts.not-acknowledged-only', 'Not acknowledged only')"
-        :color="ColorEnum.Warning"
-        v-model="innerNotTreatedOnly"
-      />
-      <FSButtonCheckbox
-        :label="$tr('page.alerts.hide-pending', 'Hide pending')"
-        :color="ColorEnum.Light"
-        variant="full"
-        v-model="innerHidePending"
-      />
-      <FSRow
-        align="center-right"
-      >
-        <FSRow
-          width="hug"
-        >
-          <FSTermField
-            variant="default"
-            :editable="!innerNotTreatedOnly"
-            v-model:startDate="startDate"
-            v-model:endDate="endDate"
-          />
-        </FSRow>
-      </FSRow>
-    </template>
+    
     <template
       #item.criticity="{ item }"
     >
       <FSRow
+        :wrap="false" 
         align="center-left"
         gap="2px"
       >
@@ -77,7 +52,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -87,7 +62,7 @@
       <FSTagGroup
         variant="slide"
         :tags="item.groupByValues.map((gbv: any) => `${gbv.label}: ${gbv.value}`)"
-        :editable="false"
+        :showRemove="false"
       />
     </template>
     <template
@@ -98,6 +73,7 @@
         width="32px"
         height="32px"
         :imageId="item.deviceOrganisationImageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -117,7 +93,7 @@
         v-else
         font="text-overline"
       >
-        {{ $tr('entity.alert.not-acknowledged', 'Not acknowledged') }}
+        {{ $tr('ui.alert.not-acknowledged', 'Not acknowledged') }}
       </FSSpan>
     </template>
     <template
@@ -128,6 +104,7 @@
         width="32px"
         height="32px"
         :imageId="item.acknowledgingUserImageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -145,7 +122,7 @@
       <FSTagGroup
         variant="slide"
         :tags="item.history.map((h: any) => AlertTools.statusLabel(h.status))"
-        :editable="false"
+        :showRemove="false"
       />
     </template>
     <template
@@ -158,25 +135,7 @@
       </FSSpan>
     </template>
     <template
-      #item.triggerSourceTimestamp="{ item }"
-    >
-      <FSSpan
-        font="text-overline"
-      >
-        {{ epochToShortTimeFormat(item.triggerSourceTimestamp) }}
-      </FSSpan>
-    </template>
-    <template
-      #item.triggerEnqueuedTimestamp="{ item }"
-    >
-      <FSSpan
-        font="text-overline"
-      >
-        {{ epochToShortTimeFormat(item.triggerEnqueuedTimestamp) }}
-      </FSSpan>
-    </template>
-    <template
-      #item.triggerProcessedTimestamp="{ item }"
+      #item.triggerActualTimestamp="{ item }"
     >
       <FSSpan
         font="text-overline"
@@ -194,31 +153,39 @@
       </FSSpan>
     </template>
     <template
-      #item.currentSourceTimestamp="{ item }"
+      #item.currentActualTimestamp="{ item }"
     >
       <FSSpan
         font="text-overline"
       >
-        {{ epochToShortTimeFormat(item.currentSourceTimestamp) }}
+        {{ epochToShortTimeFormat(item.currentActualTimestamp) }}
       </FSSpan>
     </template>
     <template
-      #item.currentEnqueuedTimestamp="{ item }"
+      #item.currentStatus="{ item }"
     >
       <FSSpan
         font="text-overline"
       >
-        {{ epochToShortTimeFormat(item.currentEnqueuedTimestamp) }}
+        {{ AlertTools.statusLabel(item.currentStatus) }}
       </FSSpan>
     </template>
     <template
-      #item.currentProcessedTimestamp="{ item }"
+      #item.tile="{ index, item, toggleSelect }"
     >
-      <FSSpan
-        font="text-overline"
-      >
-        {{ epochToShortTimeFormat(item.currentProcessedTimestamp) }}
-      </FSSpan>
+      <FSAlertTileUI
+        :key="index"
+        variant="standard"
+        :label="item.label"
+        :deviceOrganisationLabel="item.deviceOrganisationLabel"
+        :icon="item.icon"
+        :selectable="$props.selectable"
+        :triggerProcessedTimestamp="item.triggerProcessedTimestamp"
+        :to="$props.itemTo && $props.itemTo(item)"
+        :modelValue="isSelected(item.id)"
+        :color="alertColorByCriticity(item.criticity)"
+        @update:modelValue="toggleSelect(item)"
+      />
     </template>
   </FSDataTable>
 </template>
@@ -226,13 +193,17 @@
 <script lang="ts">
 import type { PropType} from "vue";
 import type { RouteLocation } from "vue-router";
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, watch } from "vue";
 import _ from "lodash";
 
+import { useTranslations } from "@dative-gpi/bones-ui";
+
 import type { AlertFilters, AlertInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
 import { useAlerts } from "@dative-gpi/foundation-core-services/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { Criticity } from "@dative-gpi/foundation-shared-domain/enums";
 import { AlertStatus } from "@dative-gpi/foundation-shared-domain/enums";
 
 import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
@@ -244,23 +215,27 @@ import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.v
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
 import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
 import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
-import FSTermField from "@dative-gpi/foundation-shared-components/components/fields/FSTermField.vue";
-import FSButtonCheckbox from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonCheckbox.vue";
+import FSAlertTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSAlertTileUI.vue";
+
 
 export default defineComponent({
   name: "FSBaseAlertsList",
   components: {
     FSButtonAcknowledgeAlert,
-    FSButtonCheckbox,
+    FSAlertTileUI,
     FSDataTable,
-    FSIcon,
+    FSTagGroup,
     FSImage,
-    FSRow,
+    FSIcon,
     FSSpan,
-    FSTagGroup,
-    FSTermField,
+    FSRow
   },
   props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     alertFilters: {
       type: Object as PropType<AlertFilters>,
       required: false,
@@ -284,73 +259,88 @@ export default defineComponent({
       required: false,
       default: false
     },
-    tableCode: {
-      type: String,
-      required: true
-    },
     itemTo: {
       type: Function as PropType<(item: AlertInfos) => Partial<RouteLocation>>,
       required: false
+    },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const { $tr } = useTranslations();
     const { getMany: getManyAlerts, entities: alerts, fetching : fetchingAlerts } = useAlerts();
     const { epochToShortTimeFormat } = useDateFormat();
 
-    const innerNotTreatedOnly = ref<boolean | undefined>(props.notAcknowledged);
-    const innerHidePending = ref<boolean | undefined>(props.hidePending);
-    const startDate = ref<string>("now - 1w");
-    const endDate = ref<string>("now");
-
 
     const criticityColor = (row: any) => {
       return AlertTools.criticityColor(row.criticity);
     };
 
+    const alertColorByCriticity = (criticity: Criticity | number) => {
+      return AlertTools.criticityColor(criticity);
+    };
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
     const alertsOrdered = computed(() => {
       const als = [...alerts.value]
       return  als.sort((a: AlertInfos, b: AlertInfos) => {
         return (a.acknowledged === b.acknowledged) ?
-          +b.currentSourceTimestamp! - +a.currentSourceTimestamp! : a.acknowledged ? 1 : -1
+          +b.currentActualTimestamp! - +a.currentActualTimestamp! : a.acknowledged ? 1 : -1
       }); 
     });
 
-    watch(() => [props.alertFilters, innerNotTreatedOnly.value,startDate.value, endDate.value,innerHidePending.value], (next, previous) => {
+    const headersOptions = computed(() => ({
+      currentStatus: {
+        fixedFilters: getEnumEntries(AlertStatus).map(e => ({
+          value: e.value,
+          text: AlertTools.statusLabel(e.value)
+        })),
+        methodFilter: (value: AlertStatus, item: AlertStatus) => value == item
+      },
+      criticity: {
+        fixedFilters: getEnumEntries(Criticity).map(e => ({
+          value: e.value,
+          text: AlertTools.criticityLabel(e.value)
+        })),
+        methodFilter: (value: Criticity, item: Criticity) => value == item
+      },
+      acknowledged: {
+        fixedFilters: [
+          { value: true, text: $tr('entity.alert.acknowledged', 'Acknowledged') },
+          { value: false, text: $tr('ui.alert.not-acknowledged', 'Not acknowledged') }
+        ],
+        methodFilter: (value: boolean, item: boolean) => value === item
+      },
+    }));
+
+    watch([() => props.alertFilters, () => props.notAcknowledged, () => props.hidePending], (next, previous) => {
       if (!_.isEqual(next, previous)) {
-        if(innerNotTreatedOnly.value){
-          getManyAlerts({
-            ...props.alertFilters,
-            acknowledged: false,
-            statuses: [AlertStatus.Unresolved, AlertStatus.Triggered],
-          });
-        }
-        else{
-          getManyAlerts({
-            ...props.alertFilters,
-            statuses: innerHidePending.value ?
-              [AlertStatus.Unresolved, AlertStatus.Resolved, AlertStatus.Triggered] : undefined,
-            startDate: startDate.value,
-            endDate: endDate.value 
-          }); // TODO, gérer les conditions pour que les alertes s'affichent ici notamment lorsqu'elles sont acquittées
-          // la FilterFactory gère pas ces conditions correctement
-        }
-        
+        getManyAlerts({
+          ...props.alertFilters,
+          acknowledged: props.notAcknowledged ? false : undefined,
+          statuses: props.hidePending ? [AlertStatus.Unresolved, AlertStatus.Triggered, AlertStatus.Resolved, AlertStatus.Abandoned] : undefined
+        });
       }
     }, { immediate: true });
 
 
     return {
-      innerNotTreatedOnly,
+      fetchingAlerts,
+      headersOptions,
+      alertsOrdered,
       AlertTools,
       ColorEnum,
-      alertsOrdered,
-      fetchingAlerts,
-      startDate,
-      endDate,
-      innerHidePending,
       epochToShortTimeFormat,
-      criticityColor
+      alertColorByCriticity,
+      criticityColor,
+      isSelected
     };
   }
 });