[BI-563] Archive Individual Trait

src/assets/scss/main.scss

@@ -480,3 +480,8 @@ div.sentence-input {
   fill: none;
   stroke-width: 2;
 }
+
+.archive-tag {
+  background: lightgray;
+
+}

src/breeding-insight/dao/TraitDAO.ts

@@ -55,4 +55,14 @@ export class TraitDAO {
     }) as Response;
     return new BiResponse(data);
   }
+
+  static async archiveTrait(programId: string, trait: Trait): Promise<BiResponse> {
+    const { data } =  await api.call({
+      url: `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/traits/${trait.id}/archive`,
+      params: {'active': trait.active},
+      method: 'put'
+    }) as Response;
+    return new BiResponse(data);
+  }
+
 }

src/breeding-insight/model/Trait.ts

@@ -28,14 +28,16 @@ export class Trait {
   abbreviations?: Array<string>;
   synonyms?: Array<string>;
   mainAbbreviation?: string;
+  active?: boolean;
 
   constructor(id?: string,
               traitName?: string,
               programObservationLevel?: ProgramObservationLevel,
               method?: Method,
               scale?: Scale,
               abbreviations?: Array<string>,
-              synonyms?: Array<string>
+              synonyms?: Array<string>,
+              active?: boolean
               ) {
     this.id = id;
     this.traitName = traitName;
@@ -56,11 +58,16 @@ export class Trait {
     }
     this.abbreviations = abbreviations;
     this.synonyms = synonyms;
+    if (active !== undefined) {
+      this.active = active;
+    } else {
+      this.active = true;
+    }
   }
 
   static assign(trait: Trait): Trait {
     return new Trait(trait.id, trait.traitName, trait.programObservationLevel, trait.method,
-      trait.scale, trait.abbreviations, trait.synonyms);
+      trait.scale, trait.abbreviations, trait.synonyms, trait.active);
   }
 
   checkStringListEquals(list: string[] | undefined, otherList: string[] | undefined): boolean {

src/breeding-insight/service/TraitService.ts

@@ -37,22 +37,40 @@ export class TraitService {
       else throw 'Unable to create trait';
     }
 
-  static async updateTraits(programId: string, traits: Trait[]): Promise<[Trait[], Metadata]> {
-    if (programId && traits) {
-      // Check that they all have a trait id
-      if (traits.filter(trait => trait.id).length === 0) {
-        throw 'Unable to update trait';
+    static async updateTraits(programId: string, traits: Trait[]): Promise<[Trait[], Metadata]> {
+      if (programId && traits) {
+        // Check that they all have a trait id
+        if (traits.filter(trait => trait.id).length !== traits.length) {
+          throw 'Unable to update trait';
+        }
+
+        try {
+          const { result: { data }, metadata } = await TraitDAO.updateTraits(programId, traits);
+          return [data, metadata];
+        } catch (error) {
+          throw TraitUploadService.parseError(error);
+        }
       }
+      else throw 'Unable to update trait';
+    }
+
+    static async archiveTrait(programId: string, trait: Trait): Promise<Trait> {
 
-      try {
-        const { result: { data }, metadata } = await TraitDAO.updateTraits(programId, traits);
-        return [data, metadata];
-      } catch (error) {
-        throw TraitUploadService.parseError(error);
+      if (programId && trait) {
+        // Check that they all have a trait id
+        if (!trait.id){
+          throw 'Unable to update trait';
+        }
+
+        try {
+          const { result, metadata } = await TraitDAO.archiveTrait(programId, trait);
+          return Trait.assign(result);
+        } catch (error) {
+          throw TraitUploadService.parseError(error);
+        }
       }
+      else throw 'Unable to update trait';
     }
-    else throw 'Unable to update trait';
-  }
 
     static getAll(programId: string, paginationQuery?: PaginationQuery, full?: boolean): Promise<[Trait[], Metadata]> {
         return new Promise<[Trait[], Metadata]>(((resolve, reject) => {
@@ -64,10 +82,10 @@ export class TraitService {
       if (full === undefined) {
         full = false;
       }
-            
+
       if (programId) {
           TraitDAO.getAll(programId, paginationQuery, full).then((biResponse) => {
-              
+
           let traits: Trait[] = [];
 
           if (biResponse.result.data) {

src/components/tables/SidePanel.vue

@@ -35,6 +35,7 @@
     components: {}
   })
   export default class SidePanel extends Vue {
+
     @Prop()
     backgroundColorClass!: string;
     @Prop()

src/components/trait/TraitDetailPanel.vue

@@ -70,6 +70,17 @@
       <p class="has-text-weight-bold mt-3 mb-0">Description of collection method</p>
       <p>{{data.method.description}}</p>
 
+      <template v-if="!data.active">
+        <p class="has-text-weight-bold mt-3 mb-0">Included in Favorites</p>
+        <b-button
+            size="is-small"
+            style="background: lightgray"
+            class="archive-tag"
+            v-if="!data.active">
+          Archived
+        </b-button>
+      </template>
+
       <!-- maybe break out controls for reuse eventually -->
       <div class="columns is-mobile is-centered pt-6">
         <div class="column is-narrow">
@@ -84,13 +95,21 @@
         </div>
         <div class="column is-narrow">
           <a
-            v-if="archivable"
-            v-on:click="$emit('archive')"
-            v-on:keypress.enter.space="$emit('archive')"
+            v-if="data.active"
+            v-on:click="$emit('archive', data)"
+            v-on:keypress.enter.space="$emit('archive', data)"
             tabindex="0"
             >
             Archive
           </a>
+          <a
+            v-if="archivable && !data.active"
+            v-on:click="$emit('restore', data)"
+            v-on:keypress.enter.space="$emit('restore', data)"
+            tabindex="0"
+          >
+            Restore/Unarchive
+          </a>
         </div>
       </div>
     </template>

src/components/trait/TraitListsTable.vue

@@ -19,7 +19,7 @@
   <section id="traitTableLabel">
     <WarningModal
       v-bind:active.sync="deactivateActive"
-      v-bind:msg-title="'Remove trait from Program name?'"
+      v-bind:msg-title="deactivateWarningTitle"
       v-on:deactivate="deactivateActive = false"
     >
       <section>
@@ -29,8 +29,18 @@
       </section>
       <div class="columns">
         <div class="column is-whole has-text-centered buttons">
-          <button v-on:click="modalDeleteHandler()" class="button is-danger"><strong>Yes, remove</strong></button>
-          <button v-on:click="deactivateActive = false" class="button">Cancel</button>
+          <button
+            class="button is-danger"
+            v-on:click="modalDeleteHandler"
+          >
+            <strong>Yes, {{ focusTrait.active ? 'archive' : 'restore' }}</strong>
+          </button>
+          <button
+            class="button"
+            v-on:click="deactivateActive = false"
+          >
+            Cancel
+          </button>
         </div>
       </div>              
     </WarningModal>
@@ -77,6 +87,7 @@
     </NewDataForm>
 
     <SidePanelTable
+      ref="sidePanelTable"
       v-bind:records="traits"
       v-bind:pagination="traitsPagination"
       v-bind:auto-handle-close-panel-event="false"
@@ -93,6 +104,12 @@
       -->
       <template v-slot:columns="data">
         <TableColumn name="name" v-bind:label="'Name'">
+          <b-button
+              size="is-small"
+              class="archive-tag"
+              v-if="!data.active && data.active !== undefined">
+            Archived
+          </b-button>
           {{ data.traitName }}
         </TableColumn>
         <TableColumn name="level" v-bind:label="'Level'" v-bind:visible="!traitSidePanelState.collapseColumns">
@@ -118,10 +135,13 @@
           v-bind:editable="true"
           v-bind:edit-form-state="traitSidePanelState.dataFormState"
           v-bind:validation-handler="editValidationHandler"
+          v-bind:archivable="true"
           v-on:activate-edit="activateEdit($event)"
           v-on:deactivate-edit="traitSidePanelState.bus.$emit(traitSidePanelState.closePanelEvent)"
           v-on:trait-change="editTrait = Trait.assign({...$event})"
           v-on:submit="updateTrait"
+          v-on:archive="activateArchive($event)"
+          v-on:restore="activateArchive($event)"
         />
       </template>
 
@@ -205,6 +225,8 @@ export default class TraitTable extends Vue {
   private editValidationHandler: ValidationError = new ValidationError();
 
   // Archive trait
+  private focusTrait: Trait = new Trait();
+  private deactivateWarningTitle = 'Archive trait in this program?';
   private deactivateActive: boolean = false;
 
   // TODO: Move these into an event bus in the future
@@ -246,6 +268,36 @@ export default class TraitTable extends Vue {
     });
   }
 
+  activateArchive(focusTrait: Trait){
+    if (focusTrait.active) {
+      this.deactivateWarningTitle = `Archive "${focusTrait.traitName}" in ${this.activeProgram!.name!}?`;
+    } else {
+      this.deactivateWarningTitle = `Restore "${focusTrait.traitName}" to ${this.activeProgram!.name!}?`;
+    }
+    this.focusTrait = focusTrait;
+    this.deactivateActive = true;
+  }
+
+  async modalDeleteHandler(){
+    try {
+      const traitClone = JSON.parse(JSON.stringify(this.focusTrait));
+      traitClone.active = !traitClone.active;
+      const updatedTrait: Trait = await TraitService.archiveTrait(this.activeProgram!.id!, traitClone);
+
+      // Replace traits in queried traits
+      const traitIndex = this.traits.findIndex(trait => trait.id === updatedTrait.id);
+      if (traitIndex !== -1) { this.traits.splice(traitIndex, 1, updatedTrait); }
+
+      this.deactivateActive = false;
+      this.paginationController.updatePage(1);
+      this.traitSidePanelState.bus.$emit(this.traitSidePanelState.closePanelEvent);
+      this.$emit('show-success-notification', `"${traitClone.traitName}" successfully ${ traitClone.active ? 'restored' : 'archived'}`);
+    } catch(err) {
+      this.$log.error(err);
+      this.$emit('show-error-notification', `"${this.focusTrait.traitName}" could not be ${ this.focusTrait.active ? 'archived' : 'restored'}`);
+    }
+  }
+
   activateEdit(editTrait: Trait) {
     this.traitSidePanelState.bus.$emit(this.traitSidePanelState.activateEditEvent);
     this.originalTrait = Trait.assign({...editTrait} as Trait);