Skip to content

P
Platform
Unverified Commit 62bd990d authored by Nicolas Widart's avatar Nicolas Widart
Browse files
Options

Updating media list component structure

parent c6a68306
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 42 deletions
Modules/Media/Assets/js/components/MediaList.vue
View file @ 62bd990d
...@@ -2,50 +2,82 @@ ...@@ -2,50 +2,82 @@
<div class="row"> <div class="row">
<div class="col-xs-12"> <div class="col-xs-12">
<div class="sc-table"> <div class="sc-table">
<div class="tool-bar el-row" style="padding-bottom: 20px;"> <div class="el-row">
<div class="actions el-col el-col-8"> <div class="title">
<h4>{{ trans('media.choose file') }}</h4> <h4 v-if="singleModal">{{ trans('media.choose file') }}</h4>
</div> <h3 v-if="! singleModal">{{ trans('media.title.media') }}</h3>
<div class="search el-col el-col-5">
<el-input icon="search" @change="performSearch" v-model="searchQuery">
</el-input>
</div> </div>
</div> </div>
<el-table <div class="box box-primary">
:data="data" <div class="box-body">
stripe <div class="tool-bar el-row" style="padding-bottom: 20px;">
style="width: 100%" <div class="actions el-col el-col-14">
ref="mediaTable" <new-folder></new-folder>
v-loading.body="tableIsLoading" <upload-button></upload-button>
@sort-change="handleSortChange"> <el-button-group>
<el-table-column label="" width="150"> <el-button type="primary" :disabled="selectedMedia.length === 0">Move</el-button>
<template scope="scope"> <el-button type="warning" :disabled="selectedMedia.length === 0">Rename</el-button>
<img :src="scope.row.small_thumb" alt="" v-if="scope.row.is_image"/> <el-button type="danger" :disabled="selectedMedia.length === 0">Delete</el-button>
<i :class="`fa ${scope.row.fa_icon}`" style="font-size: 20px;" v-if="! scope.row.is_image"></i> </el-button-group>
</template> </div>
</el-table-column> <div class="search el-col el-col-5">
<el-table-column prop="filename" :label="trans('media.table.filename')" sortable="custom"> <el-input icon="search" @change="performSearch" v-model="searchQuery">
</el-table-column> </el-input>
<el-table-column prop="created_at" :label="trans('core.table.created at')" sortable="custom"> </div>
</el-table-column> </div>
<el-table-column prop="actions" label="" width="150">
<template scope="scope"> <el-table
<a class="btn btn-primary btn-flat" @click.prevent="insertMedia(scope)" v-if="singleModal"> :data="data"
{{ trans('media.insert') }} stripe
</a> style="width: 100%"
</template> ref="mediaTable"
</el-table-column> v-loading.body="tableIsLoading"
</el-table> @sort-change="handleSortChange"
<div class="pagination-wrap" style="text-align: center; padding-top: 20px;"> @selection-change="handleSelectionChange">
<el-pagination <el-table-column
@size-change="handleSizeChange" type="selection"
@current-change="handleCurrentChange" width="55">
:current-page.sync="meta.current_page" </el-table-column>
:page-sizes="[10, 20, 50, 100]" <el-table-column label="" width="150">
:page-size="parseInt(meta.per_page)" <template scope="scope">
layout="total, sizes, prev, pager, next, jumper" <img :src="scope.row.small_thumb" alt="" v-if="scope.row.is_image"/>
:total="meta.total"> <i :class="`fa ${scope.row.fa_icon}`" style="font-size: 38px;"
</el-pagination> v-if="! scope.row.is_image && ! scope.row.is_folder"></i>
<i class="fa fa-folder" style="font-size: 38px;"
v-if="scope.row.is_folder"></i>
</template>
</el-table-column>
<el-table-column prop="filename" :label="trans('media.table.filename')" sortable="custom">
<template scope="scope">
<strong v-if="scope.row.is_folder" style="cursor: pointer;">{{ scope.row.filename }}</strong>
<span v-else>{{ scope.row.filename }}</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 scope="scope">
<a class="btn btn-primary btn-flat" @click.prevent="insertMedia(scope)"
v-if="singleModal">
{{ trans('media.insert') }}
</a>
</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, 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> </div>
</div> </div>
...@@ -53,7 +85,14 @@ ...@@ -53,7 +85,14 @@
</template> </template>
<script> <script>
import NewFolder from './NewFolder.vue';
import UploadButton from './UploadButton.vue';
export default { export default {
components: {
'new-folder': NewFolder,
'upload-button': UploadButton,
},
props: { props: {
singleModal: {type: Boolean}, singleModal: {type: Boolean},
}, },
...@@ -71,6 +110,7 @@ ...@@ -71,6 +110,7 @@
}, },
links: {}, links: {},
searchQuery: '', searchQuery: '',
selectedMedia: {},
} }
}, },
methods: { methods: {
...@@ -121,8 +161,12 @@ ...@@ -121,8 +161,12 @@
insertMedia(scope) { insertMedia(scope) {
this.$events.emit('fileWasSelected', scope.row); this.$events.emit('fileWasSelected', scope.row);
}, },
handleSelectionChange(selectedMedia) {
this.selectedMedia = selectedMedia;
},
}, },
mounted() { mounted() {
this.selectedMedia.length = 0;
this.fetchMediaData(); this.fetchMediaData();
this.$events.listen('fileWasUploaded', eventData => { this.$events.listen('fileWasUploaded', eventData => {
this.fetchMediaData(); this.fetchMediaData();
......
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

Technounit-GROUP 2023