Merge branch 'next-21408/auto-imported-from-github' into 'trunk'

NEXT-21408 - fix handling of large and many custom-field-sets See merge request shopware/6/product/platform!8046
pweyck · May 31, 2022 · 43dcc02 · 43dcc02
2 parents 9bc45fd + ba1496b
commit 43dcc02
Show file tree

Hide file tree

Showing 24 changed files with 470 additions and 107 deletions.
diff --git a/changelog/_unreleased/2022-05-10-fix-loading-of-custom-fields-with-async.md b/changelog/_unreleased/2022-05-10-fix-loading-of-custom-fields-with-async.md
@@ -0,0 +1,10 @@
+---
+title: Fix many and huge custom-field-sets by loading the fields asynchronous
+issue: NEXT-21408
+author: Robert Schönthal
+author_email: [email protected]
+author_github: digitalkaoz
+---
+# Administration
+* Changed Field-Set-Renderer to load only Fields for the current active tab `sw-custom-field-set-renderer`
+* Changed all Modules using this component to initally only load the set without its fields
diff --git a/...Resources/app/administration/src/app/component/form/sw-custom-field-set-renderer/index.js b/...Resources/app/administration/src/app/component/form/sw-custom-field-set-renderer/index.js
@@ -15,7 +15,11 @@ const { Criteria } = Shopware.Data;
 Component.register('sw-custom-field-set-renderer', {
     template,
 
-    inject: ['feature'],
+    inject: [
+        'feature',
+        'repositoryFactory',
+    ],
+
 
     // Grant access to some variables to the child form render components
     provide() {
@@ -83,6 +87,10 @@ Component.register('sw-custom-field-set-renderer', {
     data() {
         return {
             customFields: {},
+            loadingFields: [],
+            tabWaitMaxAttempts: 10,
+            tabWaitsAttempts: 0,
+            refreshVisibleSets: false,
         };
     },
 
@@ -113,12 +121,8 @@ Component.register('sw-custom-field-set-renderer', {
             }
 
             // customFieldSetSelectionActive not set and parent product has no selection
-            if (this.entity.customFieldSetSelectionActive === null
-                && this.getInheritValue('customFieldSetSelectionActive') === null) {
-                return false;
-            }
-
-            return true;
+            return !(this.entity.customFieldSetSelectionActive === null
+                && this.getInheritValue('customFieldSetSelectionActive') === null);
         },
 
         visibleCustomFieldSets() {
@@ -136,13 +140,16 @@ Component.register('sw-custom-field-set-renderer', {
             }));
         },
 
+        customFieldSetRepository() {
+            return this.repositoryFactory.create('custom_field_set');
+        },
+
         customFieldSetCriteria() {
-            const criteria = new Criteria(1, 500);
+            const criteria = new Criteria(1, null);
 
             criteria.addFilter(Criteria.equals('relations.entityName', this.entity.getEntityName()));
             criteria.addFilter(Criteria.equals('global', 0));
             criteria
-                .getAssociation('customFields')
                 .addSorting(Criteria.sort('config.customFieldPosition', 'ASC', true));
 
             return criteria;
@@ -326,13 +333,78 @@ Component.register('sw-custom-field-set-renderer', {
             };
         },
 
-        onChangeCustomFieldSets(value, updateFn) {
+        customFieldSetCriteriaById() {
+            const criteria = new Criteria(1, 1);
+            const customFieldsCriteria = new Criteria(1, null);
+
+            customFieldsCriteria.addSorting(Criteria.sort('config.customFieldsPosition'));
+
+            criteria
+                .addAssociation('customFields', customFieldsCriteria);
+
+            return criteria;
+        },
+
+        loadCustomFieldSet(setId) {
+            if (this.loadingFields.includes(setId)) {
+                // as we might triggered multiple times with the same item, we store the loading set in a heap cache
+                return;
+            }
+
+            // failsave dealing with sets (should be an entityCollection, but in reality might be just an array)
+            const set = this.sets.get ? this.sets.get(setId) : this.sets.find(s => s.id === setId);
+
+            if (set.customFields && set.customFields.length > 0) {
+                // already loaded, so do nothing
+                return;
+            }
+
+            // indicate the loading of this item
+            this.loadingFields.push(setId);
+
+            // fully load the set
+            this.customFieldSetRepository
+                .get(setId, Shopware.Context.api, this.customFieldSetCriteriaById())
+                .then(newSet => {
+                    // replace the fully fetched set
+                    this.sets.forEach((originalSet, index) => {
+                        if (originalSet.id === newSet.id) {
+                            this.$set(this.sets, index, newSet);
+                        }
+                    });
+
+                    // remove the set from the currently loading onces and refresh the visible sets
+                    this.loadingFields = this.loadingFields.filter(s => s.id !== setId);
+                }).catch(() => {
+                    // in case of error make loading again possible
+                    this.loadingFields = this.loadingFields.filter(s => s.id !== setId);
+                });
+        },
+
+        resetTabs() {
             if (this.visibleCustomFieldSets.length > 0 && this.$refs.tabComponent) {
                 // Reset state of tab component if custom field selection changes
-                this.$nextTick(() => {
-                    this.$refs.tabComponent.mountedComponent();
-                    this.$refs.tabComponent.setActiveItem(this.visibleCustomFieldSets[0]);
-                });
+                this.$refs.tabComponent.mountedComponent();
+                this.$refs.tabComponent.setActiveItem({ name: this.visibleCustomFieldSets[0].id });
+            }
+        },
+
+        waitForTabComponent() {
+            if (this.$refs.tabComponent || this.tabWaitsAttempts > this.tabWaitMaxAttempts) {
+                return this.resetTabs();
+            }
+            return this.$nextTick(() => {
+                this.tabWaitsAttempts += 1;
+                this.waitForTabComponent();
+            });
+        },
+
+        onChangeCustomFieldSets(value, updateFn) {
+            if (!this.$refs.tabComponent && (this.visibleCustomFieldSets.length > 0 || value)) {
+                // when rendered initially we wait for the tabcomponent to load so we can activate the first item
+                this.waitForTabComponent();
+            } else {
+                this.resetTabs();
             }
 
             if (typeof updateFn === 'function') {

diff --git a/...rc/app/component/form/sw-custom-field-set-renderer/sw-custom-field-set-renderer.html.twig b/...rc/app/component/form/sw-custom-field-set-renderer/sw-custom-field-set-renderer.html.twig
@@ -71,21 +71,21 @@
             ref="tabComponent"
             class="sw-custom-field-set-renderer__card-tabs"
             variant="minimal"
-            :default-item="visibleCustomFieldSets[0].name"
+            :default-item="visibleCustomFieldSets[0].id"
             :position-identifier="'sw-custom-field-set-renderer'"
+            @new-item-active="(tab) => loadCustomFieldSet(tab.name)"
         >
             {% block sw_custom_field_set_renderer_card_tabs %}
-            <template slot-scope="{ active }">
+            <template #default="{ active }">
                 <template v-for="set in visibleCustomFieldSets">
                     <sw-tabs-item
-                        v-if="set.customFields"
                         :key="`sw-tab--${set.id}`"
                         variant="minimal"
-                        :name="set.name"
+                        :name="set.id"
                         :class="'sw-tab--name-' + set.name"
                         :active-tab="active"
                     >
-                        {{ getInlineSnippet(set.config.label) || set.name }}
+                        {{ set.config ? getInlineSnippet(set.config.label) : set.name }}
                     </sw-tabs-item>
                 </template>
             </template>
@@ -98,13 +98,19 @@
             >
                 <template v-for="set in visibleCustomFieldSets">
                     <div
-                        v-if="set.customFields"
-                        v-show="active === set.name"
-                        :key="set.name"
+                        v-show="active === set.id"
+                        :key="set.id"
                         :class="'sw-custom-field-set-renderer-tab-content__' + set.name"
                     >
                         {% block sw_custom_field_set_renderer_card_form_renderer %}
-                        <template v-for="customField in set.customFields">
+                        <sw-skeleton
+                            v-if="!set.customFields || !set.customFields.length"
+                            style="width:100%"
+                        />
+                        <template
+                            v-for="customField in set.customFields"
+                            v-else
+                        >
                             <sw-inherit-wrapper
                                 v-if="entity && customField.config"
                                 :key="customField.name"

diff --git a/.../Resources/app/administration/src/module/sw-bulk-edit/page/sw-bulk-edit-customer/index.js b/.../Resources/app/administration/src/module/sw-bulk-edit/page/sw-bulk-edit-customer/index.js
@@ -56,12 +56,9 @@ Component.register('sw-bulk-edit-customer', {
         },
 
         customFieldSetCriteria() {
-            const criteria = new Criteria(1, 100);
+            const criteria = new Criteria(1, null);
 
             criteria.addFilter(Criteria.equals('relations.entityName', 'customer'));
-            criteria
-                .getAssociation('customFields')
-                .addSorting(Criteria.sort('config.customFieldPosition', 'ASC', true));
 
             return criteria;
         },

diff --git a/...ion/Resources/app/administration/src/module/sw-bulk-edit/page/sw-bulk-edit-order/index.js b/...ion/Resources/app/administration/src/module/sw-bulk-edit/page/sw-bulk-edit-order/index.js
@@ -60,12 +60,9 @@ Component.register('sw-bulk-edit-order', {
         },
 
         customFieldSetCriteria() {
-            const criteria = new Criteria(1, 100);
+            const criteria = new Criteria(1, null);
 
             criteria.addFilter(Criteria.equals('relations.entityName', 'order'));
-            criteria
-                .getAssociation('customFields')
-                .addSorting(Criteria.sort('config.customFieldPosition', 'ASC', true));
 
             return criteria;
         },

diff --git a/...n/Resources/app/administration/src/module/sw-bulk-edit/page/sw-bulk-edit-product/index.js b/...n/Resources/app/administration/src/module/sw-bulk-edit/page/sw-bulk-edit-product/index.js
@@ -80,12 +80,9 @@ Component.register('sw-bulk-edit-product', {
             return Object.values(this.bulkEditProduct).some(field => field.isChanged) || this.bulkEditSelected.length > 0;
         },
         customFieldSetCriteria() {
-            const criteria = new Criteria(1, 100);
+            const criteria = new Criteria(1, null);
 
             criteria.addFilter(Criteria.equals('relations.entityName', 'product'));
-            criteria
-                .getAssociation('customFields')
-                .addSorting(Criteria.sort('config.customFieldPosition', 'ASC', true));
 
             return criteria;
         },

diff --git a/...tion/Resources/app/administration/src/module/sw-category/page/sw-category-detail/index.js b/...tion/Resources/app/administration/src/module/sw-category/page/sw-category-detail/index.js
@@ -134,23 +134,17 @@ Component.register('sw-category-detail', {
         },
 
         customFieldSetCriteria() {
-            const criteria = new Criteria(1, 100);
+            const criteria = new Criteria(1, null);
 
             criteria.addFilter(Criteria.equals('relations.entityName', 'category'));
-            criteria
-                .getAssociation('customFields')
-                .addSorting(Criteria.sort('config.customFieldPosition', 'ASC', true));
 
             return criteria;
         },
 
         customFieldSetLandingPageCriteria() {
-            const criteria = new Criteria(1, 100);
+            const criteria = new Criteria(1, null);
 
             criteria.addFilter(Criteria.equals('relations.entityName', 'landing_page'));
-            criteria
-                .getAssociation('customFields')
-                .addSorting(Criteria.sort('config.customFieldPosition', 'ASC', true));
 
             return criteria;
         },

diff --git a/...rces/app/administration/src/module/sw-customer/view/sw-customer-detail-addresses/index.js b/...rces/app/administration/src/module/sw-customer/view/sw-customer-detail-addresses/index.js
@@ -118,8 +118,7 @@ Component.register('sw-customer-detail-addresses', {
             }
 
             const customFieldSetCriteria = new Criteria(1, 25);
-            customFieldSetCriteria.addFilter(Criteria.equals('relations.entityName', 'customer_address'))
-                .addAssociation('customFields');
+            customFieldSetCriteria.addFilter(Criteria.equals('relations.entityName', 'customer_address'));
 
             this.customFieldSetRepository.search(customFieldSetCriteria).then((customFieldSets) => {
                 this.customerAddressCustomFieldSets = customFieldSets;

diff --git a/...Resources/app/administration/src/module/sw-customer/view/sw-customer-detail-base/index.js b/...Resources/app/administration/src/module/sw-customer/view/sw-customer-detail-base/index.js
@@ -44,9 +44,6 @@ Component.register('sw-customer-detail-base', {
             criteria
                 .addFilter(Criteria.equals('relations.entityName', 'customer'));
 
-            criteria.getAssociation('customFields')
-                .addSorting(Criteria.sort('config.customFieldPosition'));
-
             return criteria;
         },
     },

diff --git a/...ources/app/administration/src/module/sw-manufacturer/page/sw-manufacturer-detail/index.js b/...ources/app/administration/src/module/sw-manufacturer/page/sw-manufacturer-detail/index.js
@@ -67,15 +67,11 @@ Component.register('sw-manufacturer-detail', {
         },
 
         customFieldSetCriteria() {
-            const criteria = new Criteria(1, 100);
+            const criteria = new Criteria(1, null);
             criteria.addFilter(
                 Criteria.equals('relations.entityName', 'product_manufacturer'),
             );
 
-            criteria.getAssociation('customFields')
-                .addSorting(Criteria.sort('config.customFieldPosition', 'ASC', true))
-                .setLimit(100);
-
             return criteria;
         },
 
@@ -143,7 +139,7 @@ Component.register('sw-manufacturer-detail', {
             this.customFieldSetRepository
                 .search(this.customFieldSetCriteria)
                 .then((result) => {
-                    this.customFieldSets = result.filter((set) => set.customFields.length > 0);
+                    this.customFieldSets = result;
                 });
         },
 

diff --git a/...rces/app/administration/src/module/sw-media/component/sidebar/sw-media-quickinfo/index.js b/...rces/app/administration/src/module/sw-media/component/sidebar/sw-media-quickinfo/index.js
@@ -74,13 +74,9 @@ Component.register('sw-media-quickinfo', {
 
         async getCustomFieldSets() {
             const criteria = new Criteria(1, 100)
-                .addFilter(Criteria.equals('relations.entityName', 'media'))
-                .addAssociation('customFields')
-                .addSorting(Criteria.sort('config.customFieldPosition', 'ASC', true))
-                .setLimit(100);
+                .addFilter(Criteria.equals('relations.entityName', 'media'));
 
-            const searchResult = await this.customFieldSetRepository.search(criteria);
-            this.customFieldSets = searchResult.filter(set => set.customFields.length > 0);
+            this.customFieldSets = await this.customFieldSetRepository.search(criteria);
         },
 
         async onSaveCustomFields(item) {

diff --git a/...ation/Resources/app/administration/src/module/sw-order/view/sw-order-detail-base/index.js b/...ation/Resources/app/administration/src/module/sw-order/view/sw-order-detail-base/index.js
@@ -214,11 +214,7 @@ Component.register('sw-order-detail-base', {
         },
 
         customFieldSetCriteria() {
-            const customFieldsCriteria = new Criteria(1, 100);
-            customFieldsCriteria.addSorting(Criteria.sort('config.customFieldsPosition'));
-
-            const criteria = new Criteria(1, 100);
-            criteria.addAssociation('customFields', customFieldsCriteria);
+            const criteria = new Criteria(1, null);
             criteria.addFilter(Criteria.equals('relations.entityName', 'order'));
 
             return criteria;

diff --git a/...on/Resources/app/administration/src/module/sw-order/view/sw-order-detail-details/index.js b/...on/Resources/app/administration/src/module/sw-order/view/sw-order-detail-details/index.js
@@ -125,11 +125,7 @@ Component.register('sw-order-detail-details', {
         },
 
         customFieldSetCriteria() {
-            const customFieldsCriteria = new Criteria(1, 100);
-            customFieldsCriteria.addSorting(Criteria.sort('config.customFieldsPosition'));
-
-            const criteria = new Criteria(1, 100);
-            criteria.addAssociation('customFields', customFieldsCriteria);
+            const criteria = new Criteria(1, null);
             criteria.addFilter(Criteria.equals('relations.entityName', 'order'));
 
             return criteria;