ISMAIL MASSERAN
378 lines
8.6 KiB
Vue
378 lines
8.6 KiB
Vue
<template>
|
|
<div class="panel panel-default nominee-add-page">
|
|
<div class="panel-body">
|
|
<div class="nominee-add-page__header clearfix">
|
|
<h4 class="pull-left nominee-add-page__title">
|
|
<i class="fa fa-user-plus text-muted"></i> Tambah Calon
|
|
</h4>
|
|
<router-link
|
|
:to="{ name: 'Maklumat Calon', query: { position_id: position_id } }"
|
|
class="btn btn-default pull-right"
|
|
>
|
|
<i class="fa fa-arrow-left"></i> Kembali
|
|
</router-link>
|
|
</div>
|
|
|
|
<p class="text-muted small nominee-add-page__intro">
|
|
Lengkapkan maklumat calon. Medan bertanda <span class="text-danger">*</span> adalah wajib.
|
|
</p>
|
|
|
|
<form
|
|
class="nominee-add-form"
|
|
method="POST"
|
|
id="add_form"
|
|
:action="data.API + 'nominee'"
|
|
enctype="multipart/form-data"
|
|
@submit.prevent="add()"
|
|
>
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<label for="nominee-name">Nama Calon <span class="text-danger">*</span></label>
|
|
<input
|
|
id="nominee-name"
|
|
type="text"
|
|
name="name"
|
|
class="form-control"
|
|
placeholder="Nama penuh"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<label for="nominee-no-anggota">No. Anggota <span class="text-danger">*</span></label>
|
|
<input
|
|
id="nominee-no-anggota"
|
|
type="text"
|
|
name="no_anggota"
|
|
class="form-control"
|
|
placeholder="No. keahlian"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<label for="nominee-unit">Unit <span class="text-danger">*</span></label>
|
|
<input
|
|
id="nominee-unit"
|
|
type="text"
|
|
name="unit"
|
|
class="form-control"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<label for="nominee-umur">Umur <span class="text-danger">*</span></label>
|
|
<input
|
|
id="nominee-umur"
|
|
type="number"
|
|
name="umur"
|
|
class="form-control"
|
|
min="1"
|
|
max="120"
|
|
placeholder="Tahun"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="nominee-jawatan-sekarang">Jawatan Sekarang <span class="text-danger">*</span></label>
|
|
<input
|
|
id="nominee-jawatan-sekarang"
|
|
type="text"
|
|
name="jawatan_sekarang"
|
|
class="form-control"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="nominee-education">Taraf Pendidikan</label>
|
|
<input
|
|
id="nominee-education"
|
|
type="text"
|
|
name="education"
|
|
class="form-control"
|
|
placeholder="Pilihan"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="nominee-experience">Pengalaman Kerja</label>
|
|
<textarea
|
|
id="nominee-experience"
|
|
name="experience"
|
|
class="form-control"
|
|
rows="4"
|
|
placeholder="Pilihan — senaraikan pengalaman relevan"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="nominee-position-id">Jawatan Dicalonkan <span class="text-danger">*</span></label>
|
|
<select
|
|
id="nominee-position-id"
|
|
class="form-control"
|
|
v-model="position_id"
|
|
name="position_id"
|
|
required
|
|
>
|
|
<option value="0" disabled>— Pilih jawatan —</option>
|
|
<option
|
|
v-for="position in data.positions"
|
|
:key="position.id"
|
|
:value="position.id"
|
|
>
|
|
{{ position.name }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="nominee-add-photo panel panel-default">
|
|
<div class="panel-heading">
|
|
<strong><i class="fa fa-camera"></i> Gambar calon</strong>
|
|
<span class="text-muted small nominee-add-photo__hint">Pilihan</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div
|
|
class="nominee-add-photo__preview"
|
|
:class="{ 'nominee-add-photo__preview--empty': !imageUrl }"
|
|
>
|
|
<img v-if="imageUrl" :src="imageUrl" alt="Pratonton gambar calon" />
|
|
<div v-else class="nominee-add-photo__placeholder">
|
|
<i class="fa fa-picture-o"></i>
|
|
<span>Tiada gambar dipilih</span>
|
|
</div>
|
|
</div>
|
|
<label class="btn btn-default btn-block nominee-add-photo__browse" for="nominee-file-input">
|
|
<i class="fa fa-folder-open"></i> Pilih fail
|
|
</label>
|
|
<input
|
|
id="nominee-file-input"
|
|
name="photo"
|
|
type="file"
|
|
class="nominee-add-photo__input"
|
|
accept="image/*"
|
|
@change="handleImageChange"
|
|
/>
|
|
<p class="text-muted small nominee-add-photo__formats">PNG, JPG atau GIF</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="nominee-add-form__rule" />
|
|
|
|
<div class="clearfix nominee-add-form__actions">
|
|
<router-link
|
|
:to="{ name: 'Maklumat Calon', query: { position_id: position_id } }"
|
|
class="btn btn-default"
|
|
>
|
|
<i class="fa fa-times"></i> Batal
|
|
</router-link>
|
|
<button type="submit" class="btn btn-primary" :disabled="loading">
|
|
<i v-if="loading" class="fa fa-spinner fa-spin"></i>
|
|
<i v-else class="fa fa-check"></i>
|
|
{{ loading ? 'Menghantar…' : 'Simpan calon' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: function () {
|
|
return {
|
|
imageUrl: '',
|
|
loading: false
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
add: function () {
|
|
if (this.loading) return;
|
|
var vm = this;
|
|
this.loading = true;
|
|
this.util.notify('Adding Nominee', 'progress', 0);
|
|
$('#add_form').ajaxSubmit({
|
|
success: function (response) {
|
|
$.notifyClose();
|
|
vm.loading = false;
|
|
if (vm.util.showResult(response, 'success', 'ajax'))
|
|
vm.$router.push({ name: 'Maklumat Calon' });
|
|
},
|
|
error: function (error) {
|
|
alert('Nominee with the same name has already registered');
|
|
location.reload();
|
|
$.notifyClose();
|
|
vm.loading = false;
|
|
vm.util.showResult(error, 'error', 'ajax');
|
|
},
|
|
uploadProgress: function (a, b, c, progress) {
|
|
vm.util.notify('Adding Nominee', 'progress', progress);
|
|
}
|
|
})
|
|
},
|
|
|
|
handleImageChange(event) {
|
|
const file = event.target.files[0];
|
|
const imageType = /image.*/;
|
|
|
|
if (file && file.type.match(imageType)) {
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = (e) => {
|
|
this.imageUrl = e.target.result;
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
event.target.value = '';
|
|
this.imageUrl = '';
|
|
}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
position_id: {
|
|
get: function () {
|
|
return this.$route.query.position_id;
|
|
},
|
|
|
|
set: function (id) {
|
|
this.$router.replace({ query: { position_id: id } });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.nominee-add-page__header {
|
|
margin-bottom: 12px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.nominee-add-page__title {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nominee-add-page__title .fa {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.nominee-add-page__intro {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.nominee-add-photo .panel-heading {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.nominee-add-photo__hint {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.nominee-add-photo__preview {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
max-height: 240px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
background: #f9f9f9;
|
|
border: 1px dashed #ccc;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.nominee-add-photo__preview--empty {
|
|
min-height: 180px;
|
|
}
|
|
|
|
.nominee-add-photo__preview img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.nominee-add-photo__placeholder {
|
|
text-align: center;
|
|
color: #999;
|
|
padding: 16px;
|
|
}
|
|
|
|
.nominee-add-photo__placeholder .fa {
|
|
font-size: 36px;
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.nominee-add-photo__placeholder span {
|
|
display: block;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.nominee-add-photo__input {
|
|
position: absolute;
|
|
width: 0.1px;
|
|
height: 0.1px;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
}
|
|
|
|
.nominee-add-photo__browse {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.nominee-add-photo__formats {
|
|
margin: 8px 0 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.nominee-add-form__rule {
|
|
margin-top: 8px;
|
|
margin-bottom: 16px;
|
|
border-top-color: #eee;
|
|
}
|
|
|
|
.nominee-add-form__actions {
|
|
text-align: right;
|
|
}
|
|
|
|
.nominee-add-form__actions .btn + .btn {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.nominee-add-photo {
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
</style>
|