Add study related to collections

src/components/cards/CollectionReportInfoCard.vue

@@ -98,6 +98,25 @@
               </li>
             </ul>
           </template>
+          <template v-if="info.study">
+            <h5>Study</h5>
+            <ul class="right-content-list">
+              <li>
+                <span class="font-weight-bold mr-2">Name:</span>
+                <span>{{ info.study.title }}</span>
+                <div>
+                  <span
+                    class="fa fa-fw fa-address-card mr-2"
+                    aria-hidden="true"/>
+                  <router-link :to="info.study.report">
+                    <span>
+                      {{ uiText["view"] }} {{ info.study.title }} study
+                    </span>
+                  </router-link>
+                </div>
+              </li>
+            </ul>
+          </template>
           <template v-if="info.certifications && info.certifications.length > 0">
             <h5>Quality</h5>
             <ul class="right-content-list">

src/components/cards/StudyReportInfoCard.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="col-md-4">
+    <div class="card">
+      <div class="card-body">
+        <div class="card-text">
+          <template v-if="info.also_known.length > 0">
+            <h5 class="mt-4">External link</h5>
+            <ul class="right-content-list" v-for="also_known in info.also_known" :key="`${also_known.id}`">
+              <li>
+                <div>
+                  <a :href="`${also_known.url}`" target="_blank">{{ also_known.system }}</a>
+                </div>
+              </li>
+            </ul>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StudyReportInfoCard',
+  props: {
+    info: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.right-content-list {
+  list-style-type: none;
+  margin-left: -2.5rem;
+}
+.right-content-list:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+.right-content-list li {
+  margin-bottom: 0.5rem;
+}
+</style>

src/components/report-components/ReportStudyDetails.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <report-description
+      :description="study.description"
+      :maxLength="500"></report-description>
+
+    <!-- study information -->
+    <view-generator :viewmodel="studyModel.viewmodel" />
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { getStudyDetails } from '../../utils/templateMapper'
+import ReportDescription from '../report-components/ReportDescription.vue'
+import ViewGenerator from '../generators/ViewGenerator.vue'
+
+export default {
+  name: 'ReportStudyDetails',
+  props: {
+    study: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    ReportDescription,
+    ViewGenerator
+  },
+  computed: {
+    ...mapState(['studyColumns']),
+    studyModel () {
+      return this.study
+        ? getStudyDetails(this.study)
+        : {}
+    }
+  }
+}
+</script>

src/config/configManager.js

@@ -1,5 +1,6 @@
 import initialBiobankColumns from './initialBiobankColumns'
 import initialCollectionColumns from './initialCollectionColumns'
+import initialStudyColumns from './initialStudyColumns'
 import initialFilterFacets from './initialFilterFacets'
 import initialLandingpage from './initialLandingpage'
 import i18n from './i18n.js'
@@ -11,6 +12,7 @@ export const bbmriConfig = () => {
     negotiatorType: 'eric-negotiator',
     collectionColumns: initialCollectionColumns,
     biobankColumns: initialBiobankColumns,
+    studyColumns: initialStudyColumns,
     filterFacets: initialFilterFacets,
     filterMenuInitiallyFolded: false,
     removeFreemarkerMargin: false,

src/config/initialStudyColumns.js

@@ -0,0 +1,11 @@
+const initialStudyColumns = [
+  { label: 'Id:', column: 'id', type: 'string', showCopyIcon: true },
+  { label: 'Title:', column: 'title', type: 'string' },
+  { label: 'Type:', column: 'type', type: 'string' },
+  { label: 'Sex:', column: 'sex', type: 'categoricalmref' },
+  { label: 'Description:', column: 'description', type: 'string' },
+  { label: 'Number of subjects:', column: 'number_of_subjects', type: 'int' },
+  { label: 'Age:', type: 'range', min: 'age_low', max: 'age_high', unit: 'age_unit' }
+]
+
+module.exports = initialStudyColumns

src/router/index.js

@@ -6,6 +6,7 @@ import BiobankReport from '../views/BiobankReport'
 import CollectionReport from '../views/CollectionReport'
 import NetworkReportCard from '../components/cards/NetworkReportCard'
 import state, { INITIAL_STATE } from '../store/state'
+import StudyReport from '../views/StudyReport'
 import api from '@molgenis/molgenis-api-client'
 
 Vue.use(VueRouter)
@@ -36,6 +37,11 @@ const router = new VueRouter({
       name: 'network',
       component: NetworkReportCard
     },
+    {
+      path: '/study/:id',
+      name: 'study',
+      component: StudyReport
+    },
     {
       path: '/configuration',
       component: () => import(/* webpackChunkName: "configuration-screen" */ '../views/ConfigurationScreen'),

src/store/actions.js

@@ -8,8 +8,11 @@ import { biobankActions } from './biobank/biobankActions'
 import { configurationActions } from './configuration/configurationActions'
 import { collectionActions, COLLECTION_REPORT_ATTRIBUTE_SELECTOR } from './collection/collectionActions'
 
+import { studyActions } from './study/studyActions'
+
 const BIOBANK_API_PATH = '/api/v2/eu_bbmri_eric_biobanks'
 export const COLLECTION_API_PATH = '/api/v2/eu_bbmri_eric_collections'
+export const STUDY_API_PATH = '/api/v2/eu_bbmri_eric_studies'
 
 const NETWORK_API_PATH = '/api/v2/eu_bbmri_eric_networks'
 /**/
@@ -18,6 +21,7 @@ export default {
   ...collectionActions,
   ...biobankActions,
   ...configurationActions,
+  ...studyActions,
   async GetNetworkReport ({ commit }, networkId) {
     commit('SetNetworkBiobanks', undefined)
     commit('SetNetworkCollections', undefined)

src/store/collection/collectionActions.js

@@ -13,7 +13,7 @@ export const COLLECTION_REPORT_ATTRIBUTE_SELECTOR = () => {
     rsqlStart += collectionRsql.join(',')
   }
 
-  return `${rsqlStart},biobank(id,name,juridical_person,country,url,contact,withdrawn),head(first_name,last_name,role),contact(title_before_name,first_name,last_name,title_after_name,email,phone),sub_collections(name,id,sub_collections(*),parent_collection,order_of_magnitude,materials(label,uri),data_categories),facts(*)`
+  return `${rsqlStart},biobank(id,name,juridical_person,country,url,contact,withdrawn),head(first_name,last_name,role),contact(title_before_name,first_name,last_name,title_after_name,email,phone),sub_collections(name,id,sub_collections(*),parent_collection,order_of_magnitude,materials(label,uri),data_categories),facts(*),also_known(*),study(*)`
 }
 
 export const collectionActions = {

src/store/configuration/configurationState.js

@@ -9,6 +9,7 @@ export const configurationState = {
   filterMenuInitiallyFolded: config.filterMenuInitiallyFolded,
   biobankColumns: config.biobankColumns,
   collectionColumns: config.collectionColumns,
+  studyColumns: config.studyColumns,
   filterFacets: config.filterFacets,
   applicationNotification: config.applicationNotification || '',
   isPodium: config.negotiatorType === 'podium',

src/store/mutations.js

@@ -4,6 +4,7 @@ import { createFilters } from '../config/facetConfigurator'
 import { collectionMutations } from './collection/collectionMutations'
 import { biobankMutations } from './biobank/biobankMutations'
 import { configurationMutations } from './configuration/configurationMutations'
+import { studyMutations } from './study/studyMutations'
 
 function mapLegacyFilterToNewFilter (state, query, oldFilterName, newFilterName) {
   const queryValues = decodeURIComponent(query[oldFilterName]).split(',')
@@ -19,6 +20,7 @@ export default {
   ...biobankMutations,
   ...collectionMutations,
   ...configurationMutations,
+  ...studyMutations,
   /**
    * Updates filter and keeps a history of searches
    * @param {*} state;

src/store/state.js

@@ -22,6 +22,7 @@ export default {
   collectionInfo: undefined, /** IDs of collections matching the collection filters */
   biobankReport: undefined, /** A single biobank object which is fetched by ID for showing the BiobankReport view */
   collectionReport: undefined,
+  studyReport: undefined,
   networkReport: {
     network: undefined,
     collections: undefined,

src/store/study/studyActions.js

@@ -0,0 +1,30 @@
+import api from '@molgenis/molgenis-api-client'
+import { STUDY_API_PATH } from '../actions'
+/**/
+import initialStudyColumns from '../../config/initialStudyColumns'
+
+export const STUDY_REPORT_ATTRIBUTE_SELECTOR = () => {
+  const studyRsql = initialStudyColumns.filter(isc => isc.rsql).map(prop => prop.rsql)
+
+  let rsqlStart = '*,'
+
+  if (studyRsql.length) {
+    rsqlStart += studyRsql.join(',')
+  }
+
+  return `${rsqlStart}collections(*),also_known(*)`
+}
+
+export const studyActions = {
+
+  GetStudyReport ({ commit }, studyId) {
+    commit('SetLoading', true)
+    api.get(`${STUDY_API_PATH}/${studyId}?attrs=${STUDY_REPORT_ATTRIBUTE_SELECTOR()}`).then(response => {
+      commit('SetStudyReport', response)
+      commit('SetLoading', false)
+    }, error => {
+      commit('SetError', error)
+      commit('SetLoading', false)
+    })
+  }
+}

src/store/study/studyMutations.js

@@ -0,0 +1,6 @@
+
+export const studyMutations = {
+  SetStudyReport (state, study) {
+    state.studyReport = study
+  }
+}

src/utils/templateMapper.js

@@ -169,6 +169,14 @@ export const getCollectionDetails = collection => {
   }
 }
 
+export const getStudyDetails = study => {
+  const viewmodel = getViewmodel(study, state.studyColumns)
+  return {
+    ...study,
+    viewmodel
+  }
+}
+
 /**
  * Get all the types available within the collection tree
  */
@@ -255,6 +263,23 @@ export const collectionReportInformation = collection => {
     })
   }
 
+  if (collection.also_known) {
+    collectionReport.also_known = collection.also_known.map(ak => {
+      return {
+        label: ak.label,
+        system: ak.name_system,
+        url: ak.url
+      }
+    })
+  }
+
+  if (collection.study) {
+    collectionReport.study = {
+      title: collection.study.title,
+      report: `/study/${collection.study.id}`
+    }
+  }
+
   collectionReport.certifications = mapObjArray(collection.quality)
 
   collectionReport.collaboration = []
@@ -269,6 +294,23 @@ export const collectionReportInformation = collection => {
 
   return collectionReport
 }
+
+export const studyReportInformation = study => {
+  const studyReport = {}
+
+  if (study.also_known) {
+    studyReport.also_known = study.also_known.map(ak => {
+      return {
+        label: ak.label,
+        system: ak.name_system,
+        url: ak.url
+      }
+    })
+  }
+
+  return studyReport
+}
+
 export const mapNetworkInfo = data => {
   return data.network.map(network => {
     return {

src/views/BiobankReport.vue

@@ -6,7 +6,7 @@
     <script
       v-if="bioschemasJsonld && !isLoading"
       v-text="bioschemasJsonld"
-      type="application/ld+json"/>
+      type="application/ld+json"></script>
     <loading
       :active="isLoading"
       loader="dots"

src/views/CollectionReport.vue

@@ -9,7 +9,7 @@
     <script
       v-if="bioschemasJsonld && !isLoading"
       v-text="bioschemasJsonld"
-      type="application/ld+json"/>
+      type="application/ld+json"></script>
     <loading
       :active="isLoading"
       loader="dots"
@@ -65,7 +65,7 @@
               <div class="col-md-8">
                 <report-collection-details
                   v-if="collection"
-                  :collection="collection"/>
+                  :collection="collection" />
               </div>
 
               <!-- Right side card -->
@@ -90,7 +90,7 @@ import Loading from 'vue-loading-overlay'
 import 'vue-loading-overlay/dist/vue-loading.css'
 import ReportTitle from '../components/report-components/ReportTitle'
 import CollectionReportInfoCard from '../components/cards/CollectionReportInfoCard'
-import { collectionReportInformation } from '../utils/templateMapper'
+import { collectionReportInformation, getStudyDetails } from '../utils/templateMapper'
 import { mapCollectionToBioschemas } from '../utils/bioschemasMapper'
 import ReportCollectionDetails from '../components/report-components/ReportCollectionDetails.vue'
 import FactsTable from '../components/generators/custom-view-components/FactsTable.vue'
@@ -115,6 +115,9 @@ export default {
   computed: {
     ...mapState({ collection: 'collectionReport', isLoading: 'isLoading' }),
     ...mapGetters(['uiText']),
+    collectionDataAvailable () {
+      return Object.keys(this.collection).length
+    },
     info () {
       return collectionReportInformation(this.collection)
     },
@@ -130,6 +133,11 @@ export default {
     factsData () {
       // TODO rework this so that facts are stand-alone, this is a workaround because @ReportCollectionDetails
       return { value: this.collection.facts }
+    },
+    studyData () {
+      return this.collectionDataAvailable && this.collection.study
+        ? getStudyDetails(this.collection.study)
+        : undefined
     }
   },
   /** needed because if we route back the component is not destroyed but its props are updated for other collection */