UserLib.vue
2.23 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script setup lang="ts">
import { useKeycloakStore } from "@/@core/stores/keycloakStore";
import { ref } from "vue";
// Store Keycloak
const keycloakStore = useKeycloakStore();
// Data dan state
const items = ref<any[]>([]);
const loading = ref(false);
const searchQuery = ref("");
const logHeaders = [
{ title: "KOLEKSI", key: "koleksi" },
{ title: "TANGGAL PEMINJAMAN", key: "tglpinjam" },
{ title: "TANGGAL PENGEMBALIAN", key: "tglkembali" },
{ title: "DIPINJAM", key: "dipinjam" },
{ title: "PERPANJANGAN", key: "perpanjangan" },
{ title: "DENDA", key: "denda" },
{ title: "DENDA TOTAL", key: "dendatotoal" },
];
async function getData() {
loading.value = true;
items.value = [];
try {
const apiEndpoint = "https://api.ui.ac.id/my/lib";
const response = await fetch(apiEndpoint, {
headers: {
Authorization: `Bearer ${keycloakStore.accessToken}`,
},
});
if (!response.ok) throw new Error("Gagal mengambil data");
const dataku = await response.json();
// Tambahkan properti tanggal, namaHari, mulai aktual, dan selesai aktual ke setiap item
items.value = dataku.map((item: any) => {
return {
...item,
};
});
} catch (err) {
console.error("Gagal mengambil data:", err);
} finally {
loading.value = false;
}
}
const filteredItems = computed(() => {
if (!searchQuery.value) return items.value;
const query = searchQuery.value.toLowerCase();
return items.value.filter((item) =>
logHeaders.some(
(header) => item[header.key] && String(item[header.key]).toLowerCase().includes(query)
)
);
});
</script>
<template>
<VCard title="Status Peminjaman Buku" class="recentnamaHariCard">
<div class="search-container mb-4 pl-2 pr-2">
<VTextField
v-model="searchQuery"
label="Search"
placeholder="Search ..."
append-inner-icon="ri-search-line"
clearable
single-line
hide-details
dense
outlined
/>
</div>
<VDataTable
:headers="logHeaders"
:items="filteredItems"
hide-default-footer
fixed-header
item-value="tglpinjam"
:sort-by="['tglpinjam']"
:sort-asc="[true]"
></VDataTable>
</VCard>
</template>