@dative-gpi/foundation-core-components 1.1.23 → 1.1.24-unit-formatter

package/components/explorers/FSBaseDashboardsExplorer.vue

@@ -1,312 +0,0 @@
-<template>
-  <FSDataTable
-    defaultMode="iterator"
-    :loading="fetchingDashboardExplorerElements"
-    :singleSelect="$props.singleSelect"
-    :items="dashboardExplorerElements"
-    :selectable="$props.selectable"
-    :tableCode="$props.tableCode"
-    :itemTo="$props.itemTo"
-    :noSearch="$props.recursiveSearch"
-    :headersOptions="headersOptions"
-    :modelValue="$props.modelValue"
-    @update:modelValue="onUpdate"
-    v-model:search="search"
-    v-bind="$attrs"
-  >
-    <template
-      v-for="(_, name) in $slots"
-      v-slot:[name]="slotData"
-    >
-      <slot
-        :name="name"
-        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="32px"
-        width="32px"
-        :imageId="item.imageId"
-        :thumbnail="true"
-      />
-    </template>
-    <template
-      #item.tags="{ item }"
-    >
-      <FSTagGroup
-        variant="slide"
-        :showRemove="false"
-        :tags="item.tags"
-      />
-    </template>
-    <template
-      #item.type="{ item }"
-    >
-      <FSDashboardExplorerElementTypeChip
-        :type="item.type"
-      />
-    </template>
-    <template
-      #item.icon="{ item }"
-    >
-      <FSIcon>
-        {{ item.icon }}
-      </FSIcon>
-    </template>
-    <template
-      #item.locked="{ item }"
-    >
-      <FSIconCheck
-        v-if="item.locked != null"
-        :value="item.locked"
-      />
-    </template>
-    <template
-      #item.tile="{ index, item, toggleSelect }"
-    >
-      <FSFolderTileUI
-        v-if="item.type === DashboardExplorerElementType.Folder"
-        :key="index"
-        :to="$props.itemTo && $props.itemTo(item)"
-        :imageId="item.imageId"
-        :icon="item.icon"
-        :label="item.label"
-        :code="item.code"
-        :bottomColor="item.colors"
-        :recursiveFoldersIds="item.recursiveFoldersIds"
-        :recursiveDashboardOrganisationsIds="item.recursiveDashboardOrganisationsIds"
-        :recursiveDashboardShallowsIds="item.recursiveDashboardShallowsIds"
-        :modelValue="isSelected(item.id)"
-        :selectable="$props.selectable"
-        @update:modelValue="toggleSelect(item)"
-      />
-      <FSDashboardOrganisationTileUI
-        v-if="item.type === DashboardExplorerElementType.DashboardOrganisation"
-        :key="index"
-        :to="$props.itemTo && $props.itemTo(item)"
-        :bottomColor="item.colors"
-        :imageId="item.imageId"
-        :icon="item.icon"
-        :label="item.label"
-        :code="item.code"
-        :modelValue="isSelected(item.id)"
-        :selectable="$props.selectable"
-        @update:modelValue="toggleSelect(item)"
-      />
-      <FSDashboardShallowTileUI
-        v-if="item.type === DashboardExplorerElementType.DashboardShallow"
-        :key="index"
-        :to="$props.itemTo && $props.itemTo(item)"
-        :bottomColor="item.colors"
-        :imageId="item.imageId"
-        :icon="item.icon"
-        :label="item.label"
-        :code="item.code"
-        :modelValue="isSelected(item.id)"
-        :selectable="$props.selectable"
-        @update:modelValue="toggleSelect(item)"
-      />
-      <FSDashboardOrganisationTypeTileUI
-        v-if="item.type === DashboardExplorerElementType.DashboardOrganisationType"
-        :key="index"
-        :to="$props.itemTo && $props.itemTo(item)"
-        :bottomColor="item.colors"
-        :imageId="item.imageId"
-        :icon="item.icon"
-        :label="item.label"
-        :code="item.code"
-        :modelValue="isSelected(item.id)"
-        :selectable="$props.selectable"
-        @update:modelValue="toggleSelect(item)"
-      />
-    </template>
-  </FSDataTable>
-</template>
-  
-<script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
-import { type RouteLocation } from "vue-router";
-import _ from "lodash";
-  
-import { DashboardExplorerElementType } from "@dative-gpi/foundation-shared-domain/enums";
-import { useDashboardExplorerElements } from "@dative-gpi/foundation-core-services/composables";
-import { type DashboardExplorerElementInfos, type DashboardExplorerElementFilters } from "@dative-gpi/foundation-core-domain/models";
-import { dashboardExplorerElementTypeLabel } from "@dative-gpi/foundation-core-components/utils";
-import { useDebounce } from "@dative-gpi/foundation-shared-components/composables";
-
-import FSDashboardOrganisationTypeTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTypeTileUI.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";
-import FSFolderTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSFolderTileUI.vue";
-import FSIconCheck from "@dative-gpi/foundation-shared-components/components/FSIconCheck.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 FSDashboardExplorerElementTypeChip from "./FSDashboardExplorerElementTypeChip.vue";
-import FSDataTable from "../lists/FSDataTable.vue";
-
-export default defineComponent({
-  name: "FSBaseDashboardsExplorer",
-  components: {
-    FSDashboardExplorerElementTypeChip,
-    FSDashboardOrganisationTypeTileUI,
-    FSDashboardOrganisationTileUI,
-    FSDashboardShallowTileUI,
-    FSFolderTileUI,
-    FSDataTable,
-    FSIconCheck,
-    FSTagGroup,
-    FSImage,
-    FSIcon
-  },
-  props: {
-    tableCode: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    recursiveSearch: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    parentId: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    root: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    allowedTypes: {
-      type: Array as PropType<DashboardExplorerElementType[]>,
-      required: false,
-      default: () => [
-        DashboardExplorerElementType.Folder,
-        DashboardExplorerElementType.DashboardOrganisation,
-        DashboardExplorerElementType.DashboardShallow,
-        DashboardExplorerElementType.DashboardOrganisationType
-      ]
-    },
-    itemTo: {
-      type: Function as PropType<(item: DashboardExplorerElementInfos) => 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
-    },
-    dashboardExplorerElementsFilters: {
-      type: Object as PropType<DashboardExplorerElementFilters>,
-      required: false,
-      default: () => ({})
-    }
-  },
-  inheritAttrs: false,
-  emits: ["update:modelValue", "update:types"],
-  setup(props, { emit }) {
-    const { entities, fetching: fetchingDashboardExplorerElements, getMany: getManyDashboardExplorerElements } = useDashboardExplorerElements();
-    const { debounce } = useDebounce();
-
-    const search = ref("");
-
-    const dashboardExplorerElements = computed((): DashboardExplorerElementInfos[] => {
-      return entities.value
-        .filter(e => props.allowedTypes.includes(e.type))
-        .sort((a, b) => a.type - b.type);
-    });
-
-    const headersOptions = computed(() => ({
-      type: {
-        fixedFilters: props.allowedTypes.map(t => ({
-          value: t,
-          text: dashboardExplorerElementTypeLabel(t)
-        })),
-        methodFilter: (value: DashboardExplorerElementType, type: DashboardExplorerElementType) => {
-          return value === type;
-        }
-      }
-    }));
-
-    const isSelected = (id: string): boolean => {
-      return props.modelValue.includes(id);
-    };
-
-    const onUpdate = (value: string[]): void => {
-      const types = value.map(id => entities.value.find(dee => dee.id === id)?.type);
-      emit("update:types", types);
-
-      emit("update:modelValue", value);
-    }
-
-    const fetch = () => {
-      if (props.recursiveSearch && search.value) {
-        getManyDashboardExplorerElements({
-          ancestorId: props.parentId,
-          search: search.value,
-          types: props.allowedTypes,
-          ...props.dashboardExplorerElementsFilters
-        });
-      }
-      else {
-        getManyDashboardExplorerElements({
-          parentId: props.parentId,
-          root: props.root,
-          types: props.allowedTypes,
-          ...props.dashboardExplorerElementsFilters
-        });
-      }
-    }
-
-    // Delay to wait before fetching after a search change
-    const debounceFetch = (): void => debounce(fetch, 1000);
-
-    watch([() => props.parentId, () => props.root, () => props.allowedTypes, () => props.dashboardExplorerElementsFilters], (next, previous) => {
-      if ((!next && !previous) || !_.isEqual(next, previous)) {
-        fetch();
-      }
-    }, { immediate: true });
-
-    watch(search, (next, previous) => {
-      if (props.recursiveSearch && next !== previous) {
-        debounceFetch();
-      }
-    });
-
-    return {
-      fetchingDashboardExplorerElements,
-      DashboardExplorerElementType,
-      dashboardExplorerElements,
-      headersOptions,
-      search,
-      isSelected,
-      onUpdate
-    };
-  }
-});
-</script>

package/components/explorers/FSDashboardExplorerElementTypeChip.vue

@@ -1,37 +0,0 @@
-<template>
-  <FSChip
-    :label="chipLabel"
-    :color="ColorEnum.Light"
-  />
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
-
-import type { DashboardExplorerElementType } from "@dative-gpi/foundation-shared-domain/enums";
-import { dashboardExplorerElementTypeLabel } from "@dative-gpi/foundation-core-components/utils";
-
-import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-
-export default defineComponent({
-  name: "FSDashboardExplorerElementTypeChip",
-  components: {
-    FSChip
-  },
-  props: {
-    type: {
-      type: Number as PropType<DashboardExplorerElementType>,
-      required: true
-    }
-  },
-  setup(props) {
-    const chipLabel = computed(() => dashboardExplorerElementTypeLabel(props.type));
-
-    return {
-      chipLabel,
-      ColorEnum
-    };
-  }
-});
-</script>

package/components/lists/groupings/FSSimpleGroupingsList.vue

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

package/components/lists/groupings/FSTileGroupingsList.vue

@@ -1,79 +0,0 @@
-<template>
-  <FSTileList
-    :items="groupings"
-    :loading="fetching"
-    :selectable="$props.selectable"
-    :modelValue="$props.modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-    v-bind="$attrs"
-  >
-    <template
-      #item.tile="{ item, toggleSelect, direction }"
-    >
-      <FSGroupingTileUI
-        :icon="item.icon"
-        :iconColor="item.color"
-        :label="item.label"
-        :code="item.code"
-        :subgroupingCount="item.subgroupingCount"
-        :width="direction === ListDirections.Column ? 'fill' : undefined"
-        :selectable="$props.selectable"
-        :modelValue="($props.modelValue ?? []).includes(item.id)"
-        @update:modelValue="toggleSelect(item)"
-      />
-    </template>
-  </FSTileList>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType, watch } from "vue";
-
-import type { GroupingFilters } from "@dative-gpi/foundation-core-domain/models";
-import { useGroupings } from "@dative-gpi/foundation-core-services/composables";
-
-import FSGroupingTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSGroupingTileUI.vue";
-import FSTileList from "@dative-gpi/foundation-shared-components/components/lists/FSTileList.vue";
-
-import { ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
-
-export default defineComponent({
-  name: "FSTileGroupingsList",
-  components: {
-    FSTileList,
-    FSGroupingTileUI
-  },
-  props: {
-    groupingFilters: {
-      type: Object as PropType<GroupingFilters>,
-      required: false,
-      default: () => ({})
-    },
-    modelValue: {
-      type: Array as PropType<string[]>,
-      required: false,
-      default: () => []
-    },
-    selectable: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  emits: ["update:modelValue"],
-  setup(props) {
-    const { entities: groupings, getMany, fetching } = useGroupings();
-
-    const fetch = () => {
-      getMany(props.groupingFilters);
-    };
-
-    watch(() => props.groupingFilters, fetch, { immediate: true });
-
-    return {
-      groupings,
-      fetching,
-      ListDirections
-    };
-  }
-});
-</script>

package/components/lists/playlists/FSTilePlaylistsList.vue

@@ -1,93 +0,0 @@
-<template>
-  <FSTileList
-    :items="playlists"
-    :loading="fetching"
-    :selectable="$props.selectable"
-    :singleSelect="$props.singleSelect"
-    :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.tile="{ item, toggleSelect, direction }"
-    >
-      <FSPlaylistTileUI
-        :dashboardsCount="item.dashboards.length"
-        :selectable="$props.selectable"
-        :singleSelect="$props.singleSelect"
-        :modelValue="($props.modelValue ?? []).includes(item.id)"
-        :width="direction === ListDirections.Column ? 'fill' : undefined"
-        @update:modelValue="toggleSelect(item)"
-        v-bind="item"
-      />
-    </template>
-  </FSTileList>
-</template>
-
-<script lang="ts">
-import type { PropType} from "vue";
-import { defineComponent, watch } from "vue";
-
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
-
-import type { PlaylistFilters } from "@dative-gpi/foundation-core-domain/models";
-import { usePlaylists } from "@dative-gpi/foundation-core-services/composables";
-
-import FSPlaylistTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSPlaylistTileUI.vue";
-import FSTileList from "@dative-gpi/foundation-shared-components/components/lists/FSTileList.vue";
-
-
-export default defineComponent({
-  title: "FSTilePlaylistsList",
-  components: {
-    FSPlaylistTileUI,
-    FSTileList
-  },
-  props: {
-    playlistFilters: {
-      type: Object as PropType<PlaylistFilters>,
-      required: true
-    },
-    modelValue: {
-      type: Array as PropType<string[]>,
-      required: false,
-      default: () => []
-    },
-    selectable: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    singleSelect: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-  },
-  setup(props) {
-    const { entities: playlists, getMany, fetching } = usePlaylists();
-
-    const fetch = () => {
-      getMany(props.playlistFilters);
-    };
-
-    watch(() => props.playlistFilters, fetch, { immediate: true });
-    return {
-      ListDirections,
-      playlists,
-      ColorEnum,
-      fetching
-    };
-  }
-});
-</script>