Added support for file type on settings

resources/js/components/SettingsTool.vue

@@ -1,18 +1,12 @@
 <template>
     <div class="relative">
-
         <div v-if="loading" class="rounded-lg flex items-center justify-center absolute pin z-50 bg-40 -m-4">
             <loader class="text-60" />
         </div>
-
         <div v-for="(group, index) in settingConfig" :key="index">
-
             <heading class="mb-6">{{ group.name }}</heading>
-
             <card class="relative overflow-hidden mb-8">
-
                 <div v-for="(setting, index) in group.settings" :key="index">
-
                     <toggle-setting
                         v-if="setting.type == 'toggle'"
                         :name="setting.name"
@@ -31,6 +25,15 @@
                         @input="handleInput"
                     />
 
+                    <file-setting
+                        v-if="setting.type == 'file'"
+                        :name="setting.name"
+                        :description="setting.description || ''"
+                        :link="setting.link || {}"
+                        :setting="{ key: setting.key, value: settings[setting.key] }"
+                        @input="handleInput"
+                    />
+
                     <text-area-setting
                         v-if="setting.type == 'textarea'"
                         :name="setting.name"
@@ -57,7 +60,6 @@
                         :setting="{ key: setting.key, value: settings[setting.key] }"
                         @input="handleInput"
                     />
-
                 </div>
 
                 <div class="bg-30 flex px-8 py-4">
@@ -66,20 +68,18 @@
                         @click.native="saveAndReload(group.name)"
                         :processing="saving == group.name"
                     >
-                        Save
+                        {{ __('Save') }}
                     </progress-button>
                 </div>
-
             </card>
-
         </div>
-
     </div>
 </template>
 
 <script>
 import TextSetting from './partials/Text'
 import CodeSetting from './partials/Code'
+import FileSetting from './partials/File'
 import ToggleSetting from './partials/Toggle'
 import TextAreaSetting from './partials/TextArea'
 import DateTimeSetting from './partials/DateTime'
@@ -90,7 +90,7 @@ export default {
         CodeSetting,
         ToggleSetting,
         TextAreaSetting,
-        DateTimeSetting
+        FileSetting
     },
 
     data: () => ({
@@ -122,19 +122,25 @@ export default {
 
         saveAndReload(groupName) {
             this.saving = groupName
-
+            
             let settingsToUpdate = {}
-
             let keys = this.settingConfig
                 .filter(g => g.name == groupName)[0].settings
                 .map(settingItem => settingItem.key)
 
+            const formData = new FormData();
             keys.forEach(key => {
-                settingsToUpdate[key] = this.settings[key]
+                formData.append(key, this.settings[key]);
             })
 
-            Nova.request().post('/nova-vendor/settings-tool', { settings: settingsToUpdate })
+            Nova.request().post('/nova-vendor/settings-tool', formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data'
+                    }
+                })
                 .then((response) => {
+                    const { data } = response;
+                    this.settings = data;
                     if (response.status == 202) {
                         this.saving = ''
                         this.$toasted.show('Settings saved!', { type: 'success' })

resources/js/components/partials/Code.vue

@@ -140,7 +140,7 @@ export default {
             })
         })
 
-        this.doc.setValue(this.setting.value)
+        this.doc.setValue(this.setting.value || "")
     },
 
     components: {

resources/js/components/partials/File.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="flex border-b border-40">
+
+        <setting-label>{{ name }}</setting-label>
+
+        <div class="w-1/2 py-6 px-8">
+
+            <a tabindex="0" v-if="value && typeof value === 'string'" :href="setting.value" target="_blank" class="cursor-pointer dim btn btn-link text-primary inline-flex items-center mr-4">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-labelledby="download" role="presentation" class="fill-current mr-2">
+                    <path d="M17.56 17.66a8 8 0 0 1-11.32 0L1.3 12.7a1 1 0 0 1 0-1.42l4.95-4.95a8 8 0 0 1 11.32 0l4.95 4.95a1 1 0 0 1 0 1.42l-4.95 4.95zM11.9 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/><circle cx="12" cy="12" r="3"/>
+                </svg> 
+                <span class="class">{{ __('View File') }}</span>
+            </a>
+
+            <input 
+                type="file"
+                @input="input"
+                class="form-file-input"
+                id="image"
+            />
+            <label for="image" class="form-file-btn btn btn-default btn-primary">
+                {{ __('Choose File') }}
+            </label>
+
+            <setting-info v-if="description || link.text" :text="link.text || ''" :url="link.url || ''" class="pt-3">{{ description }}</setting-info>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import SettingLabel from './Label'
+import SettingInfo from './Info'
+
+export default {
+    props: {
+        name: String,
+        setting: Object,
+        description: String,
+        link: Object
+    },
+
+    components: {
+        SettingLabel,
+        SettingInfo
+    },
+
+    methods: {
+        input(e) {
+            let path = event.target.value
+            this.$emit('input', {
+                key: this.setting.key,
+                value: e.target.files[0]
+            })
+        }
+    },
+
+    computed: {
+        value() {
+            return this.setting.value;
+        }
+    }
+}
+</script>

src/Http/Controllers/SettingsToolController.php

@@ -5,15 +5,18 @@
 use Illuminate\Http\Request;
 use Spatie\Valuestore\Valuestore;
 use Illuminate\Routing\Controller;
+use Illuminate\Support\Facades\Storage;
 
 class SettingsToolController extends Controller
 {
     /** @var string */
     protected $settingsPath;
+    protected $disk;
 
     public function __construct(string $settingsPath = null)
     {
         $this->settingsPath = $settingsPath ?? storage_path(config('settings.path', 'app/settings.json'));
+        $this->disk = $settingsPath ?? config('settings.disk', 'public');
     }
 
     public function read(Request $request)
@@ -38,10 +41,22 @@ public function read(Request $request)
 
     public function write(Request $request)
     {
+        $data = $request->all();
         $settings = Valuestore::make($this->settingsPath);
 
-        foreach ($request->settings as $setting => $value) {
-            $settings->put($setting, $value);
+        foreach ($data as $setting => $value) {
+            if ($request->hasFile($setting)) {
+                // Handle this as file
+                $fileName = $request->file($setting)->getClientOriginalName();
+                $filePath = $request->file($setting)->storeAs('settings', $fileName, $this->disk);
+
+                $settings->put($setting, Storage::url($filePath));
+            } else {
+                if ($value === 'null') {
+                    $value = null;
+                }
+                $settings->put($setting, $value);
+            }
         }
 
         return response($settings->all(), 202);