feat: custom field positions

api/prisma/migrations/20240324082502_custom_fields_positions/migration.sql

@@ -0,0 +1,5 @@
+-- CreateEnum
+CREATE TYPE "CustomFieldPosition" AS ENUM ('PUBLIC_PERSON', 'PUBLIC_ANMELDUNG', 'INTERN_PERSON', 'INTERN_ANMELDUNG', 'INTERN_VERANSTALTUNG', 'INTERN_AUSSCHREIBUNG');
+
+-- AlterTable
+ALTER TABLE "CustomField" ADD COLUMN "positions" "CustomFieldPosition"[];

api/prisma/schema.prisma

@@ -318,6 +318,16 @@ model Activity {
  metadata Json @default("{}")
 }
 
+enum CustomFieldPosition {
+ PUBLIC_PERSON
+ PUBLIC_ANMELDUNG
+
+ INTERN_PERSON
+ INTERN_ANMELDUNG
+ INTERN_VERANSTALTUNG
+ INTERN_AUSSCHREIBUNG
+}
+
 model CustomField {
  id Int @id @default(autoincrement())
  name String
@@ -327,6 +337,7 @@ model CustomField {
  options String[]
  role Role[]
  values CustomFieldValue[]
+ positions CustomFieldPosition[]
 
  veranstaltungId Int?
  unterveranstaltungId Int?

api/src/services/customFields/customFieldsVeranstaltungCreate.ts

@@ -1,3 +1,4 @@
+import { CustomFieldPosition } from '@prisma/client'
 import { z } from 'zod'
 
 import { CustomFieldNames } from '../../enumMappings'
@@ -16,13 +17,14 @@ export const customFieldsVeranstaltungCreate = defineProcedure({
  type: z.enum(CustomFieldNames),
  required: z.boolean(),
  options: z.array(z.string()),
+ positions: z.nativeEnum(CustomFieldPosition).array(),
  }),
  }),
  async handler({ input }) {
  return await prisma.customField.create({
  data: {
- veranstaltungId: input.veranstaltungId,
  ...input.data,
+ veranstaltungId: input.veranstaltungId,
  },
  })
  },

api/src/services/customFields/customFieldsVeranstaltungUpdate.ts

@@ -1,3 +1,4 @@
+import { CustomFieldPosition } from '@prisma/client'
 import { z } from 'zod'
 
 import { CustomFieldNames } from '../../enumMappings'
@@ -16,6 +17,7 @@ export const customFieldsVeranstaltungUpdate = defineProcedure({
  type: z.enum(CustomFieldNames),
  required: z.boolean(),
  options: z.array(z.string()),
+ positions: z.nativeEnum(CustomFieldPosition).array(),
  }),
  }),
  async handler({ input }) {

frontend/src/components/BasicInputs/BasicSelect.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
-import { ChevronDownIcon } from '@heroicons/vue/24/outline'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/vue/24/outline'
 
 import useValidationModel from '../../composables/useValidationModel'
 
@@ -9,20 +9,40 @@ import { type BasicInputDefaultProps } from './defaultProps'
 
 export interface Option {
  label: string
+ description?: string
  value: string | number
  disabled?: boolean
 }
 
 const props = defineProps<
- BasicInputDefaultProps<string | number> & {
+ BasicInputDefaultProps<string | number | string[] | number[]> & {
  options: Option[]
+ // eslint-disable-next-line vue/no-unused-properties
+ multiple?: boolean
  }
 >()
 
 const emit = defineEmits<{
  (event: 'update:modelValue', eventArgs: string | number | undefined): void
 }>()
 const { model, errorMessage } = useValidationModel(props, emit)
+
+function formatValue(modelValue: unknown) {
+ if (!modelValue) {
+ return props.placeholder || 'Bitte wählen...'
+ }
+ if (Array.isArray(modelValue)) {
+ if (modelValue.length === 0) {
+ return props.placeholder || 'Bitte wählen...'
+ }
+ return props.options
+ .filter((o) => modelValue.includes(o.value))
+ .map((o) => o.label)
+ .join(', ')
+ }
+
+ return modelValue
+}
 </script>
 
 <template>
@@ -31,20 +51,25 @@ const { model, errorMessage } = useValidationModel(props, emit)
  v-if="label"
  class="font-medium"
  :for="id || name || label"
- >{{ label }}
+ >
+ <span>{{ label }}</span>
  <span
  v-if="required"
  class="text-danger-600"
- >*</span
- ></label
- >
+ >
+ *
+ </span>
+ </label>
  <Listbox
  v-model="model"
  as="div"
  :name="id || name || label"
+ :multiple="props.multiple"
  >
  <ListboxButton class="input-style flex items-center justify-between">
- {{ options.find((option) => option.value === modelValue)?.label || placeholder || 'Bitte wählen...' }}
+ <span class="text-start">
+ {{ formatValue(modelValue) }}
+ </span>
  <ChevronDownIcon class="h-5 text-gray-500" />
  </ListboxButton>
  <div class="relative mt-1">
@@ -58,18 +83,27 @@ const { model, errorMessage } = useValidationModel(props, emit)
  >
  <ListboxOption
  v-for="option in options"
- v-slot="{ active }"
+ v-slot="{ active, selected }"
  :key="option.value"
  :value="option.value"
  :disabled="option.disabled"
  >
  <div
  :class="[
  active ? 'bg-primary-600 text-white' : 'text-gray-900',
+ selected ? 'bg-primary-200' : '',
  'relative cursor-default select-none px-3 py-2',
+ 'flex flex-row gap-x-4 items-center',
  ]"
  >
- {{ option.label }}
+ <CheckIcon
+ class="h-4"
+ :class="selected ? 'text-primary-600' : 'invisible'"
+ />
+ <div class="flex flex-col">
+ <span>{{ option.label }}</span>
+ <span class="text-xs mb-1">{{ option.description }}</span>
+ </div>
  </div>
  </ListboxOption>
  </ListboxOptions>

frontend/src/components/CustomFieldsTable.vue

@@ -3,14 +3,17 @@ import { CheckIcon, CubeTransparentIcon, XMarkIcon } from '@heroicons/vue/24/out
 import { useAsyncState } from '@vueuse/core'
 import { useRouter } from 'vue-router'
 
+import Loading from './UIComponents/Loading.vue'
+
 import { apiClient } from '@/api'
+import { CustomFieldPositionMapping, CustomFieldsMapping, getEnumOptions } from '@codeanker/api'
 
 const props = defineProps<{
  veranstaltungId: number
  // columns?: string[]
 }>()
 
-const { state: fields } = useAsyncState(async () => {
+const { state: fields, isLoading } = useAsyncState(async () => {
  return apiClient.customFields.list.query({
  // filter: {
  // veranstaltungId: props.veranstaltungId,
@@ -22,6 +25,19 @@ const { state: fields } = useAsyncState(async () => {
 }, [])
 
 const router = useRouter()
+
+type Field = (typeof fields.value)[number]
+
+function formatType(field: Field) {
+ return CustomFieldsMapping.find((m) => m.value === field.type)?.label
+}
+
+function formatPositions(field: Field) {
+ return getEnumOptions(CustomFieldPositionMapping)
+ .filter((o) => field.positions.includes(o.value))
+ .map((o) => o.label)
+ .join(', ')
+}
 </script>
 
 <template>
@@ -50,6 +66,12 @@ const router = useRouter()
  >
  Erforderlich?
  </th>
+ <th
+ scope="col"
+ class="px-3 py-3.5 text-left text-sm font-semibold"
+ >
+ Positionen
+ </th>
  </tr>
  </thead>
  <tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-dark-primary">
@@ -70,7 +92,7 @@ const router = useRouter()
  <p class="text-xs text-gray-500">{{ field.description }}</p>
  </td>
  <td class="whitespace-nowrap py-5 pl-4 pr-3 text-sm">
- <div>{{ field.type }}</div>
+ <div>{{ formatType(field) }}</div>
  </td>
  <td class="whitespace-nowrap py-5 pl-4 pr-3 text-sm">
  <CheckIcon
@@ -82,11 +104,17 @@ const router = useRouter()
  class="text-red-600 size-5"
  />
  </td>
+ <td class="whitespace-nowrap py-5 pl-4 pr-3 text-sm">
+ <div>{{ formatPositions(field) }}</div>
+ </td>
  </tr>
  </tbody>
  </table>
+ <div v-if="isLoading">
+ <Loading />
+ </div>
  <div
- v-if="fields.length <= 0"
+ v-else-if="fields.length <= 0"
  class="rounded-md bg-blue-50 dark:bg-blue-950 p-4 text-blue-500"
  >
  <div class="flex">

frontend/src/components/forms/customFields/CustomFieldsForm.vue

@@ -2,18 +2,26 @@
 import { ChevronDownIcon, ChevronUpIcon, TrashIcon } from '@heroicons/vue/24/outline'
 import { computed, ref } from 'vue'
 
-import BasicCheckbox from '@/components/BasicInputs/BasicCheckbox.vue'
 import BasicInput from '@/components/BasicInputs/BasicInput.vue'
 import BasicSelect, { type Option } from '@/components/BasicInputs/BasicSelect.vue'
+import BasicSwitch from '@/components/BasicInputs/BasicSwitch.vue'
 import Button from '@/components/UIComponents/Button.vue'
-import { CustomFields, CustomFieldsMapping, type CustomFieldType } from '@codeanker/api'
+import {
+ CustomFieldPositionMapping,
+ CustomFields,
+ CustomFieldsMapping,
+ getEnumOptions,
+ CustomFieldPosition,
+ type CustomFieldType,
+} from '@codeanker/api'
 
 export interface ICustomFieldData {
  name: string
  description?: string
  type: CustomFieldType
  required: boolean
  options: string[]
+ positions: CustomFieldPosition[]
 }
 
 const props = withDefaults(
@@ -37,6 +45,8 @@ const model = computed({
 })
 
 const typeOptions = ref<Option[]>(CustomFieldsMapping)
+const positionOptions = ref(getEnumOptions(CustomFieldPositionMapping))
+
 const field = computed(() => CustomFields.find((f) => f.name === model.value.type))
 
 function moveOptionUp(index: number) {
@@ -70,12 +80,27 @@ function moveOptionDown(index: number) {
  label="Beschreibung"
  placeholder="Eine Beschreibung oder ein Hilfstext"
  />
- <div class="col-span-full">
- <BasicCheckbox
+ <div>
+ <label
+ for="required"
+ class="font-medium"
+ >
+ Erforderlich?
+ </label>
+ <BasicSwitch
  v-model="model.required"
- label="Erforderlich?"
+ name="required"
+ label="Soll dieses Feld verpflichtend sein?"
+ class="mt-2"
  />
  </div>
+ <BasicSelect
+ v-model="model.positions"
+ label="Positionen"
+ :options="positionOptions"
+ multiple
+ required
+ />
 
  <div
  v-if="field?.hasOptions"
@@ -123,6 +148,7 @@ function moveOptionDown(index: number) {
  :label="`Option #${index + 1}`"
  placeholder="Lorem Ipsum"
  class="flex-1"
+ required
  />
  <Button
  color="danger"

frontend/src/views/Verwaltung/Veranstaltungen/CustomFields/CustomFieldVeranstaltungCreate.vue

@@ -19,6 +19,7 @@ const form = ref<ICustomFieldData>({
  required: false,
  type: 'BasicInput',
  options: [],
+ positions: [],
 })
 
 const validationErrors = ref([])
@@ -36,6 +37,7 @@ const { execute, error, isLoading } = useAsyncState(
  required: data.required,
  type: data.type,
  options: data.options || [],
+ positions: data.positions || [],
  },
  })
 

frontend/src/views/Verwaltung/Veranstaltungen/CustomFields/CustomFieldVeranstaltungEdit.vue

@@ -28,15 +28,17 @@ watch(field, () => {
  required: field.value?.required ?? false,
  type: (field.value?.type ?? 'BasicInput') as CustomFieldType,
  options: field.value?.options ?? [],
+ positions: field.value?.positions ?? [],
  }
 })
 
 const form = ref<ICustomFieldData>({
  name: '',
  description: '',
  required: false,
- options: [],
  type: 'BasicInput',
+ options: [],
+ positions: [],
 })
 
 const validationErrors = ref([])
@@ -58,6 +60,7 @@ const {
  required: data.required,
  type: data.type,
  options: data.options,
+ positions: data.positions,
  },
  })