From b13ad954fc52e2f46ca87a6f152b4880ec451778 Mon Sep 17 00:00:00 2001
From: JulioManoel <juliobonow@gmail.com>
Date: Sun, 25 Aug 2024 22:46:14 -0300
Subject: [PATCH] feat: Add new method test card sorting

---
 src/components/atoms/InputTextEditTest.vue    |  32 ++--
 .../organisms/CardsEditCardSorting.vue        | 160 ++++++++++++++++++
 ...ting.vue => CategoriesEditCardSorting.vue} |  78 ++++++---
 .../organisms/PostTestEditCardSorting.vue     |  70 ++++++++
 ...Sorting.vue => PreTestEditCardSorting.vue} |  33 ++--
 src/router/modules/cardSorting.js             |   8 +
 src/store/modules/Test.js                     |  14 ++
 src/views/cardSorting/EditTestView.vue        |  78 ++++++---
 src/views/cardSorting/ManagerView.vue         |   2 +-
 src/views/cardSorting/TestView.vue            |   9 +
 10 files changed, 403 insertions(+), 81 deletions(-)
 create mode 100644 src/components/organisms/CardsEditCardSorting.vue
 rename src/components/organisms/{CategoriesCardSorting.vue => CategoriesEditCardSorting.vue} (61%)
 create mode 100644 src/components/organisms/PostTestEditCardSorting.vue
 rename src/components/organisms/{PreTestCardSorting.vue => PreTestEditCardSorting.vue} (82%)
 create mode 100644 src/views/cardSorting/TestView.vue

diff --git a/src/components/atoms/InputTextEditTest.vue b/src/components/atoms/InputTextEditTest.vue
index 8f3a6dcb..215f529f 100644
--- a/src/components/atoms/InputTextEditTest.vue
+++ b/src/components/atoms/InputTextEditTest.vue
@@ -3,23 +3,23 @@
     <v-row justify="center">
       <v-text-field
         v-if="type === 'textField'"
-        v-model="data"
+        v-model="internalValue"
         outlined
         color="orange"
         class="mx-3"
         :label="label"
-        @change="$emit('change', data)"
+        @change="$emit('change', internalValue)"
       />
 
       <v-textarea
         v-else
-        v-model="data"
+        v-model="internalValue"
         :rows="rows"
         outlined
         color="orange"
         class="mx-3"
         :label="label"
-        @change="$emit('change', data)"
+        @change="$emit('change', internalValue)"
       />
     </v-row>
   </v-container>
@@ -28,6 +28,11 @@
 <script>
 export default {
   props: {
+    value: {
+      type: String,
+      required: true
+    },
+
     type: {
       type: String,
       default: 'textArea',
@@ -47,15 +52,16 @@ export default {
     },
   },
 
-  data: () => ({
-    data: '',
-  }),
-
-  watch: {
-    data (newValue) {
-      this.$emit('input', newValue)
-    },
-  },
+  computed: {
+    internalValue: {
+      get() {
+        return this.value
+      },
+      set(newValue) {
+        this.$emit('input', newValue)
+      }
+    }
+  }
 }
 </script>
 
diff --git a/src/components/organisms/CardsEditCardSorting.vue b/src/components/organisms/CardsEditCardSorting.vue
new file mode 100644
index 00000000..087eebf6
--- /dev/null
+++ b/src/components/organisms/CardsEditCardSorting.vue
@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <!-- Create Dialog -->
+    <CreateVariable 
+      :dialog="dialog"
+      title="Card"
+      @close="dialog = false"
+      @save="save"
+    />
+
+    <CardForm
+      v-if="cards.length === 0"
+      title="Cards"
+      subtitle="Cards are items that represent ideas or information in a categorization exercise. Each card must be clear and concise, allowing the person being evaluated to organize them logically within the categories."
+    >
+      <v-row justify="center">
+        <v-col cols="8">
+          <CardButton
+            icon="mdi-plus-circle"
+            text="Add your first Card"
+            @click="dialog = true"
+          />
+        </v-col>
+      </v-row>
+    </CardForm>
+
+    <Draggable
+      v-model="cards"
+      class="list-group"
+      @start="dragging = true"
+      @end="dragging = false"
+    >
+      <v-card
+        v-for="(card, i) in cards"
+        :key="i"
+        class="cards mb-5"
+      >
+        <v-col cols="12" class="pb-0 px-5">
+          <v-icon style="cursor: pointer;">
+            mdi-drag
+          </v-icon>
+          
+          <span class="cardsTitle ml-3">{{ card.title }}</span>
+          <br />
+          <span class="cardsSubtitle ml-9">{{ card.description }}</span>
+          
+          <v-icon class="delete-icon" @click="deleteCategory(i)">
+            mdi-delete
+          </v-icon>
+        </v-col>
+      </v-card>
+    </Draggable>
+
+    <v-row justify="center" v-if="cards.length > 0">
+      <v-btn
+        fab
+        depressed
+        dark
+        color="rgb(249, 168, 38)"
+        @click="dialog = true"
+      >
+        <v-icon size="35">
+          mdi-plus
+        </v-icon>
+      </v-btn>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import CardButton from '@/components/atoms/CardButton'
+import CardForm from '@/components/molecules/CardForm'
+import CreateVariable from '@/components/dialogs/CreateVariable'
+import Draggable from 'vuedraggable'
+
+export default {
+  components: {
+    CardButton,
+    CardForm,
+    CreateVariable,
+    Draggable,
+  },
+
+  data: () => ({
+    cards: [],
+    dialog: false,
+    dragging: false,
+  }),
+
+  computed: {
+    test() {
+      return this.$store.getters.test
+    },
+
+    testStructure() {
+      return this.$store.getters.testStructure
+    },
+  },
+
+  watch: {
+    cards (newValue) {
+      this.$store.commit('SET_CARD_TEST_STRUCTURE', this.cards)
+      this.$store.commit('SET_LOCAL_CHANGES', true)
+    },
+  },
+
+  created() {
+    if (!this.testStructure) {
+      this.$store.commit('SET_TEST_STRUCTURE', this.test.testStructure)
+    }
+
+    const { cards = [] } = this.testStructure?.cardSorting || {}
+    this.cards = cards
+  },
+
+  methods: {
+    save(item) {
+      this.dialog = false
+      this.cards.push(item)
+    },
+
+    deleteCategory(i) {
+      this.cards.splice(i, 1)
+    }
+  },
+}
+</script>
+
+<style scoped>
+.cards {
+  border-radius: 20px;
+}
+
+.cardsTitle {
+  color: #455a64;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+.cardsSubtitle {
+  color: #455a64;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.delete-icon {
+  position: absolute;
+  top: 20px;
+  right: 25px;
+  cursor: pointer;
+}
+
+.v-text-field--outlined >>> fieldset {
+  border-radius: 25px;
+  border: 1px solid #ffceb2;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/organisms/CategoriesCardSorting.vue b/src/components/organisms/CategoriesEditCardSorting.vue
similarity index 61%
rename from src/components/organisms/CategoriesCardSorting.vue
rename to src/components/organisms/CategoriesEditCardSorting.vue
index 85149cb4..c7f7c750 100644
--- a/src/components/organisms/CategoriesCardSorting.vue
+++ b/src/components/organisms/CategoriesEditCardSorting.vue
@@ -17,7 +17,7 @@
         <v-col cols="8">
           <CardButton
             icon="mdi-plus-circle"
-            text="Add your first task"
+            text="Add your first Category"
             @click="dialog = true"
           />
         </v-col>
@@ -30,27 +30,25 @@
       @start="dragging = true"
       @end="dragging = false"
     >
-      <transition-group>
-        <v-card
-          v-for="(category, i) in categories"
-          :key="i"
-          class="cards mb-5"
-        >
-          <v-col cols="12" class="pb-0 px-5">
-            <v-icon style="cursor: pointer;">
-              mdi-drag
-            </v-icon>
-            
-            <span class="cardsTitle ml-3">{{ category.title }}</span>
-            <br />
-            <span class="cardsSubtitle ml-9">{{ category.description }}</span>
-            
-            <v-icon class="delete-icon" @click="deleteCategory(i)">
-              mdi-delete
-            </v-icon>
-          </v-col>
-        </v-card>
-      </transition-group>
+      <v-card
+        v-for="(category, i) in categories"
+        :key="i"
+        class="cards mb-5"
+      >
+        <v-col cols="12" class="pb-0 px-5">
+          <v-icon style="cursor: pointer;">
+            mdi-drag
+          </v-icon>
+          
+          <span class="cardsTitle ml-3">{{ category.title }}</span>
+          <br />
+          <span class="cardsSubtitle ml-9">{{ category.description }}</span>
+          
+          <v-icon class="delete-icon" @click="deleteCategory(i)">
+            mdi-delete
+          </v-icon>
+        </v-col>
+      </v-card>
     </Draggable>
 
     <v-row justify="center" v-if="categories.length > 0">
@@ -89,6 +87,32 @@ export default {
     dragging: false,
   }),
 
+  computed: {
+    test() {
+      return this.$store.getters.test
+    },
+
+    testStructure() {
+      return this.$store.getters.testStructure
+    },
+  },
+
+  watch: {
+    categories (newValue) {
+      this.$store.commit('SET_CATEGORIES_TEST_STRUCTURE', this.categories)
+      this.$store.commit('SET_LOCAL_CHANGES', true)
+    }
+  },
+
+  created() {
+    if (!this.testStructure) {
+      this.$store.commit('SET_TEST_STRUCTURE', this.test.testStructure)
+    }
+
+    const { categories = [] } = this.testStructure?.cardSorting || {}
+    this.categories = categories
+  },
+
   methods: {
     save(item) {
       this.dialog = false
@@ -97,6 +121,11 @@ export default {
 
     deleteCategory(i) {
       this.categories.splice(i, 1)
+    },
+
+    onChange() {
+      this.$store.commit('SET_CATEGORIES_TEST_STRUCTURE', this.categories)
+      this.$store.commit('SET_LOCAL_CHANGES', true)
     }
   },
 }
@@ -128,9 +157,4 @@ export default {
   right: 25px;
   cursor: pointer;
 }
-
-.v-text-field--outlined >>> fieldset {
-  border-radius: 25px;
-  border: 1px solid #ffceb2;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/organisms/PostTestEditCardSorting.vue b/src/components/organisms/PostTestEditCardSorting.vue
new file mode 100644
index 00000000..da3ff4f4
--- /dev/null
+++ b/src/components/organisms/PostTestEditCardSorting.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <!-- POST-FORM -->
+    <!-- <CardForm 
+      title="Post-Form"
+      subtitle="This is a post-questions you make to get participants data"
+    >
+      <InputTextEditTest />
+    </CardForm> -->
+
+    <!-- Final Message -->
+    <CardForm 
+      title="Final Message"
+      subtitle="This is a Final message you leave to the participant on finish test."
+    >
+      <InputTextEditTest
+        v-model="postTest.finalMessage"
+        label="Tankyou for participating..."
+        :rows="1"
+        @input="onChange"
+      />
+    </CardForm>
+  </div>
+</template>
+
+<script>
+import CardForm from '@/components/molecules/CardForm'
+import InputTextEditTest from '@/components/atoms/InputTextEditTest'
+// import VariableManager from '@/components/molecules/VariableManager'
+
+export default {
+  components: {
+    CardForm,
+    InputTextEditTest,
+    // VariableManager,
+  },
+
+  data: () => ({
+    postTest: {
+      finalMessage: ''
+    },
+  }),
+
+  computed: {
+    test() {
+      return this.$store.getters.test
+    },
+
+    testStructure() {
+      return this.$store.getters.testStructure
+    },
+  },
+
+  created() {
+    if (!this.testStructure) {
+      this.$store.commit('SET_TEST_STRUCTURE', this.test.testStructure)
+    }
+
+    const { finalMessage = '' } = this.testStructure || {}
+    this.postTest = { finalMessage }
+  },
+
+  methods: {
+    onChange() {
+      this.$store.commit('SET_TEST_STRUCTURE', this.postTest)
+      this.$store.commit('SET_LOCAL_CHANGES', true)
+    }
+  },
+}
+</script>
\ No newline at end of file
diff --git a/src/components/organisms/PreTestCardSorting.vue b/src/components/organisms/PreTestEditCardSorting.vue
similarity index 82%
rename from src/components/organisms/PreTestCardSorting.vue
rename to src/components/organisms/PreTestEditCardSorting.vue
index 58e6878c..aa73c627 100644
--- a/src/components/organisms/PreTestCardSorting.vue
+++ b/src/components/organisms/PreTestEditCardSorting.vue
@@ -10,7 +10,7 @@
           v-model="preTest.consent"
           label="Consent Form..."
           :rows="3"
-          @change="onChange"
+          @input="onChange"
         />
       </CardForm>
     </v-col>
@@ -26,7 +26,7 @@
           v-model="preTest.welcomeMessage"
           label="Thank you for participating..."
           :rows="3"
-          @change="onChange"
+          @input="onChange"
         />
       </CardForm>
 
@@ -40,7 +40,7 @@
           v-model="preTest.landingPage"
           label="URL"
           :rows="1"
-          @change="onChange"
+          @input="onChange"
         />
       </CardForm>
 
@@ -70,44 +70,51 @@
 </template>
 
 <script>
+import CardForm from '@/components/molecules/CardForm'
 import InputTextEditTest from '@/components/atoms/InputTextEditTest'
 import VariableManager from '@/components/molecules/VariableManager'
-import CardForm from '@/components/molecules/CardForm'
 
 export default {
   components: {
+    CardForm,
     InputTextEditTest,
     VariableManager,
-    CardForm,
   },
 
   data: () => ({
     preTest: {
       consent: '',
-      welcomeMessage: '',
       landingPage: '',
-      participantCamera: '',
+      // participantCamera: '',
       preForm: [],
-    },
+      welcomeMessage: '',
+    }
   }),
 
   computed: {
     test() {
       return this.$store.getters.test
     },
+
+    testStructure() {
+      return this.$store.getters.testStructure
+    },
   },
 
   created() {
-    this.preTest.consent = this.test?.testStructure?.consent || ''
-    this.preTest.welcomeMessage = this.test?.testStructure?.welcomeMessage || ''
-    this.preTest.landingPage = this.test?.testStructure?.landingPage || ''
-    this.preTest.participantCamera = this.test?.testStructure?.participantCamera || ''
+    if (!this.testStructure) {
+      this.$store.commit('SET_TEST_STRUCTURE', this.test.testStructure)
+    }
+
+    const { consent = '', welcomeMessage = '', landingPage = '' } = this.testStructure || {}
+    this.preTest = { consent, welcomeMessage, landingPage }
   },
 
   methods: {
     onChange() {
+      this.$store.commit('SET_TEST_STRUCTURE', this.preTest)
       this.$store.commit('SET_LOCAL_CHANGES', true)
     }
-  },
+  }
 }
 </script>
\ No newline at end of file
diff --git a/src/router/modules/cardSorting.js b/src/router/modules/cardSorting.js
index 1305b6e3..08704b94 100644
--- a/src/router/modules/cardSorting.js
+++ b/src/router/modules/cardSorting.js
@@ -1,3 +1,4 @@
+import TestView from '@/views/cardSorting/TestView.vue'
 import ManagerView from '@/views/cardSorting/ManagerView'
 import EditTestView from '@/views/cardSorting/EditTestView.vue'
 import SettingsView from '@/views/cardSorting/SettingsView.vue'
@@ -26,4 +27,11 @@ export default [
       },
     ],
   },
+  {
+    path: '/cardSorting/testview/:id/:token?',
+    name: 'CardSortingTestView',
+    props: true,
+    meta: { authorize: [] },
+    component: TestView,
+  },
 ]
\ No newline at end of file
diff --git a/src/store/modules/Test.js b/src/store/modules/Test.js
index d9fefeaf..ca5eabe3 100644
--- a/src/store/modules/Test.js
+++ b/src/store/modules/Test.js
@@ -42,6 +42,9 @@ export default {
     tasks(state) {
       return state.tasks
     },
+    testStructure(state) {
+      return state.testStructure
+    },
     heuristicsTest(state) {
       return state.Test.HeuristicsTest
     },
@@ -89,6 +92,17 @@ export default {
     SET_TESTS(state, payload) {
       state.tests = payload
     },
+    SET_TEST_STRUCTURE(state, payload) {
+      state.testStructure = { ...state.testStructure, ...payload }
+    },
+    SET_CATEGORIES_TEST_STRUCTURE(state, payload) {
+      state.testStructure.cardSorting = state.testStructure.cardSorting || {}
+      state.testStructure.cardSorting.categories = payload
+    },
+    SET_CARD_TEST_STRUCTURE(state, payload) {
+      state.testStructure.cardSorting = state.testStructure.cardSorting || {}
+      state.testStructure.cardSorting.cards = payload
+    },
     ADD_TASKS(state, payload) {
       state.tasks = [...state.tasks, payload]
     },
diff --git a/src/views/cardSorting/EditTestView.vue b/src/views/cardSorting/EditTestView.vue
index 364655bc..48f40b37 100644
--- a/src/views/cardSorting/EditTestView.vue
+++ b/src/views/cardSorting/EditTestView.vue
@@ -1,29 +1,33 @@
 <template>
   <v-container>
-    <ButtonSave :visible="change" @click="() => {}" />
+    <ButtonSave :visible="change" @click="save" />
     
     <v-row>
-      <v-col cols="12" class="pb-0">
-        <v-tabs
-          v-model="tabIndex"
-          background-color="transparent"
-          color="#FCA326"
-          class="pb-0 mb-0"
-        >
-          <v-tab>PRE-TEST</v-tab>
-          <v-tab>CATEGORIES</v-tab>
-          <!-- <v-tab>CARDS</v-tab> -->
-          <!-- <v-tab>POST-TEST</v-tab> -->
-          <!-- <v-tab>SETTINGS</v-tab> -->
-        </v-tabs>
-
-        <v-col cols="12">
-          <!-- PRE-TEST -->
-          <PreTestCardSorting v-if="tabIndex === 0" />
-
-          <!-- TASKS -->
-          <CategoriesCardSorting v-else-if="tabIndex === 1" />
-        </v-col>
+      <v-tabs
+        v-model="tabIndex"
+        background-color="transparent"
+        color="#FCA326"
+        class="pb-0 mb-0"
+      >
+        <v-tab>PRE-TEST</v-tab>
+        <v-tab>CATEGORIES</v-tab>
+        <v-tab>CARDS</v-tab>
+        <v-tab>POST-TEST</v-tab>
+        <!-- <v-tab>SETTINGS</v-tab> -->
+      </v-tabs>
+
+      <v-col cols="12">
+        <!-- PRE-TEST -->
+        <PreTestEditCardSorting v-if="tabIndex === 0" />
+
+        <!-- CATEGORIES -->
+        <CategoriesEditCardSorting v-else-if="tabIndex === 1" />
+
+        <!-- CARDS -->
+        <CardsEditCardSorting v-else-if="tabIndex === 2" />
+
+        <!-- POST-TEST -->
+        <PostTestEditCardSorting v-else-if="tabIndex === 3" />
       </v-col>
     </v-row>
   </v-container>
@@ -31,14 +35,18 @@
 
 <script>
 import ButtonSave from '@/components/atoms/ButtonSave'
-import PreTestCardSorting from '@/components/organisms/PreTestCardSorting'
-import CategoriesCardSorting from '@/components/organisms/CategoriesCardSorting'
+import PreTestEditCardSorting from '@/components/organisms/PreTestEditCardSorting'
+import CardsEditCardSorting from '@/components/organisms/CardsEditCardSorting'
+import CategoriesEditCardSorting from '@/components/organisms/CategoriesEditCardSorting'
+import PostTestEditCardSorting from '@/components/organisms/PostTestEditCardSorting'
 
 export default {
   components: {
     ButtonSave,
-    PreTestCardSorting,
-    CategoriesCardSorting,
+    PreTestEditCardSorting,
+    CardsEditCardSorting,
+    CategoriesEditCardSorting,
+    PostTestEditCardSorting,
   },
 
   data: () => ({
@@ -49,6 +57,22 @@ export default {
     change() {
       return this.$store.state.localChanges
     },
-  }
+
+    test() {
+      return this.$store.getters.test
+    },
+
+    testStructure() {
+      return this.$store.getters.testStructure
+    },
+  },
+
+  methods: {
+    async save() {
+      this.$store.commit('SET_LOCAL_CHANGES', false)
+      const newTest = Object.assign(this.test, { testStructure: this.testStructure })
+      await this.$store.dispatch('updateTest', newTest)
+    },
+  },
 }
 </script>
\ No newline at end of file
diff --git a/src/views/cardSorting/ManagerView.vue b/src/views/cardSorting/ManagerView.vue
index 7da0ef13..2e0d5ef1 100644
--- a/src/views/cardSorting/ManagerView.vue
+++ b/src/views/cardSorting/ManagerView.vue
@@ -191,7 +191,7 @@ export default {
       if (this.accessLevel == 0) {
         items.push(
           { title: 'Test', icon: 'mdi-file-document-edit', path: `/cardSorting/edittest/${this.test.id}` },
-          // { title: 'Preview', icon: 'mdi-file-eye', path: `/testview/${this.test.id}` },
+          { title: 'Preview', icon: 'mdi-file-eye', path: `/cardSorting/testview/${this.test.id}` },
           // { title: 'Reports', icon: 'mdi-book-multiple', path: `/reportview/${this.test.id}` },
           // { title: 'Answers', icon: 'mdi-order-bool-ascending-variant', path: `/answerview/${this.test.id}` },
           // { title: 'Final Report', icon: 'mdi-file-document', path: `/finalreportview/${this.test.id}` },
diff --git a/src/views/cardSorting/TestView.vue b/src/views/cardSorting/TestView.vue
new file mode 100644
index 00000000..10b9b999
--- /dev/null
+++ b/src/views/cardSorting/TestView.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <h1>d</h1>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
\ No newline at end of file