Skip to content

Instantly share code, notes, and snippets.

@akmalhazim

akmalhazim/CreateOrder.vue

Created December 30, 2018 16:25
Show Gist options
  • Save akmalhazim/d09da574dbf91d2e1674bfb7fe896fd6 to your computer and use it in GitHub Desktop.
Save akmalhazim/d09da574dbf91d2e1674bfb7fe896fd6 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>-->
<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" name="value" :value="package.reference" class="selectgroup-input" checked="" v-model="form.cart">
<span class="selectgroup-button">{{ package.name }} <b>RM{{ package.price}}</b></span>
</div>
</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" v-for="package in student.packages">
<div v-if="package.promotion">
<input type="radio" name="value" :value="package.reference" class="selectgroup-input" v-model="form.cart">
<span class="selectgroup-button">{{ package.name }} (Percuma) <b>RM{{ package.price }}</b></span>
</div>
</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>
<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)" class="imagecheck-input" v-model="form.cart"/>
<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 class="col-6 col-sm-4">-->
<!--<label class="imagecheck mb-4">-->
<!--<label class="form-label">Pilihan</label>-->
<!--<input name="imagecheck" type="checkbox" value="2" class="imagecheck-input" />-->
<!--<figure class="imagecheck-figure">-->
<!--<img src="/images/item-target.png" alt="}" class="imagecheck-image">-->
<!--</figure>-->
<!--<label class="form-label">Target <b>RM50</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">RM101.00</div>
</div>
<div class="mb-4 text-center">
<button type="button" class="btn btn-primary btn-block" onclick="window.location.replace('')">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 }
},
data() {
return {
paidArray: [],
monthInArray: ['Pendaftaran', 'Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun',
'Julai', 'Ogos', 'September', 'Oktober', 'November', 'Disember'],
form: new Form({
cart: []
})
}
},
computed: {
},
methods: {
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("packages." + id + "." + student_id);
return "packages." + 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