Allow order URLs to be changed

app/Http/Controllers/OrderController.php

@@ -46,4 +46,21 @@ class OrderController extends Controller
 		}
 		return true;
 	}
+
+	public function changeURL(Request $request) {
+		$validated = $request->validate([
+			'order' => 'required',
+			'url' => 'required'
+		]);
+
+		$order = Order::find($request->order);
+		$user = Auth::user();
+
+		if (!in_array($order->status, ['processing', 'error'])) {
+			abort(422);
+		}
+
+		$order->url = $request->url;
+		$order->save();
+	}
 }

resources/js/panel/order-item.vue

@@ -16,7 +16,8 @@
 
 	<div class="details">
 		<ul>
-			<li><b>Status:</b> <span>{{selected.status}}</span></li>
+			<li><b>Status:</b> <span>{{selected.status.charAt(0).toUpperCase() +
+			selected.status.slice(1)}}</span></li>
 			<li><b>Quantity:</b> <span>{{selected.quantity}}</span></li>
 			<li><b>Remaining:</b> <span>{{selected.remaining}}</span></li>
 			<li><b>URL:</b> <span>{{selected.url}}</span></li>
@@ -26,8 +27,8 @@
 	<div v-if="selected.status == 'processing' || selected.status ==
 	'error'" class="change-url">
 		<h4>URL</h4>
-		<div><input :value="selected.url" type="url" id="url"></div> 
-		<button @click="saveUrl" :disabled="loading">Save
+		<div><input v-model="url" type="url" id="url"></div> 
+		<button @click="saveURL" :disabled="loading">Save
 		<loading-icon v-if="loading"></loading-icon></button>
 		<p id="overlay-error">{{errorMessage}}</p>
 	</div>
@@ -41,15 +42,30 @@
 import LoadingIcon from '../icons/loading.vue'
 
 function saveURL() {
+	fetch('/panel/save-url', {
+		method: 'POST',
+		headers: {'Content-Type': 'application/json',
+			'Accept': 'application/json',
+		'X-XSRF-TOKEN': this.token},
+		body: JSON.stringify({'url': this.url, 'order': this.selected.id})
+		}).then(response => {
+			if (response.ok) {
+				this.errorMessage = 'Saved'
+				this.$emit('changeUrl', this.url)
+			} else {
+				this.errorMessage = 'An error occured'
+			}
+		})
 
 }
 
 export default {
 	data() {
-		return {loading: false, errorMessage: ''}
+		return {loading: false, errorMessage: '', url: this.selected.url}
 	},
 	components: {LoadingIcon},
 	methods: {saveURL},
 	props: ['selected', 'token'],
+	emits: ['changeUrl', 'close']
 }
 </script>

resources/js/panel/orders.vue

@@ -47,7 +47,8 @@
 	src="../../images/arrow-right-circle-fill.svg" alt=""/>
 	</section>
 
-	<order-item @close="close" :selected="selected" :token="token"></order-item>
+	<order-item v-if="selected" @close="close" :selected="selected"
+	:token="token" @change-url="(url) => selected.url = url"></order-item>
 
 </div>
 </template>

resources/js/panel/panel.vue

@@ -14,7 +14,7 @@
 	</section>
 	<section class="recent-pane"><h4>Recent Activity</h4>
 	<table>
-		<thead><th>Date</th><th>Name</th><th>Status</th> <th>Quantity</th></thead>
+		<thead><th>Date</th><th>Name</th><th>Status</th></thead>
 		<tbody>
 		<tr v-bind:key='order.id' v-for='order in orders.slice(0, 10)'>
 		<template v-if="order.status != 'pending'">
@@ -23,7 +23,6 @@
 		<td :class="order.status"
 		class="status"><span>{{order.status.charAt(0).toUpperCase() +
 		order.status.slice(1)}}</span></td>
-		<td>{{order.quantity}}</td>
 		</template>
 		</tr>
 		</tbody>

resources/scss/main.scss

@@ -804,7 +804,6 @@ section.recent-pane, section.history-pane{
 		border-spacing: 4px;
 		margin: auto;
 		text-align: center;
-		min-width: 30em;
 		width: 100%;
 	}
 
@@ -913,6 +912,10 @@ section.recent-pane, section.history-pane{
 		left: 50%;
 	}
 
+	table {
+		min-width: 30em;
+	}
+
 }
 
 .actions {

routes/web.php

@@ -131,6 +131,9 @@ Route::post('/panel/pm-fail', [BillingController::class,
 Route::get('/panel/cards', [BillingController::class,
 	'getCards'])->middleware([ 'auth', 'verified' ]);
 
+Route::post('/panel/save-url', [OrderController::class,
+	'changeURL'])->middleware([ 'auth', 'verified' ]);
+
 //Stripe webhooks
 Route::post('/hooks/charge',
 	[BillingController::class, 'chargeEvent']);