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

package/components/lists/chartOrganisations/FSBaseChartOrganisationsList.vue

@@ -0,0 +1,157 @@
+<template>
+  <FSDataTable
+    :items="chartOrganisations"
+    :itemTo="$props.itemTo"
+    :loading="fetchingChartOrganisations"
+    :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"
+        :categoryLabel="item.chartCategoryLabel"
+        :icon="item.icon"
+        :imageId="item.imageId"
+        :type="item.chartType"
+        :to="$props.itemTo && $props.itemTo(item)"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, watch } from "vue";
+import type { RouteLocation } from "vue-router";
+import _ from "lodash";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { PlotPer } from "@dative-gpi/foundation-shared-domain/enums";
+
+import { type ChartOrganisationFilters, type ChartOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
+import { useChartOrganisations } 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 FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
+import FSChartTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSChartTileUI.vue";
+
+export default defineComponent({
+  name: "FSBaseChartOrganisationsList",
+  components: {
+    FSDataTable,
+    FSIcon,
+    FSImage,
+    FSTagGroup,
+    FSChartTileUI
+  },
+  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: ChartOrganisationInfos) => Partial<RouteLocation>>,
+      required: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+
+    const { entities: chartOrganisations, fetching: fetchingChartOrganisations, getMany: getManyChartOrganisations } = useChartOrganisations();
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    const fetch = () =>{
+      if(props.plotPer === PlotPer.None) {
+        getManyChartOrganisations(props.chartOrganisationFilters);
+      } else {
+        getManyChartOrganisations({...props.chartOrganisationFilters, plotPer: props.plotPer});
+      }
+    }
+ 
+    watch(() => [props.chartOrganisationFilters, props.plotPer], (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetch();
+      }
+    }, { immediate: true });
+    
+
+    return {
+      ColorEnum,
+      fetchingChartOrganisations,
+      chartOrganisations,
+      isSelected
+    };
+  }
+});
+</script>

package/components/lists/charts/FSBaseChartsList.vue

@@ -0,0 +1,204 @@
+<template>
+  <FSDataTable
+    :loading="fetchingChartOrganisationTypes || fetchingChartOrganisations"
+    :items="charts"
+    :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"
+        :categoryLabel="item.chartCategoryLabel"
+        :icon="item.icon"
+        :imageId="item.imageId"
+        :type="item.chartType"
+        :color="isSelected(item.id) ? ColorEnum.Primary : ColorEnum.Dark"
+        @click="update(item.id)"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, watch, computed } from "vue";
+import _ from "lodash";
+
+import {ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import type { 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 FSDataTable from "../FSDataTable.vue";
+
+export default defineComponent({
+  name: "FSBaseChartsList",
+  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
+    },
+    chartOrganisationTypeFilters: {
+      type: Object as PropType<ChartOrganisationTypeFilters>,
+      required: false,
+      default: null
+    },
+    tableCode: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["update:modelValue"],
+  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 => {
+        return {
+          id: `${c.id}_${c.scope}`,
+          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 => {
+          return {
+            id: `${c.id}_${c.scope}`,
+            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 update = (value : string) =>
+    {
+      const item = isSelected(value);
+
+      if(item){
+        emit("update:modelValue", props.modelValue.filter(m => m != value))
+      }
+      else{
+        emit("update:modelValue", [...props.modelValue, value])
+      }
+    }
+ 
+    watch(() => [props.chartOrganisationFilters,props.chartOrganisationTypeFilters], (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetch();
+      }
+    }, { immediate: true });
+    
+    return {
+      fetchingChartOrganisationTypes,
+      fetchingChartOrganisations,
+      chartOrganisationTypes,
+      chartOrganisations,
+      ColorEnum,
+      charts,
+      isSelected,
+      update
+    };
+  }
+});
+</script>

package/components/lists/comments/FSBaseCommentsList.vue

@@ -0,0 +1,127 @@
+<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>
+    <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"
+      :id="comment.id"
+      @edit="updateComment"
+      @remove="removeComment(comment.id)"
+    />
+  </FSCol>
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import { computed, defineComponent, onMounted, 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  } = useRemoveComment();
+    const { epochToLongTimeFormat } = useDateFormat();
+
+    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 = (commentId : string) => {
+      remove(commentId)
+    }
+
+    watch(() => props.commentFilters, (next, previous) => {
+      if (!_.isEqual(next, previous)) {
+        fetchComments(props.commentFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      comments,
+      ColorEnum,
+      creatingComment,
+      currentUser,
+      orderedComments,
+      createNewComment,
+      updateComment,
+      removeComment,
+      epochToLongTimeFormat
+    };
+  }
+});
+</script>

package/components/lists/dashboards/FSBaseDashboardsList.vue

@@ -1,11 +1,8 @@
 <template>
-  <FSLoadDataTable
-    v-if="fetchingDashboardOrganisationTypes || fetchingDashboardOrganisations || fetchingDashboardShallows"
-  />
   <FSDataTable
-    v-else
     :items="items"
     :itemTo="$props.itemTo"
+    :loading="fetchingDashboardOrganisationTypes || fetchingDashboardOrganisations || fetchingDashboardShallows"
     :tableCode="$props.tableCode"
     :modelValue="selecteds"
     @update:modelValue="onSelect"
@@ -90,7 +87,6 @@ import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSDataTable from "../FSDataTable.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
-import FSLoadDataTable from "@dative-gpi/foundation-shared-components/components/lists/FSLoadDataTable.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 FSDashboardOrganisationTypeTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTypeTileUI.vue";
@@ -99,7 +95,6 @@ export default defineComponent({
   name: "FSBaseDashboardsList",
   components: {
     FSDataTable,
-    FSLoadDataTable,
     FSIcon,
     FSDashboardOrganisationTileUI,
     FSDashboardOrganisationTypeTileUI,

package/components/lists/dataCategories/FSBaseDataCategoriesList.vue

@@ -0,0 +1,154 @@
+<template>
+  <FSCol>
+    <FSRow
+      align="bottom-center"
+      width="50%"
+    >
+      <FSSearchField
+        v-model="search"
+      />
+      <FSButtonCheckbox
+        :label="$tr('ui.common.data-correlated','Correlated only')"
+        :color="ColorEnum.Success"
+        prependIcon="mdi-link"
+        v-model="correlated"
+      />
+    </FSRow>
+    <FSFadeOut
+      maxHeight="150px"
+      maskHeight="0px"
+    >
+      <FSDataTable
+        :loading="fetchingDataCategories"
+        :disableIterator="true"
+        :items="dataCategories"
+        :modelValue="$props.modelValue"
+        :showSearch="false"
+        :tableCode="$props.tableCode"
+        :search="search"
+        @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.tile="{ item }"
+        >
+          <FSClickable
+            padding="12px"
+            height="60px"
+            width="233px"
+            :color="isSelected(item.id) ? ColorEnum.Primary : ColorEnum.Dark"
+            @click="$emit('update:modelValue', [item.id])"
+            v-bind="$attrs"
+          >
+            <template
+              #default
+            >
+              <FSRow
+                align="center-center"
+                :wrap="false"
+              >
+                <FSSpan
+                  :lineClamp="1"
+                >
+                  {{ item.label }}
+                </FSSpan>
+                <v-spacer/>
+                <FSIcon
+                  :color="item.correlated ? ColorEnum.Primary : ColorEnum.Light"
+                  :icon="item.correlated ? 'mdi-link' : 'mdi-link-off'"
+                  variant="dark"
+                />
+              </FSRow>
+            </template>
+          </FSClickable>
+        </template>
+      </FSDataTable>
+    </FSFadeOut>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, ref, watch } from "vue";
+import _ from "lodash";
+
+import {ColorEnum} from "@dative-gpi/foundation-shared-components/models";
+
+import { useDataCategories } from "@dative-gpi/foundation-core-services/composables";
+import type { DataCategoryFilters } from "@dative-gpi/foundation-core-domain/models";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
+import FSFadeOut from "@dative-gpi/foundation-shared-components/components/FSFadeOut.vue";
+import FSClickable from "@dative-gpi/foundation-shared-components/components/FSClickable.vue";
+import FSSearchField from "@dative-gpi/foundation-shared-components/components/fields/FSSearchField.vue";
+import FSButtonCheckbox from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonCheckbox.vue";
+
+export default defineComponent({
+  name: "FSBaseDataCategoriesList",
+  components: {
+    FSDataTable,
+    FSCol,
+    FSFadeOut,
+    FSClickable,
+    FSRow,
+    FSSpan,
+    FSSearchField,
+    FSButtonCheckbox,
+    FSIcon
+  },
+  props: {
+    dataCategoryFilters: {
+      type: Object as PropType<DataCategoryFilters>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    },
+    tableCode: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: fetchDataCategories, fetching: fetchingDataCategories, entities: dataCategories } = useDataCategories();
+
+    const search = ref<string | null | undefined >();
+    const correlated = ref<boolean>(false);
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => [props.dataCategoryFilters, search.value, correlated.value] , (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetchDataCategories({...props.dataCategoryFilters, search: search.value, correlated: correlated.value ? true : undefined});
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingDataCategories,
+      dataCategories,
+      ColorEnum,
+      search,
+      correlated,
+      isSelected
+    };
+  }
+});
+</script>