fix: scroll group

src/App.vue

@@ -2,9 +2,20 @@
 import Toaster from '@/components/ui/toast/Toaster.vue'
 import ConfirmModal from './components/base/ConfirmDialog.vue'
 import LoadingOverlay from '@/components/base/LoadingOverlay.vue'
-// import { useConfirmDialog } from './stores/modal'
-// import { useLoadingStore } from './stores/loading'
-// import { useConfirmDialog } from './stores/modal'
+import { useNotificationSocketStore } from '@/stores/socket/notification'
+import { notifyMe } from './utils/noti'
+
+const notificationStore = useNotificationSocketStore()
+const getMessage = computed(() => {
+  return notificationStore.getMessage
+})
+
+watch(getMessage, (val: any) => {
+  if (val.event === 'notification') {
+    notifyMe(val.data)
+  }
+})
+
 const route = useRoute()
 
 const layout = computed(() => {

src/components/group/Activity.vue

@@ -184,7 +184,7 @@
                     <div
                       class="text-gray-900 font-normal mt-2 content-format"
                       @click="handleHtmlLinkClick"
                       v-html="$sanitize(post?.content)"
                     ></div>
 
                     <!-- list images -->
@@ -275,18 +275,6 @@
                             >
                               Play
                             </Button>
-                            <Button
-                              variant="secondary"
-                              class="h-8 w-20"
-                              @click.prevent.stop="
-                                router.push({
-                                  name: 'quizzfly-create',
-                                  params: { quizzflyId: post.quizzfly.id },
-                                })
-                              "
-                            >
-                              Edit
-                            </Button>
                           </div>
                         </div>
                       </div>

src/components/group/Shared.vue

@@ -1,10 +1,121 @@
 <script lang="ts" setup>
 import Card from '../ui/card/Card.vue'
+import { getQuizzflySharedApi } from '@/services/group'
+import type { IQuizzflyShared } from '@/types/quizzfly'
+import { showToast } from '@/utils/toast'
+import { apiError } from '@/utils/exceptionHandler'
+import Button from '../ui/button/Button.vue'
+import ScrollArea from '../ui/scroll-area/ScrollArea.vue'
+import { AvatarFallback, Avatar, AvatarImage } from '../ui/avatar'
+import { Skeleton } from '@/components/ui/skeleton'
+
+const route = useRoute()
+const router = useRouter()
+
+const groupId = route.params.groupId as string
+
+const quizzflyShared = ref<IQuizzflyShared[]>([])
+const isLoading = ref(false)
+
+onBeforeMount(() => {
+  if (groupId) {
+    listQuizzflyShared()
+  }
+})
+
+const listQuizzflyShared = async () => {
+  try {
+    isLoading.value = true
+    const data = await getQuizzflySharedApi(groupId)
+    quizzflyShared.value = data.data
+  } catch (error) {
+    showToast({
+      description: apiError(error).message,
+      variant: 'destructive',
+    })
+  }
+  isLoading.value = false
+}
 </script>
 
 <template>
   <div class="flex flex-col gap-5">
-    <Card />
+    <Card class="mx-6 rounded-3xl">
+      <ScrollArea style="height: calc(100vh - 320px); width: 100%">
+        <div v-if="quizzflyShared.length === 0 && isLoading">
+          <div class="flex p-4 gap-3">
+            <Skeleton class="w-10 h-10 rounded-full" />
+            <Skeleton class="w-full h-20 rounded-md" />
+          </div>
+          <div class="flex p-4 gap-3">
+            <Skeleton class="w-10 h-10 rounded-full" />
+            <Skeleton class="w-full h-20 rounded-md" />
+          </div>
+          <div class="flex p-4 gap-3">
+            <Skeleton class="w-10 h-10 rounded-full" />
+            <Skeleton class="w-full h-20 rounded-md" />
+          </div>
+        </div>
+        <div
+          class="flex items-center justify-between p-8 gap-12 w-full overflow-y-auto overflow-hidden"
+        >
+          <Card
+            v-for="quizzfly in quizzflyShared"
+            :key="quizzfly.id"
+            class="w-full"
+          >
+            <div class="flex w-full h-32">
+              <div>
+                <img
+                  v-image
+                  class="w-[188px] h-32 object-cover rounded-s-md"
+                  :src="quizzfly.cover_image || ''"
+                  alt=""
+                />
+              </div>
+              <div class="flex justify-between items-center w-full">
+                <div class="flex flex-col w-full justify-between p-3 h-full">
+                  <div class="flex items-center justify-between">
+                    <div class="flex post-center gap-1">
+                      <span
+                        class="i-material-symbols-light-grid-view-outline-rounded h-6 w-6"
+                      ></span>
+                      <h2 class="title text-base font-medium">
+                        {{ quizzfly.title || 'Untitled' }}
+                      </h2>
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <div class="flex gap-1 items-center">
+                      <Avatar class="h-6 w-6">
+                        <AvatarImage :src="quizzfly?.avatar" />
+                        <AvatarFallback v-if="quizzfly.username">{{
+                          quizzfly?.username.charAt(0).toUpperCase()
+                        }}</AvatarFallback>
+                      </Avatar>
+                      <p class="text-sm text-gray-500">{{ quizzfly.username }}</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="mr-7 flex items-center gap-2">
+                  <Button
+                    class="h-8 w-20"
+                    @click.prevent.stop="
+                      router.push({
+                        name: 'host-live',
+                        params: { quizzflyId: quizzfly.id },
+                      })
+                    "
+                  >
+                    Play
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </ScrollArea>
+    </Card>
   </div>
 </template>
 

src/components/group/comment/FormSend.vue

@@ -103,9 +103,9 @@ onMounted(() => {
       />
     </div>
     <div class="flex items-center gap-2">
-      <div class="flex items-center justify-center rounded-full w-10 h-10 border cursor-pointer">
+      <!-- <div class="flex items-center justify-center rounded-full w-10 h-10 border cursor-pointer">
         <span class="i-material-symbols-light-attach-file w-6 h-6"></span>
-      </div>
+      </div> -->
       <div
         class="flex items-center justify-center border-primary rounded-full w-10 h-10 border cursor-pointer"
       >

src/components/group/modal/MCreatePost.vue

@@ -42,6 +42,7 @@ const type = ref<'SHARE' | 'POST'>('POST')
 const refImage = ref<HTMLInputElement | null>(null)
 const listImage = ref<string[]>([])
 const ImageUpload = ref<File[]>([])
+const quillEditor = ref<any>(null)
 
 const onChangeBg = (e: Event) => {
   const target = e.target as HTMLInputElement
@@ -61,7 +62,13 @@ const showChooseImage = () => {
 }
 
 const resetData = () => {
+  ImageUpload.value = []
+  listImage.value = []
   content.value = ''
+  if (quillEditor.value) {
+    quillEditor.value.setContents('')
+  }
+  console.log(ImageUpload.value, content.value, 'check value reset')
 }
 
 const removeBg = (data: string) => {
@@ -74,7 +81,7 @@ const removeBg = (data: string) => {
 
 const onSubmit = async () => {
   isLoading.value = true
-  const listImageUpload = [] as any
+  let listImageUpload = [] as any
 
   if (ImageUpload.value.length > 0) {
     const formData = new FormData()
@@ -111,6 +118,7 @@ const onSubmit = async () => {
   }
 
   await postStore.createPost(idGroup, data)
+  listImageUpload = []
   resetData()
   closeModal()
   emits('created')
@@ -146,6 +154,7 @@ const handleRemoveQuizzfly = () => {
           <div class="flex flex-col h-52">
             <div class="form-data h-52">
               <QuillEditor
+                ref="quillEditor"
                 v-model:content="content"
                 :toolbar="['bold', 'italic', 'underline', 'link']"
                 placeholder="Enter your post"

src/components/group/modal/MInviteMember.vue

@@ -60,7 +60,7 @@ const onSubmit = async () => {
             <TagsInput
               v-model="listEmails"
               :add-on-blur="true"
-              class="h-11"
+              class="h-full min-h-11"
             >
               <TagsInputItem
                 v-for="item in listEmails"

src/components/group/modal/MListMember.vue

@@ -23,8 +23,8 @@ const listMembers = computed(() => {
       @click.stop
     >
       <div class="text-4xl w-full text-center font-semibold">List Member</div>
-      <ScrollArea>
-        <div class="mt-11 flex flex-col gap-4 max-h-[150px] overflow-hidden overflow-y-auto">
+      <ScrollArea class="overflow-hidden overflow-y-auto px-3">
+        <div class="mt-11 flex flex-col gap-4 max-h-[350px]">
           <div
             v-for="item in listMembers"
             :key="item.id"

src/components/notification/NotificationPopup.vue

@@ -31,7 +31,6 @@ const metaPage = ref<IPaging>()
 watch(getMessage, (val: any) => {
   if (val.event === 'notification') {
     listNotification.value.unshift(val.data)
-    notifyMe(val.data)
   }
 })
 
@@ -95,46 +94,6 @@ const handleMarkAllNotification = async () => {
   }
 }
 
-const notifyMe = (data: INotification) => {
-  if (Notification.permission === 'granted' && window.Notification) {
-    const notification = new Notification('Notification!', {
-      body: `${data.content}`,
-      icon: 'https://res.cloudinary.com/dx5omabv0/image/upload/v1734167367/vdijsfa92grm0kw5chsi.jpg',
-    })
-
-    notification.onclick = (event: { preventDefault: () => void }) => {
-      event.preventDefault()
-      window.open(
-        `https://quizzfly.site/groups/${data.target_id}/posts/${data.notification_type == 'POST' ? data.object.id : data.object.post_id}`,
-        '_blank',
-      )
-    }
-  } else {
-    Notification.requestPermission()
-      .then(function (p) {
-        if (p === 'granted') {
-          const notification = new Notification('Notification!', {
-            body: `${data.content}`,
-            icon: 'https://res.cloudinary.com/dx5omabv0/image/upload/v1734167367/vdijsfa92grm0kw5chsi.jpg',
-          })
-
-          notification.onclick = (event: { preventDefault: () => void }) => {
-            event.preventDefault()
-            window.open(
-              `https://quizzfly.site/groups/${data.target_id}/posts/${data.notification_type == 'POST' ? data.object.id : data.object.post_id}`,
-              '_blank',
-            )
-          }
-        } else {
-          console.log('User blocked notifications.')
-        }
-      })
-      .catch(function (err) {
-        console.error(err)
-      })
-  }
-}
-
 onMounted(() => {
   getListNotification()
 })

src/main.ts

@@ -36,19 +36,15 @@ const initApp = async () => {
   app.use(MotionPlugin)
   app.use(VImage)
   app.use(Viewer)
-  app.use(
-    VueTippy,
-    // optional
-    {
-      directive: 'tippy', // => v-tippy
-      component: 'tippy', // => <tippy/>
-      componentSingleton: 'tippy-singleton', // => <tippy-singleton/>,
-      defaultProps: {
-        placement: 'auto-end',
-        allowHTML: true,
-      }, // => Global default options * see all props
-    },
-  )
+  app.use(VueTippy, {
+    directive: 'tippy', // => v-tippy
+    component: 'tippy', // => <tippy/>
+    componentSingleton: 'tippy-singleton', // => <tippy-singleton/>,
+    defaultProps: {
+      placement: 'auto-end',
+      allowHTML: true,
+    }, // => Global default options * see all props
+  })
   app.component('DefaultLayout', DefaultLayout)
   app.component('GuestLayout', GuestLayout)
   app.component('NoSideBarLayout', NoSideBarLayout)