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

package/components/lists/charts/FSBaseChartsList.vue

@@ -0,0 +1,268 @@
+<template>
+  <FSDataTable
+    defaultMode="iterator"
+    :loading="fetchingChartOrganisationTypes || fetchingChartOrganisations"
+    :headersOptions="headersOptions"
+    :items="charts"
+    :tableCode="$props.tableCode"
+    :modelValue="$props.modelValue"
+    @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.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"
+        :categoryLabel="item.chartCategoryLabel"
+        :icon="item.icon"
+        :imageId="item.imageId"
+        :type="item.chartType"
+        :color="isSelected(item.id) ? ColorEnum.Primary : ColorEnum.Light"
+        @click="update(item.id)"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, watch, computed } from "vue";
+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, ChartOrganisationTypeFilters } from "@dative-gpi/foundation-core-domain/models";
+import { useChartOrganisations, 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 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: "FSBaseChartsList",
+  components: {
+    FSChartTileUI,
+    FSDataTable,
+    FSTagGroup,
+    FSImage,
+    FSIcon,
+    FSRow
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    chartOrganisationFilters: {
+      type: Object as PropType<ChartOrganisationFilters>,
+      required: false,
+      default: null
+    },
+    chartOrganisationTypeFilters: {
+      type: Object as PropType<ChartOrganisationTypeFilters>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    }
+  },
+  emits: ["update", "update:modelValue", "update:scope"],
+  setup(props, { emit }) {
+    const { entities: chartOrganisations, fetching: fetchingChartOrganisations, getMany: getManyChartOrganisations } = useChartOrganisations();
+    const { entities: chartOrganisationTypes, fetching: fetchingChartOrganisationTypes, getMany: getManyChartOrganisationTypes } = useChartOrganisationTypes();
+
+    const isSelected = (value : string): boolean => {
+      return props.modelValue.includes(value);
+    };
+
+    const fetch = () =>{
+      getManyChartOrganisations(props.chartOrganisationFilters);
+      getManyChartOrganisationTypes(props.chartOrganisationTypeFilters)
+    }
+
+    const charts = computed(() => {
+      return chartOrganisations.value.map(c => ({
+        id: c.id,
+        imageId: c.imageId,
+        chartId: c.chartId,
+        chartCategoryId: c.chartCategoryId,
+        chartCategoryLabel: c.chartCategoryLabel,
+        scope: c.scope,
+        label: c.label,
+        title: c.title,
+        code: c.code,
+        icon: c.icon,
+        tags: c.tags,
+        multiple: c.multiple,
+        chartType: c.chartType,
+        modelsLabels: c.modelsLabels
+      })).concat(chartOrganisationTypes.value.map(c => ({
+        id: c.id,
+        imageId: c.imageId,
+        chartId: c.chartId,
+        chartCategoryId: c.chartCategoryId,
+        chartCategoryLabel: c.chartCategoryLabel,
+        scope: c.scope,
+        label: c.label,
+        title: c.title,
+        code: c.code,
+        icon: c.icon,
+        tags: c.tags,
+        multiple: c.multiple,
+        chartType: c.chartType,
+        modelsLabels: c.modelsLabels
+      })));
+    });
+
+    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 update = (value : string) => {
+      const item = isSelected(value);
+      if (item) {
+        onSelect(props.modelValue.filter(m => m != value));
+      }
+      else {
+        onSelect([...props.modelValue, value]);
+      }
+    }
+
+    const onSelect = (values: string[] | null) => {
+      if(!values){
+        emit("update:modelValue", []);
+        emit("update:scope", []);
+        emit("update", { modelValue: [], scope: [] });
+        return;
+      }
+      const selectedItems = charts.value.filter(i => values.includes(i.id));
+      const newModelValue = selectedItems.map(i => i.id);
+      const newScope = selectedItems.map(i => i.scope);
+      emit("update:modelValue", newModelValue);
+      emit("update:scope", newScope);
+      emit("update", { modelValue: newModelValue, scope: newScope });
+    };
+ 
+    watch(() => [props.chartOrganisationFilters,props.chartOrganisationTypeFilters], (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetch();
+      }
+    }, { immediate: true });
+    
+    return {
+      fetchingChartOrganisationTypes,
+      fetchingChartOrganisations,
+      chartOrganisationTypes,
+      chartOrganisations,
+      headersOptions,
+      ColorEnum,
+      charts,
+      chartTypeLabel,
+      isSelected,
+      chartIcon,
+      onSelect,
+      update
+    };
+  }
+});
+</script>

package/components/lists/comments/FSBaseCommentsList.vue

@@ -0,0 +1,143 @@
+<template>
+  <FSCol
+    v-if="$props.allowAlertComment"
+    padding="24px"
+    gap="48px"
+    align="center-center"
+  >
+    <FSText
+      font="text-h3"
+    >
+      {{ $tr('ui.common.comments', 'Comments') }}
+    </FSText>
+    
+    <FSRow
+      width="500px"
+    >
+      <FSCommentField
+        :buttonLabel="$tr('ui.common.publish','Publish')"
+        :creating="creatingComment"
+        @submit="createNewComment"
+        :userImageId="currentUser?.imageId"
+      />
+    </FSRow>
+    <FSCol
+      gap="12px"
+    >
+      <FSCommentTileUI
+        v-for="comment in orderedComments"
+        :key="comment.id"
+        :timestamp="epochToLongTimeFormat(comment.timestamp)"
+        :userName="comment.userName"
+        :userImageId="comment.userImageId"
+        :canEditRemove="currentUser?.id === comment.userId"
+        :comment="comment.comment"
+        :edited="comment.edited"
+        :removing="removing"
+        :id="comment.id"
+        @edit="updateComment"
+        @remove="removeComment(comment.id)"
+      />
+    </FSCol>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import { computed, defineComponent, onMounted, ref, watch } from "vue";
+import _ from "lodash";
+
+import { useDateFormat, useCurrentUser } from "@dative-gpi/foundation-shared-services/composables";
+import { useCreateComment,useComments,useUpdateComment, useRemoveComment } from "@dative-gpi/foundation-core-services/composables";
+import type { CommentFilters } from "@dative-gpi/foundation-core-domain/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSCommentField from "@dative-gpi/foundation-shared-components/components/fields/FSCommentField.vue";
+import FSCommentTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSCommentTileUI.vue";
+import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
+import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+
+export default defineComponent({
+  title: "FSBaseCommentsList",
+  components: {
+    FSText,
+    FSCol,
+    FSRow,
+    FSCommentTileUI,
+    FSCommentField
+  },
+  props: {
+    commentFilters: {
+      type: Object as PropType<CommentFilters>,
+      required: true
+    },
+    allowAlertComment: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const { fetch : fetchCurrentUser, entity: currentUser } = useCurrentUser();
+    const { create: createComment, creating : creatingComment } = useCreateComment();
+    const { getMany: fetchComments, entities: comments } = useComments();
+    const { update } = useUpdateComment();
+    const { remove, removing } = useRemoveComment();
+    const { epochToLongTimeFormat } = useDateFormat();
+
+    const error = ref<string | null>(null);
+
+    const orderedComments = computed(()  => {
+      return _.orderBy(comments.value, ['timestamp'], ['desc']);
+    });
+
+    onMounted(() => {
+      fetchCurrentUser();
+    });
+
+    const createNewComment = (comment: string) => {
+      if(props.commentFilters.alertId && comment){
+        createComment({
+          comment,
+          alertId: props.commentFilters.alertId,
+        });
+      }
+    };
+
+    const updateComment = (payload : any) => {
+      update(payload.commentId, {comment : payload.comment})
+    }
+
+    const removeComment = async (commentId : string) => {
+      try {
+        error.value = null;
+        await remove(commentId);
+      }
+      catch (exception: any) {
+        error.value = exception.response.data;
+      }
+    }
+
+    watch(() => props.commentFilters, (next, previous) => {
+      if (!_.isEqual(next, previous)) {
+        fetchComments(props.commentFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      creatingComment,
+      orderedComments,
+      currentUser,
+      ColorEnum,
+      comments,
+      removing,
+      error,
+      epochToLongTimeFormat,
+      createNewComment,
+      updateComment,
+      removeComment,
+      
+    };
+  }
+});
+</script>

package/components/lists/connectivityScenarios/FSBaseConnectivityScenariosList.vue

@@ -0,0 +1,128 @@
+<template>
+  <FSDataTable
+    :loading="fetchingConnectivityScenarios"
+    :modelValue="$props.modelValue"
+    :items="connectivityScenarios"
+    :tableCode="$props.tableCode"
+    @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.time="{ item }"
+    >
+      {{ getTimeBestString(item.time) }}
+    </template>
+
+    <template
+      #item.deviceOrganisationImageId="{ item }"
+    >
+      <FSImage
+        v-if="item.deviceOrganisationImageId"
+        height="32px"
+        width="32px"
+        :imageId="item.deviceOrganisationImageId"
+        :thumbnail="true"
+      />
+    </template>
+    <template
+      #item.deviceOrganisationConnectivity="{ item }"
+    >
+      <FSIcon
+        v-if="item.deviceOrganisationConnectivity"
+        :icon="item.deviceOrganisationConnectivity.icon"
+        :color="item.deviceOrganisationConnectivity.color"
+      />
+    </template>
+    <template
+      #item.warnDeviceManager="{ item }"
+    >
+      <FSIconCheck
+        :value="item.warnDeviceManager"
+      />
+    </template>
+    <template
+      #item.warnOnReconnection="{ item }"
+    >
+      <FSIconCheck
+        :value="item.warnOnReconnection"
+      />
+    </template> 
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, watch } from "vue";
+import _ from "lodash";
+
+import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/enums";
+import {ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { getTimeBestString } from "@dative-gpi/foundation-shared-components/utils"
+
+import type { ConnectivityScenarioFilters } from "@dative-gpi/foundation-core-domain/models";
+import { useConnectivityScenarios } from "@dative-gpi/foundation-core-services/composables";
+
+import FSDataTable from "../FSDataTable.vue";
+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";
+
+export default defineComponent({
+  name: "FSBaseConnectivityScenariosList",
+  components: {
+    FSDataTable,
+    FSIconCheck,
+    FSImage,
+    FSIcon
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    },
+    connectivityScenarioFilters: {
+      type: Object as PropType<ConnectivityScenarioFilters>,
+      required: false,
+      default: null
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { entities: connectivityScenarios, fetching: fetchingConnectivityScenarios, getMany: getManyConnectivityScenarios } = useConnectivityScenarios();
+    
+    const fetch = () =>{
+      getManyConnectivityScenarios(props.connectivityScenarioFilters);
+    }
+ 
+    watch(() => [props.connectivityScenarioFilters], (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetch();
+      }
+    }, { immediate: true });
+    
+
+    return {
+      fetchingConnectivityScenarios,
+      connectivityScenarios,
+      ConnectivityStatus,
+      ColorEnum,
+      getTimeBestString
+    };
+  }
+});
+</script>

package/components/lists/dashboardOrganisationTypes/FSBaseDashboardOrganisationTypesList.vue

@@ -0,0 +1,168 @@
+<template>
+  <FSDataTable
+    defaultMode="iterator"
+    :loading="fetchingDashboardOrganisationTypes"
+    :items="dashboardOrganisationTypes"
+    :itemTo="$props.itemTo"
+    :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.main="{ item }"
+    >
+      <FSRow>
+        <FSIcon
+          v-if="item.id === organisationMainDashboardId"
+        >
+          mdi-account-group-outline
+        </FSIcon>
+        <FSIcon
+          v-if="item.id === userOrganisationMainDashboardId"
+        >
+          mdi-home
+        </FSIcon>
+      </FSRow>
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    <template
+      #item.organisationTypeLabel="{ item }"
+    >
+      <FSText
+        v-if="item.organisationTypeId"
+        :label="item.organisationTypeLabel"
+      />
+      <FSChip
+        v-else
+        variant="standard"
+        :label="$tr('ui.common.all', 'All')"
+      />
+    </template>
+    <template
+      #item.tile="{ item, toggleSelect }"
+    >
+      <FSDashboardOrganisationTypeTileUI
+        :bottomColor="item.colors"
+        :to="$props.itemTo && $props.itemTo(item)"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        v-bind="item"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import type { RouteLocation } from "vue-router";
+import { computed, defineComponent, onMounted, watch } from "vue";
+import _ from "lodash";
+
+import { useAppOrganisationId, useCurrentUserOrganisation, useDashboardOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
+import type { DashboardOrganisationTypeFilters, DashboardOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
+import { useOrganisation } from "@dative-gpi/foundation-shared-services/composables";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
+import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
+import FSDashboardOrganisationTypeTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTypeTileUI.vue";
+
+export default defineComponent({
+  name: "FSBaseDashboardOrganisationTypesList",
+  components: {
+    FSDataTable,
+    FSIcon,
+    FSRow,
+    FSText,
+    FSChip,
+    FSDashboardOrganisationTypeTileUI
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    dashboardOrganisationTypeFilters: {
+      type: Object as PropType<DashboardOrganisationTypeFilters>,
+      default: undefined,
+      required: false
+    },
+    itemTo: {
+      type: Function as PropType<(item: DashboardOrganisationTypeInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    }
+  },
+  setup(props) {
+    const { getMany: getDashboardOrganisationTypes, fetching: fetchingDashboardOrganisationTypes, entities: dashboardOrganisationTypes } = useDashboardOrganisationTypes();
+    const { fetch: fetchUserOrganisation, entity: userOrganisation } = useCurrentUserOrganisation();
+    const { get: fetchOrganisation, entity: organisation } = useOrganisation();
+    const { organisationId } = useAppOrganisationId();
+
+    const userOrganisationMainDashboardId = computed((): string | null => {
+      if (userOrganisation.value) {
+        return userOrganisation.value.mainDashboardId;
+      }
+      return null;
+    });
+
+    const organisationMainDashboardId = computed((): string | null => {
+      if (organisation.value) {
+        return organisation.value.mainDashboardId;
+      }
+      return null;
+    });
+  
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    onMounted(() => {
+      fetchUserOrganisation();
+    });
+
+    watch(organisationId, () => {
+      if (organisationId.value) {
+        fetchOrganisation(organisationId.value);
+      }
+    }, { immediate: true });
+
+    watch(() => props.dashboardOrganisationTypeFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getDashboardOrganisationTypes(props.dashboardOrganisationTypeFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingDashboardOrganisationTypes,
+      userOrganisationMainDashboardId,
+      organisationMainDashboardId,
+      dashboardOrganisationTypes,
+      isSelected,
+    };
+  }
+});
+</script>