@dative-gpi/foundation-core-components 1.0.65 → 1.0.67-map-edit

package/components/lists/groups/FSBaseGroupsList.vue

@@ -1,8 +1,9 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
     :loading="fetchingGroups"
     :items="groups"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -29,9 +30,10 @@
     >
       <FSImage
         v-if="item.imageId"
-        height="38px"
-        width="38px"
+        height="32px"
+        width="32px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -46,15 +48,16 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
     <template
-      #item.tile="{ item, toggleSelect }"
+      #item.tile="{ index, item, toggleSelect }"
     >
       <FSGroupTileUI
-        :editable="$props.editable"
+        :key="index"
+        :selectable="$props.selectable"
         :modelValue="isSelected(item.id)"
         @update:modelValue="toggleSelect(item)"
         v-bind="item"
@@ -90,15 +93,16 @@ export default defineComponent({
   },
   props: {
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     groupsFilters: {
       type: Object as PropType<GroupFilters>,
       required: false,
       default: null
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/lists/locations/FSBaseLocationsList.vue

@@ -1,8 +1,9 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
     :loading="fetchingLocations"
     :items="locations"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -26,16 +27,18 @@
     </template>
 
     <template
-      #item.tile="{ item, toggleSelect }"
+      #item.tile="{ index, item, toggleSelect }"
     >
       <FSLocationTileUI
-        v-bind="item"
+        :key="index"
         :bottomColor="item.colors"
-        :editable="true"
+        :address="item.address.placeLabel"
+        :selectable="$props.selectable"
         :singleSelect="singleSelect"
         :modelValue="isSelected(item.id)"
         :to="$props.itemTo && $props.itemTo(item)"
         @update:modelValue="toggleSelect(item)"
+        v-bind="item"
       />
     </template>
   </FSDataTable>
@@ -62,21 +65,21 @@ export default defineComponent({
     FSIcon
   },
   props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     locationsFilters: {
       type: Object as PropType<LocationFilters>,
       required: false,
       default: null
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true
     },
-    modelValue: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-      required: false
-    },
     itemTo: {
       type: Function as PropType<(item: LocationInfos) => Partial<RouteLocation>>,
       required: false
@@ -86,9 +89,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    tableCode: {
-      type: String,
-      required: true
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
     }
   },
   emits: ["update:modelValue"],

package/components/lists/models/FSBaseModelsList.vue

@@ -1,8 +1,11 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
+    :singleSelect="$props.singleSelect"
+    :selectable="$props.selectable"
+    :tableCode="$props.tableCode"
     :loading="fetchingModels"
     :items="models"
-    :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -38,6 +41,7 @@
         height="32px"
         width="32px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -55,15 +59,18 @@
       />
     </template>
     <template
-      #item.tile="{ item, toggleSelect }"
+      #item.tile="{ index, item, toggleSelect }"
     >
       <FSModelTileUI
-        v-bind="item"
+        :key="index"
+        :to="$props.itemTo && $props.itemTo(item)"
+        :selectable="$props.selectable"
+        :singleSelect="$props.singleSelect"
         :imageId="item.imageId"
         :label="item.label"
         :modelValue="isSelected(item.id)"
-        :to="$props.itemTo && $props.itemTo(item)"
         @update:modelValue="toggleSelect(item)"
+        v-bind="item"
       />
     </template>
   </FSDataTable>
@@ -95,23 +102,34 @@ export default defineComponent({
     FSIcon,
   },
   props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     modelsFilters: {
       type: Object as PropType<ModelFilters>,
       required: false,
       default: null
     },
-    modelValue: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-      required: false
-    },
     itemTo: {
       type: Function as PropType<(item: ModelInfos) => Partial<RouteLocation>>,
       required: false
     },
-    tableCode: {
-      type: String,
-      required: true
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
     }
   },
   emits: ["update:modelValue"],
@@ -130,8 +148,8 @@ export default defineComponent({
 
     return {
       fetchingModels,
-      models,
       ColorEnum,
+      models,
       isSelected
     };
   }

package/components/lists/playlists/FSSimplePlaylistsList.vue

@@ -0,0 +1,44 @@
+<template>
+  <FSSimpleList
+    :items="playlists"
+    :loading="fetching"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, watch } from "vue";
+
+import type { PlaylistFilters } from "@dative-gpi/foundation-core-domain/models";
+import { usePlaylists } from "@dative-gpi/foundation-core-services/composables";
+
+import FSSimpleList from "@dative-gpi/foundation-shared-components/components/lists/FSSimpleList.vue";
+
+export default defineComponent({
+  name: "FSSimplePlaylistsList",
+  components: {
+    FSSimpleList,
+  },
+  props: {
+    playlistFilters: {
+      type: Object as PropType<PlaylistFilters>,
+      required: false,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const { entities: playlists, getMany, fetching } = usePlaylists();
+    
+    const fetch = () => {
+      getMany(props.playlistFilters);
+    }
+
+    watch(() => props.playlistFilters, fetch, { immediate: true });
+
+    return {
+      playlists,
+      fetching
+    }
+  }
+});
+</script>

package/components/lists/roleOrganisationTypes/FSBaseRoleOrganisationTypesList.vue

@@ -3,7 +3,7 @@
     :items="roleOrganisationTypes"
     :itemTo="$props.itemTo"
     :loading="fetchingRoleOrganisations"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -44,7 +44,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -78,8 +78,9 @@ export default defineComponent({
   },
   props: {
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     roleOrganisationTypesFilters: {
       type: Object as PropType<RoleOrganisationTypeFilters | null>,
@@ -90,7 +91,7 @@ export default defineComponent({
       type: Function as PropType<(item: RoleOrganisationTypeInfos) => Partial<RouteLocation>>,
       required: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/lists/roleOrganisations/FSBaseRoleOrganisationsList.vue

@@ -1,10 +1,10 @@
 <template>
   <FSDataTable
-    :items="roleOrganisations"
-    :itemTo="$props.itemTo"
     :loading="fetchingRoleOrganisations"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
+    :items="roleOrganisations"
+    :itemTo="$props.itemTo"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -44,7 +44,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -52,34 +52,35 @@
 </template>
   
 <script lang="ts">
-import type { PropType} from "vue";
-import { defineComponent, watch } from "vue";
-import type { RouteLocation } from "vue-router";
+import { defineComponent, type PropType, watch } from "vue";
+import { type RouteLocation } from "vue-router";
 import _ from "lodash";
 
-import type { RoleOrganisationFilters, RoleOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
+import { type RoleOrganisationFilters, type RoleOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
 import { userTypeIcon, userTypeLabel } from "@dative-gpi/foundation-core-components/utils";
 import { useRoleOrganisations } from "@dative-gpi/foundation-core-services/composables";
 
-import FSDataTable from "../FSDataTable.vue";
-import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
 import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
-import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+
+import FSDataTable from "../FSDataTable.vue";
 
 export default defineComponent({
   name: "FSBaseRoleOrganisationsList",
   components: {
     FSDataTable,
-    FSRow,
+    FSTagGroup,
     FSIcon,
     FSText,
-    FSTagGroup
+    FSRow
   },
   props: {
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     roleOrganisationsFilters: {
       type: Object as PropType<RoleOrganisationFilters | null>,
@@ -90,7 +91,7 @@ export default defineComponent({
       type: Function as PropType<(item: RoleOrganisationInfos) => Partial<RouteLocation>>,
       required: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/lists/scenarioOrganisationTypes/FSBaseScenarioOrganisationTypesList.vue

@@ -3,7 +3,7 @@
     :items="scenarioOrganisationTypes"
     :itemTo="$props.itemTo"
     :loading="fetchingScenarioOrganisationTypes"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -26,6 +26,23 @@
         {{ item.icon }}
       </FSIcon>
     </template>
+    
+    <template
+      #item.criticity="{ item }"
+    >
+      <FSRow
+        align="center-left"
+      >
+        <FSIcon
+          :color="AlertTools.criticityColor(item.criticity)"
+        >
+          {{ AlertTools.criticityIcon(item.criticity) }}
+        </FSIcon>
+        <FSSpan>
+          {{ AlertTools.criticityLabel(item.criticity) }}
+        </FSSpan>
+      </FSRow>
+    </template>
 
     <template
       #item.imageId="{ item }"
@@ -35,6 +52,7 @@
         height="32px"
         width="32px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
 
@@ -43,7 +61,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -51,10 +69,14 @@
 </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 { Criticity } from "@dative-gpi/foundation-shared-domain/enums";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
+
 import type { ScenarioOrganisationTypeFilters, ScenarioOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useScenarioOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
 
@@ -62,19 +84,22 @@ 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 FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 
 export default defineComponent({
   name: "FSBaseScenarioOrganisationTypesList",
   components: {
     FSDataTable,
-    FSIcon,
+    FSTagGroup,
     FSImage,
-    FSTagGroup
+    FSIcon,
+    FSRow,
   },
   props: {
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     scenarioOrganisationTypeFilters: {
       type: Object as PropType<ScenarioOrganisationTypeFilters>,
@@ -85,7 +110,7 @@ export default defineComponent({
       type: Function as PropType<(item: ScenarioOrganisationTypeInfos) => Partial<RouteLocation>>,
       required: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true
@@ -100,6 +125,16 @@ export default defineComponent({
   setup(props) {
     const { entities: scenarioOrganisationTypes, fetching: fetchingScenarioOrganisationTypes, getMany: getManyScenarioOrganisationTypes } = useScenarioOrganisationTypes();
 
+    const headersOptions = computed(() => ({
+      criticity: {
+        fixedFilters: getEnumEntries(Criticity).map(e => ({
+          value: e.value,
+          text: AlertTools.criticityLabel(e.value)
+        })),
+        methodFilter: (value: Criticity, item: Criticity) => value == item
+      }
+    }));
+
     const isSelected = (id: string): boolean => {
       return props.modelValue.includes(id);
     };
@@ -113,6 +148,8 @@ export default defineComponent({
     return {
       fetchingScenarioOrganisationTypes,
       scenarioOrganisationTypes,
+      headersOptions,
+      AlertTools,
       isSelected
     };
   }

package/components/lists/scenarioOrganisations/FSBaseScenarioOrganisationsList.vue

@@ -3,9 +3,10 @@
     :items="scenarioOrganisations"
     :itemTo="$props.itemTo"
     :loading="fetchingScenarioOrganisations"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
+    :headersOptions="headersOptions"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
@@ -27,12 +28,29 @@
       </FSIcon>
     </template>
 
+    <template
+      #item.criticity="{ item }"
+    >
+      <FSRow
+        align="center-left"
+      >
+        <FSIcon
+          :color="AlertTools.criticityColor(item.criticity)"
+        >
+          {{ AlertTools.criticityIcon(item.criticity) }}
+        </FSIcon>
+        <FSSpan>
+          {{ AlertTools.criticityLabel(item.criticity) }}
+        </FSSpan>
+      </FSRow>
+    </template>
+    
     <template
       #item.tags="{ item }"
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -40,28 +58,35 @@
 </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 { Criticity } from "@dative-gpi/foundation-shared-domain/enums";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
+
 import type { ScenarioOrganisationFilters, ScenarioOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useScenarioOrganisations } from "@dative-gpi/foundation-core-services/composables";
 
 import FSDataTable from "../FSDataTable.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
 import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 
 export default defineComponent({
   name: "FSBaseScenarioOrganisationsList",
   components: {
     FSDataTable,
+    FSTagGroup,
     FSIcon,
-    FSTagGroup
+    FSRow
   },
   props: {
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     scenarioOrganisationFilters: {
       type: Object as PropType<ScenarioOrganisationFilters>,
@@ -72,7 +97,7 @@ export default defineComponent({
       type: Function as PropType<(item: ScenarioOrganisationInfos) => Partial<RouteLocation>>,
       required: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true
@@ -87,6 +112,17 @@ export default defineComponent({
   setup(props) {
     const { entities: scenarioOrganisations, fetching: fetchingScenarioOrganisations, getMany: getManyScenarioOrganisations } = useScenarioOrganisations();
 
+
+    const headersOptions = computed(() => ({
+      criticity: {
+        fixedFilters: getEnumEntries(Criticity).map(e => ({
+          value: e.value,
+          text: AlertTools.criticityLabel(e.value)
+        })),
+        methodFilter: (value: Criticity, item: Criticity) => value == item
+      }
+    }));
+
     const isSelected = (id: string): boolean => {
       return props.modelValue.includes(id);
     };
@@ -100,6 +136,8 @@ export default defineComponent({
     return {
       fetchingScenarioOrganisations,
       scenarioOrganisations,
+      headersOptions,
+      AlertTools,
       isSelected
     };
   }