@dative-gpi/foundation-shared-components 1.0.158 → 1.0.159-foldertile

package/components/map/FSMap.vue

@@ -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/FSFolderTileUI.vue

@@ -6,15 +6,80 @@
     :iconBorder="false"
     :icon="$props.icon"
     v-bind="$attrs"
-  />
+  >
+    <template
+      #append-info
+    >
+      <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"
+              >
+                {{ foldersBadgeContent }}
+              </FSSpan>
+            </FSRow>
+          </FSColor>
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $tr("ui.common.folders", "Folder(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"
+              >
+                {{ dashboardsBadgeContent }}
+              </FSSpan>
+            </FSRow>
+          </FSColor>
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $tr("ui.common.dashboards", "Dashboard(s)") }}
+          </FSSpan>
+        </FSRow>
+      </FSCol>
+    </template>
+  </FSSimpleTileUI>
 </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 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: "FSFolderTileUI",
@@ -28,10 +93,24 @@ 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
+    FSSimpleTileUI,
+    FSColor,
+    FSSpan,
+    FSCol,
+    FSRow
   },
   setup(props){
     const color = computed(() => {
@@ -41,8 +120,15 @@ export default defineComponent({
       return props.bottomColor;
     });
 
+    const foldersBadgeContent = computed(() => capNumberToString(props.recursiveFoldersIds.length));
+
+    const dashboardsBadgeContent = computed(() => capNumberToString(props.recursiveDashboardsIds.length));
+
     return {
-      color
+      color,
+      ColorEnum,
+      foldersBadgeContent,
+      dashboardsBadgeContent,
     };
   }
 });

package/composables/useMapLayers.ts

@@ -13,7 +13,7 @@ export const useMapLayers = () => {
     {
       name: MapLayers.Map,
       label: $tr("ui.map-layer.map", "Map"),
-      image: new URL("../../assets/images/map/map.png", import.meta.url).href,
+      image: new URL("../assets/images/map/map.png", import.meta.url).href,
       layers: [
         tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
           maxZoom: 22,
@@ -26,7 +26,7 @@ export const useMapLayers = () => {
     {
       name: MapLayers.Imagery,
       label: $tr("ui.map-layer.imagery", "Imagery"),
-      image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
+      image: new URL("../assets/images/map/imagery.png", import.meta.url).href,
       layers: [
         tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${apiKey}`, {
           maxZoom: 22,
@@ -39,7 +39,7 @@ export const useMapLayers = () => {
     {
       name: MapLayers.Snow,
       label: $tr("ui.map-layer.snow", "Snow ski map"),
-      image: new URL("../../assets/images/map/snow.png", import.meta.url).href,
+      image: new URL("../assets/images/map/snow.png", import.meta.url).href,
       layers: [
         tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
           maxZoom: 22,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.158",
+  "version": "1.0.159-foldertile",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.158",
-    "@dative-gpi/foundation-shared-services": "1.0.158"
+    "@dative-gpi/foundation-shared-domain": "1.0.159-foldertile",
+    "@dative-gpi/foundation-shared-services": "1.0.159-foldertile"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "8e284ac045b19fef0565f6ab8026702da3dc12e6"
+  "gitHead": "1ed519396d5f588d59a91444d2fa5c1f32d76382"
 }

package/tools/alertsTools.ts

@@ -74,9 +74,10 @@ export const AlertTools = {
   },
   criticityLabel(value: Criticity): string {
     switch (value) {
+      case Criticity.Information: return $tr('ui.common.information', 'Information');
       case Criticity.Warning: return $tr('ui.common.warning', 'Warning');
       case Criticity.Error: return $tr('ui.common.error', 'Error');
-      default: return $tr('ui.common.information', 'Information');
+      default: return $tr("ui.common.none", "None");
     }
   },
   statusColor(status: AlertStatus): ColorEnum {