thainv: ghép navigation

components/article/immerse/Poll.vue

@@ -1,3 +1,4 @@
+span
 <script setup lang="ts">
 import { usePollStore } from "~/stores/poll";
 import { usePollOptionStore } from "~/stores/poll-option";
@@ -16,7 +17,7 @@ const { currentPoll } = storeToRefs(store.poll);
 const { currentPollOptions } = storeToRefs(store.pollOptions);
 const { currentPollResponses } = storeToRefs(store.pollResponse);
 const poll = reactive<Poll | any>({});
-const options = ref<PollOption[]>();
+const options = ref<PollOption[] | any[]>([]);
 async function loadData() {
   await store.poll.fetchById(String(props.dataId));
   await store.pollOptions.fetchByPollId(String(props.dataId));
@@ -33,7 +34,7 @@ onBeforeMount(async () => {
   await loadData();
 });
 
-const selectedOption = ref<any>(null);
+const selectedOption = ref<any>(-1);
 const showResult = ref(false);
 const alreadyVoted = ref(false);
 const canShowResult = computed(() => {
@@ -48,26 +49,20 @@ const canShowResult = computed(() => {
       return alreadyVoted.value && (!poll.endTime || new Date() > new Date(poll.endTime));
   }
 });
-
+const totalResponses = ref(0);
 async function submitVote() {
-  if (selectedOption.value) {
-    let option = options.value?.find((option: PollOption) => option.id === selectedOption.value);
-    if(option) {
-      option.responsesCount = Number(option.responsesCount) + 1
-
+  if (selectedOption.value >= 0 && !alreadyVoted.value) {
+    const result = await store.pollResponse.create({ optionId: selectedOption.value });
+    if (result?.id) {
+      totalResponses.value = options.value?.reduce((sum, option) => sum + Number(option.responseCount ?? 0), 1);
+      options?.value?.forEach((option: PollOption | any) => {
+        if (option.id === selectedOption.value) {
+          option.responseCount = (option.responseCount ?? 0) + 1;
+        }
+        option.percentage = Number(((option.responseCount / totalResponses.value) * 100).toFixed(1));
+      });
+      alreadyVoted.value = true;
     }
-  const totalResponses = options.value?.reduce((sum, option) => sum + Number(option.responsesCount ?? 0), 0);
-    // const result = await store.pollResponse.create({ optionId: selectedOption.value });
-    // if (result) {
-    //   alreadyVoted.value = true;
-    //   if (options.value) {
-    //     let option = options.value.find((option: PollOption) => option.id === selectedOption.value);
-    //     // if (option) option?.responsesCount += 1;
-    //     // options.value.filter((option) => {
-    //     //   option.votePercentage = (option.responsesCount / currentPollResponses.value.length) * 100;
-    //     // });
-    //   }
-    // }
   }
 }
 
@@ -88,23 +83,22 @@ const toggleResults = () => {
     <span v-if="!showResult" class="p-1 block">
       <span v-for="(option, index) in options" :key="index" class="block">
         <label class="flex gap-2 m-2">
-          <input type="radio" :value="option.id" v-model="selectedOption" />
+          <input type="radio" :value="option.id" v-model="selectedOption" :disabled="selectedOption >= 0 && alreadyVoted ? true : false" />
           <span class="font-semibold">{{ option?.title }}</span>
         </label>
       </span>
       <button @click="submitVote" class="bg-primary-500 text-white py-1 px-3 rounded-4px cursor-pointer hover:bg-primary-600 float-right">Bình chọn</button>
     </span>
 
-    <span v-else class="block">
-      hoàn thành
-      <!-- <span v-for="(answer, index) in options" :key="index" class="block poll-result relative rounded-3xl overflow-hidden my-3">
-          <span class="absolute top-0 start-0 bottom-0 bg-gradient-to-r from-sky-500 to-indigo-500"
-            :style="{ width: `${calculatePercentage(answer?.voteCount)}%` }"></span>
-          <span class="block relative z-0 ps-1">
-            <span>{{ calculatePercentage(answer?.voteCount).toFixed(2) }}%</span>
-            <span class="">({{ answer?.voteCount }})</span>
-          </span>
-        </span> -->
+    <span v-else class="flex flex-col my-5 gap-4">
+      <span v-for="(answer, index) in options" :key="index" class="flex gap-2">
+        <span class="w-50px">{{ answer.percentage }}%</span>
+        <div class="w-full">
+          <b class="mb-0.5 block">{{ answer.title }}</b>
+          <div :style="{ width: `${answer.percentage}%` }" :class="answer.id === selectedOption ? 'bg-green-600' : 'bg-primary-500'" class="h-1.5 rounded-full"></div>
+        </div>
+      </span>
+      <b>Tổng số lượt binh chọn: {{ totalResponses }}</b>
     </span>
   </span>
 </template>