265 lines
12 KiB
Vue
265 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<div v-show="scrollLoader" class="scrollLoader"><div class="animated slideInUp"><i class="fa fa-circle-notch fa-spin"></i> Chargements des médias</div></div>
|
|
<div class="media_container">
|
|
<div v-show="loader" class="loader"><i class="fa fa-circle-notch fa-spin"></i></div>
|
|
<div class="wrapper" v-if="medias.data">
|
|
<div v-if="showDateSeparators() && medias.data.length" class="date-separator">{{formatDate(medias.data[0].updated_at)}}</div>
|
|
<div v-else class="noresult" >Aucun résultat</div>
|
|
<template v-for="media,index in medias.data">
|
|
<div v-if="showDateSeparators() && !isSameDay(media,medias.data[Math.max(index-1,0)])" class="date-separator">{{formatDate(media[dateSorted])}}</div>
|
|
<div @dragstart="dragStart(media, $event)" v-on:dblclick="edit(media)" @click="select(media)" :class=" isCAQuery && media.id !== lastVersion.id ? 'imageItem not-last-version' : 'imageItem'" :draggable="medias.draggable" :aria-grabbed="storeGrabbed.filter(e => e.id === media.id).length > 0">
|
|
<div class="etiquette" :style="'background-color:' + media.etiquette.color + '; border-color:' + media.etiquette.color + ';'" :data-id="media.etiquette.etiquette_id" >{{media.etiquette.libelle}}</div>
|
|
|
|
<div v-if="(media.typemedia_id === 1 || media.typemedia_id === 5) && media.extension !== 'pdf'" class="media" :style="'background-image:url('+ media.folder + media.uid +'_thumb.'+ media.extension +')'"></div>
|
|
<div v-if="(media.typemedia_id === 1 || media.typemedia_id === 5) && media.extension === 'pdf'" class="media" :style="'background-image:url('+ media.folder + media.uid +'_thumb.png)'"></div>
|
|
<div v-if="media.typemedia_id === 2" class="media" :style="'background-image:url('+ media.folder + media.uid + media.extension + ')'"></div>
|
|
<div v-if="media.typemedia_id === 3" class="media video"></div>
|
|
<div v-if="media.typemedia_id === 4" class="media son"></div>
|
|
|
|
<p class="libelle">{{media.libelle}}</p>
|
|
|
|
<div v-if="media.typemedia_id === 1 || media.typemedia_id === 5" class="info"><i class="fas fa-file-image"></i> {{media.extension}} - {{media.taille}} - {{media.largeur}}x{{media.hauteur}}px - v{{media.version}}</div>
|
|
<div v-if="media.typemedia_id === 2" class="info"><i class="fas fa-file-image"></i> {{media.extension}} - {{media.taille}} - v{{media.version}}</div>
|
|
<div v-if="media.typemedia_id === 3" class="info"><i class="fas fa-file-video"></i> {{media.extension}} - {{media.taille}} - durée {{media.duree}} - v{{media.version}}</div>
|
|
<div v-if="media.typemedia_id === 4" class="info"><i class="fas fa-file-audio"></i> {{media.extension}} - {{media.taille}} - durée {{media.duree}} - v{{media.version}}</div>
|
|
|
|
<div v-if="media.statut === 0" class="statut stat0">Brouillon</div>
|
|
<div v-if="media.statut === 1" class="statut stat1">Public</div>
|
|
<div v-if="media.statut === 2" class="statut stat2">Public étendu</div>
|
|
</div>
|
|
</template>
|
|
<infinite-loading @infinite="infiniteScroll" :identifier="infiniteId">
|
|
<div slot="spinner"></div>
|
|
<div slot="no-more"></div>
|
|
<div slot="no-results"></div>
|
|
</infinite-loading>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "DisplayComponent",
|
|
computed: {
|
|
storeFilters () {
|
|
return this.$store.state.filters;
|
|
},
|
|
storeFolder () {
|
|
return this.$store.state.folder;
|
|
},
|
|
storeSujet () {
|
|
return this.$store.state.sujet;
|
|
},
|
|
storeMedia () {
|
|
return this.$store.state.media;
|
|
},
|
|
storeGrabbed () {
|
|
return this.$store.state.grabbed;
|
|
},
|
|
storeReload () {
|
|
return this.$store.state.reload;
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log('DisplayComponent Mounted.');
|
|
this.resetInfiniteScroll();
|
|
},
|
|
data: function () {
|
|
return {
|
|
medias: [],
|
|
offset: 0,
|
|
limit: 50,
|
|
scrollLoader: false,
|
|
loader: false,
|
|
infiniteId: '',
|
|
isCAQuery: false,
|
|
dateSorted: false,
|
|
lastVersion: {
|
|
version: 0,
|
|
id: 0
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
storeFilters() {
|
|
this.init();
|
|
},
|
|
storeMedia() {
|
|
if (Object.keys(this.storeMedia).length > 0) {
|
|
if (this.storeMedia.close !== undefined && this.storeMedia.close === true) {
|
|
if (this.storeMedia.isModified === true) {
|
|
this.init();
|
|
this.$store.commit({
|
|
type: 'updateGrabbed',
|
|
grabbed: []
|
|
});
|
|
}
|
|
this.$store.commit({
|
|
type: 'updateMedia',
|
|
media: {}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
storeReload() {
|
|
this.init();
|
|
}
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.offset = 0;
|
|
this.resetInfiniteScroll();
|
|
this.loadMedias(this.$store.state);
|
|
//set dateSorted
|
|
this.dateSorted = false;
|
|
const _that = this;
|
|
_.each(this.storeFilters, function (value) {
|
|
if(value.type == "order") {
|
|
if(value.value == "updated_at" || value.value == "created_at") {
|
|
_that.dateSorted = value.value;
|
|
}
|
|
}
|
|
});
|
|
if(!this.dateSorted) {
|
|
//show/hide date toggler
|
|
$(".action_wrapper .display i.fa-calendar-check").hide();
|
|
} else {
|
|
//par défaut c'est selected
|
|
$(".action_wrapper .display i.fa-calendar-check").addClass('selected');
|
|
$(".action_wrapper .display i.fa-calendar-check").show();
|
|
}
|
|
},
|
|
loadMedias($state) {
|
|
this.$store.commit({
|
|
type: 'updateGrabbed',
|
|
grabbed: []
|
|
});
|
|
if (this.offset === 0){
|
|
this.medias = [];
|
|
this.loader = true;
|
|
}else{
|
|
this.scrollLoader = true;
|
|
}
|
|
axios.post('/ajax/load-medias', {
|
|
sujet: this.storeSujet,
|
|
folder: this.storeFolder,
|
|
filters: this.storeFilters,
|
|
offset: this.offset,
|
|
limit: this.limit,
|
|
saveSearch: 0
|
|
}).then(response => {
|
|
if (this.offset === 0){
|
|
this.medias = response.data;
|
|
this.loader = false;
|
|
this.$store.commit({
|
|
type: 'updateRole',
|
|
role: response.data.role
|
|
});
|
|
}else{
|
|
if (response.data.data.length){
|
|
this.medias.data.push(...response.data.data);
|
|
$state.loaded();
|
|
this.$store.commit({
|
|
type: 'updateRole',
|
|
role: response.data.role
|
|
});
|
|
}else{
|
|
$state.complete();
|
|
}
|
|
this.scrollLoader = false;
|
|
}
|
|
|
|
// Si requete CA alors on cherche la version la plus récente plus griser les autres
|
|
if (response.data.isCAQuery !== undefined){
|
|
const _this2 = this;
|
|
this.isCAQuery = true;
|
|
_.each(this.medias.data, function (value) {
|
|
if (value.version > _this2.lastVersion.version) {
|
|
_this2.lastVersion.version = value.version;
|
|
_this2.lastVersion.id = value.id;
|
|
}
|
|
});
|
|
}else{
|
|
this.isCAQuery = false;
|
|
}
|
|
|
|
this.offset = this.offset + this.limit;
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
},
|
|
infiniteScroll($state) {
|
|
this.loadMedias($state);
|
|
},
|
|
resetInfiniteScroll() {
|
|
this.infiniteId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
|
|
},
|
|
edit(media) {
|
|
media.isModified = false;
|
|
this.$store.commit({
|
|
type: 'updateMedia',
|
|
media: media
|
|
});
|
|
},
|
|
select(media) {
|
|
let grabbed = this.storeGrabbed;
|
|
const index = grabbed.find(e => e.id === media.id);
|
|
if (!index) {
|
|
grabbed.push(media);
|
|
}else{
|
|
grabbed = grabbed.filter(e => e.id !== media.id);
|
|
}
|
|
this.$store.commit({
|
|
type: 'updateGrabbed',
|
|
grabbed: grabbed
|
|
});
|
|
},
|
|
dragStart(media, evt) {
|
|
// ---- Restreint le Drag aux images
|
|
if (media.typemedia_id === 1 || media.typemedia_id === 2 || media.typemedia_id === 5) {
|
|
evt.dataTransfer.dropEffect = 'move';
|
|
evt.dataTransfer.effectAllowed = 'move';
|
|
|
|
if (this.storeGrabbed.length === 0){
|
|
this.select(media);
|
|
}else{
|
|
let grabbed = this.storeGrabbed;
|
|
const index = grabbed.find(e => e.id === media.id);
|
|
if (!index) {
|
|
grabbed.push(media);
|
|
this.$store.commit({
|
|
type: 'updateGrabbed',
|
|
grabbed: grabbed
|
|
});
|
|
}
|
|
}
|
|
}else{
|
|
return false;
|
|
}
|
|
},
|
|
showDateSeparators() {
|
|
return this.dateSorted;
|
|
},
|
|
formatDate(str) {
|
|
return this.moment(str).format('DD/MM/YYYY');
|
|
},
|
|
isSameDay(current,previous) {
|
|
let currentdate = current[this.dateSorted];
|
|
let previousdate = previous[this.dateSorted];
|
|
let dateToCompare = this.moment(currentdate);
|
|
let datePrevious = this.moment(previousdate);
|
|
return dateToCompare.startOf('day').isSame(datePrevious.startOf('day'));
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.noresult {
|
|
padding: 5rem;
|
|
font-size: 2rem;
|
|
}
|
|
</style>
|