trendplays/resources/js/panel/orders.vue

<template>
<div>
	<section class="pending-pane">
	<h4>Pending Orders</h4>
	<ul>
		<template v-bind:key='order.id' v-for="order in orders">
		<div class="pending-item" v-if="order.status == 'pending'">
			<div class="pending-heading">
			<li @click="togglePending($event)">{{order.service.name}} ({{order.updated_at}})</li>
			<img class="chevron" src="../../images/chevron-down.svg" alt="">
			</div>
		<div class="pending-content">
			<p>ID: {{order.id}}<br>URL: {{order.url}}<br>Quantity: {{order.quantity}}<br>Note: {{order.note}}</p>
		</div>
		</div>
		</template>
	</ul>
	</section>
	<section class="history-pane">
		<h4>Order History</h4>
	<table>
		<thead><th>Date</th><th>ID</th><th>Name</th><th>Status</th> <th>Quantity</th></thead>
		<tbody>
		<tr 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>
		<td :class="order.status"
		class="status"><span>{{order.status.charAt(0).toUpperCase() +
		order.status.slice(1)}}</span></td>
		<td>{{order.quantity}}</td>
		</tr>
		</tbody>
	</table>
	<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>
</template>

<script>
function togglePending(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 {
	data() {return {historyPage: 1}},
	methods: {
	togglePending, moveHistory
	},
	props: ['orders']
}
</script>