DEV Community

vuejstest
vuejstest

Posted on

how to create definition step by step

eventcrud
src/Core/Content
Event
    Aggregate
EventTranslationDefinition

<?php declare(strict_types=1);

namespace EventTask\Core\Content\Event\Aggregate;


use EventTask\Core\Content\Event\EventDefinition;
use Shopware\Core\Framework\DataAbstractionLayer\EntityTranslationDefinition;
use Shopware\Core\Framework\DataAbstractionLayer\Field\Flag\Required;
use Shopware\Core\Framework\DataAbstractionLayer\Field\LongTextField;
use Shopware\Core\Framework\DataAbstractionLayer\Field\StringField;
use Shopware\Core\Framework\DataAbstractionLayer\FieldCollection;

class EventTranslationDefinition extends EntityTranslationDefinition
{
    const ENTITY_NAME = 'event_translation';

    public function getEntityName(): string
    {
        return self::ENTITY_NAME;
    }
    public function getEntityClass(): string{
        return EventTranslationEntity::class;
    }
    public function getCollectionClass(): string
    {
        return EventTranslationCollection::class;
    }
    protected function getParentDefinitionClass(): string
    {
        return EventDefinition::class;
    }

    protected function defineFields(): FieldCollection
    {
        return new FieldCollection([
            (new StringField('name', 'name'))->addFlags(new Required()),
            (new LongTextField('description', 'description'))->addFlags(new Required()),
        ]);
    }
}

    EventDefinition

<?php declare(strict_types=1);

namespace EventTask\Core\Content\Event;

use EventTask\Core\Content\Event\Aggregate\EventTranslationDefinition;
use EventTask\Core\Content\EventCategory\EventCategoryDefinition;
use EventTask\Core\Content\EventCategoryMapping\EventCategoryMappingDefinition;

//use EventTask\Core\Content\EventCustomerMapping\EventCustomerMappingDefinition;
use Shopware\Core\Checkout\Customer\CustomerDefinition;
use Shopware\Core\Content\Category\CategoryDefinition;
use Shopware\Core\Framework\DataAbstractionLayer\EntityDefinition;
use Shopware\Core\Framework\DataAbstractionLayer\Field\BoolField;
use Shopware\Core\Framework\DataAbstractionLayer\Field\DateField;
use Shopware\Core\Framework\DataAbstractionLayer\Field\FkField;
use Shopware\Core\Framework\DataAbstractionLayer\Field\Flag\PrimaryKey;
use Shopware\Core\Framework\DataAbstractionLayer\Field\Flag\Required;
use Shopware\Core\Framework\DataAbstractionLayer\Field\IdField;
use Shopware\Core\Framework\DataAbstractionLayer\Field\ManyToManyAssociationField;
use Shopware\Core\Framework\DataAbstractionLayer\Field\ManyToOneAssociationField;
use Shopware\Core\Framework\DataAbstractionLayer\Field\ReferenceVersionField;
use Shopware\Core\Framework\DataAbstractionLayer\Field\TranslatedField;
use Shopware\Core\Framework\DataAbstractionLayer\Field\TranslationsAssociationField;
use Shopware\Core\Framework\DataAbstractionLayer\FieldCollection;

class EventDefinition extends EntityDefinition
{

    public const ENTITY_NAME = 'event';

    public function getEntityName(): string
    {
        return self::ENTITY_NAME;
    }

    public function getCollectionClass(): string
    {
        return EventCollection::class;
    }

    public function getEntityClass(): string
    {
        return EventEntity::class;
    }

    protected function defineFields(): FieldCollection
    {
        return new FieldCollection([
            (new IdField('id', 'id'))->addFlags(new PrimaryKey(), new Required()),
            new TranslatedField('name'),
            new TranslatedField('description'),
            (new BoolField('active', 'active'))->addFlags(new Required()),
            (new DateField('event_date', 'eventDate'))->addFlags(new Required()),
            new FkField('organized_by_id', 'organizedById', CustomerDefinition::class),
            new ManyToOneAssociationField('organizedBy', 'organized_by_id', CustomerDefinition::class, 'id', false),

            new ManyToManyAssociationField(
                'eventCategories',
                EventCategoryDefinition::class,
                EventCategoryMappingDefinition::class,
                'event_id',
                'event_category_id'
            ),
            (new TranslationsAssociationField(EventTranslationDefinition::class, 'event_id'))->addFlags(new Required()),
        ]);
    }
}

EventCategory
Aggregate
EventCategoryTranslationDefitiion

<?php declare(strict_types=1);

namespace EventTask\Core\Content\EventCategory\Aggregate;

use EventTask\Core\Content\EventCategory\EventCategoryDefinition;
use Shopware\Core\Framework\DataAbstractionLayer\EntityTranslationDefinition;
use Shopware\Core\Framework\DataAbstractionLayer\Field\Flag\Required;
use Shopware\Core\Framework\DataAbstractionLayer\Field\StringField;
use Shopware\Core\Framework\DataAbstractionLayer\FieldCollection;

class EventCategoryTranslationDefinition extends EntityTranslationDefinition
{
    const ENTITY_NAME = 'event_category_translation';

    public function getEntityName(): string
    {
        return self::ENTITY_NAME;
    }
    public function getEntityClass(): string{
        return EventCategoryTranslationEntity::class;
    }
    public function getCollectionClass(): string
    {
        return EventCategoryTranslationCollection::class;
    }
    protected function getParentDefinitionClass(): string
    {
        return EventCategoryDefinition::class;
    }

    protected function defineFields(): FieldCollection
    {
        return new FieldCollection([
            (new StringField('name', 'name'))->addFlags(new Required()),
        ]);
    }
}

EventCategoryDefinition

<?php declare(strict_types=1);

namespace EventTask\Core\Content\EventCategory;

use EventTask\Core\Content\Event\EventDefinition;
use EventTask\Core\Content\EventCategory\Aggregate\EventCategoryTranslationDefinition;
use EventTask\Core\Content\EventCategoryMapping\EventCategoryMappingDefinition;
use Shopware\Core\Framework\DataAbstractionLayer\EntityDefinition;
use Shopware\Core\Framework\DataAbstractionLayer\Field\Flag\PrimaryKey;
use Shopware\Core\Framework\DataAbstractionLayer\Field\Flag\Required;
use Shopware\Core\Framework\DataAbstractionLayer\Field\IdField;
use Shopware\Core\Framework\DataAbstractionLayer\Field\ManyToManyAssociationField;
use Shopware\Core\Framework\DataAbstractionLayer\Field\TranslatedField;
use Shopware\Core\Framework\DataAbstractionLayer\Field\TranslationsAssociationField;
use Shopware\Core\Framework\DataAbstractionLayer\FieldCollection;

class EventCategoryDefinition extends EntityDefinition
{
    public const ENTITY_NAME = 'event_category';

    public function getEntityName(): string
    {
        return self::ENTITY_NAME;
    }
    public function getEntityClass(): string{
        return EventCategoryEntity::class;
    }
    public function getCollectionClass(): string
    {
        return EventCategoryCollection::class;
    }
    protected function defineFields(): FieldCollection
    {
        return new FieldCollection([
            (new IdField('id', 'id'))->addFlags(new PrimaryKey(), new Required()),
            new TranslatedField('name'),

            new ManyToManyAssociationField(
                'events',
                EventDefinition::class,
                EventCategoryMappingDefinition::class,
                'event_category_id',
                'event_id'
            ),
            (new TranslationsAssociationField(EventCategoryTranslationDefinition::class, 'event_category_id'))->addFlags(new Required()),
        ]);
    }
}

EventCategoryMapping

<?php declare(strict_types=1);

namespace EventTask\Core\Content\EventCategoryMapping;


use EventTask\Core\Content\Event\EventDefinition;
use EventTask\Core\Content\EventCategory\EventCategoryDefinition;
use Shopware\Core\Content\Category\CategoryDefinition;
use Shopware\Core\Framework\DataAbstractionLayer\Field\FkField;
use Shopware\Core\Framework\DataAbstractionLayer\Field\Flag\PrimaryKey;
use Shopware\Core\Framework\DataAbstractionLayer\Field\Flag\Required;
use Shopware\Core\Framework\DataAbstractionLayer\Field\ManyToOneAssociationField;
use Shopware\Core\Framework\DataAbstractionLayer\Field\ReferenceVersionField;
use Shopware\Core\Framework\DataAbstractionLayer\FieldCollection;
use Shopware\Core\Framework\DataAbstractionLayer\MappingEntityDefinition;

class EventCategoryMappingDefinition extends MappingEntityDefinition
{
    public const ENTITY_NAME = 'event_category_event';

    public function getEntityName(): string
    {
        return self::ENTITY_NAME;
    }
    protected function defineFields(): FieldCollection
    {

        return new FieldCollection([
            (new FkField('event_category_id', 'eventCategoryId', EventCategoryDefinition::class))->addFlags(new PrimaryKey(), new Required()),
            (new FkField('event_id', 'eventId', EventDefinition::class))->addFlags(new PrimaryKey(), new Required()),
            (new ReferenceVersionField(EventCategoryDefinition::class))->addFlags(new PrimaryKey(), new Required()),
            (new ReferenceVersionField(EventDefinition::class))->addFlags(new PrimaryKey(), new Required()),
            new ManyToOneAssociationField('event', 'event_id', EventDefinition::class, 'id'),
            new ManyToOneAssociationField('eventCategory', 'event_category_id', EventCategoryDefinition::class, 'id'),
        ]);

    }
}

Extension
CategoryExtension
<?php declare(strict_types=1);

namespace EventTask\Core\Content\Extension;
use Shopware\Core\Framework\DataAbstractionLayer\FieldCollection;

use EventTask\Core\Content\Event\EventDefinition;
use EventTask\Core\Content\EventCategoryMapping\EventCategoryMappingDefinition;
use Shopware\Core\Content\Category\CategoryDefinition;
use Shopware\Core\Framework\DataAbstractionLayer\EntityExtension;
use Shopware\Core\Framework\DataAbstractionLayer\Field\ManyToManyAssociationField;

class CategoryExtension extends EntityExtension
{
    public function extendFields(FieldCollection $collection): void
    {
        $collection->add(
            new ManyToManyAssociationField(
                'events',
                EventDefinition::class,
                EventCategoryMappingDefinition::class,
                'event_category_id',
                'event_id'
            )
        );
    }

    public function getDefinitionClass(): string
    {
        return CategoryDefinition::class;
    }
}
CustomerExtension

<?php declare(strict_types=1);

namespace EventTask\Core\Content\Extension;

use EventTask\Core\Content\Event\EventDefinition;
use Shopware\Core\Checkout\Customer\CustomerDefinition;
use Shopware\Core\Framework\DataAbstractionLayer\EntityExtension;
use Shopware\Core\Framework\DataAbstractionLayer\Field\OneToManyAssociationField;
use Shopware\Core\Framework\DataAbstractionLayer\FieldCollection;

class CustomerExtension extends EntityExtension
{
    public function extendFields(FieldCollection $collection): void
    {
        $collection->add(
                        new OneToManyAssociationField(
                            'customerId',
                            EventDefinition::class,
                            'organized_by_id',
                        )
        );
    }

    public function getDefinitionClass(): string
    {
        return CustomerDefinition::class;
    }
}
LanguageExtension

<?php declare(strict_types=1);

namespace EventTask\Core\Content\Extension;


use EventTask\Core\Content\Event\Aggregate\EventTranslationDefinition;
use EventTask\Core\Content\EventCategory\Aggregate\EventCategoryTranslationDefinition;
use Shopware\Core\Framework\DataAbstractionLayer\EntityExtension;
use Shopware\Core\Framework\DataAbstractionLayer\Field\OneToManyAssociationField;
use Shopware\Core\Framework\DataAbstractionLayer\FieldCollection;
use Shopware\Core\System\Language\LanguageDefinition;


class LanguageExtension extends EntityExtension
{
    public function extendFields(FieldCollection $collection): void
    {
        $collection->add(
            new OneToManyAssociationField(
                'eventTransId',
                EventTranslationDefinition::class,
                'event_id',
            )
        );
        $collection->add(
            new OneToManyAssociationField(
                'eventCategoryTransId',
                EventCategoryTranslationDefinition::class,
                'event_category_id'
            )
        );
    }

    public function getDefinitionClass(): string
    {
        return LanguageDefinition::class;
    }
}

Migration

Resources
app/admin/src
    module
        sw-event-category
            page
                sw-event-category-detail
                    index.js

import template from "./sw-event-category-detail.html.twig";

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

export default {
    template,
    compatConfig: Shopware.compatConfig,

    inject: ["repositoryFactory"],
    mixins: [
        Mixin.getByName("placeholder"),
        Mixin.getByName("notification"),
        Mixin.getByName("discard-detail-page-changes")("eventCategory"),
    ],

    data() {
        return {
            eventCategory: null,
            repository: null,
            isLoading: false,
            processSuccess: false,
        };
    },
    props: {
        eventCategoryId: {
            type: String,
            required: false,
            default: null,
        },
    },
    metaInfo() {
        return {
            title: this.$createTitle(),
        };
    },
    watch: {
        eventCategoryId() {
            this.createdComponent();
        },
    },
    created() {
        this.createdComponent();
    },
    methods: {
        createdComponent() {
            this.repository = this.repositoryFactory.create("event_category");
            if (this.eventCategoryId) {
                this.getCategory();
                return;
            }
            Shopware.State.commit("context/resetLanguageToDefault");
            this.eventCategory = this.repository.create();
        },
        abortOnLanguageChange() {
            return this.repository.hasChanges(this.eventCategory);
        },

        saveOnLanguageChange() {
            return this.onClickSave();
        },

        onChangeLanguage(languageId) {
            this.isLoading = true;
            Shopware.State.commit("context/setApiLanguageId", languageId);
            this.getCategory();
        },
        getCategory() {
            Shopware.ExtensionAPI.publishData({
                id: "sw-event-category-detail__event_category",
                path: "event-category",
                scope: this,
            });
            const criteria = new Criteria();
            criteria.addAssociation("translations");

            this.repository
                .get(this.eventCategoryId, Shopware.Context.api, criteria)
                .then((entity) => {
                    console.log("entity", entity);
                    this.eventCategory = entity;
                });
        },
        onClickSave() {

            this.isLoading = true;
            this.repository
                .save(this.eventCategory)
                .then(() => {
                    this.isLoading = false;
                    this.processSuccess = true;
                    this.createNotificationSuccess({
                        title: this.$tc("success"),
                        message: this.$tc("success", 0, {
                            name: this.eventCategory.name,
                        }),
                    });
                    if (this.eventCategoryId === null) {
                        this.$router.push({
                            name: "detail",
                            params: { id: this.eventCategory.id },
                        });
                        return;
                    }
                    this.getCategory();
                })
        },
        saveFinish() {
            this.processSuccess = false;
        },
    },
};

                    sw-event-category-detail.html.twig

{% block sw_event_category_detail %}
    <sw-page class="sw-event-detail">
        {% block sw_product_list_language_switch %}
            <template #language-switch>
                <sw-language-switch :disabled="eventCategoryId == null || undefined" :save-changes-function="saveOnLanguageChange" :abort-change-function="abortOnLanguageChange" @on-change="onChangeLanguage"/>
            </template>
        {% endblock %}
        <template #smart-bar-actions>
            <sw-button :router-link="{name: 'sw.event.category.index'}">
                {{$tc('cancel')}}
            </sw-button>
            <sw-button-process
                    :isLoading="isLoading"
                    :process-success="process"
                    variant="primary"
                    @process-finish="saveFinish"
                    @click="onClickSave"
            >
                {{ $tc('save') }}
            </sw-button-process>
        </template>
        <template #content>
            <sw-card-view>
                <sw-card v-if="eventCategory">
                    <sw-text-field
                            v-model:value="eventCategory.name"
                            :placeholder="$tc('sw-event-category.detail.placeholderName')"
                            :label="$tc('sw-event-category.detail.labelName')"
                            name="name"
                            validation="required"
                            required
                    >
                    </sw-text-field>
                </sw-card>
            </sw-card-view>
        </template>
    </sw-page>
{% endblock %}

                sw-event-category-list
                    index.js

import template from "./sw-event-category-list.html.twig";

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

export default {
    template,
    inject: ["repositoryFactory"],
    data() {
        return {
            eventCategory: null,
            repository: null,
            isLoading: false,
            total: 0,
        };
    },
    metaInfo() {
        return {
            title: this.$createTitle(),
        };
    },
    computed: {
        columns() {
            return this.getColumns();
        },
    },
    created() {
        this.createComponent();
    },
    methods: {
        createComponent() {
            this.repository = this.repositoryFactory.create("event_category");
            this.getList();
        },
        getList() {
            this.isLoading = true;
            return this.repository
                .search(new Criteria(), Shopware.Context.api)
                .then((result) => {
                    this.eventCategory = result;
                    this.total = result.total;
                    this.isLoading = false;
                })
                .catch(() => {
                    this.isLoading = false;
                });
        },

        onChangeLanguage(languageId) {
            Shopware.State.commit("context/setApiLanguageId", languageId);
            this.getList();
        },
        getColumns() {
            return [
                {
                    property: "name",
                    label: "sw-event-category.list.columnName",
                    routerLink: "sw.event.category.detail",
                    inlineEdit: "string",
                    allowResize: true,
                    primary: true,
                },
                {
                    property: 'createdAt',
                    label: 'createdAt',
                    allowResize: true
                },
                {
                    property: 'updatedAt',
                    label: 'updatedAt',
                    allowResize: true
                }
            ];
        },
    },
};

                    sw-event-category-list.html.twig

{% block sw_event_category_list %}
    <sw-page class="sw-event-list">
        {% block sw_event_category_list_search_bar %}
            <template #search-bar>
                <sw-search-bar initial-search-type="event" :initial-search="term" @search="onSearch"/>
            </template>
        {% endblock %}

        {% block sw_event_category_list_smart_bar_header %}
            <template #smart-bar-header>
                {% block sw_event_category_list_smart_bar_header_title %}
                    <h2>
                        {% block sw_event_category_list_smart_bar_header_title_text %}
                            {{ $tc('sw-event-category.general.mainMenuItemGeneral') }}
                        {% endblock %}

                        {% block sw_event_category_list_smart_bar_header_amount %}
                            <span v-if="!isLoading" class="sw-page__smart-bar-amount">
                                ({{ total }})
                            </span>
                        {% endblock %}
                    </h2>
                {% endblock %}
            </template>
        {% endblock %}

        {% block sw_event_category_list_smart_bar_actions %}
            <template #smart-bar-actions>
                <sw-button
                        variant="primary"
                        :router-link="{ name: 'sw.event.category.create' }"
                >
                    <p>
                        {{ $tc('sw-event-category.list.buttonAddEvent') }}
                    </p>
                </sw-button>
            </template>
        {% endblock %}
        {% block sw_event_list_language_switch %}
            <template #language-switch>
                <sw-language-switch @on-change="onChangeLanguage"/>
            </template>
        {% endblock %}
        <template #content>
            {% block sw_event_category_list_content %}
                <sw-entity-listing
                        :items="eventCategory"
                        :repository="repository"
                        :showselection="false"
                        :columns="columns"
                        :is-loading="isLoading"
                        :allow-edit="true"
                        :allow-inline-edit="true"
                        :allow-delete="true">
                </sw-entity-listing>
            {% endblock %}
        </template>
    </sw-page>
{% endblock %}


            snippet
de

{
  "sw-event-category": {
    "general": {
      "mainMenuItemList": "Veranstaltungskategorie",
      "mainMenuItemGeneral": "Veranstaltungskategorie",
      "somethingWentWrong": "etwas ist schief gelaufen",
      "cancel": "Stornieren",
      "save": "Speichern"
    },
    "list": {
      "buttonAddEvent": "Ereigniskategorie hinzufügen",
      "columnName": "Name",
      "columnLink": "Webseite"
    },
    "detail": {
      "labelName": "Name",
      "labelDescription": "Beschreibung",
      "labelLink": "Webseite",
      "placeholderName": "Geben Sie den Namen der Ereigniskategorie ein ...",
      "titleSaveSuccess": "Erfolg",
      "messageSaveSuccess": "Event-Kategorie „{name}“ wurde gespeichert.",
      "errorNameRequired" : "Name ist erforderlich"

    }
  }
}

en

{
  "sw-event-category": {
    "general": {
      "mainMenuItemList": "Event category",
      "mainMenuItemGeneral": "Event category",
      "somethingWentWrong": "something went wrong",
      "cancel": "Cancel",
      "save": "Save"
    },
    "list": {
      "buttonAddEvent": "Add Event category",
      "columnName": "Name",
      "columnLink": "Website"
    },
    "detail": {
      "labelName": "Name",
      "labelDescription": "Description",
      "labelLink": "Website",
      "placeholderName": "Enter Event category name...",
      "titleSaveSuccess": "Success",
      "messageSaveSuccess": "Event category \"{name}\" has been saved.",
      "errorNameRequired" : "Name is required"
    }
  }
}

            index.js

import deDE from "./snippet/de-DE.json";
import enGB from "./snippet/en-GB.json";
const { Module } = Shopware;
Shopware.Component.register("sw-event-category-list", () =>
    import("./page/sw-event-category-list")
);
Shopware.Component.register("sw-event-category-detail", () =>
    import("./page/sw-event-category-detail")
);
Module.register("sw-event-category", {
    type: "plugin",
    name: "Event Category",
    title: "Event Category",
    description: "Event Category",
    color: "#176aaf",
    snippets: {
        "de-DE": deDE,
        "en-GB": enGB,
    },
    routes: {
        index: {
            component: "sw-event-category-list",
            path: "index",
            name: "sw.event.category.index",
        },
        create: {
            component: "sw-event-category-detail",
            path: "create",
            name: "sw.event.category.detail",
            meta: {
                parentPath: "sw.event.category.index",
                privilege: "event-category.creator",
            },
        },
        detail: {
            component: "sw-event-category-detail",
            path: "detail/:id",
            name: "sw.event.category.detail",
            meta: {
                parentPath: "sw.event.category.index",
                privilege: "event-category.viewer",
            },
            props: {
                default(route) {
                    return {
                        eventCategoryId: route.params.id,
                    };
                },
            },
        },
    },
    navigation: [
        {
            path: "sw.event.category.index",
            label: "sw-event-category.general.mainMenuItemList",
            id: "sw-event-category",
            parent: "sw-catalogue",
            color: "#176aaf",
            position: 100,
        },
    ],
});

        sw-event
page
    sw-event-detail
    index.js

import template from "./sw-event-detail.html.twig";

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

export default {
    template,
    inject: ["repositoryFactory"],
    mixins: [
        Mixin.getByName("placeholder"),
        Mixin.getByName("notification"),
        Mixin.getByName("discard-detail-page-changes")("eventCategory"),
    ],

    data() {
        return {
            event: null,
            eventCategory: null,
            customer: null,
            eventRepository: null,
            eventCategoryRepository: null,
            customerRepository: null,
            isLoading: false,
            processSuccess: false,
            eventCategoryOptions: null,
        };
    },
    props: {
        eventId: {
            type: String,
            required: false,
            default: null,
        },
    },
    computed: {
        customerCriteria() {
            const criteria = new Criteria();
            return criteria;
        },
        customerId: {
            get() {
                return this.customer ? this.customer.id : '';
            },

            set(customerId) {
                if (this.customer) this.customer.id = customerId;
            },
        },

    },
    watch: {
        eventId() {
            this.createdComponent();
        },
    },
    metaInfo() {
        return {
            title: this.$createTitle(),
        };
    },
    created() {
        this.createdComponent();
    },
    methods: {
        createdComponent() {
            this.eventRepository = this.repositoryFactory.create("event");
            this.eventCategoryRepository =
                this.repositoryFactory.create("event_category");
            this.customerRepository = this.repositoryFactory.create("customer");
            this.getEventCategory();
            this.getCustomer();

            if (this.eventId) {
                this.getEvent();
                return;
            }
            Shopware.State.commit("context/resetLanguageToDefault");
            this.event = this.eventRepository.create();
        },

        getEvent() {
            const criteria = new Criteria();
            criteria.addAssociation("eventCategories");
            criteria.addAssociation("organizedBy");

            this.eventRepository
                .get(this.$route.params.id, Shopware.Context.api, criteria)
                .then((entity) => {
                    this.event = entity;
                });
        },
        getEventCategory() {
            this.eventCategoryRepository
                .search(new Criteria(), Shopware.Context.api)
                .then((result) => {
                    this.eventCategoryOptions = result;
                });
        },

        getCustomer() {
            this.customerRepository
                .search(new Criteria(), Shopware.Context.api)
                .then((result) => {
                    this.customer = result;
                    // console.log(result);

                });
        },
        abortOnLanguageChange() {
            return this.eventRepository.hasChanges(this.event);
        },

        saveOnLanguageChange() {
            return this.onClickSave();
        },

        onChangeLanguage(languageId) {
            this.isLoading = true;
            Shopware.State.commit("context/setApiLanguageId", languageId);
            this.getEvent();
            this.getEventCategory();
            this.getCustomer();
        },
        onClickSave() {
            this.isLoading = true;
            this.eventRepository
                .save(this.event)
                .then(() => {
                    this.isLoading = false;
                    this.processSuccess = true;
                    this.createNotificationSuccess({
                        title: this.$tc("success"),
                        message: this.$tc("success", 0, {
                            name: this.event.name,
                        }),
                    });
                    if (this.eventId === null) {
                        this.$router.push({
                            name: "sw.event.detail",
                            params: {id: this.event.id},
                        });
                        return;
                    }
                    this.getEvent();
                })
                .catch((exception) => {
                    this.isLoading = false;
                    this.createNotificationError({
                        title: "exception",
                        message: exception,
                    });
                });
        },
        saveFinish() {
            this.processSuccess = false;
        },
    },
};

sw-event-detail.html.twig

{% block sw_event_detail %}
    <sw-page class="sw-event-detail">
        {% block sw_product_list_language_switch %}
            <template #language-switch>
                <sw-language-switch
                        :disabled="eventId == null || undefined"
                        :save-changes-function="saveOnLanguageChange"
                        :abort-change-function="abortOnLanguageChange"
                        @on-change="onChangeLanguage"
                />
            </template>
        {% endblock %}
        <template #smart-bar-actions>
            <sw-button :router-link="{name: 'sw.event.index'}">
                {{$tc('cancel')}}
            </sw-button>
            <sw-button-process
                    :isloading="isLoading"
                    :processsuccess="processSuccess"
                    variant="primary"
                    @process-finish="saveFinish"
                    @click="onClickSave">
                {{$tc('save')}}
            </sw-button-process>
        </template>
        <template #content>
            <sw-card-view>
                <sw-card v-if="event">
                    <sw-text-field
                            v-model:value="event.name"
                            :placeholder="$tc('Name')"
                            :label="$tc('Name')"
                            name="name"
                            validation="required"
                            required
                    />
                    <sw-textarea-field
                            v-model:value="event.description"
                            :placeholder="$tc('description')"
                            :label="$tc('Description')"
                            name="name"
                            validation="required"
                    >
                    </sw-textarea-field>
                    <sw-datepicker
                            v-model:value="event.eventDate"
                            :label="$tc('Event date')"
                            name="event_date"
                    >
                    </sw-datepicker>

                    <sw-switch-field
                            :label="$tc('Status')"
                            v-model:value="event.active"
                            name="active"
                    />
                    <sw-entity-multi-select
                            :label="$tc('Category')"
                            :placeholder="$tc('Category')"
                            entity-name="event_category"
                            v-model:entityCollection="event.eventCategories"
                    >
                    </sw-entity-multi-select>

                    <sw-entity-single-select
                            entity="customer"
                            :criteria="customerCriteria"
                            label-property="firstName"
                            :value="event.organizedById"
                            :label="$tc('Organized By')"
                            :placeholder="$tc('Organized By')"
                            show-clearable-button
                            @update:value="event.organizedById=$event"
                    />
                </sw-card>
            </sw-card-view>
        </template>
    </sw-page>
{% endblock %}

    sw-event-list
index.js

import template from "./sw-event-list.html.twig";

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

export default {
    template,
    inject: ["repositoryFactory"],
    data() {
        return {
            event: null,
            repository: null,
            isLoading: false,
            total: 0,
        };
    },
    metaInfo() {
        return {
            title: this.$createTitle(),
        };
    },
    computed: {
        columns() {
            return this.getColumns();
        },
    },
    created() {
        this.createComponent();
    },
    methods: {
        createComponent() {
            this.isLoading = true;
            this.repository = this.repositoryFactory.create("event");
            this.getList();
        },
        getList() {
            this.isLoading = true;
            return this.repository
                .search(new Criteria(), Shopware.Context.api)
                .then((result) => {
                    this.event = result;
                    this.total = result.total;
                    this.isLoading = false;
                })
                .catch(() => {
                    this.isLoading = false;
                });
        },
        onChangeLanguage(languageId) {
            this.isLoading = true;
            Shopware.State.commit('context/setApiLanguageId', languageId);
            this.getList();
        },
        getColumns() {
            return [
                {
                    property: "name",
                    label: this.$tc("Name"),
                    routerLink: "sw.event.detail",
                    inlineEdit: "string",
                    allowResize: true,
                    primary: true,
                },
                {
                    property: "description",
                    label: this.$tc("Description"),
                    inlineEdit: "string",
                    allowResize: true,
                    primary: false,
                },
                {
                    property: "active",
                    label: this.$tc("Active"),
                    inlineEdit: "boolean",
                    allowResize: true,
                    primary: false,
                    align: "center",
                    dataIndex: "active",
                    format: (value) => {
                        return value ? "Active" : "Inactive";
                    },
                    cellComponent: "sw-boolean-badge",
                },
                { property: 'eventDate', label: 'event.fields.eventDate', allowResize: true },
            ];
        },
    },
};

sw-event-list.html.twig

{% block sw_event_list %}
    <sw-page class="sw-event-list">

        {% block sw_event_list_search_bar %}
            <template #search-bar>
                <sw-search-bar initial-search-type="event" :initial-search="term" @search="onSearch"/>
            </template>
        {% endblock %}

        {% block sw_event_list_smart_bar_header %}
            <template #smart-bar-header>
                {% block sw_event_list_smart_bar_header_title %}
                    <h2>
                        {% block sw_event_list_smart_bar_header_title_text %}
                            {{ $tc('title') }}
                        {% endblock %}

                        {% block sw_event_list_smart_bar_header_amount %}
                            <span v-if="!isLoading" class="sw-page__smart-bar-amount">
                                ({{ total }})
                            </span>
                        {% endblock %}
                    </h2>
                {% endblock %}
            </template>
        {% endblock %}
        {% block sw_event_list_smart_bar_actions %}
            <template #smart-bar-actions>
                <sw-button variant="primary" :router-link="{ name: 'sw.event.create' }">
                    <p>
                        {{$tc('Create new Event')}}
                    </p>
                </sw-button>
            </template>
        {% endblock %}
        {% block sw_event_list_language_switch %}
            <template #language-switch>
                <sw-language-switch @on-change="onChangeLanguage"/>
            </template>
        {% endblock %}
        <template #content>
            {% block sw_event_list_content %}
                <sw-entity-listing
                        :items="event"
                        :repository="repository"
                        :showselection="false"
                        :columns="columns"
                        :is-loading="isLoading"
                        :allow-edit="true"
                        :allow-inline-edit="true"
                        :allow-delete="true">
                </sw-entity-listing>
            {% endblock %}
        </template>
    </sw-page>
{% endblock %}

snippet
de
{
  "event": {
    "module": {
      "name": "Event",
      "description": "Event verwalten",
      "label": "Event"
    },
    "general": {
      "mainMenuItemGeneral": "Event",
      "descriptionTextModule": "Allgemein",
      "createButton": "Neuen Event erstellen",
      "cancelButton": "Abbrechen",
      "saveButton": "Speichern Sie",
      "createTitle": "Event erstellen",
      "editTitle": "Event bearbeiten"
    },
    "fields": {
      "name": "Name",
      "description": "Beschreibung",
      "active": "Aktiv",
      "eventDate": "Ereignisdatum",
      "categories": "Event-Kategorien",
      "organizedBy": "organisiert von"
    },
    "list": {
      "title": "Events"
    }
  }
}
en

{
  "event": {
    "module": {
      "name": "Event",
      "description": "Manage event",
      "label": "Event"
    },
    "general": {
      "mainMenuItemGeneral": "Event",
      "descriptionTextModule": "Generally",
      "createButton": "Create new event",
      "cancelButton": "Cancel",
      "saveButton": "Save",
      "createTitle": "Create event",
      "editTitle": "Edit event"
    },
    "fields": {
      "name": "Name",
      "description": "Description",
      "active": "Active",
      "eventDate": "Event date",
      "categories": "Event categories",
      "organizedBy": "organized by"
    },
    "list": {
      "title": "Events"
    }
  }
}

index.js
import deDE from "./snippet/de-DE.json";
import enGB from "./snippet/en-GB.json";
const { Module } = Shopware;
Shopware.Component.register("sw-event-list", () =>
    import("./page/sw-event-list")
);
Shopware.Component.register("sw-event-detail", () =>
    import("./page/sw-event-detail")
);
Module.register("sw-event", {
    title: "Event",
    name: "Event",
    description: "Event",
    color: "#176aaf",
    snippets: {
        "de-DE": deDE,
        "en-GB": enGB,
    },
    routes: {
        index: {
            component: "sw-event-list",
            path: "index",
            name: "sw.event.index",
        },
        create: {
            component: 'sw-event-detail',
            path: 'create',
            name: "sw.event.detail",

            meta: {
                parentPath: 'sw.event.index',
                privilege: 'event.creator',
            },
        },
        detail: {
            component: 'sw-event-detail',
            path: 'detail/:id',
            name: "sw.event.detail",
            meta: {
                parentPath: 'sw.event.index',
                privilege: 'event.viewer',
            },
            props: {
                default(route) {
                    return {
                        eventId: route.params.id,
                    };
                },
            },
        },
    },
    navigation: [
        {
            path: "sw.event.index",
            label: "Event",
            id: "sw-event",
            parent: "sw-catalogue",
            color: "#176aaf",
            position: 100,
        },
    ],
});
    main.js

import './module/sw-event';
import './module/sw-event-category';

config
services.xml

<?xml version="1.0" ?>

<container xmlns="http://symfony.com/schema/dic/services"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">

    <services>
        <service id="EventTask\Core\Content\Event\EventDefinition">
            <tag name="shopware.entity.definition" entity="event" />
        </service>
        <service id="EventTask\Core\Content\EventCategory\EventCategoryDefinition">
            <tag name="shopware.entity.definition" entity="event_category" />
        </service>
        <service id="EventTask\Core\Content\EventCategoryMapping\EventCategoryMappingDefinition">
            <tag name="shopware.entity.definition" entity="event_category_event" />
        </service>
        <service id="EventTask\Core\Content\Extension\CategoryExtension">
            <tag name="shopware.entity.extension" />
        </service>
        <service id="EventTask\Core\Content\Extension\CustomerExtension">
            <tag name="shopware.entity.extension" />
        </service>
        <service id="EventTask\Core\Content\Extension\LanguageExtension">
            <tag name="shopware.entity.extension" />
        </service>
        <service id="EventTask\Core\Content\Event\Aggregate\EventTranslationDefinition">
            <tag name="shopware.entity.definition" entity="event_translation" />
        </service>
        <service id="EventTask\Core\Content\EventCategory\Aggregate\EventCategoryTranslationDefinition">
            <tag name="shopware.entity.definition" entity="event_category_translation" />
        </service>
    </services>
</container>

public-by default

Enter fullscreen mode Exit fullscreen mode

Top comments (0)