Merge pull request #12 from opendata-swiss/distribution_list

Show distributions as DownloadList

Author: BenjaminHofstetter

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

@@ -55,3 +55,9 @@ const classes = computed(() => {
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.card {
+  height: fit-content;
+}
+</style>

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

@@ -1,6 +1,7 @@
 <template>
+      <span class="dataset-label">{{ t('message.dataset_detail.dataset') }}</span>
+
   <p class="meta-info">
-    <span class="meta-info__item">{{ t('message.dataset_detail.dataset') }}</span>
     <span
       v-if="props.dataset.getCreated"
       class="meta-info__item"
@@ -74,4 +75,18 @@ function toggleRaw() {
   flex-direction: row;
   align-items: center;
 }
+.dataset-label {
+  position: relative;
+  background-color: #e6f0fa;
+  color: #1976d2;
+  padding: 2px 10px;
+  border-radius: 6px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  display: inline-block;
+  margin-right: 10px;
+  vertical-align: middle;
+  border: 1px solid #b3d4fc;
+}
+
 </style>

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

@@ -0,0 +1,57 @@
+<template>
+  <OdsDistributionListItem v-for="item in items" :key="item.id" :item="item" :dataset-id="props.dataset.getId" />
+</template>
+
+<script setup lang="ts">
+
+import { computed } from 'vue'
+
+import { useI18n } from 'vue-i18n'
+
+import type { Dataset } from '~/model/dataset';
+import OdsDistributionListItem, { type DistributionListItem } from './OdsDistributionListItem.vue';
+import type { PropertyTableEntryBase, PropertyTableEntryNode } from '@piveau/sdk-vue';
+
+const { locale } = useI18n()
+
+
+const props = defineProps({
+  dataset: {
+    type: Object as PropType<Dataset>,
+    required: true
+  }
+})
+
+const items = computed<DistributionListItem[]>(() => {
+  const distributions = props.dataset.getDistributions
+  return (distributions || []).map(d => {
+    const propertyTable = d.getPropertyTable ?? []
+    const byteSize = findByteSize(propertyTable)
+    return {
+    id: d.id ?? '',
+    title: d.title ?? '',
+    description: d.description ?? '',
+    format: d.format ?? '',
+    modified: d.modified ?? '',
+    created: d.created ?? '',
+    issued: d.issued ?? '',
+    accessUrls: d.accessUrls || [],
+    downloadUrls: d.downloadUrls || [],
+    languages: d.languages || [],
+    byteSize
+  }}).sort((a, b) => a.title.localeCompare(b.title, locale.value))
+})
+
+function findByteSize(table: PropertyTableEntryNode[] | undefined): string {
+  const byteSizeNode = table?.find(entry => entry.id === 'byteSize')
+  if(!byteSizeNode) {
+    return ''
+  }
+  const valueEntry = byteSizeNode.data?.find((entry: PropertyTableEntryBase) => entry.id === 'byteSize_value')
+  if(!valueEntry) {
+    return ''
+  }
+  return valueEntry.data as string
+}
+
+</script>

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

@@ -0,0 +1,76 @@
+<template>
+   <div class="download-item">
+    <!-- spacer if no download URLs -->
+    <SvgIcon v-if="!props.item.downloadUrls.length" title="No download available. This is probably an api. Check details" icon="Download" size="xl" class="download-item__icon disabled" />
+
+    <a v-for="downloadUrl in props.item.downloadUrls" :key="downloadUrl" :href="downloadUrl" target="_blank" rel="noopener" :title="'Download ' + props.item.title" class="download-item__link">
+      <SvgIcon icon="Download" size="xl" class="download-item__icon" />
+    </a>
+
+    <NuxtLink :to="`${props.datasetId}/distribution/${props.item.id}`" class="no-underline" style="flex-grow: 1;">
+      <h3 class="download-item__title">{{ props.item.title }}</h3>
+      <p class="download-item__description" />
+
+      <p class="meta-info download-item__meta-info">
+        <span v-if="item.format" class="meta-info__item">{{ item.format }}</span>
+        <span v-if="item.issued" class="meta-info__item">{{ item.modified ? item.modified : item.issued }}</span>
+        <span v-if="item.byteSize" class="meta-info__item">{{ item.byteSize }} Bytes</span>
+      </p>
+      <div style="display: flex; justify-content: flex-end; align-items: center; height: 100%; margin-top: -10px; margin-top:-40px;">
+          <OdsButton icon="ArrowRight" variant="bare" size="sm" class="download-item__button" icon-right :to="`${props.datasetId}/distribution/${props.item.id}`" >
+           <span>{{ t('message.dataset_detail.details') }}</span>
+          </OdsButton>
+      </div>
+
+    </NuxtLink>
+
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import SvgIcon from '../SvgIcon.vue';
+import OdsButton from '../OdsButton.vue';
+import { useI18n } from 'vue-i18n';
+
+const {  t } = useI18n();
+
+const props = defineProps({
+  item: {
+    type: Object as PropType<DistributionListItem>,
+    required: true
+  },
+  datasetId: {
+    type: String,
+    required: true
+  }
+})
+
+export interface DistributionListItem {
+  id: string,
+  title: string,
+  description: string,
+  format: string,
+  modified: string,
+  created: string,
+  issued: string,
+  accessUrls: string[],
+  downloadUrls: string[],
+  languages: string[],
+  byteSize: string
+}
+
+</script>
+
+
+<style scoped lang="scss">
+.disabled {
+  fill: lightgray;
+  stroke: lightgray;
+  color: lightgray;
+}
+.no-underline {
+  text-decoration: none;
+}
+
+</style>

opendata.swiss/ui/i18n/locales/de.json

@@ -43,7 +43,8 @@
             "accrual_periodicity": "Aktualisierungsfrequenz",
             "show_catalog_entry": "Katalogeintrag anzeigen",
             "hide_catalog_entry": "Katalogeintrag ausblenden",
-            "distribution": "Verteilung",
+            "distribution": "Distribution",
+            "distributions": "Distributionen",
             "additional_information": "Zusätzliche Informationen",
             "published_on": "Publiziert",
             "created_on": "Erstellt",
@@ -52,7 +53,8 @@
             "download": "Download",
             "go_to_resource": "Gehe zur Ressource",
             "show_raw": "Datum anzeigen",
-            "show_relative": "Relative Zeit anzeigen"
+            "show_relative": "Relative Zeit anzeigen",
+            "details": "Details"
         },
         "showcase": {
             "type": {
@@ -124,4 +126,4 @@
             }
         }
     }
-}
+}

opendata.swiss/ui/i18n/locales/en.json

@@ -44,6 +44,7 @@
             "show_catalog_entry": "Show catalog entry",
             "hide_catalog_entry": "Hide catalog entry",
             "distribution": "Distribution",
+            "distributions": "Distributions",
             "additional_information": "Additional information",
             "published_on": "Published",
             "created_on": "Created",
@@ -52,7 +53,8 @@
             "download": "Download",
             "go_to_resource": "Go to resource",
             "show_raw": "Show raw date",
-            "show_relative": "Show relative time"
+            "show_relative": "Show relative time",
+            "details": "Details"
         },
         "showcase": {
             "type": {
@@ -124,4 +126,4 @@
             }
         }
     }
-}
+}

opendata.swiss/ui/i18n/locales/fr.json

@@ -44,6 +44,7 @@
             "show_catalog_entry": "Afficher l’entrée du catalogue",
             "hide_catalog_entry": "Masquer l’entrée du catalogue",
             "distribution": "Distribution",
+            "distributions": "Distributions",
             "additional_information": "Informations supplémentaires",
             "published_on": "Publié",
             "created_on": "Créé",
@@ -52,7 +53,8 @@
             "download": "Télécharger",
             "go_to_resource": "Aller à la ressource",
             "show_raw": "Afficher la date brute",
-            "show_relative": "Afficher le temps relatif"
+            "show_relative": "Afficher le temps relatif",
+            "details": "Détails"
         },
         "showcase": {
             "type": {
@@ -124,4 +126,4 @@
             }
         }
     }
-}
+}

opendata.swiss/ui/i18n/locales/it.json

@@ -44,6 +44,7 @@
             "show_catalog_entry": "Mostra la voce di catalogo",
             "hide_catalog_entry": "Nascondi la voce di catalogo",
             "distribution": "Distribuzione",
+            "distributions": "Distribuzioni",
             "additional_information": "Informazioni aggiuntive",
             "published_on": "Pubblicato",
             "created_on": "Creato",
@@ -52,7 +53,8 @@
             "download": "Scarica",
             "go_to_resource": "Vai alla risorsa",
             "show_raw": "Mostra data grezza",
-            "show_relative": "Mostra tempo relativo"
+            "show_relative": "Mostra tempo relativo",
+            "details": "Dettagli"
         },
         "showcase": {
             "type": {
@@ -124,4 +126,4 @@
             }
         }
     }
-}
+}

opendata.swiss/ui/pages/datasets/[datasetId]/index.vue

@@ -8,15 +8,10 @@ import OdsBreadcrumbs from "../../../app/components/OdsBreadcrumbs.vue";
 import OdsDetailTermsOfUse from '../../../app/components/dataset-detail/OdsDetailTermsOfUse.vue'
 import OdsDetailsTable from '../../../app/components/dataset-detail/OdsDetailsTable.vue'
 import OdsTagList from '../../../app/components/dataset-detail/OdsTagList.vue'
-import OdsDownloadsList from '../../../app/components/dataset-detail/OdsDownloadsList.vue'
 import OdsDatasetMetaInfo from '../../../app/components/dataset-detail/OdsDatasetMetaInfo.vue'
-import OdsDatasetCatalogPanel from '../../../app/components/dataset-detail/OdsDatasetCatalogPanel.vue'
+import OdsDistributionList from '../../../app/components/dataset-detail/OdsDistributionList.vue'
 import { useI18n } from 'vue-i18n';
-const md = `
-::alert
-Hello MDC
-::
-`
+
 const { locale, t } = useI18n();
 const route = useRoute()
 const router = useRouter()
@@ -88,17 +83,15 @@ const breadcrumbs = computed(() => {
    <section class="section">
       <div class="container container--grid gap--responsive">
          <div class="container__main vertical-spacing">
-
             <div class="container__mobile">
-               <div class="box">
-                  <h2 class="h5">Download</h2>
-                  <OdsDownloadsList :dataset="resultEnhanced" />
-               </div>
                <div class="box">
                   <h2 class="h5">{{ t(`message.header.navigation.terms_of_use`) }}</h2>
                   <OdsDetailTermsOfUse v-for="value in resultEnhanced?.getLicenses" :key="value" :name="value" />
                </div>
             </div>
+            <h2 class="h2">{{ t('message.dataset_detail.distributions') }}</h2>
+            <OdsDistributionList :dataset="resultEnhanced" />
+
             <h2 class="h2">{{ t('message.dataset_detail.additional_information') }}</h2>
             <OdsDetailsTable :root-node="node"/>
             <div>
@@ -110,10 +103,6 @@ const breadcrumbs = computed(() => {
          </div>
          <div class="hidden container__aside md:block">
             <div id="aside-content" class="sticky sticky--top">
-               <div class="box">
-                  <h2 class="h5">{{ t('message.dataset_detail.go_to_resource') }}</h2>
-                  <OdsDownloadsList :dataset="resultEnhanced"/>
-               </div>
                <div class="box">
                   <h2 class="h5">{{ t(`message.header.navigation.terms_of_use`) }}</h2>
                   <OdsDetailTermsOfUse v-for="value in resultEnhanced?.getLicenses" :key="value" :name="value" />