@dative-gpi/foundation-shared-components 1.0.157 → 1.0.158-devices-latency-2

package/components/FSCol.vue

@@ -26,6 +26,11 @@ export default defineComponent({
       required: false,
       default: "fill"
     },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -49,11 +54,12 @@ export default defineComponent({
   },
   setup(props) {
     const style = computed((): StyleValue => ({
-      "--fs-col-overflow": props.overflow,
-      "--fs-col-padding" : sizeToVar(props.padding),
-      "--fs-col-gap"     : sizeToVar(props.gap),
-      "--fs-col-width"   : sizeToVar(props.width),
-      "--fs-col-height"  : sizeToVar(props.height)
+      "--fs-col-overflow"   : props.overflow,
+      "--fs-col-padding"    : sizeToVar(props.padding),
+      "--fs-col-gap"        : sizeToVar(props.gap),
+      "--fs-col-width"      : sizeToVar(props.width),
+      "--fs-col-max-width"  : props.maxWidth ? sizeToVar(props.maxWidth) : "100%",
+      "--fs-col-height"     : sizeToVar(props.height),
     }));
 
     const classes = computed((): string[] => {

package/components/FSTagGroup.vue

@@ -15,7 +15,7 @@
     <slot />
   </FSWrapGroup>
   <FSSlideGroup
-    v-if="$props.variant === 'slide'"
+    v-else-if="$props.variant === 'slide'"
     v-bind="$attrs"
   >
     <FSTag
@@ -36,12 +36,14 @@ import { defineComponent, type PropType } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSSlideGroup from '@dative-gpi/foundation-shared-components/components/FSSlideGroup.vue';
 import FSWrapGroup from "./FSWrapGroup.vue";
 import FSTag from "./FSTag.vue";
 
 export default defineComponent({
   name: "FSTagGroup",
   components: {
+    FSSlideGroup,
     FSWrapGroup,
     FSTag
   },

package/components/fields/FSAutocompleteField.vue

@@ -1,6 +1,7 @@
 <template>
   <FSCol
     v-if="$props.loading"
+    :maxWidth="$props.maxWidth"
   >
     <FSLoader
       v-if="!$props.hideHeader"
@@ -14,6 +15,7 @@
   </FSCol>
   <FSCol
     v-else-if="isExtraSmall"
+    :maxWidth="$props.maxWidth"
   >
     <FSTextField
       :validationValue="$props.modelValue"
@@ -220,6 +222,7 @@
     :disabled="$props.disabled"
     :label="$props.label"
     :messages="messages"
+    :maxWidth="$props.maxWidth"
   >
     <FSToggleSet
       v-if="$props.toggleSet"
@@ -588,6 +591,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "600px"
     }
   },
   emits: ["update:modelValue", "update:search", "add:item"],

package/components/fields/FSBaseField.vue

@@ -1,5 +1,6 @@
 <template>
   <FSCol
+    :maxWidth="$props.maxWidth"
     :style="style"
   >
     <slot
@@ -114,6 +115,11 @@ export default defineComponent({
       type: String,
       required: false,
       default: "120px"
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "600px"
     }
   },
   setup(props) {

package/components/fields/FSIconField.vue

@@ -1,5 +1,7 @@
 <template>
-  <FSCol>
+  <FSCol
+    :maxWidth="$props.maxWidth"
+  >
     <FSTextField
       :label="$props.label"
       :description="$props.description"
@@ -10,6 +12,7 @@
       :messages="messages"
       :validateOn="validateOn"
       :validationValue="$props.modelValue"
+      :maxWidth="null"
       v-model="innerValue"
       v-bind="$attrs"
     >
@@ -123,7 +126,12 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    }
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "600px"
+    },
   },
   emits: ["update:modelValue"],
   setup(props) {

package/components/fields/FSSearchField.vue

@@ -4,6 +4,7 @@
     :placeholder="placeholder"
     :modelValue="$props.modelValue"
     prependInnerIcon="mdi-magnify"
+    minWidth="200px"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >

package/components/fields/FSTimeRangeField.vue

@@ -6,6 +6,7 @@
     :disabled="$props.disabled"
     :label="$props.label"
     :messages="messages"
+    :maxWidth="$props.maxWidth"
   >
     <FSRow>
       <FSRow
@@ -132,6 +133,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],

package/components/lists/FSDataTableUI.vue

@@ -5,7 +5,7 @@
   >
     <FSRow
       v-if="$props.showSearch || (!isMobileSized && ($slots['prepend-toolbar'] || $slots['toolbar'] || $slots['append-toolbar'])) || (!$props.disableTable && !$props.disableIterator)"
-      align="bottom-left"
+      align="top-left"
       :wrap="isMobileSized ? false : true"
       width="fill"
     >
@@ -13,35 +13,41 @@
         v-if="!isMobileSized"
         name="prepend-toolbar"
       />
-      <template
-        v-if="$props.showSearch"
-      >
-        <FSSearchField
-          :hideHeader="true"
-          v-model="innerSearch"
-        />
-        <FSButton
-          v-if="filterableHeaders.length > 0"
-          prependIcon="mdi-filter-variant"
-          :variant="innerShowFilters ? 'full' : 'standard'"
-          @click="innerShowFilters = !innerShowFilters"
-        />
-      </template>
-      <slot
-        v-if="!isMobileSized"
-        name="toolbar"
-      />
-      <template
-        v-if="$slots['append-toolbar'] || (!$props.disableTable && !$props.disableIterator)"
+      <FSRow
+        align="top-left"
       >
         <FSRow
-          align="center-right"
-          :width="isExtraSmall ? 'hug' : 'fill'"
+          v-if="$props.showSearch || filterableHeaders.length > 0 || $slots['append-toolbar']"
+          align="bottom-left"
         >
+          <FSSearchField
+            :hideHeader="true"
+            v-model="innerSearch"
+          />
+          <FSButton
+            v-if="filterableHeaders.length > 0"
+            prependIcon="mdi-filter-variant"
+            :variant="innerShowFilters ? 'full' : 'standard'"
+            @click="innerShowFilters = !innerShowFilters"
+          />
           <slot
             v-if="!isMobileSized"
-            name="append-toolbar"
+            name="toolbar"
           />
+        </FSRow>
+        <slot
+          v-if="!isMobileSized"
+          name="append-toolbar"
+        />
+      </FSRow>
+      <template
+        v-if="(!$props.disableTable && !$props.disableIterator)"
+      >
+        <FSRow
+          align="top-right"
+          width="hug"
+          :wrap="false"
+        >
           <FSOptionGroup
             v-if="!$props.disableTable && !$props.disableIterator"
             :values="modeOptions"

package/components/map/FSMap.vue

@@ -233,7 +233,7 @@ export default defineComponent({
     }));
 
     const actualLayer = computed(() => {
-      return layers.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers ?? layers[0].layers;
+      return layers.value.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers;
     });
 
     const overlaySlots = computed(() => {
@@ -389,8 +389,6 @@ export default defineComponent({
       if(!map.value || !props.bounds) {
         return;
       }
-
-      //console.log("Bounds changed", props.bounds);
       fitBounds(props.bounds, { maxZoom: 14 });
     });
 

package/components/map/FSMapMarker.vue

@@ -3,11 +3,13 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, type Ref, watch, ref, onUnmounted, onMounted } from 'vue';
+import { inject, type PropType, type Ref, watch, ref, onUnmounted, computed } from 'vue';
+import { type RouteLocation } from "vue-router";
 
-import { type Map, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup, type LeafletMouseEvent } from 'leaflet';
+import { type Map, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup } from 'leaflet';
 
 import { useColors } from "../../composables";
+import { useRouting } from '@dative-gpi/foundation-shared-services/composables';
 
 import { gpsMarkerHtml, locationMarkerHtml, pinMarkerHtml } from '../../utils/leafletMarkers';
 import { MAP, MARKERCLUSTERGROUP } from './keys';
@@ -41,14 +43,28 @@ export default {
     label: {
       type: String,
       required: false
+    },
+    to: {
+      type: Object as PropType<RouteLocation | null>,
+      required: false
     }
   },
-  emits: ['click'],
+  emits: ['click', 'auxclick'],
   setup(props, { emit }) {
     const map = inject<Ref<Map | null>>(MAP);
     const markerClusterGroup = inject<Ref<MarkerClusterGroup | null>>(MARKERCLUSTERGROUP, ref(null));
-
+      
     const { getColors } = useColors();
+    const { handleRoutingEvent } = useRouting();
+
+    if(!map) {
+      throw new Error('FSMapTileLayer must be used inside a FSMap component');
+    }
+
+    if(!map.value) {
+      throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
+    }
+      
     const getMarkerIcon = () => {
       if(props.variant === 'gps') {
         const size = 16;
@@ -81,12 +97,32 @@ export default {
 
     const actualMarker = ref(marker(props.latlng ?? [0, 0], { icon: getMarkerIcon() }));
 
-    if(!map) {
-      throw new Error('FSMapTileLayer must be used inside a FSMap component');
+    const markerElement = computed(() => {
+      return actualMarker.value.getElement();
+    });
+
+    const onClick = (event: MouseEvent) => {
+      if(props.to) {
+        handleRoutingEvent(event, props.to, true);
+        return;
+      }
+      
+      emit('click', {
+        ...event,
+        latlng: props.latlng
+      });
     }
 
-    if(!map.value) {
-      throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
+    const onAuxClick = (event: MouseEvent) => {
+      if(props.to) {
+        handleRoutingEvent(event, props.to);
+        return;
+      }
+
+      emit('auxclick', {
+        ...event,
+        latlng: props.latlng
+      });
     }
 
     watch(map, () => {
@@ -118,11 +154,14 @@ export default {
       actualMarker.value.setLatLng(props.latlng);
     });
 
-    onMounted(() => {
-      actualMarker.value.on('click', (event: LeafletMouseEvent) => {
-        emit('click', event);
-      });
-    });
+    watch(markerElement, (newMarkerElement) => {
+      if(!newMarkerElement) {
+        return;
+      }
+
+      newMarkerElement.addEventListener('click', onClick);
+      newMarkerElement.addEventListener('auxclick', onAuxClick);
+    }, { immediate: true });
 
     onUnmounted(() => {
       if(actualMarker.value && map.value) {

package/components/tiles/FSEntityCountBadge.vue

@@ -0,0 +1,83 @@
+<template>
+  <FSRow
+    align="center-left"
+  >
+    <FSColor
+      height="24px"
+      :color="$props.color"
+      :border="$props.border"
+      :variant="$props.variant"
+    >
+      <FSRow
+        align="center-center"
+        width="24px"
+      >
+        <FSSpan
+          font="text-overline"
+        >
+          {{ badgeContent }}
+        </FSSpan>
+      </FSRow>
+    </FSColor>
+    <FSSpan
+      font="text-overline"
+    >
+      {{ $props.label }}
+    </FSSpan>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, 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 FSColor from "../FSColor.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSEntityCountBadge",
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    count: {
+      type: Number,
+      required: true
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: () => ColorEnum.Primary
+    },
+    border: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    variant: {
+      type: String as PropType<"standard" | "full">,
+      required: false,
+      default: "standard"
+    }
+  },
+  components: {
+    FSColor,
+    FSSpan,
+    FSRow
+  },
+  setup(props){
+
+    const badgeContent = computed(() => capNumberToString(props.count));
+
+    return {
+      ColorEnum,
+      badgeContent
+    };
+  }
+});
+</script>

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

@@ -16,82 +16,36 @@
       <FSCol
         gap="6px"
       >
-        <FSRow
-          align="center-left"
-        >
-          <FSColor
-            height="24px"
-            width="24px"
-            :color="ColorEnum.Primary"
-            :border="false"
-          >
-            <FSRow
-              align="center-center"
-            >
-              <FSSpan
-                font="text-overline"
-              >
-                {{ groupsBadgeContent }}
-              </FSSpan>
-            </FSRow>
-          </FSColor>
-          <FSSpan
-            font="text-overline"
-          >
-            {{ $tr("ui.common.groups", "Group(s)") }}
-          </FSSpan>
-        </FSRow>
-        <FSRow
-          align="center-left"
-        >
-          <FSColor
-            height="24px"
-            width="24px"
-            :color="ColorEnum.Success"
-            :border="false"
-          >
-            <FSRow
-              align="center-center"
-            >
-              <FSSpan
-                font="text-overline"
-              >
-                {{ deviceOrganisationsBadgeContent }}
-              </FSSpan>
-            </FSRow>
-          </FSColor>
-          <FSSpan
-            font="text-overline"
-          >
-            {{ $tr("ui.common.devices", "Device(s)") }}
-          </FSSpan>
-        </FSRow>
+        <FSEntityCountBadge
+          :label="$tr('ui.common.groups', 'Group(s)')"
+          :count="recursiveGroupsIds.length"
+          :color="ColorEnum.Primary"
+        />
+        <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 { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
+import { defineComponent, type PropType } from "vue";
 
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSEntityCountBadge from './FSEntityCountBadge.vue';
 import FSSimpleTileUI from './FSSimpleTileUI.vue';
-import FSColor from "../FSColor.vue";
-import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSGroupTileUI",
   components: {
+    FSEntityCountBadge,
     FSSimpleTileUI,
-    FSColor,
-    FSSpan,
-    FSCol,
-    FSRow
+    FSCol
   },
   props: {
     imageId: {
@@ -134,14 +88,8 @@ export default defineComponent({
       default: () => [352, 336]
     },
   },
-  setup(props) {
-    const groupsBadgeContent = computed(() => capNumberToString(props.recursiveGroupsIds.length));
-
-    const deviceOrganisationsBadgeContent = computed(() => capNumberToString(props.recursiveDeviceOrganisationsIds.length));
-
+  setup() {
     return {
-      deviceOrganisationsBadgeContent,
-      groupsBadgeContent,
       ColorEnum,
     };
   }

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>