Distribution page

opendata.swiss/ui/app/app.vue

@@ -35,10 +35,24 @@ import OdsBottomFooter from '@/components/footer/OdsBottomFooter.vue'
 import OdsFooter from './components/footer/OdsFooter.vue';
 import type { OdsNavTabItem } from './components/headers/model/ods-nav-tab-item';
 import { APP_NAVIGATION_ITEMS } from './constants/navigation-items';
+import { useI18n } from 'vue-i18n';
+import { useLocale as piveauLocale } from '@piveau/sdk-vue' ;
+
 
 const navigationItems = ref<OdsNavTabItem[]>(APP_NAVIGATION_ITEMS);
 const isMobileMenuOpen = ref(false);
 
+const { locale } = useI18n();
+
+const { setLocale, currentLocale} = piveauLocale();
+
+watch(locale, (newLocale) => {
+  if (newLocale !== (currentLocale as Ref<string>).value) {
+    setLocale(newLocale) // set the piveau locale
+  }
+}, { immediate: true }
+)
+
 useHead({
   bodyAttrs: {
     class: 'body--ods-brand'

opendata.swiss/ui/app/components/LanguageSelector.vue

@@ -24,13 +24,10 @@
 import Select from './OdsSelect.vue'
 import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useLocale as piveauLocale } from '@piveau/sdk-vue' ;
 
 const switchLocalePath = useSwitchLocalePath()
 const { locale, locales } = useI18n()
 
-const { setLocale, currentLocale } = piveauLocale();
-
 // Props
 defineProps({
   type: {
@@ -48,21 +45,11 @@ const selectedLocale = ref(locale.value)
 // Handle language switching
 watch(selectedLocale, (newLocale) => {
   if (newLocale !== locale.value) {
-    setLocale(newLocale) // set the piveau locale
     const newPath = switchLocalePath(newLocale)
     navigateTo(newPath)
   }
 })
 
-onMounted(() => {
-  const appLocale = locale.value
-  const piveauLocale = (currentLocale as Ref<string>).value
-  if (appLocale !== piveauLocale) {
-    // this is needed to set the piveau locale on startup
-    setLocale(appLocale)
-  }
-})
-
 const { progress } = useLoadingIndicator()
 
 </script>

opendata.swiss/ui/app/components/OdsRelativeDateToggle.vue

@@ -0,0 +1,48 @@
+<template>
+  <NuxtTime
+        :datetime="props.date"
+        :locale="locale"
+        :relative="!showRaw"
+        :title="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
+        :aria-label="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
+        :hour="showRaw ? '2-digit' : undefined"
+        :minute="showRaw ? '2-digit' : undefined"
+        :second="showRaw ? '2-digit' : undefined"
+        :year="'numeric'"
+        :month="'2-digit'"
+        :day="'2-digit'"
+        class="date-toggle"
+        @click="toggle($event)"
+      />
+</template>
+
+
+<script setup lang="ts">
+
+import { useI18n } from 'vue-i18n'
+
+const { locale, t } = useI18n()
+const showRaw = ref(false)
+
+const props = defineProps({
+  date: {
+    type: Date,
+    required: true
+  }
+});
+
+function toggle(event: PointerEvent) {
+  event.preventDefault()
+  event.stopPropagation()
+  showRaw.value = !showRaw.value
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.date-toggle {
+  cursor: pointer;
+}
+
+</style>

opendata.swiss/ui/app/components/dataset-detail/OdsDatasetCatalogPanel.vue

@@ -1,121 +1,61 @@
 <template>
-  <div class="wrapper">
-  <div class="button-container">
-    <span>
- {{ t('message.dataset_detail.catalog') }}
-    </span>
-
-  <OdsButton
-    variant="link"
-    :title="showCatalogInfo ? t('message.dataset_detail.hide_catalog_entry') : t('message.dataset_detail.show_catalog_entry')"
-    :aria-label="showCatalogInfo ? t('message.dataset_detail.hide_catalog_entry') : t('message.dataset_detail.show_catalog_entry')"
-    size="sm"
-    icon-right
-    @click="showCatalogInfo = !showCatalogInfo"
-  >
-          {{ showCatalogInfo ? props.dataset.getOdsCatalogInfo.title : props.dataset.getOdsCatalogInfo.title }}
-
-          <template #icon>
-    <SvgIcon
-      icon="ChevronDown"
-      role="btn"
-      :class="{ 'rotated': showCatalogInfo }"
-    />
-          </template>
-
-  </OdsButton>
-</div>
-
-<div v-if="showCatalogInfo">
-  <p  class="meta-info">
+   <p class="meta-info">
       <span class="meta-info__item">{{ t('message.dataset_detail.catalog') }}</span>
-    <span
-      v-if="props.dataset.getOdsCatalogInfo.issued"
-      class="meta-info__item"
-      :title="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      :aria-label="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      @click="toggleRaw"
-    >
-      {{ t('message.dataset_detail.created_on') }}
-      <NuxtTime
-        :datetime="new Date(props.dataset.getOdsCatalogInfo.issued)"
-        :relative="!showRaw"
-        :locale="locale"
-      />
-    </span>
-    <span
-      v-if="props.dataset.getOdsCatalogInfo.modified"
-      class="meta-info__item"
-      :title="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      :aria-label="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      @click="toggleRaw"
-    >
-      {{ t('message.dataset_detail.modified_on') }}
-      <NuxtTime
-        :datetime="new Date(props.dataset.getOdsCatalogInfo.modified)"
-        :relative="!showRaw"
-        :locale="locale"
-      />
-    </span>
-  </p>
-  <p class="meta-info">
-          <span class="meta-info__item">{{ t('message.dataset_detail.this_dataset_record') }}</span>
+      <span class="meta-info__item">{{ props.dataset.catalog.title }}</span>
+   </p>
+    <p class="meta-info">
+      <span
+        v-if="props.dataset.catalog.issued"
+        class="meta-info__item"
+      >
+        {{ t('message.dataset_detail.created_on') }}
+        <OdsRelativeDateToggle :date="new Date(props.dataset.catalog.issued)" />
+      </span>
+      <span
+        v-if="props.dataset.catalog.modified"
+        class="meta-info__item"
+      >
+        {{ t('message.dataset_detail.modified_on') }}
+        <OdsRelativeDateToggle :date="new Date(props.dataset.catalog.modified)" />
+      </span>
+    </p>
+    <p class="meta-info" style="margin-top: 1rem">
+      <span class="meta-info__item">{{ t('message.dataset_detail.this_dataset_record') }}</span>
+    </p>
 
-    <span
-      v-if="props.dataset.getOdsCatalogInfo.record?.issued"
-      class="meta-info__item"
-      :title="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      :aria-label="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      @click="toggleRaw"
-    >
-      {{ t('message.dataset_detail.created_on') }}
-      <NuxtTime
-        :datetime="new Date(props.dataset.getOdsCatalogInfo.record.issued)"
-        :relative="!showRaw"
-        :locale="locale"
-      />
-    </span>
-    <span
-      v-if="props.dataset.getOdsCatalogInfo.record?.modified"
-      class="meta-info__item"
-      style="cursor: pointer"
-      :title="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      :aria-label="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      @click="toggleRaw"
-    >
-      {{ t('message.dataset_detail.modified_on') }}
-      <NuxtTime
-        :datetime="new Date(props.dataset.getOdsCatalogInfo.record.modified)"
-        :relative="!showRaw"
-        :locale="locale"
-      />
-    </span>
-  </p>
-  </div>
-  </div>
+    <p class="meta-info">
+      <span
+        v-if="props.dataset.catalog.record?.issued"
+        class="meta-info__item"
+      >
+        {{ t('message.dataset_detail.created_on') }}
+         <OdsRelativeDateToggle :date="new Date(props.dataset.catalog.record.issued)" />
+      </span>
+      <span
+        v-if="props.dataset.catalog.record?.modified"
+        class="meta-info__item"
+        style="cursor: pointer"
+      >
+        {{ t('message.dataset_detail.modified_on') }}
+        <OdsRelativeDateToggle :date="new Date(props.dataset.catalog.record.modified)" />
+      </span>
+    </p>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import type { Dataset } from '~/model/dataset'
-import OdsButton from '../OdsButton.vue'
-import SvgIcon from "~/components/SvgIcon.vue";
+import type { DcatApChV2DatasetAdapter } from './model/dcat-ap-ch-v2-dataset-adapter'
+import OdsRelativeDateToggle from '../OdsRelativeDateToggle.vue';
 
-const { locale, t } = useI18n()
+const { t } = useI18n()
 
-const showRaw = ref(false)
-const showCatalogInfo = ref(false)
 const props = defineProps({
   dataset: {
-    type: Object as () => Dataset,
+    type: Object as PropType<DcatApChV2DatasetAdapter>,
     required: true
   }
 })
 
-function toggleRaw() {
-  showRaw.value = !showRaw.value
-}
 </script>
 
 <style lang="scss" scoped>
@@ -126,15 +66,15 @@ function toggleRaw() {
   align-items: flex-start;
   justify-content: flex-start;
 }
+
 .button-container {
   display: flex;
   flex-direction: row;
   gap: 6px;
   align-items: center;
   justify-content: flex-start;
-
-
 }
+
 .rotated {
   transform: rotate(180deg);
   transition: transform 0.2s;

opendata.swiss/ui/app/components/dataset-detail/OdsDatasetMetaInfo.vue

@@ -1,79 +1,56 @@
 <template>
-      <span class="dataset-label">{{ t('message.dataset_detail.dataset') }}</span>
-
+  <span class="dataset-label">{{ t('message.dataset_detail.dataset') }}</span>
   <p class="meta-info">
     <span
-      v-if="props.dataset.getCreated"
+      v-if="props.dataset.releaseDate"
       class="meta-info__item"
-      style="cursor: pointer"
-      :title="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      :aria-label="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      @click="toggleRaw"
     >
-      {{ t('message.dataset_detail.published_on') }}
-      <NuxtTime
-        :datetime="new Date(props.dataset.getCreated)"
-        :locale="locale"
-        :relative="!showRaw"
-      />
+      {{ t('message.dataset_detail.released') }}
+      <OdsRelativeDateToggle :date="props.dataset.releaseDate" />
     </span>
     <span
-      v-if="props.dataset.getModified"
+      v-if="props.dataset.modificationDate"
       class="meta-info__item"
-      style="cursor: pointer"
-      :title="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      :aria-label="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      @click="toggleRaw"
     >
       {{ t('message.dataset_detail.modified_on') }}
-      <NuxtTime
-        :datetime="new Date(props.dataset.getModified)"
-        :locale="locale"
-        :relative="!showRaw"
-      />
+      <OdsRelativeDateToggle :date="props.dataset.modificationDate" />
     </span>
      <span
-      v-if="props.dataset.getOdsAccrualPeriodicity"
+      v-if="props.dataset.frequency"
       class="meta-info__item"
     >
-      {{ t('message.dataset_detail.accrual_periodicity') }} <a class="link--external" :href="props.dataset.getOdsAccrualPeriodicity.resource">{{ props.dataset.getOdsAccrualPeriodicity.label }}</a>
+      {{ t('message.dataset_detail.frequency') }}
+      <a class="link--external" target="_blank" :href="props.dataset.frequency.resource">{{ props.dataset.frequency.label }}</a>
     </span>
   </p>
-  <p class="meta-info catalog-meta-info">
-      <OdsDatasetCatalogPanel style="display: inline;" :dataset="props.dataset" />
-  </p>
-
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import type { Dataset } from '~/model/dataset'
-import OdsDatasetCatalogPanel from './OdsDatasetCatalogPanel.vue'
+import type { DcatApChV2DatasetAdapter } from './model/dcat-ap-ch-v2-dataset-adapter'
+import OdsRelativeDateToggle from '../OdsRelativeDateToggle.vue'
 
-const { locale, t } = useI18n()
+const { t } = useI18n()
 
-const showRaw = ref(false)
 
 const props = defineProps({
   dataset: {
-    type: Object as () => Dataset,
+    type: Object as PropType<DcatApChV2DatasetAdapter>,
     required: true
   }
 })
 
-function toggleRaw() {
-  showRaw.value = !showRaw.value
-}
 </script>
 
 <style lang="scss" scoped>
+
 .catalog-meta-info {
   margin-top: 0 !important;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
+
 .dataset-label {
   position: relative;
   background-color: #e6f0fa;