<template> <div class="row" style="margin-top: -35px;"> <div class="col-xs-12"> <div class="sc-table"> <div class="el-row"> <div class="title"> <h4 v-if="singleModal">{{ trans('media.choose file') }}</h4> <h3 v-if="! singleModal">{{ trans('media.title.media') }}</h3> <div class="media-breadcrumb"> <el-breadcrumb separator="/" v-if="! singleModal"> <el-breadcrumb-item> <a href="/backend">Home</a> </el-breadcrumb-item> <el-breadcrumb-item :to="{name: 'admin.media.media.index'}">{{ trans('media.breadcrumb.media') }} </el-breadcrumb-item> </el-breadcrumb> </div> </div> </div> <div class="box box-primary"> <div class="box-body"> <upload-zone v-if="showUploadZone" :parent-id="folderId"></upload-zone> <div class="tool-bar el-row" style="padding-bottom: 20px;"> <div class="actions el-col el-col-19"> <new-folder :parent-id="folderId"></new-folder> <div style="margin: 0 15px;"> <el-button type="primary" @click="toggleUploadZone" > {{ trans('media.upload file') }} </el-button> <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> </div> </div> <div class="search el-col el-col-5"> <el-input prefix-icon="el-icon-search" @keyup.native="performSearch" v-model="searchQuery"></el-input> </div> </div> <el-row> <el-col :span="24"> <el-breadcrumb separator="/" style="margin-bottom: 20px;"> <el-breadcrumb-item v-for="(folder, index) in folderBreadcrumb" @click.native="changeRoot(folder.id, index)" :key="folder.id"> {{ folder.name }} </el-breadcrumb-item> </el-breadcrumb> </el-col> </el-row> <el-table :data="media" stripe style="width: 100%" ref="mediaTable" v-loading.body="tableIsLoading" @sort-change="handleSortChange" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55"></el-table-column> <el-table-column label="" width="150"> <template slot-scope="scope"> <img :src="scope.row.small_thumb" alt="" v-if="scope.row.is_image"/> <i class="fa fa-folder" style="font-size: 38px;" v-else-if="scope.row.is_folder"></i> <i :class="`fa ${scope.row.fa_icon}`" style="font-size: 38px;" v-else></i> </template> </el-table-column> <el-table-column prop="filename" :label="trans('media.table.filename')" sortable="custom"> <template slot-scope="scope"> <strong v-if="scope.row.is_folder" style="cursor: pointer;" @click="enterFolder(scope)"> {{ scope.row.filename }} </strong> <span v-else> <a href="#" @click.prevent="goToEdit(scope)">{{ scope.row.filename }}</a> </span> </template> </el-table-column> <el-table-column prop="created_at" :label="trans('core.table.created at')" sortable="custom" width="150"></el-table-column> <el-table-column prop="actions" label="" width="150"> <template slot-scope="scope"> <div class="pull-right"> <el-button type="primary" size="small" @click.prevent="insertMedia(scope)" v-if="singleModal && ! scope.row.is_folder" > {{ trans('media.insert') }} </el-button> <div v-if="! singleModal"> <el-button-group> <edit-button :to="{name: 'admin.media.media.edit', params: {mediaId: scope.row.id}}" v-if="! scope.row.is_folder" ></edit-button> <el-button size="mini" @click.prevent="showEditFolder(scope.row)" v-if="scope.row.is_folder && canEditFolders" > <i class="fa fa-pencil"></i> </el-button> <delete-button :scope="scope" :rows="media"></delete-button> </el-button-group> </div> </div> </template> </el-table-column> </el-table> <div class="pagination-wrap" style="text-align: center; padding-top: 20px;"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="meta.current_page" :page-sizes="[10, 20, 30, 50, 100]" :page-size="parseInt(meta.per_page)" layout="total, sizes, prev, pager, next, jumper" :total="meta.total" ></el-pagination> </div> </div> </div> </div> </div> <rename-folder></rename-folder> <move-dialog></move-dialog> </div> </template> <script> import axios from 'axios'; import NewFolder from './NewFolder.vue'; import UploadZone from './UploadZone'; import RenameFolder from './RenameFolder.vue'; import MoveMediaDialog from './MoveMediaDialog.vue'; export default { components: { 'new-folder': NewFolder, 'upload-zone': UploadZone, 'rename-folder': RenameFolder, 'move-dialog': MoveMediaDialog, }, props: { singleModal: { type: Boolean }, eventName: {}, }, data() { return { media: [], tableIsLoading: false, meta: { current_page: 1, per_page: 30, }, order_meta: { order_by: '', order: '', }, links: {}, searchQuery: '', folderId: 0, selectedMedia: [], folderBreadcrumb: [ { id: 0, name: 'Home' }, ], showUploadZone: false, filesAreDeleting: false, canEditFolders: true, }; }, methods: { queryServer(customProperties) { const properties = { page: this.meta.current_page, per_page: this.meta.per_page, order_by: this.order_meta.order_by, order: this.order_meta.order, search: this.searchQuery, folder_id: this.folderId, }; axios.get(route('api.media.all-vue', _.merge(properties, customProperties))) .then((response) => { this.tableIsLoading = false; this.media = response.data.data; this.meta = response.data.meta; this.links = response.data.links; this.order_meta.order_by = properties.order_by; this.order_meta.order = properties.order; }); }, fetchMediaData() { this.tableIsLoading = true; if (this.$route.query.folder_id !== undefined) { this.queryServer({ folder_id: this.$route.query.folder_id }); this.fetchFolderBreadcrumb(this.$route.query.folder_id); return; } this.queryServer(); }, fetchFolderBreadcrumb(folderId) { if (folderId === 0) { this.folderBreadcrumb = [ { id: 0, name: 'Home' }, ]; return; } axios.get(route('api.media.folders.breadcrumb', { folder: folderId })) .then((response) => { this.folderBreadcrumb = response.data; }); }, handleSizeChange(event) { console.log(`per page :${event}`); this.tableIsLoading = true; this.queryServer({ per_page: event }); }, handleCurrentChange(event) { console.log(`current page :${event}`); this.tableIsLoading = true; this.queryServer({ page: event }); }, handleSortChange(event) { console.log('sorting', event); this.tableIsLoading = true; this.queryServer({ order_by: event.prop, order: event.order }); }, performSearch: _.debounce(function (query) { console.log(`searching:${query.target.value}`); this.tableIsLoading = true; this.queryServer({ search: query.target.value }); }, 300), enterFolder(scope) { this.tableIsLoading = true; this.queryServer({ folder_id: scope.row.id }); this.folderId = scope.row.id; this.$router.push({ query: { folder_id: scope.row.id } }); this.fetchFolderBreadcrumb(scope.row.id); }, insertMedia(scope) { this.$events.emit(this.eventName, scope.row); }, handleSelectionChange(selectedMedia) { this.selectedMedia = selectedMedia; }, toggleUploadZone() { this.showUploadZone = !this.showUploadZone; }, showEditFolder(scope) { this.$events.emit('editFolderWasClicked', scope); }, showMoveMedia() { this.$events.emit('moveMediaWasClicked', this.selectedMedia); }, changeRoot(folderId) { this.tableIsLoading = true; this.queryServer({ folder_id: folderId }); this.folderId = folderId; if (folderId === 0) { this.$router.push({ query: {} }); } else { this.$router.push({ query: { folder_id: folderId } }); } this.fetchFolderBreadcrumb(folderId); }, batchDelete() { this.$confirm(this.trans('core.modal.confirmation-message'), this.trans('core.modal.title'), { confirmButtonText: this.trans('core.button.delete'), cancelButtonText: this.trans('core.button.cancel'), type: 'warning', }) .then(() => { this.filesAreDeleting = true; axios.post(route('api.media.media.batch-destroy'), { files: this.selectedMedia, }) .then((response) => { this.$message({ type: 'success', message: response.data.message, }); this.filesAreDeleting = false; this.$refs.mediaTable.clearSelection(); this.queryServer(); }); }) .catch(() => { this.$message({ type: 'info', message: this.trans('core.delete cancelled'), }); }); }, goToEdit(scope) { this.$router.push({ name: 'admin.media.media.edit', params: { mediaId: scope.row.id } }); }, }, mounted() { if (window.AsgardCMS.filesystem === 's3') { this.canEditFolders = false; } this.fetchMediaData(); this.$events.listen('fileWasUploaded', (eventData) => { this.tableIsLoading = true; this.queryServer({ folder_id: eventData.data.folder_id }); }); this.$events.listen('folderWasCreated', (eventData) => { this.tableIsLoading = true; this.queryServer({ folder_id: eventData.data.folder_id }); }); this.$events.listen('folderWasUpdated', (eventData) => { this.tableIsLoading = true; this.queryServer({ folder_id: eventData.data.folder_id }); }); this.$events.listen('mediaWasMoved', (eventData) => { this.tableIsLoading = true; this.queryServer({ folder_id: eventData.folder_id }); this.fetchFolderBreadcrumb(eventData.folder_id); }); }, }; </script>