wip geolocation

demo/app/Sharp/TestForm/TestForm.php

@@ -92,8 +92,11 @@ public function buildFormFields(FieldsContainer $formFields): void
                 SharpFormGeolocationField::make('geolocation')
                     ->setLabel('Geolocation')
                     ->setApiKey(env('GMAPS_KEY'))
-                    ->setMapsProvider('osm')
-                    ->setGeocodingProvider('osm')
+                    ->setGoogleMapsMapId(env('GMAPS_MAP_ID'))
+//                    ->setMapsProvider('osm')
+//                    ->setGeocodingProvider('osm')
+                    ->setMapsProvider('gmaps')
+                    ->setGeocodingProvider('gmaps')
     //                ->setDisplayUnitDecimalDegrees()
                     ->setDisplayUnitDegreesMinutesSeconds()
                     ->setGeocoding()

docs/guide/form-fields/geolocation.md

@@ -77,6 +77,9 @@ This method will set the API key for geocoding only.
 
 This method will set the API key for maps only.
 
+### `setGoogleMapsMapId(string $mapId)`
+
+Google Maps API now requires a [Map ID](https://developers.google.com/maps/documentation/get-map-id) to use markers. It must be defined if maps provider is set to "gmaps".
 
 ## Formatter
 

package.json

@@ -51,6 +51,7 @@
   "dependencies": {
     "@fawmi/vue-google-maps": "^0.9.79",
     "@fortawesome/fontawesome-free": "^6.4.0",
+    "@googlemaps/js-api-loader": "^1.16.8",
     "@headlessui/vue": "^1.7.19",
     "@heroicons/vue": "^2.0.18",
     "@inertiajs/vue3": "^1.2.0",

resources/js/components/PageAlert.vue

@@ -9,12 +9,16 @@
 </script>
 
 <template>
-    <Alert :variant="pageAlert.level === 'danger' ? 'destructive' : 'default'">
+    <Alert :variant="
+        pageAlert.level === 'danger' ? 'destructive'
+        : pageAlert.level === 'primary' ? 'primary'
+        : 'default'
+    ">
         <template v-if="pageAlert.level === 'danger'">
             <CircleAlert class="w-4 h-4"/>
         </template>
         <template v-else-if="pageAlert.level === 'warning'">
-            <TriangleAlert class="w-4 h-4" />
+            <TriangleAlert class="w-4 h-4 text-destructive" />
         </template>
         <template v-else>
             <Info class="w-4 h-4" />

resources/js/components/ui/alert/index.ts

@@ -5,13 +5,13 @@ export { default as AlertTitle } from './AlertTitle.vue'
 export { default as AlertDescription } from './AlertDescription.vue'
 
 export const alertVariants = cva(
-  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg:has(+div)]:mt-0.5 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg:has(+div)]:mt-0.5 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
   {
     variants: {
       variant: {
         default: 'bg-background text-foreground',
-        destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+        primary: 'bg-background text-accent-foreground border-primary/30',
+        destructive: 'border-destructive/50 text-destructive dark:border-destructive',
       },
     },
     defaultVariants: {

resources/js/form/components/Field.vue

@@ -28,7 +28,7 @@
         'check': Check,
         // 'date': DateInput,
         'editor': Editor,
-        // 'geolocation': Geolocation,
+        'geolocation': Geolocation,
         'html': Html,
         'list': List,
         // 'number': NumberInput,

resources/js/form/components/fields/Html.vue

@@ -4,11 +4,11 @@
     import FormFieldLayout from "@/form/components/FormFieldLayout.vue";
     import { FormFieldProps } from "@/form/types";
 
-    defineProps<FormFieldProps<FormHtmlFieldData>>();
+    const props = defineProps<FormFieldProps<FormHtmlFieldData>>();
 </script>
 
 <template>
-    <FormFieldLayout v-bind="$props">
+    <FormFieldLayout v-bind="props">
         <div class="text-sm">
             <TemplateRenderer
                 :template="field.template"

resources/js/form/components/fields/geolocation/Geolocation.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
     import { __ } from "@/utils/i18n";
     import { Button } from '@/components/ui/button';
-    import { Modal } from "@/components/ui";
+    import { Loading, Modal } from "@/components/ui";
     import GeolocationEdit from './GeolocationEdit.vue';
     import { FormGeolocationFieldData } from "@/types";
     import type { Component } from "vue";
@@ -10,6 +10,22 @@
     import { onMounted, ref } from "vue";
     import { dd2dms, triggerResize } from "./utils";
     import { loadGmaps } from "./gmaps/load";
+    import {
+        Dialog,
+        DialogClose,
+        DialogFooter,
+        DialogHeader,
+        DialogScrollContent,
+        DialogTitle
+    } from "@/components/ui/dialog";
+    import {
+        EditableMapComponentProps,
+        GeocodeParams, LatLng,
+        MapComponentProps
+    } from "@/form/components/fields/geolocation/types";
+    import { Input } from "@/components/ui/input";
+    import gmapsGeocode from "@/form/components/fields/geolocation/gmaps/geocode";
+    import osmGeocode from "@/form/components/fields/geolocation/osm/geocode";
 
     const props = defineProps<{
         field: FormGeolocationFieldData,
@@ -24,9 +40,56 @@
     };
 
     const ready = ref(false);
-    const modalVisible = ref(false);
+    const modalOpen = ref(false);
+    const modalLoading = ref(false);
+    const modalMessage = ref('');
+    const modalSearch = ref('');
+    const modalMapBounds = ref(null);
     const modalMarkerPosition = ref(props.value);
 
+    function geocode(params: GeocodeParams) {
+        if(props.field.geocodingProvider.name === 'gmaps') {
+            return gmapsGeocode(params);
+        }
+        return osmGeocode(params);
+    }
+
+    function onModalSearchSubmit() {
+        const address = modalSearch.value;
+        modalMessage.value = '';
+        modalLoading.value = true;
+        geocode({ address: modalSearch.value })
+            .then(results => {
+                if(results.length > 0) {
+                    modalMapBounds.value = results[0].bounds;
+                    modalMarkerPosition.value = results[0].location;
+                } else {
+                    modalMessage.value = __('sharp::form.geolocation.modal.geocode_input.message.no_results', { query: address ?? '' });
+                }
+            })
+            .catch(status => {
+                modalMessage.value = `${__(`sharp::form.geolocation.modal.geocode_input.message.error`)}${status?` (${status})`:''}`;
+            })
+            .finally(() => {
+                modalLoading.value = false;
+            });
+    }
+
+    function onModalMarkerPositionChange(position: LatLng) {
+        if(props.field.geocoding) {
+            modalLoading.value = true;
+            geocode({ latLng: position })
+                .then(results => {
+                    if(results.length > 0) {
+                        modalSearch.value = results[0].address;
+                    }
+                })
+                .finally(() => {
+                    modalLoading.value = false;
+                });
+        }
+    }
+
     function onModalSubmit() {
         emit('input', modalMarkerPosition.value);
     }
@@ -50,68 +113,108 @@
 </script>
 
 <template>
-    <div class="SharpGeolocation">
+    <div>
         <template v-if="!ready">
             {{ __('sharp::form.geolocation.loading') }}
         </template>
         <template v-else-if="!value">
-            <Button variant="secondary" class="w-full" @click="modalVisible = true">
+            <Button variant="secondary" class="w-full" @click="modalOpen = true">
                 {{ __('sharp::form.geolocation.browse_button') }}
             </Button>
         </template>
         <template v-else>
-            <div class="card card-body form-control">
-                <div class="row">
-                    <div class="col-7">
-                        <component
-                            :is="components[field.mapsProvider.name]"
-                            class="max-w-full pb-[80%]"
-                            :marker-position="value"
-                            :center="value"
-                            :zoom="field.zoomLevel"
-                            :max-bounds="field.boundaries ? [field.boundaries.sw, field.boundaries.ne] : null"
-                            :tiles-url="field.mapsProvider.name === 'osm' ? field.mapsProvider.options.tilesUrl : null"
-                        />
+            <div class="bg-background border border-input flex rounded-md p-4">
+                <div class="w-[40%]">
+                    <component
+                        :is="components[field.mapsProvider.name]"
+                        class="max-w-full pb-[80%]"
+                        :marker-position="value"
+                        :center="value"
+                        :zoom="field.zoomLevel"
+                        :max-bounds="field.boundaries ? [field.boundaries.sw, field.boundaries.ne] : null"
+                        :tiles-url="field.mapsProvider.name === 'osm' ? field.mapsProvider.options.tilesUrl : null"
+                    />
+                </div>
+                <div class="d-flex flex-column justify-content-between h-100">
+                    <div>
+                        <div><small>Latitude : {{ field.displayUnit === 'DMS' ? dd2dms(value.lat) : value.lat }}</small></div>
+                        <div><small>Longitude : {{ field.displayUnit === 'DMS' ? dd2dms(value.lng, true) : value.lng }}</small></div>
                     </div>
-                    <div class="col-5 pl-0">
-                        <div class="d-flex flex-column justify-content-between h-100">
-                            <div>
-                                <div><small>Latitude : {{ field.displayUnit === 'DMS' ? dd2dms(value.lat) : value.lat }}</small></div>
-                                <div><small>Longitude : {{ field.displayUnit === 'DMS' ? dd2dms(value.lng, true) : value.lng }}</small></div>
-                            </div>
-                            <div>
-                                <Button variant="destructive" size="sm" :disabled="field.readOnly"
-                                    @click="$emit('input', null)"
-                                >
-                                    {{ __('sharp::form.geolocation.remove_button') }}
-                                </Button>
-                                <Button variant="outline" size="sm" :disabled="field.readOnly" @click="modalVisible = true">
-                                    {{ __('sharp::form.geolocation.edit_button') }}
-                                </Button>
-                            </div>
-                        </div>
+                    <div>
+                        <Button variant="destructive" size="sm" :disabled="field.readOnly"
+                            @click="$emit('input', null)"
+                        >
+                            {{ __('sharp::form.geolocation.remove_button') }}
+                        </Button>
+                        <Button variant="outline" size="sm" :disabled="field.readOnly" @click="modalOpen = true">
+                            {{ __('sharp::form.geolocation.edit_button') }}
+                        </Button>
                     </div>
                 </div>
             </div>
         </template>
-        <Modal
-            v-model:visible="modalVisible"
-            no-close-on-backdrop
-            @ok="onModalSubmit"
+        <Dialog
+            v-model:open="modalOpen"
         >
-            <template #title>
-                <template v-if="field.geocoding">
-                    {{  __('sharp::form.geolocation.modal.title') }}
-                </template>
-                <template v-else>
-                    {{__('sharp::form.geolocation.modal.title-no-geocoding') }}
-                </template>
-            </template>
-            <GeolocationEdit
-                :field="field"
-                :value="value"
-                v-model:marker-position="modalMarkerPosition"
-            />
-        </Modal>
+            <DialogScrollContent class="gap-6" @pointer-down-outside.prevent>
+                <DialogHeader>
+                    <DialogTitle>
+                        <template v-if="field.geocoding">
+                            {{  __('sharp::form.geolocation.modal.title') }}
+                        </template>
+                        <template v-else>
+                            {{__('sharp::form.geolocation.modal.title-no-geocoding') }}
+                        </template>
+                    </DialogTitle>
+                </DialogHeader>
+
+                <div>
+                    <template v-if="field.geocoding">
+                        <div class="mb-2">
+                            <form @submit.prevent="onModalSearchSubmit">
+                                <div class="flex">
+                                    <Input class="flex-1" v-model="modalSearch"
+                                        :placeholder="__('sharp::form.geolocation.modal.geocode_input.placeholder')"
+                                    />
+                                    <Button class="ml-2" variant="outline" :disabled="modalLoading">
+                                        {{ __('sharp::form.geolocation.modal.search_button') }}
+                                    </Button>
+                                </div>
+                            </form>
+
+                            <template v-if="modalMessage">
+                                <small>{{ modalMessage }}</small>
+                            </template>
+                        </div>
+                    </template>
+
+                    <component
+                        :is="components[field.mapsProvider.name]"
+                        class="aspect-[1/1]"
+                        v-bind="{
+                            field,
+                            markerPosition: modalMarkerPosition,
+                            bounds: modalMapBounds,
+                            maxBounds: field.boundaries ? [field.boundaries.sw, field.boundaries.ne] : null,
+                            center: value ?? field.initialPosition ?? { lat:48.5838961, lng:7.7421826 },
+                            zoom: field.zoomLevel,
+                            editable: true,
+                        } satisfies MapComponentProps"
+                        @change="onModalMarkerPositionChange"
+                    />
+                </div>
+
+                <DialogFooter>
+                    <DialogClose as-child>
+                        <Button variant="outline">
+                            {{ __('sharp::modals.cancel_button') }}
+                        </Button>
+                    </DialogClose>
+                    <Button @click="onModalSubmit">
+                        {{ __('sharp::modals.command.submit_button') }}
+                    </Button>
+                </DialogFooter>
+            </DialogScrollContent>
+        </Dialog>
     </div>
 </template>