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

package/components/lists/subgroupings/FSBaseSubgroupingsList.vue

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

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

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

@@ -0,0 +1,81 @@
+<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/lists/userOrganisations/FSBaseUserOrganisationsList.vue

@@ -50,6 +50,13 @@
         :value="item.allowSms"
       />
     </template>
+    <template
+      #item.allowNotifications="{ item }"
+    >
+      <FSIconCheck
+        :value="item.allowNotifications"
+      />
+    </template>
     <template
       #item.tags="{ item }"
     >
@@ -77,6 +84,15 @@
         {{ userTypeLabel(item.userType) }}
       </FSSpan>
     </template>
+    <template
+      #item.lastActivity="{ item }"
+    >
+      <FSSpan
+        font="text-overline"
+      >
+        {{ epochToLongTimeFormat(item.lastActivity) }}
+      </FSSpan>
+    </template>
     <template
       #item.tile="{ index, item, toggleSelect }"
     >
@@ -97,6 +113,8 @@ import { defineComponent, type PropType, watch } from "vue";
 import { type RouteLocation } from "vue-router";
 import _ from "lodash";
 
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+
 import type { UserOrganisationFilters, UserOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
 import { userTypeLabel, userValidityLabel } from "@dative-gpi/foundation-core-components/utils";
 import { useUserOrganisations } from "@dative-gpi/foundation-core-services/composables";
@@ -149,6 +167,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props) {
     const { getMany: fetchUserOrganisations, entities: userOrganisations, fetching: fetchingUserOrganisations } = useUserOrganisations();
+    const { epochToLongTimeFormat } = useDateFormat();
 
     const isSelected = (id: string): boolean => {
       return props.modelValue.includes(id);
@@ -165,7 +184,8 @@ export default defineComponent({
       userOrganisations,
       userValidityLabel,
       userTypeLabel,
-      isSelected
+      isSelected,
+      epochToLongTimeFormat,
     };
   }
 });

package/components/lists/userOrganisations/{FSChipUserOrganisationsList.vue → FSUserOrganisationsChipGroup.vue}

@@ -12,7 +12,7 @@
   <FSChipGroup
     v-else
     :color="ColorEnum.Light"
-    :labels="userOrganisations?.map(u => u.name)"
+    :items="userOrganisations?.map(u => u.name)"
     v-bind="$attrs"
   />
 </template>
@@ -28,7 +28,7 @@ import FSLoader from "@dative-gpi/foundation-shared-components/components/FSLoad
 import FSChipGroup from "@dative-gpi/foundation-shared-components/components/FSChipGroup.vue";
   
 export default defineComponent({
-  name: "FSChipUserOrganisationsList",
+  name: "FSUserOrganisationsChipGroup",
   components: {
     FSChipGroup,
     FSLoader,

package/components/tiles/FSGroupingTile.vue

@@ -0,0 +1,67 @@
+<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/FSLocationTile.vue

@@ -11,7 +11,7 @@
     :label="entity.label"
     :code="entity.code"
     :color="entity.color"
-    :address="entity.address.placeLabel"
+    :address="entity.address.formattedAddress"
     :deviceCount="entity.deviceOrganisationsCount"
     :selectable="$props.selectable"
     :modelValue="modelValue"
@@ -51,6 +51,7 @@ export default defineComponent({
     }
   },
   emits: ['update:modelValue'],
+  inheritAttrs: false,
   setup(props) {
     const { get, getting, entity } = useLocation();
 

package/components/tiles/FSPlaylistTile.vue

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

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