@dative-gpi/foundation-shared-components 0.0.177 → 0.0.178

package/components/FSDivider.vue

@@ -68,7 +68,7 @@ export default defineComponent({
     variant: {
       type: String as PropType<"base" | "light" | "dark">,
       required: false,
-      default: "dark"
+      default: "base"
     },
     vertical: {
       type: Boolean as PropType<boolean>,
@@ -114,4 +114,4 @@ export default defineComponent({
     };
   }
 });
-</script>
+</script>

package/components/autocompletes/FSAutoCompleteAddress.vue

@@ -0,0 +1,104 @@
+<template>
+  <FSAutocompleteField
+    :clearable="false"
+    :toggleSet="false"
+    :multiple="false"
+    :items="places"
+    :modelValue="modelValuePlace"
+    @update:modelValue="onUpdate"
+    v-model:search="search"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, watch } from "vue";
+
+import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { useAddress } from "../../composables/useAddress";
+
+import type { Address, Place } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  name: "FSAutocompleteAddress",
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Function as () => Address | null,
+      required: false,
+      default: null
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { search: searchAddress, get: getAddress  } = useAddress();
+
+    const places = ref<Place[]>([]);
+    const modelValuePlace = ref<Place | null>(null);
+
+    const innerFetch = async (search: string | null) => {
+      if (search === null) {
+        return Promise.resolve([]);
+      }
+      places.value = await searchAddress(search);
+      return Promise.resolve([]);
+    };
+
+    const innerUpdate = async (value: { id: string; label: string; } | { id: string; label: string; }[] | null) => {
+      if (value === null) {
+        emit("update:modelValue", null);
+        return;
+      }
+      if (Array.isArray(value)) {
+        value = value[0];
+      }
+      const address = await getAddress(value);
+      emit("update:modelValue", address );
+    };
+
+    const { search, onUpdate } = useAutocomplete(
+      places,
+      [],
+      emit,
+      innerFetch,
+      innerUpdate,
+      (item) => (item).id,
+      (item) => (item).label,
+      true,
+      false
+    );
+
+    const addressToPlace = (address: Address): Place => {
+      return {
+        id: address.placeId,
+        label: address.placeLabel
+      };
+    };
+
+    onMounted(() => {
+      if(!props.modelValue) {
+        return;
+      }
+      modelValuePlace.value = addressToPlace(props.modelValue);
+    });
+
+    watch(() => props.modelValue, (newValue) => {
+      if(!newValue) {
+        return;
+      }
+      modelValuePlace.value = addressToPlace(newValue);
+    });
+
+    return {
+      modelValuePlace,
+      places,
+      search,
+      onUpdate
+    };
+  }
+});
+</script>

package/components/fields/FSAutocompleteField.vue

@@ -314,6 +314,7 @@ import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSAutocompleteField",
+  inheritAttrs: false,
   components: {
     FSSearchField,
     FSDialogMenu,
@@ -355,7 +356,7 @@ export default defineComponent({
       default: "label"
     },
     modelValue: {
-      type: [Array, String] as PropType<string[] | string | null>,
+      type: [Array, String, Object] as PropType<string[] | string | null | any>,
       required: false,
       default: null
     },

package/composables/useAddress.ts

@@ -0,0 +1,113 @@
+import type { Place } from "@dative-gpi/foundation-shared-domain/models";
+import { Address } from "@dative-gpi/foundation-shared-domain/models";
+import _ from "lodash";
+
+export const useAddress = () => {
+  const enabled = true;
+  let initialized = false;
+  let searchService: google.maps.places.AutocompleteService;
+  let placeService: google.maps.places.PlacesService;
+  let sessionId: google.maps.places.AutocompleteSessionToken;
+
+  const init = async () => {
+    await window.initMap;
+    searchService = new google.maps.places.AutocompleteService();
+    placeService = new google.maps.places.PlacesService(
+      document.getElementById("places") as HTMLDivElement
+    );
+    sessionId = new google.maps.places.AutocompleteSessionToken();
+    initialized = true;
+  }
+
+
+  const search = async (search: string): Promise<Place[]> => {
+    if(!initialized){
+      await init();
+    } 
+
+    return _search(search).then(result => {
+      return _.map(result, r => ({ id: r.place_id, label: r.description }));
+    }).catch(() => {
+      return [];
+    });
+  }
+
+  const get = async (place: Place): Promise<Address> => {
+    if(!initialized){
+      await init();
+    } 
+
+    const response = await _get(place.id);
+    sessionId = new google.maps.places.AutocompleteSessionToken();
+    if (response.address_components && response.formatted_address && response.geometry) {
+      return new Address({
+        formattedAddress: response.formatted_address,
+        locality: _find(response.address_components, "locality"),
+        country: _find(response.address_components, "country"),
+        latitude: response.geometry.location?.lat() ?? 0,
+        longitude: response.geometry.location?.lng() ?? 0,
+
+        placeId: place.id,
+        placeLabel: place.label,
+      })
+    }
+    throw new Error("missing informations");
+  }
+
+  const _search = (search: string) => {
+    if (!enabled) {
+      throw new Error("offline mode, do not call this method");
+    }
+    return new Promise<google.maps.places.AutocompletePrediction[]>(
+      (resolve, reject) => {
+        searchService!.getPlacePredictions(
+          {
+            input: search,
+            sessionToken: sessionId!
+          },
+          function (result, status) {
+            if (status != google.maps.places.PlacesServiceStatus.OK || !result) {
+              reject(status);
+            } else {
+              resolve(result);
+            }
+          }
+        );
+      }
+    );
+  }
+
+  const _get = (id: string) => {
+    if (!enabled) {
+      throw new Error("offline mode, do not call this method");
+    }
+    return new Promise<google.maps.places.PlaceResult>((resolve, reject) => {
+      placeService!.getDetails(
+        {
+          placeId: id,
+          sessionToken: sessionId!,
+          fields: ["formatted_address", "geometry", "address_components", "name"]
+        },
+        (result, status) => {
+          if (status != google.maps.places.PlacesServiceStatus.OK || !result) {
+            reject(status);
+          } else {
+            resolve(result);
+          }
+        }
+      );
+    });
+  }
+
+  const _find = (components: google.maps.GeocoderAddressComponent[], type: string): string => {
+    const found = _.find(components, c =>
+      _.some(c.types, t => t === type)
+    );
+    return (found && found.long_name) || "";
+  }
+
+  return {
+    search,
+    get
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.177",
+  "version": "0.0.178",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.177",
-    "@dative-gpi/foundation-shared-services": "0.0.177"
+    "@dative-gpi/foundation-shared-domain": "0.0.178",
+    "@dative-gpi/foundation-shared-services": "0.0.178"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -32,8 +32,9 @@
   },
   "devDependencies": {
     "@types/color": "3.0.6",
+    "@types/google.maps": "^3.55.10",
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "74456c52854b727eb9ab7a7ccb4a264e8e4ed15f"
+  "gitHead": "965b5f2c9bdb926c03d5a17f94991d2fc2621e51"
 }

package/plugins/index.ts

@@ -1 +1,2 @@
-export * from "./colorPlugin";
+export * from "./colorPlugin";
+export * from "./mapsPlugin";

package/plugins/mapsPlugin.ts

@@ -0,0 +1,37 @@
+import type { Plugin } from "vue";
+
+export const MapsPlugin: Plugin = {
+  install: (_app, options: MapsOptions) => {
+    if(window?.initMap) {
+      return;
+    }
+    const key = options?.key ?? import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
+    const maps = document.createElement("script");
+    maps.setAttribute(
+      "src",
+      `https://maps.googleapis.com/maps/api/js?key=${key}&loading=async&libraries=geometry,places`
+    );
+
+    let resolvePromise: (value: void) => void;
+
+    const promise = new Promise<void>((resolve) => {
+      resolvePromise = resolve;
+    });
+
+    window.initMap = promise;
+
+    maps.onload = () => {
+      resolvePromise();
+    };
+
+    document.head.appendChild(maps);
+
+    const autocomplete = document.createElement("div");
+    autocomplete.id = "places";
+    document.body.appendChild(autocomplete);
+  }
+}
+
+export interface MapsOptions {
+  key?: string;
+}

package/shims-plugin.d.ts

@@ -6,4 +6,6 @@ declare module "vue" {
     interface ComponentCustomProperties {
         $color: (key: ColorBase) => string;
     }
-}
+}
+
+declare module 'googlemaps';

package/shims-window.d.ts

@@ -0,0 +1,3 @@
+declare interface Window {
+  initMap?: Promise<void>;
+}