Unverified Commit 5419c02a authored by Nicolas Widart's avatar Nicolas Widart Committed by GitHub

Merge pull request #597 from mikemand/hotfix/media-selection-reactivity

Fix reactivity of the medias data
parents c4b102a4 61b9641c
<template>
<div>
<label class="el-form-item__label">{{ getFieldLabel() }}</label>
<div class="jsThumbnailImageWrapper jsSingleThumbnailWrapper" v-if="hasSelectedMedia" >
<div class="jsThumbnailImageWrapper jsSingleThumbnailWrapper" v-if="hasSelectedMedia">
<figure v-for="media in this.selectedMedia" :key="media.id">
<img :src="media.small_thumb" alt="" v-if="media.is_image"/>
<i :class="`fa ${media.fa_icon}`" style="font-size: 60px;" v-if="! media.is_image"></i>
......@@ -15,7 +15,7 @@
</div>
<el-dialog
:visible.sync="dialogVisible"
fullscreen
width="75%"
:before-close="handleClose">
<media-list single-modal :event-name="this.eventName"></media-list>
......@@ -29,12 +29,14 @@
<script>
import axios from 'axios';
import UploadZone from '../../../../Media/Assets/js/components/UploadZone.vue';
import MediaList from '../../../../Media/Assets/js/components/MediaList.vue';
import _ from 'lodash';
import UploadZone from './UploadZone.vue';
import MediaList from './MediaList.vue';
import StringHelpers from '../../../../Core/Assets/js/mixins/StringHelpers.vue';
import RandomString from '../mixins/RandomString';
export default {
mixins: [StringHelpers],
mixins: [StringHelpers, RandomString],
props: {
zone: { type: String, required: true },
entity: { type: String, required: true },
......@@ -88,20 +90,12 @@
getFieldLabel() {
return this.label || this.ucwords(this.zone.replace('_', ' '));
},
makeId() {
let text = '';
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < 5; i++) { text += possible.charAt(Math.floor(Math.random() * possible.length)); }
return text;
},
},
mounted() {
if (this.entityId) {
this.fetchMedia();
}
this.eventName = `fileWasSelected${this.makeId()}${Math.floor(Math.random() * 999999)}`;
this.eventName = `fileWasSelected${this.randomString()}${Math.floor(Math.random() * 999999)}`;
this.$events.listen(this.eventName, (mediaData) => {
if (_.find(this.selectedMedia, mediaData) === undefined) {
......@@ -114,7 +108,7 @@
};
</script>
<style>
.remove-media{
.remove-media {
position: absolute;
top: 5px;
left: 5px;
......
......@@ -16,7 +16,7 @@
<el-dialog
:visible.sync="dialogVisible"
fullscreen
width="75%"
:before-close="handleClose">
<media-list single-modal :event-name="this.eventName"></media-list>
......@@ -30,12 +30,14 @@
<script>
import axios from 'axios';
import _ from 'lodash';
import UploadZone from './UploadZone.vue';
import MediaList from './MediaList.vue';
import StringHelpers from '../../../../Core/Assets/js/mixins/StringHelpers.vue';
import RandomString from '../mixins/RandomString';
export default {
mixins: [StringHelpers],
mixins: [StringHelpers, RandomString],
props: {
zone: { type: String, required: true },
entity: { type: String, required: true },
......@@ -87,20 +89,12 @@
getFieldLabel() {
return this.label || this.ucwords(this.zone.replace('_', ' '));
},
makeId() {
let text = '';
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < 5; i++) { text += possible.charAt(Math.floor(Math.random() * possible.length)); }
return text;
},
},
mounted() {
if (this.entityId) {
this.fetchMedia();
}
this.eventName = `fileWasSelected${this.makeId()}${Math.floor(Math.random() * 999999)}`;
this.eventName = `fileWasSelected${this.randomString()}${Math.floor(Math.random() * 999999)}`;
this.$events.listen(this.eventName, (mediaData) => {
this.dialogVisible = false;
......
export default {
methods: {
selectMultipleFile(event, model) {
if (!this[model].medias_multi) {
this[model].medias_multi = {};
if (typeof this[model].medias_multi === 'undefined') {
this.$set(model, 'medias_multi', {});
}
if (!this[model].medias_multi[event.zone]) {
this[model].medias_multi[event.zone] = { files: [] };
if (typeof this[model].medias_multi[event.zone] === 'undefined') {
this.$set(this[model].medias_multi, event.zone, { files: [], orders: '' });
}
if (event.id !== null && event.id !== undefined) {
const medias = new Set(this[model].medias_multi[event.zone].files);
medias.add(event.id);
this.$set(this[model].medias_multi[event.zone], 'files', [...medias]);
}
this[model].medias_multi[event.zone].files.push(event.id);
},
unselectFile(event, model) {
if (!this[model].medias_multi) {
this[model].medias_multi = {};
}
if (!this[model].medias_multi[event.zone]) {
this[model].medias_multi[event.zone] = { files: [] };
if (this.$refs['multiple-media'] !== undefined && this.$refs['multiple-media'].selectedMedia !== undefined && !_.isEmpty(this.$refs['multiple-media'].selectedMedia)) {
_.forEach(this.$refs['multiple-media'].selectedMedia, (file, key) => {
this[model].medias_multi[event.zone].files.push(file.id);
});
if (event.id !== null && event.id !== undefined) {
const medias = new Set(this[model].medias_multi[event.zone].files);
medias.delete(event.id);
this.$set(this[model].medias_multi[event.zone], 'files', [...medias]);
}
if (this[model].medias_multi[event.zone].files.length === 0) {
this.$delete(this[model].medias_multi, event.zone);
}
this[model].medias_multi[event.zone].files = _.reject(this[model].medias_multi[event.zone].files, media => media === event.id);
},
},
};
export default {
methods: {
randomString(length) {
const len = length || 5;
let text = '';
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < len; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
},
},
};
export default {
methods: {
selectSingleFile(event, model) {
this[model].medias_single = _.merge(this[model].medias_single, {
[event.zone]: event.id,
});
},
if (typeof this[model].medias_single === 'undefined') {
this.$set(this[model], 'medias_single', {});
}
if (typeof this[model].medias_single[event.zone] === 'undefined') {
this.$set(this[model].medias_single, event.zone, null);
}
if (event.id !== null && event.id !== undefined) {
this.$set(this[model].medias_single, event.zone, event.id);
} else {
this.$delete(this[model].medias_single, event.zone);
}
}
},
},
};
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