[BI-1339] Germplasm Details page

.env.development

@@ -13,3 +13,5 @@ VUE_APP_BI_API_ROOT=${API_BASE_URL}
 # The level of logging for our logger
 VUE_APP_LOG_LEVEL=${WEB_LOG_LEVEL}
 
+# The reference source
+VUE_APP_BI_REFERENCE_SOURCE=breedinginsight.org

src/breeding-insight/dao/GermplasmDAO.ts

@@ -15,9 +15,11 @@
  * limitations under the License.
  */
 
-import {BiResponse} from "@/breeding-insight/model/BiResponse";
+import {BiResponse, Response} from "@/breeding-insight/model/BiResponse";
 import * as api from "@/util/api";
 import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
+import {Result, ResultGenerator} from "@/breeding-insight/model/Result";
+import {Germplasm} from "@/breeding-insight/brapi/model/germplasm";
 
 export class GermplasmDAO {
 
@@ -41,4 +43,21 @@ export class GermplasmDAO {
             })
         }))
     }
+
+    static async getSingleGermplasm(programId: string, germplasmId: string): Promise<Result<Error, Germplasm>> {
+        const config: any = {};
+        config.url = `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/brapi/v2/germplasm/${germplasmId}`;
+        config.method = 'get';
+        config.programId = programId;
+        config.germplasmId = germplasmId;
+        config.params = {};
+
+        try {
+            const res = await api.call(config) as Response;
+            let { result } = res.data;
+            return ResultGenerator.success(result);
+        } catch (error) {
+            return ResultGenerator.err(error);
+        }
+    }
 }

src/breeding-insight/service/GermplasmService.ts

@@ -20,6 +20,8 @@ import {BiResponse, Metadata} from "@/breeding-insight/model/BiResponse";
 import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
 import {PaginationController} from "@/breeding-insight/model/view_models/PaginationController";
 import {GermplasmDAO} from "@/breeding-insight/dao/GermplasmDAO";
+import {Germplasm} from "@/breeding-insight/brapi/model/germplasm";
+import {Result, ResultGenerator} from "@/breeding-insight/model/Result";
 
 export class GermplasmService {
 
@@ -48,4 +50,14 @@ export class GermplasmService {
         }));
     }
 
+    static async getSingleGermplasm(programId: string, germplasmId: string): Promise<Result<Error, Germplasm>> {
+        try {
+              if (!programId) throw new Error('Missing or invalid program id');
+              let response: Result<Error, Germplasm> = await GermplasmDAO.getSingleGermplasm(programId, germplasmId);
+              return response;
+          } catch(error) {
+              return ResultGenerator.err(error);
+          }
+    }
+
 }

src/breeding-insight/utils/GermplasmUtils.ts

@@ -0,0 +1,46 @@
+/*
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import moment from "moment";
+import {Germplasm} from "@/breeding-insight/brapi/model/germplasm";
+import {ExternalReferences} from "@/breeding-insight/brapi/model/externalReferences";
+
+export class GermplasmUtils {
+    static getExternalUID(germplasm: Germplasm): string | undefined {
+        let val;
+        if (germplasm.externalReferences && germplasm.seedSource) {
+            val = germplasm.externalReferences!.filter(ref => ref.referenceSource == germplasm.seedSource!)
+                .map(ref => ref.referenceID);
+            return val ? val[0]: "";
+        }
+        return "";
+    }
+
+    static getCreatedDate(germplasm: Germplasm): string | undefined {
+        if (germplasm.additionalInfo && germplasm.additionalInfo.createdDate) {
+            let dateTime = moment(germplasm.additionalInfo!.createdDate!, "DD/MM/YYYY h:mm:ss");
+            return dateTime.format("DD/MM/YYYY");
+        }
+        return "";
+    }
+
+    static getGermplasmUUID(references: ExternalReferences): string | undefined {
+        let val = references.find(ref => ref.referenceSource === process.env.VUE_APP_BI_REFERENCE_SOURCE);
+        return val ? val.referenceID : "";
+    }
+
+}

src/router/index.ts

@@ -66,6 +66,7 @@ import OntologyArchivedTable from "@/components/ontology/OntologyArchivedTable.v
 import PageNotFound from "@/views/PageNotFound.vue";
 import Germplasm from "@/views/germplasm/Germplasm.vue";
 import GermplasmLists from "@/views/germplasm/GermplasmLists.vue";
+import GermplasmDetails from "@/views/germplasm/GermplasmDetails.vue";
 import ProgramConfiguration from "@/views/program/ProgramConfiguration.vue";
 
 Vue.use(VueRouter);
@@ -303,6 +304,16 @@ const routes = [
       }
     ]
   },
+  {
+    path: '/programs/:programId/germplasm/:germplasmId',
+    name: 'germplasm-details',
+    component: GermplasmDetails,
+    meta: {
+      title: 'Germplasm Details',
+      layout: layouts.userSideBar
+    },
+    beforeEnter: processProgramNavigation
+  },
   {
     path: '/programs/:programId/traits',
     name: 'traits',

src/views/germplasm/GermplasmDetails.vue

@@ -0,0 +1,134 @@
+<!--
+  - See the NOTICE file distributed with this work for additional information
+  - regarding copyright ownership.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+  <div class="germplasm">
+    <router-link v-bind:to="{name: 'germplasm-all', params: {programId: activeProgram.id}}">
+      All Germplasm
+    </router-link>
+    <div class="mb-4"></div>
+    <h1 class="title">
+      Germplasm Details
+    </h1>
+
+    <template v-if="!germplasmLoading && germplasm!=null">
+    <div class="columns is-multiline is-align-items-stretch mt-4">
+    <article class="column ">
+    <section>
+      <ul style="list-style-type: none;">
+      <li><b>Preferred Name: </b> {{germplasm.defaultDisplayName}}</li>
+      <li><b>GID: </b> {{ germplasm.accessionNumber }}</li>
+      <li><b>Breeding Method: </b> {{ germplasm.additionalInfo.breedingMethod }}</li>
+      <li><b>Source: </b> {{ germplasm.seedSource }}</li>
+        <li><b>Pedigree: </b> {{ germplasm.additionalInfo.pedigreeByName }}</li>
+        <li><b>Pedigree GID(s): </b> {{ germplasm.pedigree }}</li>
+      </ul>
+    </section>
+    </article>
+    <article class="column px-2">
+      <section>
+        <ul style="list-style-type: none;">
+          <li><b>External UID: </b> {{ GermplasmUtils.getExternalUID(germplasm) }}</li>
+          <li><b>User: </b> {{ germplasm.additionalInfo.createdBy.userName }}</li>
+          <li><b>Creation Date: </b> {{ GermplasmUtils.getCreatedDate(germplasm) }}</li>
+        </ul>
+      </section>
+    </article>
+      </div>
+
+    <section>
+      <nav class="tabs is-boxed">
+        <ul>
+            <router-link
+                v-bind:to="{name: '', params: {programId: activeProgram.id}}"
+                tag="li"
+            >
+              <a>Images</a>
+            </router-link>
+            <router-link
+                v-bind:to="{name: '', params: {programId: activeProgram.id}}"
+                tag="li"
+            >
+              <a>Pedigrees</a>
+            </router-link>
+              <router-link
+                  v-bind:to="{name: '', params: {programId: activeProgram.id}}"
+                  tag="li"
+              >
+                <a>Attributes</a>
+              </router-link>
+        </ul>
+      </nav>
+    </section>
+
+    <div class="tab-content">
+      <router-view
+          @show-success-notification="$emit('show-success-notification', $event)"
+          @show-info-notification="$emit('show-info-notification', $event)"
+          @show-error-notification="$emit('show-error-notification', $event)"
+      />
+    </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Watch} from 'vue-property-decorator'
+import {mapGetters} from "vuex";
+import {Program} from "@/breeding-insight/model/Program";
+import GermplasmBase from "@/components/germplasm/GermplasmBase.vue";
+import {Germplasm} from "@/breeding-insight/brapi/model/germplasm";
+import {GermplasmService} from "@/breeding-insight/service/GermplasmService";
+import {GermplasmUtils} from '@/breeding-insight/utils/GermplasmUtils';
+import { Result } from '@/breeding-insight/model/Result';
+
+@Component({
+  components: {},
+  computed: {
+    ...mapGetters([
+      'activeProgram'
+    ])
+  },
+  data: () => ({GermplasmUtils})
+})
+export default class GermplasmDetails extends GermplasmBase {
+
+  private activeProgram?: Program;
+  private germplasm?: Germplasm;
+  private germplasmLoading: boolean = true;
+  private germplasmUUID: string = this.$route.params.germplasmId;
+
+  mounted() {
+    this.getGermplasm();
+  }
+
+  async getGermplasm() {
+    this.germplasmLoading = true;
+    try {
+      const response: Result<Error, Germplasm> = await GermplasmService.getSingleGermplasm(this.activeProgram!.id!, this.germplasmUUID);
+      if(response.isErr()) throw response.value;
+      this.germplasm = response.value;
+    } catch (err) {
+      // Display error that germplasm cannot be loaded
+      this.$emit('show-error-notification', 'Error while trying to load germplasm');
+      throw err;
+    } finally {
+      this.germplasmLoading = false
+    }
+  }
+}
+</script>

src/views/germplasm/GermplasmTable.vue

@@ -37,6 +37,11 @@
       <b-table-column field="createdBy.userName" label="Created By" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
         {{ props.row.data.additionalInfo.createdBy.userName }}
       </b-table-column>
+      <b-table-column field="germplasmId" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        <router-link v-bind:to="{name: 'germplasm-details', params: {programId: activeProgram.id, germplasmId: GermplasmUtils.getGermplasmUUID(props.row.data.externalReferences)}}">
+          Show Details
+        </router-link>
+      </b-table-column>
 
       <template v-slot:emptyMessage>
         <p class="has-text-weight-bold">
@@ -63,6 +68,7 @@ import {Pagination} from "@/breeding-insight/model/BiResponse";
 import ExpandableTable from "@/components/tables/expandableTable/ExpandableTable.vue";
 import {PaginationController} from "@/breeding-insight/model/view_models/PaginationController";
 import {Pedigree} from "@/breeding-insight/model/import/germplasm/Pedigree";
+import {GermplasmUtils} from '@/breeding-insight/utils/GermplasmUtils';
 
 @Component({
   mixins: [validationMixin],
@@ -72,7 +78,7 @@ import {Pedigree} from "@/breeding-insight/model/import/germplasm/Pedigree";
       'activeProgram'
     ])
   },
-  data: () => ({Trait, StringFormatters, TraitStringFormatters, Pedigree})
+  data: () => ({Trait, StringFormatters, TraitStringFormatters, Pedigree, GermplasmUtils})
 })
 export default class GermplasmTable extends Vue {
 
@@ -109,6 +115,5 @@ export default class GermplasmTable extends Vue {
     }
 
   }
-
 }
 </script>