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

package/components/lists/groupings/FSBaseGroupingsList.vue

@@ -0,0 +1,117 @@
+<template>
+  <FSDataTable
+    defaultMode="iterator"
+    :loading="fetchingGroupings"
+    :items="groupings"
+    :selectable="$props.selectable"
+    :showSearch="$props.showSearch"
+    :disableTable="$props.disableTable"
+    :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.tile="{ item, toggleSelect }"
+    >
+      <FSGroupingTileUI
+        :selectable="$props.selectable"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        v-bind="item"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { defineComponent, watch } from "vue";
+import type { PropType} from "vue";
+import _ from "lodash";
+
+import type { GroupingFilters } from "@dative-gpi/foundation-core-domain/models";
+import { useGroupings } from "@dative-gpi/foundation-core-services/composables";
+
+import FSDataTable from "../FSDataTable.vue";
+
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSGroupingTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSGroupingTileUI.vue";
+
+
+export default defineComponent({
+  name: "FSBaseGroupingsList",
+  components: {
+    FSDataTable,
+    FSIcon,
+    FSGroupingTileUI
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    groupingsFilters: {
+      type: Object as PropType<GroupingFilters>,
+      required: false,
+      default: null
+    },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    showSearch: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disableTable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: fetchGroupings, fetching: fetchingGroupings, entities: groupings } = useGroupings();
+
+    const isSelected = (id: string) => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => props.groupingsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetchGroupings(props.groupingsFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingGroupings,
+      groupings,
+      isSelected
+    };
+  }
+});
+</script>

package/components/lists/groups/FSBaseGroupsList.vue

@@ -1,7 +1,9 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
     :loading="fetchingGroups"
     :items="groups"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -16,14 +18,22 @@
         v-bind="slotData"
       />
     </template>
+    <template
+      #header.imageId-title
+    >
+      <FSIcon>
+        mdi-panorama-variant-outline
+      </FSIcon>
+    </template>
     <template
       #item.imageId="{ item }"
     >
       <FSImage
         v-if="item.imageId"
-        height="38px"
-        width="38px"
+        height="32px"
+        width="32px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -38,7 +48,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -46,6 +56,7 @@
       #item.tile="{ item, toggleSelect }"
     >
       <FSGroupTileUI
+        :selectable="$props.selectable"
         :modelValue="isSelected(item.id)"
         @update:modelValue="toggleSelect(item)"
         v-bind="item"
@@ -80,19 +91,25 @@ export default defineComponent({
     FSTagGroup
   },
   props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     groupsFilters: {
       type: Object as PropType<GroupFilters>,
       required: false,
       default: null
     },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     modelValue: {
       type: Array as PropType<string[]>,
       required: false,
       default: () => []
-    },
-    tableCode: {
-      type: String,
-      required: true
     }
   },
   emits: ["update:modelValue"],

package/components/lists/locations/FSBaseLocationsList.vue

@@ -1,9 +1,9 @@
 <template>
   <FSDataTable
-    mode="table"
+    defaultMode="iterator"
     :loading="fetchingLocations"
-    :disableIterator="true"
     :items="locations"
+    :selectable="$props.selectable"
     :tableCode="tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -25,53 +25,92 @@
         {{ item.icon }}
       </FSIcon>
     </template>
+
+    <template
+      #item.tile="{ item, toggleSelect }"
+    >
+      <FSLocationTileUI
+        v-bind="item"
+        :bottomColor="item.colors"
+        :address="item.address.placeLabel"
+        :selectable="$props.selectable"
+        :singleSelect="singleSelect"
+        :modelValue="isSelected(item.id)"
+        :to="$props.itemTo && $props.itemTo(item)"
+        @update:modelValue="toggleSelect(item)"
+      />
+    </template>
   </FSDataTable>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, watch } from "vue";
 import _ from "lodash";
+import type { RouteLocation } from "vue-router";
+import { defineComponent, type PropType, watch } from "vue";
 
 import { useLocations } from "@dative-gpi/foundation-core-services/composables";
-import type { LocationFilters } from "@dative-gpi/foundation-core-domain/models";
+import type { LocationFilters, LocationInfos } from "@dative-gpi/foundation-core-domain/models";
 
-import FSDataTable from "../FSDataTable.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
 
+import FSDataTable from "../FSDataTable.vue";
+import FSLocationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSLocationTileUI.vue";
+
 export default defineComponent({
-  name: "BaseLocationsList",
+  name: "FSBaseLocationsList",
   components: {
+    FSLocationTileUI,
     FSDataTable,
     FSIcon
   },
   props: {
-    locationFilters: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    locationsFilters: {
       type: Object as PropType<LocationFilters>,
       required: false,
       default: null
     },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    itemTo: {
+      type: Function as PropType<(item: LocationInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     modelValue: {
       type: Array as PropType<string[]>,
       default: () => [],
       required: false
-    },
-    tableCode: {
-      type: String,
-      required: true
     }
   },
   emits: ["update:modelValue"],
   setup(props) {
     const { getMany: fetchLocations, fetching: fetchingLocations, entities: locations } = useLocations();
 
-    watch(() => props.locationFilters, (next, previous) => {
+    watch(() => props.locationsFilters, (next, previous) => {
       if ((!next && !previous) || !_.isEqual(next, previous)) {
-        fetchLocations(props.locationFilters);
+        fetchLocations(props.locationsFilters);
       }
     }, { immediate: true });
 
+    const isSelected = (id: string) => {
+      return props.modelValue?.includes(id);
+    };
+
     return {
       fetchingLocations,
+      isSelected,
       locations
     };
   }

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"
@@ -16,6 +19,13 @@
         v-bind="slotData"
       />
     </template>
+    <template
+      #header.imageId-title
+    >
+      <FSIcon>
+        mdi-panorama-variant-outline
+      </FSIcon>
+    </template>
     <template
       #header.connectable-title
     >
@@ -31,6 +41,7 @@
         height="32px"
         width="32px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -48,27 +59,31 @@
       />
     </template>
     <template
-      #item.tile="{ item }"
+      #item.tile="{ item, toggleSelect }"
     >
       <FSModelTileUI
+        :to="$props.itemTo && $props.itemTo(item)"
+        :selectable="$props.selectable"
+        :singleSelect="$props.singleSelect"
         :imageId="item.imageId"
         :label="item.label"
-        :color="isSelected(item.id) ? ColorEnum.Primary : ColorEnum.Background"
-        @click="$emit('update:modelValue', [item.id])"
-        v-bind="$attrs"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        v-bind="item"
       />
     </template>
   </FSDataTable>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, watch } from "vue";
 import _ from "lodash";
+import type { RouteLocation } from "vue-router";
+import { defineComponent, type PropType, watch } from "vue";
 
 import {ColorEnum} from "@dative-gpi/foundation-shared-components/models";
 
 import { useModels } from "@dative-gpi/foundation-core-services/composables";
-import type { ModelFilters } from "@dative-gpi/foundation-core-domain/models";
+import type { ModelFilters, ModelInfos } from "@dative-gpi/foundation-core-domain/models";
 
 import FSDataTable from "../FSDataTable.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
@@ -86,19 +101,34 @@ export default defineComponent({
     FSIcon,
   },
   props: {
-    modelFilters: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelsFilters: {
       type: Object as PropType<ModelFilters>,
       required: false,
       default: null
     },
+    itemTo: {
+      type: Function as PropType<(item: ModelInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     modelValue: {
       type: Array as PropType<string[]>,
       default: () => [],
       required: false
-    },
-    tableCode: {
-      type: String,
-      required: true
     }
   },
   emits: ["update:modelValue"],
@@ -109,16 +139,16 @@ export default defineComponent({
       return props.modelValue.includes(id);
     };
 
-    watch(() => props.modelFilters, (next, previous) => {
+    watch(() => props.modelsFilters, (next, previous) => {
       if ((!next && !previous) || !_.isEqual(next, previous)) {
-        fetchModels(props.modelFilters);
+        fetchModels(props.modelsFilters);
       }
     }, { immediate: true });
 
     return {
       fetchingModels,
-      models,
       ColorEnum,
+      models,
       isSelected
     };
   }

package/components/lists/roleOrganisationTypes/FSBaseRoleOrganisationTypesList.vue

@@ -3,6 +3,7 @@
     :items="roleOrganisationTypes"
     :itemTo="$props.itemTo"
     :loading="fetchingRoleOrganisations"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -43,7 +44,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -76,24 +77,30 @@ export default defineComponent({
     FSDataTable,
   },
   props: {
-    roleOrganisationTypesFilters: {
-      type: Object as PropType<RoleOrganisationTypeFilters | null>,
+    tableCode: {
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    modelValue: {
-      type: Array as PropType<string[]>,
+    roleOrganisationTypesFilters: {
+      type: Object as PropType<RoleOrganisationTypeFilters | null>,
       required: false,
-      default: () => []
-    },
-    tableCode: {
-      type: String,
-      required: true
+      default: null
     },
     itemTo: {
       type: Function as PropType<(item: RoleOrganisationTypeInfos) => Partial<RouteLocation>>,
       required: false
     },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    }
   },
   emits: ["update:modelValue"],
   setup(props) {

package/components/lists/roleOrganisations/FSBaseRoleOrganisationsList.vue

@@ -1,9 +1,10 @@
 <template>
   <FSDataTable
-    :items="roleOrganisations"
-    :itemTo="$props.itemTo"
     :loading="fetchingRoleOrganisations"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
+    :items="roleOrganisations"
+    :itemTo="$props.itemTo"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -43,7 +44,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -51,49 +52,55 @@
 </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: {
-    roleOrganisationsFilters: {
-      type: Object as PropType<RoleOrganisationFilters | null>,
+    tableCode: {
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    modelValue: {
-      type: Array as PropType<string[]>,
+    roleOrganisationsFilters: {
+      type: Object as PropType<RoleOrganisationFilters | null>,
       required: false,
-      default: () => []
-    },
-    tableCode: {
-      type: String,
-      required: true
+      default: null
     },
     itemTo: {
       type: Function as PropType<(item: RoleOrganisationInfos) => Partial<RouteLocation>>,
       required: false
     },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    }
   },
   emits: ["update:modelValue"],
   setup(props) {