convert gallery-list types to use embedded/fetched entry pattern
- currently amendVariants no longer works
This commit is contained in:
parent
e4da36a23c
commit
15ed807d8c
6 changed files with 91 additions and 62 deletions
|
|
@ -2,8 +2,10 @@ import DOMPurify from 'dompurify'
|
|||
import { marked } from 'marked'
|
||||
import yaml from 'js-yaml'
|
||||
import type {
|
||||
ListEntry,
|
||||
ListEntries,
|
||||
ListEntriesWithNestedEntries,
|
||||
ListWithEntries,
|
||||
ListWithNestedEntries,
|
||||
} from '@goldenwere/mackenzii-types'
|
||||
|
||||
/**
|
||||
|
|
@ -132,17 +134,17 @@ export const fetchAndParseMarkdown = async (path: string) => {
|
|||
* @param list the list to fetch configs from
|
||||
* @returns the resolved configs
|
||||
*/
|
||||
export const fetchConfigsFromList = async <T>(list: ListWithEntries<T>): Promise<{
|
||||
export const fetchConfigsFromList = async <T>(list: ListWithEntries<T> | ListWithNestedEntries<T>): Promise<{
|
||||
ids: string[]
|
||||
entries: ListEntry<T>
|
||||
entries: ListEntries<T> | ListEntriesWithNestedEntries<T>
|
||||
}> => {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let ids: string[] = []
|
||||
let entries: ListEntry<T> = {}
|
||||
let entries: ListEntries<T> = {}
|
||||
if (!!list.entries) {
|
||||
ids = ids.concat(Object.keys(list.entries))
|
||||
const allEntries = await Promise.all(ids.map(async id => ({
|
||||
entry: await fetchAndParseYaml<T>(list.entries[id]),
|
||||
entry: await fetchAndParseYaml<T>((list.entries!)[id]),
|
||||
id,
|
||||
})))
|
||||
allEntries.forEach((entry) => {
|
||||
|
|
@ -170,7 +172,7 @@ export const fetchConfigsFromList = async <T>(list: ListWithEntries<T>): Promise
|
|||
* @param id the id to query for
|
||||
* @returns the resolved config
|
||||
*/
|
||||
export const fetchConfigByIdFromList = async <T>(list: ListWithEntries<T>, id: string): Promise<T> => {
|
||||
export const fetchConfigByIdFromList = async <T>(list: ListWithEntries<T> | ListWithNestedEntries<T>, id: string): Promise<T> => {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
if (!!list.embeddedEntries && list.embeddedEntries[id]) {
|
||||
resolve(list.embeddedEntries[id])
|
||||
|
|
@ -181,6 +183,43 @@ export const fetchConfigByIdFromList = async <T>(list: ListWithEntries<T>, id: s
|
|||
})
|
||||
}
|
||||
|
||||
export const fetchNestedConfigs = async <T>(
|
||||
list: ListWithNestedEntries<T>,
|
||||
idsByDepth: string[],
|
||||
proccessCallback?: (t: T) => T,
|
||||
): Promise<ListWithNestedEntries<T>> => {
|
||||
/* DOCUMENT STRUCTURE:
|
||||
...listConfig
|
||||
entries:
|
||||
'key1': 'url'
|
||||
...entryConfig (T)
|
||||
entries:
|
||||
'key1-1': 'url'
|
||||
...entryConfig (T)
|
||||
embeddedEntries:
|
||||
'key1-2':
|
||||
...entryConfig (T)
|
||||
embeddedEntries:
|
||||
'key2':
|
||||
...entryConfig (T)
|
||||
embeddedEntries:
|
||||
'key2-1':
|
||||
...entryConfig (T)
|
||||
idsByDepth STRUCTURE:
|
||||
[ 'key1', 'key2-1' ]
|
||||
*/
|
||||
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let idsToLoop = [ ...idsByDepth ]
|
||||
let current = await fetchConfigByIdFromList(list, idsToLoop.shift()!) as ListEntriesWithNestedEntries<T>
|
||||
if (idsToLoop.length > 0) {
|
||||
resolve(await fetchNestedConfigs(current as any, idsToLoop))
|
||||
} else {
|
||||
resolve(current)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches content type from an image
|
||||
* @param path the path of the file to check
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import type {
|
|||
import { type RouteRecordRaw, useRouter } from 'vue-router'
|
||||
|
||||
import { amendVariantsWithDefaults } from './gallery-utilities'
|
||||
import { fetchAndParseYaml, storage } from 'src/utilities/fetch'
|
||||
import { fetchAndParseYaml, fetchNestedConfigs, fetchConfigsFromList, storage } from 'src/utilities/fetch'
|
||||
import { getCurrentRoute } from 'src/utilities/vuetils'
|
||||
import { useRouteStore } from 'src/routes'
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ const ready = ref(false)
|
|||
const galleryReady = ref(false)
|
||||
const filterPanelRef = ref(null as typeof FilterPanel | null)
|
||||
const entries = ref({} as GalleryDisplayedEntries)
|
||||
const variants = ref(validateVariantPath(props.variants))
|
||||
let variants = validateVariantPath(props.variants)
|
||||
const hasWarnings = ref(false)
|
||||
const hideWarnings = defineModel('showWarnings', { type: Boolean })
|
||||
const tagsByCategory = ref({} as { [category: string]: Record<string, string> })
|
||||
|
|
@ -58,16 +58,16 @@ const tagsByCategory = ref({} as { [category: string]: Record<string, string> })
|
|||
/**
|
||||
* Handles updating the displayed entries in the list
|
||||
*/
|
||||
const onDisplayEntries = () => {
|
||||
const onDisplayEntries = async () => {
|
||||
resetTags()
|
||||
galleryReady.value = false
|
||||
let currentEntries = config.entries
|
||||
if (!!variants.value) {
|
||||
variants.value.forEach((variant) => {
|
||||
currentEntries = amendVariantsWithDefaults(currentEntries[variant])!
|
||||
})
|
||||
if (!!variants) {
|
||||
const value = await fetchNestedConfigs<GalleryEntry>(config, variants)
|
||||
entries.value = (await fetchConfigsFromList(value)).entries
|
||||
} else {
|
||||
const value = await fetchConfigsFromList<GalleryEntry>(config)
|
||||
entries.value = value.entries
|
||||
}
|
||||
entries.value = currentEntries
|
||||
hasWarnings.value = !!Object.values(entries.value).find(other => !!other.warning)
|
||||
setTimeout(() => galleryReady.value = true)
|
||||
}
|
||||
|
|
@ -83,15 +83,15 @@ const onTileClicked = (clickEvent: { event: Event, id: string }) => {
|
|||
const entry = entries.value[id]
|
||||
|
||||
event.preventDefault()
|
||||
if (!!entry.variants) {
|
||||
const newPath = !!variants.value
|
||||
? `${(variants.value || []).join(';')};${id}`
|
||||
if (!!entry.entries || !!entry.embeddedEntries) {
|
||||
const newPath = !!variants
|
||||
? `${(variants || []).join(';')};${id}`
|
||||
: id
|
||||
router.push({ name: routeConfig.name, query: { v: newPath }})
|
||||
variants.value = newPath.split(';')
|
||||
variants = newPath.split(';')
|
||||
onDisplayEntries()
|
||||
} else if (!!variants.value) {
|
||||
router.push({ name: `${routeConfig.name?.toString()}: View Entry`, query: { v: `${(variants.value || []).join(';')};${id}` }})
|
||||
} else if (!!variants) {
|
||||
router.push({ name: `${routeConfig.name?.toString()}: View Entry`, query: { v: `${(variants || []).join(';')};${id}` }})
|
||||
} else {
|
||||
router.push({ name: `${routeConfig.name?.toString()}: View Entry`, query: { v: `${id}` }})
|
||||
}
|
||||
|
|
@ -103,13 +103,13 @@ const onTileClicked = (clickEvent: { event: Event, id: string }) => {
|
|||
*/
|
||||
const onNavigateBack = (event: Event) => {
|
||||
event.preventDefault()
|
||||
let newPath: string | null = variants.value!.slice(0, variants.value!.length - 1).join(';')
|
||||
let newPath: string | null = variants!.slice(0, variants!.length - 1).join(';')
|
||||
if (newPath === '') {
|
||||
router.push({ name: routeConfig.name})
|
||||
variants.value = null
|
||||
variants = null
|
||||
} else {
|
||||
router.push({ name: routeConfig.name, query: { v: newPath }})
|
||||
variants.value = validateVariantPath(newPath?.split(';'))
|
||||
variants = validateVariantPath(newPath?.split(';'))
|
||||
}
|
||||
onDisplayEntries()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@ export const getTitleFromEntryOrId = (entry: GalleryEntry, id: string) => (
|
|||
)
|
||||
|
||||
export const amendVariantsWithDefaults = (entry: GalleryEntry) => {
|
||||
const variants = deepCopy(entry.variants)
|
||||
if (!!variants) {
|
||||
Object.keys(variants).forEach(id => _amendVariantWithDefaults(entry, variants[id]))
|
||||
}
|
||||
// const variants = deepCopy(entry.variants)
|
||||
// if (!!variants) {
|
||||
// Object.keys(variants).forEach(id => _amendVariantWithDefaults(entry, variants[id]))
|
||||
// }
|
||||
|
||||
return variants
|
||||
// return variants
|
||||
}
|
||||
|
||||
export const _amendVariantWithDefaults = (parent: GalleryEntryInheritedProperties, variant: GalleryEntryInheritedProperties) => {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import type {
|
|||
} from '@goldenwere/mackenzii-types'
|
||||
|
||||
import { amendVariantsWithDefaults, getTitleFromEntryOrId } from './gallery-utilities'
|
||||
import { fetchAndParseYaml } from 'src/utilities/fetch'
|
||||
import { fetchAndParseYaml, fetchConfigByIdFromList, fetchNestedConfigs } from 'src/utilities/fetch'
|
||||
import { getCurrentRoute } from 'src/utilities/vuetils'
|
||||
import { useRouteStore } from 'src/routes'
|
||||
|
||||
|
|
@ -42,12 +42,12 @@ const styles = computed(() => {
|
|||
})
|
||||
|
||||
onMounted(async () => {
|
||||
config.value = await fetchAndParseYaml<GalleryList>(routeConfig.config)
|
||||
let currentEntries = config.value.entries
|
||||
for (let i = 0; i < props.variants.length - 1; ++i) {
|
||||
currentEntries = amendVariantsWithDefaults(currentEntries[props.variants[i]])!
|
||||
}
|
||||
entry.value = currentEntries[props.variants[props.variants.length - 1]]
|
||||
let listConfig = await fetchAndParseYaml<GalleryList>(routeConfig.config)
|
||||
config.value = listConfig
|
||||
let ids = props.variants
|
||||
let viewId = ids.pop()!
|
||||
let entries = await fetchNestedConfigs(listConfig, ids)
|
||||
entry.value = await fetchConfigByIdFromList(entries, viewId)
|
||||
id.value = props.variants[props.variants.length - 1]
|
||||
title.value = getTitleFromEntryOrId(entry.value, id.value)
|
||||
document.title = routeSubConfig.fullTitle?.replace('$ENTRY', title.value)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue