Shopware 6: How to get all properties in custom module - vue.js

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;
});
},
}
});