From 9f7e625d5ee4fc2340222c4c34ce377e6734b0bb Mon Sep 17 00:00:00 2001
From: Matteo Biasi <matteobiasi@flashbeing.com>
Date: Sat, 4 Feb 2023 23:31:59 +0100
Subject: [PATCH] feat: refactored QuickView in minor components to support
 setup through config file

---
 .../quickview/QuickViewCardOverview.vue       |   2 +-
 .../quickview/QuickViewContactsCard.vue       | 103 ++++
 .../components/quickview/QuickViewMapView.vue |  70 +++
 .../quickview/QuickViewOpeningHoursView.vue   | 124 +++++
 .../quickview/QuickViewRecordInfoView.vue     |  88 ++++
 .../quickview/QuickViewTextInfoCard.vue       |  50 ++
 .../components/quickview/QuickViewUtils.ts    |  11 +
 .../quickview/QuickViewWebcamsView.vue        |  52 ++
 .../odhActivityPoi.quickView.ts               |  53 +-
 databrowser/src/domain/datasetConfig/types.ts |  24 +-
 .../domain/datasets/quickView/QuickView.vue   | 466 +++++-------------
 11 files changed, 668 insertions(+), 375 deletions(-)
 create mode 100644 databrowser/src/components/quickview/QuickViewContactsCard.vue
 create mode 100644 databrowser/src/components/quickview/QuickViewMapView.vue
 create mode 100644 databrowser/src/components/quickview/QuickViewOpeningHoursView.vue
 create mode 100644 databrowser/src/components/quickview/QuickViewRecordInfoView.vue
 create mode 100644 databrowser/src/components/quickview/QuickViewTextInfoCard.vue
 create mode 100644 databrowser/src/components/quickview/QuickViewUtils.ts
 create mode 100644 databrowser/src/components/quickview/QuickViewWebcamsView.vue

diff --git a/databrowser/src/components/quickview/QuickViewCardOverview.vue b/databrowser/src/components/quickview/QuickViewCardOverview.vue
index 6fda4c2de..9abd00ca9 100644
--- a/databrowser/src/components/quickview/QuickViewCardOverview.vue
+++ b/databrowser/src/components/quickview/QuickViewCardOverview.vue
@@ -84,7 +84,7 @@ import TagCustom from '../tag/TagCustom.vue';
 
 defineProps<{
   title?: string;
-  sections: Array;
+  sections: Array<any>;
   contentHasNoPadding?: Boolean;
   ctaIcon?: string;
 }>();
diff --git a/databrowser/src/components/quickview/QuickViewContactsCard.vue b/databrowser/src/components/quickview/QuickViewContactsCard.vue
new file mode 100644
index 000000000..c71cf81a4
--- /dev/null
+++ b/databrowser/src/components/quickview/QuickViewContactsCard.vue
@@ -0,0 +1,103 @@
+<template>
+  <QuickViewCardOverview
+    :title="t('datasets.quickView.contact')"
+    :sections="contactSections"
+  />
+</template>
+<script setup lang="ts">
+import { computed, defineProps, withDefaults } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { getTextValue } from './QuickViewUtils';
+
+import QuickViewCardOverview from './QuickViewCardOverview.vue';
+
+const { t } = useI18n();
+
+const props = withDefaults(
+  defineProps<{
+    companyName?: string;
+    givenName?: string;
+    surname?: string;
+    address?: string;
+    city?: string;
+    zipCode?: string;
+    countryName?: string;
+    email?: string;
+    phoneNumber?: string;
+    url?: string;
+  }>(),
+  {
+    companyName: '',
+    givenName: '',
+    surname: '',
+    address: '',
+    city: '',
+    zipCode: '',
+    countryName: '',
+    email: '',
+    phoneNumber: '',
+    url: '',
+  }
+);
+
+const contactSections = computed(() => {
+  return [
+    {
+      icon: 'IconDocument',
+      content: [
+        {
+          title: t('datasets.quickView.nameCompanyName'),
+          text: getTextValue(props.companyName),
+        },
+        {
+          title: t('datasets.quickView.firstName'),
+          text: getTextValue(props.givenName),
+        },
+        {
+          title: t('datasets.quickView.surname'),
+          text: getTextValue(props.surname),
+        },
+      ],
+    },
+    {
+      icon: 'IconBuilding',
+      content: [
+        {
+          title: t('datasets.quickView.streetAndNumber'),
+          text: getTextValue(props.address),
+        },
+        {
+          title: t('datasets.quickView.city'),
+          text: getTextValue(props.city),
+        },
+        {
+          title: t('datasets.quickView.zip'),
+          text: getTextValue(props.zipCode),
+        },
+        {
+          title: t('datasets.quickView.country'),
+          text: getTextValue(props.countryName),
+        },
+      ],
+    },
+    {
+      icon: 'IconPhonebook',
+      content: [
+        {
+          title: t('datasets.quickView.email'),
+          text: getTextValue(props.email),
+        },
+        {
+          title: t('datasets.quickView.phoneNumber'),
+          text: getTextValue(props.phoneNumber),
+        },
+        {
+          title: t('datasets.quickView.webUrl'),
+          text: getTextValue(props.url),
+        },
+      ],
+    },
+  ];
+});
+</script>
diff --git a/databrowser/src/components/quickview/QuickViewMapView.vue b/databrowser/src/components/quickview/QuickViewMapView.vue
new file mode 100644
index 000000000..3dbdba129
--- /dev/null
+++ b/databrowser/src/components/quickview/QuickViewMapView.vue
@@ -0,0 +1,70 @@
+<template>
+  <QuickViewCardOverview
+    :title="t('datasets.quickView.locationOnMap')"
+    cta-icon="IconExpand"
+    content-has-no-padding
+    :sections="[]"
+    @cta-click="openMapFullscreen()"
+  >
+    <template #content>
+      <MapBase
+        ref="mapComponent"
+        :key="map.center.length"
+        :center="map.center"
+        :markers="map.markers"
+      />
+    </template>
+  </QuickViewCardOverview>
+</template>
+<script setup lang="ts">
+import { computed, defineProps, withDefaults, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import QuickViewCardOverview from './QuickViewCardOverview.vue';
+import MapBase from '../../components/map/MapBase.vue';
+
+const { t } = useI18n();
+const mapComponent = ref(null);
+
+const props = withDefaults(
+  defineProps<{
+    gpsInfo: Array<any>;
+  }>(),
+  {
+    gpsInfo: () => [],
+  }
+);
+
+const openMapFullscreen = () => {
+  const fullscreenButton = document.querySelector(
+    '.ol-full-screen > button'
+  ) as HTMLElement;
+
+  fullscreenButton!.click();
+};
+
+const map = computed(() => {
+  if (!props.gpsInfo) {
+    return {
+      center: [],
+      markers: [],
+    };
+  }
+
+  const { Longitude, Latitude } = props.gpsInfo[0];
+
+  const mapObj = {
+    center: [Longitude, Latitude],
+    markers: [
+      {
+        position: {
+          lat: Latitude,
+          lng: Longitude,
+        },
+      },
+    ],
+  };
+
+  return mapObj;
+});
+</script>
diff --git a/databrowser/src/components/quickview/QuickViewOpeningHoursView.vue b/databrowser/src/components/quickview/QuickViewOpeningHoursView.vue
new file mode 100644
index 000000000..131cc8c22
--- /dev/null
+++ b/databrowser/src/components/quickview/QuickViewOpeningHoursView.vue
@@ -0,0 +1,124 @@
+<template>
+  <QuickViewCardOverview
+    :title="t('datasets.quickView.openingHours')"
+    :sections="
+      operationScheduleSections.length
+        ? operationScheduleSections
+        : [{ content: [{ text: '/' }] }]
+    "
+  />
+</template>
+<script setup lang="ts">
+import { computed, defineProps, withDefaults } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { getValueOfLocale, getTextValue } from './QuickViewUtils';
+
+import QuickViewCardOverview from './QuickViewCardOverview.vue';
+
+const { t, locale } = useI18n();
+const currentLocale = locale.value;
+
+const props = withDefaults(
+  defineProps<{
+    scheduleData?: Array<any>;
+  }>(),
+  {
+    scheduleData: () => [],
+  }
+);
+
+const operationSchedule = computed(() => {
+  let foundHours = false;
+
+  const timing = props.scheduleData ? [...props.scheduleData] : [];
+
+  const days = [
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+    'Sunday',
+  ];
+
+  const parsedData = [];
+  for (const time of timing) {
+    const operationScheduleTime = [];
+
+    for (const schedule of time?.OperationScheduleTime || []) {
+      foundHours = true;
+      const daysHours = [];
+      const [startHour, startMinute] = schedule.Start.split(':');
+      const [endHour, endMinute] = schedule.End.split(':');
+      for (const d of days) {
+        daysHours.push({
+          Start: `${startHour}:${startMinute}`,
+          End: `${endHour}:${endMinute}`,
+          State: schedule.State,
+          Timecode: schedule.Timecode,
+          Day: d.slice(0, 3).toUpperCase(),
+          Open: schedule[d],
+        });
+      }
+      operationScheduleTime.push(daysHours);
+    }
+    time.OperationScheduleTime = operationScheduleTime;
+    parsedData.push({
+      ...time,
+      OperationScheduleTime: operationScheduleTime,
+      TimePeriodRange: getTimePeriodRange(time.Start, time.Stop),
+    });
+  }
+
+  return foundHours ? parsedData : null;
+});
+
+const operationScheduleSections = computed(() => {
+  if (!operationSchedule.value) {
+    return [];
+  }
+
+  const sections = [];
+
+  for (const schedule of operationSchedule.value) {
+    sections.push({
+      icon: 'IconClock',
+      content: [
+        {
+          title: getTextValue(
+            getValueOfLocale(currentLocale, schedule.OperationscheduleName)
+          ),
+          text: schedule.TimePeriodRange,
+        },
+      ],
+      fullwidthContent: [
+        { operationScheduleTime: schedule.OperationScheduleTime },
+      ],
+    });
+  }
+
+  return sections;
+});
+
+const getTimePeriodRange = (start: string, end: string) => {
+  const [yearStart, , dayStart] = start.split('T')[0].split('-');
+  const [yearEnd, , dayEnd] = end.split('T')[0].split('-');
+
+  const dateLocale = 'en-US';
+  const dateOptions = {
+    month: 'long',
+  };
+
+  const monthStart = new Date(start).toLocaleDateString(
+    dateLocale,
+    dateOptions
+  );
+  const monthEnd = new Date(end).toLocaleDateString(dateLocale, dateOptions);
+
+  return `${parseInt(dayStart)}. ${monthStart}${
+    yearStart !== yearEnd ? ' ' + yearStart : ''
+  } - ${parseInt(dayEnd)}. ${monthEnd} ${yearEnd}`;
+};
+</script>
diff --git a/databrowser/src/components/quickview/QuickViewRecordInfoView.vue b/databrowser/src/components/quickview/QuickViewRecordInfoView.vue
new file mode 100644
index 000000000..93c7ccd2c
--- /dev/null
+++ b/databrowser/src/components/quickview/QuickViewRecordInfoView.vue
@@ -0,0 +1,88 @@
+<template>
+  <QuickViewCardOverview
+    :title="t('datasets.quickView.recordInformation')"
+    :sections="recordInformationSections"
+  />
+</template>
+<script setup lang="ts">
+import { computed, defineProps, withDefaults } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import QuickViewCardOverview from './QuickViewCardOverview.vue';
+
+const { t } = useI18n();
+
+const props = withDefaults(
+  defineProps<{
+    lastUpdate: string;
+    active: boolean;
+    odhActive: boolean;
+  }>(),
+  {
+    lastUpdate: '',
+    active: false,
+    odhActive: false,
+  }
+);
+
+const recordInformationSections = computed(() => {
+  const lastUpdate = props.lastUpdate;
+  if (!lastUpdate) {
+    return [];
+  }
+
+  const lastUpdateDate = new Date(lastUpdate).toISOString();
+  const [year, month, day] = lastUpdateDate.split('T')[0].split('-');
+
+  const isSourceActive = props.active;
+  const isODHActive = props.odhActive;
+
+  // FIXME: change based on dataset
+  const isSuedtirolInfoActive = false;
+  return [
+    {
+      icon: 'IconEditFilled',
+      content: [
+        {
+          title: t('datasets.quickView.lastChanged'),
+          text: `${day}.${month}.${year}`,
+        },
+      ],
+    },
+    {
+      icon: 'IconServer',
+      content: [
+        {
+          title: t('datasets.quickView.activeOnSource'),
+          tag: getTagActiveInfoObject({
+            active: isSourceActive,
+          }),
+        },
+        {
+          title: t('datasets.quickView.activeOnODH'),
+          tag: getTagActiveInfoObject({
+            active: isODHActive,
+          }),
+        },
+        {
+          title: t('datasets.quickView.suedtirolInfoActive'),
+          tag: getTagActiveInfoObject({
+            active: isSuedtirolInfoActive,
+          }),
+        },
+      ],
+    },
+  ];
+});
+
+const getTagActiveInfoObject = ({ active }) => {
+  return {
+    size: 'md',
+    type: active ? 'blue' : 'red',
+    text: active
+      ? t('datasets.quickView.active')
+      : t('datasets.quickView.inactive'),
+    hasDot: true,
+  };
+};
+</script>
diff --git a/databrowser/src/components/quickview/QuickViewTextInfoCard.vue b/databrowser/src/components/quickview/QuickViewTextInfoCard.vue
new file mode 100644
index 000000000..6a1b9bd11
--- /dev/null
+++ b/databrowser/src/components/quickview/QuickViewTextInfoCard.vue
@@ -0,0 +1,50 @@
+<template>
+  <QuickViewCardOverview
+    :title="t('datasets.quickView.textInformation')"
+    :sections="textInformationSections"
+  />
+</template>
+<script setup lang="ts">
+import { computed, defineProps, withDefaults } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { getTextValue } from './QuickViewUtils';
+
+import QuickViewCardOverview from './QuickViewCardOverview.vue';
+
+const { t } = useI18n();
+
+const props = withDefaults(
+  defineProps<{
+    header?: string;
+    subHeader?: string;
+    introText?: string;
+  }>(),
+  {
+    header: '',
+    subHeader: '',
+    introText: '',
+  }
+);
+
+const textInformationSections = computed(() => {
+  return [
+    {
+      content: [
+        {
+          title: 'Header',
+          text: getTextValue(props.header),
+        },
+        {
+          title: 'Subheader',
+          text: getTextValue(props.subHeader),
+        },
+        {
+          title: 'Introtext',
+          text: getTextValue(props.introText),
+        },
+      ],
+    },
+  ];
+});
+</script>
diff --git a/databrowser/src/components/quickview/QuickViewUtils.ts b/databrowser/src/components/quickview/QuickViewUtils.ts
new file mode 100644
index 000000000..84541721d
--- /dev/null
+++ b/databrowser/src/components/quickview/QuickViewUtils.ts
@@ -0,0 +1,11 @@
+export const getValueOfLocale = (currentLocale: string, obj: any) => {
+  // Note: function can be moved as utils
+  const fallbackLocale = 'en';
+
+  return obj?.[currentLocale] || obj?.[fallbackLocale];
+};
+
+export const getTextValue = (value?: String) => {
+  // Note: function can be moved as utils
+  return value ?? '/';
+};
diff --git a/databrowser/src/components/quickview/QuickViewWebcamsView.vue b/databrowser/src/components/quickview/QuickViewWebcamsView.vue
new file mode 100644
index 000000000..d1b0c7079
--- /dev/null
+++ b/databrowser/src/components/quickview/QuickViewWebcamsView.vue
@@ -0,0 +1,52 @@
+<template>
+  <QuickViewCardOverview
+    :title="t('datasets.quickView.webcamDetails')"
+    :sections="[]"
+    content-has-no-padding
+  >
+    <template #content>
+      <QuickViewCardOverviewGallery :media-items="webcamsMediaItems" />
+    </template>
+  </QuickViewCardOverview>
+</template>
+<script setup lang="ts">
+import { computed, defineProps, withDefaults } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import QuickViewCardOverview from './QuickViewCardOverview.vue';
+import QuickViewCardOverviewGallery from './QuickViewCardOverviewGallery.vue';
+
+const { t } = useI18n();
+
+const props = withDefaults(
+  defineProps<{
+    webcamsMediaItems: any;
+  }>(),
+  {
+    webcamsMediaItems: () => {},
+  }
+);
+
+const webcamsMediaItems = computed(() => {
+  return props.webcamsMediaItems || getPlaceholderMediaItems(); // FIXME: the placeholder media items have been introduced only as an example of the component functionality. The should be removed in the final version
+});
+
+const getPlaceholderMediaItems = () => {
+  const items = [];
+
+  for (let index = 0; index < 5; index++) {
+    items.push({
+      type: 'IMAGE',
+      url: `https://picsum.photos/1280/720`,
+      name: `Immagine di test ${index}`,
+    });
+  }
+  items.push({
+    type: 'VIDEO',
+    url: `http://techslides.com/demos/sample-videos/small.mp4`,
+    name: `Video di test`,
+  });
+
+  return items;
+};
+</script>
diff --git a/databrowser/src/config/tourism/odhActivityPoi/odhActivityPoi.quickView.ts b/databrowser/src/config/tourism/odhActivityPoi/odhActivityPoi.quickView.ts
index b87d538c7..e7e7cf952 100644
--- a/databrowser/src/config/tourism/odhActivityPoi/odhActivityPoi.quickView.ts
+++ b/databrowser/src/config/tourism/odhActivityPoi/odhActivityPoi.quickView.ts
@@ -1,29 +1,64 @@
 import {
   QuickViewConfig,
-  QuickViewSectionType,
+  QuickViewSectionComponent,
 } from '../../../domain/datasetConfig/types';
 
 export const odhActivityPoiQuickView: QuickViewConfig = {
-  showTopGallery: true,
+  topGallery: {
+    isVisible: true,
+    fields: {
+      gallery: 'ImageGallery',
+    },
+  },
   elements: [
     {
-      sectionType: QuickViewSectionType.INFO,
+      component: QuickViewSectionComponent.INFO,
+      fields: {
+        header: 'Detail.{language}.Header',
+        subHeader: 'Detail.{language}.SubHeader',
+        introText: 'Detail.{language}.IntroText',
+      },
     },
     {
-      sectionType: QuickViewSectionType.CONTACTS,
+      component: QuickViewSectionComponent.CONTACTS,
+      fields: {
+        companyName: 'ContactInfos.{language}.CompanyName',
+        givenName: 'ContactInfos.{language}.Givenname',
+        surname: 'ContactInfos.{language}.Surname',
+        address: 'ContactInfos.{language}.Address',
+        city: 'ContactInfos.{language}.City',
+        zipCode: 'ContactInfos.{language}.ZipCode',
+        countryName: 'ContactInfos.{language}.CountryName',
+        email: 'ContactInfos.{language}.Email',
+        phoneNumber: 'ContactInfos.{language}.Phonenumber',
+        url: 'ContactInfos.{language}.Url',
+      },
     },
     {
-      sectionType: QuickViewSectionType.WEBCAMS,
+      component: QuickViewSectionComponent.WEBCAMS,
+      fields: {
+        webcamsMediaItems: 'Webcam',
+      },
     },
     {
-      sectionType: QuickViewSectionType.MAP,
-      // NOTE: here can be added eg. custom default zoom etc.
+      component: QuickViewSectionComponent.MAP,
+      fields: {
+        gpsInfo: 'GpsInfo',
+      },
     },
     {
-      sectionType: QuickViewSectionType.OPENING_HORUS,
+      component: QuickViewSectionComponent.OPENING_HORUS,
+      fields: {
+        scheduleData: 'OperationSchedule',
+      },
     },
     {
-      sectionType: QuickViewSectionType.RECORD_INFO,
+      component: QuickViewSectionComponent.RECORD_INFO,
+      fields: {
+        lastUpdate: '_Meta.LastUpdate',
+        active: 'Active',
+        odhActive: 'OdhActive',
+      },
     },
   ],
 };
diff --git a/databrowser/src/domain/datasetConfig/types.ts b/databrowser/src/domain/datasetConfig/types.ts
index aa82321e7..d21d518a3 100644
--- a/databrowser/src/domain/datasetConfig/types.ts
+++ b/databrowser/src/domain/datasetConfig/types.ts
@@ -31,16 +31,17 @@ export interface DetailElements {
 }
 
 export interface QuickViewElements {
-  sectionType: QuickViewSectionType;
+  component: QuickViewSectionComponent;
+  fields: Record<string, string>;
 }
 
-export enum QuickViewSectionType {
-  INFO,
-  CONTACTS,
-  WEBCAMS,
-  MAP,
-  OPENING_HORUS,
-  RECORD_INFO,
+export enum QuickViewSectionComponent {
+  INFO = 'QuickViewTextInfoCard',
+  CONTACTS = 'QuickViewContactsCard',
+  WEBCAMS = 'QuickViewWebcamsView',
+  MAP = 'QuickViewMapView',
+  OPENING_HORUS = 'QuickViewOpeningHoursView',
+  RECORD_INFO = 'QuickViewRecordInfoView',
 }
 
 export interface EditElements {
@@ -86,9 +87,14 @@ export interface DetailViewElements {
   elements: DetailElements[];
 }
 export interface QuickViewPageConfig {
-  showTopGallery: Boolean;
+  topGallery: QuickViewTopGallery;
   elements: QuickViewElements[];
 }
+
+export interface QuickViewTopGallery {
+  isVisible: boolean;
+  fields: Record<string, string>;
+}
 export interface EditViewElements {
   elements: EditElements[];
 }
diff --git a/databrowser/src/domain/datasets/quickView/QuickView.vue b/databrowser/src/domain/datasets/quickView/QuickView.vue
index eaf854e09..e821c4392 100644
--- a/databrowser/src/domain/datasets/quickView/QuickView.vue
+++ b/databrowser/src/domain/datasets/quickView/QuickView.vue
@@ -19,7 +19,7 @@
       </div>
       <div
         v-if="
-          odhActivityPoiConfig.views?.quick?.showTopGallery &&
+          odhActivityPoiConfig.views?.quick?.topGallery.isVisible &&
           imageGallery.length <= 1 &&
           mainImage
         "
@@ -44,72 +44,88 @@
 
     <QuickViewFullscreenGallery
       v-if="
-        odhActivityPoiConfig.views?.quick?.showTopGallery &&
+        odhActivityPoiConfig.views?.quick?.topGallery.isVisible &&
         imageGallery.length > 1
       "
       :images="imageGallery"
     />
 
     <PageContent>
-      <div class="grid gap-8 mt-4 md:grid-cols-2">
+      <div class="grid-ct">
+        <!--<div
+          v-for="(element, index) in odhActivityPoiConfig.views?.quick
+            ?.elements"
+          :key="index"
+        >
+          <ComponentRenderer
+            :tag-name="element.component"
+            :fields="element.fields"
+          />
+        </div>-->
         <div
           v-for="(element, index) in odhActivityPoiConfig.views?.quick
             ?.elements"
           :key="index"
           class="element-ct"
         >
-          <QuickViewCardOverview
-            v-if="element.sectionType === QuickViewSectionType.INFO"
-            :title="t('datasets.quickView.textInformation')"
-            :sections="textInformationSections"
+          <QuickViewTextInfoCard
+            v-if="element.component === QuickViewSectionComponent.INFO"
+            :header="getValueOfLocale(currentLocale, data.Detail).Header"
+            :sub-header="getValueOfLocale(currentLocale, data.Detail).SubHeader"
+            :intro-text="getValueOfLocale(currentLocale, data.Detail).IntroText"
+          />
+          <QuickViewContactsCard
+            v-else-if="element.component === QuickViewSectionComponent.CONTACTS"
+            :company-name="
+              getValueOfLocale(currentLocale, data.ContactInfos).CompanyName
+            "
+            :given-name="
+              getValueOfLocale(currentLocale, data.ContactInfos).Givenname
+            "
+            :surname="
+              getValueOfLocale(currentLocale, data.ContactInfos).Surname
+            "
+            :address="
+              getValueOfLocale(currentLocale, data.ContactInfos).Address
+            "
+            :city="getValueOfLocale(currentLocale, data.ContactInfos).City"
+            :zip-code="
+              getValueOfLocale(currentLocale, data.ContactInfos).ZipCode
+            "
+            :country-name="
+              getValueOfLocale(currentLocale, data.ContactInfos).CountryName
+            "
+            :email="getValueOfLocale(currentLocale, data.ContactInfos).Email"
+            :phone-number="
+              getValueOfLocale(currentLocale, data.ContactInfos).Phonenumber
+            "
+            :url="getValueOfLocale(currentLocale, data.ContactInfos).Url"
           />
-          <QuickViewCardOverview
-            v-else-if="element.sectionType === QuickViewSectionType.CONTACTS"
-            :title="t('datasets.quickView.contact')"
-            :sections="contactSections"
+          <QuickViewWebcamsView
+            v-else-if="element.component === QuickViewSectionComponent.WEBCAMS"
+            :webcams-media-items="data.Webcam"
           />
-
-          <QuickViewCardOverview
-            v-else-if="element.sectionType === QuickViewSectionType.WEBCAMS"
-            :title="t('datasets.quickView.webcamDetails')"
-            :content-has-no-padding="true"
-            @cta-click="openMapFullscreen()"
-          >
-            <template #content>
-              <QuickViewCardOverviewGallery :media-items="mediaItems" />
-            </template>
-          </QuickViewCardOverview>
-          <QuickViewCardOverview
-            v-else-if="element.sectionType === QuickViewSectionType.MAP"
-            :title="t('datasets.quickView.locationOnMap')"
-            cta-icon="IconExpand"
-            :content-has-no-padding="true"
-            @cta-click="openMapFullscreen()"
-          >
-            <template #content>
-              <MapBase
-                ref="mapComponent"
-                :key="map.center.length"
-                :center="map.center"
-                :markers="map.markers"
-              />
-            </template>
-          </QuickViewCardOverview>
-          <QuickViewCardOverview
+          <QuickViewMapView
+            v-else-if="element.component === QuickViewSectionComponent.MAP"
+            :gps-info="data.GpsInfo"
+          />
+          <QuickViewOpeningHoursView
             v-else-if="
-              element.sectionType === QuickViewSectionType.OPENING_HORUS &&
-              operationScheduleSections.length
+              element.component === QuickViewSectionComponent.OPENING_HORUS
             "
-            :title="t('datasets.quickView.openingHours')"
-            :sections="operationScheduleSections"
+            :schedule-data="data.OperationSchedule"
           />
-          <QuickViewCardOverview
-            v-else-if="element.sectionType === QuickViewSectionType.RECORD_INFO"
-            :title="t('datasets.quickView.recordInformation')"
-            :sections="recordInformationSections"
+          <QuickViewRecordInfoView
+            v-else-if="
+              element.component === QuickViewSectionComponent.RECORD_INFO
+            "
+            :last-update="data._Meta?.LastUpdate"
+            :active="data.Active"
+            :odh-active="data.OdhActive"
           />
         </div>
       </div>
+      <div class="clear" />
     </PageContent>
   </template>
 </template>
@@ -120,28 +136,33 @@ import { useI18n } from 'vue-i18n';
 import { useApiReadForCurrentDataset } from '../../api';
 
 import { odhActivityPoiConfig } from '../../../config/tourism/odhActivityPoi/odhActivityPoi.config'; // TODO: check if it's the right way to import the file
-import { QuickViewSectionType } from '../../../domain/datasetConfig/types';
+import { QuickViewSectionComponent } from '../../../domain/datasetConfig/types';
 
 import PageContent from '../../../components/content/PageContent.vue';
 import TagCustom from '../../../components/tag/TagCustom.vue';
-import MapBase from '../../../components/map/MapBase.vue';
-import QuickViewCardOverview from '../../../components/quickview/QuickViewCardOverview.vue';
-import QuickViewCardOverviewGallery from '../../../components/quickview/QuickViewCardOverviewGallery.vue';
 import QuickViewFullscreenGallery from '../../../components/quickview/QuickViewFullscreenGallery.vue';
 
+import { getValueOfLocale } from '../../../components/quickview/QuickViewUtils';
+
 import ShowApiError from '../../api/components/ShowApiError.vue';
+import QuickViewTextInfoCard from '../../../components/quickview/QuickViewTextInfoCard.vue';
+import QuickViewContactsCard from '../../../components/quickview/QuickViewContactsCard.vue';
+import QuickViewWebcamsView from '../../../components/quickview/QuickViewWebcamsView.vue';
+import QuickViewMapView from '../../../components/quickview/QuickViewMapView.vue';
+import QuickViewOpeningHoursView from '../../../components/quickview/QuickViewOpeningHoursView.vue';
+import QuickViewRecordInfoView from '../../../components/quickview/QuickViewRecordInfoView.vue';
+
+// import ComponentRenderer from '../../../components/componentRenderer/ComponentRenderer.vue';
 
 const { isError, isSuccess, error, data } = useApiReadForCurrentDataset();
 
 let forcePlaceholderImage = ref(false);
 
-const mapComponent = ref(null);
-
 const { t, locale } = useI18n();
 const currentLocale = locale.value;
 
 const title = computed(() => {
-  return getValueOfLocale(data.value.Detail)?.Title || '/';
+  return getValueOfLocale(currentLocale, data.value.Detail)?.Title || '/';
 });
 
 const id = computed(() => {
@@ -149,20 +170,20 @@ const id = computed(() => {
 });
 
 const hasImage = computed(() => {
-  return data.value.ImageGallery?.[0]?.ImageUrl?.length > 0;
+  return imageGallery.value?.ImageUrl?.length > 0;
 });
 
 const mainImage = computed(() => {
-  if (!data.value.ImageGallery) {
+  if (!imageGallery.value) {
     return null;
   }
 
-  const firstImage = data.value.ImageGallery?.[0];
+  const firstImage = imageGallery.value?.[0];
 
   return firstImage?.ImageUrl && !forcePlaceholderImage.value
     ? {
         url: firstImage.ImageUrl,
-        desc: getValueOfLocale(firstImage.ImageDesc),
+        desc: getValueOfLocale(currentLocale, firstImage.ImageDesc),
       }
     : {
         url: 'https://via.placeholder.com/700x350?text=Missing+image',
@@ -171,318 +192,51 @@ const mainImage = computed(() => {
 });
 
 const imageGallery = computed(() => {
-  return data.value.ImageGallery || [];
-});
-
-const mediaItems = computed(() => {
-  // FIXME: check Webcam returning values
-  return data.value?.Webcam || getPlaceholderMediaItems();
+  return (
+    data.value[odhActivityPoiConfig.views?.quick?.topGallery?.fields.gallery] ||
+    []
+  );
 });
 
 const logoUrl = computed(() => {
-  return getValueOfLocale(data.value.ContactInfos)?.LogoUrl;
+  return getValueOfLocale(currentLocale, data.value.ContactInfos)?.LogoUrl;
 });
 
-const getPlaceholderMediaItems = () => {
-  const items = [];
-
-  for (let index = 0; index < 5; index++) {
-    items.push({
-      type: 'IMAGE',
-      url: `https://picsum.photos/1280/720`,
-      name: `Immagine di test ${index}`,
-    });
-  }
-  items.push({
-    type: 'VIDEO',
-    url: `http://techslides.com/demos/sample-videos/small.mp4`,
-    name: `Video di test`,
-  });
-
-  return items;
+const onMainImageError = () => {
+  forcePlaceholderImage.value = true;
 };
+</script>
 
-const textInformationSections = computed(() => {
-  const details = getValueOfLocale(data.value.Detail);
-  return [
-    {
-      content: [
-        {
-          title: 'Header',
-          text: getTextValue(details?.Header),
-        },
-        {
-          title: 'Subheader',
-          text: getTextValue(details?.SubHeader),
-        },
-        {
-          title: 'Introtext',
-          text: getTextValue(details?.IntroText),
-        },
-      ],
-    },
-  ];
-});
-
-const contactSections = computed(() => {
-  const details = getValueOfLocale(data.value.ContactInfos);
-  return [
-    {
-      icon: 'IconDocument',
-      content: [
-        {
-          title: t('datasets.quickView.nameCompanyName'),
-          text: getTextValue(details?.CompanyName),
-        },
-        {
-          title: t('datasets.quickView.firstName'),
-          text: getTextValue(details?.Givenname),
-        },
-        {
-          title: t('datasets.quickView.surname'),
-          text: getTextValue(details?.Surname),
-        },
-      ],
-    },
-    {
-      icon: 'IconBuilding',
-      content: [
-        {
-          title: t('datasets.quickView.streetAndNumber'),
-          text: getTextValue(details?.Address),
-        },
-        {
-          title: t('datasets.quickView.city'),
-          text: getTextValue(details?.City),
-        },
-        {
-          title: t('datasets.quickView.zip'),
-          text: getTextValue(details?.ZipCode),
-        },
-        {
-          title: t('datasets.quickView.country'),
-          text: getTextValue(details?.CountryName),
-        },
-      ],
-    },
-    {
-      icon: 'IconPhonebook',
-      content: [
-        {
-          title: t('datasets.quickView.email'),
-          text: getTextValue(details?.Email),
-        },
-        {
-          title: t('datasets.quickView.phoneNumber'),
-          text: getTextValue(details?.Phonenumber),
-        },
-        {
-          title: t('datasets.quickView.webUrl'),
-          text: getTextValue(details?.Url),
-        },
-      ],
-    },
-  ];
-});
-
-const recordInformationSections = computed(() => {
-  const lastUpdate = data?.value?._Meta?.LastUpdate;
-
-  if (!lastUpdate) {
-    return [];
-  }
-
-  const lastUpdateDate = new Date(lastUpdate).toISOString();
-  const [year, month, day] = lastUpdateDate.split('T')[0].split('-');
-
-  const isSourceActive = data.value.Active;
-  const isODHActive = data.value.OdhActive;
+<style scoped>
+.clear {
+  @apply mb-4 clear-both;
+}
 
-  // FIXME: change based on dataset
-  const isSuedtirolInfoActive = false;
-  return [
-    {
-      icon: 'IconEditFilled',
-      content: [
-        {
-          title: t('datasets.quickView.lastChanged'),
-          text: `${day}.${month}.${year}`,
-        },
-      ],
-    },
-    {
-      icon: 'IconServer',
-      content: [
-        {
-          title: t('datasets.quickView.activeOnSource'),
-          tag: getTagActiveInfoObject({
-            active: isSourceActive,
-          }),
-        },
-        {
-          title: t('datasets.quickView.activeOnODH'),
-          tag: getTagActiveInfoObject({
-            active: isODHActive,
-          }),
-        },
-        {
-          title: t('datasets.quickView.suedtirolInfoActive'),
-          tag: getTagActiveInfoObject({
-            active: isSuedtirolInfoActive,
-          }),
-        },
-      ],
-    },
-  ];
-});
+.grid-ct .element-ct {
+  @apply mt-6;
 
-const map = computed(() => {
-  if (!data.value.GpsInfo) {
-    return {
-      center: [],
-      markers: [],
-    };
-  }
+  width: calc(50% - 15px);
+}
 
-  const { Longitude, Latitude } = data.value.GpsInfo[0];
+.grid-ct .element-ct:nth-child(odd) {
+  @apply float-left;
+}
 
-  const mapObj = {
-    center: [Longitude, Latitude],
-    markers: [
-      {
-        position: {
-          lat: Latitude,
-          lng: Longitude,
-        },
-      },
-    ],
-  };
+.grid-ct .element-ct:nth-child(even) {
+  @apply float-right;
 
-  return mapObj;
-});
+  margin-left: 30px;
+}
 
-const operationScheduleSections = computed(() => {
-  if (!operationSchedule.value) {
-    return [];
-  }
+@media screen and (max-width: 980px) {
+  .grid-ct .element-ct {
+    @apply w-auto;
 
-  const sections = [];
-
-  for (const schedule of operationSchedule.value) {
-    sections.push({
-      icon: 'IconClock',
-      content: [
-        {
-          title: getTextValue(getValueOfLocale(schedule.OperationscheduleName)),
-          text: schedule.TimePeriodRange,
-        },
-      ],
-      fullwidthContent: [
-        { operationScheduleTime: schedule.OperationScheduleTime },
-      ],
-    });
+    float: none !important;
   }
 
-  return sections;
-});
-
-const operationSchedule = computed(() => {
-  let foundHours = false;
-
-  const timing = data?.value?.OperationSchedule
-    ? [...data.value.OperationSchedule]
-    : [];
-
-  const days = [
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday',
-    'Sunday',
-  ];
-
-  const parsedData = [];
-  for (const time of timing) {
-    const operationScheduleTime = [];
-
-    for (const schedule of time?.OperationScheduleTime || []) {
-      foundHours = true;
-      const daysHours = [];
-      const [startHour, startMinute] = schedule.Start.split(':');
-      const [endHour, endMinute] = schedule.End.split(':');
-      for (const d of days) {
-        daysHours.push({
-          Start: `${startHour}:${startMinute}`,
-          End: `${endHour}:${endMinute}`,
-          State: schedule.State,
-          Timecode: schedule.Timecode,
-          Day: d.slice(0, 3).toUpperCase(),
-          Open: schedule[d],
-        });
-      }
-      operationScheduleTime.push(daysHours);
-    }
-    time.OperationScheduleTime = operationScheduleTime;
-    parsedData.push({
-      ...time,
-      OperationScheduleTime: operationScheduleTime,
-      TimePeriodRange: getTimePeriodRange(time.Start, time.Stop),
-    });
+  .grid-ct .element-ct:nth-child(even) {
+    @apply ml-0;
   }
-
-  return foundHours ? parsedData : null;
-});
-
-const getTextValue = (value) => {
-  return value ?? '/';
-};
-
-const getValueOfLocale = (obj) => {
-  const fallbackLocale = 'en';
-
-  return obj?.[currentLocale] || obj?.[fallbackLocale];
-};
-
-const openMapFullscreen = () => {
-  const fullscreenButton = document.querySelector('.ol-full-screen > button');
-
-  fullscreenButton.click();
-};
-
-const getTimePeriodRange = (start, end) => {
-  const [yearStart, , dayStart] = start.split('T')[0].split('-');
-  const [yearEnd, , dayEnd] = end.split('T')[0].split('-');
-
-  const dateLocale = 'en-US';
-  const dateOptions = {
-    month: 'long',
-  };
-
-  const monthStart = new Date(start).toLocaleDateString(
-    dateLocale,
-    dateOptions
-  );
-  const monthEnd = new Date(end).toLocaleDateString(dateLocale, dateOptions);
-
-  return `${parseInt(dayStart)}. ${monthStart}${
-    yearStart !== yearEnd ? ' ' + yearStart : ''
-  } - ${parseInt(dayEnd)}. ${monthEnd} ${yearEnd}`;
-};
-
-const getTagActiveInfoObject = ({ active }) => {
-  return {
-    size: 'md',
-    type: active ? 'blue' : 'red',
-    text: active
-      ? t('datasets.quickView.active')
-      : t('datasets.quickView.inactive'),
-    hasDot: true,
-  };
-};
-
-const onMainImageError = () => {
-  forcePlaceholderImage.value = true;
-};
-</script>
+}
+</style>