NEXT-28992 - Fix category module for Vue 3

Resources/app/administration/src/app/component/base/sw-product-variant-info/index.js

@@ -16,6 +16,8 @@ const { Component } = Shopware;
 Component.register('sw-product-variant-info', {
     template,
 
+    inject: ['feature'],
+
     props: {
         variations: {
             type: Array,
@@ -71,7 +73,10 @@ Component.register('sw-product-variant-info', {
 
     computed: {
         productName() {
-            return this.$slots.default[0].text;
+            if (this.feature.isActive('VUE3')) {
+                return this.$slots?.default?.()?.[0]?.children || '';
+            }
+            return this.$slots?.default?.[0]?.text || '';
         },
     },
 
@@ -91,11 +96,14 @@ Component.register('sw-product-variant-info', {
         },
 
         getFirstSlot() {
+            if (this.feature.isActive('VUE3')) {
+                return this.$slots?.default?.()?.[0]?.children || '';
+            }
             return this.$slots?.default?.[0]?.text || '';
         },
 
         setHelpText() {
-            this.helpText = this.titleTerm ? this.titleTerm : this.getFirstSlot();
+            this.helpText = this.titleTerm || this.getFirstSlot();
 
             if (this.helpText && this.variations && this.variations.length > 0) {
                 this.tooltipWidth = 500;

Resources/app/administration/src/app/component/entity/sw-product-stream-grid-preview/sw-product-stream-grid-preview.html.twig

@@ -119,6 +119,7 @@
             v-if="!total && !isLoading"
             :title="emptyStateMessage"
             :absolute="false"
+            auto-height
             :show-description="false"
         >
             <template #icon>

Resources/app/administration/src/app/component/form/sw-confirm-field/index.js

@@ -57,6 +57,7 @@ Component.register('sw-confirm-field', {
 
     data() {
         return {
+            hasSubmittedFromKey: false,
             isEditing: false,
             draft: this.value,
             event: null,
@@ -92,8 +93,9 @@ Component.register('sw-confirm-field', {
             this.isEditing = true;
         },
 
-        onBlurField({ relatedTarget }) {
-            if (!!relatedTarget && relatedTarget.classList.contains('sw-confirm-field__button')) {
+        onBlurField(event) {
+            if (event?.relatedTarget?.classList.contains('sw-confirm-field__button') || this.hasSubmittedFromKey) {
+                this.hasSubmittedFromKey = false;
                 return;
             }
             this.$emit('blur');
@@ -123,6 +125,7 @@ Component.register('sw-confirm-field', {
         },
 
         onSubmitFromKey() {
+            this.hasSubmittedFromKey = true;
             this.event = 'key';
             this.submitValue();
             this.isEditing = false;

Resources/app/administration/src/app/component/tree/sw-tree-item/sw-tree-item.html.twig

@@ -109,8 +109,8 @@
                         :prevent-empty-submit="true"
                         :placeholder="$tc(`${translationContext}.general.buttonCreate`)"
                         @input="onFinishNameingElement"
-                        @blur="onCancelSubmit(item)"
-                        @submit-cancel="onBlurTreeItemInput(item)"
+                        @blur="onBlurTreeItemInput(item)"
+                        @submit-cancel="onCancelSubmit(item)"
                     />
                 </template>
                 {% endblock %}

Resources/app/administration/src/module/sw-category/component/sw-category-detail-menu/sw-category-detail-menu.spec.vue3.js

@@ -0,0 +1,148 @@
+/**
+ * @package content
+ */
+import { mount } from '@vue/test-utils_v3';
+
+async function createWrapper() {
+    return mount(await wrapTestComponent('sw-category-detail-menu', { sync: true }), {
+        global: {
+            stubs: {
+                'sw-card': {
+                    template: '<div class="sw-card"><slot></slot></div>',
+                },
+                'sw-upload-listener': true,
+                'sw-media-upload-v2': {
+                    template: '<div class="sw-media-upload-v2"></div>',
+                    props: ['disabled'],
+                },
+                'sw-switch-field': {
+                    template: '<input class="sw-switch-field" type="checkbox" :value="value" @change="$emit(\'update:value\', $event.target.checked)" />',
+                    props: ['value', 'disabled'],
+                },
+                'sw-text-editor': {
+                    template: '<div class="sw-text-editor"></div>',
+                    props: ['disabled'],
+                },
+                'sw-media-modal-v2': {
+                    template: '<div class="sw-media-modal-v2"><button @click="onEmitSelection">Add media</button></div>',
+                    methods: {
+                        onEmitSelection() {
+                            this.$emit('media-modal-selection-change', [{ id: 'id' }]);
+                        },
+                    },
+                },
+            },
+        },
+        props: {
+            category: {
+                id: 'id',
+                visible: true,
+                getEntityName: () => {},
+            },
+        },
+    });
+}
+
+describe('src/module/sw-category/component/sw-category-detail-menu', () => {
+    beforeEach(() => {
+        global.activeAclRoles = [];
+    });
+
+    it('should enable the visibility switch field when the acl privilege is missing', async () => {
+        global.activeAclRoles = ['category.editor'];
+
+        const wrapper = await createWrapper();
+
+        const switchField = wrapper.getComponent('.sw-switch-field');
+
+        expect(switchField.props('disabled')).toBe(false);
+    });
+
+    it('should disable the visibility switch field when the acl privilege is missing', async () => {
+        const wrapper = await createWrapper();
+
+        const switchField = wrapper.getComponent('.sw-switch-field');
+
+        expect(switchField.props('disabled')).toBe(true);
+    });
+
+    it('should enable the media upload', async () => {
+        global.activeAclRoles = ['category.editor'];
+
+        const wrapper = await createWrapper();
+
+        const mediaUpload = wrapper.getComponent('.sw-media-upload-v2');
+
+        expect(mediaUpload.props('disabled')).toBe(false);
+    });
+
+    it('should disable the media upload', async () => {
+        const wrapper = await createWrapper();
+
+        const mediaUpload = wrapper.getComponent('.sw-media-upload-v2');
+
+        expect(mediaUpload.props('disabled')).toBe(true);
+    });
+
+    it('should enable the text editor for the description', async () => {
+        global.activeAclRoles = ['category.editor'];
+
+        const wrapper = await createWrapper();
+
+        const textEditor = wrapper.getComponent('.sw-text-editor');
+
+        expect(textEditor.props('disabled')).toBe(false);
+    });
+
+    it('should disable the text editor for the description', async () => {
+        const wrapper = await createWrapper();
+
+        const textEditor = wrapper.getComponent('.sw-text-editor');
+
+        expect(textEditor.props('disabled')).toBe(true);
+    });
+
+    it('should open media modal', async () => {
+        const wrapper = await createWrapper();
+
+        await wrapper.setData({ showMediaModal: true });
+
+        const mediaModal = wrapper.find('.sw-media-modal-v2');
+
+        expect(mediaModal.exists()).toBe(true);
+    });
+
+    it('should turn off media modal', async () => {
+        const wrapper = await createWrapper();
+
+        const mediaModal = wrapper.find('.sw-media-modal-v2');
+
+        expect(mediaModal.exists()).toBeFalsy();
+    });
+
+    it('should be able to change category media', async () => {
+        const wrapper = await createWrapper();
+
+        wrapper.vm.mediaRepository.get = jest.fn(() => Promise.resolve({ id: 'id' }));
+
+        await wrapper.setData({ showMediaModal: true });
+        const button = wrapper.find('.sw-media-modal-v2 button');
+        await button.trigger('click');
+
+        expect(wrapper.vm.mediaRepository.get).toHaveBeenCalledWith('id');
+        expect(wrapper.vm.category.mediaId).toBe('id');
+
+        wrapper.vm.mediaRepository.get.mockRestore();
+    });
+
+    it('should not change category media when selected media is null', async () => {
+        const wrapper = await createWrapper();
+
+        wrapper.vm.mediaRepository.get = jest.fn(() => Promise.resolve({}));
+        wrapper.vm.onMediaSelectionChange([]);
+
+        expect(wrapper.vm.mediaRepository.get).not.toHaveBeenCalled();
+
+        wrapper.vm.mediaRepository.get.mockRestore();
+    });
+});

Resources/app/administration/src/module/sw-category/component/sw-category-entry-point-card/sw-category-entry-point-card.html.twig

@@ -68,7 +68,11 @@
         :criteria="salesChannelCriteria"
         :placeholder="$tc('sw-category.base.entry-point-card.placeholderSalesChannels')"
         :disabled="!selectedEntryPoint || !acl.can('category.editor')"
+        {% if VUE3 %}
+        @update:entity-collection="onSalesChannelChange"
+        {% else %}
         @change="onSalesChannelChange"
+        {% endif %}
     />
     {% endblock %}