Skip to content

Commit

Permalink
Revert "Improve list page table (#181)"
Browse files Browse the repository at this point in the history
This reverts commit 6f60d4a.
  • Loading branch information
wazolab authored Mar 12, 2024
1 parent 82d906e commit c76a187
Show file tree
Hide file tree
Showing 16 changed files with 402 additions and 327 deletions.
8 changes: 4 additions & 4 deletions components/Fields/Field.vue
Original file line number Diff line number Diff line change
Expand Up @@ -230,8 +230,8 @@ export default defineNuxtComponent({
v-else-if="isWebsite"
:key="`website_${item}`"
>
<ExternalLink :title="item" :href="item">
{{ context !== 'label_list' ? item : '' }}
<ExternalLink :href="item">
{{ item }}
</ExternalLink>
</div>

Expand All @@ -240,8 +240,8 @@ export default defineNuxtComponent({
v-else-if="field.field === 'email'"
:key="`email_${item}`"
>
<ExternalLink :title="item" :href="`mailto:${item}`" icon="envelope">
{{ context !== 'label_list' ? item : '' }}
<ExternalLink :href="`mailto:${item}`" icon="envelope">
{{ item }}
</ExternalLink>
</div>

Expand Down
2 changes: 0 additions & 2 deletions components/Layout/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,6 @@ export default defineNuxtComponent({
:logo-url="theme && theme.logo_url"
/>

<slot name="search" />

<div class="tw-flex tw-justify-end print:tw-hidden">
<slot />
<NavMenu :entries="navMenuEntries" />
Expand Down
6 changes: 3 additions & 3 deletions components/PoisList/Actions.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import type { PropType } from 'vue'
import { defineNuxtComponent } from '#app'
import { defineNuxtComponent, useRequestHeaders } from '#app'
import IconButton from '~/components/UI/IconButton.vue'
import IconsBar from '~/components/UI/IconsBar.vue'
import { getPoiByCategoryIdUrl } from '~/lib/apiPois'
import { siteStore as useSiteStore } from '~/stores/site'
export default defineNuxtComponent({
components: {
FontAwesomeIcon,
IconsBar,
IconButton,
},
props: {
categoryId: {
type: Number,
Expand Down Expand Up @@ -42,7 +42,7 @@ export default defineNuxtComponent({
methods: {
url(format: 'geojson' | 'csv'): string {
return getPoiByCategoryIdUrl(
useSiteStore().config!,
this.$vidoConfig(useRequestHeaders()),
this.categoryId,
{
geometry_as: 'point',
Expand Down
144 changes: 144 additions & 0 deletions components/PoisList/PoisList.vue
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>
Loading

0 comments on commit c76a187

Please sign in to comment.