From 2d532d5aa8762ba60a802d0c81d51c9e469e5541 Mon Sep 17 00:00:00 2001
From: guillaume91 <guillaume@sobit.nl>
Date: Mon, 17 Jun 2024 14:36:27 +0200
Subject: [PATCH] [fix] Settings -> geojson file input: Validators are now
 fixed. Leaflet doesn't break when you upload a wrong filetype.

---
 .../app/Livewire/Projects/Tabs/Settings.php   | 16 +++---
 laravel_app/public/build/manifest.json        |  2 +-
 .../livewire/projects/tabs/settings.blade.php | 55 +++++++++++++------
 3 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/laravel_app/app/Livewire/Projects/Tabs/Settings.php b/laravel_app/app/Livewire/Projects/Tabs/Settings.php
index f77bbb3..0ce4856 100644
--- a/laravel_app/app/Livewire/Projects/Tabs/Settings.php
+++ b/laravel_app/app/Livewire/Projects/Tabs/Settings.php
@@ -168,8 +168,9 @@ private function resetFormData()
     private function validateForm()
     {
         $projectIdentifier = $this->formData['id'] ?? null;
+        $acceptedGeoJsonExtenstions = ['txt','json','geojson'];
 
-        return Validator::make([
+        return  Validator::make([
             'name' => $this->formData['name'],
             'pivot_file' => $this->formData['pivot_file'],
             'span_file' => $this->formData['span_file'],
@@ -181,15 +182,14 @@ private function validateForm()
                 'string',
                 'max:255'
             ],
-            'pivot_file.extension' => ['sometimes', function ($attribute, $value, $fail) {
-                if ($value && $value != 'json') {
-
-                    $fail('Not a json file');
+            'pivot_file.extension' => ['sometimes', function ($attribute, $value, $fail) use ($acceptedGeoJsonExtenstions) {
+                if ($value && !in_array($value, $acceptedGeoJsonExtenstions)) {
+                    $fail('The upload field must have one of the following extensions: json, geojson or txt.');
                 }
             }],
-            'span_file.extension' => ['sometimes', function ($attribute, $value, $fail) {
-                if ($value && $value != 'json') {
-                    $fail('Not a json file');
+            'span_file.extension' => ['sometimes', function ($attribute, $value, $fail) use ($acceptedGeoJsonExtenstions) {
+                if ($value && !in_array($value, $acceptedGeoJsonExtenstions)) {
+                    $fail('The upload field must have one of the following extensions: json, geojson or txt.');
                 }
             }],
             'harvest_file' => ['sometimes', new HarvestFile],
diff --git a/laravel_app/public/build/manifest.json b/laravel_app/public/build/manifest.json
index 05005ad..32752e5 100644
--- a/laravel_app/public/build/manifest.json
+++ b/laravel_app/public/build/manifest.json
@@ -57,7 +57,7 @@
     "dynamicImports": [
       "resources/js/alpine.js"
     ],
-    "file": "assets/app-a46f5c70.js",
+    "file": "assets/app-3ccb483c.js",
     "isEntry": true,
     "src": "resources/js/app.js"
   }
diff --git a/laravel_app/resources/views/livewire/projects/tabs/settings.blade.php b/laravel_app/resources/views/livewire/projects/tabs/settings.blade.php
index a5d2df8..6e6f4bd 100644
--- a/laravel_app/resources/views/livewire/projects/tabs/settings.blade.php
+++ b/laravel_app/resources/views/livewire/projects/tabs/settings.blade.php
@@ -69,21 +69,24 @@
 
                 },
                 removeLayer(type){
-                    window.geoJsonLayer.clearLayers();
-                    switch(type){
-                        case 'pivot_file':
-                            window.mapLayers.shift();
-                            break;
-                        case 'span_file':
-                            window.mapLayers.pop();
-                            break;
-                        default:
-                            break;
+                    try{
+                        window.geoJsonLayer.clearLayers();
+                        switch(type){
+                            case 'pivot_file':
+                                window.mapLayers.shift();
+                                break;
+                            case 'span_file':
+                                window.mapLayers.pop();
+                                break;
+                            default:
+                                break;
+                        }
+                        if(window.mapLayers.length == 0) window.map.style.height='0px';
+                        window.mapLayers.forEach((data) => this.updateLayer(data));
+                        window.map.focus();
+                    }catch(e){
+                        console.debug('Not a geojson file, keep going.');
                     }
-                    if(window.mapLayers.length == 0) window.map.style.height='0px';
-                    window.mapLayers.forEach((data) => this.updateLayer(data));
-                    window.map.focus();
-
                 }
              }"
      x-on:livewire-upload-finish.document="processFile($event.target.files[0],$event.target.closest('[id]').id);"
@@ -113,28 +116,44 @@
                     <div id="pivot_file">
                         <livewire:dropzone
                             wire:model="pivotFiles"
-                            :rules="['extensions:json,geojson','mimes:json,geojson']"
-                            :key="'pivotFiles'"
                             wire:key="'pivotFiles'"
                         />
                     </div>
                     @error('pivotFiles')
                     <span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
                     @enderror
+                    @error('pivot_file.extension')
+                    <div class="bg-red-50 p-4 w-full mb-4 rounded dark:bg-red-600">
+                        <div class="flex gap-3 items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-red-400 dark:text-red-200">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path>
+                            </svg>
+                            <h3 class="text-sm text-red-800 font-medium dark:text-red-100">{{ $message }}</h3>
+                        </div>
+                    </div>
+                    @enderror
                 </div>
                 <div class="flex flex-col mb-2 gap-2">
                     <p>{{__('Span GeoJSON file.')}}</p>
                     <div id="span_file">
                         <livewire:dropzone
                             wire:model="spanFiles"
-                            :rules="['extensions:json,geojson','mimes:json,geojson']"
-                            :key="'spanFiles'"
                             wire:key="'spanFiles'"
                         />
                     </div>
                     @error('spanFiles')
                     <span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
                     @enderror
+                    @error('span_file.extension')
+                        <div class="bg-red-50 p-4 w-full mb-4 rounded dark:bg-red-600">
+                            <div class="flex gap-3 items-start">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-red-400 dark:text-red-200">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path>
+                                </svg>
+                                <h3 class="text-sm text-red-800 font-medium dark:text-red-100">{{ $message }}</h3>
+                            </div>
+                        </div>
+                    @enderror
                 </div>
                 <div class="flex flex-col mb-2 gap-2">
                     <p>{{__('Harvested Data file.')}}</p>