feat: refactored QuickView in minor components to support setup throu…

…gh config file

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;
 }>();

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>

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>

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>

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>