[BI-85,BI-646] - Create new trait UI

package.json

@@ -18,7 +18,6 @@
     "@types/promise.allsettled": "^1.0.3",
     "@types/vuelidate": "^0.7.10",
     "@xstate/fsm": "^1.4.0",
-    "buefy": "^0.8.8",
     "core-js": "^3.4.3",
     "focus-trap": "^5.1.0",
     "focus-trap-vue": "0.0.6",
@@ -37,6 +36,7 @@
     "vuex-class": "^0.3.2"
   },
   "devDependencies": {
+    "@creativebulma/bulma-divider": "^1.1.0",
     "@types/chai": "^4.2.7",
     "@types/jest": "^24.9.0",
     "@vue/cli-plugin-babel": "^4.1.0",
@@ -54,6 +54,7 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^24.9.0",
     "babel-preset-env": "^1.7.0",
+    "buefy": "^0.9.4",
     "bulma": "^0.9.1",
     "bulma-divider": "^0.2.0",
     "chai": "^4.1.2",

src/assets/scss/main.scss

@@ -79,12 +79,23 @@ $table-striped-row-even-hover-background-color:$link-light;
 
 //$margin-right: 2 rem;
 
+// Import buefy before bulma
+@import "~bulma/sass/utilities/_all";
+
+// Customize buefy if you want to here
+
+
 // Update some of Bulma's component variables
 
 //Enable this import line when Bulma is in a local folder called "bulma"
 //@import 'bulma/bulma';
 // Enable this import line instead when Bulma is in package.json
-@import '../../../node_modules/bulma/bulma.sass';
+@import '~bulma';
+@import "~buefy/src/scss/buefy";
+
+// Bulma extensions
+$divider-margin-inner-size: 0;
+@import "~@creativebulma/bulma-divider";
 
 // Overrides that can't be done with variables go here
 // may be broken out into a separate file later
@@ -170,12 +181,12 @@ footer {
 
 .field {
   &.field--error {
-    & span.form-error {
+    & .field span.form-error {
       display: block;
     }
   }
   &:not(.field--error) {
-    & span.form-error {
+    & .field span.form-error {
       display: none;
     }
   }
@@ -431,3 +442,19 @@ a.is-underlined {
     color: white;
   }
 }
+
+div.sentence-input {
+  display: flex;
+  align-items: flex-start;
+  p.is-input-prepend {
+  }
+  .field {
+    margin-left: 10px;
+  }
+}
+
+// Buefy messes this up
+.icon svg {
+  fill: none;
+  stroke-width: 2;
+}

src/breeding-insight/dao/ProgramDAO.ts

@@ -16,10 +16,11 @@
  */
 
 import {Program} from "@/breeding-insight/model/Program";
-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";
 
+
 export class ProgramDAO {
 
   static create(program: Program): Promise<BiResponse> {
@@ -88,4 +89,13 @@ export class ProgramDAO {
     }))
   }
 
+  static async getObservationLevels(programId: string): Promise<BiResponse> {
+
+    const { data } =  await api.call({
+      url: `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/observation_level`,
+      method: 'get'
+    }) as Response;
+    return new BiResponse(data);
+  }
+
 }

src/breeding-insight/dao/TraitDAO.ts

@@ -16,14 +16,10 @@
  */
 
 import {Trait} from "@/breeding-insight/model/Trait";
-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";
 
-interface Response {
-  data: any
-}
-
 export class TraitDAO {
 
     static getAll(programId: string, paginationQuery: PaginationQuery, full : boolean): Promise<BiResponse> {

src/breeding-insight/dao/TraitUploadDAO.ts

@@ -61,5 +61,11 @@ export class TraitUploadDAO {
     }))
   }
 
+  static async confirmUpload(programId: string, traitUploadId: string) {
+    await api.call({
+      url: `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/trait-upload/${traitUploadId}`,
+      method: 'post' });
+  }
+
 
 }

src/breeding-insight/model/BiResponse.ts

@@ -65,4 +65,8 @@ class Status {
     this.messageType = statusMap.messageType;
     this.message = statusMap.message;
   }
+}
+
+export interface Response {
+  data: any
 }

src/breeding-insight/model/ObservationLevel.ts

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+export class ObservationLevel {
+  id?: string;
+  name?: string;
+
+  constructor(id?:string, name?:string) {
+    this.id = id;
+    this.name = name;
+  }
+}

src/breeding-insight/model/ProgramUpload.ts

@@ -19,7 +19,7 @@ import {Trait} from "@/breeding-insight/model/Trait";
 
 export class ProgramUpload {
   id?: string;
-  data?: Array<Trait>;
+  data?: Trait[];
 
   constructor(id?:string, data?:Array<Trait>) {
     this.id = id;

src/breeding-insight/model/Trait.ts

@@ -27,6 +27,7 @@ export class Trait {
   scale?: Scale;
   abbreviations?: Array<string>;
   synonyms?: Array<string>;
+  mainAbbreviation?: string;
 
   constructor(id?:string,
               traitName?:string, 

src/breeding-insight/service/ProgramService.ts

@@ -20,6 +20,7 @@ import {Program} from "@/breeding-insight/model/Program";
 import {Metadata, Pagination} from "@/breeding-insight/model/BiResponse";
 import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
 import {PaginationController} from "@/breeding-insight/model/view_models/PaginationController";
+import {ProgramObservationLevel} from "@/breeding-insight/model/ProgramObservationLevel";
 
 export class ProgramService {
 
@@ -122,5 +123,13 @@ export class ProgramService {
     }));
   }
 
+  static async getObservationLevels(programId: string): Promise<[ProgramObservationLevel[], Metadata] | void> {
+    if (programId) {
+      const { result: { data }, metadata } = await ProgramDAO.getObservationLevels(programId);
+      return [data, metadata];
+    }
+    else return;
+  }
+
 }
 

src/breeding-insight/service/TraitService.ts

@@ -20,15 +20,21 @@ import {Trait} from "@/breeding-insight/model/Trait";
 import {Metadata} from "@/breeding-insight/model/BiResponse";
 import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
 import {PaginationController} from "@/breeding-insight/model/view_models/PaginationController";
+import {TraitUploadService} from "@/breeding-insight/service/TraitUploadService";
+import {ValidationError} from "@/breeding-insight/model/errors/ValidationError";
 
 export class TraitService {
 
-    static async createTraits(programId: string, newTraits: Trait[]): Promise<[Trait[], Metadata] | void> {
+    static async createTraits(programId: string, newTraits: Trait[]): Promise<[Trait[], Metadata]> {
       if (programId) {
-           const { result: { data }, metadata } = await TraitDAO.createTraits(programId, newTraits);
-           return [data, metadata];
-       }
-      else return;
+        try {
+          const { result: { data }, metadata } = await TraitDAO.createTraits(programId, newTraits);
+          return [data, metadata];
+        } catch (error) {
+          throw TraitUploadService.parseError(error);
+        }
+      }
+      else throw 'Unable to create trait';
     }
 
     static getAll(programId: string, paginationQuery?: PaginationQuery, full?: boolean): Promise<[Trait[], Metadata]> {
@@ -48,6 +54,8 @@ export class TraitService {
           let traits: Trait[] = [];
 
           if (biResponse.result.data) {
+            //TODO: Remove when backend default sorting is implemented
+            biResponse.result.data = PaginationController.mockSortRecords(biResponse.result.data);
             traits = biResponse.result.data.map((trait: any) => {
                 return trait as Trait;
             });

src/breeding-insight/service/TraitUploadService.ts

@@ -22,6 +22,7 @@ import {Trait} from "@/breeding-insight/model/Trait";
 import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
 import {PaginationController} from "@/breeding-insight/model/view_models/PaginationController";
 import {ValidationError} from "@/breeding-insight/model/errors/ValidationError";
+import {ProgramDAO} from "@/breeding-insight/dao/ProgramDAO";
 
 export class TraitUploadService {
 
@@ -73,8 +74,8 @@ export class TraitUploadService {
     });
   }
 
-  static getTraits(programId: string, paginationQuery?: PaginationQuery): Promise<[Trait[], Metadata]> {
-    return new Promise<[Trait[], Metadata]>(((resolve, reject) => {
+  static getTraits(programId: string, paginationQuery?: PaginationQuery): Promise<[ProgramUpload, Metadata]> {
+    return new Promise<[ProgramUpload, Metadata]>(((resolve, reject) => {
 
       if (paginationQuery === undefined){
         paginationQuery = new PaginationQuery(0, 0, true);
@@ -96,7 +97,9 @@ export class TraitUploadService {
           [traits, newPagination] = PaginationController.mockPagination(traits, paginationQuery!.page, paginationQuery!.pageSize, paginationQuery!.showAll);
           biResponse.metadata.pagination = newPagination;
 
-          resolve([traits, biResponse.metadata]);
+          let upload: ProgramUpload = new ProgramUpload(biResponse.result.id, traits);
+
+          resolve([upload, biResponse.metadata]);
 
         }).catch((error) => reject(error));
 
@@ -106,6 +109,15 @@ export class TraitUploadService {
     }));
   }
 
+  static async confirmUpload(programId: string, traitUploadId: string): Promise<void|Error> {
+    try {
+      await TraitUploadDAO.confirmUpload(programId, traitUploadId);
+      return;
+    } catch (error) {
+      throw 'Error saving traits';
+    }
+  }
+
   static parseError(error: any): ValidationError | string {
 
     const jsonError = error.response;

src/components/forms/BaseFieldWrapper.vue

@@ -17,27 +17,33 @@
 
 <template>
   <div class="field" v-bind:class="{ 'field--error': fieldError }">
-    <label class="label" v-bind:for="fieldName">
-      {{ fieldName }}
-    </label>
-    <div class="control">
-      <slot></slot>
-      <template v-for="(validationMap, index) in validationSpec">
-        <span
-            data-testid="formError"
-            v-bind:key="fieldName + validationMap.name + index"
-            class="form-error has-text-danger"
-            :class="{ 'is-hidden': ( validateTypeError(validationMap.name) ) }"
-        >
-          {{ validationMap.message }}
-        </span>
-      </template>
-      <p
-          v-if="fieldHelp !== null"
-          class="help"
-      >
-        {{ fieldHelp }}
-      </p>
+    <div class="field-label is-normal has-text-left">
+      <label class="label is-left" v-bind:for="fieldName" v-bind:class="{'is-sr-only': !showLabel}">
+        {{ fieldName }}
+      </label>
+    </div>
+    <div class="field-body">
+      <div class="field">
+        <div class="control">
+          <slot></slot>
+          <template v-for="(validationMap, index) in validationSpec">
+            <span
+                data-testid="formError"
+                v-bind:key="fieldName + validationMap.name + index"
+                class="form-error has-text-danger"
+                :class="{ 'is-hidden': ( validateTypeError(validationMap.name) ) }"
+            >
+              {{ validationMap.message }}
+            </span>
+          </template>
+          <p
+              v-if="fieldHelp !== null"
+              class="help"
+          >
+            {{ fieldHelp }}
+          </p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -55,6 +61,8 @@
     fieldHelp!: string;
     @Prop()
     validations!: any;
+    @Prop({default: true})
+    showLabel!: boolean;
 
     get validationSpec(): Object[] {
 

src/components/forms/BasicSelectField.vue

@@ -20,6 +20,7 @@
       v-bind:validations="validations"
       v-bind:field-help="fieldHelp"
       v-bind:field-name="fieldName"
+      v-bind:show-label="showLabel"
   >
     <div class="select is-fullwidth">
       <select
@@ -35,11 +36,11 @@
         </template>
         <option
             v-for="option in options"
-            v-bind:key="option.id"
-            v-bind:selected="option.id === selectedId"
-            v-bind:value="option.id"
+            v-bind:key="option.id || option"
+            v-bind:selected="option.id ? option.id === selectedId : option === selectedId"
+            v-bind:value="option.id || option"
         >
-          {{ option.name }}
+          {{ option.name || option }}
         </option>
       </select>
     </div>
@@ -66,6 +67,8 @@
     validations!: any;
     @Prop()
     emptyValueName!: string;
+    @Prop()
+    showLabel!: boolean;
 
 
     displayDefault() {