[BI-2758] - Autocomplete

src/breeding-insight/dao/ObservationUnitDAO.ts

@@ -37,4 +37,19 @@ export class ObservationUnitDAO {
       return ResultGenerator.err(error);
     }  
   }
+
+  static async getObservationLevels(programId: string): Promise<Result<Error, BiResponse>> {
+    try {
+      const { data } = await api.call({
+        url: `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/brapi/v2/observationlevels`,
+        method: 'get'
+      }) as Response;
+
+      return ResultGenerator.success(new BiResponse(data));
+
+    } catch (error) {
+      return ResultGenerator.err(error);
+    }
+  }
+
 }

src/breeding-insight/dao/ProgramDAO.ts

@@ -108,4 +108,13 @@ export class ProgramDAO {
     return new BiResponse(data);
   }
 
+  static async getObservationLevelNames(programId: string): Promise<BiResponse> {
+
+    const { data } =  await api.call({
+      url: `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/brapi/v2/observationlevelnames`,
+      method: 'get'
+    }) as Response;
+    return new BiResponse(data);
+
+  }
 }

src/breeding-insight/service/ObservationUnitService.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 {Result, ResultGenerator} from "@/breeding-insight/model/Result";
+import {ObservationUnitDAO} from "@/breeding-insight/dao/ObservationUnitDAO";
+import {BiResponse, Metadata} from "@/breeding-insight/model/BiResponse";
+import {ProgramObservationLevel} from "@/breeding-insight/model/ProgramObservationLevel";
+
+export class ObservationUnitService {
+
+    static async getObservationLevels(programId: string): Promise<Result<Error, [ProgramObservationLevel[], Metadata]>> {
+        if (!programId) {
+            return ResultGenerator.err(new Error('Missing or invalid program id'));
+        }
+
+        let response: Result<Error, BiResponse>;
+        response = await ObservationUnitDAO.getObservationLevels(programId) as Result<Error, BiResponse>;
+
+        const frontendModel = (res: BiResponse): [ProgramObservationLevel[], Metadata] => {
+            let levels: ProgramObservationLevel[] = [];
+            let {result: {data}, metadata} = res;
+
+            levels = data.map((level: any) => {
+                return new ProgramObservationLevel(level.levelName!);
+            });
+
+            return [levels, metadata];
+        }
+
+        return response.applyResult(frontendModel);
+    }
+
+}

src/breeding-insight/service/ProgramService.ts

@@ -140,5 +140,13 @@ export class ProgramService {
     else return;
   }
 
+  static async getObservationLevelNames(programId: string): Promise<[ProgramObservationLevel[], Metadata] | void> {
+    if (programId) {
+      const { result: { data }, metadata } = await ProgramDAO.getObservationLevelNames(programId);
+      return [data, metadata];
+    }
+    else return;
+  }
+
 }
 

src/components/experiments/ExperimentsObservationsTable.vue

@@ -59,7 +59,7 @@
       </b-table-column>
       <b-table-column label="Datasets" cell-class="fixed-width-wrapped" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
         <template v-for="dataset in props.row.data.additionalInfo.datasets">
-          <span v-bind:key="dataset.id" class="tag is-info is-normal mr-1">{{ dataset.name }}</span>
+          <span v-bind:key="dataset.id" class="tag is-info is-normal mr-1">{{ StringFormatters.toStartCase(dataset.name) }}</span>
         </template>
       </b-table-column>
       <b-table-column field="data.listDbId" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
@@ -97,6 +97,7 @@ import {UPDATE_EXPERIMENT_SORT} from "@/store/sorting/mutation-types";
 import {BrAPIUtils} from "@/breeding-insight/utils/BrAPIUtils";
 import ExperimentObservationsDownloadModal from "@/components/experiments/ExperimentObservationsDownloadModal.vue";
 import {DatasetMetadata} from "@/breeding-insight/model/DatasetMetadata";
+import {StringFormatters} from "../../breeding-insight/utils/StringFormatters";
 
 @Component({
   mixins: [validationMixin],
@@ -115,7 +116,7 @@ import {DatasetMetadata} from "@/breeding-insight/model/DatasetMetadata";
       updateSort: UPDATE_EXPERIMENT_SORT
     })
   },
-  data: () => ({Sort, BrAPIUtils})
+  data: () => ({Sort, BrAPIUtils, StringFormatters})
 })
 export default class ExperimentsObservationsTable extends Vue {
 

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

@@ -148,7 +148,7 @@
             tag="li"
             active-class="is-active"
           >
-            <a>{{ dataset.name }}</a>
+            <a>{{ StringFormatters.toStartCase(dataset.name) }}</a>
           </router-link>
         </ul>
       </nav>
@@ -185,6 +185,12 @@ import {DatasetModel} from "@/breeding-insight/model/DatasetModel";
 import ExperimentAddCollaboratorModal from "@/components/experiments/ExperimentAddCollaboratorModal.vue";
 import ExperimentCollaboratorRemovalModal from "@/components/experiments/ExperimentCollaboratorRemovalModal.vue";
 import {ProgramService} from "@/breeding-insight/service/ProgramService";
+import {ObservationUnitService} from "@/breeding-insight/service/ObservationUnitService";
+import {StringFormatters} from "@/breeding-insight/utils/StringFormatters";
+import {Observation} from "@/breeding-insight/model/Observation";
+import {Metadata} from "@/breeding-insight/model/BiResponse";
+import {ObservationService} from "@/breeding-insight/service/ObservationService";
+import {ProgramObservationLevel} from "@/breeding-insight/model/ProgramObservationLevel";
 
 @Component({
   components: {
@@ -203,7 +209,8 @@ import {ProgramService} from "@/breeding-insight/service/ProgramService";
   },
   directives: {
     ClickOutside
-  }
+  },
+  data: () => ({StringFormatters})
 })
 export default class ExperimentDetails extends ProgramsBase {
   private activeProgram: Program;
@@ -334,23 +341,27 @@ export default class ExperimentDetails extends ProgramsBase {
   @Watch('$route')
   async getProgramDatasetNames() {
     try {
-      const response = await ProgramService.getObservationLevels(this.activeProgram!.id!);
-      if (response) {
-        const [observationLevels, metadata] = response;
-        this.programDatasetNames = observationLevels.map(value => value.name!);
+      const response: Result<Error, [ProgramObservationLevel[], Metadata]> = await ObservationUnitService.getObservationLevels(this.activeProgram!.id!);
+      if(response.isErr()) {
+        this.$emit('show-error-notification', 'Unable to retrieve program dataset names');
+      }
+
+      if (response.isSuccess()) {
+        const [observationLevelNames, metadata] = response.value;
+        this.programDatasetNames = observationLevelNames.map(value => StringFormatters.toStartCase(value.name!));
         return;
       }
     } catch (error) {
-      this.$emit('show-error-notification', 'Unable to retrieve program entity names');
+      this.$emit('show-error-notification', 'Unable to retrieve program dataset names');
     }
-    this.$emit('show-error-notification', 'Unable to retrieve program entity names');
+    this.$emit('show-error-notification', 'Unable to retrieve program dataset names');
     return;
   }
 
   //Retrieves entity names in experiment
   @Watch('datasetMetadata')
   async getExperimentDatasetNames() {
-    this.experimentDatasetNames = this.datasetMetadata.map(value => value.name!);
+    this.experimentDatasetNames = this.datasetMetadata.map(value => StringFormatters.toStartCase(value.name!));
     return;
   }
 

src/views/import/Dataset.vue

@@ -244,23 +244,27 @@
             v-slot="props"
             field="data.obsUnitId"
             v-bind:label="obsUnitIDLabel"
+            width="320"
             sortable
             searchable
-            :th-attrs="() => ({scope:'col'})"
+            :th-attrs="() => ({scope:'col', class: 'uuid-column'})"
+            cell-class="uuid-column"
         >
-          {{ props.row.data.obsUnitId }}
+          <span class="uuid-value">{{ props.row.data.obsUnitId }}</span>
         </b-table-column>
 
         <b-table-column
             v-if="isSubEntity"
             v-slot="props"
             field="data.subObsUnitId"
             v-bind:label="subObsUnitIDLabel"
+            width="320"
             sortable
             searchable
-            :th-attrs="() => ({scope:'col'})"
+            :th-attrs="() => ({scope:'col', class: 'uuid-column'})"
+            cell-class="uuid-column"
         >
-          {{ props.row.data.subObsUnitId }}
+          <span class="uuid-value">{{ props.row.data.subObsUnitId }}</span>
         </b-table-column>
 
         <b-table-column
@@ -310,6 +314,7 @@ import {StudyService} from "@/breeding-insight/service/StudyService";
 import {BrAPIService, BrAPIType} from '@/breeding-insight/service/BrAPIService';
 import {SortOrder} from "@/breeding-insight/model/Sort";
 import {DatasetMetadata} from "@/breeding-insight/model/DatasetMetadata";
+import {StringFormatters} from "@/breeding-insight/utils/StringFormatters";
 
 @Component({
   components: {
@@ -614,8 +619,8 @@ export default class Dataset extends ProgramsBase {
   }
 
   setObsUnitIDLabel(){
-    this.obsUnitIDLabel = this.observationUnit + " ObsUnitID"
-    if (this.isSubEntity) this.subObsUnitIDLabel = this.subObservationUnit + " ObsUnitID"
+    this.obsUnitIDLabel = StringFormatters.toStartCase(this.observationUnit) + " ObsUnitID"
+    if (this.isSubEntity) this.subObsUnitIDLabel = StringFormatters.toStartCase(this.subObservationUnit) + " ObsUnitID"
   }
 
   @Watch('$route')
@@ -671,3 +676,16 @@ export default class Dataset extends ProgramsBase {
 }
 
 </script>
+
+<style scoped>
+.uuid-column {
+  min-width: 22rem;
+  white-space: nowrap;
+  word-break: normal;
+  overflow-wrap: normal;
+}
+
+.uuid-value {
+  white-space: nowrap;
+}
+</style>