chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue

<template>
    <div class="vue-component">
        <h2><a id="section-70" />{{ $t("scopes.title") }}</h2>

        <div class="mb-4">
            <div class="form-check" v-for="s in scopes" :key="s.id">
                <input
                    class="form-check-input"
                    type="checkbox"
                    v-model="checkedScopes"
                    :value="s"
                />
                <label class="form-check-label">
                    {{ localizeString(s.name) }}
                </label>
            </div>
        </div>

        <div v-if="!isScopeValid" class="alert alert-warning to-confirm">
            {{ $t("scopes.add_at_least_one") }}
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

export default {
    name: "Scopes",
    computed: {
        ...mapState(["scopes", "scopesAtStart"]),
        ...mapGetters(["isScopeValid"]),
        checkedScopes: {
            get: function () {
                return this.$store.state.accompanyingCourse.scopes;
            },
            set: function (v) {
                this.$store
                    .dispatch("setScopes", v)
                    .catch(({ name, violations }) => {
                        if (
                            name === "ValidationException" ||
                            name === "AccessException"
                        ) {
                            violations.forEach((violation) =>
                                this.$toast.open({ message: violation }),
                            );
                        } else {
                            this.$toast.open({ message: "An error occurred" });
                        }
                    });
            },
        },
    },
    methods: {
        localizeString,
        restore() {
            console.log("restore");
        },
    },
};
</script>

<style scoped></style>