Fix new layer copy settings issue

runelaenen · Aug 20, 2021 · 704a4b8 · 704a4b8
1 parent 84778ee
commit 704a4b8
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 79 deletions.
diff --git a/composer.json b/composer.json
@@ -3,7 +3,7 @@
     "description": "Advanced Banners (Digital Publishing) plugin",
     "type": "shopware-platform-plugin",
     "license": "MIT",
-    "version": "2.1.0",
+    "version": "2.2.0",
     "autoload": {
         "psr-4": {
             "RuneLaenen\\AdvancedBanners\\": "src/"

diff --git a/...e/rl-advanced-banners/component/layer/text/rl-advanced-banners-layer-config-text/index.js b/...e/rl-advanced-banners/component/layer/text/rl-advanced-banners-layer-config-text/index.js
@@ -19,7 +19,6 @@ Component.register('rl-advanced-banners-layer-config-text', {
 
     data() {
         return {
-            media: null,
             isLoading: false
         };
     },
@@ -28,43 +27,5 @@ Component.register('rl-advanced-banners-layer-config-text', {
         config() {
             return this.layer.config || {};
         },
-        uploadTag() {
-            return `rl-advanced-banners-layer-config-text-media-${this.layer.id}`;
-        },
-        mediaRepository() {
-            return this.repositoryFactory.create('media');
-        }
     },
-
-    created() {
-        if (this.config.mediaId.length === 0) {
-            return;
-        }
-
-        this.isLoading = true;
-        this.mediaRepository.get(this.config.mediaId, Shopware.Context.api).then((mediaItem) => {
-            this.media = mediaItem;
-            this.isLoading = false;
-        });
-    },
-
-    methods: {
-        onSetMedia([mediaItem]) {
-            this.$set(this.config, 'mediaId', mediaItem.id);
-            this.media = mediaItem;
-        },
-
-        successfulUpload(media) {
-            this.$set(this.config, 'mediaId', media.targetId);
-
-            this.mediaRepository.get(media.targetId, Shopware.Context.api).then((mediaItem) => {
-                this.media = mediaItem;
-            });
-        },
-
-        removeMedia() {
-            this.$set(this.config, 'mediaId', null);
-            this.media = null;
-        }
-    }
 });
diff --git a/...ration/src/module/rl-advanced-banners/component/rl-advanced-banners-detail-layer/index.js b/...ration/src/module/rl-advanced-banners/component/rl-advanced-banners-detail-layer/index.js
@@ -17,12 +17,6 @@ Component.register('rl-advanced-banners-detail-layer', {
         }
     },
 
-    data() {
-        return {
-            showLayerConfig: false
-        };
-    },
-
     created() {
         if (Array.isArray(this.layer.config)) {
             this.$set(this.layer, 'config', {});
@@ -41,11 +35,7 @@ Component.register('rl-advanced-banners-detail-layer', {
         },
 
         onLayerConfig() {
-            this.showLayerConfig = true;
+            this.$emit('config-layer', this.layer);
         },
-
-        onConfigModalClose() {
-            this.showLayerConfig = false;
-        }
     }
 });
diff --git a/...ers/component/rl-advanced-banners-detail-layer/rl-advanced-banners-detail-layer.html.twig b/...ers/component/rl-advanced-banners-detail-layer/rl-advanced-banners-detail-layer.html.twig
@@ -23,25 +23,5 @@
                 <sw-icon name="default-action-trash" size="16"></sw-icon>
             </div>
         </div>
-        <sw-modal ref="configModal"
-                  v-if="showLayerConfig"
-                  class="rl-advanced-banners-detail-layer__modal"
-                  @modal-close="onConfigModalClose">
-            <template #modal-header>
-                <h4 class="sw-modal__title" id="modalTitleEl">
-                    {{ $tc('rl-advanced-banners.layer.modalTitle.' + layer.type) }}
-                </h4>
-
-                <sw-button :title="$tc('global.sw-modal.labelClose')"
-                           size="small"
-                           variant="primary"
-                           :aria-label="$tc('global.sw-modal.labelClose')"
-                           @click.prevent="$refs.configModal.closeModal">
-                    {{ $tc('rl-advanced-banners.layer.modalDoneButton') }}
-                </sw-button>
-            </template>
-
-            <component :is="'rl-advanced-banners-layer-config-' + layer.type" :layer="layer"></component>
-        </sw-modal>
     </div>
 {% endblock %}
diff --git a/...tion/src/module/rl-advanced-banners/component/rl-advanced-banners-detail-sidebar/index.js b/...tion/src/module/rl-advanced-banners/component/rl-advanced-banners-detail-sidebar/index.js
@@ -44,56 +44,71 @@ Component.register('rl-advanced-banners-detail-sidebar', {
         }
     },
 
+    data() {
+        return {
+            layerConfigLayer: null
+        };
+    },
+
     methods: {
         addTextLayer() {
             this.advancedBanner.data.layers.push({
                 id: utils.createId(),
                 type: 'text',
                 position: this.newMaxPosition,
-                config: Object.assign(this.defaultConfig, {
+                config: {...this.defaultConfig, ...{
                     content: 'Placeholder text',
                     textAlignX: 'left',
                     textAlignY: 'top'
-                })
+                }}
             });
         },
         addImageLayer() {
             this.advancedBanner.data.layers.push({
                 id: utils.createId(),
                 type: 'image',
                 position: this.newMaxPosition,
-                config: Object.assign(this.defaultConfig, {
+                config: {...this.defaultConfig, ...{
                     mediaMode: 'cover',
                     mediaPositionX: 'center',
                     mediaPositionY: 'center',
-                })
+                }}
             });
         },
         addButtonLayer() {
             this.advancedBanner.data.layers.push({
                 id: utils.createId(),
                 type: 'button',
                 position: this.newMaxPosition,
-                config: Object.assign(this.defaultConfig, {
+                config: {...this.defaultConfig, ...{
                     buttonVariant: 'primary',
                     content: 'Click me!',
                     buttonLink: '',
                     buttonTarget: '_self',
                     buttonAlignX: 'left',
                     buttonAlignY: 'top'
-                })
+                }}
             });
         },
         addSolidLayer() {
             this.advancedBanner.data.layers.push({
                 id: utils.createId(),
                 type: 'solid',
                 position: this.newMaxPosition,
-                config: Object.assign(this.defaultConfig, {
+                config: {...this.defaultConfig, ...{
                     color: '#189eff'
-                })
+                }}
             });
         },
+
+        onLayerConfig(layer) {
+            this.layerConfigLayer = layer;
+        },
+
+        onConfigModalClose() {
+            this.layerConfigLayer = null;
+        },
+
         onLayerRemove(layer) {
             const data = this.advancedBanner.data.layers;
 

diff --git a/...component/rl-advanced-banners-detail-sidebar/rl-advanced-banners-detail-sidebar.html.twig b/...component/rl-advanced-banners-detail-sidebar/rl-advanced-banners-detail-sidebar.html.twig
@@ -64,9 +64,31 @@
                         :layer="layer"
                         v-draggable="{ dragGroup: 'banner-layer', data: layer, onDragEnter: onLayerDragSort }"
                         v-droppable="{ dragGroup: 'banner-layer', data: layer }"
+                        @config-layer="onLayerConfig(layer)"
                         @remove-layer="onLayerRemove(layer)"></rl-advanced-banners-detail-layer>
                 </div>
             {% endblock %}
+
+            <sw-modal ref="configModal"
+                      v-if="layerConfigLayer"
+                      class="rl-advanced-banners-detail-layer__modal"
+                      @modal-close="onConfigModalClose">
+                <template #modal-header>
+                    <h4 class="sw-modal__title" id="modalTitleEl">
+                        {{ $tc('rl-advanced-banners.layer.modalTitle.' + layerConfigLayer.type) }}
+                    </h4>
+
+                    <sw-button :title="$tc('global.sw-modal.labelClose')"
+                               size="small"
+                               variant="primary"
+                               :aria-label="$tc('global.sw-modal.labelClose')"
+                               @click.prevent="$refs.configModal.closeModal">
+                        {{ $tc('rl-advanced-banners.layer.modalDoneButton') }}
+                    </sw-button>
+                </template>
+
+                <component :is="'rl-advanced-banners-layer-config-' + layerConfigLayer.type" :layer="layerConfigLayer"></component>
+            </sw-modal>
         </sw-sidebar-item>
     {% endblock %}
 </sw-sidebar>