Skip to content

Instantly share code, notes, and snippets.

@akmalhazim

akmalhazim/CreateOrder.vue

Created December 31, 2018 12:57
Show Gist options
  • Save akmalhazim/523fd2da3d104fe4879f7d1b4e5f108f to your computer and use it in GitHub Desktop.
Save akmalhazim/523fd2da3d104fe4879f7d1b4e5f108f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CreateOrder.vue
<template>
<!-- body -->
<div class="my-3 my-md-5">
<div class="container">
<div class="page-header">
<h1 class="page-title">
Pilih Item Untuk Bayar
</h1>
</div>
<div class="col-md-12">
<div class="alert alert-primary">Sila pilih item untuk pembayaran di bawah, dan klik 'Simpan dan Teruskan'. <br /> Sekiranya ingin tambah pelajar, klik 'Tambah Pelajar'</div>
</div>
<div class="my-3 my-md-5">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<!-- Student -->
<div class="col-md-12 col-xl-12" v-for="(student, index) in $props.student">
<div class="card">
<div class="card-status bg-blue"></div>
<div class="card-header">
<h3 class="card-title">{{ student.name }}</h3>
<div class="card-options">
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
</div>
</div>
<!--
<div class="card-alert alert alert-success mb-0">
Adding action was successful
</div>
-->
<div class="card-body">
<div class="form-group" v-if="student.subscription !== null">
<label class="form-label">Senarai Bayaran Tahun 2019</label>
<div class="tags">
<!-- TODO: document the calculation. got bugs in Perlu Bayar block. -->
<!-- show only paid -->
<span v-for="item in addNumberToArray(student.subscription.max_period)" class='tag tag-dark'>{{ monthInArray[item] }}<span class='tag-addon tag-success'>Sudah Bayar</span></span>
</div>
</div>
<!--<div class="form-group">-->
<!--<label class="form-label">Pilih bayaran</label><br/>-->
<!--<div class="form-group">-->
<!--<div class="selectgroup w-100">-->
<!--<label class="selectgroup-item" v-if="student.subscription === null">-->
<!--<input type="radio" name="value" :value="getValuePackages(1,student.id)" class="selectgroup-input" checked="">-->
<!--<span class="selectgroup-button">Pendaftaran <b>RM50</b></span>-->
<!--</label>-->
<!--<label class="selectgroup-item">-->
<!--<input type="radio" name="value" :value="getValuePackages(2,student.id)" class="selectgroup-input">-->
<!--<span class="selectgroup-button">1 bulan <b>RM50</b></span>-->
<!--</label>-->
<!--<label class="selectgroup-item">-->
<!--<input type="radio" name="value" :value="getValuePackages(3,student.id)" class="selectgroup-input">-->
<!--<span class="selectgroup-button">2 bulan <b>RM100</b></span>-->
<!--</label>-->
<!--<label class="selectgroup-item">-->
<!--<input type="radio" name="value" :value="getValuePackages(4,student.id)" class="selectgroup-input">-->
<!--<span class="selectgroup-button">3 bulan <b>RM150</b></span>-->
<!--</label>-->
<!--<label class="selectgroup-item">-->
<!--<input type="radio" name="value" :value="getValuePackages(5,student.id)" class="selectgroup-input">-->
<!--<span class="selectgroup-button">4 bulan <b>RM200</b></span>-->
<!--</label>-->
<!--</div>-->
<!--<div class="selectgroup w-100">-->
<!--<label class="selectgroup-item">-->
<!--<input type="radio" name="value" :value="getValuePackages(6,student.id)" class="selectgroup-input">-->
<!--<span class="selectgroup-button">5 bulan + 1 bulan (Percuma) <b>RM250</b></span>-->
<!--</label>-->
<!--<label class="selectgroup-item">-->
<!--<input type="radio" name="value" :value="getValuePackages(7,student.id)" class="selectgroup-input">-->
<!--<span class="selectgroup-button">9 bulan + 3 bulan (Percuma) <b>RM450</b></span>-->
<!--</label>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<form>-->
<!--<div class="form-group">-->
<!--<label class="form-label">Pilih bayaran</label><br/>-->
<!--<div class="form-group">-->
<!--<div class="selectgroup w-100">-->
<!--<label class="selectgroup-item" v-for="package in student.packages">-->
<!--<div v-if="!package.promotion">-->
<!--<input type="radio" :value="package.reference" class="selectgroup-input" :name="'abc' + student.id" checked="" v-model="fees">-->
<!--<span :name="'abc' + student.id" class="selectgroup-button">{{ package.name }} <b>RM{{ package.price}}</b></span>-->
<!--</div>-->
<!--</label>-->
<!--</div>-->
<!--<div class="selectgroup w-100">-->
<!--<label class="selectgroup-item" v-for="package in student.packages">-->
<!--<div v-if="package.promotion">-->
<!--<input type="radio" :value="package.reference" :name="'abc' + student.id" class="selectgroup-input" v-model="fees">-->
<!--<span :name="'abc' + student.id" class="selectgroup-button">{{ package.name }} (Percuma) <b>RM{{ package.price }}</b></span>-->
<!--<input type="radio" :value="package.reference" :name="student.id + 'a'" class="selectgroup-input" v-model="fees">-->
<!--<span class="selectgroup-button">{{ package.name }} (Percuma) <b>RM{{ package.price }}</b></span>-->
<!--</div>-->
<!--</label>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</form>-->
<div class="form-group">
<select name="month" id="select-month" class="form-control select" v-model="fees[index]" v-if="student.packages.length > 0">
<option :value="[package.reference,package.price]" selected="" v-for="package in student.packages">{{ package.name }} - RM{{ package.price }}</option>
<!--<option value="2">2 bulan RM100</option>-->
<!--<option value="3">3 bulan RM150</option>-->
<!--<option value="4">4 bulan RM200</option>-->
<!--<option value="5">Promosi: 5+1 bulan RM300</option>-->
<!--<option value="11">Promosi: 11+1 bulan RM450</option>-->
</select>
</div>
<div class="form-group">
<div class="row gutters-sm">
<div class="col-6 col-sm-4" v-for="item in items">
<label class="imagecheck mb-4">
<label class="form-label">Mandatori</label>
<input name="imagecheck" type="checkbox" :value="[getValuePackages(item.id, student.id),item.price]" class="imagecheck-input" v-model="items2"/>
<figure class="imagecheck-figure">
<img :src="item.image_url" :alt="item.name" class="imagecheck-image">
</figure>
<label class="form-label">{{ item.name}} <b>RM{{ item.price }}</b></label>
</label>
</div>
</div>
</div>
</div>
<!--<div class="card-footer">-->
<!--<span class="text-right">Jumlah : <span class="h3">RM00.00</span></span>-->
<!--</div>-->
</div>
</div>
<!-- // Student -->
</div>
</div>
<!-- Proceed -->
<div class="col-lg-4">
<!-- Tambah Anak -->
<div class="card">
<div class="card-body">
<a :href="$props.add_student_url" class="btn btn-success btn-block btn-lg" ><i class="fe fe-plus"></i> Tambah Pelajar</a>
</div>
</div>
<!-- // Tambah Anak -->
<!-- Jumlah -->
<div class="card">
<div class="card-header">
<h3 class="card-title">Jumlah</h3>
</div>
<div class="card-body">
<div class="mb-4 text-center">
<div class="display-3 my-4">RM{{ total }}</div>
</div>
<div class="mb-4 text-center">
<button type="button" @click="onSubmit" class="btn btn-primary btn-block">Simpan dan Teruskan</button>
</div>
</div>
</div>
<!-- //Jumlah -->
</div>
<!-- // Proceed -->
</div>
</div>
</div>
</div>
</div>
<!-- // body -->
</template>
<script>
import Form from '~/Form'
export default {
props: {
student: { required: true },
items: { required: true },
add_student_url: { required: true },
url: { required: true }
},
data() {
return {
paidArray: [],
monthInArray: ['Pendaftaran', 'Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun',
'Julai', 'Ogos', 'September', 'Oktober', 'November', 'Disember'],
form: new Form({
cart: []
}),
fees: [],
items2: []
}
},
computed: {
cart() {
// return [...this.fees, ...this.items2 ]
return [...this.fees, ...this.items2 ]
// return [ this.fees, ...this.items2 ]
},
total() {
return this.cart.reduce( (acc, cart) => {
if(cart != null) {
return acc + cart[1];
}
return acc;
}, 0)
},
itemsOnly() {
const array = [];
this.cart.forEach(key => {
if(key != null) {
array.push(key[0]);
}
})
return array;
}
},
methods: {
onSubmit() {
axios.post(this.url, {
item: this.itemsOnly
})
.then(res => {
handleRedirect(res.data.redirect)
})
.catch(err => {
alert('error', 'Maaf, terdapat ralat.', 'Sila inform kami.')
})
},
getMonthToPay(last_paid_month) {
// TODO: Review algorithm
last_paid_month = last_paid_month+1;
// let month_difference = 1+1-last_paid_month+1;
let month_difference = new Date().getMonth()+1-last_paid_month+1;
if (month_difference < 0) {
return 0;
} else if (month_difference > 12) {
return 12;
} else {
return month_difference;
}
},
addNumberToArray(x) {
return [...Array(x).keys()];
},
getValuePackages(id, student_id) {
// `this` points to the vm instance
// console.log("items." + id + "." + student_id);
return "items." + id + "." + student_id;
}
},
mounted() {
this.addNumberToArray();
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment