fix: add donor data to collection view,

fix: updated length of table header to make change readable fix: made mref-badges wrap when they are too long.
molgenis · Dec 7, 2021 · 9394efa · 9394efa
1 parent 180be21
commit 9394efa
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/src/components/generators/view-components/hyperlink.vue b/src/components/generators/view-components/hyperlink.vue
@@ -1,6 +1,6 @@
 <template>
   <tr v-if="attribute && attribute.value && attribute.value.length">
-    <th scope="row" class="pr-1 align-top">{{ displayName(attribute) }}</th>
+    <th scope="row" class="pr-1 align-top text-nowrap">{{ displayName(attribute) }}</th>
     <td>
       <span>
         <a target="_blank" :href="attribute.value">{{ attribute.value }}</a>

diff --git a/src/components/generators/view-components/mref.vue b/src/components/generators/view-components/mref.vue
@@ -1,12 +1,12 @@
 <template>
   <tr v-if="attribute && attribute.value && attribute.value.length">
-    <th scope="row" class="pr-1 align-top">{{ displayName(attribute) }}</th>
+    <th scope="row" class="pr-1 align-top text-nowrap">{{ displayName(attribute) }}</th>
     <td>
       <template v-if="dataContainsUri">
         <a v-for="(item, index) in attribute.value"
           :href="item.uri"
           target="_blank"
-          class="m-1 badge"
+          class="m-1 badge text-break"
           :class="'badge-' + badgeColor"
           :key="`${index}-${displayName(item)}`">
           {{ displayName(item) }}
@@ -16,7 +16,7 @@
       <template v-else>
         <span
           v-for="(value, index) in attribute.value"
-          class="m-1 badge"
+          class="m-1 badge text-break"
           :key="index"
           :class="'badge-' + badgeColor">
           {{ value }}
@@ -55,11 +55,15 @@ export default {
 
 <style scoped>
 .badge {
+  white-space: normal;
   transition: transform 0.1s;
   box-shadow: 0 0 0 1px white;
+  text-align: left;
 }
 .badge:hover {
+  position: relative;
   transform: scale(1.4);
+  z-index: 9000;
 }
 .fa-external-link {
   top: 1px;

diff --git a/src/components/generators/view-components/string.vue b/src/components/generators/view-components/string.vue
@@ -1,6 +1,6 @@
 <template>
   <tr v-if="attribute && attribute.value && attribute.value.length">
-    <th scope="row" class="pr-1 align-top">{{ displayName(attribute) }}</th>
+    <th scope="row" class="pr-1 align-top text-nowrap">{{ displayName(attribute) }}</th>
     <td>
       <template v-if="attribute.badgeColor">
         <span

diff --git a/src/config/initialCollectionColumns.js b/src/config/initialCollectionColumns.js
@@ -3,6 +3,8 @@ const initialCollectionColumns = [
   { label: 'Website:', column: 'url', type: 'hyperlink' },
   { label: 'Size:', column: 'order_of_magnitude', type: 'object', property: 'size', display: 'badge' },
   { label: 'Available:', column: 'size', type: 'int', display: 'badge', suffix: 'samples' },
+  { label: 'Donor size:', column: 'order_of_magnitude_donors', type: 'object', property: 'size', display: 'badge' },
+  { label: 'Donors:', column: 'number_of_donors', type: 'int', display: 'badge', suffix: 'donors' },
   { label: 'Age:', type: 'range', min: 'age_low', max: 'age_high', unit: 'age_unit' },
   { label: 'Type:', column: 'type', type: 'mref' },
   { label: 'Sex:', column: 'sex', type: 'categoricalmref' },