@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/map/FSMapFeatureGroup.vue

@@ -0,0 +1,51 @@
+<template>
+  <slot />
+</template>
+
+<script lang="ts">
+import { inject, provide, ref, type Ref } from 'vue';
+
+import { type Map, FeatureGroup } from 'leaflet';
+import { MAP } from './keys';
+
+export default {
+  name: 'FSMapFeatureGroup',
+  props: {
+    expectedLayers: {
+      type: Number,
+      default: 0,
+      required: false
+    }
+  },
+  setup(props, { emit }) {
+    const map = inject<Ref<Map | null>>(MAP);
+    let added = false;
+    
+    if(!map) {
+      throw new Error('FSMapFeatureGroup must be used inside a FSMap component');
+    }
+
+    if(!map.value) {
+      throw new Error('FSMapFeatureGroup must be used inside a FSMap component with a map');
+    }
+
+    const featureGroup = ref<FeatureGroup>(new FeatureGroup());
+
+    provide('featureGroup', featureGroup);
+
+    featureGroup.value.on("layeradd", () => {
+      if(!map.value) {
+        return;
+      }
+
+      const layers = featureGroup.value.getLayers();
+
+      if(layers.length === props.expectedLayers && !added) {
+        featureGroup.value.addTo(map.value);
+        added = true;
+        emit("update:bounds", featureGroup.value.getBounds());
+      }
+    });
+  }
+};
+</script>

package/components/map/FSMapLayerButton.vue

@@ -1,19 +1,22 @@
 <template>
   <FSButton
-    prependIcon="mdi-layers-outline"
+    class="fs-map-layer-button"
+    icon="mdi-layers-outline"
     :elevation="true"
     @click="dialog = true"
   />
   <FSDialog
     v-model="dialog"
-    title="Select Layers"
-    width="442px"
+    width="500px"
+    :title="$tr('ui.map.select-layer', 'Select layer')"
+    :contained="true"
   >
     <template
       v-slot:body
     >
       <FSRow
         align="center-center"
+        padding="0 16px 0 0"
       >
         <FSImageCard
           v-for="layer in layers"

package/components/map/FSMapMarker.vue

@@ -0,0 +1,116 @@
+<template>
+  <slot />
+</template>
+
+<script lang="ts">
+import { inject, type PropType, onMounted, type Ref, watch, ref } from 'vue';
+
+import { type Map, type DivIcon, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup, type Layer } from 'leaflet';
+
+import { useColors } from "../../composables";
+
+import { gpsMarkerHtml, locationMarkerHtml, pinMarkerHtml } from '../../utils/leafletMarkers';
+import { MAP, MARKERCLUSTERGROUP } from './keys';
+
+export default {
+  name: 'FSMapMarker',
+  props: {
+    variant: {
+      type: String as PropType<'gps' | 'location' | 'pin'>,
+      default: 'location',
+      required: false
+    },
+    color: {
+      type: String,
+      default: 'primary',
+      required: false
+    },
+    latlng: {
+      type: Object as PropType<Pick<LatLng, "lat" | "lng"> | null>,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: false
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const map = inject<Ref<Map | null>>(MAP);
+    const markerClusterGroup = inject<Ref<MarkerClusterGroup | null>>(MARKERCLUSTERGROUP, ref(null));
+
+    const { getColors } = useColors();
+
+    const lastMarker = ref<Marker | null>(null); 
+
+    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 updateMarker = () => {
+      if(!map.value || !props.latlng) {
+        return;
+      }
+
+      if(lastMarker.value) {
+        if(markerClusterGroup && markerClusterGroup.value) {
+          markerClusterGroup.value.removeLayer(lastMarker.value);
+        } else {
+          map.value.removeLayer(lastMarker.value as Layer);
+        }
+      }
+
+      let icon: DivIcon | null = null;
+      if(props.variant === 'gps') {
+        const size = 16;
+        icon = divIcon({
+          html: gpsMarkerHtml(),
+          className: 'fs-map-mylocation',
+          iconSize: [size, size],
+          iconAnchor: [size / 2, size / 2],
+        });
+      } else if(props.variant === 'location' && props.icon) {
+        const size = 36;
+        icon = divIcon({
+          html: locationMarkerHtml(props.icon, getColors(props.color).base),
+          iconSize: [size, size],
+          className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
+          iconAnchor: [size / 2, size / 2],
+        });
+      } else {
+        const size = 20;
+        icon = divIcon({
+          html: pinMarkerHtml(getColors(props.color).base),
+          iconSize: [size, size],
+          className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
+          iconAnchor: [size / 2, size / 2],
+        });
+      }
+      
+      lastMarker.value = marker(props.latlng, { icon });
+      lastMarker.value.on('click', (e) => {
+        emit('click', e);
+      });
+
+      if(markerClusterGroup && markerClusterGroup.value) {
+        lastMarker.value.addTo(markerClusterGroup.value);
+      } else {
+        lastMarker.value.addTo(map.value);
+      }
+    };
+
+    onMounted(updateMarker);
+
+    watch(() => [props.variant, props.color, props.latlng, props.selected], updateMarker);
+  }
+};
+</script>

package/components/map/FSMapMarkerClusterGroup.vue

@@ -0,0 +1,72 @@
+<template>
+  <slot />
+</template>
+
+<script lang="ts">
+import { inject, provide, ref, type Ref } from 'vue';
+
+import { type Map, MarkerClusterGroup, divIcon } from 'leaflet';
+
+import { clusterMarkerHtml } from '../../utils/leafletMarkers';
+import { MAP } from './keys';
+
+export default {
+  name: 'FSMapMarkerClusterGroup',
+  props: {
+    expectedLayers: {
+      type: Number,
+      default: 0,
+      required: false
+    },
+    disableClusteringAtZoom: {
+      type: Number,
+      default: 17,
+      required: false
+    }
+  },
+  setup(props, { emit }) {
+    const map = inject<Ref<Map | null>>(MAP);
+    let added = false;
+    
+    if(!map) {
+      throw new Error('FSMapMarkerClusterGroup must be used inside a FSMap component');
+    }
+
+    if(!map.value) {
+      throw new Error('FSMapMarkerClusterGroup must be used inside a FSMap component with a map');
+    }
+
+    const markerClusterGroup = ref<MarkerClusterGroup>(new MarkerClusterGroup({
+      spiderfyOnMaxZoom: false,
+      showCoverageOnHover: false,
+      disableClusteringAtZoom: props.disableClusteringAtZoom,
+      iconCreateFunction: function (cluster: any) {
+        const size = 36;
+
+        return divIcon({
+          html: clusterMarkerHtml(cluster.getChildCount()),
+          className: 'fs-map-location fs-map-location-full',
+          iconSize: [size, size],
+          iconAnchor: [size / 2, size / 2],
+        });
+      }}
+    ));
+
+    provide('markerClusterGroup', markerClusterGroup);
+
+    markerClusterGroup.value.on("layeradd", () => {
+      if(!map.value) {
+        return;
+      }
+
+      const layers = markerClusterGroup.value.getLayers();
+
+      if(layers.length === props.expectedLayers && !added) {
+        markerClusterGroup.value.addTo(map.value);
+        added = true;
+        emit("update:bounds", markerClusterGroup.value.getBounds());
+      }
+    });
+  }
+};
+</script>

package/components/map/FSMapOverlay.vue

@@ -1,92 +1,70 @@
 <template>
-  <FSCol
+  <v-overlay
+    v-if="isExtraSmall"
+    :modelValue="$props.mode === 'expand'"
+    :contained="true"
+    @click="$emit('update:mode', 'collapse')"
+    zIndex="0"
+  />
+  <div
     v-show="isExtraSmall"
-    :id="`left-overlay-mobile-${$props.mapId}`"
-    :height="$props.mode === 'expand' ? '100%' : ($props.mode === 'half' ? '50%' : 'hug')"
-    :style="style"
-    class="fs-map-overlay-left-mobile"
-    ref="mobileOverlayElement"
-    align="bottom-center"
-    width="hug"
-    gap="2px"
-    @click="$event.target === mobileOverlayElement?.$el ? $emit('update:mode', 'collapse') : null"
+    ref="mobileOverlayWrapper"
+    class="fs-map-overlay-mobile"
+    :style="{ height: $props.mode === 'expand' ? '90%' : ($props.mode === 'half' ? '50%' : '20px') }"
   >
     <FSCard
-      padding="0px"
+      width="100%"
+      height="100%"
       :elevation="true"
       :border="false"
     >
       <FSCol
+        height="100%"
         gap="0px"
-        height="fill"
       >
         <FSRow
           align="center-center"
           @touchstart="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
         >
           <FSButton
-            :icon="$props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up'"
             variant="icon"
+            :icon="$props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up'"
             @click="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
           />
         </FSRow>
         <FSCol
-          class="fs-map-overlay-left-mobile-content"
+          v-if="$props.mode !== 'collapse'"
           height="fill"
+          style="min-height: 0;"
         >
           <slot
-            name="leftoverlay-header"
+            name="body"
           />
-          <FSFadeOut
-            :height="$props.mode === 'collapse' ? '0px' : '100%'"
-            maskHeight="0px"
-          >
-            <slot
-              name="leftoverlay-body"
-            />
-          </FSFadeOut>
         </FSCol>
       </FSCol>
     </FSCard>
-  </FSCol>
-  <FSCol
+  </div>
+
+  <FSCard
     v-show="!isExtraSmall"
-    :style="style"
-    :id="`left-overlay-${$props.mapId}`"
-    class="fs-map-overlay-left"
-    width="hug"
-    gap="2px"
+    class="fs-map-overlay-desktop"
+    ref="desktopOverlay"
+    :elevation="true"
+    :border="false"
   >
-    <FSCard
-      padding="4px"
-      :elevation="true"
-      :border="false"
+    <FSCol
+      height="fill"
     >
-      <FSCol
-        class="fs-map-overlay-left-content"
-      >
-        <slot
-          name="leftoverlay-header"
-        />
-        <FSFadeOut
-          maskHeight="0"
-          height="100%"
-        >
-          <slot
-            name="leftoverlay-body"
-          />
-        </FSFadeOut>
-      </FSCol>
-    </FSCard>
-  </FSCol>
+      <slot
+        name="body"
+      />
+    </FSCol>
+  </FSCard>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref } from "vue";
-
+import { defineComponent, type PropType, onUnmounted, onMounted, ref } from "vue";
 import { useBreakpoints } from "../../composables";
-
-import FSFadeOut from "../FSFadeOut.vue";
 import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSCol from "../FSCol.vue";
@@ -95,55 +73,63 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSMapOverlay",
   props: {
-    height: {
-      type: [String, Number] as PropType<string | number | null>,
-      required: false,
-      default: "100%"
-    },
     mode: {
       type: String as PropType<"collapse" | "half" | "expand">,
       required: false,
       default: "collapse"
-    },
-    mapId: {
-      type: String,
-      required: true
     }
   },
   components: {
-    FSFadeOut,
     FSButton,
     FSCard,
     FSCol,
     FSRow
   },
-  emits: ["update:mode"],
-  setup(props) {
+  emits: ["update:mode", "update:height", "update:width"],
+  setup(_, { emit }) {
     const { isExtraSmall } = useBreakpoints();
 
-    const leftOverlayMenuMobile = ref(false);
-    const mobileOverlayElement = ref(null);
+    const mobileOverlayWrapper = ref<HTMLDivElement | null>(null);
+    const desktopOverlay = ref<InstanceType<typeof FSCard> | null>(null);
+
+    const mobileResizeObserver = ref<ResizeObserver | null>(null);
+    const desktopResizeObserver = ref<ResizeObserver | null>(null);
+
+    onMounted(() => {
+      mobileResizeObserver.value = new ResizeObserver(entries => {
+        entries.forEach((entry) => {
+          emit("update:height", entry.contentRect.height);
+        });
+      });
+
+      desktopResizeObserver.value = new ResizeObserver(entries => {
+        entries.forEach((entry) => {
+          emit("update:width", entry.contentRect.width);
+        });
+      });
+
+      if (mobileOverlayWrapper.value) {
+        mobileResizeObserver.value.observe(mobileOverlayWrapper.value);
+      }
+
+      if (desktopOverlay.value) {
+        desktopResizeObserver.value.observe(desktopOverlay.value.$el);
+      }
+    });
 
-    const style = computed((): { [key: string]: string | null | undefined } => {
-      if (props.mode === "expand") {
-        return {
-          "--fs-map-overlay-max-height": `calc(${props.height} - 40px)`,
-          "--fs-map-overlay-card-height": "95%",
-        };
+    onUnmounted((): void => {
+      if (mobileResizeObserver.value) {
+        mobileResizeObserver.value.disconnect();
       }
-      else {
-        return {
-          "--fs-map-overlay-max-height": `calc(${props.height} - 40px)`,
-          "--fs-map-overlay-card-height": "100%",
-        };
+      if (desktopResizeObserver.value) {
+        desktopResizeObserver.value.disconnect();
       }
     });
 
     return {
-      leftOverlayMenuMobile,
-      mobileOverlayElement,
       isExtraSmall,
-      style
+      mobileOverlayWrapper,
+      desktopOverlay
     };
   }
 });

package/components/map/FSMapPolygon.vue

@@ -0,0 +1,81 @@
+<template>
+  <slot />
+</template>
+
+<script lang="ts">
+import { inject, type PropType, onMounted, type Ref, watch, ref } from 'vue';
+
+import { type Map, type LatLng, type Polygon, type FeatureGroup, polygon } from 'leaflet';
+
+import { useColors } from "../../composables";
+import { FEATUREGROUP, MAP } from './keys';
+
+export default {
+  name: 'FSMapPolygon',
+  props: {
+    color: {
+      type: String,
+      default: 'primary',
+      required: false
+    },
+    latlngs: {
+      type: Array as PropType<Pick<LatLng, "lat" | "lng">[] | null>,
+      required: true
+    }
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const map = inject<Ref<Map | null>>(MAP);
+    const featureGroup = inject<Ref<FeatureGroup | null>>(FEATUREGROUP, ref(null));
+
+    const { getColors } = useColors();
+
+    const lastPolygon = ref<Polygon | null>(null); 
+
+    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 updatePolygon = () => {
+      if(!map.value || !props.latlngs) {
+        return;
+      }
+
+      if(lastPolygon.value) {
+        if(featureGroup && featureGroup.value) {
+          featureGroup.value.removeLayer(lastPolygon.value);
+        } else {
+          map.value.removeLayer(lastPolygon.value);
+        }
+      }
+
+      const color = getColors(props.color).base;
+      lastPolygon.value = polygon(props.latlngs.map((coord) => [coord.lat, coord.lng]), {
+        color: color,
+        fillColor: color + "50",
+        fillOpacity: 0.5,
+        className: 'fs-map-area',
+      })
+      
+      lastPolygon.value.on('click', (e) => {
+        emit('click', e);
+      });
+      
+      if(featureGroup && featureGroup.value) {
+        lastPolygon.value.addTo(featureGroup.value);
+      }
+      else {
+        lastPolygon.value.addTo(map.value);
+      }
+    };
+
+    onMounted(updatePolygon);
+
+    watch(() => [props.color, props.latlngs], updatePolygon);
+  }
+};
+</script>

package/components/map/FSMapTileLayer.vue

@@ -0,0 +1,50 @@
+<template>
+  <slot />
+</template>
+
+<script lang="ts">
+import { inject, type PropType, onMounted, type Ref, watch } from 'vue';
+
+import type { Map, Layer } from 'leaflet';
+
+import { MAP } from './keys';
+
+export default {
+  name: 'FSMapTileLayer',
+  props: {
+    layer: {
+      type: Object as PropType<Layer>,
+      required: false
+    }
+  },
+  setup(props) {
+    const map = inject<Ref<Map | null>>(MAP);
+
+    const lastLayer = props.layer;
+
+    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 updateLayer = () => {
+      if (!props.layer || !map.value) {
+        return;
+      }
+
+      if(lastLayer) {
+        map.value.removeLayer(lastLayer);
+      }
+
+      props.layer.addTo(map.value);
+    };
+
+    onMounted(updateLayer);
+
+    watch(() => props.layer, updateLayer);
+  }
+};
+</script>

package/components/map/keys.ts

@@ -0,0 +1,4 @@
+export const FEATUREGROUP = 'featureGroup';
+export const MAP = 'map';
+export const MARKERCLUSTERGROUP = 'markerClusterGroup';
+

package/components/selects/FSSelectAutoRefresh.vue

@@ -13,7 +13,7 @@ import type { PropType} from "vue";
 import { computed, defineComponent } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { AutoRefresh } from "@dative-gpi/foundation-shared-domain/models";
+import { AutoRefresh } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectField from "../fields/FSSelectField.vue";
 

package/components/selects/FSSelectDashboardVariableType.vue

@@ -13,7 +13,7 @@ import type { PropType} from "vue";
 import { computed, defineComponent } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { DashboardVariableType } from "@dative-gpi/foundation-shared-domain/models";
+import { DashboardVariableType } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectField from "../fields/FSSelectField.vue";
 

package/components/selects/FSSelectDateSetting.vue

@@ -1,5 +1,6 @@
 <template>
   <FSSelectField
+    class="fs-select-date-setting"
     :items="dateSettings"
     :clearable="false"
     :modelValue="$props.modelValue"
@@ -9,11 +10,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { DateSetting } from "@dative-gpi/foundation-shared-domain/models";
+import { DateSetting } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectField from "../fields/FSSelectField.vue";
 

package/components/selects/FSSelectDays.vue

@@ -13,7 +13,7 @@ import type { PropType} from "vue";
 import { computed, defineComponent } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { Days } from "@dative-gpi/foundation-shared-domain/models";
+import { Days } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectField from "../fields/FSSelectField.vue";