fix: display 'unknown' format badges and fix minor visual differences to original DataInfoBox

See https://gitlab.fokus.fraunhofer.de/piveau/organisation/piveau-scrum-board/-/issues/2153#note_229297

src/components/Datasets.vue

@@ -196,7 +196,7 @@
                 catalog: getTranslationFor(dataset.catalog.title, $route.query.locale, []),
                 createdDate: dataset.releaseDate,
                 updatedDate: dataset.modificationDate,
-                formats: removeDuplicatesOf(dataset.distributionFormats).map(format => format.id.toLowerCase()),
+                formats: removeDuplicatesOf(dataset.distributionFormats).filter((format) => format.id || format.label),
               }"
               :data-cy="`dataset@${dataset.id}`"
               class="mt-3"

src/modules/PvBadge/PvBadge.vue

 <template>
-<div class="format-badge badge" :type="format">{{ format }}</div>
+<div class="format-badge badge" :type="format.id">
+  <slot>
+    {{ format.label || format.id }}
+  </slot>
+</div>
 </template>
 
 <script lang="ts">
@@ -10,7 +14,7 @@ export default Vue.extend({
   name: 'PvBadge',
   props: {
     format: {
-      type: String as PropType<DistributionFormat>,
+      type: Object as PropType<DistributionFormat>,
       default: null,
     },
   },

src/modules/PvDataInfoBox/PvDataInfoBox.vue

@@ -26,31 +26,30 @@
           data-cy="dataset-description"
         >
           <slot name="description">
-            <template v-if="dataset.description">
+            <p v-if="dataset.description">
               {{ dataset.description }}
-            </template>
+            </p>
             <span v-else>
               No description available.
             </span>
           </slot>
         </div>
-        <div class="col-12 col-md-3">
-          <div
-            v-if="dataset.formats && dataset.formats.length > 0"
-            class="d-flex flex-col flex-wrap"
-            data-toggle="tooltip"
-            data-placement="top"
-            :title="$t('message.tooltip.datasetDetails.format')"
-          >
-            <template v-for="(format, i) in dataset.formats.slice(0, 10)">
-              <PvBadge
-                :key="`badge@${i}`"
-                class="mr-1 mb-1"
-                :format="format"
-              />
-            </template>
-            <span v-if="dataset.formats.length >= 10">...</span>
-          </div>
+        <div
+          v-if="dataset.formats && dataset.formats.length > 0"
+          class="col-12 col-md-3"
+        >
+            <PvBadge
+              v-for="(format, i) in dataset.formats.slice(0, 10)"
+              :key="`badge@${i}`"
+              class="mr-1 mb-1"
+              :format="format.id"
+              data-toggle="tooltip"
+              data-placement="top"
+              :title="$t('message.tooltip.datasetDetails.format')"
+            >
+              {{ format.label || format.id || 'UNKNOWN' }}
+            </PvBadge>
+          <span v-if="dataset.formats.length >= 10">...</span>
         </div>
       </div>
     </div>

types/global.d.ts

-export type DistributionFormat = 'default' | 'html' | 'json' | 'xml' | 'txt' | 'csv' | 'xls' | 'zip' | 'api' | 'pdf' | 'shp' | 'ld' | 'rdf' | 'nquad' | 'ntriples' | 'turtle'
+export type DistributionFormat = {
+  id?: 'default' | 'html' | 'json' | 'xml' | 'txt' | 'csv' | 'xls' | 'zip' | 'api' | 'pdf' | 'shp' | 'ld' | 'rdf' | 'nquad' | 'ntriples' | 'turtle';
+  label?: string;
+  resource?: string;
+};
 
 export type Dataset = {
   /**