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

package/components/lists/alerts/FSButtonAcknowledgeAlert.vue

@@ -0,0 +1,101 @@
+<template>
+  <FSButton
+    prependIcon="mdi-checkbox-blank-outline"
+    :label="$tr('ui.alert.acknowledge', 'Acknowledge')"
+    @click="dialog = true"
+  />
+  <FSDialogSubmit
+    :title="$tr('ui.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("ui.alert.acknowledge-warning", "Do you want to acknowledge this alert?") }}
+            </FSSpan>
+          </FSRow>
+        </FSRow>
+        <FSSpan>
+          {{ $tr("ui.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

@@ -0,0 +1,79 @@
+<template>
+  <FSDataTable
+    :items="authTokens"
+    :loading="fetchingAuthTokens"
+    :tableCode="$props.tableCode"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #item.creationDate="{item}"
+    >
+      <FSText>
+        {{ epochToLongTimeFormat(item.creationDate) }}
+      </FSText>
+    </template>
+    <template
+      #item.dateMax="{item}"
+    >
+      <FSText>
+        {{ epochToLongTimeFormat(item.dateMax) }}
+      </FSText>
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, watch } from "vue";
+import _ from "lodash";
+
+import { useDateFormat, useAuthTokens } from "@dative-gpi/foundation-shared-services/composables";
+import { type AuthTokenFilters } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
+
+export default defineComponent({
+  name: "FSBaseAuthTokensList",
+  components: {
+    FSDataTable,
+    FSText
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    authTokensFilters: {
+      type: Object as PropType<AuthTokenFilters | null>,
+      required: false,
+      default: null
+    }
+  },
+  setup(props) {
+    const { getMany: fetchAuthTokens, entities: authTokens, fetching: fetchingAuthTokens } = useAuthTokens();
+    const { epochToLongTimeFormat } = useDateFormat();
+
+    watch(() => props.authTokensFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetchAuthTokens(props.authTokensFilters ?? undefined);
+      }
+    }, { immediate: true });
+
+    return {
+      authTokens,
+      fetchingAuthTokens,
+      epochToLongTimeFormat
+    };
+  }
+});
+</script>

package/components/lists/chartOrganisationTypes/FSBaseChartOrganisationTypesList.vue

@@ -0,0 +1,204 @@
+<template>
+  <FSDataTable
+    :items="chartOrganisationTypes"
+    :itemTo="$props.itemTo"
+    :loading="fetchingChartOrganisationTypes"
+    :headersOptions="headersOptions"
+    :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
+      #header.imageId-title
+    >
+      <FSIcon>
+        mdi-panorama-variant-outline
+      </FSIcon>
+    </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"
+        :thumbnail="true"
+      />
+    </template>
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :editable="false"
+        :tags="item.tags"
+      />
+    </template>
+    <template
+      #item.chartType="{ item }"
+    >
+      <FSRow
+        :wrap="false"
+      >
+        <FSIcon
+          :icon="chartIcon(item.chartType)"
+        />
+        <FSText>
+          {{ chartTypeLabel(item.chartType) }}
+        </FSText>
+      </FSRow>
+    </template>
+    <template
+      #item.modelsLabels="{ item }"
+    >
+      <FSTagGroup
+        :editable="false"
+        :tags="item.modelsLabels.map((d: any) => d.label)"
+      />
+    </template>
+    <template
+      #item.tile="{item}"
+    >
+      <FSChartTileUI
+        variant="standard"
+        :label="item.label"
+        :category-label="item.chartCategoryLabel"
+        :icon="item.icon"
+        :imageId="item.imageId"
+        :type="item.chartType"
+        :color="ColorEnum.Light"
+        :to="$props.itemTo && $props.itemTo(item)"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, watch } from "vue";
+import type { RouteLocation } from "vue-router";
+import _ from "lodash";
+
+import { ChartType } from "@dative-gpi/foundation-shared-domain/enums";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { chartTypeLabel, chartIcon } from "@dative-gpi/foundation-shared-components/tools";
+
+import type { ChartModelLabel, ChartOrganisationTypeFilters, ChartOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
+import { useChartOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
+
+import FSChartTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSChartTileUI.vue";
+import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
+import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
+import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+
+import FSDataTable from "../FSDataTable.vue";
+
+export default defineComponent({
+  name: "FSBaseChartOrganisationTypesList",
+  components: {
+    FSChartTileUI,
+    FSDataTable,
+    FSTagGroup,
+    FSImage,
+    FSIcon,
+    FSText,
+    FSRow
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    chartOrganisationTypeFilters: {
+      type: Object as PropType<ChartOrganisationTypeFilters>,
+      required: false,
+      default: null
+    },
+    itemTo: {
+      type: Function as PropType<(item: ChartOrganisationTypeInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { entities: chartOrganisationTypes, fetching: fetchingChartOrganisationTypes, getMany: getManyChartOrganisationTypes } = useChartOrganisationTypes();
+
+    const headersOptions = computed(() => ({
+      modelsLabels: {
+        fixedFilters: chartOrganisationTypes.value.map(c => c.modelsLabels).reduce((acc, models) => {
+          for (const m of models) {
+            if (!acc.map((m) => m.id).includes(m.id)) {
+              acc.push(m);
+            }
+          }
+          return acc;
+        }, []).map((m) =>  ({
+          value: m.id,
+          text: m.label
+        })).concat({
+          value: '',
+          text: '--'
+        }),
+        methodFilter: (value: string, items: ChartModelLabel[]) => (items.length == 0 && value == '') || (items.length  > 0 && items.some(ml => ml.id == value))
+      },
+      chartType: {
+        fixedFilters: getEnumEntries(ChartType).map(e => ({
+          value: e.value,
+          text: chartTypeLabel(e.value)
+        })),
+        methodFilter: (value: ChartType, item: ChartType) => value == item
+      }
+    }));
+      
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    const fetch = () =>{
+      getManyChartOrganisationTypes(props.chartOrganisationTypeFilters);
+    };
+
+    watch(() => [props.chartOrganisationTypeFilters], (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetch();
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingChartOrganisationTypes,
+      chartOrganisationTypes,
+      headersOptions,
+      ColorEnum,
+      chartTypeLabel,
+      isSelected,
+      chartIcon
+    };
+  }
+});
+</script>

package/components/lists/chartOrganisations/FSBaseChartOrganisationsList.vue

@@ -0,0 +1,205 @@
+<template>
+  <FSDataTable
+    :items="chartOrganisations"
+    :itemTo="$props.itemTo"
+    :loading="fetchingChartOrganisations"
+    :headersOptions="headersOptions"
+    :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
+      #header.imageId-title
+    >
+      <FSIcon>
+        mdi-panorama-variant-outline
+      </FSIcon>
+    </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"
+        :thumbnail="true"
+      />
+    </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
+        variant="standard"
+        :label="item.label"
+        :categoryLabel="item.chartCategoryLabel"
+        :icon="item.icon"
+        :imageId="item.imageId"
+        :type="item.chartType"
+        :color="ColorEnum.Light"
+        :to="$props.itemTo && $props.itemTo(item)"
+      />
+    </template>
+    <template
+      #item.chartType="{ item }"
+    >
+      <FSRow
+        :wrap="false"
+      >
+        <FSIcon
+          :icon="chartIcon(item.chartType)"
+        />
+        <FSText>
+          {{ chartTypeLabel(item.chartType) }}
+        </FSText>
+      </FSRow>
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, watch } from "vue";
+import type { RouteLocation } from "vue-router";
+import _ from "lodash";
+
+import { ChartType } from "@dative-gpi/foundation-shared-domain/enums";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { chartTypeLabel, chartIcon } from "@dative-gpi/foundation-shared-components/tools";
+
+import type { ChartModelLabel, ChartOrganisationFilters, ChartOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
+import { useChartOrganisations } from "@dative-gpi/foundation-core-services/composables";
+
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSText from "@dative-gpi/foundation-shared-components/components/FSText.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 FSChartTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSChartTileUI.vue";
+
+import FSDataTable from "../FSDataTable.vue";
+
+export default defineComponent({
+  name: "FSBaseChartOrganisationsList",
+  components: {
+    FSChartTileUI,
+    FSDataTable,
+    FSTagGroup,
+    FSImage,
+    FSIcon,
+    FSText,
+    FSRow,
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    chartOrganisationFilters: {
+      type: Object as PropType<ChartOrganisationFilters>,
+      required: false,
+      default: null
+    },
+    itemTo: {
+      type: Function as PropType<(item: ChartOrganisationInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { entities: chartOrganisations, fetching: fetchingChartOrganisations, getMany: getManyChartOrganisations } = useChartOrganisations();
+
+    const headersOptions = computed(() => ({
+      modelsLabels: {
+        fixedFilters: chartOrganisations.value.map(c => c.modelsLabels).reduce((acc, models) => {
+          for (const m of models) {
+            if (!acc.map((m) => m.id).includes(m.id)) {
+              acc.push(m);
+            }
+          }
+          return acc;
+        }, []).map((m) =>  ({
+          value: m.id,
+          text: m.label
+        })).concat({
+          value: '',
+          text: '--'
+        }),
+        methodFilter: (value: string, items: ChartModelLabel[]) => (items.length == 0 && value == '') || (items.length  > 0 && items.some(ml => ml.id == value))
+      },
+      chartType: {
+        fixedFilters: getEnumEntries(ChartType).map(e => ({
+          value: e.value,
+          text: chartTypeLabel(e.value)
+        })),
+        methodFilter: (value: ChartType, item: ChartType) => value == item
+      }
+    }));
+
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    const fetch = () =>{
+      getManyChartOrganisations(props.chartOrganisationFilters);
+    }
+ 
+    watch(() => [props.chartOrganisationFilters], (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetch();
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingChartOrganisations,
+      chartOrganisations,
+      headersOptions,
+      ColorEnum,
+      chartTypeLabel,
+      isSelected,
+      chartIcon
+    };
+  }
+});
+</script>