fix: admin UI (#102)

* fix: date now shows when peminjaman is late * feat: add link to user in peminjaman table * ui: add empty message in request table * refactor(ui): use await in front of useAsyncData to display loading indicator * docs: revamp readme and remove alpha testing announcement
pplg-smk-metland · Feb 5, 2025 · 6c160eb · 6c160eb
1 parent 4c49a8c
commit 6c160eb
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 69 deletions.
diff --git a/ANNOUNCEMENT.md b/ANNOUNCEMENT.md
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
@@ -101,7 +101,7 @@ To add a new admin user, add a new user like usual, through the app or Supabase
 dashboard, then run this query in the SQL Editor on the dashboard:
 
 ```sql
-update auth.users set raw_app_meta_data = raw_app_meta_data || '{"role": "super-admin"}' where auth.users.id = 'id';
+update auth.users set raw_app_meta_data = raw_app_meta_data || '{"role": "super-admin"}' where auth.users.email = 'email';
 ```
 
 This will add the role 'super-admin' to the target user.

diff --git a/README.md b/README.md
@@ -1,10 +1,7 @@
 # Metschoo Library
 
-Metschoo Library is now in Alpha! Read [ANNOUNCEMENT](ANNOUNCEMENT.md) to learn more
+[!./public/assets/metschoo-library-new.png](Screenshot of Metschoo Library)
 
-Source code of Metschoo Library web app, made with Vue 3 and Supabase. Please see
-[DEVELOPMENT.md](DEVELOPMENT.md) before doing anything
-
-While the app can fully work, this app is still very ugly and the admin
-dashboard is still very lackluster. Please see [DEVELOPMENT](DEVELOPMENT.md#Todo)
-for things that needs attention.
+This repository contains the web app for managing borrowings and more at
+Metschoo Library, made with Nuxt 3 and Supabase. Please see
+[DEVELOPMENT.md](DEVELOPMENT.md) if you want to contribute to this project.
diff --git a/lib/peminjaman.ts b/lib/peminjaman.ts
@@ -11,7 +11,7 @@ export async function getPeminjamanData(searchFor?: PeminjamanSearchArgs): Promi
   let query = supabase
     .from("peminjaman")
     .select(
-      "*, peminjaman_detail(*, peminjaman_state(name)), pengguna(nama, kelas, jurusan), buku(*)"
+      "*, peminjaman_detail(*, peminjaman_state(name)), pengguna(user_id, nama, kelas, jurusan), buku(*)"
     )
     .order("created_at", { referencedTable: "peminjaman_detail", ascending: false })
 

diff --git a/pages/admin/buku/index.vue b/pages/admin/buku/index.vue
@@ -20,7 +20,7 @@ const categoriesOptions = computed(() => {
   return [{ id: 0, kategori: "semua" }, ...(categories.value || [])]
 })
 
-const { data: searchResults } = useAsyncData(async () => await searchBukus({}))
+const { data: searchResults, status } = await useAsyncData(async () => await searchBukus({}))
 
 const searchFor = ref<BukuSearchArgs>({
   judul: "",
@@ -46,7 +46,6 @@ watch(
 async function handleSearchBuku() {
   await navigateTo({
     path: route.path,
-    // query: { term: searchTerm.value, category: selectedCategory.value },
     query: searchFor.value,
   })
 }
@@ -82,7 +81,10 @@ async function handleSearchBuku() {
       <CTA fill type="submit" label="Cari" class="px-6 ms-auto" />
     </form>
 
+    <LoadingSpinner v-if="status === 'pending'" />
+
     <DataTable
+      v-else
       :value="searchResults"
       scroll-height="60vh"
       scrollable

diff --git a/pages/admin/buku/kategori.vue b/pages/admin/buku/kategori.vue
@@ -139,7 +139,7 @@ const editCategory = async ({ kategori, id }: Kategori) => {
   }
 }
 
-const { data: categories } = useAsyncData(async () => {
+const { data: categories } = await useAsyncData(async () => {
   const categories = await getAllAvailableCategories()
   return categories
 })

diff --git a/pages/admin/index.vue b/pages/admin/index.vue
@@ -32,7 +32,7 @@ const supabase = useSupabaseClient<Database>()
 const _peminjamanQuery = supabase
   .from("peminjaman")
   .select(
-    "*, peminjaman_detail(*, peminjaman_state(name)), pengguna(nama, kelas, jurusan), buku(*)"
+    "*, peminjaman_detail(*, peminjaman_state(name)), pengguna(user_id, nama, kelas, jurusan), buku(*)"
   )
   .order("created_at", { referencedTable: "peminjaman_detail", ascending: false })
   .limit(1, { referencedTable: "peminjaman_detail" })

diff --git a/pages/admin/peminjaman.vue b/pages/admin/peminjaman.vue
@@ -23,7 +23,9 @@ const searchFor = ref<PeminjamanSearchArgs>({
   tenggat_waktu: [null, null],
 })
 
-const { data: peminjamanData } = useAsyncData(async () => await getPeminjamanData(searchFor.value))
+const { data: peminjamanData } = await useAsyncData(
+  async () => await getPeminjamanData(searchFor.value)
+)
 
 const isLoading = ref(false)
 
@@ -112,12 +114,21 @@ async function handleFilterPeminjaman() {
         <p>Menampilkan {{ peminjamanData?.length }} peminjaman.</p>
       </template>
 
-      <Column field="pengguna.nama" header="Peminjam" />
+      <Column field="pengguna.nama" header="Peminjam">
+        <template #body="{ data }">
+          <NuxtLink
+            :to="`/admin/pengguna/${data.pengguna.user_id}`"
+            class="hover:underline inline-block py-2"
+          >
+            {{ data.pengguna.nama }}
+          </NuxtLink>
+        </template>
+      </Column>
       <Column field="judul" header="Judul buku" class="!p-0">
         <template #body="{ data }">
           <NuxtLink
             :to="`/admin/buku/${data.buku.no_isbn}`"
-            class="hover:underline py-4 w-full inline-block max-w-72 overflow-hidden whitespace-nowrap text-ellipsis"
+            class="hover:underline py-2 w-full inline-block max-w-72 overflow-hidden whitespace-nowrap text-ellipsis"
           >
             {{ data.buku.judul }}
           </NuxtLink>
@@ -134,7 +145,11 @@ async function handleFilterPeminjaman() {
 
       <Column header="Tanggal kembali">
         <template #body="{ data }: { data: PeminjamanData[number] }">
-          {{ getPeminjamanStateDate(data, 5) }}
+          {{
+            [5, 6].includes(data.peminjaman_detail[0].state_id)
+              ? getPeminjamanStateDate(data, data.peminjaman_detail[0].state_id)
+              : "-"
+          }}
         </template>
       </Column>
 

diff --git a/pages/admin/request.vue b/pages/admin/request.vue
@@ -108,9 +108,11 @@ const tabs = [
 
     <TabPanels>
       <TabPanel v-for="tab in tabs" :key="tab.status" :value="tab.status">
-        <h2>{{ tab.localized }}</h2>
-
         <DataTable :value="requests?.filter((d) => d.is_accepted === tab.status) || []">
+          <template #empty>
+            <p>Belum ada request dari pengguna.</p>
+          </template>
+
           <Column field="created_at" header="Tanggal request" sortable>
             <template #body="{ data }">
               {{ formatDate(new Date(data.created_at)) }}

diff --git a/public/assets/metschoo-library-new.png b/public/assets/metschoo-library-new.png