@dative-gpi/foundation-core-components 1.0.45 → 1.0.47

package/components/lists/folders/FSBaseFoldersList.vue

@@ -0,0 +1,241 @@
+<template>
+  <FSLoadDataTable
+    v-if="fetchingFolders || fetchingDashboardOrganisations || fetchingDashboardShallows"
+  />
+  <FSDataTable
+    v-else
+    :items="items"
+    :item-to="$props.itemTo"
+    :tableCode="$props.tableCode"
+    :modelValue="selecteds"
+    @update:modelValue="onSelect"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+
+    <template
+      #item.main="{ item }"
+    >
+      <FSIcon
+        v-if="item.id === mainOrganisationDashboardId"
+      >
+        mdi-account-group-outline
+      </FSIcon>
+      <FSIcon
+        v-if="item.id === mainUserDashboardId"
+      >
+        mdi-home
+      </FSIcon>
+    </template>
+
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+
+    <template
+      #item.tile="{ item, toggleSelect }"
+    >
+      <FSFolderTileUI
+        v-if="item.type == FoldersListType.Folder"
+        :bottomColor="item.colors"
+        v-bind="item"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        :to="$props.itemTo && $props.itemTo(item)"
+      />
+      <FSDashboardOrganisationTileUI
+        v-if="item.type == FoldersListType.Dashboard && item.dashboardType == DashboardType.Organisation"
+        :bottomColor="item.colors"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        :to="$props.itemTo && $props.itemTo(item)"
+        v-bind="item"
+      />
+      <FSDashboardShallowTileUI
+        v-if="item.type == FoldersListType.Dashboard && item.dashboardType == DashboardType.Shallow"
+        :bottomColor="item.colors"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        :to="$props.itemTo && $props.itemTo(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, ref, watch } from "vue";
+import _ from "lodash";
+
+import { useOrganisation } from "@dative-gpi/foundation-shared-services/composables";
+import { useDashboardOrganisations, useFolders, useDashboardShallows, useAppOrganisationId, useCurrentUserOrganisation } from "@dative-gpi/foundation-core-services/composables";
+
+import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
+import { FoldersListType, type FoldersListItem } from "@dative-gpi/foundation-core-components/utils";
+import type { FolderFilters, DashboardOrganisationFilters, DashboardShallowFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSLoadDataTable from "@dative-gpi/foundation-shared-components/components/lists/FSLoadDataTable.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSFolderTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSFolderTileUI.vue";
+import FSDashboardOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTileUI.vue";
+import FSDashboardShallowTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardShallowTileUI.vue";
+
+
+export default defineComponent({
+  name: "FSBaseFoldersList",
+  components: {
+    FSDataTable,
+    FSLoadDataTable,
+    FSIcon,
+    FSFolderTileUI,
+    FSDashboardOrganisationTileUI,
+    FSDashboardShallowTileUI
+  },
+  props: {
+    foldersFilters: {
+      type: Object as PropType<FolderFilters>,
+      default: undefined,
+      required: false
+    },
+    dashboardOrganisationsFilters: {
+      type: Object as PropType<DashboardOrganisationFilters>,
+      default: undefined,
+      required: false
+    },
+    dashboardShallowsFilters: {
+      type: Object as PropType<DashboardShallowFilters>,
+      default: undefined,
+      required: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    itemTo: {
+      type: Function as PropType<(item: DashboardInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    tableCode: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["update:modelValue", "update:type", "update:dashboard-type"],
+  setup(props, { emit }) {
+
+    const { fetch: fetchUserOrganisation, entity: userOrganisation } = useCurrentUserOrganisation();
+    const { entity: organisation, get: getOrganisation } = useOrganisation();
+    const { organisationId } = useAppOrganisationId();
+
+    const { entities: dashboardOrganisations, fetching: fetchingDashboardOrganisations, getMany: getManyDashboardOrganisations } = useDashboardOrganisations();
+    const { entities: dashboardShallows, fetching: fetchingDashboardShallows, getMany: getManyDashboardShallows } = useDashboardShallows();
+    const { entities: folders, fetching: fetchingFolders, getMany: getManyFolders } = useFolders();
+
+    const selecteds = ref<string[]>([]);
+
+    const mainUserDashboardId = computed(() => {
+      return userOrganisation.value?.mainDashboardId;
+    });
+
+    const mainOrganisationDashboardId = computed(() => {
+      return organisation.value?.mainDashboardId;
+    });
+
+    const items = computed((): FoldersListItem[] => {
+      return [
+        ...folders.value.map(g => ({
+          ...g,
+          type: FoldersListType.Folder,
+          dashboardType: DashboardType.None
+        })) as FoldersListItem[],
+        ..._.sortBy([
+          ...dashboardOrganisations.value.map(d => ({
+            ...d,
+            type: FoldersListType.Dashboard,
+            dashboardType: DashboardType.Organisation
+          })) as FoldersListItem[],
+          ...dashboardShallows.value.map(d => ({
+            ...d,
+            type: FoldersListType.Dashboard,
+            dashboardType: DashboardType.Shallow
+          })) as FoldersListItem[]
+        ], d => d.label)
+      ]
+    })
+
+    const onSelect = (values: string[]) => {
+      selecteds.value = values;
+      const selectedItems = items.value.filter(i => selecteds.value!.includes(i.id));
+      emit("update:dashboard-type", selectedItems.map(i => i.dashboardType));
+      emit("update:modelValue", selectedItems.map(i => i.id));
+      emit("update:type", selectedItems.map(i => i.type));
+    };
+
+    const isSelected = (id: string) => {
+      return selecteds.value?.includes(id);
+    };
+
+    onMounted(() => {
+      fetchUserOrganisation();
+    })
+
+    watch(() => organisationId.value, () => {
+      if (organisationId.value) {
+        getOrganisation(organisationId.value);
+      }
+    }, { immediate: true });
+
+    watch(() => props.foldersFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyFolders(props.foldersFilters, f => f.parentId == props.foldersFilters?.parentId);
+      }
+    }, { immediate: true });
+
+    watch(() => props.dashboardOrganisationsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyDashboardOrganisations(props.dashboardOrganisationsFilters, f => f.folderId == props.foldersFilters?.parentId);
+      }
+    }, { immediate: true });
+
+    watch(() => props.dashboardShallowsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyDashboardShallows(props.dashboardShallowsFilters, f => f.folderId == props.foldersFilters?.parentId);
+      }
+    }, { immediate: true });
+
+    watch(() => props.modelValue, (next) => {
+      selecteds.value = next;
+    }, { immediate: true });
+
+    return {
+      fetchingDashboardOrganisations,
+      fetchingDashboardShallows,
+      fetchingFolders,
+      mainOrganisationDashboardId,
+      mainUserDashboardId,
+      selecteds,
+      items,
+      onSelect,
+      isSelected,
+      FoldersListType,
+      DashboardType
+    };
+  }
+});
+</script>

package/components/lists/folders/FSSimpleFoldersList.vue

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

package/components/lists/groups/FSBaseGroupsList.vue

@@ -0,0 +1,119 @@
+<template>
+  <FSDataTable
+    :loading="fetchingGroups"
+    :items="groups"
+    :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.imageId="{ item }"
+    >
+      <FSImage
+        v-if="item.imageId"
+        height="38px"
+        width="38px"
+        :imageId="item.imageId"
+      />
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :editable="false"
+        :tags="item.tags"
+      />
+    </template>
+    <template
+      #item.tile="{ item, toggleSelect }"
+    >
+      <FSGroupTileUI
+        :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 { GroupFilters } from "@dative-gpi/foundation-core-domain/models";
+import { useGroups } 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 FSGroupTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSGroupTileUI.vue";
+
+
+export default defineComponent({
+  name: "FSBaseGroupsList",
+  components: {
+    FSDataTable,
+    FSImage,
+    FSIcon,
+    FSGroupTileUI,
+    FSTagGroup
+  },
+  props: {
+    groupsFilters: {
+      type: Object as PropType<GroupFilters>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    tableCode: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: fetchGroups, fetching: fetchingGroups, entities: groups } = useGroups();
+
+    const isSelected = (id: string) => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => props.groupsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetchGroups(props.groupsFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingGroups,
+      groups,
+      isSelected
+    };
+  }
+});
+</script>

package/components/lists/groups/FSSimpleGroupsList.vue

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

package/components/lists/locations/FSBaseLocationsList.vue

@@ -0,0 +1,79 @@
+<template>
+  <FSDataTable
+    mode="table"
+    :loading="fetchingLocations"
+    :disableIterator="true"
+    :items="locations"
+    :tableCode="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>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, watch } from "vue";
+import _ from "lodash";
+
+import { useLocations } from "@dative-gpi/foundation-core-services/composables";
+import type { LocationFilters } from "@dative-gpi/foundation-core-domain/models";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+
+export default defineComponent({
+  name: "BaseLocationsList",
+  components: {
+    FSDataTable,
+    FSIcon
+  },
+  props: {
+    locationFilters: {
+      type: Object as PropType<LocationFilters>,
+      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: fetchLocations, fetching: fetchingLocations, entities: locations } = useLocations();
+
+    watch(() => props.locationFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetchLocations(props.locationFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingLocations,
+      locations
+    };
+  }
+});
+</script>

package/components/lists/locations/FSSimpleLocationsList.vue

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

package/components/lists/models/FSSimpleModelsList.vue

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