@dative-gpi/foundation-core-components 1.0.51 → 1.0.53

package/components/lists/alerts/FSBaseAlertsList.vue

@@ -0,0 +1,342 @@
+<template>
+  <FSDataTable
+    rowGap="6px"
+    :rowColor="criticityColor"
+    :itemTo="routerLink"
+    :items="alertsOrdered"
+    :loading="fetchingAlerts"
+    :tableCode="$props.tableCode"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <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"
+      />
+      <FSTermField
+        variant="default"
+        :editable="!innerNotTreatedOnly"
+        v-model:startDate="startDate"
+        v-model:endDate="endDate"
+      />
+    </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"
+      />
+    </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('entity.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"
+      />
+    </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>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import { computed, defineComponent, ref, watch } from "vue";
+import _ from "lodash";
+
+import { useRouter } from "vue-router";
+
+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 { 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 FSTermField from "@dative-gpi/foundation-shared-components/components/fields/FSTermField.vue";
+import FSButtonCheckbox from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonCheckbox.vue";
+
+export default defineComponent({
+  name: "FSBaseAlertsList",
+  components: {
+    FSButtonAcknowledgeAlert,
+    FSButtonCheckbox,
+    FSDataTable,
+    FSIcon,
+    FSImage,
+    FSRow,
+    FSSpan,
+    FSTagGroup,
+    FSTermField,
+  },
+  props: {
+    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
+    },
+    tableCode: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: getManyAlerts, entities: alerts, fetching : fetchingAlerts } = useAlerts();
+    const { epochToShortTimeFormat } = useDateFormat();
+    const router = useRouter();
+
+    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 routerLink = (item: any) => {
+      router.push({ name: "alert", params: { entityId: item.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
+      }); 
+    });
+
+    watch(() => [props.alertFilters, innerNotTreatedOnly.value,startDate.value, endDate.value,innerHidePending.value], (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 
+          });
+        }
+        
+      }
+    }, { immediate: true });
+
+
+    return {
+      innerNotTreatedOnly,
+      AlertTools,
+      ColorEnum,
+      alertsOrdered,
+      fetchingAlerts,
+      startDate,
+      endDate,
+      innerHidePending,
+      epochToShortTimeFormat,
+      criticityColor,
+      routerLink
+    };
+  }
+});
+</script>

package/components/lists/alerts/FSButtonAcknowledgeAlert.vue

@@ -0,0 +1,101 @@
+<template>
+  <FSButton
+    prependIcon="mdi-checkbox-blank-outline"
+    :label="$tr('page.alert.acknowledge', 'Acknowledge')"
+    @click="dialog = true"
+  />
+  <FSDialogSubmit
+    :title="$tr('page.alert.acknowledge', 'Acknowledge')"
+    :load="acknowledgingAlert"
+    @click:submitButton="onAcknowledge"
+    v-model="dialog"
+  >
+    <template
+      #body
+    >
+      <FSCol
+        gap="16px"
+      >
+        <FSRow>
+          <FSIcon
+            :color="ColorEnum.Warning"
+          >
+            mdi-alert-outline
+          </FSIcon>
+          <FSRow
+            gap="2px"
+          >
+            <FSSpan>
+              {{ $tr("page.alert.acknowledge-warning", "Do you want to acknowledge this alert?") }}
+            </FSSpan>
+          </FSRow>
+        </FSRow>
+        <FSSpan>
+          {{ $tr("page.alert.acknowledge-final-warning", "This action is definitive") }}
+        </FSSpan>
+        <FSErrorToast
+          v-if="error"
+          :errorCode="error"
+        />
+      </FSCol>
+    </template>
+  </FSDialogSubmit>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+import { useAcknowledgeAlert } from "@dative-gpi/foundation-core-services/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
+import FSDialogSubmit from "@dative-gpi/foundation-shared-components/components/FSDialogSubmit.vue";
+import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
+import FSErrorToast from "@dative-gpi/foundation-shared-components/components/FSErrorToast.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+
+export default defineComponent({
+  name: "FSButtonAcknowledgeAlert",
+  components: {
+    FSButton,
+    FSCol,
+    FSDialogSubmit,
+    FSErrorToast,
+    FSIcon,
+    FSRow,
+    FSSpan,
+  },
+  props: {
+    alertId: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const { fetch: acknowledgeAlert, fetching: acknowledgingAlert } = useAcknowledgeAlert();
+
+    const error = ref<string | null>(null);
+    const dialog = ref(false);
+
+    const onAcknowledge = async (): Promise<void> => {
+      try {
+        error.value = null;
+        await acknowledgeAlert(props.alertId);
+        dialog.value = false;
+      }
+      catch (exception: any) {
+        error.value = exception.response.data;
+      }
+    };
+    
+    return {
+      acknowledgingAlert,
+      ColorEnum,
+      dialog,
+      error,
+      onAcknowledge
+    };
+  }
+})
+</script>

package/components/lists/authTokens/FSBaseAuthTokensList.vue

@@ -1,6 +1,7 @@
 <template>
   <FSDataTable
     :items="authTokens"
+    :loading="fetchingAuthTokens"
     :tableCode="$props.tableCode"
     v-bind="$attrs"
   >
@@ -58,7 +59,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { getMany: fetchAuthTokens, entities: authTokens } = useAuthTokens();
+    const { getMany: fetchAuthTokens, entities: authTokens, fetching: fetchingAuthTokens } = useAuthTokens();
     const { epochToLongTimeFormat } = useDateFormat();
 
     watch(() => props.authTokensFilters, (next, previous) => {
@@ -69,6 +70,7 @@ export default defineComponent({
 
     return {
       authTokens,
+      fetchingAuthTokens,
       epochToLongTimeFormat
     };
   }

package/components/lists/chartOrganisationTypes/FSBaseChartOrganisationTypesList.vue

@@ -0,0 +1,156 @@
+<template>
+  <FSDataTable
+    :items="chartOrganisationTypes"
+    :itemTo="$props.itemTo"
+    :loading="fetchingChartOrganisationTypes"
+    :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.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+
+    <template
+      #item.imageId="{ item }"
+    >
+      <FSImage
+        v-if="item.imageId"
+        height="32px"
+        width="32px"
+        :imageId="item.imageId"
+      />
+    </template>
+
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :editable="false"
+        :tags="item.tags"
+      />
+    </template>
+
+    <template
+      #item.modelsLabels="{ item }"
+    >
+      <FSTagGroup
+        :editable="false"
+        :tags="item.modelsLabels.map((d: any) => d.label)"
+      />
+    </template>
+    <template
+      #item.tile="{item}"
+    >
+      <FSChartTileUI
+        :label="item.label"
+        :category-label="item.chartCategoryLabel"
+        :icon="item.icon"
+        :imageId="item.imageId"
+        :type="item.chartType"
+        :to="$props.itemTo && $props.itemTo(item)"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import _ from "lodash";
+import { defineComponent, type PropType, watch } from "vue";
+import type { RouteLocation } from "vue-router";
+
+import {ColorEnum} from "@dative-gpi/foundation-shared-components/models";
+
+import type { ChartOrganisationFilters, ChartOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
+import { PlotPer } from "@dative-gpi/foundation-shared-domain/enums";
+
+import { useChartOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
+
+import FSChartTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSChartTileUI.vue";
+import FSDataTable from "../FSDataTable.vue";
+import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
+import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+
+export default defineComponent({
+  name: "FSBaseChartOrganisationTypesList",
+  components: {
+    FSChartTileUI,
+    FSDataTable,
+    FSTagGroup,
+    FSImage,
+    FSIcon
+  },
+  props: {
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    },
+    chartOrganisationFilters: {
+      type: Object as PropType<ChartOrganisationFilters>,
+      required: false,
+      default: null
+    },
+    plotPer: {
+      type: Number as PropType<PlotPer>,
+      required: false,
+      default: PlotPer.None
+    },
+    tableCode: {
+      type: String,
+      required: true
+    },
+    itemTo: {
+      type: Function as PropType<(item: ChartOrganisationTypeInfos) => Partial<RouteLocation>>,
+      required: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+
+    const { entities: chartOrganisationTypes, fetching: fetchingChartOrganisationTypes, getMany: getManyChartOrganisationTypes } = useChartOrganisationTypes();
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    const fetch = () =>{
+      if(props.plotPer === PlotPer.None) {
+        getManyChartOrganisationTypes(props.chartOrganisationFilters);
+      } else {
+        getManyChartOrganisationTypes({ ...props.chartOrganisationFilters, plotPer: props.plotPer });
+      }
+    };
+
+    watch(() => [props.chartOrganisationFilters, props.plotPer], (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetch();
+      }
+    }, { immediate: true });
+
+    return {
+      ColorEnum,
+      fetchingChartOrganisationTypes,
+      chartOrganisationTypes,
+      isSelected
+    };
+  }
+});
+</script>