Fix settings form file delete

OHFLesvos · Aug 1, 2023 · fc2f4be · fc2f4be
1 parent b7e60f8
commit fc2f4be
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 28 deletions.
diff --git a/app/Http/Controllers/Settings/API/SettingsController.php b/app/Http/Controllers/Settings/API/SettingsController.php
@@ -6,9 +6,11 @@
 use App\Settings\SettingsField;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
+use Illuminate\Http\Response;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Str;
+use Illuminate\Validation\Rule;
 use Setting;
 
 class SettingsController extends Controller
@@ -146,6 +148,30 @@ public function reset(): JsonResponse
             ]);
     }
 
+    public function resetField(string $key): JsonResponse
+    {
+        $fields = self::getSettings();
+        if (!$fields->keys()->map(fn ($k) => Str::slug($k))->contains($key)) {
+            return response()
+            ->json([
+                'message' => __("Invalid field."),
+            ], Response::HTTP_UNPROCESSABLE_ENTITY);
+        }
+
+        $settingsKey = $fields->filter(fn ($v, $k) => Str::slug($k) == $key)->map(fn ($v, $k) => $k)->first();
+        $field = $fields[$settingsKey];
+        if ($field->formType() == 'file' && Setting::has($settingsKey)) {
+            Storage::delete(Setting::get($settingsKey));
+        }
+        Setting::forget($settingsKey);
+        Setting::save();
+
+        return response()
+            ->json([
+                'message' => __($field->label().' has been reset.'),
+            ]);
+    }
+
     private static function updateFieldValue(SettingsField $field, Request $request, string $key): void
     {
         if ($field->formType() == 'file') {

diff --git a/resources/js/api/settings.js b/resources/js/api/settings.js
@@ -9,11 +9,17 @@ export default {
         return await api.get(url);
     },
     async update(data) {
+        const formData = new FormData();
+        Object.entries(data).forEach(e => formData.append(e[0], e[1]));
         const url = route("api.settings.update");
-        return await api.put(url, data);
+        return await api.postFormData(url, formData);
     },
     async reset() {
         const url = route("api.settings.reset");
         return await api.delete(url);
     },
+    async resetField(field) {
+        const url = route("api.settings.resetField", {key: field});
+        return await api.delete(url);
+    },
 };
diff --git a/resources/js/components/settings/SettingsField.vue b/resources/js/components/settings/SettingsField.vue
@@ -40,26 +40,29 @@
             />
             <b-form-file
                 v-else-if="field.type == 'file'"
+                v-model="modelValue"
                 v-bind="field.args"
                 :placeholder="field.placeholder ?? $t('Choose file...')"
                 :disabled="disabled"
             />
         </b-form-group>
         <template v-if="field.type == 'file' && field.file_url">
-            <a :href="field.file_url" target="_blank">
-                <img
-                    v-if="field.file_is_image"
-                    :src="field.file_url"
-                    class="img-fluid img-thumbnail mb-2"
-                    style="max-height: 200px"
-                />
-                <template v-else>{{ $t("View file") }}</template>
-            </a>
-            <div class="mb-3">
-                <b-form-checkbox :disabled="disabled">{{
-                    $t("Remove file")
-                }}</b-form-checkbox>
-            </div>
+                <a :href="field.file_url" target="_blank">
+                    <img
+                        v-if="field.file_is_image"
+                        :src="field.file_url"
+                        class="img-fluid img-thumbnail mb-2"
+                        style="max-height: 200px"
+                    />
+                    <template v-else>{{ $t("View file") }}</template>
+                </a>
+                <br>
+                <b-button
+                    :disabled="disabled"
+                    variant="outline-danger"
+                    size="sm"
+                    @click="$emit('reset', fieldKey)">{{ $t("Remove file") }}
+                </b-button>
         </template>
     </div>
 </template>
@@ -74,6 +77,10 @@ export default {
         disabled: Boolean,
         value: {
             required: true
+        },
+        fieldKey: {
+            required: true,
+            type: String
         }
     },
     computed: {

diff --git a/resources/js/pages/settings/SettingsPage.vue b/resources/js/pages/settings/SettingsPage.vue
@@ -17,8 +17,10 @@
                             <SettingsField
                                 v-if="field.section == sectionKey"
                                 v-model="formData[fieldKey]"
+                                :fieldKey="fieldKey"
                                 :field="field"
                                 :disabled="isBusy"
+                                @reset="resetField"
                             />
                         </div>
                     </b-tab>
@@ -70,22 +72,25 @@ export default {
         this.fetchSettings();
     },
     methods: {
-        async fetchSettings() {
+        async fetchSettings(field) {
             let data = await settingsApi.fields();
-            this.sections = data.sections;
-            this.fields = data.fields;
-            this.formData = Object.fromEntries(
-                Object.entries(this.fields).map(([key, { value }]) => [
-                    key,
-                    value,
-                ])
-            );
-            this.loaded = true;
+            if (field) {
+                this.fields[field] = data.fields[field]
+                this.formData[field] = this.fields[field].type == 'file' ? null : this.fields[field].value
+            } else {
+                this.sections = data.sections;
+                this.fields = data.fields;
+                this.formData = Object.fromEntries(
+                    Object.entries(this.fields).map(([key, field]) => [key, field.type == 'file' ? null : field.value])
+                );
+                this.loaded = true;
+            }
         },
         async updateSettings() {
             this.isBusy = true;
             try {
-                let data = await settingsApi.update(this.formData);
+                let dataForUpdate = Object.fromEntries(Object.entries(this.formData).filter(e => this.fields[e[0]].type == 'file' ? e[1] != null : true))
+                let data = await settingsApi.update(dataForUpdate);
                 showSnackbar(data.message);
                 await this.fetchSettings();
             } catch (err) {
@@ -107,6 +112,20 @@ export default {
             }
             this.isBusy = false;
         },
+        async resetField(field) {
+            if (!confirm(this.$t(`Really reset ${this.fields[field].label}?`))) {
+                return;
+            }
+            this.isBusy = true;
+            try {
+                let data = await settingsApi.resetField(field);
+                await this.fetchSettings(field);
+                showSnackbar(data.message);
+            } catch (err) {
+                alert(err);
+            }
+            this.isBusy = false;
+        }
     },
 };
 </script>
diff --git a/resources/js/ziggy.js b/resources/js/ziggy.js
diff --git a/routes/api.php b/routes/api.php
@@ -403,10 +403,12 @@
         //
         Route::get('settings/fields', [SettingsController::class, 'fields'])
             ->name('settings.fields');
-        Route::put('settings', [SettingsController::class, 'update'])
+        Route::post('settings', [SettingsController::class, 'update'])
             ->name('settings.update');
         Route::delete('settings', [SettingsController::class, 'reset'])
             ->name('settings.reset');
+        Route::delete('settings/{key}', [SettingsController::class, 'resetField'])
+            ->name('settings.resetField');
     });
 
 // RaiseNow Webhook