Move past orders and settings into seperate components

resources/js/panel/orders.vue

@@ -0,0 +1,69 @@
+<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>

resources/js/panel/panel.vue

@@ -25,190 +25,34 @@
 	</table>
 	</section>
 </div>
-<div v-else-if="active === '#orders'" id="main">
-	<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 @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>
-		<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>
+<PastOrders :orders="orders" v-else-if="active === '#orders'" id="main">
+</PastOrders>
+<NewOrder :orders="orders" v-else-if="active === '#new-order'" id="main">
+</NewOrder>
 <div id="main" v-else-if="active === '#exit'">
 	<section class="logout-pane">
 		<h3>Are you sure you want to logout?</h3>
 		<a href="/logout">Logout</a>
 	</section>
 </div>
-<div class="settings-page" id="main" v-else-if="active === '#settings'">
-	<section class="change-name-pane">
-	<h3>Settings</h3>
-		<h4>Name</h4>
-		<input :value="user.name" name="name" id="changed_name" type="text">
-		<button @click="changeName">Save <loading src="../../images/loading-white.svg" alt=""></loading></button>
-		<span></span>
-	</section>
-	<section class="change-email-pane">
-		<h4>Email</h4>
-		<input :value="user.email" name="email" type="text" id="changed_email">
-		<button @click="changeEmail">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
-		<span></span>
-	</section>
-	<section class="change-password-pane">
-		<h4>Change Password</h4>
-		<h5>Current Password</h5><input name="current_passowrd" id="current_password" type="password">
-		<h5>New Password</h5><input id="new_password" name="passowrd" type="password">
-		<h5>Confirm Password</h5><input id="confirm_password" name="confirm_passowrd" type="password">
-		<button @click="changePassword">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
-		<span></span>
-	</section>
-</div>
+<settings :token="token" :user="user" class="settings-page" id="main" v-else-if="active === '#settings'"></settings>
 </transition>
 </template>
 
 <script>
 import Sidebar from './sidebar.vue'
-import Loading from '../icons/loading.vue'
-
-function togglePending(event) {
-	event.target.parentNode.parentNode.classList.toggle('selected')
-}
-
-function toggleOrderItem(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
-	}
-}
-
-function changeName() {
-	let name = document.getElementById('changed_name').value
-	let info = document.querySelector('.change-name-pane span')
-	let pane = document.querySelector('.change-name-pane')
-
-	pane.classList.add('loading')
-	pane.classList.remove('error')
-	fetch("/panel/change-name", {
-		method: 'POST',
-		headers: {'Content-Type': 'application/json',
-			'Accept': 'application/json',
-		'X-XSRF-TOKEN': this.token},
-		body: JSON.stringify({'name': name}),
-	}).then(response => {
-		if (response.ok) {
-			response.json().then(data => {this.user = data})
-			pane.classList.add('completed')
-			info.textContent = 'Completed'
-		} else {
-			pane.classList.add('error')
-			info.textContent = 'Error: ' + response.status
-		}
+import Settings from './settings.vue'
+import PastOrders from './orders.vue'
 
-		pane.classList.remove('loading')
-	})
-}
-
-function changeEmail() {
-	let email = document.getElementById('changed_email').value
-	let info = document.querySelector('.change-email-pane span')
-	let pane = document.querySelector('.change-email-pane')
-
-	pane.classList.add('loading')
-	pane.classList.remove('error')
-	fetch("/panel/change-name", {
-		method: 'POST',
-		headers: {'Content-Type': 'application/json',
-			'Accept': 'application/json',
-		'X-XSRF-TOKEN': this.token},
-		body: JSON.stringify({'email': email}),
-	}).then(response => {
-		if (response.ok) {
-			pane.classList.add('completed')
-			info.textContent = 'Completed'
-		} else {
-			pane.classList.add('error')
-			info.textContent = 'Error: ' + response.status
-		}
-
-		pane.classList.remove('loading')
-	})
-}
-
-function changePassword() {
-	let info = document.querySelector('.change-password-pane span')
-	let pane = document.querySelector('.change-password-pane')
-
-	pane.classList.add('loading')
-	pane.classList.remove('error')
-	fetch("/panel/change-password", {
-		method: 'POST',
-		headers: {'Content-Type': 'application/json',
-			'Accept': 'application/json',
-		'X-XSRF-TOKEN': this.token},
-		body: JSON.stringify({'current_password': document.getElementById('current_password').value, 'password': document.getElementById('new_password').value, 'password_confirmation': document.getElementById('confirm_password').value}),
-	}).then(response => {
-		response.json().then(data => {console.log(data)})
-		if (response.ok) {
-			pane.classList.add('completed')
-			info.textContent = 'Completed'
-		} else {
-			pane.classList.add('error')
-			info.textContent = 'Error: ' + response.status
-		}
-
-		pane.classList.remove('loading')
-	})
-}
 
 export default {
 	components: {
-		Sidebar, Loading
+		Sidebar, Settings, PastOrders
 	},
 	data() {
 	return {active: window.location.hash, user: '',
-	token: '', orders: '', historyPage: 1}
+	token: '', orders: ''}
 	},
-	methods: {togglePending, toggleOrderItem, moveHistory, changeName, changeEmail, changePassword}
+	methods: {},
 }
 </script>

resources/js/panel/settings.vue

@@ -0,0 +1,115 @@
+<template>
+<div>
+	<section class="change-name-pane">
+	<h3>Settings</h3>
+		<h4>Name</h4>
+		<input :value="user.name" name="name" id="changed_name" type="text">
+		<button @click="changeName">Save <loading src="../../images/loading-white.svg" alt=""></loading></button>
+		<span></span>
+	</section>
+	<section class="change-email-pane">
+		<h4>Email</h4>
+		<input :value="user.email" name="email" type="text" id="changed_email">
+		<button @click="changeEmail">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
+		<span></span>
+	</section>
+	<section class="change-password-pane">
+		<h4>Change Password</h4>
+		<h5>Current Password</h5><input name="current_passowrd" id="current_password" type="password">
+		<h5>New Password</h5><input id="new_password" name="passowrd" type="password">
+		<h5>Confirm Password</h5><input id="confirm_password" name="confirm_passowrd" type="password">
+		<button @click="changePassword">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
+		<span></span>
+	</section>
+</div>
+</template>
+
+<script>
+import Loading from '../icons/loading.vue'
+
+function changeName() {
+	let name = document.getElementById('changed_name').value
+	let info = document.querySelector('.change-name-pane span')
+	let pane = document.querySelector('.change-name-pane')
+
+	pane.classList.add('loading')
+	pane.classList.remove('error')
+	fetch("/panel/change-name", {
+		method: 'POST',
+		headers: {'Content-Type': 'application/json',
+			'Accept': 'application/json',
+		'X-XSRF-TOKEN': this.token},
+		body: JSON.stringify({'name': name}),
+	}).then(response => {
+		if (response.ok) {
+			pane.classList.add('completed')
+			info.textContent = 'Completed'
+		} else {
+			pane.classList.add('error')
+			info.textContent = 'Error: ' + response.status
+		}
+
+		pane.classList.remove('loading')
+	})
+}
+
+function changeEmail() {
+	let email = document.getElementById('changed_email').value
+	let info = document.querySelector('.change-email-pane span')
+	let pane = document.querySelector('.change-email-pane')
+
+	pane.classList.add('loading')
+	pane.classList.remove('error')
+	fetch("/panel/change-name", {
+		method: 'POST',
+		headers: {'Content-Type': 'application/json',
+			'Accept': 'application/json',
+		'X-XSRF-TOKEN': this.token},
+		body: JSON.stringify({'email': email}),
+	}).then(response => {
+		if (response.ok) {
+			pane.classList.add('completed')
+			info.textContent = 'Completed'
+		} else {
+			pane.classList.add('error')
+			info.textContent = 'Error: ' + response.status
+		}
+
+		pane.classList.remove('loading')
+	})
+}
+
+function changePassword() {
+	let info = document.querySelector('.change-password-pane span')
+	let pane = document.querySelector('.change-password-pane')
+
+	pane.classList.add('loading')
+	pane.classList.remove('error')
+	fetch("/panel/change-password", {
+		method: 'POST',
+		headers: {'Content-Type': 'application/json',
+			'Accept': 'application/json',
+		'X-XSRF-TOKEN': this.token},
+		body: JSON.stringify({'current_password': document.getElementById('current_password').value, 'password': document.getElementById('new_password').value, 'password_confirmation': document.getElementById('confirm_password').value}),
+	}).then(response => {
+		response.json().then(data => {console.log(data)})
+		if (response.ok) {
+			pane.classList.add('completed')
+			info.textContent = 'Completed'
+		} else {
+			pane.classList.add('error')
+			info.textContent = 'Error: ' + response.status
+		}
+
+		pane.classList.remove('loading')
+	})
+}
+
+export default {
+	components: {Loading},
+	methods: {
+		changePassword, changeName, changeEmail
+	},
+	props: ['user', 'token']
+}
+</script>