chore: move contrib logic outside of data structure #142

teritorio · Feb 26, 2024 · aafb88a · aafb88a
1 parent ec70377
commit aafb88a
Show file tree

Hide file tree

Showing 16 changed files with 90 additions and 110 deletions.
diff --git a/components/Fields/ContribFieldGroup.vue b/components/Fields/ContribFieldGroup.vue
@@ -16,13 +16,27 @@ const onlyDefinedProps = computed(() => {
 </script>
 
 <template>
-  <ExternalLink
-    v-for="(field, key, index) in onlyDefinedProps"
-    :key="key"
-    :class="{ 'mt-2': index > 0 }"
-    :icon="field.icon"
-    :href="field.url"
-  >
-    {{ $t(`fields.contrib.${key}`) }}
-  </ExternalLink>
+  <div>
+    <ExternalLink
+      v-for="(field, key, index) in onlyDefinedProps"
+      :key="key"
+      :class="{ 'mt-2': index > 0 }"
+      :icon="field.icon"
+      :href="field.url"
+    >
+      {{ $t(`fields.contrib.${key}`) }}
+    </ExternalLink>
+  </div>
 </template>
+
+<style scoped>
+div  {
+  margin: 1rem 0;
+}
+
+@media print {
+  div {
+   display: none;
+  }
+}
+</style>
diff --git 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({
         </ExternalLink>
       </div>
 
-      <ContribFieldGroup
-        v-else-if="field.field === 'contrib'"
-        v-bind="properties[field.field]"
-      />
-
       <div
         v-for="item in properties[field.field]"
         v-else-if="field.field === 'download'"

diff --git a/components/PoisCard/PoiCardContent.vue b/components/PoisCard/PoiCardContent.vue
@@ -2,7 +2,6 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { mapState } from 'pinia'
 import type { PropType } from 'vue'
-
 import { defineNuxtComponent } from '#app'
 import Fields from '~/components/PoisCard/Fields.vue'
 import FavoriteIcon from '~/components/UI/FavoriteIcon.vue'
@@ -12,6 +11,7 @@ import { coordinatesHref } from '~/lib/coordinates'
 import { favoritesStore } from '~/stores/favorite'
 import { mapStore } from '~/stores/map'
 import { isIOS } from '~/utils/isIOS'
+import ContributionMixin from '~/mixins/contribution'
 
 export default defineNuxtComponent({
   components: {
@@ -20,7 +20,7 @@ export default defineNuxtComponent({
     FavoriteIcon,
     Fields,
   },
-
+  mixins: [ContributionMixin],
   props: {
     poi: {
       type: Object as PropType<ApiPoi>,
@@ -217,6 +217,10 @@ export default defineNuxtComponent({
       {{ description }}
     </p>
 
+    <ClientOnly v-if="contribMode && isContribEligible(poi.properties)">
+      <ContribFieldGroup v-bind="getContributorFields(poi)" />
+    </ClientOnly>
+
     <div v-else class="tw-h-auto tw-flex-grow tw-shrink-0">
       <Fields
         :fields="

diff --git a/components/PoisDetails/PoiDetails.vue b/components/PoisDetails/PoiDetails.vue
@@ -21,12 +21,15 @@ import type { Settings } from '~/lib/apiSettings'
 import { PropertyTranslationsContextEnum } from '~/plugins/property-translations'
 import { favoritesStore } from '~/stores/favorite'
 import { OriginEnum } from '~/utils/types'
+import ContributionMixin from '~/mixins/contribution'
+import FieldsHeader from '~/components/UI/FieldsHeader.vue'
 
 export default defineNuxtComponent({
   components: {
     PoiLayout,
     IconButton,
     FavoriteIcon,
+    FieldsHeader,
     TeritorioIcon,
     Share,
     Carousel,
@@ -36,7 +39,7 @@ export default defineNuxtComponent({
     FieldsGroup,
     RelativeDate,
   },
-
+  mixins: [ContributionMixin],
   props: {
     settings: {
       type: Object as PropType<Settings>,
@@ -210,6 +213,12 @@ export default defineNuxtComponent({
     <template #body>
       <div class="detail-wrapper">
         <div class="detail-left">
+          <ClientOnly v-if="contribMode && isContribEligible(poi.properties)">
+            <FieldsHeader :recursion-stack="[]">
+              {{ $t('fields.contrib.heading') }}
+            </FieldsHeader>
+            <ContribFieldGroup v-bind="getContributorFields(poi)" />
+          </ClientOnly>
           <FieldsGroup
             v-if="detailsFields"
             :group="{

diff --git a/components/PoisList/PoisList.vue b/components/PoisList/PoisList.vue
@@ -14,8 +14,6 @@ import type { ApiPois, FieldsListItem } from '~/lib/apiPois'
 import { getPoiByCategoryId } from '~/lib/apiPois'
 import type { Settings } from '~/lib/apiSettings'
 import { menuStore } from '~/stores/menu'
-import { useContribStore } from '~/stores/contrib'
-import { addContributorFields, isContribEligible } from '~/middleware/contrib-mode.global'
 
 export default defineNuxtComponent({
   components: {
@@ -91,17 +89,7 @@ export default defineNuxtComponent({
           geometry_as: 'point',
           short_description: true,
         },
-      ).then((pois) => {
-        if (useContribStore().enabled) {
-          pois.features.map(poi =>
-            isContribEligible(poi.properties)
-              ? addContributorFields(poi, EditorialGroupType.List)
-              : poi,
-          )
-        }
-
-        this.pois = pois
-      })
+      ).then(pois => this.pois = pois)
     },
   },
 

diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue
@@ -1,16 +1,16 @@
 <script lang="ts">
 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<FieldsListItem[]>,
@@ -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') }}
           </NuxtLink>
         </td>
+        <ClientOnly v-if="contribMode && isContribEligible(feature.properties)">
+          <td class="tw-align-top">
+            <ContribFieldGroup v-bind="getContributorFields(feature)" />
+          </td>
+        </ClientOnly>
       </tr>
     </tbody>
     <tbody v-else>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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() {