Load folder data on dialog open

parent f738d5a6
<template> <template>
<div> <div>
<el-dialog title="Move Media" :visible.sync="dialogFormVisible" size="tiny" class="move-media-dialog"> <el-dialog title="Move Media" :visible.sync="dialogFormVisible" size="tiny" class="move-media-dialog" @open="fetchFolders">
<el-form v-loading.body="loading" @submit.native.prevent="onSubmit()"> <el-form v-loading.body="loading" @submit.native.prevent="onSubmit()">
<el-form-item label="To" :class="{'el-form-item is-error': form.errors.has('name') }"> <el-form-item label="To" :class="{'el-form-item is-error': form.errors.has('name') }">
<el-select v-model="destinationFolder" placeholder="Select"> <el-select v-model="destinationFolder" placeholder="Select">
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
v-for="(item, id) in options" v-for="(item, id) in options"
:key="id" :key="id"
:label="item" :label="item"
:value="id"> :value="id"
:loading="selectIsLoading">
<span v-html="item"></span> <span v-html="item"></span>
</el-option> </el-option>
</el-select> </el-select>
...@@ -37,6 +38,7 @@ ...@@ -37,6 +38,7 @@
dialogFormVisible: false, dialogFormVisible: false,
form: new Form(), form: new Form(),
loading: false, loading: false,
selectIsLoading: false,
options: [], options: [],
destinationFolder: '', destinationFolder: '',
}; };
...@@ -63,15 +65,17 @@ ...@@ -63,15 +65,17 @@
this.form.clear(); this.form.clear();
this.dialogFormVisible = false; this.dialogFormVisible = false;
}, },
async fetchFolders() { fetchFolders() {
this.selectIsLoading = true;
axios.get(route('api.media.folders.all-nestable')) axios.get(route('api.media.folders.all-nestable'))
.then((response) => { .then((response) => {
this.options = _.merge(response.data, {0: 'Root'}); console.log(response);
this.options = _.merge(response.data, { 0: 'Root' });
this.selectIsLoading = false;
}); });
}, },
}, },
mounted() { mounted() {
this.fetchFolders();
this.$events.listen('moveMediaWasClicked', (eventData) => { this.$events.listen('moveMediaWasClicked', (eventData) => {
this.selectedMedia = eventData; this.selectedMedia = eventData;
this.dialogFormVisible = true; this.dialogFormVisible = true;
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment