Paginate order history

resources/js/panel/panel.vue

@@ -48,7 +48,7 @@
 	<table>
 		<thead><th>Date</th><th>ID</th><th>Name</th><th>Status</th> <th>Quantity</th></thead>
 		<tbody>
-		<tr @click="toggleOrderItem($event)" v-bind:key='order.id' v-for='order in orders.slice(0, 10)'>
+		<tr @click="toggleOrderItem($event)" v-bind:key='order.id' v-for='order in orders.slice(historyPage*10-10, historyPage*10)'>
 		<td>{{order.updated_at}}</td>
 		<td>{{order.id}}</td>
 		<td>{{order.service.name}}</td>
@@ -59,8 +59,9 @@
 		</tr>
 		</tbody>
 	</table>
-	<img class="nav-btn" src="../../images/arrow-left-circle-fill.svg" alt="">
-	<img class="nav-btn" src="../../images/arrow-right-circle-fill.svg" alt="">
+	<img @click="moveHistory(false)" class="nav-btn left" src="../../images/arrow-left-circle-fill.svg" alt="">
+	<p class="nav-legend">{{historyPage}}/{{Math.ceil(orders.length/10)}}</p>
+	<img @click="moveHistory(true)" class="nav-btn right" src="../../images/arrow-right-circle-fill.svg" alt="">
 	</section>
 </div>
 <div id="main" v-else-if="active === '#exit'">
@@ -83,8 +84,19 @@ function toggleOrderItem(event) {
 	event.target.parentNode.parentNode.classList.toggle('selected')
 }
 
-function logout(event) {
-	event.target.parentNode.parentNode.classList.toggle('selected')
+function moveHistory(forward) {
+	if (forward) {
+		this.historyPage += 1
+	} else {
+		this.historyPage -= 1
+	}
+	if (this.historyPage < 1) {
+		this.historyPage = 1
+		return
+	} else if (this.historyPage > this.orders.length/10+1) {
+		this.historyPage -= 1
+		return
+	}
 }
 
 export default {
@@ -93,8 +105,8 @@ export default {
 	},
 	data() {
 	return {active: window.location.hash, user: '',
-	token: '', orders: ''}
+	token: '', orders: '', historyPage: 1}
 	},
-	methods: {togglePending, toggleOrderItem}
+	methods: {togglePending, toggleOrderItem, moveHistory}
 }
 </script>

resources/scss/main.scss

@@ -853,12 +853,36 @@ main.panel {
 }
 
 .history-pane {
-	table {
-		overflow: scroll;
+	overflow: visible;
+	transition: all 0.2s;
+	.nav-btn {
+		width: 1.5em;
+		transform: translateY(1.5em);
+
 	}
-	thead {
-		// display: block;
+	.nav-btn.right {
+		bottom: 0px;
+		right: 1em;
+		position: absolute;
+		display: block;
+		margin-left: auto;
 	}
+	.nav-btn.left {
+		bottom: 0px;
+		left: 1em;
+		position: absolute;
+		display: block;
+		margin-right: auto;
+	}
+	.nav-legend {
+		color: grey;
+		transform: translateX(-1.5em);
+		text-align: center;
+		position: absolute;
+		width: 3em;
+		left: 50%;
+	}
+
 }
 
 .actions {