NSG_PORTAL_V2/components/article/immerse/Poll.vue

span
<script setup lang="ts">
import { usePollStore } from "~/stores/poll";
import { usePollOptionStore } from "~/stores/poll-option";
import { usePollResponseStore } from "~/stores/poll-response";
import type { Poll } from "~/server/models/poll";
import type { PollResponse } from "~/server/models/poll-response";
import type { PollOption } from "~/server/models/poll-option";
const props = defineProps<{ dataId?: string }>();

const store = reactive({
  poll: usePollStore(),
  pollOptions: usePollOptionStore(),
  pollResponse: usePollResponseStore(),
});
const { currentPoll } = storeToRefs(store.poll);
const { currentPollOptions } = storeToRefs(store.pollOptions);
const { currentPollResponses } = storeToRefs(store.pollResponse);
const poll = reactive<Poll | any>({});
const options = ref<PollOption[] | any[]>([]);
async function loadData() {
  await store.poll.fetchById(String(props.dataId));
  await store.pollOptions.fetchByPollId(String(props.dataId));
  await store.pollResponse.fetchByPollId(String(props.dataId));
  assignData();
}

function assignData() {
  Object.assign(poll, currentPoll.value);
  options.value = currentPollOptions.value;
}

onBeforeMount(async () => {
  await loadData();
});

const selectedOption = ref<any>(-1);
const showResult = ref(false);
const alreadyVoted = ref(false);
const canShowResult = computed(() => {
  switch (poll.settings?.resultPublication) {
    case 0:
      return false;
    case 1:
      return true;
    case 2:
      return alreadyVoted.value;
    case 3:
      return alreadyVoted.value && (!poll.endTime || new Date() > new Date(poll.endTime));
  }
});
const totalResponses = ref(0);
async function submitVote() {
  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 toggleResults = () => {
  if (canShowResult.value) showResult.value = !showResult.value;
};
</script>
<template>
  <span class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5]">
    <span class="block">
      <span class="underline decoration-gray-500 font-bold">
        {{ poll?.title }}
      </span>
      <button v-if="showResult && canShowResult" type="button" class="underline text-blue-400" @click="toggleResults">Câu hỏi</button>
      <button class="underline text-blue-400" v-if="!showResult && canShowResult" type="button" @click="toggleResults">Kết quả</button>
    </span>

    <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" :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="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>