From e6ce29ef15557770c941818e08f9a5945ce3c5b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andrei=20Ioni=C8=9B=C4=83?= <hi@andrei.io>
Date: Thu, 26 Sep 2024 17:28:52 +0100
Subject: [PATCH] wip

---
 app/Http/Controllers/MapController.php        |  31 ++++--
 app/Providers/AppServiceProvider.php          |   2 +-
 .../js/Components/Map/Filters/Filters.vue     | 100 +++++++++---------
 .../js/Components/PointDetails/Index.vue      |   7 +-
 resources/js/Components/ReportPoint.vue       |   3 +-
 resources/js/Helpers/checkType.js             |  10 ++
 resources/js/Helpers/useMap.js                |   7 +-
 resources/js/Pages/{Home.vue => Map.vue}      |   2 +-
 8 files changed, 99 insertions(+), 63 deletions(-)
 rename resources/js/Pages/{Home.vue => Map.vue} (91%)

diff --git a/app/Http/Controllers/MapController.php b/app/Http/Controllers/MapController.php
index 308b997..4b88fe7 100644
--- a/app/Http/Controllers/MapController.php
+++ b/app/Http/Controllers/MapController.php
@@ -27,13 +27,21 @@
 use Illuminate\Http\Resources\Json\JsonResource;
 use Illuminate\Support\Facades\Vite;
 use Inertia\Inertia;
+use Inertia\LazyProp;
 use Inertia\Response;
 
 class MapController extends Controller
 {
-    public function index(MapCoordinates $coordinates): Response
+    public function index(Request $request, MapCoordinates $coordinates): Response
     {
-        return $this->render($coordinates);
+        if ($request->filters()->isEmpty()) {
+            return $this->render($coordinates);
+        }
+
+        return $this->render($coordinates, [
+            'context' => 'filter',
+            'point' => $this->lazyFetchPoint($request),
+        ]);
     }
 
     public function point(Point $point, MapCoordinates $coordinates): Response
@@ -153,9 +161,7 @@ public function search(Request $request, MapCoordinates $coordinates): Response
                         ->get()
                 );
             },
-            'point' => Inertia::lazy(fn () => PointDetailsResource::make(
-                Point::findOrFail($request->header('Map-Point'))
-            )),
+            'point' => $this->lazyFetchPoint($request),
         ]);
     }
 
@@ -165,7 +171,7 @@ protected function render(MapCoordinates $coordinates, array $props = []): Respo
             ->with('pointTypes')
             ->get();
 
-        return Inertia::render('Home', [
+        return Inertia::render('Map', [
             'mapOptions' => [
                 'bounds' => $coordinates->getBoundsBBox(),
                 'center' => [
@@ -228,4 +234,17 @@ protected function render(MapCoordinates $coordinates, array $props = []): Respo
             ...$props,
         ]);
     }
+
+    protected function lazyFetchPoint(Request $request): LazyProp
+    {
+        return Inertia::lazy(function () use ($request) {
+            if (! $request->hasHeader('Map-Point')) {
+                return null;
+            }
+
+            return PointDetailsResource::make(
+                Point::findOrFail($request->header('Map-Point'))
+            );
+        });
+    }
 }
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 7526a35..862e595 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -109,7 +109,7 @@ protected function registerStrMacros(): void
     protected function registerRequestMacros(): void
     {
         Request::macro('filters', function () {
-            $filterParts = $this->input('filter', []);
+            $filterParts = $this->query();
 
             if (\is_string($filterParts)) {
                 return collect();
diff --git a/resources/js/Components/Map/Filters/Filters.vue b/resources/js/Components/Map/Filters/Filters.vue
index ea1c46b..c0e4a21 100644
--- a/resources/js/Components/Map/Filters/Filters.vue
+++ b/resources/js/Components/Map/Filters/Filters.vue
@@ -9,7 +9,7 @@
         <CheckboxList
             name="service_types"
             :label="$t('filter.service_type')"
-            v-model="form.filter.service"
+            v-model="form.service"
             :options="serviceTypes"
             option-value-key="id"
             option-label-key="name"
@@ -17,12 +17,12 @@
         />
 
         <template v-for="serviceType in serviceTypes" :key="serviceType.slug">
-            <template v-if="form.filter.service.includes(serviceType.id)">
+            <template v-if="form.service.includes(serviceType.id)">
                 <CheckboxList
                     v-if="serviceType.point_types.length > 1"
                     :name="`${serviceType.slug}.type`"
                     :label="$t(`filter.point_type.${serviceType.slug}`)"
-                    v-model="form.filter[serviceType.slug]"
+                    v-model="form[serviceType.slug]"
                     :options="serviceType.point_types"
                     option-value-key="id"
                     option-label-key="name"
@@ -32,7 +32,7 @@
                 <MaterialsChecklist
                     v-if="serviceType.can.collect_materials"
                     name="materials"
-                    v-model="form.filter.materials[serviceType.slug]"
+                    v-model="form.materials[serviceType.slug]"
                     :label="$t('filter.materials')"
                     class="py-6"
                     searchable
@@ -43,7 +43,7 @@
                     v-if="characteristics(serviceType).length"
                     :name="`${serviceType.slug}.type`"
                     :label="$t(`filter.characteristics.${serviceType.slug}`)"
-                    v-model="form.filter.can[serviceType.slug]"
+                    v-model="form.can[serviceType.slug]"
                     :options="characteristics(serviceType)"
                     class="py-6"
                 />
@@ -53,7 +53,7 @@
         <CheckboxList
             name="status"
             :label="$t('filter.status')"
-            v-model="form.filter.status"
+            v-model="form.status"
             :options="statuses"
             class="py-6"
         />
@@ -97,6 +97,10 @@
     const statuses = computed(() => page.props.statuses || []);
 
     const getFilterValue = (key, defaultValue, prefix) => {
+        if (!page.props.hasOwnProperty('filter')) {
+            return defaultValue;
+        }
+
         let filter =
             isString(prefix) && page.props.filter.hasOwnProperty(prefix)
                 ? page.props.filter[prefix]
@@ -135,30 +139,28 @@
     };
 
     const form = useForm({
-        filter: {
-            // Service types
-            service: getFilterValue('service', []),
+        // Service types
+        service: getFilterValue('service', []),
 
-            // Point types
-            ...serviceTypesWithMultiplePointTypes.value.reduce(reduceWithFilterValue(), {}),
+        // Point types
+        ...serviceTypesWithMultiplePointTypes.value.reduce(reduceWithFilterValue(), {}),
 
-            // Materials
-            materials: serviceTypes.value
-                .filter((serviceType) => serviceType.can.collect_materials)
-                .reduce(reduceWithFilterValue('materials'), {}),
+        // Materials
+        materials: serviceTypes.value
+            .filter((serviceType) => serviceType.can.collect_materials)
+            .reduce(reduceWithFilterValue('materials'), {}),
 
-            // Characteristics
-            can: serviceTypes.value
-                .filter((serviceType) => characteristics(serviceType).length)
-                .reduce(reduceWithFilterValue('can'), {}),
+        // Characteristics
+        can: serviceTypes.value
+            .filter((serviceType) => characteristics(serviceType).length)
+            .reduce(reduceWithFilterValue('can'), {}),
 
-            // Status
-            status: getFilterValue('status', []),
-        },
+        // Status
+        status: getFilterValue('status', []),
     });
 
     const hasFilters = computed(() =>
-        Object.entries(form.filter)
+        Object.entries(form)
             .map(([key, value]) => value)
             .flat()
             .some(Boolean)
@@ -190,14 +192,14 @@
         const transform = (data) => {
             data = cloneDeep(data);
 
-            Object.entries(data.filter).forEach(([key, value]) => {
-                data.filter[key] = setFilterValue(value);
+            Object.entries(data).forEach(([key, value]) => {
+                data[key] = setFilterValue(value);
             });
 
-            data.filter.can = pickBy(data.filter.can);
-            data.filter.materials = pickBy(data.filter.materials);
+            data.can = pickBy(data.can);
+            data.materials = pickBy(data.materials);
 
-            data.filter = pickBy(data.filter);
+            data = pickBy(data);
 
             return pickBy(data);
         };
@@ -208,7 +210,7 @@
             }),
             {
                 headers: headers(leafletObject),
-                only: ['points', 'mapOptions', 'filter'],
+                only: ['context', 'points', 'mapOptions', 'filter'],
                 onCancelToken,
             }
         );
@@ -221,26 +223,22 @@
         });
 
         form.defaults({
-            filter: {
-                // Service types
-                service: [],
-
-                // Point types
-                ...serviceTypesWithMultiplePointTypes.value.reduce(callback, {}),
-
-                // Materials
-                materials: serviceTypes.value
-                    .filter((serviceType) => serviceType.can.collect_materials)
-                    .reduce(callback, {}),
-
-                // Characteristics
-                can: serviceTypes.value
-                    .filter((serviceType) => characteristics(serviceType).length)
-                    .reduce(callback, {}),
-
-                // Status
-                status: [],
-            },
+            // Service types
+            service: [],
+
+            // Point types
+            ...serviceTypesWithMultiplePointTypes.value.reduce(callback, {}),
+
+            // Materials
+            materials: serviceTypes.value
+                .filter((serviceType) => serviceType.can.collect_materials)
+                .reduce(callback, {}),
+
+            // Characteristics
+            can: serviceTypes.value.filter((serviceType) => characteristics(serviceType).length).reduce(callback, {}),
+
+            // Status
+            status: [],
         });
 
         form.reset();
@@ -251,7 +249,7 @@
     const shouldApply = ref(true);
 
     watch(
-        () => page.props.filter,
+        () => page.props?.filter,
         (filter) => {
             if (isArray(filter) && !filter.length) {
                 shouldApply.value = false;
@@ -263,7 +261,7 @@
     );
 
     watch(
-        () => form.filter,
+        () => form.data(),
         () => {
             if (shouldApply.value) {
                 applyFilters(form, map.value.leafletObject);
diff --git a/resources/js/Components/PointDetails/Index.vue b/resources/js/Components/PointDetails/Index.vue
index af020d9..9d81bf8 100644
--- a/resources/js/Components/PointDetails/Index.vue
+++ b/resources/js/Components/PointDetails/Index.vue
@@ -2,7 +2,7 @@
     <article
         class="relative max-h-full overflow-x-hidden overflow-y-auto text-sm bg-white border border-gray-300 shadow pointer-events-auto rounded-2xl"
     >
-        <Heading :service="point.service" :name="point.name" @close="closePanel" />
+        <Heading :service="point.service" :name="point.name" @close="closePanel(map.leafletObject)" />
 
         <Subheading :subheading="point.subheading" :status="point.status" />
 
@@ -35,6 +35,9 @@
 </template>
 
 <script setup>
+    import { inject } from 'vue';
+    import { closePanel } from '@/Helpers/useMap.js';
+
     import Actions from '@/Components/PointDetails/Actions.vue';
     import Address from '@/Components/PointDetails/Address.vue';
     import Email from '@/Components/PointDetails/Email.vue';
@@ -48,7 +51,7 @@
     import Subheading from '@/Components/PointDetails/Subheading.vue';
     import Website from '@/Components/PointDetails/Website.vue';
 
-    import { closePanel } from '@/Helpers/useMap.js';
+    const map = inject('map');
 
     const props = defineProps({
         point: {
diff --git a/resources/js/Components/ReportPoint.vue b/resources/js/Components/ReportPoint.vue
index b28cae9..993f504 100644
--- a/resources/js/Components/ReportPoint.vue
+++ b/resources/js/Components/ReportPoint.vue
@@ -141,6 +141,7 @@
     import { trans } from 'laravel-vue-i18n';
     import { ArrowLeftIcon } from '@heroicons/vue/20/solid';
     import route from '@/Helpers/useRoute.js';
+    import { isUndefined } from '@/Helpers/checkType';
     import Button from '@/Components/Button.vue';
     import Modal from '@/Components/Modal.vue';
 
@@ -292,7 +293,7 @@
     const sortedMaterialTypes = computed(() => form.sub_types.sort());
 
     const getMaterialsTypeStep = (id) => {
-        if (problemType.value.slug !== 'materials' || typeof id === 'undefined') {
+        if (problemType.value.slug !== 'materials' || isUndefined(id)) {
             return null;
         }
 
diff --git a/resources/js/Helpers/checkType.js b/resources/js/Helpers/checkType.js
index 440d102..caefaa2 100644
--- a/resources/js/Helpers/checkType.js
+++ b/resources/js/Helpers/checkType.js
@@ -15,9 +15,19 @@ export const getType = (value) => {
 };
 
 export const isArray = (value) => getType(value) === Array;
+
 export const isBoolean = (value) => getType(value) === Boolean;
+
 export const isDate = (value) => getType(value) === Date;
+
 export const isFunction = (value) => getType(value) === Function;
+
+export const isNull = (value) => value === null;
+
 export const isNumber = (value) => getType(value) === Number;
+
 export const isObject = (value) => getType(value) === Object;
+
 export const isString = (value) => getType(value) === String;
+
+export const isUndefined = (value) => typeof value === 'undefined';
diff --git a/resources/js/Helpers/useMap.js b/resources/js/Helpers/useMap.js
index 2db08a8..c2724f6 100644
--- a/resources/js/Helpers/useMap.js
+++ b/resources/js/Helpers/useMap.js
@@ -2,6 +2,7 @@ import { ref } from 'vue';
 import { router, usePage } from '@inertiajs/vue3';
 import route from '@/Helpers/useRoute.js';
 import { getCoordinatesParameter } from '@/Helpers/useCoordinates';
+import { isNull, isUndefined } from '@/Helpers/checkType';
 
 const page = usePage();
 
@@ -61,7 +62,11 @@ export const fetchPoint = (leafletObject, pointId) => {
     });
 };
 
-export const closePanel = () => {
+export const closePanel = (leafletObject) => {
+    if (['filter', 'search'].includes(page.props.context) && !isNull(page.props.point) && !isUndefined(leafletObject)) {
+        return fetchPoint(leafletObject, null);
+    }
+
     const props = page.props.mapOptions;
     const coordinates = getCoordinatesParameter(props.center, props.zoom);
 
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Map.vue
similarity index 91%
rename from resources/js/Pages/Home.vue
rename to resources/js/Pages/Map.vue
index 320a80d..bd95dc5 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Map.vue
@@ -34,7 +34,7 @@
             return true;
         }
 
-        if (props.context === 'search' && point.value !== null) {
+        if (['filter', 'search'].includes(props.context) && point.value !== null) {
             return true;
         }