feat: Add new method test card sorting

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>
 

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>

src/components/organisms/CategoriesCardSorting.vue → 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>