feat: add tags input for Note

refs #146

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>