Merge pull request #393 from ruxailab/fix/heuristic-edit-form

Fix/heuristic edit form

src/components/atoms/AddDescBtn.vue

@@ -85,9 +85,15 @@ export default {
     TextBox,
   },
   props: {
-    question: {
-      type: Object,
+    questionIndex: {
+      type: Number,
       required: true,
+      default: 0,
+    },
+    heuristicIndex: {
+      type: Number,
+      required: true,
+      default: 0,
     },
   },
   data: () => ({
@@ -101,6 +107,9 @@ export default {
     isMounted: false,
   }),
   computed: {
+    question() {
+      return this.$store.state.Tests.Test.testStructure[this.heuristicIndex].questions[this.questionIndex]
+    },
     testAnswerDocLength() {
             if(!this.$store.getters.testAnswerDocument) {
         return 0
@@ -116,17 +125,14 @@ export default {
     validate() {
       const valid = this.$refs.form.validate()
       if (valid && this.desc.text.length > 0) {
-        if (this.editIndex == null) this.question.descriptions.push(this.desc)
-        // this.question.descriptions[this.editIndex] = Object.assign({}, this.desc);
-        else
-          this.$set(
-            this.question.descriptions,
-            this.editIndex,
-            Object.assign({}, this.desc),
-          )
+        this.$store.commit('setupHeuristicQuestionDescription', {
+          heuristic: this.heuristicIndex,
+          question: this.questionIndex,
+          description: this.desc,
+          editIndex: this.editIndex,
+        })
 
         this.reset()
-        this.$emit('change')
       } else if (valid && this.desc.text.length == 0) {
         Vue.$toast.info(i18n.t('alerts.addDescription'))
       }

src/components/molecules/HeuristicsTable.vue

@@ -151,13 +151,13 @@
                 @click="dialogHeuris = true"
               >
                 <v-list-item-icon>
-                  <v-icon style=" color=#fca326">
+                  <v-icon style=" color:#fca326">
                     mdi-plus
                   </v-icon>
                 </v-list-item-icon>
                 <v-list-item-content>
                   <v-list-item-title
-                    style="color: #fca326"
+                    style="color:#fca326"
                     :class="{ disabledBtn: testAnswerDocLength > 0 }"
                   >
                     <strong>{{
@@ -327,10 +327,8 @@
                       <v-row justify="end" class="ma-0 pa-0">
                         <AddDescBtn
                           ref="descBtn"
-                          :question="
-                            heuristics[itemSelect].questions[questionSelect]
-                          "
-                          @change="emitChange"
+                          :question-index="questionSelect"
+                          :heuristic-index="itemSelect"
                         />
                       </v-row>
                     </v-col>
@@ -476,7 +474,7 @@
                     height="350px"
                     :headers="headers"
                     :items="
-                      heuristics[itemSelect].questions[questionSelect].questions
+                      heuristics[itemSelect].questions[questionSelect].descriptions
                     "
                     :items-per-page="5"
                   >
@@ -491,9 +489,8 @@
                           <v-row justify="end" class="ma-0 pa-0">
                             <AddDescBtn
                               ref="descBtn"
-                              :question="
-                                heuristics[itemSelect].questions[questionSelect]
-                              "
+                              :question-index="questionSelect"
+                              :heuristic-index="itemSelect"
                             />
                           </v-row>
                         </v-col>
@@ -504,7 +501,8 @@
                     <template v-slot:item.actions="{ item }">
                       <!-- table actions -->
                       <v-row justify="end" class="pr-1">
-                        <v-btn
+                        <!-- TODO: Uncomment and fix reactivity -->
+                        <!-- <v-btn
                           icon
                           small
                           class="mr-2"
@@ -513,7 +511,7 @@
                           <v-icon small>
                             mdi-pencil
                           </v-icon>
-                        </v-btn>
+                        </v-btn> -->
                         <v-btn icon small @click="deleteItem(item)">
                           <v-icon small>
                             mdi-delete
@@ -572,7 +570,6 @@ export default {
     heuristicForm: null,
     search: '',
     searchBar: false,
-    filteredHeuristics: [],
     headers: [
       {
         text: 'Title',
@@ -598,6 +595,31 @@ export default {
     csvHeuristics() {
       return this.$store.state.Tests.Test.testStructure
     },
+    filteredHeuristics() {
+      if (this.search === '') {
+        return this.heuristics.filter((item) => {
+          const searchLower = this.search.toLowerCase()
+          const idString = item.id.toString()
+
+          return (
+            item.title.toLowerCase().includes(searchLower) ||
+            idString.includes(searchLower) ||
+            idString === searchLower
+          )
+        })
+      } else {
+        return this.heuristics.filter((item) => {
+          const searchLower = this.search.toLowerCase()
+          const idString = item.id.toString()
+
+          return (
+            item.title.toLowerCase().includes(searchLower) ||
+            idString.includes(searchLower) ||
+            idString === searchLower
+          )
+        })
+      }
+    },
     heuristics() {
       return this.$store.state.Tests.Test.testStructure
         ? this.$store.state.Tests.Test.testStructure
@@ -630,9 +652,6 @@ export default {
     },
   },
   watch: {
-    search() {
-      this.updateFilteredHeuristics()
-    },
     dialogHeuris() {
       if (!this.dialogHeuris && this.heuristics.length > 0 && !this.itemEdit) {
         this.heuristicForm = {
@@ -657,7 +676,7 @@ export default {
           this.$refs.formHeuris.reset()
         }
       }
-      this.updateFilteredHeuristics()
+      // this.updateFilteredHeuristics()
     },
     itemSelect() {
       if (this.itemSelect !== null) this.questionSelect = null
@@ -676,16 +695,14 @@ export default {
         this.loader = null
       } else {
         setTimeout(() => (this[l] = false), 3000)
-        Vue.$toast.warning('No csv file selected. \nPlease select one before procede.')
+        Vue.$toast.warning(
+          'No csv file selected. \nPlease select one before procede.',
+        )
         this.loader = null
       }
     },
   },
-  mounted() {
-    this.updateFilteredHeuristics()
-  },
   async created() {
-    await this.$store.dispatch('getTest', { id: this.$route.params.id })
     if (this.heuristics.length) {
       this.heuristicForm = {
         id: this.heuristics[this.heuristics.length - 1].id + 1,
@@ -718,10 +735,6 @@ export default {
     this.heuristicForm.total = this.heuristicForm.questions.length
   },
   methods: {
-    emitChange() {
-      this.$emit('change')
-      this.$forceUpdate()
-    },
     moveItemUp(index) {
       if (index > 0) {
         const itemToMove = this.filteredHeuristics[index]
@@ -758,40 +771,13 @@ export default {
         itemBelow.id = index
       }
     },
-    updateFilteredHeuristics() {
-      if (this.search === '') {
-        this.searchBar = false
-        this.filteredHeuristics = this.heuristics.filter((item) => {
-          const searchLower = this.search.toLowerCase()
-          const idString = item.id.toString()
-
-          return (
-            item.title.toLowerCase().includes(searchLower) ||
-            idString.includes(searchLower) ||
-            idString === searchLower
-          )
-        })
-      } else {
-        this.searchBar = true
-        this.filteredHeuristics = this.heuristics.filter((item) => {
-          const searchLower = this.search.toLowerCase()
-          const idString = item.id.toString()
-
-          return (
-            item.title.toLowerCase().includes(searchLower) ||
-            idString.includes(searchLower) ||
-            idString === searchLower
-          )
-        })
-      }
-    },
     deleteHeuristic(item) {
       const config = confirm(
         `${i18n.t('alerts.deleteHeuristic')} ${this.heuristics[item].title}?`,
       )
 
       if (config) {
-        this.heuristics.splice(item, 1)
+        this.$store.commit('removeHeuristic', item)
         this.itemSelect = null
         this.questionSelect = null
       }
@@ -815,7 +801,9 @@ export default {
           ].questions.length
         }
       } else {
-        Vue.$toast.warning('Sorry, but you can\'t delete all heuristics questions')
+        Vue.$toast.warning(
+          'Sorry, but you can\'t delete all heuristics questions',
+        )
       }
 
       this.menuQuestions = false

src/components/organisms/EditHeuristicsTest.vue

@@ -16,10 +16,10 @@
     </v-tabs>
 
     <div>
-      <Heuristic v-if="index == 0" :heuristics="object.heuristics" @change="emitChange()" />
-      <OptionsTable v-if="index == 1" :options="object.options" @change="emitChange()" />
-      <ImportCsvTable v-if="index == 2" :options="object.importCsv" @change="emitChange()" />
-      <WeightTable v-if="index == 3" :options="object.weight" @change="emitChange()" />
+      <Heuristic v-if="index == 0" :heuristics="object.heuristics" />
+      <OptionsTable v-if="index == 1" :options="object.options" />
+      <ImportCsvTable v-if="index == 2" :options="object.importCsv" />
+      <WeightTable v-if="index == 3" :options="object.weight" />
     </div>
   </div>
 </template>
@@ -47,23 +47,20 @@ export default {
       type: Object,
       default: () => { },
     },
+    index: {
+      type: Number,
+      default: 0,
+    },
   },
-  data: () => ({
-    index: 0,
-  }),
   computed: {
     currentTest() {
       return this.$store.state.Tests.Test.testStructure
     },
   },
   methods: {
     tabClicked(index) {
-      this.index = index
-    },
-    emitChange() {
-      this.$emit('change')
+      this.$emit('tabClicked', index)
     },
-
   },
 }
 </script>

src/store/modules/Test.js

@@ -136,6 +136,22 @@ export default {
       state.participantCamera = ''
       state.finalMessage = ''
     },
+    removeHeuristic(state, payload) {
+      state.Test.testStructure.splice(payload, 1)
+    },
+    setupHeuristicQuestionDescription(state, payload) {
+      // If empty
+      if (state.Test.testStructure[payload.heuristic].questions[payload.question].descriptions == null) state.Test.testStructure[payload.heuristic].questions[payload.question].descriptions = []
+
+      // If is editing
+      if (payload.editIndex != null) {
+        state.Test.testStructure[payload.heuristic].questions[payload.question].descriptions[payload.editIndex] = Object.assign({}, payload.description)
+      }
+      // New Description
+      else {
+        state.Test.testStructure[payload.heuristic].questions[payload.question].descriptions.push(payload.description)
+      }
+    },
   },
   actions: {
     /**

src/views/admin/EditTestView.vue

@@ -93,7 +93,7 @@
           type="content"
           :object="object"
           :index="index"
-          @change="change = true"
+          @tabClicked="setIndex"
         />
 
         <!-- Unmoderated User tests -->
@@ -102,7 +102,6 @@
           slot="top"
           type="tabs"
           @tabClicked="setIndex"
-          @change="change = true"
         />
 
         <EditUserTest
@@ -111,7 +110,6 @@
           :object="object"
           :index="index"
           type="content"
-          @change="change = true"
           @valForm="validate"
         />
         <!-- Moderated User tests -->