<script setup> import InlineCRUDList from "aleksis.core/components/generic/InlineCRUDList.vue"; import ColorField from "aleksis.core/components/generic/forms/ColorField.vue"; import ForeignKeyField from "aleksis.core/components/generic/forms/ForeignKeyField.vue"; import CreateButton from "aleksis.core/components/generic/buttons/CreateButton.vue"; // eslint-disable-next-line no-unused-vars import CreateSubject from "./CreateSubject.vue"; import SubjectChip from "./SubjectChip.vue"; </script> <template> <inline-c-r-u-d-list :headers="headers" :i18n-key="i18nKey" create-item-i18n-key="cursus.subject.create" :gql-query="gqlQuery" :gql-create-mutation="gqlCreateMutation" :gql-patch-mutation="gqlPatchMutation" :gql-delete-mutation="gqlDeleteMutation" :default-item="defaultItem" :get-create-data="transformCreateData" :get-patch-data="transformPatchData" filter > <template #createComponent="{ attrs, on, createMode }"> <create-button color="secondary" @click="on.input(true)" :disabled="createMode" /> <create-subject v-bind="attrs" v-on="on" :gql-query="gqlQuery" /> </template> <!-- eslint-disable-next-line vue/valid-v-slot --> <template #name.field="{ attrs, on }"> <div aria-required="true"> <v-text-field v-bind="attrs" v-on="on" :rules="rules.name" /> </div> </template> <!-- eslint-disable-next-line vue/valid-v-slot --> <template #shortName.field="{ attrs, on }"> <div aria-required="true"> <v-text-field v-bind="attrs" v-on="on" :rules="rules.shortName" /> </div> </template> <template #parent="{ item }"> <subject-chip v-if="item.parent" :subject="item.parent" /> </template> <!-- eslint-disable-next-line vue/valid-v-slot --> <template #parent.field="{ attrs, on }"> <foreign-key-field v-bind="attrs" v-on="on" :fields="headers" :default-item="defaultItem" :gql-query="gqlQuery" :gql-patch-mutation="gqlPatchMutation" :gql-create-mutation="gqlCreateMutation" :get-create-data="transformCreateData" create-item-i18n-key="cursus.subject.create" return-object > <template #createComponent="{ attrs: attrs2, on: on2 }"> <create-subject v-bind="{ ...$props, ...attrs2 }" v-on="{ ...$listeners, ...on2 }" ></create-subject> </template> </foreign-key-field> </template> <template #name="{ item }"> <v-chip :color="item.colourBg" :style="{ color: item.colourFg }">{{ item.name }}</v-chip> </template> <template #colourFg="{ item }"> <v-chip :color="item.colourFg" outlined>{{ item.colourFg }}</v-chip> </template> <!-- eslint-disable-next-line vue/valid-v-slot --> <template #colourFg.field="{ attrs, on }"> <color-field v-bind="attrs" v-on="on" /> </template> <template #colourBg="{ item }"> <v-chip :color="item.colourBg" outlined>{{ item.colourBg }}</v-chip> </template> <!-- eslint-disable-next-line vue/valid-v-slot --> <template #colourBg.field="{ attrs, on }"> <color-field v-bind="attrs" v-on="on" /> </template> <template #teachers="{ item }"> <v-chip v-for="teacher in item.teachers" :key="teacher.id">{{ teacher.fullName }}</v-chip > </template> <!-- eslint-disable-next-line vue/valid-v-slot --> <template #teachers.field="{ attrs, on }"> <v-autocomplete multiple :items="persons" item-text="fullName" item-value="id" v-bind="attrs" v-on="on" chips deletable-chips return-object > <template #item="data"> <v-list-item-action> <v-checkbox v-model="data.attrs.inputValue" /> </v-list-item-action> <v-list-item-content> <v-list-item-title>{{ data.item.fullName }}</v-list-item-title> <v-list-item-subtitle v-if="data.item.shortName">{{ data.item.shortName }}</v-list-item-subtitle> </v-list-item-content> </template> </v-autocomplete> </template> <template #filters="{ attrs, on }"> <v-checkbox v-bind="attrs('parent__isnull')" v-on="on('parent__isnull')" :label="$t('cursus.subject.has_parent')" :false-value="null" :true-value="false" ></v-checkbox> </template> </inline-c-r-u-d-list> </template> <script> import { subjects, createSubjects, deleteSubjects, updateSubjects, } from "./subject.graphql"; import { gqlPersons } from "./helper.graphql"; export default { name: "Subject", data() { return { headers: [ { text: this.$t("cursus.subject.fields.name"), value: "name", }, { text: this.$t("cursus.subject.fields.short_name"), value: "shortName", }, { text: this.$t("cursus.subject.fields.parent"), value: "parent", }, { text: this.$t("cursus.subject.fields.colour_fg"), value: "colourFg", }, { text: this.$t("cursus.subject.fields.colour_bg"), value: "colourBg", }, { text: this.$t("cursus.subject.fields.teachers"), value: "teachers", }, ], i18nKey: "cursus.subject", gqlQuery: subjects, gqlCreateMutation: createSubjects, gqlPatchMutation: updateSubjects, gqlDeleteMutation: deleteSubjects, defaultItem: { name: "", shortName: "", parent: null, colourFg: "", colourBg: "", teachers: [], }, rules: { name: [ (name) => (name && name.length > 0) || this.$t("cursus.errors.name_required"), ], shortName: [ (name) => (name && name.length > 0) || this.$t("cursus.errors.short_name_required"), ], }, }; }, methods: { transformPatchData(item) { let dto = { id: item.id }; this.headers.map((header) => { if (header.value === "parent") { dto["parent"] = item.parent?.id; } else if (header.value === "teachers") { dto["teachers"] = item.teachers?.map((teacher) => teacher.id); } else { dto[header.value] = item[header.value]; } }); return dto; }, transformCreateData(item) { return { ...item, parent: item.parent?.id, teachers: item.teachers.map((teacher) => teacher.id), }; }, }, apollo: { persons: gqlPersons, }, }; </script> <style scoped></style>