feat: refactored QuickView using ComponentRenderer and CellComponent …

…standards

databrowser/src/components/quickview/QuickViewMapView.vue

@@ -45,7 +45,7 @@ const openMapFullscreen = () => {
 };
 
 const map = computed(() => {
-  if (!props.gpsInfo) {
+  if (!props.gpsInfo.length) {
     return {
       center: [],
       markers: [],

databrowser/src/config/tourism/odhActivityPoi/odhActivityPoi.quickView.ts

@@ -1,7 +1,5 @@
-import {
-  QuickViewConfig,
-  QuickViewSectionComponent,
-} from '../../../domain/datasetConfig/types';
+import { QuickViewConfig } from '../../../domain/datasetConfig/types';
+import { CellComponent } from '../../../domain/cellComponents/types';
 
 export const odhActivityPoiQuickView: QuickViewConfig = {
   topGallery: {
@@ -12,15 +10,15 @@ export const odhActivityPoiQuickView: QuickViewConfig = {
   },
   elements: [
     {
-      component: QuickViewSectionComponent.INFO,
+      component: CellComponent.QuickViewTextInfoCard,
       fields: {
         header: 'Detail.{language}.Header',
         subHeader: 'Detail.{language}.SubHeader',
         introText: 'Detail.{language}.IntroText',
       },
     },
     {
-      component: QuickViewSectionComponent.CONTACTS,
+      component: CellComponent.QuickViewContactsCard,
       fields: {
         companyName: 'ContactInfos.{language}.CompanyName',
         givenName: 'ContactInfos.{language}.Givenname',
@@ -35,25 +33,25 @@ export const odhActivityPoiQuickView: QuickViewConfig = {
       },
     },
     {
-      component: QuickViewSectionComponent.WEBCAMS,
+      component: CellComponent.QuickViewWebcamsView,
       fields: {
         webcamsMediaItems: 'Webcam',
       },
     },
     {
-      component: QuickViewSectionComponent.MAP,
+      component: CellComponent.QuickViewMapView,
       fields: {
         gpsInfo: 'GpsInfo',
       },
     },
     {
-      component: QuickViewSectionComponent.OPENING_HORUS,
+      component: CellComponent.QuickViewOpeningHoursView,
       fields: {
         scheduleData: 'OperationSchedule',
       },
     },
     {
-      component: QuickViewSectionComponent.RECORD_INFO,
+      component: CellComponent.QuickViewRecordInfoView,
       fields: {
         lastUpdate: '_Meta.LastUpdate',
         active: 'Active',

databrowser/src/domain/cellComponents/plugins/registerCellComponents.ts

@@ -31,6 +31,14 @@ import TypeBasedCell from '../components/cells/typeBasedCell/TypeBasedCell.vue';
 import WebcamCell from '../components/cells/webcamCell/WebcamCell.vue';
 import FixedValue from '../components/filters/fixedValue/FixedValue.vue';
 
+// NOTE: this components do not belong to table components; it's advised to refactor this table in the future.
+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 { CellComponent, FilterComponent } from '../types';
 
 export default {
@@ -68,6 +76,19 @@ export default {
     app.component(CellComponent.TypeBasedCell, TypeBasedCell);
     app.component(CellComponent.WebcamCell, WebcamCell);
 
+    app.component(CellComponent.QuickViewTextInfoCard, QuickViewTextInfoCard);
+    app.component(CellComponent.QuickViewContactsCard, QuickViewContactsCard);
+    app.component(CellComponent.QuickViewWebcamsView, QuickViewWebcamsView);
+    app.component(CellComponent.QuickViewMapView, QuickViewMapView);
+    app.component(
+      CellComponent.QuickViewOpeningHoursView,
+      QuickViewOpeningHoursView
+    );
+    app.component(
+      CellComponent.QuickViewRecordInfoView,
+      QuickViewRecordInfoView
+    );
+
     app.component(FilterComponent.FixedValue, FixedValue);
   },
 };

databrowser/src/domain/cellComponents/types.ts

@@ -28,6 +28,13 @@ export enum CellComponent {
   ToggleCell = 'ToggleCell',
   TypeBasedCell = 'TypeBasedCell',
   WebcamCell = 'WebcamCell',
+  WebcamGalleryCell = 'WebcamGalleryCell',
+  QuickViewTextInfoCard = 'QuickViewTextInfoCard',
+  QuickViewContactsCard = 'WebcamGalleryCell',
+  QuickViewWebcamsView = 'QuickViewWebcamsView',
+  QuickViewMapView = 'QuickViewMapView',
+  QuickViewOpeningHoursView = 'QuickViewOpeningHoursView',
+  QuickViewRecordInfoView = 'QuickViewRecordInfoView',
 }
 
 export enum FilterComponent {

databrowser/src/domain/datasetConfig/types.ts

@@ -53,17 +53,9 @@ export interface DetailElements {
 }
 
 export interface QuickViewElements {
-  component: QuickViewSectionComponent;
+  component: string;
   fields: Record<string, string>;
-}
-
-export enum QuickViewSectionComponent {
-  INFO = 'QuickViewTextInfoCard',
-  CONTACTS = 'QuickViewContactsCard',
-  WEBCAMS = 'QuickViewWebcamsView',
-  MAP = 'QuickViewMapView',
-  OPENING_HORUS = 'QuickViewOpeningHoursView',
-  RECORD_INFO = 'QuickViewRecordInfoView',
+  params?: Record<string, string>;
 }
 
 export interface EditElements {

databrowser/src/domain/datasets/quickView/QuickView.vue

@@ -50,77 +50,17 @@
 
     <PageContent>
       <div class="grid-ct">
-        <!--<div
+        <div
           v-for="(element, index) in odhActivityPoiConfig.views?.quick
             ?.elements"
           :key="index"
+          class="element-ct"
         >
           <ComponentRenderer
             :tag-name="element.component"
+            :attributes="mapWithIndex(data, element.fields, element.params)"
             :fields="element.fields"
           />
-        </div>-->
-        <div
-          v-for="(element, index) in odhActivityPoiConfig.views?.quick
-            ?.elements"
-          :key="index"
-          class="element-ct"
-        >
-          <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"
-          />
-          <QuickViewWebcamsView
-            v-else-if="element.component === QuickViewSectionComponent.WEBCAMS"
-            :webcams-media-items="data.Webcam"
-          />
-          <QuickViewMapView
-            v-else-if="element.component === QuickViewSectionComponent.MAP"
-            :gps-info="data.GpsInfo"
-          />
-          <QuickViewOpeningHoursView
-            v-else-if="
-              element.component === QuickViewSectionComponent.OPENING_HORUS
-            "
-            :schedule-data="data.OperationSchedule"
-          />
-          <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" />
@@ -135,23 +75,16 @@ import { computed, ref } from 'vue';
 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 { QuickViewSectionComponent } from '../../../domain/datasetConfig/types';
+import { odhActivityPoiConfig } from '../../../config/tourism/odhActivityPoi/odhActivityPoi.config';
 
 import PageContent from '../../../components/content/PageContent.vue';
 import TagCustom from '../../../components/tag/TagCustom.vue';
 import QuickViewFullscreenGallery from '../../../components/quickview/QuickViewFullscreenGallery.vue';
 
 import { getValueOfLocale } from '../../../components/quickview/QuickViewUtils';
 
-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';
+import ComponentRenderer from '../../../components/componentRenderer/ComponentRenderer.vue';
+import { usePropertyMapping } from '../../api';
 
 const { isError, isSuccess, error, data } = useApiReadForCurrentDataset();
 
@@ -160,6 +93,8 @@ let forcePlaceholderImage = ref(false);
 const { t, locale } = useI18n();
 const currentLocale = locale.value;
 
+const { mapWithIndex } = usePropertyMapping();
+
 const title = computed(() => {
   return getValueOfLocale(currentLocale, data.value.Detail)?.Title || '/';
 });
@@ -185,7 +120,7 @@ const mainImage = computed(() => {
         desc: getValueOfLocale(currentLocale, firstImage.ImageDesc),
       }
     : {
-        url: 'https://via.placeholder.com/700x350?text=Missing+image',
+        url: 'https://via.placeholder.com/700x350?text=Missing+image', // NOTE: this is a demo image to preview the gallery functionality on datasets without a gallery. It should be removed for the final release.
         desc: 'Placeholder image',
       };
 });