feat: updates to admin page.

- role page.
2025-11-17 20:32:24 +00:00 · 2024-07-22 03:05:30 +05:30
parent 750dbd1c56
commit 5e00558e9b
80 changed files with 1764 additions and 797 deletions
--- a/frontend/src/components/admin/inbox/Inbox.vue
+++ b/frontend/src/components/admin/inbox/Inbox.vue
@@ -0,0 +1,136 @@
+<template>
+  <div v-if="showTable">
+    <div class="flex justify-between mb-5">
+      <div>
+        <span class="admin-title">Inboxes</span>
+        <p class="text-muted-foreground text-sm">Create and manage inboxes.</p>
+      </div>
+      <div class="flex justify-end mb-4">
+        <Button @click="navigateToAddInbox" size="sm"> New inbox </Button>
+      </div>
+    </div>
+    <div class="w-full">
+      <DataTable :columns="columns" :data="data" />
+    </div>
+  </div>
+  <div v-else>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { h } from 'vue'
+import InboxDataTableDropDown from '@/components/admin/inbox/InboxDataTableDropDown.vue'
+import { handleHTTPError } from '@/utils/http'
+import { useToast } from '@/components/ui/toast/use-toast'
+import { Button } from '@/components/ui/button'
+import DataTable from '@/components/admin/DataTable.vue'
+import { useRouter } from 'vue-router'
+import api from '@/api'
+
+const { toast } = useToast()
+const router = useRouter()
+
+const data = ref([])
+const showTable = ref(true)
+
+onMounted(async () => {
+  await getInboxes()
+})
+
+const getInboxes = async () => {
+  try {
+    const response = await api.getInboxes()
+    data.value = response.data.data
+  } catch (error) {
+    toast({
+      title: 'Could not fetch inboxes',
+      variant: 'destructive',
+      description: handleHTTPError(error).message
+    })
+  }
+}
+
+const navigateToAddInbox = () => {
+  showTable.value = false
+  router.push('/admin/inboxes/new').catch((err) => {
+    if (err.name !== 'NavigationDuplicated') {
+      toast({
+        title: 'Navigation error',
+        variant: 'destructive',
+        description: 'Failed to navigate to the new inbox page.'
+      })
+      showTable.value = true
+    }
+  })
+}
+
+// Columns for the data table
+const columns = [
+  {
+    accessorKey: 'name',
+    header: function () {
+      return h('div', { class: 'text-center' }, 'Name')
+    },
+    cell: function ({ row }) {
+      return h('div', { class: 'text-center font-medium' }, row.getValue('name'))
+    }
+  },
+  {
+    accessorKey: 'channel',
+    header: function () {
+      return h('div', { class: 'text-center' }, 'Channel')
+    },
+    cell: function ({ row }) {
+      return h('div', { class: 'text-center font-medium' }, row.getValue('channel'))
+    }
+  },
+  {
+    accessorKey: 'disabled',
+    header: () => h('div', { class: 'text-center' }, 'Enabled'),
+    cell: ({ row }) => {
+      const disabled = row.getValue('disabled')
+
+      return h('div', { class: 'text-center' }, [
+        h('input', {
+          type: 'checkbox',
+          checked: !disabled,
+          disabled: true
+        })
+      ])
+    }
+  },
+  {
+    id: 'actions',
+    enableHiding: false,
+    cell: ({ row }) => {
+      const inbox = row.original
+      return h(
+        'div',
+        { class: 'relative' },
+        h(InboxDataTableDropDown, {
+          inbox,
+          onEditInbox: (id) => handleEditInbox(id),
+          onDeleteInbox: (id) => handleDeleteInbox(id),
+          onToggleInbox: (id)  => handleToggleInbox(id),
+        })
+      )
+    }
+  }
+]
+
+const handleEditInbox = (id) => {
+  router.push({ path: `/admin/inboxes/${id}/edit` })
+}
+
+const handleDeleteInbox = async (id) => {
+  await api.deleteInbox(id)
+  getInboxes()
+}
+
+const handleToggleInbox = async (id) => {
+  await api.toggleInbox(id)
+  getInboxes()
+}
+</script>