feat: delete answer (#123)

Author: huynamboz

Diff for: src/components/quizzfly/create/answer/Choice.vue

@@ -16,6 +16,7 @@ const props = defineProps<{
 
 const emits = defineEmits<{
   (e: 'update:modelValue', value: Answer): void
+  (e: 'delete', value: Answer): void
 }>()
 
 const updateAnswer = useDebounceFn((value: Answer) => {
@@ -32,7 +33,7 @@ onMounted(() => {
 </script>
 <template>
   <div
-    class="relative flex flex-row-reverse gap-5 py-6 min-h-[120px] items-center px-4 rounded-2xl text-white answer-item"
+    class="relative flex group flex-row-reverse gap-5 py-6 min-h-[120px] items-center px-4 rounded-2xl text-white answer-item"
     :style="{ backgroundColor: colorsHex[index].primary }"
   >
     <ConfettiExplosion
@@ -44,6 +45,13 @@ onMounted(() => {
       class="overlay-wrong absolute top-0 left-0 z-10 w-full h-[calc(100%+4px)] bg-gray-900 bg-opacity-60 rounded-2xl"
     ></div>
 
+    <div
+      v-if="editMode"
+      class="absolute group-hover:flex cursor-pointer w-8 h-8 justify-center items-center hidden -top-3 -right-3 bg-white rounded-full shadow-md"
+      @click="emits('delete', modelValue)"
+    >
+      <span class="text-black i-material-symbols-light-close-rounded text-2xl"></span>
+    </div>
     <img
       v-if="isShowRightAnswer && modelValue.is_correct"
       v-motion

Diff for: src/components/quizzfly/create/answer/TrueFalse.vue

@@ -11,6 +11,7 @@ defineProps<{
 const emits = defineEmits<{
   (e: 'select', value: string): void
   (e: 'update:modelValue', value: any): void
+  (e: 'delete', value: any): void
 }>()
 </script>
 <template>
@@ -28,5 +29,6 @@ const emits = defineEmits<{
     :is-show-right-answer="isShowRightAnswer"
     @select="emits('select', item.id)"
     @update:model-value="emits('update:modelValue', item)"
+    @delete="emits('delete', item)"
   />
 </template>

Diff for: src/components/quizzfly/create/quiz/AnswerSetting.vue

@@ -33,6 +33,10 @@ const handleUpdateAnswer = (value: any) => {
     is_correct: true,
   })
 }
+
+const handleDeleteAnswer = (value: any) => {
+  questionsStore.deleteCurrentQuestionAnswer(value)
+}
 </script>
 <template>
   <div class="pb-8">
@@ -55,6 +59,7 @@ const handleUpdateAnswer = (value: any) => {
           :edit-mode="true"
           :is-true-false="false"
           @update:model-value="questionsStore.updateCurrentQuestionAnswer"
+          @delete="handleDeleteAnswer"
         />
       </template>
 
@@ -63,6 +68,7 @@ const handleUpdateAnswer = (value: any) => {
           :edit-mode="true"
           :answers="currentQuestion.answers"
           @update:model-value="handleUpdateAnswer"
+          @delete="handleDeleteAnswer"
         />
       </template>
     </div>

Diff for: src/pages/groups/index.vue

@@ -39,6 +39,13 @@ const pageQueryComputed = computed({
   },
 })
 
+watch(
+  () => search.value,
+  () => {
+    fetchGroups()
+  },
+)
+
 const fetchGroups = () => {
   groupStore.fetchGroups({
     page: pageQueryComputed.value,

Diff for: src/pages/room/member-play/instructions-play.vue

@@ -62,6 +62,7 @@ onBeforeMount(() => {
   console.log('name', name, 'roomPin', roomPin)
   const participant_id = localStorage.getItem('participantID')
   participantId.value = participant_id || ''
+  console.log('participant_id', participant_id)
   const joinRoomData: any = {
     nick_name: name,
     room_pin: roomPin,

Diff for: src/services/group.ts

@@ -13,7 +13,7 @@ export const getGroupsApi = async ({ page = 1, keyword = '' }): Promise<BaseResp
     method: 'GET',
     params: {
       page,
-      keyword,
+      keywords: keyword,
     },
   })
 }

Diff for: src/stores/quizzfly/question.ts

@@ -364,6 +364,22 @@ export const useQuestionsStore = defineStore({
         throw error
       }
     },
+
+    async deleteCurrentQuestionAnswer(answer: Answer) {
+      // Delete a specific answer in the current question
+      try {
+        await deleteAnswerApi(answer.id)
+        this.updateCurrentQuestionAnswers(
+          (this.currentQuestion as Quiz).answers?.filter((a) => a.id !== answer.id) || [],
+        )
+      } catch (error) {
+        console.error(error)
+        showToast({
+          description: apiError(error).message,
+          variant: 'destructive',
+        })
+      }
+    },
   },
   getters: {
     getSlideById: (state) => (id: string) => {