@dative-gpi/foundation-shared-components 1.0.137-maps2 → 1.0.137-override-widgets

package/components/fields/FSEntityFieldUI.vue

@@ -14,18 +14,20 @@
         :wrap="false"
       >
         <FSSelectField
+          :editable="$props.editable"
+          :items="actualEntityTypes"
           :hideHeader="true"
+          :clearable="false"
           :modelValue="$props.entityType"
           @update:modelValue="$emit('update:entityType', $event)"
-          :items="actualEntityTypes"
-          :clearable="false"
         />
         <template
           v-if="itemsCount > 0"
         >
           <FSButton
-            :label="$tr('ui.common.edit', 'Edit')"
             icon="mdi-pencil"
+            :label="$tr('ui.common.edit', 'Edit')"
+            :editable="$props.editable"
             @click="$emit('click:select')"
           />
         </template>
@@ -33,8 +35,9 @@
           v-else
         >
           <FSButton
-            :label="$tr('ui.common.select', 'Select')"
             icon="mdi-plus-circle-multiple-outline"
+            :label="$tr('ui.common.select', 'Select')"
+            :editable="$props.editable"
             @click="$emit('click:select')"
           />
         </template>

package/components/fields/FSTranslateRichTextField.vue

@@ -32,7 +32,9 @@
             >
               {{ $tr('translate-rich-text-field.translate-in', 'Translate in {0}', language.label) }}
             </FSSpan>
-            <FSIcon>{{ language.icon }}</FSIcon>
+            <FSIcon>
+              {{ language.icon }}
+            </FSIcon>
           </FSRow>
         </template>
       </FSRichTextField>

package/components/map/FSMap.vue

@@ -22,7 +22,38 @@
           :color="ColorEnum.Primary"
           :latlng="gpsPosition"
         />
-        <slot />
+  
+        <FSMapFeatureGroup
+          v-if="$props.areas"
+          :expected-layers="$props.areas.length"
+          @update:bounds="(bounds) => areaGroupBounds = bounds"
+        >
+          <FSMapPolygon
+            v-for="area in areas"
+            :key="area.id"
+            :color="area.color"
+            :latlngs="area.coordinates.map((coord) => ({lat: coord.latitude, lng: coord.longitude}))"
+            @click="$emit('update:selectedAreaId', area.id)"
+          />
+        </FSMapFeatureGroup>
+  
+        <FSMapMarkerClusterGroup
+          v-if="$props.locations"
+          :expected-layers="$props.locations.length"
+          :disableClusteringAtZoom="defaultZoom"
+          @update:bounds="(bounds) => locationGroupBounds = bounds"
+        >
+          <FSMapMarker
+            v-for="location in $props.locations"
+            :selected="location.id === $props.selectedLocationId"
+            :key="location.id"
+            :label="location.label"
+            :color="location.color ?? ColorEnum.Primary"
+            :icon="location.icon ?? 'mdi-map-marker'"
+            :latlng="{lat: location.address.latitude, lng: location.address.longitude}"
+            @click="$emit('update:selectedLocationId', location.id)"
+          />
+        </FSMapMarkerClusterGroup>
       </template>
     </div>
 
@@ -94,9 +125,10 @@ import type {} from "leaflet.markercluster";
 import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng, type FitBoundsOptions, type ZoomPanOptions, type LatLngBounds } from "leaflet";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { type FSArea } from '@dative-gpi/foundation-shared-domain/models';
 
 import { useBreakpoints, useColors, useSlots } from "../../composables";
-import { ColorEnum, type MapLayer } from "../../models";
+import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
 
 import FSMapLayerButton from "./FSMapLayerButton.vue";
 import FSMapOverlay from "./FSMapOverlay.vue";
@@ -106,12 +138,19 @@ import FSCol from "../FSCol.vue";
 
 import FSMapMarker from "./FSMapMarker.vue";
 import FSMapTileLayer from "./FSMapTileLayer.vue";
+import FSMapFeatureGroup from "./FSMapFeatureGroup.vue";
+import FSMapMarkerClusterGroup from "./FSMapMarkerClusterGroup.vue";
+import FSMapPolygon from "./FSMapPolygon.vue";
 
 export default defineComponent({
   name: "FSMap",
   components: {
     FSMapMarker,
     FSMapTileLayer,
+    FSMapFeatureGroup,
+    FSMapMarkerClusterGroup,
+    FSMapPolygon,
+
     FSMapLayerButton,
     FSMapOverlay,
     FSButton,
@@ -155,14 +194,19 @@ export default defineComponent({
       default: false
     },
     center: {
-      type: Array as PropType<number[] | null>,
+      type: Array as PropType<number[]>,
       required: false,
-      default: null
+      default: () => [45.71, 5.07]
     },
-    bounds: {
-      type: Object as PropType<LatLngBounds | null>,
+    locations: {
+      type: Array as PropType<FSLocation[]>,
       required: false,
-      default: null
+      default: () => [],
+    },
+    areas: {
+      type: Array as PropType<FSArea[]>,
+      required: false,
+      default: () => [],
     },
     currentLayer: {
       type: String as PropType<"map" | "imagery">,
@@ -173,6 +217,16 @@ export default defineComponent({
       type: Array as PropType<string[]>,
       required: false,
       default: () => ["map", "imagery"]
+    },
+    selectedLocationId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    selectedAreaId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId", 'update:overlayMode', 'update:currentLayer', "click:latlng"],
@@ -249,6 +303,19 @@ export default defineComponent({
       return mapLayers.find((layer) => layer.name === props.currentLayer)?.layer ?? mapLayers[0].layer;
     });
 
+    const bounds = computed<LatLngBounds | null>(() => {
+      if(!locationGroupBounds.value && !areaGroupBounds.value) {
+        return null;
+      }
+      let bounds = locationGroupBounds.value;
+      if(bounds && areaGroupBounds.value) {
+        bounds.extend(areaGroupBounds.value);
+      } else if(areaGroupBounds.value) {
+        bounds = areaGroupBounds.value;
+      }
+      return bounds as LatLngBounds;
+    });
+
     const overlaySlots = computed(() => {
       return Object.keys(slots).filter((slot) => slot.startsWith("overlay-")).reduce((acc, slot) => {
         acc[slot.replace("overlay-", "")] = slots[slot];
@@ -293,7 +360,7 @@ export default defineComponent({
       if(!map.value) {
         return;
       }
-      map.value.setView(calculateTargetPosition(latLng(lat, lng), zoom), zoom);
+      map.value.setView(calculateTargetPosition(latLng(lat, lng)), zoom);
     }
 
     const fitBounds = (bounds: LatLngBounds, options?: FitBoundsOptions) => {
@@ -327,12 +394,11 @@ export default defineComponent({
         minZoom: 2,
         maxZoom: 22,
         maxBounds: latLngBounds(latLng(-90, -180), latLng(90, 180)),
-        maxBoundsViscosity: 1.0,
-        zoom: 5,
-        center: props.center ? latLng(props.center[0], props.center[1]) : latLng(48.85782, 2.29521)
+        maxBoundsViscosity: 1.0
       };
 
       map.value = markRaw(createMap(leafletContainer.value, mapOptions));
+      setView(props.center[0], props.center[1], defaultZoom);
       
       map.value.on('click', (e: L.LeafletMouseEvent) => {
         emit('click:latlng', e.latlng);
@@ -362,18 +428,41 @@ export default defineComponent({
       mapResizeObserver.disconnect();
     });
 
-    watch ([() => props.center, () => map.value], () => {
-      if(!map.value || !props.center) {
+    watch (() => props.center, (center) => {
+      if(!map.value) {
         return;
       }
-      setView(props.center[0], props.center[1], defaultZoom);
+      setView(center[0], center[1], defaultZoom);
+    });
+
+    watch (() => props.selectedLocationId, (selectedLocationId) => {
+      if(!map.value) {
+        return;
+      }
+      const selectedLocation = props.locations.find((location) => location.id === selectedLocationId);
+      if(!selectedLocation) {
+        return;
+      }
+      flyTo(selectedLocation?.address.latitude, selectedLocation?.address.longitude, defaultZoom, { animate: false });
+    }, { immediate: true });
+
+    watch(() => props.selectedAreaId, (selectedAreaId) => {
+      if(!map.value) {
+        return;
+      }
+      const selectedArea = props.areas.find((area) => area.id === selectedAreaId);
+      if(!selectedArea) {
+        return;
+      }
+      const bounds = latLngBounds(selectedArea.coordinates.map((coord) => latLng(coord.latitude, coord.longitude)));
+      fitBounds(bounds);
     }, { immediate: true });
 
-    watch([() => props.bounds, () => map.value], () => {
-      if(!map.value || !props.bounds) {
+    watch( () => bounds.value, (bounds) => {
+      if(!map.value || !bounds) {
         return;
       }
-      fitBounds(props.bounds, { maxZoom: defaultZoom });
+      fitBounds(bounds, { maxZoom: defaultZoom });
     });
 
     return {

package/components/map/FSMapMarker.vue

@@ -82,20 +82,20 @@ export default {
           iconSize: [size, size],
           iconAnchor: [size / 2, size / 2],
         });
-      } else if(props.variant === 'location') {
+      } else if(props.variant === 'location' && props.icon) {
         const size = 36;
         icon = divIcon({
-          html: locationMarkerHtml(props.icon ?? "mdi-map-marker", getColors(props.color).base, props.label),
+          html: locationMarkerHtml(props.icon, getColors(props.color).base, props.label),
           iconSize: [size, size],
-          className: props.selected ? 'fs-map-marker fs-map-location fs-map-location-selected' : 'fs-map-marker fs-map-location',
+          className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
           iconAnchor: [size / 2, size / 2],
         });
       } else {
-        const size = 16;
+        const size = 20;
         icon = divIcon({
-          html: pinMarkerHtml(getColors(props.color).base, props.label),
+          html: pinMarkerHtml(getColors(props.color).base),
           iconSize: [size, size],
-          className: props.selected ? 'fs-map-marker fs-map-pin fs-map-pin-selected' : 'fs-map-marker fs-map-pin',
+          className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
           iconAnchor: [size / 2, size / 2],
         });
       }

package/components/map/FSMapMarkerClusterGroup.vue

@@ -45,7 +45,7 @@ export default {
 
         return divIcon({
           html: clusterMarkerHtml(cluster.getChildCount()),
-          className: 'fs-map-marker fs-map-cluster-marker',
+          className: 'fs-map-location fs-map-location-full',
           iconSize: [size, size],
           iconAnchor: [size / 2, size / 2],
         });

package/components/tiles/FSTile.vue

@@ -4,48 +4,52 @@
     :height="$props.height"
     :width="$props.width"
   >
-    <FSClickable
-      v-if="$props.singleSelect"
-      padding="12px"
-      :variant="variant"
-      :color="color"
-      :style="style"
-      width="100%"
-      height="100%"
-      @click="() => $emit('update:modelValue', !$props.modelValue)"
-      v-bind="$attrs"
-    >
-      <slot />
-    </FSClickable>
-    <FSClickable
-      v-else-if="$props.href || $props.to || $attrs.onClick"
-      variant="background"
-      class="fs-tile"
-      padding="12px"
-      :color="ColorEnum.Background"
-      :href="$props.href"
-      width="100%"
-      height="100%"
-      :to="$props.to"
-      :style="style"
-      v-bind="$attrs"
+    <template
+      v-if="$props.editable"
     >
-      <slot />
-      <FSCard
-        v-if="$props.editable"
-        class="fs-tile-checkbox"
+      <FSClickable
+        v-if="$props.singleSelect"
+        padding="12px"
+        :variant="variant"
+        :color="color"
+        :style="style"
+        width="100%"
+        height="100%"
+        @click="() => $emit('update:modelValue', !$props.modelValue)"
+        v-bind="$attrs"
+      >
+        <slot />
+      </FSClickable>
+      <FSClickable
+        v-else-if="$props.href || $props.to || $attrs.onClick"
         variant="background"
-        :height="['40px', '32px']"
-        :width="['40px', '32px']"
-        :border="false"
+        class="fs-tile"
+        padding="12px"
+        :color="ColorEnum.Background"
+        :href="$props.href"
+        width="100%"
+        height="100%"
+        :to="$props.to"
+        :style="style"
         v-bind="$attrs"
       >
-        <FSCheckbox
-          :modelValue="$props.modelValue"
-          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-        />
-      </FSCard>
-    </FSClickable>
+        <slot />
+        <FSCard
+          v-if="$props.editable"
+          class="fs-tile-checkbox"
+          variant="background"
+          :height="['40px', '32px']"
+          :width="['40px', '32px']"
+          :border="false"
+          v-bind="$attrs"
+        >
+          <FSCheckbox
+            :modelValue="$props.modelValue"
+            @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+          />
+        </FSCard>
+      </FSClickable>
+    </template>
     <FSCard
       v-else
       variant="background"

package/models/map.ts

@@ -1,8 +1,18 @@
 import { type Layer } from "leaflet";
 
+import { type Address } from "@dative-gpi/foundation-shared-domain/models";
+
 export interface MapLayer {
   name : string;
   label: string;
   image: string;
   layer: Layer;
+}
+
+export interface FSLocation {
+  id: string;
+  label: string;
+  icon: string | null;
+  address: Address;
+  color: string | null;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.137-maps2",
+  "version": "1.0.137-override-widgets",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.137-maps2",
-    "@dative-gpi/foundation-shared-services": "1.0.137-maps2"
+    "@dative-gpi/foundation-shared-domain": "1.0.137-override-widgets",
+    "@dative-gpi/foundation-shared-services": "1.0.137-override-widgets"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "0e9da9645c2c83684220f99135cf12e4c339897c"
+  "gitHead": "1eff5a41302a336f7298d8198527030c6bbf4e65"
 }

package/styles/components/fs_map.scss

@@ -77,10 +77,17 @@
     }
   }
 
-  .fs-map-marker > div {
+  .fs-map-point-pin {
+    background-color: var(--fs-map-point-pin-color);
+    border-radius: 100%;
+  }
+
+  .fs-map-location > div {
     display: flex;
     height: 100%;
+    color: var(--fs-map-location-pin-color);
     border-radius: 50%;
+    background-color: white;
     filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
     align-items: center;
     justify-content: center;
@@ -96,7 +103,7 @@
     }
   }
 
-  .fs-map-cluster-marker > div {
+  .fs-map-location-full > div {
     background-color: var(--fs-map-location-pin-color);
     color: white;
   }
@@ -119,41 +126,6 @@
     }
   }
 
-  .fs-map-location > div {
-    color: var(--fs-map-location-pin-color);
-    background-color: white;
-  }
-
-  .fs-map-pin > div {
-    background-color: var(--fs-map-point-pin-color);
-    position: relative;
-
-    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .fs-map-pin > div::before {
-    content: "";
-    position: absolute;
-    top: -4px;
-    left: -4px;
-    width: calc(100% + 8px);
-    height: calc(100% + 8px);
-    border-radius: 50%;
-    border: 2px solid var(--fs-map-point-pin-color);
-    opacity: 0.4;
-
-    @include clickscreen {
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  .fs-map-pin-selected > div {
-    transform: scale(1.35);
-  }
-
-
   .fs-map-site {
     opacity: 0.6;
     transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);