feat: support field short_description

teritorio · Apr 19, 2023 · 08e8715 · 08e8715
1 parent 928ec8f
commit 08e8715
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -115,8 +115,9 @@ Popup and details special fields support:
 * `addr:*`: combined all address fields.
 * `route:*`: all routes activity types and fields.
 * `start_end_date`: combined `start_date` and `end_date` fields.
+* `short_description`
 
-Spetial formatting support:
+Special formatting support:
 * `opening_hours`
 * `phone` and `mobile`
 

diff --git a/components/Fields/Field.stories.ts b/components/Fields/Field.stories.ts
@@ -86,15 +86,15 @@ const description =
 
 export const Description = bind(Field, {
   ...defaultProps,
-  field: { field: 'description' },
+  field: { field: 'short_description' },
   properties: {
     description,
   },
 })
 
 export const DescriptionDetails = bind(Field, {
   ...defaultProps,
-  field: { field: 'description' },
+  field: { field: 'short_description' },
   properties: {
     description,
   },

diff --git a/components/Fields/Field.vue b/components/Fields/Field.vue
@@ -46,6 +46,30 @@
     >
   </Coordinates>
 
+  <div
+    v-else-if="field.field == 'short_description' && shortDescription"
+    class="inline"
+  >
+    <FieldsHeader
+      v-if="field.label"
+      :recursion-stack="undefined"
+      :class="`field_header_level_${recursionStack.length}`"
+      >{{ fieldTranslateK(field.field) }}</FieldsHeader
+    >
+    {{ shortDescription.substring(0, textLimit) }}
+    <template v-if="shortDescription.length > textLimit"> '…' </template>
+    <a
+      v-if="Boolean(details) && shortDescription.length > textLimit"
+      class="underline"
+      :href="details"
+      rel="noopener noreferrer"
+      target="_blank"
+      @click.stop="$emit('click-details')"
+    >
+      {{ $tc('poiCard.seeDetail') }}
+    </a>
+  </div>
+
   <div v-else-if="properties[field.field]">
     <FieldsHeader
       v-if="field.label"
@@ -54,28 +78,11 @@
       >{{ fieldTranslateK(field.field) }}</FieldsHeader
     >
     <div :class="`inline field_content_level_${recursionStack.length}`">
-      <div v-if="field.field == 'description'" class="inline">
-        <template
-          v-if="
-            Boolean(details) &&
-            properties &&
-            properties.description &&
-            properties.description.length > textLimit
-          "
-        >
-          {{ properties.description.substring(0, textLimit) + '...' }}
-          <a
-            class="underline"
-            :href="details"
-            rel="noopener noreferrer"
-            target="_blank"
-            @click.stop="$emit('click-details')"
-          >
-            {{ $tc('poiCard.seeDetail') }}
-          </a>
-        </template>
-        <div v-else class="prose" v-html="properties.description" />
-      </div>
+      <div
+        v-if="field.field == 'description'"
+        class="prose"
+        v-html="properties.description"
+      />
 
       <Phone
         v-for="phone in properties[field.field]"
@@ -262,6 +269,10 @@ export default Vue.extend({
         this.$screen.phone
       )
     },
+
+    shortDescription(): string | undefined {
+      return this.properties?.description?.replace(/(<([^>]+)>)/gi, '')
+    },
   },
 
   methods: {

diff --git a/components/PoisCard/Fields.stories.ts b/components/PoisCard/Fields.stories.ts
@@ -26,7 +26,11 @@ const description =
 
 export const Many = bind(Fields, {
   ...defaultProps,
-  fields: [{ field: 'phone' }, { field: 'route' }, { field: 'description' }],
+  fields: [
+    { field: 'phone' },
+    { field: 'route' },
+    { field: 'short_description' },
+  ],
   properties: {
     phone: '+33676544',
     mobile: '+339750987766',

diff --git a/components/PoisDetails/Fields.stories.ts b/components/PoisDetails/Fields.stories.ts
@@ -26,7 +26,11 @@ const description =
 
 export const Many = bind(Fields, {
   ...defaultProps,
-  fields: [{ field: 'phone' }, { field: 'route' }, { field: 'description' }],
+  fields: [
+    { field: 'phone' },
+    { field: 'route' },
+    { field: 'short_description' },
+  ],
   properties: {
     phone: ['+33676544'],
     mobile: ['+339750987766'],

diff --git a/lib/apiPoiDeps.ts b/lib/apiPoiDeps.ts
@@ -84,7 +84,7 @@ export function apiRouteWaypointToApiPoi(
       editorial: {
         popup_fields: [
           {
-            field: 'description',
+            field: 'short_description',
           },
           {
             field: 'coordinates',

diff --git a/pages/embedded.vue b/pages/embedded.vue
@@ -110,7 +110,10 @@ export default Vue.extend({
         config.API_ENDPOINT,
         config.API_PROJECT,
         config.API_THEME,
-        poiId
+        poiId,
+        {
+          short_description: false,
+        }
       )
     }
 

diff --git a/pages/index.vue b/pages/index.vue
@@ -119,7 +119,10 @@ export default Vue.extend({
           config.API_ENDPOINT,
           config.API_PROJECT,
           config.API_THEME,
-          poiId!
+          poiId!,
+          {
+            short_description: false,
+          }
         )
       ).catch(() => {
         return undefined

diff --git a/stores/menu.ts b/stores/menu.ts
@@ -170,7 +170,10 @@ export const menuStore = defineStore('menu', {
                   apiEndpoint,
                   apiProject,
                   apiTheme,
-                  categoryId
+                  categoryId,
+                  {
+                    short_description: false,
+                  }
                 )
               )
           )