@dative-gpi/foundation-shared-components 1.0.69 → 1.0.71-groupings-2

package/components/tiles/FSGroupTileUI.vue

@@ -1,129 +1,51 @@
 <template>
-  <FSTile
+  <FSSimpleTileUI
     :activeColor="ColorEnum.Primary"
     :bottomColor="ColorEnum.Error"
-    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
+    :label="$props.label"
+    :code="$props.code"
+    :imageId="$props.imageId"
+    :icon="$props.icon"
     v-bind="$attrs"
   >
-    <FSCol
-      align="center-center"
-      width="fill"
+    <template
+      #append-info
     >
-      <FSRow
-        align="center-center"
-        gap="24px"
-        :height="imageSize"
-        :wrap="false"
+      <FSCol
+        gap="6px"
       >
-        <FSCol
-          gap="12px"
-          :width="infoWidth"
-        >
-          <FSCol
-            gap="6px"
-          >
-            <FSSpan
-              font="text-button"
-              :lineClamp="1"
-            >
-              {{ $props.label }}
-            </FSSpan>
-            <FSSpan
-              font="text-overline"
-              variant="soft"
-            >
-              {{ $props.code }}
-            </FSSpan>
-          </FSCol>
-          <FSCol
-            gap="6px"
-          >
-            <FSRow
-              align="center-left"
-            >
-              <FSColor
-                padding="0 8px"
-                height="24px"
-                :color="ColorEnum.Primary"
-                :border="false"
-              >
-                <FSRow
-                  align="center-center"
-                >
-                  <FSSpan
-                    font="text-overline"
-                  >
-                    {{ groupsLabel }}
-                  </FSSpan>
-                </FSRow>
-              </FSColor>
-              <FSSpan
-                font="text-overline"
-              >
-                {{ $tr("ui.group-tile.group(s)", "Group(s)") }}
-              </FSSpan>
-            </FSRow>
-            <FSRow
-              align="center-left"
-            >
-              <FSColor
-                padding="0 8px"
-                height="24px"
-                :color="ColorEnum.Success"
-                :border="false"
-              >
-                <FSRow
-                  align="center-center"
-                >
-                  <FSSpan
-                    font="text-overline"
-                  >
-                    {{ deviceOrganisationsLabel }}
-                  </FSSpan>
-                </FSRow>
-              </FSColor>
-              <FSSpan
-                font="text-overline"
-              >
-                {{ $tr("ui.group-tile.device(s)", "Device(s)") }}
-              </FSSpan>
-            </FSRow>
-          </FSCol>
-        </FSCol>
-        <FSImage
-          v-if="$props.imageId"
-          :imageId="$props.imageId"
-          :width="imageSize"
+        <FSEntityCountBadge
+          :label="$tr('ui.common.groups', 'Group(s)')"
+          :count="recursiveGroupsIds.length"
+          :color="ColorEnum.Primary"
         />
-      </FSRow>
-    </FSCol>
-  </FSTile>
+        <FSEntityCountBadge
+          :label="$tr('ui.common.devices', 'Device(s)')"
+          :count="recursiveDeviceOrganisationsIds.length"
+          :color="ColorEnum.Success"
+        />
+      </FSCol>
+    </template>
+  </FSSimpleTileUI>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSImage from "../FSImage.vue";
-import FSColor from "../FSColor.vue";
-import FSSpan from "../FSSpan.vue";
-import FSTile from "./FSTile.vue";
+import FSEntityCountBadge from './FSEntityCountBadge.vue';
+import FSSimpleTileUI from './FSSimpleTileUI.vue';
 import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSGroupTileUI",
   components: {
-    FSImage,
-    FSColor,
-    FSSpan,
-    FSTile,
-    FSCol,
-    FSRow
+    FSEntityCountBadge,
+    FSSimpleTileUI,
+    FSCol
   },
   props: {
     imageId: {
@@ -131,6 +53,10 @@ export default defineComponent({
       required: false,
       default: null
     },
+    icon: {
+      type: String,
+      required: false
+    },
     label: {
       type: String as PropType<string | null>,
       required: false,
@@ -156,45 +82,15 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: () => [352, 336]
     },
   },
-  setup(props) {
-    const { isMobileSized } = useBreakpoints();
-
-    const groupsLabel = computed((): string => {
-      return props.recursiveGroupsIds.length > 99 ? "99+" : props.recursiveGroupsIds.length.toString();
-    });
-
-    const deviceOrganisationsLabel = computed((): string => {
-      return props.recursiveDeviceOrganisationsIds.length > 99 ? "99+" : props.recursiveDeviceOrganisationsIds.length.toString();
-    });
-
-    const imageSize = computed((): number => {
-      return isMobileSized.value ? 90 : 100;
-    });
-
-    const infoWidth = computed((): string => {
-      if (!props.imageId) {
-        return "100%";
-      }
-      return `calc(100% - ${imageSize.value}px - 24px)`;
-    });
-
+  setup() {
     return {
-      deviceOrganisationsLabel,
-      groupsLabel,
       ColorEnum,
-      imageSize,
-      infoWidth
     };
   }
 });

package/components/tiles/FSGroupingTileUI.vue

@@ -0,0 +1,52 @@
+<template>
+  <FSSimpleTileUI
+    :bottomColor="$props.bottomColor"
+    v-bind="$attrs"
+  >
+    <template
+      #append-info
+    >
+      <FSEntityCountBadge
+        :label="$tr('ui.common.subgroupings', 'Categories')"
+        :count="$props.subgroupingCount ?? 0"
+        :color="ColorEnum.Primary"
+      />
+    </template>
+  </FSSimpleTileUI>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+
+import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
+
+import FSEntityCountBadge from "./FSEntityCountBadge.vue";
+import FSSimpleTileUI from './FSSimpleTileUI.vue';
+
+export default defineComponent({
+  name: "FSGroupingTileUI",
+  components: {
+    FSSimpleTileUI,
+    FSEntityCountBadge
+  },
+  props: {
+    subgroupingCount: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    bottomColor: {
+      type: [Array, String] as PropType<ColorBase | ColorBase[] | null>,
+      required: false,
+      default: null
+    },
+
+  },
+  setup() {
+    return {
+      ColorEnum,
+    };
+  }
+});
+</script>

package/components/tiles/FSLoadTile.vue

@@ -2,6 +2,7 @@
   <FSCard
     class="fs-load-tile"
     padding="11px"
+    topRightPadding="1px"
     :height="heights.card"
     :width="widths.card"
     :style="style"
@@ -39,16 +40,21 @@
         :width="widths.image"
       />
     </FSRow>
-    <FSCard
-      v-if="$props.editable"
-      class="fs-tile-checkbox"
-      :border="false"
+    <template 
+      v-if="$props.selectable"
+      #top-right
     >
-      <FSCheckbox
-        :modelValue="$props.modelValue"
-        @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-      />
-    </FSCard>
+      <FSCard
+        padding="8px"
+        :border="false"
+      >
+        <FSCheckbox
+          :modelValue="$props.modelValue"
+          :disabled="true"
+          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+        />
+      </FSCard>
+    </template>
   </FSCard>
 </template>
 
@@ -79,7 +85,7 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: false

package/components/tiles/FSLocationTileUI.vue

@@ -1,101 +1,77 @@
 <template>
-  <FSTile
+  <FSSimpleTileUI
     :activeColor="$props.color"
     :bottomColor="$props.color"
     :modelValue="$props.modelValue"
     :width="$props.width"
+    :label="$props.label"
+    :icon="$props.icon"
+    :code="$props.code"
     v-bind="$attrs"
   >
-    <FSCol
-      align="center-center"
-      width="fill"
+    <template
+      #append-info
     >
-      <FSRow
-        align="center-left"
-        gap="24px"
-        :height="imageSize"
-        :wrap="false"
+      <FSCol
+        gap="8px"
       >
-        <FSCol 
-          gap="12px"
-          :width="infoWidth"
+        <FSEntityCountBadge
+          v-if="$props.deviceCount !== undefined"
+          :label="$tr('ui.common.devices', 'Device(s)')"
+          :count="$props.deviceCount"
+          :color="ColorEnum.Primary"
+        />
+        <FSRow
+          v-if="$props.address"
+          :wrap="false"
+          align="center-left"
         >
-          <FSCol
-            gap="6px"
+          <FSColor
+            height="24px"
+            :color="ColorEnum.Primary"
+            :border="false"
           >
-            <FSSpan
-              font="text-button"
-              :lineClamp="1"
-            >
-              {{ $props.label }}
-            </FSSpan>
-            <FSSpan
-              v-if="$props.code"
-              font="text-overline"
-              variant="soft"
+            <FSRow
+              align="center-center"
+              width="24px"
             >
-              {{ $props.code }}
-            </FSSpan>
-          </FSCol>
-          <FSRow
-            :wrap="false"
-            align="center-left"
+              <FSIcon
+                icon="mdi-map-marker-radius-outline"
+                size="16px"
+              />
+            </FSRow>
+          </FSColor>
+          <FSSpan
+            font="text-overline"
           >
-            <FSColor
-              padding="0 8px"
-              height="24px"
-              :color="ColorEnum.Light"
-              :border="false"
-            >
-              <FSRow
-                align="center-center"
-              >
-                <FSSpan
-                  font="text-overline"
-                >
-                  {{ $props.deviceCount }}
-                </FSSpan>
-              </FSRow>
-            </FSColor>
-            <FSSpan
-              font="text-overline"
-            >
-              {{ $tr("entity.location.devices", "Devices") }}
-            </FSSpan>
-          </FSRow>
-        </FSCol>
-        <FSIconCard
-          backgroundVariant="standard"
-          :backgroundColor="ColorEnum.Background"
-          :iconColor="$props.color"
-          :icon="$props.icon"
-          :size="imageSize"
-        />
-      </FSRow>
-    </FSCol>
-  </FSTile>
+            {{ $props.address }}
+          </FSSpan>
+        </FSRow>
+      </FSCol>
+    </template>
+  </FSSimpleTileUI>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
+import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSIconCard from "../FSIconCard.vue";
+import FSEntityCountBadge from './FSEntityCountBadge.vue';
+import FSSimpleTileUI from './FSSimpleTileUI.vue';
 import FSColor from "../FSColor.vue";
 import FSSpan from "../FSSpan.vue";
-import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSLocationTileUI",
   components: {
-    FSIconCard,
+    FSEntityCountBadge,
+    FSSimpleTileUI,
     FSColor,
     FSSpan,
-    FSTile,
     FSCol,
     FSRow
   },
@@ -115,6 +91,10 @@ export default defineComponent({
       required: false,
       default: "mdi-map-marker"
     },
+    address: {
+      type: String,
+      required: false
+    },
     deviceCount: {
       type: Number,
       required: false,
@@ -137,20 +117,10 @@ export default defineComponent({
     }
   },
   setup() {
-    const { isMobileSized } = useBreakpoints();
-
-    const imageSize = computed((): number => {
-      return isMobileSized.value ? 90 : 100;
-    });
-
-    const infoWidth = computed((): string => {
-      return `calc(100% - ${imageSize.value}px - 24px)`;
-    });
 
     return {
       ColorEnum,
-      imageSize,
-      infoWidth
+      capNumberToString
     };
   }
 });

package/components/tiles/FSServiceAccountOrganisationTileUI.vue

@@ -1,7 +1,6 @@
 <template>
   <FSTile
     :activeColor="ColorEnum.Primary"
-    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -108,11 +107,6 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
     }
   },
   setup(props) {

package/components/tiles/FSSimpleTileUI.vue

@@ -2,7 +2,6 @@
   <FSTile 
     :activeColor="$props.activeColor"
     :bottomColor="$props.bottomColor"
-    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -18,21 +17,29 @@
         :wrap="false"
       >
         <FSCol
-          gap="6px"
+          gap="12px"
           :width="infoWidth"
         >
-          <FSSpan
-            font="text-button"
-            :lineClamp="2"
+          <FSCol
+            gap="4px"
           >
-            {{ $props.label }}
-          </FSSpan>
-          <FSSpan
-            font="text-overline"
-            variant="soft"
-          >
-            {{ $props.code }}
-          </FSSpan>
+            <FSSpan
+              font="text-button"
+              :lineClamp="2"
+            >
+              {{ $props.label }}
+            </FSSpan>
+            <FSSpan
+              font="text-overline"
+              variant="soft"
+            >
+              {{ $props.code }}
+            </FSSpan>
+          </FSCol>
+          <slot
+            name="append-info"
+            v-bind="$attrs"
+          />
         </FSCol>
         <FSImage
           v-if="$props.imageId"
@@ -44,7 +51,7 @@
           v-else-if="$props.icon"
           :backgroundVariant="$props.iconBackgroundVariant"
           :backgroundColor="$props.iconBackgroundColor"
-          :iconColor="$props.activeColor"
+          :iconColor="$props.iconColor"
           :border="$props.iconBorder"
           :icon="$props.icon"
           :size="imageSize"
@@ -79,7 +86,7 @@ export default defineComponent({
   },
   props: {
     imageId: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -94,31 +101,34 @@ export default defineComponent({
       default: null
     },
     icon: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
+      default: null
     },
     iconBackgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
-      required: false,
-      default: "standard"
+      required: false
     },
     iconBackgroundColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
-      required: false,
-      default: ColorEnum.Background
+      required: false
     },
     iconBorder: {
       type: Boolean as PropType<boolean>,
       required: false,
       default: true
     },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false
+    },
     activeColor: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
     },
     bottomColor: {
-      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      type: [Array, String] as PropType<ColorBase | ColorBase[] | null>,
       required: false,
       default: ColorEnum.Light
     },
@@ -131,18 +141,13 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
     }
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
 
     const iconBackgroundColor = computed((): ColorBase | ColorBase[] => {
-      return props.iconBackgroundColor ? props.bottomColor : ColorEnum.Background;
+      return props.iconBackgroundColor ?? ColorEnum.Background;
     });
 
     const imageSize = computed((): number => {