Immanuel
/
trendplays
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

Move past orders and settings into seperate components

tags/v0.1.0
Immanuel Onyeka 3 years ago
parent
486c3e9177
commit
1efaf89daa
3 changed files with 194 additions and 166 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +69
    -0
      resources/js/panel/orders.vue
  2. +10
    -166
      resources/js/panel/panel.vue
  3. +115
    -0
      resources/js/panel/settings.vue

+ 69
- 0
resources/js/panel/orders.vue View File

@@ -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>

+ 10
- 166
resources/js/panel/panel.vue View File

@@ -25,190 +25,34 @@
</table> </table>
</section> </section>
</div> </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'"> <div id="main" v-else-if="active === '#exit'">
<section class="logout-pane"> <section class="logout-pane">
<h3>Are you sure you want to logout?</h3> <h3>Are you sure you want to logout?</h3>
<a href="/logout">Logout</a> <a href="/logout">Logout</a>
</section> </section>
</div> </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> </transition>
</template> </template>


<script> <script>
import Sidebar from './sidebar.vue' 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 { export default {
components: { components: {
Sidebar, Loading
Sidebar, Settings, PastOrders
}, },
data() { data() {
return {active: window.location.hash, user: '', return {active: window.location.hash, user: '',
token: '', orders: '', historyPage: 1}
token: '', orders: ''}
}, },
methods: {togglePending, toggleOrderItem, moveHistory, changeName, changeEmail, changePassword}
methods: {},
} }
</script> </script>

+ 115
- 0
resources/js/panel/settings.vue View File

@@ -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>

Write Preview
Loading…
Cancel
Save