Feat/list of networks

src/components/BiobankExplorerContainer.vue

@@ -47,7 +47,8 @@
 
       <div class="row">
         <div class="col-md-12">
-          <biobank-cards-container></biobank-cards-container>
+          <network-cards-container v-if="mode === 'networkview'"></network-cards-container>
+          <biobank-cards-container v-else></biobank-cards-container>
         </div>
       </div>
     </div>
@@ -145,6 +146,7 @@
 <script>
 import { CartSelectionToast } from '@molgenis-ui/components-library'
 import BiobankCardsContainer from './cards/BiobankCardsContainer'
+import NetworkCardsContainer from './cards/NetworkCardsContainer'
 import FilterContainer from './filters/FilterContainer'
 import ResultHeader from './ResultHeader'
 import { mapGetters, mapActions, mapState, mapMutations } from 'vuex'
@@ -153,8 +155,15 @@ import CollectionSelectAll from '@/components/buttons/CollectionSelectAll.vue'
 
 export default {
   name: 'biobank-explorer-container',
+  props: {
+    mode: {
+      type: String,
+      default: 'biobankview'
+    }
+  },
   components: {
     BiobankCardsContainer,
+    NetworkCardsContainer,
     FilterContainer,
     ResultHeader,
     CartSelectionToast,
@@ -170,10 +179,12 @@ export default {
     ...mapGetters([
       'rsql',
       'biobankRsql',
+      'networkRsql',
       'loading',
       'foundCollectionIds',
       'activeFilters',
       'collectionsInPodium',
+      'selectedBiobankInNetwork',
       'selectedBiobankQuality',
       'selectedCollectionQuality',
       'satisfyAllBiobankQuality',
@@ -214,6 +225,10 @@ export default {
     }
   },
   watch: {
+    selectedBiobankInNetwork: {
+      immediate: false,
+      handler: 'GetBiobankIdsInNetwork'
+    },
     selectedBiobankQuality: {
       immediate: true,
       handler: 'GetBiobankIdsForQuality'
@@ -231,26 +246,32 @@ export default {
       handler: 'GetCollectionIdsForQuality'
     },
     rsql: {
-      immediate: true,
+      immediate: false,
       handler: 'GetCollectionInfo'
     },
     biobankRsql: {
-      immediate: true,
+      immediate: false,
       handler: 'GetBiobankIds'
     },
+    networkRsql: {
+      immediate: false,
+      handler: 'GetNetworkInfo'
+    },
     isPodium: {
       immediate: true,
       handler: 'GetPodiumCollections'
     }
   },
   methods: {
-    ...mapMutations(['RemoveCollectionsFromSelection', 'MapQueryToState']),
+    ...mapMutations(['RemoveCollectionsFromSelection', 'MapQueryToState', 'SetViewMode']),
     ...mapActions([
       'GetCollectionInfo',
       'GetBiobankIds',
+      'GetNetworkInfo',
       'GetPodiumCollections',
       'GetBiobankIdsForQuality',
-      'GetCollectionIdsForQuality'
+      'GetCollectionIdsForQuality',
+      'GetBiobankIdsInNetwork'
     ]),
     isNonCommercialCollection (collectionId) {
       return this.nonCommercialCollections.indexOf(collectionId) >= 0
@@ -319,6 +340,13 @@ export default {
     if (this.selectedCollections.length) {
       createBookmark(this.activeFilters, this.selectedCollections)
     }
+    this.SetViewMode(this.mode)
+    this.GetBiobankIds()
+    if (this.mode === 'networkview') {
+      this.GetNetworkInfo()
+    } else {
+      this.GetCollectionInfo()
+    }
   }
 }
 </script>

src/components/ResultHeader.vue

@@ -11,6 +11,9 @@
         <div class="biobank-number-report-container">
           <small class="biobank-number-report">
             <em>
+              <template v-if="foundNetworks > 0">
+                {{ foundNetworks }} networks with
+              </template>
               {{ foundBiobanks }} organisations with
               {{ parentCollections.length }} collection(s)
               <template v-if="numberOfSubCollections > 0">
@@ -50,7 +53,7 @@ import { mapGetters } from 'vuex'
 
 export default {
   computed: {
-    ...mapGetters(['foundBiobanks', 'foundCollectionIds', 'parentCollections']),
+    ...mapGetters(['foundNetworks', 'foundBiobanks', 'foundCollectionIds', 'parentCollections']),
     numberOfSubCollections () {
       return this.foundCollectionIds.length - this.parentCollections.length
     }

src/components/cards/BiobankCardsContainer.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="biobank-cards-container">
-    <div v-if="!loading && foundBiobanks > 0">
+    <div v-if="!loading && numberOfBiobanks > 0">
       <b-pagination
-        v-if="foundBiobanks > pageSize"
+        v-if="numberOfBiobanks > pageSize"
         size="md"
         align="center"
-        :total-rows="foundBiobanks"
+        :total-rows="numberOfBiobanks"
         v-model="currentPage"
         :per-page="pageSize"></b-pagination>
       <biobank-card
@@ -16,15 +16,15 @@
       </biobank-card>
 
       <b-pagination
-        v-if="foundBiobanks > pageSize"
+        v-if="numberOfBiobanks > pageSize"
         size="md"
         align="center"
-        :total-rows="foundBiobanks"
+        :total-rows="numberOfBiobanks"
         v-model="currentPage"
         :per-page="pageSize"></b-pagination>
     </div>
 
-    <div v-else-if="!loading && foundBiobanks === 0" class="status-text">
+    <div v-else-if="!loading && numberOfBiobanks === 0" class="status-text">
       <h4>No biobanks were found</h4>
     </div>
 
@@ -61,23 +61,34 @@ export default {
       pageSize: 10
     }
   },
+  props: {
+    biobanks: {
+      type: [Array]
+    }
+  },
   methods: {
     ...mapActions(['GetBiobanks'])
   },
   computed: {
-    ...mapGetters([
-      'biobanks',
-      'foundBiobanks',
-      'loading'
-    ]),
+    ...mapGetters({
+      globalBiobanks: 'biobanks',
+      foundBiobanks: 'foundBiobanks',
+      loading: 'loading',
+      viewMode: 'viewMode'
+    }),
     biobanksShown () {
-      return this.loading ? [] : this.biobanks.slice(this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage)
+      const biobanks = this.$props.biobanks ? this.$props.biobanks : this.globalBiobanks
+      return this.loading ? [] : biobanks.slice(this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage)
     },
     biobankIds () {
-      return this.loading ? [] : this.biobanks.map(it => it.id || it)
+      const biobanks = this.$props.biobanks ? this.$props.biobanks : this.globalBiobanks
+      return this.loading ? [] : biobanks.map(it => it.id || it)
     },
     biobankIdsToFetch () {
       return this.biobanksShown.filter(it => typeof it === 'string')
+    },
+    numberOfBiobanks () {
+      return this.$props.biobanks ? this.$props.biobanks.length : this.foundBiobanks
     }
   },
   components: {
@@ -91,10 +102,16 @@ export default {
       }
     },
     biobankIdsToFetch (value) {
-      if (value.length) {
+      if (value.length > 0) {
         this.GetBiobanks(value)
       }
     }
+  },
+  mounted () {
+    // Forces fetching of first set of biobanks since, in networkview, the first set of biobanksIds is not fetched automatically
+    if (this.viewMode === 'networkview' && this.biobankIdsToFetch.length > 0) {
+      this.GetBiobanks(this.biobankIdsToFetch)
+    }
   }
 }
 </script>

src/components/cards/NetworkCard.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="card network-card">
+    <div
+      class="card-header network-card-header">
+      <div class="row">
+        <div class="collapse-column" v-if="!loading">
+          <font-awesome-icon
+            icon="caret-right"
+            :style="iconStyle"
+            class="collapse-button mr-2"
+            @click.prevent="collapsed=!collapsed"/>
+        </div>
+        <div class="col-md-5 d-flex flex-column" v-if="!loading">
+          <div class="mb-2">
+            <h5>
+              <router-link :to="'/network/' +  network.id">
+                <font-awesome-icon
+                  transform="shrink-3"
+                  class="mr-2"
+                  :icon="['fas', 'project-diagram']"/>
+              </router-link>
+              <span id="network-name">{{ network.name }}</span>
+            </h5>
+          </div>
+        </div>
+        <div class="col-md-6" v-if="!loading">
+          <p>
+            <small class="mr-2">
+              <span class="font-weight-bold">Number of biobanks:</span>
+            </small>
+            <small>{{ network.biobanks.length }}</small>
+            <br />
+          </p>
+        </div>
+        <div v-else class="col-md-12 text-center">
+          <span class="fa fa-spinner fa-spin" aria-hidden="true"></span>
+        </div>
+      </div>
+    </div>
+    <div class="card-body" v-if="!collapsed && !loading">
+      <biobank-cards-container
+        :biobanks="network.biobanks">
+      </biobank-cards-container>
+    </div>
+  </div>
+</template>
+
+<script>
+import BiobankCardsContainer from './BiobankCardsContainer.vue'
+
+export default {
+  name: 'network-card',
+  components: {
+    BiobankCardsContainer
+  },
+  props: {
+    network: {
+      type: [Object, String]
+    },
+    initCollapsed: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data () {
+    return {
+      collapsed: this.initCollapsed
+    }
+  },
+  computed: {
+    loading () {
+      return typeof this.network === 'string'
+    },
+    iconStyle () {
+      return {
+        transform: `rotate(${this.collapsed ? 0 : 90}deg)`,
+        transition: 'transform 0.2s'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.collapse-column {
+  margin-left: 10px;
+  margin-right: 6px;
+  display: table-cell !important;
+  vertical-align: middle;
+}
+
+.collapse-button {
+  cursor: pointer;
+}
+
+.network-card {
+  margin-bottom: 1em;
+}
+
+.network-card-header {
+  background-color: #e4e4e4;
+}
+
+.network-icon:hover {
+  cursor: pointer;
+}
+
+.icon-alignment {
+  position: relative;
+  top: 1px;
+  left: 2px;
+}
+</style>