Shopware 6: How to get all properties in custom module

Question

I have one custom module and I need to get properties list in this module as a multi-select.

How it's possible in shopware 6?

I did try below code, but I can't get it.

custom/plugins/CustomProduct/src/Resources/app/administration/src/module/custom-product/page/custom-product-detail/custom-product-detail.html.twig

{% block custom_product_detail %}
    <sw-page class="custom-product-detail">
        <template slot="smart-bar-actions">
            <sw-button
                :disabled="isLoading"
                :routerLink="{ name: 'custom.product.list' }">
                {{ $t('custom-product.detail.actions.cancel-button') }}
            </sw-button>

            <sw-button-process
                :isLoading="isLoading"
                custom="primary"
                @process-finish="saveFinish"
                @click="onClickSave">
                {{ $t('custom-product.detail.actions.save-button') }}
            </sw-button-process>
        </template>

        <template slot="content">
            <sw-card-view>
                <sw-card
                    v-if="module"
                    :isLoading="isLoading"
                    class="information-card">
                    
                    <sw-entity-multi-select
                        :label="$t('custom-product.detail.assignPropertyLabel')"
                        v-model="module.propertyGroupTranslation">
                    </sw-entity-multi-select>

                </sw-card>
            </sw-card-view>
        </template>
    </sw-page>
{% endblock %}

custom/plugins/CustomProduct/src/Resources/app/administration/src/module/custom-product/page/custom-product-detail/index.js

import template from './custom-product-detail.html.twig';

const { Component, Mixin } = Shopware;
const { Criteria } = Shopware.Data;
const newLocal = 'custom_product';

Component.register('custom-product-detail', {
    template,

    inject: [
        'repositoryFactory',
    ],

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

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

    data() {
        return {
            module: null,
            isLoading: false,
            processSuccess: false,
            repository: null
        };
    },

    created() {
        this.repository = this.repositoryFactory.create(newLocal);
        this.getCustom();
    },

    computed: {

        propertyGroupRepository() {
            return this.repositoryFactory.create('property_group');
        },

        customProperties() {
            const criteria = new Criteria();

            criteria.addFilter(Criteria.equals('relations.entityName', 'property_group'));
            return criteria;
        }
    },

    methods: {
        getCustom() {
            this.customProperties();
            const criteria = new Criteria();
            criteria.addAssociation('propertyGroupTranslation');

            this.repository
                .get(this.$route.params.id, Shopware.Context.api, criteria)
                .then((entity) => {
                    this.module = entity;
                });
        },

        onClickSave() {
            this.isLoading = true;

            this.repository
                .save(this.module, Shopware.Context.api)
                .then(() => {
                    this.getCustom();
                    this.isLoading = false;
                    this.processSuccess = true;
                }).catch((exception) => {
                    this.isLoading = false;
                    this.createNotificationError({
                        title: this.$t('custom-variant-product.detail.error-message'),
                        message: exception
                    });
                });
        },

        saveFinish() {
            this.processSuccess = false;
        }
    }
});

Answer 1

I got the solution.

custom/plugins/CustomProduct/src/Resources/app/administration/src/module/custom-product/page/custom-product-detail/custom-product-detail.html.twig

<sw-entity-multi-select
    :label="$t('custom-product.detail.assignPropertyLabel')"
    v-model="module.propertyGroupTranslation">
</sw-entity-multi-select>

replace to

<sw-multi-select
    v-if="customProduct"
    :label="$t('custom-product.detail.assign-property-group-options')"
    :options="propertyOpt"
    labelProperty="translated.name"
    valueProperty="id">
</sw-multi-select>

custom/plugins/CustomProduct/src/Resources/app/administration/src/module/custom-product/page/custom-product-detail/index.js

import template from './custom-product-detail.html.twig';

const { Component, Mixin } = Shopware;
const { Criteria } = Shopware.Data;

Component.register('custom-product-detail', {
    template,

    inject: [
        'repositoryFactory'
    ],

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

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

    data() {
        return {
            customProductId: undefined,
            customProduct: {},
            isLoading: false,
            processSuccess: false,
            propertyOpt: [],
        };
    },

    created() {
        this.createdComponent();

    },

    computed: {
        propertyOptionCriteria() {
            const criteria = new Criteria();

            criteria.addAssociation('group');

            return criteria;
        },

        customRepository() {
            return this.repositoryFactory.create('custom_product');
        },

        propertyOptionRepository() {
            return this.repositoryFactory.create('property_group_option');
        },
    },

    methods: {
        getModule() {
            this.customRepository.get(this.$route.params.id, Shopware.Context.api).then((entity) => {
                this.customProduct = entity;
                this.isLoading = false;
            });
        },

        createdComponent() {
            this.isLoading = true;

            if (this.$route.params.id && this.customProduct.isLoading !== true) {
                this.customProductId = this.$route.params.id;
                this.loadPropertyOption();
            }

            this.isLoading = false;
        },

        loadPropertyOption() {
            return this.propertyOptionRepository.search(this.propertyOptionCriteria, Shopware.Context.api)
                .then((propertyOption) => {
                    this.propertyOpt = propertyOption;
                });
        },
    }
});