Allowance check

resources/assets/js/components/demo/admin/position/index.vue

@@ -13,34 +13,19 @@
 					</button>
 				</div>
 
-				<div class="table-responsive">
-					<table class="table table-hover" id="position_table">
-						<thead>
-							<tr>
-								<th>ID</th>
-								<th>Nama</th>
-								<th>Tindakan</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr v-for="(position, i) in data.positions">
-								<td>{{ position.id }}</td>
-								<td>{{ position.name }}</td>
-								<td>
-									<button class="btn btn-info" @click="edit(i)">
-										<i class="fa fa-edit"></i> Edit
-									</button>
-									<button class="btn btn-danger" @click="util.showModal('#delete-position-modal'); id = position.id">
-										<i class="fa fa-trash"></i> Padam
-									</button>
-								</td>
-							</tr>
-							<tr v-if="data.positions.length < 1">
-								<td colspan="3">No Jawatan</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
+				<admin-data-table :headers="positionTableHeaders" :items="data.positions" :loading="positionLoading"
+					:items-per-page="10" :show-pagination="true" empty-text="Tiada jawatan" :exportable="true"
+					export-file-name="jawatan">
+					<template v-slot:item-actions="{ item }">
+						<button type="button" class="btn btn-info" @click="edit(item)">
+							<i class="fa fa-edit"></i> Edit
+						</button>
+						<button type="button" class="btn btn-danger"
+							@click="util.showModal('#delete-position-modal'); id = item.id">
+							<i class="fa fa-trash"></i> Padam
+						</button>
+					</template>
+				</admin-data-table>
 			</div>
 		</div>
 
@@ -62,7 +47,12 @@
 export default {
 	data: function () {
 		return {
-			id: 0
+			id: 0,
+			positionLoading: false,
+			positionTableHeaders: [
+				{ title: 'Nama', key: 'name', sortable: true },
+				{ title: 'Tindakan', key: 'actions', sortable: false }
+			]
 		}
 	},
 
@@ -76,10 +66,10 @@ export default {
 	methods: {
 		refreshPosition: function () {
 			var vm = this;
+			this.positionLoading = true;
 			this.util.notify('Refreshing Position', 'loading');
 			axios.get(config.API + 'position')
 				.then(response => {
-					console.log(response)
 					$.notifyClose();
 					vm.data.positions = response.data;
 				})
@@ -87,22 +77,14 @@ export default {
 					$.notifyClose();
 					vm.util.showResult(error);
 				})
+				.finally(function () {
+					vm.positionLoading = false;
+				})
 		},
 
-		initDatatable: function () {
+		edit: function (position) {
 			var vm = this;
-			$('#position_table').DataTable({
-				destroy: true,
-				searching: false,
-				info: false,
-				autoWidth: false,
-				dom: 'Bfrtip'
-			});
-		},
-
-		edit: function (i) {
-			var vm = this;
-			this.data.position = this.data.positions[i];
+			this.data.position = position;
 			this.$router.push({ name: 'Edit Position', params: { id: vm.data.position.id } })
 		},