diff --git a/src/components/shows/NoteEditorModal.vue b/src/components/shows/NoteEditorModal.vue index 37b1e1b72d7d04914177be33d5eab34a1970d367..a8895a943648586e629c2b63cf5eb6063f372e2e 100644 --- a/src/components/shows/NoteEditorModal.vue +++ b/src/components/shows/NoteEditorModal.vue @@ -47,6 +47,10 @@ </template> </FormGroup> + <FormGroup :label="t('noteEditor.tags')" :errors="tagsErrors"> + <TagInput v-model="tags" /> + </FormGroup> + <FormGroup :label="t('noteEditor.image')" :errors="imageErrors" custom-control> <ImagePicker v-model="noteData.imageId" class="tw-flex-none tw-w-min" /> </FormGroup> @@ -81,6 +85,9 @@ import FormGroup from '@/components/generic/FormGroup.vue' import FormTable from '@/components/generic/FormTable.vue' import ImagePicker from '@/components/images/ImagePicker.vue' import ServerErrors from '@/components/ServerErrors.vue' +import TagInput from '@/components/generic/TagInput.vue' + +defineOptions({ compatConfig: { MODE: 3 } }) const props = defineProps<{ modelValue: null | number @@ -97,8 +104,19 @@ const noteStore = useNoteStore() const { obj: storedNote } = useAPIObject(noteStore, noteId) const noteData = ref<Note | NewNote>(newNote(props.timeslotId)) const error = ref<Error>() -const [titleErrors, summaryErrors, contentErrors, imageErrors, remainingErrors] = - useServerFieldErrors(error, 'title', 'summary', 'content', 'imageId') +const [titleErrors, summaryErrors, contentErrors, imageErrors, tagsErrors, remainingErrors] = + useServerFieldErrors(error, 'title', 'summary', 'content', 'tags', 'imageId') +const tags = computed({ + get() { + return noteData.value.tags + .split(',') + .map((t) => t.trim()) + .filter((t) => t !== '') + }, + set(value: string[]) { + noteData.value.tags = value.join(', ') + }, +}) watchEffect(() => { if (storedNote.value) { @@ -137,11 +155,3 @@ async function save() { emit('show', false) } </script> - -<script lang="ts"> -export default { - compatConfig: { - MODE: 3, - }, -} -</script>