build version 400

resources/assets/js/components/base/modal/FileDiskModal.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="file-disk-modal">
+    <div v-if="getDiskDrivers.length">
+      <component
+        :is="selected_disk"
+        :loading="isLoading"
+        :disks="getDiskDrivers"
+        @on-change-disk="(disk) => (selected_disk = disk.value)"
+        @submit="createNewDisk"
+        :is-edit="isEdit"
+      >
+        <template v-slot="slotProps">
+          <div
+            class="z-0 flex justify-end p-4 border-t border-solid border-gray-light"
+          >
+            <sw-button
+              class="mr-3 text-sm"
+              variant="primary-outline"
+              @click="closeDisk"
+              type="button"
+            >
+              {{ $t('general.cancel') }}
+            </sw-button>
+            <sw-button
+              :loading="isRequestFire(slotProps)"
+              variant="primary"
+              :disabled="isRequestFire(slotProps)"
+              type="submit"
+            >
+              <save-icon v-if="!isRequestFire(slotProps)" class="mr-2" />
+              {{ $t('general.save') }}
+            </sw-button>
+          </div>
+        </template>
+      </component>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import Dropbox from './disks/DropboxDisk'
+import Local from './disks/LocalDisk'
+import S3 from './disks/S3Disk'
+import DoSpaces from './disks/DoSpacesDisk'
+
+const {
+  required,
+  minLength,
+  email,
+  numeric,
+  url,
+  maxLength,
+} = require('vuelidate/lib/validators')
+
+export default {
+  components: {
+    Dropbox,
+    Local,
+    S3,
+    DoSpaces,
+  },
+
+  data() {
+    return {
+      isLoading: false,
+      isEdit: false,
+      set_as_default: false,
+      name: 'local',
+      formData: {},
+      selected_disk: 'local',
+      diskConfigData: {},
+    }
+  },
+
+  computed: {
+    ...mapGetters('modal', [
+      'modalDataID',
+      'modalData',
+      'modalActive',
+      'refreshData',
+    ]),
+
+    ...mapGetters('disks', ['getDiskDrivers']),
+  },
+
+  created() {
+    if (this.modalDataID) {
+      this.isEdit = true
+    }
+    this.loadData()
+  },
+
+  methods: {
+    ...mapActions('disks', ['fetchDiskDrivers', 'createDisk', 'updateDisk']),
+
+    ...mapActions('modal', ['closeModal']),
+
+    isRequestFire(slotProps) {
+      return slotProps && (slotProps.diskData.isLoading || this.isLoading)
+    },
+
+    async loadData() {
+      this.isLoading = true
+
+      let res = await this.fetchDiskDrivers()
+      if (this.isEdit) {
+        this.selected_disk = this.modalData.driver
+      } else {
+        this.selected_disk = res.data.drivers[0].value
+      }
+
+      this.isLoading = false
+    },
+
+    async createNewDisk(data) {
+      this.isLoading = true
+
+      let formData = {
+        id: this.modalDataID,
+        ...data,
+      }
+      let response
+      if (this.isEdit) {
+        response = await this.updateDisk(formData)
+      } else {
+        response = await this.createDisk(formData)
+      }
+
+      if (response.data.success) {
+        this.refreshData()
+        this.closeDisk()
+        if (this.isEdit) {
+          window.toastr['success'](this.$t('settings.disk.success_update'))
+        } else {
+          window.toastr['success'](this.$t('settings.disk.success_create'))
+        }
+      } else {
+        window.toastr['error'](
+          this.$t('settings.disk.invalid_disk_credentials')
+        )
+      }
+      this.isLoading = false
+    },
+
+    closeDisk() {
+      this.closeModal()
+    },
+  },
+}
+</script>