How to get inheritance data from the repository in the admin end

In this blog, you are going to learn “How to get inheritance data from the repository in the admin.”
I hope you know the directory structure of Shopware 6 plugin, if you don’t know, see here- https://docs.shopware.com/en/shopware-platform-dev-en/internals/directory-structure.

The purpose of this, a parent-child inheritance system was implemented in the DAL. This allows variants to inherit records, properties or even whole associations from the parent or also called container product. For example, if a variant has not been assigned any categories or images, those of the parent product are used.

The directory to create listing should be the following, which represents the same structure like the core: <plugin root>/src/Resources/app/administration/src/module/test/

index.js

const { Component, Mixin } = Shopware;
const { Criteria } = Shopware.Data;
import template from './test-list.html.twig';

Component.register('wk-test-list', {
    template,

    inject: [
        'repositoryFactory',
        'filterFactory'
    ],

    mixins: [
        Mixin.getByName('notification'),
        Mixin.getByName('salutation'),
        Mixin.getByName('listing')
    ],

    data() {
        return {
            isLoading: false,
            showDeleteModal: false,
            processSuccess: false,
            total: 0,
            tests: null,
            page: 1,
            limit: 10,
            sortDirection: 'DESC',
            showDeleteModal: null,
            storeKey: 'grid.filter.wk_test',    
            defaultFilters: [
                'product-filter'
            ],       
            activeFilterNumber: 0, 
            filterCriteria: [],      
        };
    },

    metaInfo() {
        return {
            title: this.$createTitle()
        };
    },

    computed: {
        testRepository() {
           return this.repositoryFactory.create('wk_test');
        },

        testColumns() {
            return this.getTestColumns();
        },


        listFilters() {
            return this.filterFactory.create('wk_test', {
                'product-filter': {
                    property: 'product',
                    label: this.$tc("test.list.filters.productLabel"),
                    placeholder: this.$tc("test.list.filters.placeholderProduct"),
                    criteria: this.productCriteria,
                    displayVariants: false,
                }              
            });
        },

         productCriteria() {
            const criteria = new Criteria();
            criteria.addFilter(Criteria.equals('parentId', null));
            criteria.addFilter(Criteria.equals('childCount', 0));
            return criteria;
        },

        defaultCriteria() {
            const defaultCriteria = new Criteria(this.page, this.limit);

            defaultCriteria.setTerm(this.term);
            defaultCriteria.addSorting(Criteria.sort('createdAt', this.sortDirection));
            
            defaultCriteria
                .addAssociation('product');

            this.filterCriteria.forEach(filter => {
                defaultCriteria.addFilter(filter);
            });

            return defaultCriteria;
        }  
    },

    watch: {
        defaultCriteria: {
            handler() {
                this.getList();
            },
            deep: true,
        },
    },

    methods: {
        async getList() {
            this.isLoading = true;

            const criteria = await Shopware.Service('filterService')
                .mergeWithStoredFilters(this.storeKey, this.defaultCriteria);

            this.activeFilterNumber = criteria.filters.length;

            try {
                const items = await this.testRepository.search(this.defaultCriteria, { ...Shopware.Context.api, inheritance: true });

                this.total = items.total;
                this.tests = items;
                this.isLoading = false;
                this.selection = {};
            } catch {
                this.isLoading = false;
            }
        },

        getTestColumns() {
            return [{
                property: 'product.name',
                dataIndex: 'product.name',
                label: this.$tc('test.list.columnProductName'),
                allowResize: true,
                primary: true,
            }]
        },

        updateCriteria(criteria) {
            this.page = 1;
            this.filterCriteria = criteria;
        },

        onPageChange({ page = 1, limit = 1 }) {
            this.page = page;
            this.limit = limit;
            this.getList();
        },

        onDelete(id) {
            this.showDeleteModal = id;
        },

        onCloseDeleteModal() {
            this.showDeleteModal = false;
        },

        onConfirmDelete(id) {
            this.showDeleteModal = false;

            return this.testRepository.delete(id, Shopware.Context.api).then(() => {
                this.getList();
            });
        },
    }
});

In index.js file, we use filter factory service to filter the data from the listing. List filter function have all the list of filter and default criteria is call by get list function when getting data from the repository according to them data has to come.

To inheritance data from parent, in search function first argument is criteria and second argument is combination of context and inheritance.For example const items = await this.testRepository.search(this.defaultCriteria, { ...Shopware.Context.api, inheritance: true });
If inheritance is set to true then it get data from parent otherwise not.

test-list.html.twig

{% block wk_test_list %}
    <sw-page>
        {% block wk_test_list_smart_bar_header %}
            <template #smart-bar-header>
                {% block wk_test_list_smart_bar_header_title %}
                    <h2>
                        {% block wk_test_list_smart_bar_header_title_text %}
                            {{ $tc('sw-settings.index.title') }}
                        {% endblock %}

                        {% block wk_test_list_smart_bar_header_amount %}
                            <span v-if="!isLoading">
                                ({{ total }})
                            </span> 
                        {% endblock %}
                    </h2>
                {% endblock %}
            </template>
        {% endblock %}

        <template #content>
            {% block wk_test_list_content %}
                <div>
                    {% block wk_test_list_grid %}
                        <sw-entity-listing
                        v-if ="test"
                        :items="test"
                        :columns="testColumns"
                        :repository="testRepository"
                        :showSelection="false"
                        :isLoading="isLoading">

                            {% block sw_product_list_grid_columns_name_preview %}
                                <template #preview-product.name="{ item }">
                                    <sw-media-preview-v2 :source="item.product.cover ? item.product.cover.media : null"></sw-media-preview-v2>
                                </template>
                            {% endblock %}

                            {% block wk_test_list_grid_columns_name %}
                                <template #column-product.name="{ item, compact}">
                                    <router-link :to="{ name: 'sw.product.detail', params: { id: item.productId } }">
                                        <sw-product-variant-info :variations="item.product.variation">
                                            {{ item.product.translated.name || item.product.name }}
                                        </sw-product-variant-info>
                                    </router-link>
                                </template>
                            {% endblock %}

                            <template #pagination>
                                {% block wk_test_list_grid_pagination %}
                                    <sw-pagination :page="page"
                                                    :limit="limit"
                                                    :total="total"
                                                    :total-visible="7"
                                                    @page-change="onPageChange">
                                    </sw-pagination>
                                {% endblock %}
                            </template>
                        </sw-entity-listing>
                    {% endblock %}
                </div>
            {% endblock %}
        </template>

        {% block wk_test_list_list_sidebar %}
            <sw-sidebar slot="sidebar">
                {% block  wk_test_list_list_sidebar_refresh %}
                    <sw-sidebar-item
                    icon="default-arrow-360-left"
                    :title="$tc('test.list.titleSidebarItemRefresh')"
                    @click="onRefresh">
                    </sw-sidebar-item>
                {% endblock %}

                {% block wk_test_list_list_sidebar_filter %}
                    <sw-sidebar-filter-panel
                        entity="wk_test"
                        :storeKey="storeKey"
                        :filters="listFilters"
                        :defaults="defaultFilters"
                        :activeFilterNumber="activeFilterNumber"
                        @criteria-changed="updateCriteria">
                    </sw-sidebar-filter-panel>
                {% endblock %}
            </sw-sidebar>
        {% endblock %} 
    </sw-page>
{% endblock %}

In list.html.twig file is same as other listing, but for showing name of product in the listing use componnt sw-product-variant-info . Must add association product and product.options.group, in variation attribute set the variation or options of the product and print item.product.translated.name or item.product.name.

sw-sidebar-filter-panel component used to display the filter button in the listing and set some required attribute in them.
sw-sidebar-item is used to display or do something according to need, in here we show refresh button to refresh the page.

hope it will help you. Thanks for reading. Happy Coding 🙂
Thank You.