Merge branch 'next-9586/open-categories-in-new-tabs-with-right-click'…

… into 'master' NEXT-9586 - Open categories in new tabs with right-click See merge request shopware/6/product/platform!3837
reisueber · Nov 30, 2020 · c71b7ae · c71b7ae
2 parents d93fd72 + 4c8d4ba
commit c71b7ae
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 2 deletions.
diff --git a/changelog/_unreleased/2020-11-23-open-categories-in-new-tabs-with-right-click.md b/changelog/_unreleased/2020-11-23-open-categories-in-new-tabs-with-right-click.md
@@ -0,0 +1,9 @@
+---
+title: Open categories in new tabs with right-click
+issue: NEXT-9586
+---
+# Administration
+* Added a method `getCategoryUrl` in `src/module/sw-category/component/sw-category-tree/index.js`.
+* Added a new prop `getItemUrl` in `src/app/component/tree/sw-tree-item/index.js`.
+* Added a method `showItemUrl` in `src/app/component/tree/sw-tree-item/index.js`.
+* Added `href` attribute into <a> tag in `{% block sw_tree_items_item_content_default %}` and `{% block sw_tree_item_children_items_slot_content_default %}` in `src/app/component/tree/sw-tree-item/sw-tree-item.html.twig`
diff --git a/src/Administration/Resources/app/administration/src/app/component/tree/sw-tree-item/index.js b/src/Administration/Resources/app/administration/src/app/component/tree/sw-tree-item/index.js
@@ -101,6 +101,12 @@ Component.register('sw-tree-item', {
             type: Boolean,
             required: false,
             default: true
+        },
+
+        getItemUrl: {
+            type: Function,
+            required: false,
+            default: null
         }
     },
 
@@ -375,6 +381,14 @@ Component.register('sw-tree-item', {
             }
 
             return item.data.name;
+        },
+
+        showItemUrl(item) {
+            if (this.getItemUrl) {
+                return this.getItemUrl(item);
+            }
+
+            return false;
         }
     }
 });
diff --git a/...n/Resources/app/administration/src/app/component/tree/sw-tree-item/sw-tree-item.html.twig b/...n/Resources/app/administration/src/app/component/tree/sw-tree-item/sw-tree-item.html.twig
@@ -62,7 +62,7 @@
 
                             {% block sw_tree_items_item_content_default %}
                                 <template v-else>
-                                    <a v-if="onChangeRoute" class="tree-link" @click="onChangeRoute(item)">
+                                    <a v-if="onChangeRoute" class="tree-link" :href="showItemUrl(item)" @click="onChangeRoute(item)">
                                         <span class="sw-tree-item__label">{{ getName(item) }}</span>
                                     </a>
                                     <span v-else class="sw-tree-item__label">{{ getName(item) }}</span>
@@ -171,7 +171,7 @@
 
                                                     {% block sw_tree_item_children_items_slot_content_default %}
                                                         <template v-else>
-                                                            <a v-if="onChangeRoute" class="tree-link" @click="onChangeRoute(item)">
+                                                            <a v-if="onChangeRoute" class="tree-link" :href="showItemUrl(item)" @click="onChangeRoute(item)">
                                                                 <span class="sw-tree-item__label">{{ getName(item) }}</span>
                                                             </a>
                                                             <span v-else class="sw-tree-item__label">{{ getName(item) }}</span>

diff --git a/...n/Resources/app/administration/src/module/sw-category/component/sw-category-tree/index.js b/...n/Resources/app/administration/src/module/sw-category/component/sw-category-tree/index.js
@@ -321,6 +321,13 @@ Component.register('sw-category-tree', {
                 }
             });
             return idsToDelete;
+        },
+
+        getCategoryUrl(category) {
+            return this.$router.resolve({
+                name: this.linkContext,
+                params: { id: category.id }
+            }).href;
         }
     }
 });
diff --git a/...ministration/src/module/sw-category/component/sw-category-tree/sw-category-tree.html.twig b/...ministration/src/module/sw-category/component/sw-category-tree/sw-category-tree.html.twig
@@ -44,6 +44,7 @@
                         :displayCheckbox="allowEdit"
                         :contextMenuTooltipText="contextMenuTooltipText"
                         :newElementId="newElementId"
+                        :getItemUrl="getCategoryUrl"
                         @check-item="checkItem">
                     </sw-tree-item>
                 </template>

diff --git a/src/Administration/Resources/app/administration/test/app/component/tree/sw-tree-item.spec.js b/src/Administration/Resources/app/administration/test/app/component/tree/sw-tree-item.spec.js
@@ -125,4 +125,28 @@ describe('src/app/component/tree/sw-tree-item', () => {
 
         expect(contextButton.find('.sw-context-menu__group-button-delete').attributes().disabled).not.toBeUndefined();
     });
+
+    it('should not show href attribute', async () => {
+        await wrapper.setProps({
+            allowDeleteCategories: false,
+            onChangeRoute: () => {}
+        });
+
+        const treeLink = wrapper.find('.tree-link');
+        expect(treeLink.attributes().href).toBeFalsy();
+    });
+
+    it('should show href attribute', async () => {
+        await wrapper.setProps({
+            allowDeleteCategories: false,
+            onChangeRoute: () => {},
+            getItemUrl: (item) => {
+                return 'detail/:id'.replace(':id', item.data.id);
+            }
+        });
+
+        const treeLink = wrapper.find('.tree-link');
+        expect(treeLink.attributes().href).not.toEqual('detail/1a2b');
+        expect(treeLink.attributes().href).toEqual('detail/1a2b3c');
+    });
 });
diff --git a/...n/Resources/app/administration/test/module/sw-category/component/sw-category-tree.spec.js b/...n/Resources/app/administration/test/module/sw-category/component/sw-category-tree.spec.js
@@ -1,11 +1,23 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import 'src/module/sw-category/component/sw-category-tree';
+import VueRouter from 'vue-router';
 
 function createWrapper() {
     const localVue = createLocalVue();
+    localVue.use(VueRouter);
+
+    const routes = [{
+        name: 'sw.category.detail',
+        path: 'category/detail/:id'
+    }];
+
+    const router = new VueRouter({
+        routes
+    });
 
     return shallowMount(Shopware.Component.build('sw-category-tree'), {
         localVue,
+        router,
         stubs: {
             'sw-loader': true,
             'sw-tree': {
@@ -229,4 +241,28 @@ describe('src/module/sw-category/component/sw-category-tree', () => {
         const treeItem = wrapper.find('sw-tree-item-stub');
         expect(treeItem.attributes().contextmenutooltiptext).toBeUndefined();
     });
+
+    it('should get right category url', async () => {
+        const wrapper = createWrapper();
+
+        await wrapper.setData({
+            isLoadingInitialData: false
+        });
+        await wrapper.vm.$nextTick();
+
+        const itemUrl = wrapper.vm.getCategoryUrl({ id: '1a2b' });
+        expect(itemUrl).toEqual('#category/detail/1a2b');
+    });
+
+    it('should get wrong category url', async () => {
+        const wrapper = createWrapper();
+
+        await wrapper.setData({
+            isLoadingInitialData: false
+        });
+        await wrapper.vm.$nextTick();
+
+        const itemUrl = wrapper.vm.getCategoryUrl({ id: '1a2b' });
+        expect(itemUrl).not.toEqual('#/detail/1a2b');
+    });
 });