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

package/components/lists/subgroupings/FSBaseSubgroupingsList.vue

@@ -1,197 +0,0 @@
-<template>
-  <FSDataTable
-    :loading="fetchingSubgroupings"
-    :items="subgroupings"
-    :itemTo="$props.itemTo"
-    :tableCode="$props.tableCode"
-    :selectable="$props.selectable"
-    :showSearch="$props.showSearch"
-    :singleSelect="$props.singleSelect"
-    :groupBy="groupBy"
-    :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
-      #group-header="{ item }"
-    >
-      <FSRow
-        height="54px"
-        align="center-left"
-      >
-        <FSCard
-          padding="16px 16px 16px 56px"
-          height="100%"
-          width="100%"
-          :borderRadius="0"
-          :variant="CardVariants.Full"
-          :color="getColors(ColorEnum.Light).base"
-        >
-          <FSGroupingChip
-            :label="getGroupingLabel(item.value)"
-            :iconColor="getGroupingColor(item.value)"
-            :icon="getGroupingIcon(item.value)"
-          />
-        </FSCard>
-      </FSRow>
-    </template>
-    <template
-      #item.icon="{ item }"
-    >
-      <FSIcon>
-        {{ item.icon }}
-      </FSIcon>
-    </template>
-    <template
-      #item.tile="{ item, toggleSelect }"
-    >
-      <FSSubgroupingTileUI
-        :selectable="$props.selectable"
-        :modelValue="isSelected(item.id)"
-        :singleSelect="$props.singleSelect"
-        :deviceOrganisationsCount="item.deviceOrganisationsCount"
-        :groupingLabel="item.groupingLabel"
-        :groupingIcon="item.groupingIcon"
-        :groupingColor="item.groupingColor"
-        :label="item.label"
-        :icon="item.icon"
-        :to="$props.itemTo && $props.itemTo(item)"
-        @update:modelValue="toggleSelect(item)"
-      />
-    </template>
-  </FSDataTable>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType, watch } from "vue";
-import { type RouteLocation } from "vue-router";
-import _ from "lodash";
-
-import type { SubgroupingFilters, SubgroupingInfos } from "@dative-gpi/foundation-core-domain/models";
-import { useSubgroupings } from "@dative-gpi/foundation-core-services/composables";
-
-import FSDataTable from "../FSDataTable.vue";
-
-import FSSubgroupingTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSSubgroupingTileUI.vue";
-import FSGroupingChip from "@dative-gpi/foundation-shared-components/components/FSGroupingChip.vue";
-import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
-import FSCard from "@dative-gpi/foundation-shared-components/components/FSCard.vue";
-import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
-
-import { ColorEnum, CardVariants } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-
-export default defineComponent({
-  name: "FSBaseSubgroupingsList",
-  components: {
-    FSSubgroupingTileUI,
-    FSGroupingChip,
-    FSDataTable,
-    FSIcon,
-    FSCard,
-    FSRow
-  },
-  props: {
-    tableCode: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    itemTo: {
-      type: Function as PropType<(item: SubgroupingInfos) => Partial<RouteLocation>>,
-      required: false
-    },
-    subgroupingFilters: {
-      type: Object as PropType<SubgroupingFilters>,
-      required: false,
-      default: null
-    },
-    selectable: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    singleSelect: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    showSearch: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    modelValue: {
-      type: Array as PropType<string[]>,
-      required: false,
-      default: () => []
-    }
-  },
-  inheritAttrs: false,
-  emits: ["update:modelValue"],
-  setup(props) {
-    const { getMany: fetchSubgroupings, fetching: fetchingSubgroupings, entities: subgroupings } = useSubgroupings();
-    const { getColors } = useColors();
-
-    const groupBy = computed(() => ({
-      key: "groupingId",
-      order: "asc" as const
-    }));
-
-    const groupingMap = computed(() => {
-      return _.chain(subgroupings.value)
-        .keyBy('groupingId')
-        .mapValues(s => ({
-          label: s.groupingLabel,
-          color: s.groupingColor,
-          icon: s.groupingIcon
-        }))
-        .value();
-    });
-
-    const getGroupingLabel = (groupingId: string): string => {
-      return groupingMap.value[groupingId].label;
-    };
-
-    const getGroupingColor = (groupingId: string): string => {
-      return groupingMap.value[groupingId].color;
-    };
-
-    const getGroupingIcon = (groupingId: string): string => {
-      return groupingMap.value[groupingId].icon;
-    };
-
-    const isSelected = (id: string) => {
-      return props.modelValue.includes(id);
-    };
-
-    watch(() => props.subgroupingFilters, (next, previous) => {
-      if ((!next && !previous) || !_.isEqual(next, previous)) {
-        fetchSubgroupings(props.subgroupingFilters);
-      }
-    }, { immediate: true });
-
-    return {
-      fetchingSubgroupings,
-      getGroupingLabel,
-      getGroupingColor,
-      getGroupingIcon,
-      subgroupings,
-      CardVariants,
-      isSelected,
-      getColors,
-      ColorEnum,
-      groupBy,
-    };
-  }
-});
-</script>

package/components/lists/subgroupings/FSSimpleSubgroupingsList.vue

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

package/components/lists/subgroupings/FSSubgroupingsChipGroup.vue

@@ -1,61 +0,0 @@
-<template>
-  <FSChipGroup
-    v-if="$props.subgroupings && $props.subgroupings.length > 0"
-    :items="$props.subgroupings"
-    :maxItems="$props.maxItems"
-    :variant="$props.variant"
-  >
-    <template
-      #item.chip="{ item }"
-    >
-      <FSSubgroupingChip
-        :groupingLabel="item.groupingLabel"
-        :groupingIcon="item.groupingIcon"
-        :groupingColor="item.groupingColor"
-        :label="item.label"
-        :icon="item.icon"
-        :to="$props.itemTo ? $props.itemTo(item) : null"
-      />
-    </template>
-  </FSChipGroup>
-</template>
-
-<script lang="ts">
-import type { PropType} from "vue";
-import { defineComponent } from "vue";
-import { type RouteLocation } from "vue-router";
-
-import type { SubgroupingInfos } from "@dative-gpi/foundation-core-domain/models";
-
-import FSSubgroupingChip from "@dative-gpi/foundation-shared-components/components/FSSubgroupingChip.vue";
-import FSChipGroup from "@dative-gpi/foundation-shared-components/components/FSChipGroup.vue";
-import { ChipGroupVariants, type ChipGroupVariant } from "@dative-gpi/foundation-shared-components/models";
-
-export default defineComponent({
-  name: "FSSubgroupingsChipGroup",
-  components: {
-    FSSubgroupingChip,
-    FSChipGroup
-  },
-  props: {
-    subgroupings: {
-      type: Array as PropType<SubgroupingInfos[]>,
-      required: true
-    },
-    itemTo: {
-      type: Function as PropType<(item: SubgroupingInfos) => Partial<RouteLocation>>,
-      required: false
-    },
-    maxItems: {
-      type: Number as PropType<number | null>,
-      required: false,
-      default: 1
-    },
-    variant: {
-      type: String as PropType<ChipGroupVariant>,
-      required: false,
-      default: ChipGroupVariants.Menu
-    },
-  }
-});
-</script>

package/components/lists/subgroupings/FSTileSubgroupingsList.vue

@@ -1,81 +0,0 @@
-<template>
-  <FSTileList
-    :items="subgroupings"
-    :loading="fetching"
-    :selectable="$props.selectable"
-    :modelValue="$props.modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-    v-bind="$attrs"
-  >
-    <template
-      #item.tile="{ item, toggleSelect, direction }"
-    >
-      <FSSubgroupingTileUI
-        :icon="item.icon"
-        :label="item.label"
-        :code="item.code"
-        :groupingLabel="item.groupingLabel"
-        :groupingIcon="item.groupingIcon"
-        :groupingColor="item.groupingColor"
-        :deviceOrganisationsCount="item.deviceOrganisationsCount"
-        :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 { SubgroupingFilters } from "@dative-gpi/foundation-core-domain/models";
-import { useSubgroupings } from "@dative-gpi/foundation-core-services/composables";
-
-import FSSubgroupingTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSSubgroupingTileUI.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: "FSTileSubgroupingsList",
-  components: {
-    FSTileList,
-    FSSubgroupingTileUI
-  },
-  props: {
-    subgroupingFilters: {
-      type: Object as PropType<SubgroupingFilters>,
-      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: subgroupings, getMany, fetching } = useSubgroupings();
-
-    const fetch = () => {
-      getMany(props.subgroupingFilters);
-    };
-
-    watch(() => props.subgroupingFilters, fetch, { immediate: true });
-
-    return {
-      subgroupings,
-      fetching,
-      ListDirections
-    };
-  }
-});
-</script>

package/components/tiles/FSGroupingTile.vue

@@ -1,67 +0,0 @@
-<template>
-  <FSLoadTile
-    v-if="getting"
-    :selectable="$props.selectable"
-    :modelValue="$props.modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-  />
-  <FSGroupingTileUI
-    v-else-if="entity"
-    :icon="entity.icon"
-    :iconColor="entity.color"
-    :label="entity.label"
-    :code="entity.code"
-    :subgroupingCount="entity.subgroupingCount"
-    :selectable="$props.selectable"
-    :modelValue="$props.modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-    v-bind="$attrs"
-  />
-</template>
-
-<script lang="ts">
-import { defineComponent, watch } from "vue";
-
-import { useGrouping } from "@dative-gpi/foundation-core-services/composables";
-
-import FSGroupingTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSGroupingTileUI.vue";
-import FSLoadTile from "@dative-gpi/foundation-shared-components/components/tiles/FSLoadTile.vue";
-
-export default defineComponent({
-  name: "FSGroupingTile",
-  components: {
-    FSGroupingTileUI,
-    FSLoadTile
-  },
-  props: {
-    groupingId: {
-      type: String,
-      required: true
-    },
-    modelValue: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    selectable: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  emits: ["update:modelValue"],
-  inheritAttrs: false,
-  setup(props) {
-    const { get, getting, entity } = useGrouping();
-
-    watch(() => props.groupingId, () => {
-      get(props.groupingId);
-    }, { immediate: true });
-
-    return {
-      getting,
-      entity
-    };
-  }
-});
-</script>

package/components/tiles/FSPlaylistTile.vue

@@ -1,78 +0,0 @@
-<template>
-  <FSLoadTile
-    v-if="getting"
-    :selectable="$props.selectable"
-    :modelValue="$props.modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-  />
-  <PlaylistTileUI
-    v-else-if="entity"
-    :dashboardsCount="entity.dashboards?.length ?? 0"
-    :looped="entity.looped"
-    :delay="entity.delay"
-    :label="entity.label"
-    :code="entity.code"
-    :selectable="$props.selectable"
-    :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>
-  </PlaylistTileUI>
-</template>
-
-<script lang="ts">
-import { defineComponent, watch } from "vue";
-
-import { usePlaylist } from "@dative-gpi/foundation-core-services/composables";
-
-import FSLoadTile from "@dative-gpi/foundation-shared-components/components/tiles/FSLoadTile.vue";
-
-import PlaylistTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSPlaylistTileUI.vue";
-
-
-export default defineComponent({
-  name: "FSPlaylistTile",
-  components: {
-    PlaylistTileUI,
-    FSLoadTile
-  },
-  props: {
-    playlistId: {
-      type: String,
-      required: true
-    },
-    modelValue: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    selectable: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props) {
-    const { get, getting, entity } = usePlaylist();
-
-    watch(() => props.playlistId, () => {
-      get(props.playlistId);
-    }, { immediate: true });
-
-    return {
-      getting,
-      entity
-    };
-  }
-});
-</script>

package/components/tiles/FSSubgroupingTile.vue

@@ -1,69 +0,0 @@
-<template>
-  <FSLoadTile
-    v-if="getting"
-    :selectable="$props.selectable"
-    :modelValue="$props.modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-  />
-  <FSSubgroupingTileUI
-    v-else-if="entity"
-    :icon="entity.icon"
-    :label="entity.label"
-    :code="entity.code"
-    :groupingLabel="entity.groupingLabel"
-    :groupingIcon="entity.groupingIcon"
-    :groupingColor="entity.groupingColor"
-    :deviceOrganisationsCount="entity.deviceOrganisationsCount"
-    :selectable="$props.selectable"
-    :modelValue="$props.modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-    v-bind="$attrs"
-  />
-</template>
-
-<script lang="ts">
-import { defineComponent, watch } from "vue";
-
-import { useSubgrouping } from "@dative-gpi/foundation-core-services/composables";
-
-import FSSubgroupingTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSSubgroupingTileUI.vue";
-import FSLoadTile from "@dative-gpi/foundation-shared-components/components/tiles/FSLoadTile.vue";
-
-export default defineComponent({
-  name: "FSSubgroupingTile",
-  components: {
-    FSSubgroupingTileUI,
-    FSLoadTile
-  },
-  props: {
-    subgroupingId: {
-      type: String,
-      required: true
-    },
-    modelValue: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    selectable: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  emits: ["update:modelValue"],
-  inheritAttrs: false,
-  setup(props) {
-    const { get, getting, entity } = useSubgrouping();
-
-    watch(() => props.subgroupingId, () => {
-      get(props.subgroupingId);
-    }, { immediate: true });
-
-    return {
-      getting,
-      entity
-    };
-  }
-});
-</script>