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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<template>
<div id="wrapper">
<SidebarAdmintes />
<div id="content-wrapper" class="service_section layout_padding">
<Navbar />
<div class="container">
<router-link to="/admin/add_alat" class="btn btn-success mb-3">
Tambah Alat
</router-link>
<table class="table table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">No</th>
<th scope="col">No Inventaris</th>
<th scope="col">Kondisi</th>
<th scope="col">ID Jenis Alat</th>
<th scope="col">ID Ruang</th>
<th scope="col">Tahun</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(alat, index) in ListAlat" :key="alat.id_alat">
<td>{{ index + 1 }}</td>
<td>{{ alat.no_inventaris }}</td>
<td>{{ alat.kondisi }}</td>
<td>{{ alat.id_jenis_alat }}</td>
<td>{{ alat.id_ruang }}</td>
<td>{{ alat.tahun }}</td>
<td>
<button @click="updateAlat(alat.id_alat)" class="btn btn-info">Update</button>
<button @click="deleteAlat(alat.id_alat)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<Footer />
</div>
</div>
</template>
<script>
import Footer from "../../includes/Footer.vue";
import SidebarAdmintes from "../../includes/SidebarAdmintes.vue";
import Navbar from "../../includes/navbar.vue";
export default {
components: {
Footer,
SidebarAdmintes,
Navbar,
},
data() {
return {
ListAlat: [],
};
},
mounted() {
this.fetchAlat();
},
methods: {
async fetchAlat() {
try {
const response = await this.$axios.get('/api/alat');
this.ListAlat = response.data;
} catch (error) {
console.error('Error fetching alat:', error);
}
},
updateAlat(id_alat) {
this.$router.push({ name: 'updateAlat', params: { id: id_alat } });
},
async deleteAlat(id_alat) {
const isConfirmed = window.confirm("Are you sure you want to delete this alat?");
if (isConfirmed) {
try {
await this.$axios.delete(`/api/alat/${id_alat}`);
this.fetchAlat();
} catch (error) {
console.error('Error deleting alat:', error);
}
}
},
},
};
</script>
<style scoped>
.product-image {
max-width: 100px;
max-height: 75px;
object-fit: cover;
}
.container {
padding: 30px;
}
.btn-success {
background-color: #28a745;
border-color: #28a745;
}
.btn-success:hover {
background-color: #218838;
border-color: #1e7e34;
}
.table th,
.table td {
text-align: center;
vertical-align: middle;
}
.btn-info,
.btn-danger {
width: 80px;
}
</style>