Adding button to move files

parent 23efd1aa
......@@ -23,13 +23,17 @@
<div class="actions el-col el-col-14">
<new-folder :parent-id="folderId"></new-folder>
<upload-button :parent-id="folderId"></upload-button>
<el-button-group>
<move-button :selected-media="selectedMedia"></move-button>
<el-button-group style="width: 30%">
<el-button type="warning"
:disabled="selectedMedia.length === 0"
@click="showMoveMedia"
>{{ trans('core.move') }}
</el-button>
<el-button type="danger" :disabled="selectedMedia.length === 0"
@click.prevent="batchDelete" :loading="filesAreDeleting">
{{ trans('core.button.delete') }}
</el-button>
</el-button-group>
<el-button type="danger" :disabled="selectedMedia.length === 0"
@click.prevent="batchDelete" :loading="filesAreDeleting">
{{ trans('core.button.delete') }}
</el-button>
</div>
<div class="search el-col el-col-5">
<el-input icon="search" @change="performSearch" v-model="searchQuery">
......@@ -124,6 +128,7 @@
</div>
</div>
<rename-folder></rename-folder>
<move-dialog></move-dialog>
</div>
</template>
......@@ -132,14 +137,14 @@
import NewFolder from './NewFolder.vue';
import UploadButton from './UploadButton.vue';
import RenameFolder from './RenameFolder.vue';
import MoveButton from './MoveMediaButton.vue';
import MoveMediaDialog from './MoveMediaDialog.vue';
export default {
components: {
'new-folder': NewFolder,
'upload-button': UploadButton,
'rename-folder': RenameFolder,
'move-button': MoveButton,
'move-dialog': MoveMediaDialog,
},
props: {
singleModal: { type: Boolean },
......@@ -247,6 +252,9 @@
showEditFolder(scope) {
this.$events.emit('editFolderWasClicked', scope);
},
showMoveMedia() {
this.$events.emit('moveMediaWasClicked', this.selectedMedia);
},
changeRoot(folderId) {
this.tableIsLoading = true;
this.queryServer({ folder_id: folderId });
......@@ -308,6 +316,10 @@
this.tableIsLoading = true;
this.queryServer({ folder_id: eventData.data.folder_id });
});
this.$events.listen('mediaWasUpdated', (eventData) => {
this.tableIsLoading = true;
this.queryServer();
});
},
};
</script>
<template>
<div>
<el-dialog title="Move Media" :visible.sync="dialogFormVisible" size="tiny" class="move-media-dialog">
<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-select v-model="destinationFolder" placeholder="Select">
<el-option
v-for="(item, id) in options"
:key="id"
:label="item"
:value="id">
<span v-html="item"></span>
</el-option>
</el-select>
<div class="el-form-item__error" v-if="form.errors.has('name')"
v-text="form.errors.first('name')"></div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="closeDialog">{{ trans('core.button.cancel') }}</el-button>
<el-button type="warning" @click="onSubmit()">{{ trans('core.move') }}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios';
import Form from 'form-backend-validation';
export default {
props: {
},
data() {
return {
selectedMedia: [],
dialogFormVisible: false,
form: new Form(),
loading: false,
options: [],
destinationFolder: '',
};
},
methods: {
onSubmit() {
this.loading = true;
axios.post(route('api.media.media.move'), {
files: this.selectedMedia,
destinationFolder: this.destinationFolder,
})
.then((response) => {
console.log(response);
this.loading = false;
this.$message({
type: 'success',
message: response.message,
});
this.dialogFormVisible = false;
this.$events.emit('mediaWasUpdated', response);
});
},
closeDialog() {
this.form.clear();
this.dialogFormVisible = false;
},
async fetchFolders() {
axios.get(route('api.media.folders.all-nestable'))
.then((response) => {
this.options = _.merge(response.data, {0: 'Root'});
});
},
},
mounted() {
this.fetchFolders();
this.$events.listen('moveMediaWasClicked', (eventData) => {
this.selectedMedia = eventData;
this.dialogFormVisible = true;
});
},
};
</script>
<style>
.move-media-dialog .el-select {
width: 100%;
}
</style>
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