-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Revert "Improve list page table (#181)"
This reverts commit 6f60d4a.
- Loading branch information
Showing
16 changed files
with
402 additions
and
327 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,144 @@ | ||
<script lang="ts"> | ||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' | ||
import { mapState } from 'pinia' | ||
import type { PropType } from 'vue' | ||
import { defineNuxtComponent, useRequestHeaders } from '#app' | ||
import PoiLayout from '~/components/Layout/PoiLayout.vue' | ||
import Actions from '~/components/PoisList/Actions.vue' | ||
import CategorySelector from '~/components/PoisList/CategorySelector.vue' | ||
import PoisTable from '~/components/PoisList/PoisTable.vue' | ||
import type { ContentEntry } from '~/lib/apiContent' | ||
import type { ApiPois, FieldsListItem } from '~/lib/apiPois' | ||
import { getPoiByCategoryId } from '~/lib/apiPois' | ||
import type { Settings } from '~/lib/apiSettings' | ||
import { menuStore } from '~/stores/menu' | ||
export default defineNuxtComponent({ | ||
components: { | ||
FontAwesomeIcon, | ||
Actions, | ||
PoiLayout, | ||
CategorySelector, | ||
PoisTable, | ||
}, | ||
props: { | ||
settings: { | ||
type: Object as PropType<Settings>, | ||
required: true, | ||
}, | ||
navMenuEntries: { | ||
type: Array as PropType<ContentEntry[]>, | ||
required: true, | ||
}, | ||
initialCategoryId: { | ||
type: Number, | ||
required: true, | ||
}, | ||
initialPois: { | ||
type: Object as PropType<ApiPois>, | ||
required: true, | ||
}, | ||
}, | ||
data(): { | ||
categoryId: number | ||
pois: ApiPois | undefined | ||
} { | ||
return { | ||
categoryId: this.initialCategoryId, | ||
pois: this.initialPois, | ||
} | ||
}, | ||
computed: { | ||
...mapState(menuStore, ['menuItems', 'getCurrentCategory']), | ||
category() { | ||
return this.getCurrentCategory(this.categoryId) | ||
}, | ||
fields(): FieldsListItem[] { | ||
return ( | ||
(this.pois?.features | ||
&& this.pois.features[0].properties.editorial?.list_fields) || [ | ||
{ field: 'name' }, | ||
] | ||
) | ||
}, | ||
}, | ||
watch: { | ||
categoryId() { | ||
this.pois = undefined | ||
// Send new categoryId to parent in order to update meta title | ||
this.$emit('categoryUpdate', this.categoryId) | ||
// Change history directly to avoid resetup the page with this.$router.push | ||
history.pushState({}, '', `/category/${this.categoryId}`) | ||
getPoiByCategoryId( | ||
this.$vidoConfig(useRequestHeaders()), | ||
this.categoryId, | ||
{ | ||
geometry_as: 'point', | ||
short_description: true, | ||
}, | ||
).then(pois => this.pois = pois) | ||
}, | ||
}, | ||
methods: { | ||
onMenuChange(newCategoryId: number) { | ||
this.categoryId = newCategoryId | ||
}, | ||
}, | ||
}) | ||
</script> | ||
|
||
<template> | ||
<PoiLayout | ||
v-if="category !== undefined" | ||
:settings="settings" | ||
:nav-menu-entries="navMenuEntries" | ||
:name="category.category.name.fr" | ||
:icon="category.category.icon" | ||
:color-line="category.category.color_line" | ||
:color-fill="category.category.color_fill" | ||
> | ||
<template #actions> | ||
<Actions | ||
:category-id="categoryId" | ||
:color-line="category.category.color_line" | ||
/> | ||
</template> | ||
<template #body> | ||
<CategorySelector | ||
:menu-items="menuItems || {}" | ||
:category-id="categoryId" | ||
@category-change="onMenuChange" | ||
/> | ||
|
||
<PoisTable v-if="pois" :fields="fields" :pois="pois" /> | ||
<FontAwesomeIcon | ||
v-else | ||
icon="spinner" | ||
class="tw-text-zinc-400 tw-animate-spin" | ||
size="3x" | ||
/> | ||
</template> | ||
</PoiLayout> | ||
</template> | ||
|
||
<style lang="scss" scoped> | ||
@import '~/assets/details'; | ||
h1 { | ||
font-size: 2.4rem; | ||
text-align: center; | ||
margin: 0.6rem 0.3rem 0; | ||
text-transform: uppercase; | ||
} | ||
</style> |
Oops, something went wrong.