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

Fix reactivity of the medias data

Modules/Media/Assets/js/components/MultipleMedia.vue

 <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>
@@ -14,9 +14,9 @@
             <el-button type="button" @click="dialogVisible = true">{{ trans('media.Browse') }}</el-button>
         </div>
         <el-dialog
-                :visible.sync="dialogVisible"
-                fullscreen
-                :before-close="handleClose">
+            :visible.sync="dialogVisible"
+            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 },
@@ -74,10 +76,10 @@
             },
             fetchMedia() {
                 axios.get(route('api.media.get-by-zone-and-entity', {
-                    zone: this.zone,
-                    entity: this.entity,
-                    entity_id: this.entityId,
-                }))
+                        zone: this.zone,
+                        entity: this.entity,
+                        entity_id: this.entityId,
+                    }))
                     .then((response) => {
                         this.selectedMedia = response.data.data;
                         _.forEach(this.selectedMedia, (file) => {
@@ -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,10 +108,10 @@
     };
 </script>
 <style>
-    .remove-media{
+    .remove-media {
         position: absolute;
         top: 5px;
         left: 5px;
         color: #FA5555;
     }
-</style>
\ No newline at end of file
+</style>

Modules/Media/Assets/js/components/SingleMedia.vue

@@ -15,9 +15,9 @@
         </div>
 
         <el-dialog
-                :visible.sync="dialogVisible"
-                fullscreen
-                :before-close="handleClose">
+            :visible.sync="dialogVisible"
+            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 },
@@ -75,10 +77,10 @@
             },
             fetchMedia() {
                 axios.get(route('api.media.find-first-by-zone-and-entity', {
-                    zone: this.zone,
-                    entity: this.entity,
-                    entity_id: this.entityId,
-                }))
+                        zone: this.zone,
+                        entity: this.entity,
+                        entity_id: this.entityId,
+                    }))
                     .then((response) => {
                         this.$emit('singleFileSelected', _.merge(response.data.data, { zone: this.zone }));
                         this.selectedMedia = response.data.data;
@@ -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;

Modules/Media/Assets/js/mixins/MultipleFileSelector.js

 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 (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]) {
-                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 (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);
         },
     },
-};
\ No newline at end of file
+};

Modules/Media/Assets/js/mixins/RandomString.js

+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;
+        },
+    },
+};

Modules/Media/Assets/js/mixins/SingleFileSelector.js

 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);
+            }
         },
-    }
-}
+    },
+};