@dative-gpi/foundation-core-components 1.0.27 → 1.0.28-remove-deprecated2

package/components/explorers/FSBaseFoldersExplorer.vue

@@ -0,0 +1,265 @@
+<template>
+  <FSDataTable
+    :items="items"
+    :item-to="$props.itemTo"
+    :loading="fetchingFolders || fetchingDashboardOrganisations || fetchingDashboardShallows"
+    :tableCode="$props.tableCode"
+    :modelValue="selecteds"
+    @update:modelValue="onSelect"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        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 }"
+    >
+      <FSIcon
+        v-if="item.id === mainOrganisationDashboardId"
+      >
+        mdi-account-group-outline
+      </FSIcon>
+      <FSIcon
+        v-if="item.id === mainUserDashboardId"
+      >
+        mdi-home
+      </FSIcon>
+    </template>
+    <template
+      #item.locked="{ item }"
+    >
+      <FSIconCheck
+        :value="item.locked"
+      />
+    </template>
+    <template
+      #item.tile="{ item, toggleSelect }"
+    >
+      <FSFolderTileUI
+        v-if="item.type == FoldersListType.Folder"
+        :bottomColor="item.colors"
+        v-bind="item"
+        :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"
+        :bottomColor="item.colors"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        :to="$props.itemTo && $props.itemTo(item)"
+        v-bind="item"
+      />
+      <FSDashboardShallowTileUI
+        v-if="item.type == FoldersListType.Dashboard && item.dashboardType == DashboardType.Shallow"
+        :bottomColor="item.colors"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        :to="$props.itemTo && $props.itemTo(item)"
+        v-bind="item"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import _ from "lodash";
+import type { RouteLocation } from "vue-router";
+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 type { FolderFilters, DashboardOrganisationFilters, DashboardShallowFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
+
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.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 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";
+
+export default defineComponent({
+  name: "FSBaseFoldersExplorer",
+  components: {
+    FSDataTable,
+    FSIcon,
+    FSFolderTileUI,
+    FSDashboardOrganisationTileUI,
+    FSDashboardShallowTileUI,
+    FSIconCheck,
+    FSImage
+  },
+  props: {
+    foldersFilters: {
+      type: Object as PropType<FolderFilters>,
+      default: undefined,
+      required: false
+    },
+    dashboardOrganisationsFilters: {
+      type: Object as PropType<DashboardOrganisationFilters>,
+      default: undefined,
+      required: false
+    },
+    dashboardShallowsFilters: {
+      type: Object as PropType<DashboardShallowFilters>,
+      default: undefined,
+      required: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    itemTo: {
+      type: Function as PropType<(item: DashboardInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    tableCode: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["update", "update:modelValue", "update:type", "update:dashboard-type"],
+  setup(props, { emit }) {
+
+    const { fetch: fetchUserOrganisation, entity: userOrganisation } = useCurrentUserOrganisation();
+    const { entity: organisation, get: getOrganisation } = useOrganisation();
+    const { organisationId } = useAppOrganisationId();
+
+    const { entities: dashboardOrganisations, fetching: fetchingDashboardOrganisations, getMany: getManyDashboardOrganisations } = useDashboardOrganisations();
+    const { entities: dashboardShallows, fetching: fetchingDashboardShallows, getMany: getManyDashboardShallows } = useDashboardShallows();
+    const { entities: folders, fetching: fetchingFolders, getMany: getManyFolders } = useFolders();
+
+    const selecteds = ref<string[]>([]);
+
+    const mainUserDashboardId = computed(() => {
+      return userOrganisation.value?.mainDashboardId;
+    });
+
+    const mainOrganisationDashboardId = computed(() => {
+      return organisation.value?.mainDashboardId;
+    });
+
+    const items = computed((): FoldersListItem[] => {
+      return [
+        ...folders.value.map(g => ({
+          ...g,
+          type: FoldersListType.Folder,
+          dashboardType: DashboardType.None
+        })) as FoldersListItem[],
+        ..._.sortBy([
+          ...dashboardOrganisations.value.map(d => ({
+            ...d,
+            type: FoldersListType.Dashboard,
+            dashboardType: DashboardType.Organisation
+          })) as FoldersListItem[],
+          ...dashboardShallows.value.map(d => ({
+            ...d,
+            type: FoldersListType.Dashboard,
+            dashboardType: DashboardType.Shallow
+          })) as FoldersListItem[]
+        ], d => d.label)
+      ]
+    })
+
+    const onSelect = (values: string[]) => {
+      selecteds.value = values;
+      const selectedItems = items.value.filter(i => selecteds.value!.includes(i.id));
+      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) => {
+      return selecteds.value?.includes(id);
+    };
+
+    onMounted(() => {
+      fetchUserOrganisation();
+    })
+
+    watch(() => organisationId.value, () => {
+      if (organisationId.value) {
+        getOrganisation(organisationId.value);
+      }
+    }, { immediate: true });
+
+    watch(() => props.foldersFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyFolders(props.foldersFilters, f => f.parentId == props.foldersFilters?.parentId);
+      }
+    }, { immediate: true });
+
+    watch(() => props.dashboardOrganisationsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyDashboardOrganisations(props.dashboardOrganisationsFilters, f => f.folderId == props.foldersFilters?.parentId);
+      }
+    }, { immediate: true });
+
+    watch(() => props.dashboardShallowsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyDashboardShallows(props.dashboardShallowsFilters, f => f.folderId == props.foldersFilters?.parentId);
+      }
+    }, { immediate: true });
+
+    watch(() => props.modelValue, (next) => {
+      selecteds.value = next;
+    }, { immediate: true });
+
+    return {
+      fetchingDashboardOrganisations,
+      fetchingDashboardShallows,
+      fetchingFolders,
+      mainOrganisationDashboardId,
+      mainUserDashboardId,
+      selecteds,
+      items,
+      onSelect,
+      isSelected,
+      FoldersListType,
+      DashboardType
+    };
+  }
+});
+</script>

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"
@@ -29,6 +30,7 @@ import { computed, defineComponent, onUnmounted, type PropType, watch } from "vu
 
 import { useUserOrganisationTable, useUpdateUserOrganisationTable, useDataTables } from "@dative-gpi/foundation-core-services/composables";
 import { useDebounce, useTables } from "@dative-gpi/foundation-shared-components/composables";
+import { type FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
 
 import FSLoadDataTable from "@dative-gpi/foundation-shared-components/components/lists/FSLoadDataTable.vue";
 import FSDataTableUI from "@dative-gpi/foundation-shared-components/components/lists/FSDataTableUI.vue";
@@ -40,22 +42,28 @@ 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
     },
-    customSorts: {
-      type: Object as PropType<{ [key: string]: any }>,
+    extraHeaders: {
+      type: Array as PropType<FSDataTableColumn[]>,
       required: false,
-      default: () => ({})
+      default: () => []
     },
-    customSortRaws: {
-      type: Object as PropType<{ [key: string]: any }>,
+    headersOptions: {
+      type: Object as PropType<{ [key: string]: Partial<FSDataTableColumn> }>,
       required: false,
       default: () => ({})
     }
@@ -67,7 +75,7 @@ export default defineComponent({
     const { getTable, setTable } = useTables();
     const { debounce, cancel } = useDebounce();
 
-    const computedTable = computed(() => computeTable(props.customSorts, props.customSortRaws));
+    const computedTable = computed(() => computeTable(props.headersOptions, props.defaultMode, props.extraHeaders));
 
     onUnmounted(() => {
       cancel();
@@ -75,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

@@ -0,0 +1,337 @@
+<template>
+  <FSDataTable
+    rowGap="6px"
+    :rowColor="criticityColor"
+    :itemTo="$props.itemTo"
+    :items="alertsOrdered"
+    :loading="fetchingAlerts"
+    :tableCode="$props.tableCode"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    
+    <template
+      #item.criticity="{ item }"
+    >
+      <FSRow
+        align="center-left"
+        gap="2px"
+      >
+        <FSIcon
+          :color="AlertTools.criticityColor(item.criticity)"
+        >
+          {{ AlertTools.criticityIcon(item.criticity) }}
+        </FSIcon>
+        <FSSpan>
+          {{ AlertTools.criticityLabel(item.criticity) }}
+        </FSSpan>
+      </FSRow>
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :editable="false"
+        :tags="item.tags"
+      />
+    </template>
+    <template
+      #item.groupByValues="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :tags="item.groupByValues.map((gbv: any) => `${gbv.label}: ${gbv.value}`)"
+        :editable="false"
+      />
+    </template>
+    <template
+      #item.deviceOrganisationImageId="{ item }"
+    >
+      <FSImage
+        v-if="item.deviceOrganisationImageId != null"
+        width="32px"
+        height="32px"
+        :imageId="item.deviceOrganisationImageId"
+        :thumbnail="true"
+      />
+    </template>
+    <template
+      #item.acknowledged="{ item }"
+    >
+      <FSSpan
+        v-if="item.acknowledged"
+        font="text-overline"
+      >
+        {{ $tr('entity.alert.acknowledged', 'Acknowledged') }}
+      </FSSpan>
+      <FSButtonAcknowledgeAlert
+        v-else-if="!item.acknowledged && $props.allowAcknowledge"
+        :alertId="item.id"
+      />
+      <FSSpan
+        v-else
+        font="text-overline"
+      >
+        {{ $tr('ui.alert.not-acknowledged', 'Not acknowledged') }}
+      </FSSpan>
+    </template>
+    <template
+      #item.acknowledgingUserImageId="{ item }"
+    >
+      <FSImage
+        v-if="item.acknowledged && item.acknowledgingUserImageId != null"
+        width="32px"
+        height="32px"
+        :imageId="item.acknowledgingUserImageId"
+        :thumbnail="true"
+      />
+    </template>
+    <template
+      #item.acknowledgingTimestamp="{ item }"
+    >
+      <FSSpan
+        font="text-overline"
+      >
+        {{ epochToShortTimeFormat(item.acknowledgingTimestamp) }}
+      </FSSpan>
+    </template>
+    <template
+      #item.history="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :tags="item.history.map((h: any) => AlertTools.statusLabel(h.status))"
+        :editable="false"
+      />
+    </template>
+    <template
+      #item.initialState="{ item }"
+    >
+      <FSSpan
+        font="text-overline"
+      >
+        {{ AlertTools.statusLabel(item.initialState.status) }}
+      </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 }"
+    >
+      <FSSpan
+        font="text-overline"
+      >
+        {{ epochToShortTimeFormat(item.triggerProcessedTimestamp) }}
+      </FSSpan>
+    </template>
+    <template
+      #item.lastState="{ item }"
+    >
+      <FSSpan
+        font="text-overline"
+      >
+        {{ AlertTools.statusLabel(item.lastState.status) }}
+      </FSSpan>
+    </template>
+    <template
+      #item.currentSourceTimestamp="{ item }"
+    >
+      <FSSpan
+        font="text-overline"
+      >
+        {{ epochToShortTimeFormat(item.currentSourceTimestamp) }}
+      </FSSpan>
+    </template>
+    <template
+      #item.currentEnqueuedTimestamp="{ item }"
+    >
+      <FSSpan
+        font="text-overline"
+      >
+        {{ epochToShortTimeFormat(item.currentEnqueuedTimestamp) }}
+      </FSSpan>
+    </template>
+    <template
+      #item.currentProcessedTimestamp="{ item }"
+    >
+      <FSSpan
+        font="text-overline"
+      >
+        {{ epochToShortTimeFormat(item.currentProcessedTimestamp) }}
+      </FSSpan>
+    </template>
+    <template
+      #item.tile="{ item }"
+    >
+      <FSAlertTileUI
+        variant="standard"
+        :label="item.label"
+        :deviceOrganisationLabel="item.deviceOrganisationLabel"
+        :icon="item.icon"
+        :triggerProcessedTimestamp="item.triggerProcessedTimestamp"
+        :to="$props.itemTo && $props.itemTo(item)"
+        :color="alertColorByCriticity(item.criticity)"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import type { RouteLocation } from "vue-router";
+import { computed, defineComponent, watch } from "vue";
+import _ from "lodash";
+
+import type { AlertFilters, AlertInfos } from "@dative-gpi/foundation-core-domain/models";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+import { useAlerts } from "@dative-gpi/foundation-core-services/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { 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";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSButtonAcknowledgeAlert from "./FSButtonAcknowledgeAlert.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
+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 FSAlertTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSAlertTileUI.vue";
+
+export default defineComponent({
+  name: "FSBaseAlertsList",
+  components: {
+    FSButtonAcknowledgeAlert,
+    FSAlertTileUI,
+    FSDataTable,
+    FSTagGroup,
+    FSImage,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    alertFilters: {
+      type: Object as PropType<AlertFilters>,
+      required: false,
+      default: null
+    },
+    notAcknowledged:{
+      type: Boolean,
+      required: false,
+    },
+    hidePending:{
+      type: Boolean,
+      required: false,
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    allowAcknowledge: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    itemTo: {
+      type: Function as PropType<(item: AlertInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: getManyAlerts, entities: alerts, fetching : fetchingAlerts } = useAlerts();
+    const { epochToShortTimeFormat } = useDateFormat();
+
+
+    const criticityColor = (row: any) => {
+      return AlertTools.criticityColor(row.criticity);
+    };
+
+    const alertColorByCriticity = (criticity: Criticity | number) => {
+      return AlertTools.criticityColor(criticity);
+    };
+
+    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
+      }); 
+    });
+
+    watch(() => [props.alertFilters, props.notAcknowledged, props.hidePending], (next, previous) => {
+      if (!_.isEqual(next, previous)) {
+        if(props.notAcknowledged){
+          getManyAlerts({
+            ...props.alertFilters,
+            acknowledged: false,
+            statuses: [AlertStatus.Unresolved, AlertStatus.Triggered],
+          });
+        }
+        else{
+          getManyAlerts({
+            ...props.alertFilters,
+            statuses: props.hidePending ?
+              [AlertStatus.Unresolved, AlertStatus.Resolved, AlertStatus.Triggered] : props.alertFilters?.statuses
+          }); // 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
+        }
+      }
+    }, { immediate: true });
+
+
+    return {
+      fetchingAlerts,
+      alertsOrdered,
+      AlertTools,
+      ColorEnum,
+      epochToShortTimeFormat,
+      alertColorByCriticity,
+      criticityColor
+    };
+  }
+});
+</script>