92 lines
2.7 KiB
Vue
92 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import type {
|
|
ProjectList,
|
|
ProjectListingInfo,
|
|
ProjectListDefinition,
|
|
} from '@goldenwere/mackenzii-types'
|
|
|
|
import { fetchAndParseYaml } from 'src/utilities/fetch'
|
|
import { getCurrentRoute } from 'src/utilities/vuetils'
|
|
import { useRouteStore } from 'src/routes'
|
|
|
|
import FilterPanel from 'src/components/shared/filter-panel.vue'
|
|
import ProjectTile from './project-tile.vue'
|
|
|
|
/**
|
|
* A wrapper around {@link GalleryEntries} for the app's use only which adds additional fields
|
|
* in order for the app to effectively display the entries.
|
|
*/
|
|
type ProjectDisplayedEntries = { [idOrTitle: string]: ProjectListingInfo & {
|
|
/**
|
|
* specifies whether the entry is hidden by the tags selected by a visitor
|
|
*/
|
|
hidden?: boolean
|
|
}}
|
|
|
|
const projectIds = ref([] as string[])
|
|
const projects = ref({} as ProjectDisplayedEntries)
|
|
const ready = ref(false)
|
|
const currentRoute = getCurrentRoute()
|
|
const routeStore = useRouteStore()
|
|
const routeConfig = routeStore._routes[currentRoute.path] as ProjectListDefinition
|
|
const config = ref(null as ProjectList | null)
|
|
const projectViewPath = computed(() => `${currentRoute.path}/view`)
|
|
|
|
/**
|
|
* Handler for a tag being selected;
|
|
* updates the visibility state of the current entries
|
|
* @param tagsToggled: the tags currently toggled in the filter panel
|
|
*/
|
|
const onToggledTagsChanged = (tagsToggled: string[]) => {
|
|
if (tagsToggled.length < 1) {
|
|
Object.keys(projects.value).forEach(entryId => {
|
|
projects.value[entryId].hidden = false
|
|
})
|
|
} else {
|
|
Object.keys(projects.value).forEach(entryId => {
|
|
projects.value[entryId].hidden = !projects.value[entryId].tags?.some(own => tagsToggled.includes(own))
|
|
})
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
config.value = await fetchAndParseYaml<ProjectList>(routeConfig.config)
|
|
projectIds.value = Object.keys(config.value.projects)
|
|
for (let i = 0; i < projectIds.value.length; ++i) {
|
|
const id = projectIds.value[i]
|
|
projects.value[id] = await fetchAndParseYaml(config.value.projects[id].config)
|
|
}
|
|
document.title = routeConfig.fullTitle
|
|
ready.value = true
|
|
})
|
|
</script>
|
|
|
|
<template lang="pug">
|
|
.template.project-list
|
|
Transition
|
|
.projects(
|
|
v-if='ready'
|
|
)
|
|
Transition(
|
|
v-for='id in projectIds'
|
|
)
|
|
ProjectTile(
|
|
v-if='!projects[id].hidden || !config.removeFromView'
|
|
v-bind='projects[id]'
|
|
:class='{ hidden: projects[id].hidden && !config.removeFromView }'
|
|
:id='id'
|
|
:viewPath='projectViewPath'
|
|
:isInternal='true'
|
|
)
|
|
Transition
|
|
FilterPanel(
|
|
v-if='ready && !!config.tags'
|
|
:tags='config.tags'
|
|
@toggledTagsChanged='onToggledTagsChanged($event)'
|
|
)
|
|
</template>
|
|
|
|
<style scoped lang="sass">
|
|
|
|
</style>
|