Hallo,
ich habe Schwierigkeiten damit ein Admin Modul anzulegen in Vue. Ich brauche prinzipiell nur ein Entity Listing, indem man das Entity ändern kann. Also zwei Views: Listing und Einzelansicht für Änderungen.
Es geht um die Zuordnung von Storefront Kunden zu eigens definierten Gruppen. Man soll den Kunden öffnen können in der Einzelansicht und die Gruppenzuordnung ändern können.
Nachfolgenden Code habe ich bisher schon. Das Modul wird bereits im Baum im Admin angezeigt. Doch sobald man auf das Modul klickt, erscheint eine weiße Seite:
Die main.js:
import './module/ws-calendar';
Die index.js:
import deDE from './snippet/de-DE';
import enGB from './snippet/en-GB';
Shopware.Module.register('ws-calendar', {
color: '#ff3d58',
icon: 'default-shopping-paper-bag-product',
title: 'Kalendar',
description: 'Verwalte die Kalender Berechtigungen hier',
snippets: {
'de-DE': deDE,
'en-GB': enGB
},
routes: {
list: {
component: 'ws-calender-user-list',
path: 'list'
},
detail: {
component: 'ws-calendar-detail',
path: '/detail/:id',
meta: {
parentPath: 'ws.calendar.list'
}
}
},
navigation: [{
label: 'ws-calendar.general.mainMenuItemGeneral',
color: '#ff3d58',
path: 'ws.calender.list',
icon: 'default-shopping-paper-bag-product',
position: 100
}]
});
Das Listing (ws-calendar-index; index.js):
const { Component, Mixin } = Shopware;
const { Criteria } = Shopware.Data;
const utils = Shopware.Utils;
import template from './ws-calendar-index.twig';
import './ws-calendar-index.scss';
Component.register('ws-calendar-index', {
template,
inject: ['repositoryFactory'],
mixins: [
Mixin.getByName('listing'),
],
metaInfo() {
return {
title: this.$createTitle()
};
},
data() {
return {
page: 1,
limit: 25,
total: 0,
repository: null,
items: null,
isLoading: true,
filter: {
customerId: null
}
}
},
computed: {
columns() {
return [
{
property: 'firstName',
dataIndex: 'firstName',
label: 'ws-calendar.list.columns.firstName',
allowResize: true,
},
{
property: 'lastName',
dataIndex: 'lastName',
label: 'ws-calendar.list.columns.lastName',
allowResize: true,
primary: true
},
{
property: 'email',
dataIndex: 'email',
label: 'ws-calendar.list.columns.email',
allowResize: true,
routerLink: 'ws.calendar.detail'
},
{
property: 'groupName',
dataIndex: 'groupName',
label: 'ws-calendar.list.columns.groupName',
allowResize: true
}
]
},
wsCalendarRepository() {
return this.repositoryFactory.create('ws_calendar_user_group');
}
},
methods: {
getList() {
this.isLoading = true;
let criteria = new Criteria();
criteria.addAssociation('customer');
criteria.addAssociation('ws_calendar_groups');
if (this.filter.customerId) {
criteria.addFilter(Criteria.equals('customerId', this.filter.customerId));
}
return this.wsCalendarRepository.search(criteria, Shopware.Context.api)
.then((searchResult) => {
this.items = searchResult;
this.total = searchResult.total;
this.isLoading = false;
});
},
resetFilter() {
this.filter = {
customerId: null
};
this.getList();
}
},
watch: {
filter: {
deep: true,
handler: utils.debounce(function () {
this.getList();
}, 400)
}
}
});
Das index template:
{{ $tc('ws-calendar.title') }}
{{ element }}
{{ $tc('ws-calendar.list.columns.action') }}
Die detail index.js:
const { Component, Mixin } = Shopware;
const { Criteria } = Shopware.Data;
import template from './ws-calendar-detail.twig';
import './ws-calendar-detail.scss';
Component.register('ws-calendar-detail', {
template,
inject: ['repositoryFactory'],
data() {
return {
customer: null,
isLoading: false,
isSuccessful: false,
calendarGroups: null,
}
},
created() {
this.syncService = Shopware.Service('syncService');
this.httpClient = this.syncService.httpClient;
this.repository = this.repositoryFactory.create('ws_calendar');
this.repository.get(this.$route.params.id, Shopware.Context.api).then(customer => {
this.customer = customer;
});
this.calendarGroupsRepo = this.repositoryFactory.create('ws_calendar_groups');
this.calendarGroupsRepo.get(null, Shopware.Context.api).then(calendarGroups => {
this.calendarGroups = calendarGroups;
});
},
methods: {
openCustomer() {
this.$router.push({
name: 'sw.customer.detail',
params: { id: this.customer.customerId }
});
},
getCustomer() {
this.repository
.get(this.$route.params.id, Shopware.Context.api)
.then(entity => {
this.customer = entity;
});
},
onSaveClicked() {
this.isLoading = true;
this.repository
.save(this.customer, Shopware.Context.api)
.then(() => {
this.getCustomer();
this.isLoading = false;
this.processSuccess = true
}).catch((exception) => {
this.isLoading = false;
this.createNotificationError({
title: this.$tc('ws-calendar.detail.error.errorTitle'),
message: exception
});
});
},
saveFinish() {
this.processSuccess = false;
}
}
});
Das Detail template:
{{ customer.firstName }} {{ customer.lastName }}
{{ $tc('ws-calendar.detail.toolbar.customer') }}
{{ $tc('ws-calendar.detail.toolbar.saveButtonText') }}
Die SCSS Dateien sind vorhanden, sind aber aktuell leer.
Über Hilfe, was daran nicht geht, wäre ich verbunden 
MFG
derwunner