Implement UI for flagging QCs as accepted or unaccepted

lib/www/client/source/src/views/QC.vue

@@ -50,16 +50,6 @@
           <v-col col="12" sm="6">
             <p>QC checks done on {{updatedOn}}.</p>
           </v-col>
-          <v-col class="text-right">
-            <div v-if="isDirty">
-              <v-btn @click="saveLabels" small color="primary" class="mx-2">
-                Save <v-icon right>mdi-content-save</v-icon>
-              </v-btn>
-              <v-btn @click="getQCData" small color="warning" outlined class="mx-2">
-                Cancel <v-icon right>mdi-restore-alert</v-icon>
-              </v-btn>
-            </div>
-          </v-col>
         </v-row>
 
         <v-treeview
@@ -98,39 +88,11 @@
                 {{label}}
               </v-chip>
 
-              <template v-if="!item.labels || !item.labels.includes('QCAccepted')">
-                <v-hover v-slot:default="{hover}" v-if="writeaccess">
-                  <span  v-if="item.children && item.children.length">
-                    <v-btn
-                      :class="{'text--disabled': !hover}"
-                      icon
-                      small
-                      color="primary"
-                      title="Accept all"
-                      @click.stop="accept(item)">
-                      <v-icon small :color="accepted(item) ? 'green' : ''">mdi-check-all</v-icon>
-                    </v-btn>
-                    <v-btn
-                      :class="{'text--disabled': !hover}"
-                      icon
-                      small
-                      color="primary"
-                      title="Restore all"
-                      @click.stop="unaccept(item)">
-                      <v-icon small>mdi-restore</v-icon>
-                    </v-btn>
-                  </span>
-                  <v-btn v-else
-                    :class="{'text--disabled': !hover}"
-                    icon
-                    small
-                    color="primary"
-                    title="Accept this value"
-                    @click="accept(item)">
-                    <v-icon small :color="(item.children && item.children.length == 0)? 'green':''">mdi-check</v-icon>
-                  </v-btn>
-                </v-hover>
-              </template>
+              <dougal-qc-acceptance v-if="writeaccess"
+                :item="item"
+                @accept="accept"
+                @unaccept="unaccept"
+              ></dougal-qc-acceptance>
 
             </div>
             <div :title="item.remarks" @dblclick.stop.prevent="toggleChildren(item)" v-else-if="item._kind=='sequence'">
@@ -142,8 +104,21 @@
               v-text="itemCount(item)"
               >
               </v-chip>
+
+              <dougal-qc-acceptance v-if="writeaccess"
+                :item="item"
+                @accept="accept"
+                @unaccept="unaccept"
+              ></dougal-qc-acceptance>
+
             </div>
             <div class="text--secondary" v-else>
+              <dougal-qc-acceptance v-if="writeaccess"
+                :item="item"
+                @accept="accept"
+                @unaccept="unaccept"
+              ></dougal-qc-acceptance>
+
               {{item._text}}
             </div>
           </template>
@@ -164,10 +139,15 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import { withParentProps } from '@/lib/utils';
+import DougalQcAcceptance from '@/components/qc-acceptance';
 
 export default {
   name: "QC",
 
+  components: {
+    DougalQcAcceptance
+  },
+
   data () {
     return {
       updatedOn: null,
@@ -179,8 +159,7 @@ export default {
       selectedSequences: null,
       multiple: false,
       autoexpand: false,
-      itemIndex: 0,
-      isDirty: false
+      itemIndex: 0
     }
   },
 
@@ -283,44 +262,26 @@ export default {
       return sum;
     },
 
-    accepted (item) {
-      if (item._children) {
-        return item._children.every(child => this.accepted(child));
-      }
+    async accept (items) {
+      const url = `/project/${this.$route.params.project}/qc/results/accept`;
+      await this.api([url, {
+        method: "POST",
+        body: items.map(i => i.id)
+      }]);
 
-      if (item.labels) {
-        return item.labels.includes("QCAccepted");
-      }
-      return false;
+      // The open/closed state of the tree branches should stay the same, unless
+      // the tree structure itself has changed in the meanwhile.
+      await this.getQCData();
     },
 
-    accept (item) {
-      if (item._children) {
-        for (const child of item._children) {
-          this.accept(child);
-        }
-        return;
-      }
+    async unaccept (items) {
+      const url = `/project/${this.$route.params.project}/qc/results/unaccept`;
+      await this.api([url, {
+        method: "POST",
+        body: items.map(i => i.id)
+      }]);
 
-      if (!item.labels) {
-        this.$set(item, "labels", []);
-      }
-      item.labels.includes("QCAccepted") || item.labels.push("QCAccepted");
-      this.isDirty = true;
-    },
-
-    unaccept (item) {
-      if (item._children) {
-        for (const child of item._children) {
-          this.unaccept(child);
-        }
-        return;
-      }
-      const i = item.labels.indexOf("QCAccepted");
-      if (i != -1) {
-        item.labels.splice(i, 1);
-        this.isDirty = true;
-      }
+      await this.getQCData();
     },
 
     async getQCLabels () {
@@ -375,16 +336,6 @@ export default {
       await Promise.all(promises);
     },
 
-    async saveLabels () {
-      const url = `/project/${this.$route.params.project}/meta`;
-
-      const res = await this.api([url, {
-        method: "PUT",
-        body: this.resultObjects.filter(r => typeof r.value !== "undefined")
-      }]);
-      this.isDirty = false;
-    },
-
     filterByText(item, queryText) {
       if (!queryText || !item) return item;
 
@@ -495,6 +446,7 @@ export default {
       const res = await this.api([url]);
 
       if (res) {
+        this.itemIndex = 0;
         this.items = res.map(i => this.transform(i)) || [];
         this.updatedOn = res.updatedOn;
         await this.getQCLabels();
@@ -503,7 +455,6 @@ export default {
         this.updatedOn = null;
       }
 
-      this.isDirty = false;
     },
 
     ...mapActions(["api"])