From 27364e2b96812975ec34715432568419e1618968 Mon Sep 17 00:00:00 2001
From: Hangzhi Yu <hangzhi@protonmail.com>
Date: Fri, 12 Jul 2024 00:36:51 +0200
Subject: [PATCH] Add chip-like subject select field
---
.../components/SubjectChipSelectField.vue | 45 +++++++++++++++++++
1 file changed, 45 insertions(+)
create mode 100644 aleksis/apps/cursus/frontend/components/SubjectChipSelectField.vue
diff --git a/aleksis/apps/cursus/frontend/components/SubjectChipSelectField.vue b/aleksis/apps/cursus/frontend/components/SubjectChipSelectField.vue
new file mode 100644
index 0000000..46012a0
--- /dev/null
+++ b/aleksis/apps/cursus/frontend/components/SubjectChipSelectField.vue
@@ -0,0 +1,45 @@
+<script setup>
+import ForeignKeyChipSelectField from "aleksis.core/components/generic/forms/ForeignKeyChipSelectField.vue";
+// eslint-disable-next-line no-unused-vars
+import CreateSubject from "./CreateSubject.vue";
+import SubjectChip from "./SubjectChip.vue";
+</script>
+
+<template>
+ <foreign-key-chip-select-field
+ v-bind="$attrs"
+ v-on="$listeners"
+ :fields="headers"
+ create-item-i18n-key="cursus.subject.create"
+ :gql-query="gqlQuery"
+ :gql-create-mutation="gqlCreateMutation"
+ :gql-patch-mutation="{}"
+ :default-item="defaultItem"
+ :get-create-data="getCreateData"
+ :get-patch-data="getPatchData"
+ :background-color="$attrs['value'].colourBg"
+ :color="$attrs['value'].colourFg"
+ return-object
+ >
+ <template #item="{ item }">
+ <subject-chip :subject="item" :style="{ cursor: 'pointer' }" />
+ </template>
+ <template #selection="{ item }">
+ <span :style="{ color: item.colourFg }">{{ item.name }}</span>
+ </template>
+ <template #createComponent="{ attrs, on, createMode }">
+ <create-subject v-bind="attrs" v-on="on" />
+ </template>
+ </foreign-key-chip-select-field>
+</template>
+
+<script>
+import SubjectField from "./SubjectField.vue";
+
+export default {
+ name: "SubjectChipSelectField",
+ extends: SubjectField,
+};
+</script>
+
+<style scoped></style>
--
GitLab