chore: update modal warning

src/App.vue

@@ -27,7 +27,7 @@ onMounted(() => {
 //     title: 'Are you sure?',
 //     question: 'Do you really want to delete this item?',
 //     onlyConfirm: true,
-//     error: true,
+//     warning: true,
 //   })
 //   console.log('result', result)
 // }

src/components/base/ConfirmDialog.vue

@@ -32,7 +32,7 @@ watch(
           <span class="i-material-symbols-light-check-rounded text-3xl"></span>
         </div>
         <div
-          v-if="confirmDialog.getQuestion?.error"
+          v-if="confirmDialog.getQuestion?.warning"
           class="w-[48px] h-[48px] bg-[#fde7e7] text-[#e3342f] flex justify-center items-center rounded-full"
         >
           <span class="i-material-symbols-light-error-rounded text-3xl"></span>
@@ -52,6 +52,7 @@ watch(
         >
         <Button
           class="w-full rounded-md py-5 font-medium"
+          :class="{ 'bg-red-500 hover:bg-red-700': confirmDialog.getQuestion?.warning }"
           @click="confirmDialog.confirm(true)"
           >Confirm</Button
         >

src/components/group/Activity.vue

@@ -50,6 +50,7 @@
   const result = await confirmDialog.open({
     title: 'Are you want to delete this group?',
     question: 'All data in your group will be lost',
+    warning: true,
   })
 
   if (result.isConfirmed) {
@@ -162,7 +163,7 @@
                   <div
                     class="text-gray-900 font-normal mt-2 content-format"
                     @click="handleHtmlLinkClick"
                     v-html="$sanitize(post?.content)"
                   ></div>
 
                   <div

src/components/group/list/GroupList.vue

@@ -11,6 +11,7 @@ const handleDeleteGroup = async (id: string) => {
   const result = await confirmDialog.open({
     title: 'Are you want to delete this group?',
     question: 'All data in your group will be lost',
+    warning: true,
   })
 
   if (result.isConfirmed) {

src/components/layout/SideBar.vue

@@ -10,7 +10,7 @@ const openConfirm = async () => {
   const { isConfirmed } = await confirmDialog.open({
     title: 'Confirm',
     question: 'Do you really want to logout?',
-    error: true,
+    warning: true,
   })
 
   if (isConfirmed) {

src/components/quizzfly/create/QuestionList.vue

@@ -70,6 +70,7 @@ const handleConfirmDelete = async (question: Question) => {
   const result = await confirmDialog.open({
     title: 'Are you sure?',
     question: 'Do you really want to delete this item?',
+    warning: true,
   })
 
   if (result.isConfirmed) {

src/components/quizzfly/list/QuizzflyList.vue

@@ -14,6 +14,7 @@ const handleConfirmDelete = async (quizzflyId: string) => {
   const { isConfirmed } = await confirmDialog.open({
     title: 'Delete Quizzfly',
     question: 'Are you sure you want to delete this quizzfly?',
+    warning: true,
   })
 
   if (isConfirmed) {

src/pages/auth/password/reset.vue

@@ -66,7 +66,7 @@ const openConfirmError = async () => {
     title: 'Failed',
     question: 'Expired password recovery link',
     onlyConfirm: true,
-    error: true,
+    warning: true,
   })
 
   router.push('/login')

src/pages/groups/detail/group-detail.vue

@@ -12,7 +12,6 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   Breadcrumb,
   BreadcrumbItem,
-  BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
@@ -21,6 +20,7 @@ import { usePostStore } from '@/stores/group/post'
 
 const groupStore = useGroupStore()
 const postStore = usePostStore()
+const route = useRoute()
 
 const groupInfo = computed(() => {
   return groupStore.getGroupInfo
@@ -40,6 +40,11 @@ const openModal = () => {
   isShowModal.value = true
 }
 
+onBeforeMount(() => {
+  if (route.params.groupId && typeof route.params.groupId === 'string') {
+    postStore.fetchPosts(1, route.params.groupId)
+  }
+})
 onBeforeUnmount(() => {
   postStore.$reset()
 })
@@ -50,7 +55,9 @@ onBeforeUnmount(() => {
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink href="/groups"> Groups </BreadcrumbLink>
+          <BreadcrumbPage>
+            <RouterLink to="/groups">Groups</RouterLink>
+          </BreadcrumbPage>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>

src/pages/groups/detail/index.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
 import { useGroupStore } from '@/stores/group/group'
-import { usePostStore } from '@/stores/group/post'
 
 const groupStore = useGroupStore()
-const postStore = usePostStore()
 const route = useRoute()
 
 const groupId = computed(() => route.params.groupId)
@@ -12,7 +10,6 @@ watchEffect(() => {
   if (groupId.value && typeof groupId.value === 'string') {
     groupStore.listMemberGroups(groupId.value)
     groupStore.getDetailGroup(groupId.value)
-    postStore.fetchPosts(1, groupId.value)
   }
 })
 

src/pages/groups/joinGroup.vue

@@ -18,7 +18,7 @@ const openConfirm = async () => {
   const { isConfirmed } = await confirmDialog.open({
     title: 'Confirm',
     question: 'Do you really want to join this group?',
-    error: true,
+    warning: true,
   })
 
   if (isConfirmed) {

src/pages/quizzfly/create.vue

@@ -35,7 +35,7 @@ onBeforeMount(async () => {
       title: 'Error',
       question: 'Have an error when fetching data!',
       onlyConfirm: true,
-      error: true,
+      warning: true,
     })
     router.push({ name: 'quizzfly' })
   } finally {

src/pages/test.vue

@@ -32,7 +32,7 @@ const audioFiles = import.meta.glob('/assets/audio/*.mp3')
 //     title: 'Are you sure?',
 //     question: 'Do you really want to delete this item?',
 //     onlyConfirm: true,
-//     error: true,
+//     warning: true,
 //   })
 // }
 

src/stores/modal.ts

@@ -8,7 +8,7 @@ interface IQuestion {
   data?: any
   onlyConfirm?: boolean
   success?: boolean
-  error?: boolean
+  warning?: boolean
 }
 
 export const useConfirmDialog = defineStore({