Merge pull request #284 from molgenis/fix/add-donor-properties

fix: add donor data to collection view

src/components/buttons/CollectionSelectAll.vue

@@ -9,10 +9,10 @@
       :checked="allCollectionsSelected"
       hidden/>
     <label class="add-to-cart-label btn btn-outline-secondary" for="select-deselect-all">
-      <span class="mr-2">Select all collections</span>
+      <span>Select all collections</span>
     </label>
     <label class="remove-from-cart-label btn btn-outline-danger" for="select-deselect-all">
-      <span class="mr-2">Deselect all collections</span>
+      <span>Deselect all collections</span>
     </label>
   </div>
 </template>

src/components/buttons/CollectionSelector.vue

@@ -10,7 +10,7 @@
       :value="false"
       hidden/>
     <label v-if="!iconOnly" class="add-to-cart-label btn btn-outline-secondary" :for="checkboxIdentifier">
-      <span class="mr-2">Add to selection</span>
+      <span>Add to selection</span>
     </label>
     <label v-else class="add-to-cart-label btn" :for="checkboxIdentifier">
       <font-awesome-icon
@@ -22,7 +22,7 @@
       v-if="!iconOnly"
       class="btn remove-from-cart-label btn-outline-danger"
       :for="checkboxIdentifier">
-      <span class="mr-2">Remove from selection</span>
+      <span>Remove from selection</span>
     </label>
     <label
       v-else

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>

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;

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

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' },

tests/unit/specs/components/generators/view-components/mref.spec.js

@@ -20,7 +20,10 @@ describe('Generator view-components', () => {
       // remove whitespace and newlines for easy check
       const flattendHtml = wrapper.html().replace(/\s/gmi, '')
 
-      expect(flattendHtml).toBe('<tr><thscope="row"class="pr-1align-top">Count:</th><td><spanclass="m-1badgebadge-info">1</span><spanclass="m-1badgebadge-info">2</span><spanclass="m-1badgebadge-info">3</span></td></tr>')
+      expect(flattendHtml.includes('>Count:<')).toBeTruthy()
+      expect(flattendHtml.includes('>1<')).toBeTruthy()
+      expect(flattendHtml.includes('>2<')).toBeTruthy()
+      expect(flattendHtml.includes('>3<')).toBeTruthy()
     })
 
     it('can create a tr with badges for a categorical mref attribute object with id/label/name and a uri', () => {

tests/unit/specs/components/report-components/ReportCollectionDetails.spec.js

@@ -87,6 +87,16 @@ const expected = {
           type: 'int',
           value: ''
         },
+        {
+          label: 'Donor size:',
+          type: 'object',
+          value: ''
+        },
+        {
+          label: 'Donors:',
+          type: 'int',
+          value: ''
+        },
         {
           label: 'Age:',
           type: 'range',
@@ -183,6 +193,16 @@ const expected = {
           type: 'int',
           value: ''
         },
+        {
+          label: 'Donor size:',
+          type: 'object',
+          value: ''
+        },
+        {
+          label: 'Donors:',
+          type: 'int',
+          value: ''
+        },
         {
           label: 'Age:',
           type: 'range',
@@ -254,6 +274,16 @@ const expected = {
       type: 'int',
       value: ''
     },
+    {
+      label: 'Donor size:',
+      type: 'object',
+      value: ''
+    },
+    {
+      label: 'Donors:',
+      type: 'int',
+      value: ''
+    },
     {
       label: 'Age:',
       type: 'range',

tests/unit/specs/utils/templateMapper.spec.js

@@ -288,6 +288,16 @@ describe('templateMapper', () => {
                 type: 'int',
                 value: ''
               },
+              {
+                label: 'Donor size:',
+                type: 'object',
+                value: ''
+              },
+              {
+                label: 'Donors:',
+                type: 'int',
+                value: ''
+              },
               {
                 label: 'Age:',
                 type: 'range',
@@ -427,6 +437,16 @@ describe('templateMapper', () => {
                     type: 'int',
                     value: ''
                   },
+                  {
+                    label: 'Donor size:',
+                    type: 'object',
+                    value: ''
+                  },
+                  {
+                    label: 'Donors:',
+                    type: 'int',
+                    value: ''
+                  },
                   {
                     label: 'Age:',
                     type: 'range',
@@ -495,6 +515,16 @@ describe('templateMapper', () => {
                 type: 'int',
                 value: ''
               },
+              {
+                label: 'Donor size:',
+                type: 'object',
+                value: ''
+              },
+              {
+                label: 'Donors:',
+                type: 'int',
+                value: ''
+              },
               {
                 label: 'Age:',
                 type: 'range',
@@ -574,6 +604,16 @@ describe('templateMapper', () => {
             type: 'int',
             value: ''
           },
+          {
+            label: 'Donor size:',
+            type: 'object',
+            value: ''
+          },
+          {
+            label: 'Donors:',
+            type: 'int',
+            value: ''
+          },
           {
             label: 'Age:',
             type: 'range',