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

package/components/lists/dataCategories/FSBaseDataCategoriesList.vue

@@ -41,17 +41,18 @@
         <template
           #item.tile="{ index, item }"
         >
-          <FSClickable
+          <FSCard
             :key="index"
             padding="12px"
             height="60px"
             width="233px"
-            :color="isSelected(item.id) ? ColorEnum.Primary : ColorEnum.Dark"
+            :variant="isSelected(item.id) ? CardVariants.Standard : CardVariants.Background"
+            :color="ColorEnum.Primary"
             @click="$emit('update:modelValue', [item.id])"
             v-bind="$attrs"
           >
             <template
-              #default
+              #default="{ contentVariant }"
             >
               <FSRow
                 align="center-center"
@@ -66,11 +67,11 @@
                 <FSIcon
                   :color="item.correlated ? ColorEnum.Primary : ColorEnum.Light"
                   :icon="item.correlated ? 'mdi-link' : 'mdi-link-off'"
-                  variant="dark"
+                  :variant="contentVariant"
                 />
               </FSRow>
             </template>
-          </FSClickable>
+          </FSCard>
         </template>
       </FSDataTable>
     </FSFadeOut>
@@ -81,7 +82,7 @@
 import { defineComponent, type PropType, ref, watch } from "vue";
 import _ from "lodash";
 
-import {ColorEnum} from "@dative-gpi/foundation-shared-components/models";
+import {CardVariants, ColorEnum} from "@dative-gpi/foundation-shared-components/models";
 
 import { useDataCategories } from "@dative-gpi/foundation-core-services/composables";
 import type { DataCategoryFilters } from "@dative-gpi/foundation-core-domain/models";
@@ -89,10 +90,10 @@ import type { DataCategoryFilters } from "@dative-gpi/foundation-core-domain/mod
 import FSDataTable from "../FSDataTable.vue";
 import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
 import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSCard from "@dative-gpi/foundation-shared-components/components/FSCard.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
 import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
 import FSFadeOut from "@dative-gpi/foundation-shared-components/components/FSFadeOut.vue";
-import FSClickable from "@dative-gpi/foundation-shared-components/components/FSClickable.vue";
 import FSSearchField from "@dative-gpi/foundation-shared-components/components/fields/FSSearchField.vue";
 import FSButtonCheckbox from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonCheckbox.vue";
 
@@ -102,7 +103,7 @@ export default defineComponent({
     FSDataTable,
     FSCol,
     FSFadeOut,
-    FSClickable,
+    FSCard,
     FSRow,
     FSSpan,
     FSSearchField,
@@ -146,6 +147,7 @@ export default defineComponent({
     return {
       fetchingDataCategories,
       dataCategories,
+      CardVariants,
       ColorEnum,
       search,
       correlated,

package/components/lists/dataDefinitions/FSBaseDataDefinitionsList.vue

@@ -28,17 +28,18 @@
     <template
       #item.tile="{ index, item }"
     >
-      <FSClickable
+      <FSCard
         :key="index"
         padding="12px"
         height="60px"
         width="233px"
-        :color="isSelected(item.id) ? ColorEnum.Primary : ColorEnum.Light"
+        :color="ColorEnum.Primary"
+        :variant="isSelected(item.id) ? CardVariants.Standard : CardVariants.Background"
         @click="$emit('update:modelValue', [item.id])"
         v-bind="$attrs"
       >
         <template
-          #default
+          #default="{ contentVariant }"
         >
           <FSRow
             align="center-center"
@@ -54,11 +55,12 @@
             <v-spacer/>
             <FSIcon
               :color="ColorEnum.Primary"
+              :variant="contentVariant"
               icon="mdi-link"
             />
           </FSRow>
         </template>
-      </FSClickable>
+      </FSCard>
     </template>
   </FSDataTable>
 </template>
@@ -67,7 +69,7 @@
 import { defineComponent, type PropType, watch } from "vue";
 import _ from "lodash";
 
-import {ColorEnum} from "@dative-gpi/foundation-shared-components/models";
+import { CardVariants, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import { useDataDefinitions } from "@dative-gpi/foundation-core-services/composables";
 import type { DataDefinitionFilters } from "@dative-gpi/foundation-core-domain/models";
@@ -76,7 +78,7 @@ import FSDataTable from "../FSDataTable.vue";
 import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
-import FSClickable from "@dative-gpi/foundation-shared-components/components/FSClickable.vue";
+import FSCard from "@dative-gpi/foundation-shared-components/components/FSCard.vue";
 import FSButtonCheckbox from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonCheckbox.vue";
 
 export default defineComponent({
@@ -84,7 +86,7 @@ export default defineComponent({
   components: {
     FSButtonCheckbox,
     FSDataTable,
-    FSClickable,
+    FSCard,
     FSSpan,
     FSIcon,
     FSRow,
@@ -123,6 +125,7 @@ export default defineComponent({
     return {
       fetchingDataDefinitions,
       dataDefinitions,
+      CardVariants,
       ColorEnum,
       isSelected
     };

package/components/lists/deviceOrganisations/FSBaseDeviceOrganisationsList.vue

@@ -115,6 +115,29 @@
         {{ item.ownerAddress ? item.ownerAddress.formattedAddress : '' }}
       </FSSpan>
     </template>
+    <template
+      #item.subgroupings="{ item }"
+    >
+      <FSSubgroupingsChipGroup
+        :subgroupings="item.subgroupings"
+      />
+    </template>
+    <template
+      #filter.subgroupings-custom="{ filter, toggle, variant }"
+    >
+      <FSSubgroupingChip
+        v-if="filter.value && subgroupingMap[filter.value]"
+        width="100%"
+        :groupingLabel="subgroupingMap[filter.value].groupingLabel"
+        :groupingIcon="subgroupingMap[filter.value].groupingIcon"
+        :groupingColor="subgroupingMap[filter.value].groupingColor"
+        :label="subgroupingMap[filter.value].label"
+        :icon="subgroupingMap[filter.value].icon"
+        :color="'primary'"
+        :variant="variant"
+        @click="toggle()"
+      />
+    </template>
     <template
       #item.actions="{ item }"
     >
@@ -188,15 +211,19 @@ import FSDeviceOrganisationTileUI from "@dative-gpi/foundation-shared-components
 import FSStatusesCarousel from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSStatusesCarousel.vue";
 import FSConnectivity from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSConnectivity.vue";
 import FSWorstAlert from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSWorstAlert.vue";
+import FSSubgroupingChip from "@dative-gpi/foundation-shared-components/components/FSSubgroupingChip.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 FSSpan from '@dative-gpi/foundation-shared-components/components/FSSpan.vue';
+import FSSubgroupingsChipGroup from "../subgroupings/FSSubgroupingsChipGroup.vue";
 
 export default defineComponent({
   name: "FSBaseDeviceOrganisationsList",
   components: {
     FSDeviceOrganisationTileUI,
+    FSSubgroupingsChipGroup,
+    FSSubgroupingChip,
     FSStatusesCarousel,
     FSConnectivity,
     FSWorstAlert,
@@ -261,7 +288,33 @@ export default defineComponent({
       return entities.value;
     });
 
-    const headersOptions = computed(() => ({
+    const subgroupingFilters = computed(() => {
+      const filters: { value: string | null, text: string }[] = [{
+        value: null,
+        text: "—"
+      }];
+      
+      const uniqueSubgroupings = _.uniqBy(
+        entities.value.flatMap(device => device.subgroupings),
+        'id'
+      );
+      
+      filters.push(...uniqueSubgroupings.map(subgrouping => ({
+        value: subgrouping.id,
+        text: `${subgrouping.groupingLabel} - ${subgrouping.label}`
+      })));
+      
+      return filters.sort((a, b) => a.text.localeCompare(b.text));
+    });
+
+    const subgroupingMap = computed(() => {
+      return _.chain(entities.value)
+        .flatMap(device => device.subgroupings)
+        .keyBy('id')
+        .value();
+    });
+
+    const headersOptions = computed((): Record<string, any> => ({
       status: {
         fixedFilters: [{
           value: true,
@@ -339,6 +392,17 @@ export default defineComponent({
         },
         sort: (a: DeviceOrganisationAlert, b: DeviceOrganisationAlert) => alphanumericSort(a?.criticity, b?.criticity)
       },
+      subgroupings: {
+
+        fixedFilters: subgroupingFilters.value,
+        methodFilterRaw: (value: string | null, item: DeviceOrganisationInfos) => {
+          if (!value) {
+            return item.subgroupings.length === 0;
+          }
+          return item.subgroupings.some(s => s.id === value);
+        },
+        sort: (a: any[], b: any[]) => a.length - b.length
+      },
       ...customProperties.value.reduce((acc, cp) => ({
         ...acc,
         [`meta.${cp.code}`]: {
@@ -382,6 +446,7 @@ export default defineComponent({
       deviceOrganisations,
       ConnectivityStatus,
       customProperties,
+      subgroupingMap,
       headersOptions,
       isSelected
     };

package/components/lists/folders/FSBaseFoldersList.vue

@@ -58,8 +58,6 @@ import { defineComponent, type PropType, watch } from "vue";
 
 import { useFolders } from "@dative-gpi/foundation-core-services/composables";
 
-import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
-import { FoldersListType } from "@dative-gpi/foundation-core-components/utils";
 import type { FolderFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
 
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
@@ -119,9 +117,7 @@ export default defineComponent({
       fetchingFolders,
       folders,
       onSelect,
-      isSelected,
-      FoldersListType,
-      DashboardType
+      isSelected
     };
   }
 });

package/components/lists/groupings/FSBaseGroupingsList.vue

@@ -2,12 +2,10 @@
   <FSDataTable
     defaultMode="iterator"
     :loading="fetchingGroupings"
+    :singleSelect="$props.singleSelect"
+    :selectable="$props.selectable"
     :items="groupings"
     :itemTo="$props.itemTo"
-    :selectable="$props.selectable"
-    :showSearch="$props.showSearch"
-    :singleSelect="$props.singleSelect"
-    :disableTable="$props.disableTable"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -74,7 +72,7 @@ export default defineComponent({
       type: Function as PropType<(item: GroupingInfos) => Partial<RouteLocation>>,
       required: false
     },
-    groupingsFilters: {
+    groupingFilters: {
       type: Object as PropType<GroupingFilters>,
       required: false,
       default: null
@@ -94,16 +92,6 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    showSearch: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    disableTable: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
   },
   emits: ["update:modelValue"],
   setup(props) {
@@ -113,9 +101,9 @@ export default defineComponent({
       return props.modelValue.includes(id);
     };
 
-    watch(() => props.groupingsFilters, (next, previous) => {
+    watch(() => props.groupingFilters, (next, previous) => {
       if ((!next && !previous) || !_.isEqual(next, previous)) {
-        fetchGroupings(props.groupingsFilters);
+        fetchGroupings(props.groupingFilters);
       }
     }, { immediate: true });
 

package/components/lists/groupings/FSSimpleGroupingsList.vue

@@ -0,0 +1,44 @@
+<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

@@ -0,0 +1,79 @@
+<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/groups/FSSimpleGroupsList.vue

@@ -26,6 +26,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
+  innheritAttrs: false,
   setup(props){
     const { entities: groups, getMany, fetching } = useGroups();
 

package/components/lists/locations/FSBaseLocationsList.vue

@@ -31,14 +31,14 @@
     >
       <FSLocationTileUI
         :key="index"
+        v-bind="item"
         :bottomColor="item.colors"
-        :address="item.address.placeLabel"
         :selectable="$props.selectable"
-        :singleSelect="singleSelect"
+        :singleSelect="$props.singleSelect"
         :modelValue="isSelected(item.id)"
         :to="$props.itemTo && $props.itemTo(item)"
         @update:modelValue="toggleSelect(item)"
-        v-bind="item"
+        :address="item.address.formattedAddress"
       />
     </template>
   </FSDataTable>

package/components/lists/playlists/FSTilePlaylistsList.vue

@@ -0,0 +1,93 @@
+<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>