From aafb88a92469058ecdf0dc1418713e50f8756e06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?No=C3=A9=20Viricel?= Date: Mon, 26 Feb 2024 12:26:46 +0100 Subject: [PATCH] chore: move contrib logic outside of data structure #142 --- components/Fields/ContribFieldGroup.vue | 32 ++++++++++---- components/Fields/Field.vue | 7 ---- components/PoisCard/PoiCardContent.vue | 8 +++- components/PoisDetails/PoiDetails.vue | 11 ++++- components/PoisList/PoisList.vue | 14 +------ components/PoisList/PoisTable.vue | 11 ++++- locales/en-GB.ts | 1 + locales/es-ES.ts | 1 + locales/fr-FR.ts | 1 + middleware/contrib-mode.global.ts | 56 +++++-------------------- mixins/contribution.ts | 25 +++++++++++ pages/category/[id].vue | 11 ----- pages/poi/[id]/details.vue | 4 -- stores/contrib.ts | 5 +-- stores/map.ts | 7 +--- utils/types.ts | 6 --- 16 files changed, 90 insertions(+), 110 deletions(-) create mode 100644 mixins/contribution.ts diff --git a/components/Fields/ContribFieldGroup.vue b/components/Fields/ContribFieldGroup.vue index c8bda87bf..b2ad0874b 100644 --- a/components/Fields/ContribFieldGroup.vue +++ b/components/Fields/ContribFieldGroup.vue @@ -16,13 +16,27 @@ const onlyDefinedProps = computed(() => { + + diff --git a/components/Fields/Field.vue b/components/Fields/Field.vue index 93788842c..1d32afe04 100644 --- a/components/Fields/Field.vue +++ b/components/Fields/Field.vue @@ -15,7 +15,6 @@ import RoutesField, { isRoutesFieldEmpty } from '~/components/Fields/RoutesField import Stars from '~/components/Fields/Stars.vue' import ExternalLink from '~/components/UI/ExternalLink.vue' import FieldsHeader from '~/components/UI/FieldsHeader.vue' -import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue' import type { ApiPoiProperties, FieldsListItem } from '~/lib/apiPois' import type { PropertyTranslationsContextEnum } from '~/plugins/property-translations' @@ -38,7 +37,6 @@ export function isFiledEmpty( export default defineNuxtComponent({ components: { - ContribFieldGroup, FontAwesomeIcon, FieldsHeader, OpeningHours, @@ -247,11 +245,6 @@ export default defineNuxtComponent({ - -
, @@ -217,6 +217,10 @@ export default defineNuxtComponent({ {{ description }}

+ + + +
+ + + {{ $t('fields.contrib.heading') }} + + + import type { PropType } from 'vue' - import { defineNuxtComponent } from '#app' import Field from '~/components/Fields/Field.vue' import type { ApiPois, FieldsListItem } from '~/lib/apiPois' import { PropertyTranslationsContextEnum } from '~/plugins/property-translations' +import ContributionMixin from '~/mixins/contribution' export default defineNuxtComponent({ components: { Field, }, - + mixins: [ContributionMixin], props: { fields: { type: Array as PropType, @@ -32,6 +32,8 @@ export default defineNuxtComponent({ ), })) h.push({ value: '', text: '' }) + if (this.contribMode) + h.push({ value: 'contrib', text: this.$t('fields.contrib.heading') }) return h }, @@ -68,6 +70,11 @@ export default defineNuxtComponent({ {{ $t('poisTable.details') }} + + + + + diff --git a/locales/en-GB.ts b/locales/en-GB.ts index 6d6f7f93b..86462efb4 100644 --- a/locales/en-GB.ts +++ b/locales/en-GB.ts @@ -158,6 +158,7 @@ export default defineI18nLocale(() => { fields: { contrib: { editor_id: 'Edit in iD Editor', + heading: 'Contribution', osm_note: 'Add an OSM note', mapillary_link: 'Explore on Mapillary', }, diff --git a/locales/es-ES.ts b/locales/es-ES.ts index 5cbcca0bc..73aa7d02c 100644 --- a/locales/es-ES.ts +++ b/locales/es-ES.ts @@ -158,6 +158,7 @@ export default defineI18nLocale(() => { fields: { contrib: { editor_id: 'Editar en iD editor', + heading: 'Contribución', osm_note: 'Añadir una nota en OSM', mapillary_link: 'Explorar en Mapillary', }, diff --git a/locales/fr-FR.ts b/locales/fr-FR.ts index 6ff134f7b..2f01b1d70 100644 --- a/locales/fr-FR.ts +++ b/locales/fr-FR.ts @@ -159,6 +159,7 @@ export default defineI18nLocale(() => { fields: { contrib: { editor_id: 'Éditer dans l\'éditeur iD', + heading: 'Contribution', osm_note: 'Ajouter une note à OSM', mapillary_link: 'Explorer sur Mapillary', }, diff --git a/middleware/contrib-mode.global.ts b/middleware/contrib-mode.global.ts index 943287b2f..578b37063 100644 --- a/middleware/contrib-mode.global.ts +++ b/middleware/contrib-mode.global.ts @@ -1,5 +1,4 @@ -import type { ApiPoi, ApiPoiProperties, FieldsList, FieldsListItem } from '~/lib/apiPois' -import { EditorialGroupType } from '~/utils/types' +import type { ApiPoi, ApiPoiProperties } from '~/lib/apiPois' import { STORE_NAME, useContribStore } from '~/stores/contrib' export interface Link { @@ -13,59 +12,38 @@ export interface ContribFields { osm_note: Link } -interface ContribEditorial { - details_fields: FieldsList - list_fields: FieldsListItem[] - popup_fields: FieldsListItem[] -} - export default defineNuxtRouteMiddleware((to) => { if (process.server) return if (process.client) { + const { setEnabled } = useContribStore() const contribLocalStorage = localStorage.getItem(STORE_NAME) if (to.query.contrib !== undefined) { - useContribStore().setEnabled(to.query.contrib === 'true') + setEnabled(to.query.contrib === 'true') return } if (contribLocalStorage) - useContribStore().setEnabled(contribLocalStorage === 'true') + setEnabled(contribLocalStorage === 'true') } }) -function getEditorialGroup(editorial: ContribEditorial, mode: EditorialGroupType) { - switch (mode) { - case EditorialGroupType.List: - editorial.list_fields.push({ field: 'contrib' }) - break - case EditorialGroupType.Popup: - editorial.popup_fields.push({ field: 'contrib' }) - break - case EditorialGroupType.Details: - editorial.details_fields.push({ - group: 'group_contrib', - display_mode: 'standard', - fields: [{ field: 'contrib' }], - }) - break - default: - break - } -} +export function getContributorFields(feature: ApiPoi): ContribFields { + const { mapillary } = feature.properties + const { osm_id, osm_type } = feature.properties.metadata + const { coordinates } = feature.geometry as GeoJSON.Point -function getContributorFields(nodeId: ApiPoiProperties['metadata']['osm_id'], nodeType: ApiPoiProperties['metadata']['osm_type'], coordinates: GeoJSON.Position, mapillaryId?: number): ContribFields { return { editor_id: { icon: 'pen-to-square', - url: `https://www.openstreetmap.org/edit?${nodeType}=${nodeId}`, + url: `https://www.openstreetmap.org/edit?${osm_type}=${osm_id}`, }, - mapillary_link: mapillaryId + mapillary_link: mapillary ? { icon: 'external-link-alt', - url: `https://www.mapillary.com/app/?pKey=${mapillaryId}&focus=photo`, + url: `https://www.mapillary.com/app/?pKey=${mapillary}&focus=photo`, } : undefined, osm_note: { @@ -78,15 +56,3 @@ function getContributorFields(nodeId: ApiPoiProperties['metadata']['osm_id'], no export function isContribEligible(properties: ApiPoiProperties): boolean { return !!(properties.metadata.osm_id && properties.metadata.osm_type && properties.editorial) } - -export function addContributorFields(feature: ApiPoi, mode: EditorialGroupType) { - if (feature.properties.contrib) - return - - const { osm_id, osm_type } = feature.properties.metadata - const { coordinates } = feature.geometry as GeoJSON.Point - - feature.properties.contrib = getContributorFields(osm_id, osm_type, coordinates, feature.properties.mapillary) - if (feature.properties.editorial) - getEditorialGroup(feature.properties.editorial as ContribEditorial, mode) -} diff --git a/mixins/contribution.ts b/mixins/contribution.ts new file mode 100644 index 000000000..5004477a0 --- /dev/null +++ b/mixins/contribution.ts @@ -0,0 +1,25 @@ +import { mapState } from 'pinia' +import type { ApiPoi, ApiPoiProperties } from '~/lib/apiPois' +import { useContribStore } from '~/stores/contrib' +import type { ContribFields } from '~/middleware/contrib-mode.global' +import { getContributorFields, isContribEligible } from '~/middleware/contrib-mode.global' +import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue' + +export default { + components: { + ContribFieldGroup, + }, + computed: { + ...mapState(useContribStore, { + contribMode: 'enabled', + }), + }, + methods: { + isContribEligible(properties: ApiPoiProperties): boolean { + return isContribEligible(properties) + }, + getContributorFields(feature: ApiPoi): ContribFields { + return getContributorFields(feature) + }, + }, +} diff --git a/pages/category/[id].vue b/pages/category/[id].vue index 01eaadd13..c5135f35e 100644 --- a/pages/category/[id].vue +++ b/pages/category/[id].vue @@ -23,9 +23,7 @@ import { getAsyncDataOrThrows } from '~/lib/getAsyncData' import { vidoConfig } from '~/plugins/vido-config' import { menuStore } from '~/stores/menu' import { siteStore } from '~/stores/site' -import { useContribStore } from '~/stores/contrib' import type { VidoConfig } from '~/utils/types-config' -import { addContributorFields, isContribEligible } from '~/middleware/contrib-mode.global' export default defineNuxtComponent({ components: { @@ -133,15 +131,6 @@ export default defineNuxtComponent({ mounted() { this.locale = this.$i18n.locale - - if (useContribStore().enabled) { - this.pois.features.map(poi => - isContribEligible(poi.properties) - ? addContributorFields(poi, EditorialGroupType.List) - : poi, - ) - } - this.handleCategoryUpdate(useRoute().params.id as string) }, methods: { diff --git a/pages/poi/[id]/details.vue b/pages/poi/[id]/details.vue index 5db96c5d5..b35fae220 100644 --- a/pages/poi/[id]/details.vue +++ b/pages/poi/[id]/details.vue @@ -30,8 +30,6 @@ import { getAsyncDataOrThrows } from '~/lib/getAsyncData' import { vidoConfig } from '~/plugins/vido-config' import { siteStore } from '~/stores/site' import type { VidoConfig } from '~/utils/types-config' -import { useContribStore } from '~/stores/contrib' -import { addContributorFields, isContribEligible } from '~/middleware/contrib-mode.global' export default defineNuxtComponent({ components: { @@ -155,8 +153,6 @@ export default defineNuxtComponent({ beforeMount() { this.$trackingInit(this.config) this.$vidoConfigSet(this.config) - if (useContribStore().enabled && isContribEligible(this.poi.properties)) - addContributorFields(this.poi, EditorialGroupType.Details) }, mounted() { diff --git a/stores/contrib.ts b/stores/contrib.ts index bd66c52a2..a6c995697 100644 --- a/stores/contrib.ts +++ b/stores/contrib.ts @@ -13,10 +13,7 @@ export const useContribStore = defineStore(STORE_NAME, { actions: { setEnabled(state: boolean) { this.enabled = state - localStorage.setItem(STORE_NAME, JSON.stringify(this.enabled)) + localStorage.setItem(STORE_NAME, JSON.stringify(state)) }, }, - share: { - enable: true, - }, }) diff --git a/stores/map.ts b/stores/map.ts index e60f435b2..84250ac2c 100644 --- a/stores/map.ts +++ b/stores/map.ts @@ -1,9 +1,7 @@ import { defineStore } from 'pinia' -import { useContribStore } from './contrib' -import { addContributorFields, isContribEligible } from '~/middleware/contrib-mode.global' import type { ApiPoi, ApiPoiProperties } from '~/lib/apiPois' import type { LatLng, Pitch } from '~/utils/types' -import { EditorialGroupType, Mode } from '~/utils/types' +import { Mode } from '~/utils/types' interface State { center: LatLng @@ -62,9 +60,6 @@ export const mapStore = defineStore('map', { if (feature?.properties) { const cleanProperties: ApiPoiProperties = {} as ApiPoiProperties - if (useContribStore().enabled && isContribEligible(feature.properties)) - addContributorFields(feature, EditorialGroupType.Popup) - Object.keys(feature.properties).forEach((key) => { if (isJsonObject(feature.properties[key])) cleanProperties[key] = JSON.parse(feature.properties[key]) diff --git a/utils/types.ts b/utils/types.ts index 15aec7efc..86533449e 100644 --- a/utils/types.ts +++ b/utils/types.ts @@ -34,9 +34,3 @@ export enum OriginEnum { twitter = 'twitter', whatsapp = 'whatsapp', } - -export enum EditorialGroupType { - Details, - List, - Popup, -}