[BI-1086] - Germplasm lists table

src/breeding-insight/dao/GermplasmDAO.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 {BiResponse} from "@/breeding-insight/model/BiResponse";
+import * as api from "@/util/api";
+import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
+
+export class GermplasmDAO {
+
+    static getAllLists(programId: string, paginationQuery: PaginationQuery): Promise<BiResponse> {
+
+        const config: any = {};
+        config.url = `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/brapi/v2/lists`;
+        config.method = 'get';
+        config.programId = programId;
+
+        return new Promise<BiResponse>(((resolve, reject) => {
+            api.call(config)
+                .then((response: any) => {
+                    const biResponse = new BiResponse(response.data);
+                    resolve(biResponse);
+                }).catch((error) => {
+                reject(error);
+            })
+        }))
+    }
+}

src/breeding-insight/service/GermplasmService.ts

@@ -0,0 +1,56 @@
+/*
+ * 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 {GermplasmList} from "@/breeding-insight/model/GermplasmList";
+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";
+
+export class GermplasmService {
+
+    static getAll(programId: string, paginationQuery: PaginationQuery = new PaginationQuery(0, 0, true)): Promise<[GermplasmList[], Metadata]> {
+        return new Promise<[GermplasmList[], Metadata]>(((resolve, reject) => {
+
+            let germplasmLists: GermplasmList[] = [];
+
+            if (programId) {
+                GermplasmDAO.getAllLists(programId, paginationQuery).then((biResponse: BiResponse) => {
+                    if (biResponse.result.data) {
+                        //TODO: Remove when backend default sorting is implemented
+                        biResponse.result.data = PaginationController.mockSortRecords(biResponse.result.data);
+                        germplasmLists = biResponse.result.data.map((germplasmList: any) => {
+                            return germplasmList as GermplasmList;
+                        });
+                    }
+
+                    //TODO: Remove when backend pagination is implemented
+                    let newPagination;
+                    [germplasmLists, newPagination] = PaginationController.mockPagination(germplasmLists, paginationQuery!.page, paginationQuery!.pageSize, paginationQuery!.showAll);
+                    biResponse.metadata.pagination = newPagination;
+
+                    resolve([germplasmLists, biResponse.metadata]);
+                }).catch((error) => {
+                    reject(error);
+                })
+            } else {
+                reject();
+            }
+        }));
+    }
+
+}

src/components/germplasm/GermplasmListsTable.vue

@@ -0,0 +1,124 @@
+<!--
+  - 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>
+  <section id="germplasmListTableLabel">
+    <ExpandableTable
+        v-bind:records.sync="germplasmLists"
+        v-bind:loading="this.germplasmListsLoading"
+        v-bind:pagination="germplasmListsPagination"
+        v-on:paginate="paginationController.updatePage($event)"
+        v-on:paginate-toggle-all="paginationController.toggleShowAll()"
+        v-on:paginate-page-size="paginationController.updatePageSize($event)"
+    >
+        <b-table-column field="data.listName" label="Name" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+          {{ props.row.data.listName}}
+        </b-table-column>
+        <b-table-column field="data.listDescription" label="Description" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+          {{ props.row.data.listDescription }}
+        </b-table-column>
+        <b-table-column field="data.listSize" label="Total Entries" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+          {{ props.row.data.listSize }}
+        </b-table-column>
+        <b-table-column field="data.dateCreated" label="Date Created" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+          {{ formatDate(props.row.data.dateCreated) }}
+        </b-table-column>
+        <b-table-column field="data.listDbId">
+          <a href="#">Download</a>
+        </b-table-column>
+
+      <template v-slot:emptyMessage>
+        <EmptyTableMessage>
+          <p class="has-text-weight-bold">
+            Germplasm lists not yet specified.
+          </p>
+        </EmptyTableMessage>
+      </template>
+    </ExpandableTable>
+  </section>
+</template>
+
+<script lang="ts">
+import {Component, Vue, Watch} from 'vue-property-decorator'
+import WarningModal from '@/components/modals/WarningModal.vue'
+import {DownloadIcon} from 'vue-feather-icons'
+import {validationMixin} from 'vuelidate';
+import { mapGetters } from 'vuex'
+import {Program} from "@/breeding-insight/model/Program";
+import BasicInputField from "@/components/forms/BasicInputField.vue";
+import EmptyTableMessage from "@/components/tables/EmtpyTableMessage.vue";
+import TableColumn from "@/components/tables/TableColumn.vue";
+import {Metadata, Pagination} from "@/breeding-insight/model/BiResponse";
+import {PaginationController} from "@/breeding-insight/model/view_models/PaginationController";
+import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
+import BaseTraitForm from "@/components/trait/forms/BaseTraitForm.vue";
+import {GermplasmList} from "@/breeding-insight/model/GermplasmList";
+import {GermplasmService} from "@/breeding-insight/service/GermplasmService";
+import {
+  DEACTIVATE_ALL_NOTIFICATIONS,
+} from "@/store/mutation-types";
+import ExpandableTable from "@/components/tables/expandableTable/ExpandableTable.vue";
+import moment from "moment";
+
+@Component({
+  mixins: [validationMixin],
+  components: {
+    ExpandableTable,
+    BaseTraitForm, BasicInputField, EmptyTableMessage, TableColumn,
+    WarningModal, DownloadIcon },
+  computed: {
+    ...mapGetters([
+      'activeProgram'
+    ])
+  }
+})
+export default class GermplasmListsTable extends Vue {
+
+  private activeProgram?: Program;
+  private germplasmListsPagination?: Pagination = new Pagination();
+  private paginationController: PaginationController = new PaginationController();
+  private germplasmLists: GermplasmList[] = [];
+  private germplasmListsLoading = true;
+
+  mounted() {
+    this.getGermplasmLists();
+  }
+
+  @Watch('paginationController', { deep: true})
+  getGermplasmLists() {
+    let paginationQuery: PaginationQuery = PaginationController.getPaginationSelections(
+        this.paginationController.currentPage, this.paginationController.pageSize, this.paginationController.showAll);
+    this.paginationController.setCurrentCall(paginationQuery);
+
+    GermplasmService.getAll(this.activeProgram!.id!, paginationQuery).then(([germplasmLists, metadata]) => {
+      if (this.paginationController.matchesCurrentRequest(metadata.pagination)){
+        this.germplasmLists = germplasmLists;
+        this.germplasmListsPagination = metadata.pagination;
+      }
+    }).catch((error) => {
+      // Display error that germplasm lists cannot be loaded
+      this.$emit('show-error-notification', 'Error while trying to load germplasm lists');
+      throw error;
+    }).finally(() => this.germplasmListsLoading = false);
+  }
+
+  formatDate(date: Date) {
+    return moment(date).format('YYYY-M-D, h:mm:ss');
+  }
+}
+
+</script>

src/components/layouts/UserSideBarLayout.vue

@@ -239,8 +239,8 @@
                   </router-link>
                 </li>
                 <li>
-                  <router-link v-bind:to="{name: 'germplasm-list', params: {programId: activeProgram.id}}">
-                    Germplasm List
+                  <router-link v-bind:to="{name: 'germplasm-lists', params: {programId: activeProgram.id}}">
+                    Germplasm Lists
                   </router-link>
                 </li>
               </ul>

src/router/index.ts

@@ -66,6 +66,7 @@ import OntologyActiveTable from "@/components/ontology/OntologyActiveTable.vue";
 import OntologyArchivedTable from "@/components/ontology/OntologyArchivedTable.vue";
 import PageNotFound from "@/views/PageNotFound.vue";
 import Germplasm from "@/views/germplasm/Germplasm.vue";
+import GermplasmLists from "@/views/germplasm/GermplasmLists.vue";
 
 Vue.use(VueRouter);
 
@@ -282,13 +283,13 @@ const routes = [
         component: GermplasmTable
       },
       {
-        path: 'germplasm-list',
-        name: 'germplasm-list',
+        path: 'germplasm-lists',
+        name: 'germplasm-lists',
         meta: {
           title: 'Germplasm Lists',
           layout: layouts.userSideBar
         },
-        component: undefined
+        component: GermplasmLists
       }
     ]
   },

src/views/germplasm/Germplasm.vue

@@ -32,7 +32,7 @@
             <a>All Germplasm</a>
           </router-link>
           <router-link
-              v-bind:to="{name: 'germplasm-list', params: {programId: activeProgram.id}}"
+              v-bind:to="{name: 'germplasm-lists', params: {programId: activeProgram.id}}"
               tag="li"
               active-class="is-active"
           >

src/views/germplasm/GermplasmLists.vue

@@ -0,0 +1,40 @@
+<!--
+  - 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-lists">
+    <h1 class="title">Germplasm Lists</h1>
+    <GermplasmListsTable
+        v-on:show-success-notification="$emit('show-success-notification', $event)"
+        v-on:show-error-notification="$emit('show-error-notification', $event)"
+    >
+    </GermplasmListsTable>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component } from 'vue-property-decorator'
+import ProgramsBase from "@/components/program/ProgramsBase.vue";
+import GermplasmListsTable from "@/components/germplasm/GermplasmListsTable.vue";
+@Component({
+  components: {
+    GermplasmListsTable
+  }
+})
+export default class GermplasmLists extends ProgramsBase {
+}
+</script>