Allow deeply nested objects to have media

Without this change, we can’t pass something like `product.attributes.color` as the “model”.

This allows us to do some really weird things, like allow only the first child of some object to have media (e.x.: `model === ‘parent.children[0]’`).

This does NOT prevent problems where the model doesn’t exist (you’ll get an error: `TypeError: Cannot read property 'medias_single' of undefined`), but that’s something that the developer should check (make sure you have the right path).

The Typy package has some other neat things it can do, if you’re interested: https://github.com/flexdinesh/typySigned-off-by: Micheal Mand <micheal@kmdwebdesigns.com>

.gitignore

@@ -10,5 +10,6 @@ yarn-error.log
 .env
 composer.lock
 package-lock.json
+yarn.lock
 .phpunit.result.cache
 .php_cs.cache

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

+import t from 'typy';
+
 export default {
     methods: {
         selectMultipleFile(event, model) {
-            if (typeof this[model].medias_multi === 'undefined') {
-                this.$set(model, 'medias_multi', {});
+            const entity = t(this, model).safeObject;
+
+            if (typeof entity.medias_multi === 'undefined') {
+                this.$set(entity, 'medias_multi', {});
             }
 
-            if (typeof this[model].medias_multi[event.zone] === 'undefined') {
-                this.$set(this[model].medias_multi, event.zone, { files: [], orders: '' });
+            if (typeof entity.medias_multi[event.zone] === 'undefined') {
+                this.$set(entity.medias_multi, event.zone, { files: [], orders: '' });
             }
 
             if (event.id !== null && event.id !== undefined) {
-                const medias = new Set(this[model].medias_multi[event.zone].files);
+                const medias = new Set(entity.medias_multi[event.zone].files);
                 medias.add(event.id);
-                this.$set(this[model].medias_multi[event.zone], 'files', [...medias]);
+                this.$set(entity.medias_multi[event.zone], 'files', [...medias]);
             }
         },
         unselectFile(event, model) {
+            const entity = t(this, model).safeObject;
+
             if (event.id !== null && event.id !== undefined) {
-                const medias = new Set(this[model].medias_multi[event.zone].files);
+                const medias = new Set(entity.medias_multi[event.zone].files);
                 medias.delete(event.id);
-                this.$set(this[model].medias_multi[event.zone], 'files', [...medias]);
+                this.$set(entity.medias_multi[event.zone], 'files', [...medias]);
             }
 
-            if (this[model].medias_multi[event.zone].files.length === 0) {
-                this.$delete(this[model].medias_multi, event.zone);
+            if (entity.medias_multi[event.zone].files.length === 0) {
+                this.$delete(entity.medias_multi, event.zone);
             }
         },
     },

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

+import t from 'typy';
+
 export default {
     methods: {
         selectSingleFile(event, model) {
-            if (typeof this[model].medias_single === 'undefined') {
-                this.$set(this[model], 'medias_single', {});
+            const entity = t(this, model).safeObject;
+
+            if (typeof entity.medias_single === 'undefined') {
+                this.$set(entity, 'medias_single', {});
             }
 
-            if (typeof this[model].medias_single[event.zone] === 'undefined') {
-                this.$set(this[model].medias_single, event.zone, null);
+            if (typeof entity.medias_single[event.zone] === 'undefined') {
+                this.$set(entity.medias_single, event.zone, null);
             }
 
             if (event.id !== null && event.id !== undefined) {
-                this.$set(this[model].medias_single, event.zone, event.id);
+                this.$set(entity.medias_single, event.zone, event.id);
             } else {
-                this.$delete(this[model].medias_single, event.zone);
+                this.$delete(entity.medias_single, event.zone);
             }
         },
     },

package.json

@@ -29,6 +29,7 @@
     "form-backend-validation": "^2.3.3",
     "lodash": "^4.17.10",
     "moment": "^2.22.2",
+    "typy": "^2.0.1",
     "vue": "^2.5.16",
     "vue-data-tables": "^3.4.0",
     "vue-events": "^3.1.0",