🎉 Initial Commit(Migrated from Interactive)

src/components/comments/CommentList.vue

@@ -0,0 +1,83 @@
+<template>
+  <div v-if="loading" class="text-center flex items-center justify-center">
+    <v-progress-circular indeterminate />
+  </div>
+
+  <div v-else class="flex flex-col gap-5 mt-3">
+    <div v-for="(item, idx) in props.comments" class="text-sm">
+      <post-item :item="item" @update:item="(val) => updateItem(idx, val)" />
+    </div>
+  </div>
+
+  <v-divider class="mt-2 mb-3 border-opacity-50 mx-[-1rem]" />
+
+  <v-btn block prepend-icon="mdi-pencil" variant="plain" :disabled="!id.userinfo.isLoggedIn" @click="leaveComment">
+    Leave your comment
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { request } from "@/scripts/request"
+import { reactive, ref, watch } from "vue"
+import { useEditor } from "@/stores/editor"
+import { useUserinfo } from "@/stores/userinfo"
+import PostItem from "@/components/posts/PostItem.vue"
+
+const id = useUserinfo()
+const editor = useEditor()
+
+const props = defineProps<{
+  comments: any[]
+  model: string
+  dataset: string
+  alias: any
+  item: any
+}>()
+const emits = defineEmits(["update:comments"])
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+const pagination = reactive({ page: 0, pageSize: 10, total: 0 })
+
+async function readComments() {
+  loading.value = true
+  const res = await request(
+    "interactive",
+    `/api/p/${props.dataset}/${props.alias}/comments?` +
+      new URLSearchParams({
+        take: pagination.pageSize.toString(),
+        offset: (pagination.page * pagination.pageSize).toString()
+      })
+  )
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    error.value = null
+    const data = await res.json()
+    pagination.total = data["total"]
+    emits("update:comments", data["data"])
+  }
+  loading.value = false
+}
+
+readComments()
+
+function updateItem(idx: number, data: any) {
+  const comments = JSON.parse(JSON.stringify(props.comments))
+  comments[idx] = data
+  emits("update:comments", comments)
+}
+
+watch(editor, (val) => {
+  if (val.done) {
+    readComments().then(() => (val.done = false))
+  }
+})
+
+function leaveComment() {
+  editor.related.comment_to = JSON.parse(JSON.stringify(props.item))
+  editor.related.comment_to.model_type = props.dataset
+  editor.show.comment = true
+}
+</script>