@dative-gpi/foundation-shared-components 1.0.138 → 1.0.139-auth-token

package/components/autocompletes/FSAutoCompleteAddress.vue

@@ -5,6 +5,9 @@
     :toggleSet="false"
     :multiple="false"
     :items="items"
+    :customFilter="(_label: string, _query: string, item: any) => {
+      return item.value !== $props.modelValue?.placeId;
+    }"
     :modelValue="$props.modelValue?.placeId"
     @update:modelValue="onUpdate"
     v-model:search="search"

package/components/fields/FSClosableSearchField.vue

@@ -0,0 +1,83 @@
+<template>
+  <FSSearchField
+    :modelValue="$props.modelValue"
+    :appendInnerIcon="$props.closable ? $props.appendInnerIcon : null"
+    :clearable="false"
+    @click:appendInner="onCloseClicked"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSSearchField>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import FSSearchField from "./FSSearchField.vue";
+
+export default defineComponent({
+  name: "FSClosableSearchField",
+  components: {
+    FSSearchField
+  },
+  props: {
+    closable: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    unfocusOnClose: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    clearOnClose: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    appendInnerIcon: {
+      type: String as PropType<string | undefined>,
+      required: false,
+      default: 'mdi-close'
+    }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(props, { emit }) {
+    const onCloseClicked = ($event: MouseEvent) => {
+      if(!props.closable) {
+        return;
+      }
+
+      if (props.unfocusOnClose) {
+        $event.preventDefault();
+        $event.stopPropagation();
+        (document.activeElement  as HTMLElement)?.blur();
+      }
+      if (props.clearOnClose) {
+        emit('update:modelValue', null);
+      }
+
+      emit('close');
+    };
+
+    return {
+      onCloseClicked
+    };
+  }
+});
+</script>

package/components/fields/FSRichTextField.vue

@@ -501,11 +501,11 @@ export default defineComponent({
           return;
         }
         const editorModelValue = JSON.stringify(editorState.toJSON());
-        if(editorModelValue === emptyLexicalState) {
+        if(editorModelValue === emptyLexicalState && props.modelValue !== null) {
           emit("update:modelValue", null);
           return;
         }
-        if(editorModelValue !== props.modelValue) {
+        if(editorModelValue !== emptyLexicalState && editorModelValue !== props.modelValue) {
           emit("update:modelValue", editorModelValue);
         }
       });
@@ -674,21 +674,16 @@ export default defineComponent({
         return;
       }
       if (props.modelValue != null) {
-        editor.update(() => {
-          if (typeof props.modelValue === "string") {
-            if (props.modelValue !== "") {
-              editor.setEditorState(editor.parseEditorState(props.modelValue!));
-            }
-          }
-          else {
-            editor.setEditorState(editor.parseEditorState(JSON.stringify(props.modelValue)));
-          }
-        });
-        return;
+        if (typeof props.modelValue === "string" && props.modelValue !== "") {
+          editor.setEditorState(editor.parseEditorState(props.modelValue!));
+          return;
+        }
+        if (typeof props.modelValue === "object") {
+          editor.setEditorState(editor.parseEditorState(JSON.stringify(props.modelValue)));
+          return;
+        }
       }
-      editor.update(() => {
-        editor.setEditorState(editor.parseEditorState(emptyLexicalState));
-      });
+      editor.setEditorState(editor.parseEditorState(emptyLexicalState));
     }
 
     watch(() => props.modelValue, () => {

package/components/tiles/FSChartTileUI.vue

@@ -2,6 +2,7 @@
   <FSTile
     :width="['275px','336px']"
     :height="['124px','156px']"
+    :editable="$props.editable"
     borderRadius="8px"
     v-bind="$attrs"
   >
@@ -99,6 +100,11 @@ export default defineComponent({
       type: Number as PropType<ChartType>,
       required: false,
       default: ChartType.None
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   setup() {

package/components/tiles/FSTile.vue

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

package/composables/useAddress.ts

@@ -1,20 +1,25 @@
+/// <reference types="@types/google.maps" />
 import _ from "lodash";
 
 import { Address, type Place } from "@dative-gpi/foundation-shared-domain/models";
+import { useAppLanguageCode } from '@dative-gpi/foundation-shared-services/composables';
 
 export const useAddress = () => {
   const enabled = true;
+  const { languageCode } = useAppLanguageCode();
+
   let initialized = false;
+  let userLocation: google.maps.LatLngLiteral | null;
   let searchService: google.maps.places.AutocompleteService;
   let placeService: google.maps.places.PlacesService;
   let sessionId: google.maps.places.AutocompleteSessionToken;
-  
 
   const init = async () => {
     await window.initMap;
+    userLocation = await getCurrentLocation();
     searchService = new google.maps.places.AutocompleteService();
     placeService = new google.maps.places.PlacesService(
-      document.getElementById("places") as HTMLDivElement
+      document.createElement("div")
     );
     sessionId = new google.maps.places.AutocompleteSessionToken();
     initialized = true;
@@ -25,11 +30,12 @@ export const useAddress = () => {
       await init();
     } 
 
-    return _search(search).then(result => {
-      return _.map(result, r => ({ id: r.place_id, label: r.description }));
-    }).catch(() => {
-      return [];
-    });
+    const mapsResults = await _search(search);
+
+    return mapsResults.map((result) => ({
+      id: result.place_id,
+      label: result.description
+    }));
   }
 
   const get = async (place: Place): Promise<Address> => {
@@ -78,16 +84,42 @@ export const useAddress = () => {
     });
   }
 
+  const getCurrentLocation = async (): Promise<google.maps.LatLngLiteral | null> => {
+    if (!navigator.geolocation) {
+      return null;
+    }
+  
+    return new Promise((resolve) => {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          resolve({
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          });
+        },
+        () => resolve(null)
+      );
+    });
+  };
+
   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) => {
+        /**
+         * ISO 3166 language code
+         */
+        const isoLanguageCode = languageCode.value?.split("-")[0];
+
         searchService!.getPlacePredictions(
           {
             input: search,
-            sessionToken: sessionId!
+            region: isoLanguageCode,
+            language: isoLanguageCode,
+            sessionToken: sessionId,
+            locationBias: userLocation,
           },
           function (result, status) {
             if (status != google.maps.places.PlacesServiceStatus.OK || !result) {

package/package.json

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