Moved categories to the same scope as calendar events
This commit is contained in:
@@ -26,7 +26,7 @@ import {
|
|||||||
import SearchList from "./lists/SearchList.vue"
|
import SearchList from "./lists/SearchList.vue"
|
||||||
import type { Category } from "~/models/Category"
|
import type { Category } from "~/models/Category"
|
||||||
|
|
||||||
const { isAdvancedSearchOpen, allEvents } = storeToRefs(useCalendar())
|
const { isAdvancedSearchOpen, allEvents, categories } = storeToRefs(useCalendar())
|
||||||
const { characters } = storeToRefs(useCharacters())
|
const { characters } = storeToRefs(useCharacters())
|
||||||
|
|
||||||
const searchInput = shallowRef<HTMLInputElement>()
|
const searchInput = shallowRef<HTMLInputElement>()
|
||||||
@@ -207,8 +207,7 @@ watch([currentPage, selectedEntity], () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// Compute categories based on current selectedEntity
|
// Compute categories based on current selectedEntity
|
||||||
const { data: resCategories } = await useFetch("/api/calendars/categories/query")
|
const currentCategories = computed(() => categories.value)
|
||||||
const currentCategories = ref<Category[]>(resCategories.value?.data as Category[])
|
|
||||||
|
|
||||||
const selectedCategories = ref<(Category)[]>([])
|
const selectedCategories = ref<(Category)[]>([])
|
||||||
const categoryFilterOpened = ref<boolean>(false)
|
const categoryFilterOpened = ref<boolean>(false)
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { dateSchema, type RPGDate } from "./Date"
|
|||||||
import type { World } from "./World"
|
import type { World } from "./World"
|
||||||
import type { ContentState } from "./Entity"
|
import type { ContentState } from "./Entity"
|
||||||
import type { RPGColor } from "./Color"
|
import type { RPGColor } from "./Color"
|
||||||
|
import type { Category } from "./Category"
|
||||||
|
|
||||||
export interface CalendarConfig {
|
export interface CalendarConfig {
|
||||||
months: CalendarMonth[]
|
months: CalendarMonth[]
|
||||||
@@ -16,7 +16,8 @@ export interface Calendar extends CalendarConfig {
|
|||||||
id?: number
|
id?: number
|
||||||
shortId?: string
|
shortId?: string
|
||||||
name: string
|
name: string
|
||||||
events: CalendarEvent[]
|
events: CalendarEvent[],
|
||||||
|
categories: Category[]
|
||||||
eventNb?: Array<{ count: number }>
|
eventNb?: Array<{ count: number }>
|
||||||
state: ContentState
|
state: ContentState
|
||||||
color?: RPGColor
|
color?: RPGColor
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { PhArrowBendDoubleUpLeft, PhCalendarX, PhCircleNotch } from "@phosphor-icons/vue";
|
import { PhArrowBendDoubleUpLeft, PhCalendarX, PhCircleNotch } from "@phosphor-icons/vue";
|
||||||
import type { Calendar } from "~/models/CalendarConfig";
|
import type { Calendar } from "~/models/CalendarConfig";
|
||||||
import type { Category } from "~/models/Category";
|
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
middleware: ["auth-guard"]
|
middleware: ["auth-guard"]
|
||||||
@@ -32,18 +31,12 @@ const {
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
const {
|
const isLoading = computed(() => calendarStatus.value === "pending")
|
||||||
data: categories,
|
|
||||||
status: categoriesStatus,
|
|
||||||
} = await useLazyFetch<{ data: Category[] }>("/api/calendars/categories/query",
|
|
||||||
{ key: "active-categories" }
|
|
||||||
)
|
|
||||||
const isLoading = computed(() => calendarStatus.value === "pending" || categoriesStatus.value === "pending")
|
|
||||||
|
|
||||||
const { setActiveCalendar } = useCalendar()
|
const { setActiveCalendar } = useCalendar()
|
||||||
watch([calendar, categories], () => {
|
watch([calendar], () => {
|
||||||
if (calendar.value?.data && categories.value?.data) {
|
if (calendar.value?.data) {
|
||||||
setActiveCalendar(calendar.value?.data, categories.value.data)
|
setActiveCalendar(calendar.value?.data)
|
||||||
}
|
}
|
||||||
}, { immediate: true })
|
}, { immediate: true })
|
||||||
</script>
|
</script>
|
||||||
@@ -62,7 +55,7 @@ watch([calendar, categories], () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="calendar?.data && categories?.data" class="h-full w-full">
|
<div v-else-if="calendar?.data" class="h-full w-full">
|
||||||
<Head>
|
<Head>
|
||||||
<Title>{{ calendar.data.name }}</Title>
|
<Title>{{ calendar.data.name }}</Title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import type { Category } from "~/models/Category";
|
|||||||
|
|
||||||
const querySchema = z.object({
|
const querySchema = z.object({
|
||||||
id: z.number({ coerce: true }).positive().int().optional(),
|
id: z.number({ coerce: true }).positive().int().optional(),
|
||||||
|
calendarId: z.number({ coerce: true }).positive().int()
|
||||||
})
|
})
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
export default defineEventHandler(async (event) => {
|
||||||
@@ -24,5 +25,9 @@ export default defineEventHandler(async (event) => {
|
|||||||
return output.eq("id", query.id).limit(1).single<Category>()
|
return output.eq("id", query.id).limit(1).single<Category>()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (query.calendarId) {
|
||||||
|
output.eq("calendar_id", query.calendarId)
|
||||||
|
}
|
||||||
|
|
||||||
return output.overrideTypes<Category[]>()
|
return output.overrideTypes<Category[]>()
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -52,6 +52,11 @@ export default defineEventHandler(async (event) => {
|
|||||||
category:calendar_event_categories!calendar_events_category_fkey (*),
|
category:calendar_event_categories!calendar_events_category_fkey (*),
|
||||||
secondaryCategories:calendar_event_categories!calendar_event_categories_links (*)
|
secondaryCategories:calendar_event_categories!calendar_event_categories_links (*)
|
||||||
),
|
),
|
||||||
|
categories:calendar_event_categories (
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
color
|
||||||
|
),
|
||||||
eventNb:calendar_events(count),
|
eventNb:calendar_events(count),
|
||||||
world:worlds (
|
world:worlds (
|
||||||
id,
|
id,
|
||||||
|
|||||||
@@ -60,7 +60,7 @@ export const useCalendar = defineStore("calendar", () => {
|
|||||||
*/
|
*/
|
||||||
const months = ref<CalendarMonth[]>([])
|
const months = ref<CalendarMonth[]>([])
|
||||||
|
|
||||||
function setActiveCalendar(calendarData: Calendar, categoryData: Category[]) {
|
function setActiveCalendar(calendarData: Calendar) {
|
||||||
try {
|
try {
|
||||||
if (!calendarData.id) return
|
if (!calendarData.id) return
|
||||||
|
|
||||||
@@ -88,7 +88,7 @@ export const useCalendar = defineStore("calendar", () => {
|
|||||||
months.value = calendarData.months
|
months.value = calendarData.months
|
||||||
|
|
||||||
baseEvents.value = calendarData.events
|
baseEvents.value = calendarData.events
|
||||||
categories.value = categoryData
|
categories.value = calendarData.categories
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user