@dative-gpi/foundation-core-components 1.0.57 → 1.0.58-groupings

package/components/lists/chartOrganisations/FSBaseChartOrganisationsList.vue

@@ -1,10 +1,14 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
     :items="chartOrganisations"
     :itemTo="$props.itemTo"
     :loading="fetchingChartOrganisations"
+    :headersOptions="headersOptions"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
+    :singleSelect="$props.singleSelect"
+    :selectable="$props.selectable"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
@@ -17,7 +21,13 @@
         v-bind="slotData"
       />
     </template>
-
+    <template
+      #header.imageId-title
+    >
+      <FSIcon>
+        mdi-panorama-variant-outline
+      </FSIcon>
+    </template>
     <template
       #item.icon="{ item }"
     >
@@ -25,7 +35,6 @@
         {{ item.icon }}
       </FSIcon>
     </template>
-
     <template
       #item.imageId="{ item }"
     >
@@ -34,37 +43,55 @@
         height="32px"
         width="32px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
-
     <template
       #item.tags="{ item }"
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
         :tags="item.tags"
+        :showRemove="false"
       />
     </template>
-
     <template
       #item.modelsLabels="{ item }"
     >
       <FSTagGroup
-        :editable="false"
+        variant="slide"
         :tags="item.modelsLabels.map((d: any) => d.label)"
+        :showRemove="false"
       />
     </template>
-
     <template
-      #item.tile="{ item }"
+      #item.chartType="{ item }"
+    >
+      <FSRow
+        :wrap="false"
+      >
+        <FSIcon
+          :icon="chartIcon(item.chartType)"
+        />
+        <FSText>
+          {{ chartTypeLabel(item.chartType) }}
+        </FSText>
+      </FSRow>
+    </template>
+    <template
+      #item.tile="{ item, toggleSelect }"
     >
       <FSChartTileUI
         :label="item.label"
+        :singleSelect="$props.singleSelect"
+        :selectable="$props.selectable"
         :categoryLabel="item.chartCategoryLabel"
         :icon="item.icon"
         :imageId="item.imageId"
         :type="item.chartType"
+        :scope="item.scope"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
         :to="$props.itemTo && $props.itemTo(item)"
       />
     </template>
@@ -72,85 +99,123 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, watch } from "vue";
+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 { PlotPer } from "@dative-gpi/foundation-shared-domain/enums";
+import { chartTypeLabel, chartIcon } from "@dative-gpi/foundation-shared-components/tools";
 
-import { type ChartOrganisationFilters, type ChartOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
+import type { ChartModelLabel, ChartOrganisationFilters, ChartOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useChartOrganisations } from "@dative-gpi/foundation-core-services/composables";
 
-import FSDataTable from "../FSDataTable.vue";
+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,
-    FSIcon,
-    FSImage,
     FSTagGroup,
-    FSChartTileUI
+    FSImage,
+    FSIcon,
+    FSText,
+    FSRow,
   },
   props: {
-    modelValue: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-      required: false
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     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
-    }
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: 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 = () =>{
-      if(props.plotPer === PlotPer.None) {
-        getManyChartOrganisations(props.chartOrganisationFilters);
-      } else {
-        getManyChartOrganisations({...props.chartOrganisationFilters, plotPer: props.plotPer});
-      }
+      getManyChartOrganisations(props.chartOrganisationFilters);
     }
  
-    watch(() => [props.chartOrganisationFilters, props.plotPer], (next, previous) => {
+    watch(() => [props.chartOrganisationFilters], (next, previous) => {
       if ((!next && !previous) || !_.isEqual(next, previous)) {
         fetch();
       }
     }, { immediate: true });
-    
 
     return {
-      ColorEnum,
       fetchingChartOrganisations,
       chartOrganisations,
-      isSelected
+      headersOptions,
+      ColorEnum,
+      chartTypeLabel,
+      isSelected,
+      chartIcon
     };
   }
 });

package/components/lists/charts/FSBaseChartsList.vue

@@ -1,10 +1,14 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
     :loading="fetchingChartOrganisationTypes || fetchingChartOrganisations"
+    :headersOptions="headersOptions"
     :items="charts"
+    :selectable="$props.selectable"
+    :singleSelect="$props.singleSelect"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
+    @update:modelValue="onSelect"
     v-bind="$attrs"
   >
     <template
@@ -16,7 +20,13 @@
         v-bind="slotData"
       />
     </template>
-
+    <template
+      #header.imageId-title
+    >
+      <FSIcon>
+        mdi-panorama-variant-outline
+      </FSIcon>
+    </template>
     <template
       #item.icon="{ item }"
     >
@@ -24,7 +34,6 @@
         {{ item.icon }}
       </FSIcon>
     </template>
-
     <template
       #item.imageId="{ item }"
     >
@@ -33,28 +42,40 @@
         height="32px"
         width="32px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
-
     <template
       #item.tags="{ item }"
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="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"
+        :showRemove="false"
         :tags="item.modelsLabels.map((d: any) => d.label)"
       />
     </template>
-
     <template
       #item.tile="{ item }"
     >
@@ -64,8 +85,11 @@
         :icon="item.icon"
         :imageId="item.imageId"
         :type="item.chartType"
-        :color="isSelected(item.id) ? ColorEnum.Primary : ColorEnum.Dark"
-        @click="update(item.id)"
+        :scope="item.scope"
+        :singleSelect="$props.singleSelect"
+        :selectable="$props.selectable"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="update(item.id)"
       />
     </template>
   </FSDataTable>
@@ -75,16 +99,20 @@
 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 { 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({
@@ -94,13 +122,14 @@ export default defineComponent({
     FSDataTable,
     FSTagGroup,
     FSImage,
-    FSIcon
+    FSIcon,
+    FSRow
   },
   props: {
-    modelValue: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-      required: false
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     chartOrganisationFilters: {
       type: Object as PropType<ChartOrganisationFilters>,
@@ -112,14 +141,24 @@ export default defineComponent({
       required: false,
       default: null
     },
-    tableCode: {
-      type: String,
-      required: true
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  emits: ["update:modelValue"],
+  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();
 
@@ -133,55 +172,93 @@ export default defineComponent({
     }
 
     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
-          }
-        }))
-    })
+      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 update = (value : string) =>
-    {
-      const item = isSelected(value);
+    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
+      }
+    }));
 
-      if(item){
-        emit("update:modelValue", props.modelValue.filter(m => m != value))
+    const update = (value : string) => {
+      const isAlreadySelected = isSelected(value);
+      if (isAlreadySelected) {
+        onSelect(props.modelValue.filter(m => m != value));
+      }
+      else if(props.singleSelect){
+        onSelect([value]);
       }
       else{
-        emit("update:modelValue", [...props.modelValue, value])
+        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)) {
@@ -194,9 +271,13 @@ export default defineComponent({
       fetchingChartOrganisations,
       chartOrganisationTypes,
       chartOrganisations,
+      headersOptions,
       ColorEnum,
       charts,
+      chartTypeLabel,
       isSelected,
+      chartIcon,
+      onSelect,
       update
     };
   }

package/components/lists/comments/FSBaseCommentsList.vue

@@ -21,25 +21,30 @@
         :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
+      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, watch } from "vue";
+import { computed, defineComponent, onMounted, ref, watch } from "vue";
 import _ from "lodash";
 
 import { useDateFormat, useCurrentUser } from "@dative-gpi/foundation-shared-services/composables";
@@ -73,13 +78,15 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const {fetch : fetchCurrentUser, entity: currentUser} = useCurrentUser();
+    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 { update } = useUpdateComment();
+    const { remove, removing } = useRemoveComment();
     const { epochToLongTimeFormat } = useDateFormat();
 
+    const error = ref<string | null>(null);
+
     const orderedComments = computed(()  => {
       return _.orderBy(comments.value, ['timestamp'], ['desc']);
     });
@@ -101,8 +108,14 @@ export default defineComponent({
       update(payload.commentId, {comment : payload.comment})
     }
 
-    const removeComment = (commentId : string) => {
-      remove(commentId)
+    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) => {
@@ -112,15 +125,18 @@ export default defineComponent({
     }, { immediate: true });
 
     return {
-      comments,
-      ColorEnum,
       creatingComment,
-      currentUser,
       orderedComments,
+      currentUser,
+      ColorEnum,
+      comments,
+      removing,
+      error,
+      epochToLongTimeFormat,
       createNewComment,
       updateComment,
       removeComment,
-      epochToLongTimeFormat
+      
     };
   }
 });