Skip to content

GitLab

Commit 50c6b456 authored by Muhammad Iqbal Nur Fadhilah's avatar Muhammad Iqbal Nur Fadhilah
Browse files

awda

parent bff5e692
test
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 223 additions and 216 deletions
+223 -216
fe-sarpras/package-lock.json
View file @ 50c6b456
This diff is collapsed.
fe-sarpras/package.json
View file @ 50c6b456
......@@ -16,6 +16,9 @@
"bootstrap": "^5.3.3",
"bootstrap-vue": "^2.23.1",
"core-js": "^3.8.3",
"css-loader": "^7.1.2",
"file-loader": "^6.2.0",
"style-loader": "^4.0.0",
"vue": "^3.4.21",
"vue-cookies": "^1.8.4",
"vue-router": "^4.3.0",
......
fe-sarpras/src/components/CRUD/Alat/AllAlat.vue
View file @ 50c6b456
......@@ -20,66 +20,27 @@
type="text"
placeholder="Search Alat..."
class="form-control search-input"
@input="filterAlat"
/>
</div>
<table class="table table-bordered table-hover">
<thead class="thead-white">
<tr>
<th scope="col" @click="sortTable('id_alat')">
No
<span class="sort-icon">
<i :class="sortBy === 'id_alat' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
</span>
</th>
<th scope="col" @click="sortTable('no_inventaris')">
No Inventaris
<span class="sort-icon">
<i :class="sortBy === 'no_inventaris' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
</span>
</th>
<th scope="col" @click="sortTable('id_jenis_alat')">
Jenis Alat
<span class="sort-icon">
<i :class="sortBy === 'id_jenis_alat' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
</span>
</th>
<th scope="col" @click="sortTable('id_ruang')">
Ruang
<span class="sort-icon">
<i :class="sortBy === 'id_ruang' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
</span>
</th>
<th scope="col" @click="sortTable('nama_merk')">
Merk
<span class="sort-icon">
<i :class="sortBy === 'nama_merk' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
</span>
</th>
<th scope="col" @click="sortTable('nama_tipe')">
Tipe
<span class="sort-icon">
<i :class="sortBy === 'nama_tipe' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
</span>
</th>
<th scope="col" @click="sortTable('tahun')">
Tahun
<span class="sort-icon">
<i :class="sortBy === 'tahun' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
</span>
</th>
<th scope="col" @click="sortTable('kondisi')">
Kondisi
<span class="sort-icon">
<i :class="sortBy === 'kondisi' ? (sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'"></i>
</span>
</th>
<th @click="sort('index')" scope="col">No <i :class="sortIcon('index')"></i></th>
<th @click="sort('no_inventaris')" scope="col">No Inventaris <i :class="sortIcon('no_inventaris')"></i></th>
<th @click="sort('nama_jenis_alat')" scope="col">Jenis Alat <i :class="sortIcon('nama_jenis_alat')"></i></th>
<th @click="sort('nama_ruang')" scope="col">Ruang <i :class="sortIcon('nama_ruang')"></i></th>
<th @click="sort('nama_merk')" scope="col">Merk <i :class="sortIcon('nama_merk')"></i></th>
<th @click="sort('nama_tipe')" scope="col">Tipe <i :class="sortIcon('nama_tipe')"></i></th>
<th @click="sort('tahun')" scope="col">Tahun <i :class="sortIcon('tahun')"></i></th>
<th @click="sort('kondisi')" scope="col">Kondisi <i :class="sortIcon('kondisi')"></i></th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(alat, index) in sortedAlat" :key="alat.id_alat">
<td>{{ index + 1 }}</td>
<tr v-for="alat in sortedAlat" :key="alat.id_alat">
<td>{{ alat.displayIndex }}</td>
<td>{{ alat.no_inventaris }}</td>
<td>{{ alat.nama_jalat }}</td>
<td>{{ alat.nama_ruang }}</td>
......@@ -115,18 +76,44 @@ export default {
return {
ListAlat: [],
searchQuery: '',
sortBy: '',
sortDirection: 'asc',
filteredAlat: [],
sortKey: 'index',
sortOrder: 1
};
},
mounted() {
this.fetchAlat();
},
computed: {
sortedAlat() {
return [...this.filteredAlat].sort((a, b) => {
let valueA = a[this.sortKey];
let valueB = b[this.sortKey];
if (this.sortKey === 'index') {
valueA = a.displayIndex;
valueB = b.displayIndex;
}
if (typeof valueA === 'string') valueA = valueA.toLowerCase();
if (typeof valueB === 'string') valueB = valueB.toLowerCase();
if (valueA < valueB) return -1 * this.sortOrder;
if (valueA > valueB) return 1 * this.sortOrder;
return 0;
});
},
},
methods: {
async fetchAlat() {
try {
const response = await this.$axios.get('/api/alat');
this.ListAlat = response.data.data;
this.ListAlat = response.data.data.map((item, index) => ({
...item,
originalIndex: index + 1,
displayIndex: index + 1
}));
this.filteredAlat = [...this.ListAlat];
} catch (error) {
console.error('Error fetching alat:', error);
}
......@@ -161,44 +148,33 @@ export default {
}
}
},
sortTable(column) {
if (this.sortBy === column) {
this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
filterAlat() {
const searchTerm = this.searchQuery.toLowerCase();
this.filteredAlat = this.ListAlat.filter(alat =>
(alat.no_inventaris && alat.no_inventaris.toLowerCase().includes(searchTerm)) ||
(alat.nama_jenis_alat && alat.nama_jenis_alat.toLowerCase().includes(searchTerm)) ||
(alat.nama_ruang && alat.nama_ruang.toLowerCase().includes(searchTerm)) ||
(alat.nama_merk && alat.nama_merk.toString().toLowerCase().includes(searchTerm)) ||
(alat.nama_tipe && alat.nama_tipe.toString().toLowerCase().includes(searchTerm)) ||
(alat.tahun && alat.tahun.toString().includes(searchTerm)) ||
(alat.kondisi && alat.kondisi.toString().includes(searchTerm))
);
},
sort(key) {
if (this.sortKey === key) {
this.sortOrder *= -1;
} else {
this.sortBy = column;
this.sortDirection = 'asc';
this.sortKey = key;
this.sortOrder = 1;
}
},
},
computed: {
sortedAlat() {
let sortedList = [...this.ListAlat];
if (this.sortBy) {
sortedList.sort((a, b) => {
let modifier = 1;
if (this.sortDirection === 'desc') modifier = -1;
if (a[this.sortBy] < b[this.sortBy]) return -1 * modifier;
if (a[this.sortBy] > b[this.sortBy]) return 1 * modifier;
return 0;
});
sortIcon(key) {
if (this.sortKey === key) {
return this.sortOrder === 1 ? 'fas fa-sort-up' : 'fas fa-sort-down';
}
if (this.searchQuery) {
sortedList = sortedList.filter(alat =>
alat.no_inventaris.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
alat.kondisi.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
alat.id_jenis_alat.toString().includes(this.searchQuery.toLowerCase()) ||
alat.id_ruang.toString().includes(this.searchQuery.toLowerCase()) ||
alat.nama_merk.toString().includes(this.searchQuery.toLowerCase()) ||
alat.nama_tipe.toString().includes(this.searchQuery.toLowerCase()) ||
alat.tahun.toString().includes(this.searchQuery.toLowerCase())
);
}
return sortedList;
},
},
return 'fas fa-sort';
}
}
};
</script>
......@@ -223,11 +199,11 @@ html, body, #wrapper, #content-wrapper, .service_section {
.btn-info {
width: 80px;
margin-left: 10px;
}
.btn-danger {
}
.btn-danger {
width: 80px;
}
}
.button-container {
display: flex;
......@@ -300,4 +276,4 @@ html, body, #wrapper, #content-wrapper, .service_section {
.container-fluid {
flex: 1;
}
</style>
</style>
\ No newline at end of file
fe-sarpras/src/components/user/Inventaris.vue
View file @ 50c6b456
......@@ -41,7 +41,7 @@
import Sidebar from '@/components/includes/Sidebar.vue';
import Navbar from "../includes/navbar.vue";
import Footer from "../includes/Footer.vue";
export default {
components: {
Sidebar,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment