[BI-1477] - Improve Experiments Table

src/breeding-insight/model/Sort.ts

@@ -169,3 +169,19 @@ export class GermplasmSort {
     this.order = order;
   }
 }
+
+// experiments
+export enum ExperimentSortField {
+  Name = "name",
+  Active = "active"
+}
+
+export class ExperimentSort {
+  field: ExperimentSortField;
+  order: SortOrder;
+
+  constructor(field: ExperimentSortField, order: SortOrder) {
+    this.field = field;
+    this.order = order;
+  }
+}

src/breeding-insight/service/BrAPIService.ts

@@ -20,7 +20,8 @@ import {BiResponse, Response} from "@/breeding-insight/model/BiResponse";
 import {SortOrder} from "@/breeding-insight/model/Sort";
 
 export enum BrAPIType {
-  GERMPLASM = "germplasm"
+  GERMPLASM = "germplasm",
+  EXPERIMENT = "trials"
 }
 
 export class BrAPIService {

src/components/experiments/ExperimentsObservationsTable.vue

@@ -26,13 +26,18 @@
         v-bind:pagination="experimentsPagination"
         v-on:show-error-notification="$emit('show-error-notification', $event)"
         v-on:paginate="paginationController.updatePage($event)"
-        v-on:paginate-toggle-all="paginationController.toggleShowAll()"
+        v-on:paginate-toggle-all="paginationController.toggleShowAll(experimentsPagination.totalCount.valueOf())"
         v-on:paginate-page-size="paginationController.updatePageSize($event)"
+        backend-sorting
+        v-bind:default-sort="[fieldMap['name'], 'ASC']"
+        v-on:sort="setSort"
+        v-on:search="filters = $event"
+        v-bind:search-debounce="400"
     >
-      <b-table-column label="Title" cell-class="fixed-width-wrapped" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+      <b-table-column label="Title" field="name" cell-class="fixed-width-wrapped" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
           {{ props.row.data.trialName }}
       </b-table-column>
-      <b-table-column label="Status" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+      <b-table-column label="Status" field="active" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})" >
           {{ getStatus(props.row.data.active) }}
       </b-table-column>
       <b-table-column label="Date Created" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
@@ -64,52 +69,87 @@
 <script lang="ts">
 import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
 import {validationMixin} from 'vuelidate';
-import { mapGetters } from 'vuex'
+import {mapGetters, mapMutations} from 'vuex'
 import {Program} from "@/breeding-insight/model/Program";
-import {TrialService} from "@/breeding-insight/service/TrialService";
 import EmptyTableMessage from "@/components/tables/EmtpyTableMessage.vue";
 import TableColumn from "@/components/tables/TableColumn.vue";
-import {Metadata, Pagination} from "@/breeding-insight/model/BiResponse";
+import {BiResponse, Pagination} from "@/breeding-insight/model/BiResponse";
 import {PaginationController} from "@/breeding-insight/model/view_models/PaginationController";
 import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
 import {Trial} from '@/breeding-insight/model/Trial'
-import {Result, Err, Success, ResultGenerator } from "@/breeding-insight/model/Result";
 import ExpandableTable from '@/components/tables/expandableTable/ExpandableTable.vue';
 import {FileType} from "@/breeding-insight/model/FileType";
 import SelectModal from "@/components/modals/SelectModal.vue";
+import {CallStack} from "@/breeding-insight/utils/CallStack";
+import {
+  ExperimentSort,
+  Sort,
+  ExperimentSortField
+} from "@/breeding-insight/model/Sort";
+import {BackendPaginationController} from "@/breeding-insight/model/view_models/BackendPaginationController";
+import {UPDATE_EXPERIMENT_SORT} from "@/store/sorting/mutation-types";
 
 @Component({
   mixins: [validationMixin],
-  components: { ExpandableTable, EmptyTableMessage, TableColumn, SelectModal},
+  components: {ExpandableTable, EmptyTableMessage, TableColumn, SelectModal},
   computed: {
     ...mapGetters([
       'activeProgram'
-    ])
-  }
+    ]),
+    ...mapGetters('sorting',
+        [
+          'experimentSort'
+        ])
+  },
+  methods: {
+    ...mapMutations('sorting', {
+      updateSort: UPDATE_EXPERIMENT_SORT
+    })
+  },
+  data: () => ({Sort})
 })
 export default class ExperimentsObservationsTable extends Vue {
 
+  @Prop()
+  experimentsFetch!: (programId: string, sort: ExperimentSort, paginationController: BackendPaginationController) => (filters: any) => Promise<BiResponse>;
+
   private activeProgram?: Program;
   private experiments: Trial[] = [];
   private experimentsPagination?: Pagination = new Pagination();
   private programName: string = "Program Name";
 
   private experimentsLoading = true;
 
-  private paginationController: PaginationController = new PaginationController();
+  private paginationController: BackendPaginationController = new BackendPaginationController();
 
   private experimentDownloadTitle = 'Download Experiment';
   private experimentDownloadSubtitle = 'File Format';
   private modalActive: boolean = false;
   //private fileExtension: string;
   //private selectedExperimentDbId: string;
   private fileOptions = Object.values(FileType);
+  private filters: any = {};
+  private experimentCallStack?: CallStack;
+
+  private experimentSort!: ExperimentSort;
+  private updateSort!: (sort: ExperimentSort) => void;
+  private fieldMap: any = {
+    'name': ExperimentSortField.Name,
+    'active': ExperimentSortField.Active,
+  };
 
   mounted() {
-    this.getExperiments();
+    this.experimentCallStack = new CallStack(this.experimentsFetch(
+        this.activeProgram!.id!,
+        this.experimentSort,
+        this.paginationController
+    ));
+
+    this.paginationController.pageSize = 20;
   }
 
   @Watch('paginationController', { deep: true})
+  @Watch('filters', {deep: true})
   async getExperiments() {
     let paginationQuery: PaginationQuery = PaginationController.getPaginationSelections(
         this.paginationController.currentPage,
@@ -119,14 +159,16 @@ export default class ExperimentsObservationsTable extends Vue {
     this.paginationController.setCurrentCall(paginationQuery);
 
     try {
-      const response: Result<Error, [Trial[], Metadata]> = await TrialService.getAll(this.activeProgram!.id!, paginationQuery);
-      if(response.isErr()) throw response.value;
-      let [experiments, metadata] = response.value;
-
-      if (this.paginationController.matchesCurrentRequest(metadata.pagination)) {
-        this.experiments = experiments;
-        this.experimentsPagination = metadata.pagination;
-      }
+      const {call, callId} = this.experimentCallStack.makeCall(this.filters);
+
+      const response = await call;
+      if (!this.experimentCallStack.isCurrentCall(callId)) return;
+      this.experimentsPagination = new Pagination(response.metadata.pagination);
+      // Account for brapi 0 indexing of paging
+      this.experimentsPagination.currentPage = this.experimentsPagination.currentPage.valueOf() + 1;
+      this.experiments = response.result.data;
+      this.experimentsLoading = false;
+
     } catch (err) {
       // Display error that experiments cannot be loaded
       this.$emit('show-error-notification', 'Error while trying to load experiments');
@@ -150,14 +192,21 @@ export default class ExperimentsObservationsTable extends Vue {
     this.fileExtension = value;
   }
 
-  getStatus(active){
+  getStatus(active: boolean){
     if (active) {
       return "active";
     } else {
       return "archived";
     }
   }
 
+  setSort(field: string, order: string) {
+    if (field in this.fieldMap) {
+      this.updateSort(new ExperimentSort(this.fieldMap[field], Sort.orderAsBI(order)));
+      this.getExperiments();
+    }
+  }
+
 }
 
 </script>

src/store/sorting/getters.ts

@@ -19,6 +19,7 @@ import {GetterTree} from 'vuex';
 import {RootState} from "@/store/types";
 import {SortState} from "@/store/sorting/types";
 import {
+    ExperimentSort,
     GermplasmSort,
     LocationSort, OntologySort,
     ProgramSort,
@@ -119,5 +120,10 @@ export const getters: GetterTree<SortState, RootState> = {
     // germplasm
     germplasmSort(state: SortState): GermplasmSort {
         return state.germplasmSort;
+    },
+
+    // experiment
+    experimentSort(state: SortState): ExperimentSort {
+        return state.experimentSort;
     }
 };

src/store/sorting/index.ts

@@ -20,6 +20,8 @@ import {getters} from '@/store/sorting/getters';
 import {mutations} from '@/store/sorting/mutations';
 import {RootState} from '@/store/types';
 import {
+    ExperimentSort,
+    ExperimentSortField,
     GermplasmSort,
     GermplasmSortField,
     LocationSort,
@@ -28,7 +30,9 @@ import {
     OntologySortField,
     ProgramSort,
     ProgramSortField,
-    SortOrder, SystemUserSort, SystemUserSortField,
+    SortOrder,
+    SystemUserSort,
+    SystemUserSortField,
     UserSort,
     UserSortField
 } from "@/breeding-insight/model/Sort";
@@ -58,7 +62,11 @@ state = {
     programSort: new ProgramSort(ProgramSortField.Name, SortOrder.Ascending),
 
     // germplasm table
-    germplasmSort: new GermplasmSort(GermplasmSortField.AccessionNumber, SortOrder.Ascending)
+    germplasmSort: new GermplasmSort(GermplasmSortField.AccessionNumber, SortOrder.Ascending),
+
+    //experiment and observation table
+    experimentSort: new ExperimentSort(ExperimentSortField.Name, SortOrder.Ascending)
+
 };
 
 const namespaced: boolean = true

src/store/sorting/mutation-types.ts

@@ -42,3 +42,6 @@ export const UPDATE_PROGRAM_SORT = 'updateProgramSort';
 
 // germplasm table
 export const UPDATE_GERMPLASM_SORT = 'updateGermplasmSort';
+
+// experiment table
+export const UPDATE_EXPERIMENT_SORT = 'updateExperimentSort';

src/store/sorting/mutations.ts

@@ -26,10 +26,13 @@ import {
     ACTIVE_ONT_TOGGLE_SORT_ORDER,
     ARCHIVED_ONT_TOGGLE_SORT_ORDER,
     IMPORT_PREVIEW_ONT_TOGGLE_SORT_ORDER,
-    IMPORT_PREVIEW_ONT_NEW_SORT_COLUMN, UPDATE_GERMPLASM_SORT
+    IMPORT_PREVIEW_ONT_NEW_SORT_COLUMN,
+    UPDATE_GERMPLASM_SORT,
+    UPDATE_EXPERIMENT_SORT
 } from "@/store/sorting/mutation-types";
 import {SortState} from "@/store/sorting/types";
 import {
+    ExperimentSort,
     GermplasmSort,
     LocationSort, OntologySort, OntologySortField,
     ProgramSort, SortOrder, SystemUserSort,
@@ -90,5 +93,11 @@ export const mutations: MutationTree<SortState> = {
     [UPDATE_GERMPLASM_SORT](state: SortState, sort: GermplasmSort) {
         state.germplasmSort.field = sort.field;
         state.germplasmSort.order = sort.order;
+    },
+
+    //experiments and observations table
+    [UPDATE_EXPERIMENT_SORT](state: SortState, sort: ExperimentSort) {
+        state.experimentSort.field = sort.field;
+        state.experimentSort.order = sort.order;
     }
 };

src/store/sorting/types.ts

@@ -1,4 +1,5 @@
 import {
+    ExperimentSort,
     GermplasmSort,
     LocationSort,
     OntologySort,
@@ -32,4 +33,7 @@ export interface SortState {
 
     // germplasm table
     germplasmSort: GermplasmSort
+
+    // experiment and observation table
+    experimentSort: ExperimentSort
 }

src/views/experiments-and-observations/ExperimentsAndObservations.vue

@@ -38,6 +38,7 @@
     <ExperimentsObservationsTable
         v-on:show-success-notification="$emit('show-success-notification', $event)"
         v-on:show-error-notification="$emit('show-error-notification', $event)"
+        v-bind:experiments-fetch="experimentsFetch"
     >
     </ExperimentsObservationsTable>
   </div>
@@ -50,6 +51,10 @@ import {PlusCircleIcon} from 'vue-feather-icons'
 import {mapGetters} from "vuex";
 import {Program} from "@/breeding-insight/model/Program";
 import TrialsAndStudiesBase from "@/components/trials/TrialsAndStudiesBase.vue";
+import {ExperimentSort, ExperimentSortField} from "@/breeding-insight/model/Sort";
+import {BackendPaginationController} from "@/breeding-insight/model/view_models/BackendPaginationController";
+import {BiResponse} from "@/breeding-insight/model/BiResponse";
+import {BrAPIService, BrAPIType} from "@/breeding-insight/service/BrAPIService";
 
 @Component({
   components: {
@@ -65,5 +70,18 @@ export default class ExperimentsAndObservations extends TrialsAndStudiesBase {
 
   private activeProgram?: Program;
 
+  // Set the method used to populate the experiment table
+  private experimentsFetch: (programId: string, sort: ExperimentSort, paginationController: BackendPaginationController) => ((filters: any) => Promise<BiResponse>) =
+      function (programId: string, sort: ExperimentSort, paginationController: BackendPaginationController) {
+        return function (filters: any) {
+          return BrAPIService.get<ExperimentSortField>(
+              BrAPIType.EXPERIMENT,
+              programId,
+              sort,
+              { pageSize: paginationController.pageSize, page: paginationController.currentPage - 1 },
+              filters)
+        };
+      };
+
 }
 </script>