Working event base

components/calendar/Calendar.vue

@@ -12,11 +12,13 @@ const worldId = route.params.id
 
 const { setMonths, setDefaultDate, currentConfig, selectedDate, jumpToDate } = useCalendar()
 const { setEvents } = useCalendarEvents()
+const { setCharacters } = useCharacters()
 
-const { data: calendar, pending, refresh } = await useLazyFetch(`/api/calendars/query?world_id=${worldId}`)
+const { data: calendar, pending: calPending, refresh: calRefresh } = await useLazyFetch(`/api/calendars/query?world_id=${worldId}`)
+const { data: characters, pending: charPending, refresh: charRefresh } = await useLazyFetch(`/api/characters/query?world_id=${worldId}`)
 
 if (!calendar.value) {
-  await refresh()
+  await calRefresh()
 } else {
   if (calendar.value?.data?.months) {
     setMonths(calendar.value?.data?.months)
@@ -28,8 +30,15 @@ if (!calendar.value) {
     setEvents(calendar.value?.data?.events)
   }
 }
+if (!characters.value) {
+  await charRefresh()
+} else {
+  if (characters.value?.data) {
+    setCharacters(characters.value?.data)
+  }
+}
 
-watch(pending, (newStatus) => {
+watch(calPending, (newStatus) => {
   if (!newStatus) {
     if (calendar.value?.data?.months) {
       setMonths(calendar.value?.data?.months)
@@ -42,6 +51,13 @@ watch(pending, (newStatus) => {
     }
   }
 })
+watch(charPending, (newStatus) => {
+  if (!newStatus) {
+    if (characters.value?.data) {
+      setCharacters(characters.value?.data)
+    }
+  }
+})
 
 const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   switch (currentConfig.viewType) {
@@ -67,7 +83,7 @@ onMounted(() => {
 
 <template>
   <div class="h-full">
-    <template v-if="pending">
+    <template v-if="calPending || charPending">
       <div class="h-full grid place-items-center">
         Loading notamment
       </div>

components/calendar/search/CalendarSearch.vue

@@ -1,16 +1,12 @@
 <script lang="ts" setup>
 import {
-  characterCategories,
   isCharacter,
   type Character,
-  type CharacterCategory
 } from '@/models/Characters'
 import type { RPGDateOrder } from '@/models/Date'
 import {
-  calendarEventCategories,
   isCalendarEvent,
   type CalendarEvent,
-  type CalendarEventCategory
 } from '~/models/CalendarEvent'
 import { useCharacters } from '@/stores/CharacterStore'
 import { useCalendarEvents } from '@/stores/EventStore'
@@ -29,6 +25,7 @@ import {
 } from 'radix-vue'
 
 import SearchList from './lists/SearchList.vue'
+import type { Category } from '~/models/Category'
 
 const { characters } = storeToRefs(useCharacters())
 const { allEvents } = storeToRefs(useCalendarEvents())
@@ -105,7 +102,7 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
 
       // Handle categories logic
       let hitCategories: boolean = false
-      const allCategories: CalendarEventCategory[] = []
+      const allCategories: Category[] = []
 
       if (item.category) {
         allCategories.push(item.category)
@@ -116,7 +113,7 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
       }
 
       hitCategories = selectedCategories.value.every((selectedCat) => {
-        return allCategories.includes(selectedCat as CalendarEventCategory)
+        return allCategories.includes(selectedCat as Category)
       })
 
       return (hitTitle || hitDesc) && hitCategories
@@ -139,7 +136,7 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
 
       // Handle categories logic
       let hitCategories: boolean = false
-      const allCategories: CharacterCategory[] = []
+      const allCategories: Category[] = []
 
       if (item.category) {
         allCategories.push(item.category)
@@ -150,7 +147,7 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
       }
 
       hitCategories = selectedCategories.value.every((selectedCat) => {
-        return allCategories.includes(selectedCat as CharacterCategory)
+        return allCategories.includes(selectedCat as Category)
       })
 
       return hitTitle && hitCategories
@@ -207,14 +204,10 @@ watch([currentPage, selectedEntity], () => {
 
 // Compute categories based on current selectedEntity
 const currentCategories = computed(() => {
-  if (selectedEntity.value === 'characters') {
-    return [...characterCategories]
-  } else {
-    return [...calendarEventCategories]
-  }
+  return []
 })
 
-const selectedCategories = ref<(CharacterCategory | CalendarEventCategory)[]>([])
+const selectedCategories = ref<(Category)[]>([])
 const categoryFilterOpened = ref<boolean>(false)
 const searchCategory = ref<string>('')
 
@@ -227,7 +220,7 @@ const filteredCategories = computed(() =>
  *
  * @param e Radix Change Event
  */
-function handleCategorySelect(e: (CharacterCategory | CalendarEventCategory)) {
+function handleCategorySelect(e: (Category)) {
   if (typeof e === 'string') {
     searchCategory.value = ''
     selectedCategories.value.push(e)
@@ -290,9 +283,9 @@ function handleCategorySelect(e: (CharacterCategory | CalendarEventCategory)) {
           </div>
 
           <div class="flex items-center gap-1">
-            <UiTagsInput class="px-0 gap-0 w-72" :model-value="selectedCategories">
+            <UiTagsInput class="px-0 gap-0 w-72">
               <div class="flex gap-2 flex-wrap items-center px-3">
-                <UiTagsInputItem v-for="item in selectedCategories" :key="item" :value="item">
+                <UiTagsInputItem v-for="item in selectedCategories" :key="item.id" :value="item.name">
                   <UiTagsInputItemText class="capitalize" />
                   <UiTagsInputItemDelete />
                 </UiTagsInputItem>

components/calendar/search/lists/CharacterCallout.vue

@@ -7,7 +7,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { Button } from '@/components/ui/button'
 import { PhArrowSquareOut, PhPlant, PhSkull } from '@phosphor-icons/vue'
 
-defineProps<{
+const props = defineProps<{
   character: Character
 }>()
 
@@ -16,6 +16,8 @@ defineEmits<{
 }>()
 
 const { getFormattedDateTitle } = useCalendar()
+
+console.log(props.character.birth)
 </script>
 
 <template>

components/calendar/search/lists/EventCallout.vue

@@ -24,7 +24,7 @@ const dateDuration: string | null = props.event.endDate
 </script>
 
 <template>
-  <Uibutton
+  <button
     class="relative block w-full text-left py-3 px-4 rounded-sm transition-colors"
     :class="{
       'text-white bg-slate-600 hover:bg-slate-700': !event.category,
@@ -110,5 +110,5 @@ const dateDuration: string | null = props.event.endDate
         {{ event.description }}
       </span>
     </div>
-  </Uibutton>
+  </button>
 </template>