thainnv-dev: Nhúng

components/article/immerse/ArticleRelation.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useArticleStore } from '~/stores/articles';
+const { currentArticle } = storeToRefs(useArticleStore());
+
+const props = defineProps<{
+    dataId?: string,
+}>()
+
+const store = reactive({
+    article: useArticleStore()
+})
+
+// onBeforeMount(async () => {
+//     await store.article.getArticleById(Number(props.dataId))
+// })
+</script>
+
+<template>
+    12
+    <!-- {{ currentArticle }} 12 -->
+    <!-- <a href="#" :style="style" class="!no-underline !px-2">{{ title }} 1</a> -->
+</template>

components/article/immerse/Attachment.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps<{
+    dataResource?: string,
+    dataTitle?: string,
+}>()
+
+const resource = computed(() => props.dataResource ?? '')
+const title = computed(() => props.dataTitle ?? '')
+const fileName = computed(() => `${title.value}.${resource.value.split('.').pop()}`)
+</script>
+
+<template>
+    <a :href="resource" :download="fileName">{{fileName}}</a>
+</template>

components/article/immerse/Document.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps<{
+    dataResource?: string,
+    dataTitle?: string,
+}>()
+
+const resource = computed(() => props.dataResource ?? '')
+const title = computed(() => props.dataTitle ?? '')
+const fileName = computed(() => `${title.value}.${resource.value.split('.').pop()}`)
+</script>
+
+<template>
+    <a :href="resource" :download="fileName">{{fileName}}</a>
+</template>

components/article/immerse/Poll.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { usePollStore } from '~/stores/poll'
+import { usePollOptionStore } from '~/stores/poll-option'
+import type { Poll } from '~/server/models/poll'; 
+const props = defineProps<{ dataId?: string }>();
+
+const store = reactive({
+  poll: usePollStore(),
+  pollOptions: usePollOptionStore()
+})
+
+const poll = reactive<Poll>(await store.poll.fetchById((String(props.dataId))))
+const options = ref<any []>(await store.pollOptions.fetchByPollId((String(props.dataId))))
+
+const selectedOption = ref<any>(null);
+
+function submitVote () {
+  console.log(selectedOption, 'id')
+}
+</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 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" />
+              <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">
+        <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> -->
+  </span>
+</template>

components/article/immerse/Quiz.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    quiz
+</template>

components/article/immerse/Survey.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    Survey
+</template>

components/article/immerse/Tag.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps<{
+    dataCode?: string,
+    dataTitle?: string,
+    style?: string
+}>()
+
+const title = computed(() => props.dataTitle ?? '')
+const code = computed(() => props.dataCode ?? '')
+const style = computed(() => props.style ?? '')
+</script>
+
+<template>
+    <a href="#" :style="style" class="!no-underline !px-2">{{ title }} 1</a>
+</template>