@dative-gpi/foundation-shared-components 1.0.65 → 1.0.67-map-edit

package/components/tiles/FSFolderTileUI.vue

@@ -6,7 +6,26 @@
     :iconBorder="false"
     :icon="$props.icon"
     v-bind="$attrs"
-  />
+  >
+    <template
+      #append-info
+    >
+      <FSCol
+        gap="6px"
+      >
+        <FSEntityCountBadge
+          :label="$tr('ui.common.folders', 'Folder(s)')"
+          :count="recursiveFoldersIds.length"
+          :color="ColorEnum.Primary"
+        />
+        <FSEntityCountBadge
+          :label="$tr('ui.common.dashboards', 'Dashboard(s)')"
+          :count="recursiveDashboardsIds.length"
+          :color="ColorEnum.Success"
+        />
+      </FSCol>
+    </template>
+  </FSSimpleTileUI>
 </template>
 
 <script lang="ts">
@@ -14,7 +33,9 @@ import { computed, defineComponent, type PropType } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSEntityCountBadge from './FSEntityCountBadge.vue';
 import FSSimpleTileUI from "./FSSimpleTileUI.vue";
+import FSCol from "../FSCol.vue";
 
 export default defineComponent({
   name: "FSFolderTileUI",
@@ -28,10 +49,22 @@ export default defineComponent({
       type: String,
       required: false,
       default: "mdi-folder-outline"
-    }
+    },
+    recursiveFoldersIds: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    recursiveDashboardsIds: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
   },
   components: {
-    FSSimpleTileUI
+    FSEntityCountBadge,
+    FSSimpleTileUI,
+    FSCol
   },
   setup(props){
     const color = computed(() => {
@@ -42,7 +75,8 @@ export default defineComponent({
     });
 
     return {
-      color
+      color,
+      ColorEnum
     };
   }
 });

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/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"
   >
-    <FSRow
-      align="center-center"
-      width="100%"
-      gap="24px"
-      :wrap="false"
+    <template
+      #append-info
     >
-      <FSCol 
-        gap="12px"
-        width="100%"
-        class="fs-location-tile-text-container"
+      <FSCol
+        gap="8px"
       >
-        <FSCol
-          gap="6px"
-        >
-          <FSSpan
-            font="text-button"
-            :lineClamp="1"
-          >
-            {{ $props.label }}
-          </FSSpan>
-          <FSSpan
-            v-if="$props.code"
-            font="text-overline"
-            variant="soft"
-          >
-            {{ $props.code }}
-          </FSSpan>
-        </FSCol>
+        <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"
         >
           <FSColor
-            padding="0 8px"
             height="24px"
-            :color="ColorEnum.Light"
+            :color="ColorEnum.Primary"
             :border="false"
           >
             <FSRow
               align="center-center"
+              width="24px"
             >
-              <FSSpan
-                font="text-overline"
-              >
-                {{ $props.deviceCount }}
-              </FSSpan>
+              <FSIcon
+                icon="mdi-map-marker-radius-outline"
+                size="16px"
+              />
             </FSRow>
           </FSColor>
           <FSSpan
             font="text-overline"
           >
-            {{ $tr("ui.common.devices", "Devices") }}
+            {{ $props.address }}
           </FSSpan>
         </FSRow>
       </FSCol>
-      <FSCol
-        width="hug"
-      >
-        <FSIconCard
-          :icon="$props.icon"
-          :iconColor="$props.color"
-          size="100px"
-          iconSize="38px"
-          variant="background"
-          :border="true"
-        />
-      </FSCol>
-    </FSRow>
-  </FSTile>
+    </template>
+  </FSSimpleTileUI>
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
 
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-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
   },
@@ -110,35 +86,41 @@ export default defineComponent({
       required: false,
       default: null
     },
-    color: {
-      type: String,
-      required: false,
-      default: () => ColorEnum.Primary
-    },
     icon: {
       type: String,
       required: false,
       default: "mdi-map-marker"
     },
+    address: {
+      type: String,
+      required: false
+    },
     deviceCount: {
       type: Number,
       required: false,
       default: 0
     },
-    modelValue: {
-      type: Boolean,
+    color: {
+      type: String as PropType<ColorBase>,
       required: false,
-      default: false
+      default: ColorEnum.Primary
     },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: () => [352, 336]
     },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
   },
   setup() {
+
     return {
-      ColorEnum
+      ColorEnum,
+      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,6 +51,7 @@
           v-else-if="$props.icon"
           :backgroundVariant="$props.iconBackgroundVariant"
           :backgroundColor="$props.iconBackgroundColor"
+          :iconColor="$props.iconColor"
           :border="$props.iconBorder"
           :icon="$props.icon"
           :size="imageSize"
@@ -78,7 +86,7 @@ export default defineComponent({
   },
   props: {
     imageId: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -93,24 +101,27 @@ 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: "background"
+      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,
@@ -130,11 +141,6 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
     }
   },
   setup(props) {