DONE: remove verified by ajk, fix bug on pagination, improve UI
This commit is contained in:
ISMAIL MASSERAN
@@ -1,92 +1,24 @@
|
||||
<template>
|
||||
<div class="attendance-page row col-md-10 col-md-offset-1">
|
||||
<div class="col-md-12">
|
||||
<div class="attendance-hero">
|
||||
<div class="attendance-section-kicker">Pengesahan Kehadiran</div>
|
||||
<h4 class="attendance-page-title">Sahkan Kehadiran Mesyuarat Agung</h4>
|
||||
<p class="attendance-page-subtitle">
|
||||
Sila semak maklumat anda, pilih kaedah kehadiran, dan sahkan penyertaan sebelum meneruskan.
|
||||
</p>
|
||||
<a href="https://drive.google.com/uc?export=download&id=1O5DVDIbGy-w0bejV6RqtJGIty-_5LJD8"
|
||||
target="_blank" class="attendance-download-button">
|
||||
Muat Turun Etika Mesyuarat Agung
|
||||
</a>
|
||||
<div v-if="Number(data.user.kehadiran) === 0" class="attendance-info-top">
|
||||
<div class="attendance-info-top__kicker">Makluman</div>
|
||||
<div class="attendance-info-top__body">
|
||||
<p><strong>*</strong> Pendaftaran akan dibuka dari <strong>jam 7.00 pagi hingga 10.00
|
||||
pagi pada hari pengundian.</strong></p>
|
||||
<p>
|
||||
<strong>*</strong> Elaun kehadiran berjumlah <strong>RM300.00 (secara fizikal)</strong>
|
||||
akan
|
||||
diberikan secara TUNAI selepas mesyuarat. <br />
|
||||
Manakala <strong>RM150.00 (secara atas talian)</strong> akan dikreditkan ke akaun
|
||||
anggota
|
||||
yang
|
||||
hadir penuh.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="edit()" id="edit_form" class="attendance-card">
|
||||
<div class="attendance-card-header">
|
||||
<div>
|
||||
<div class="attendance-section-kicker">Maklumat Anggota</div>
|
||||
<h5 class="attendance-card-title">Butiran Kehadiran</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="attendance-info-grid">
|
||||
<div class="form-group attendance-field">
|
||||
<label for="name">Nama</label>
|
||||
<input type="text" name="name" class="form-control attendance-input" readonly
|
||||
:value="data.user.name" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group attendance-field">
|
||||
<label for="no_kp">No. Kad Pengenalan</label>
|
||||
<input type="text" name="no_kp" class="form-control attendance-input" readonly
|
||||
:value="data.user.no_kp" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group attendance-field">
|
||||
<label for="no_anggota">No. Anggota</label>
|
||||
<input type="text" name="no_anggota" class="form-control attendance-input" readonly
|
||||
:value="data.user.no_anggota" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group attendance-field">
|
||||
<label for="unit">Unit</label>
|
||||
<input type="text" name="unit" class="form-control attendance-input" readonly
|
||||
:value="data.user.unit" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sembunyikan borang pendaftaran selepas kehadiran telah dihantar -->
|
||||
<template v-if="Number(data.user.kehadiran) === 0">
|
||||
<div class="form-group attendance-choice-box">
|
||||
<label for="kehadiran">Kehadiran</label>
|
||||
<select v-model="selectedKehadiran" class="form-control attendance-select" id="kehadiran"
|
||||
name="kehadiran" required>
|
||||
<option value="0">Sila Pilih :</option>
|
||||
<option value="1">Fizikal</option>
|
||||
<option value="2">Maya</option>
|
||||
</select>
|
||||
<small class="form-text text-muted attendance-helper-text">
|
||||
Sila pilih kehadiran (Maya/Fizikal) kemudian klik “SAYA TERIMA”.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedKehadiran === '1'" class="form-group attendance-field">
|
||||
<label for="physical_gate_code">Kod skrin kaunter pendaftaran</label>
|
||||
<input type="text" name="physical_gate_code" id="physical_gate_code"
|
||||
class="form-control attendance-input" autocomplete="off" autocapitalize="characters"
|
||||
inputmode="text" placeholder="8 aksara, semak skrin di kaunter" maxlength="64"
|
||||
@input="onPhysicalGateCodeInput" />
|
||||
<small class="form-text text-muted attendance-helper-text">
|
||||
Kod berputar setiap minit — masukkan kod semasa yang dipaparkan di kaunter sebelum
|
||||
menghantar.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info mt-4 small attendance-info-notice">
|
||||
<p><strong>*</strong> Pendaftaran akan dibuka dari <strong>jam 7.00 pagi hingga 10.00 pagi (25
|
||||
April
|
||||
2025)</strong>.</p>
|
||||
<p>
|
||||
<strong>*</strong> Elaun kehadiran berjumlah <strong>RM300.00 (secara fizikal)</strong> akan
|
||||
diberikan secara TUNAI selepas mesyuarat. <br />
|
||||
Manakala <strong>RM150.00 (secara atas talian)</strong> akan dikreditkan ke akaun anggota
|
||||
yang
|
||||
hadir penuh.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="text-center mt-4 attendance-action-area">
|
||||
<div v-if="data.user.kehadiran != 0 && canProceedToVote" class="attendance-success-card">
|
||||
@@ -128,21 +60,96 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-lg btn-success attendance-submit-button"
|
||||
v-else-if="electionVotingActive">
|
||||
DAFTAR KEHADIRAN
|
||||
</button>
|
||||
<div v-else class="alert alert-info text-left attendance-voting-notice">
|
||||
<p class="attendance-voting-notice__title"><strong>Butang “DAFTAR KEHADIRAN” belum
|
||||
tersedia</strong>
|
||||
</p>
|
||||
<p class="attendance-voting-notice__body">
|
||||
Buat masa ini proses undian / mesyuarat <strong>belum bermula</strong>.
|
||||
</p>
|
||||
<template v-else>
|
||||
<!-- Title -->
|
||||
<h5 class="attendance-section-kicker">Butiran Kehadiran</h5>
|
||||
<div class="attendance-register-box">
|
||||
<p class="attendance-precheck">
|
||||
Sila semak maklumat anda di bawah terlebih dahulu sebelum mendaftar kehadiran.
|
||||
</p>
|
||||
|
||||
<div class="form-group attendance-choice-box">
|
||||
<label for="kehadiran">Kehadiran</label>
|
||||
<select v-model="selectedKehadiran" class="form-control attendance-select"
|
||||
id="kehadiran" name="kehadiran" required>
|
||||
<option value="0">Sila Pilih :</option>
|
||||
<option value="1">Fizikal</option>
|
||||
<option value="2">Maya</option>
|
||||
</select>
|
||||
<small class="form-text text-muted attendance-helper-text">
|
||||
Sila pilih kehadiran (Maya/Fizikal) kemudian klik “SAYA TERIMA”.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedKehadiran === '1'" class="form-group attendance-field">
|
||||
<label for="physical_gate_code">Kod skrin kaunter pendaftaran</label>
|
||||
<input type="text" name="physical_gate_code" id="physical_gate_code"
|
||||
class="form-control attendance-input" autocomplete="off" autocapitalize="characters"
|
||||
inputmode="text" placeholder="8 aksara, semak skrin di kaunter" maxlength="64"
|
||||
@input="onPhysicalGateCodeInput" />
|
||||
<small class="form-text text-muted attendance-helper-text">
|
||||
Kod berputar setiap minit — masukkan kod semasa yang dipaparkan di kaunter sebelum
|
||||
menghantar.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="attendance-register-box__actions">
|
||||
<button type="submit" class="btn btn-lg btn-success attendance-submit-button"
|
||||
v-if="electionVotingActive">
|
||||
DAFTAR KEHADIRAN
|
||||
</button>
|
||||
<div v-else class="alert alert-info attendance-voting-notice">
|
||||
<p class="attendance-voting-notice__title"><strong>Butang “DAFTAR KEHADIRAN” belum
|
||||
tersedia</strong>
|
||||
</p>
|
||||
<p class="attendance-voting-notice__body">
|
||||
Buat masa ini proses undian / mesyuarat <strong>belum bermula</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="attendance-info-grid">
|
||||
<div class="form-group attendance-field">
|
||||
<label for="name">Nama</label>
|
||||
<input type="text" name="name" class="form-control attendance-input" readonly
|
||||
:value="data.user.name" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group attendance-field">
|
||||
<label for="no_kp">No. Kad Pengenalan</label>
|
||||
<input type="text" name="no_kp" class="form-control attendance-input" readonly
|
||||
:value="data.user.no_kp" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group attendance-field">
|
||||
<label for="no_anggota">No. Anggota</label>
|
||||
<input type="text" name="no_anggota" class="form-control attendance-input" readonly
|
||||
:value="data.user.no_anggota" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group attendance-field">
|
||||
<label for="unit">Unit</label>
|
||||
<input type="text" name="unit" class="form-control attendance-input" readonly
|
||||
:value="data.user.unit" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<div class="attendance-hero">
|
||||
<div class="attendance-section-kicker">Pengesahan Kehadiran</div>
|
||||
<h4 class="attendance-page-title">Sahkan Kehadiran Mesyuarat Agung</h4>
|
||||
<p class="attendance-page-subtitle">
|
||||
Sila semak maklumat anda, pilih kaedah kehadiran, dan sahkan penyertaan sebelum meneruskan.
|
||||
</p>
|
||||
<a href="https://drive.google.com/uc?export=download&id=1O5DVDIbGy-w0bejV6RqtJGIty-_5LJD8"
|
||||
target="_blank" class="attendance-download-button">
|
||||
Muat Turun Etika Mesyuarat Agung
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -155,6 +162,7 @@
|
||||
|
||||
.attendance-hero {
|
||||
margin-bottom: 22px;
|
||||
margin-top: 22px;
|
||||
padding: 26px 28px;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
|
||||
@@ -173,12 +181,6 @@
|
||||
}
|
||||
|
||||
.attendance-page-title,
|
||||
.attendance-card-title {
|
||||
margin: 0 0 8px;
|
||||
color: #17324d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.attendance-page-subtitle {
|
||||
max-width: 700px;
|
||||
margin: 0 auto 18px;
|
||||
@@ -206,10 +208,6 @@
|
||||
box-shadow: 0 16px 34px rgba(35, 64, 97, 0.08);
|
||||
}
|
||||
|
||||
.attendance-card-header {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.attendance-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -255,6 +253,49 @@
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.attendance-precheck {
|
||||
margin: 0 0 12px;
|
||||
color: #5f7388;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.attendance-register-box {
|
||||
text-align: left;
|
||||
padding: 18px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #e6edf6;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
|
||||
box-shadow: 0 14px 28px rgba(35, 64, 97, 0.08);
|
||||
}
|
||||
|
||||
.attendance-register-box__actions {
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.attendance-info-top {
|
||||
margin-bottom: 14px;
|
||||
padding: 16px 18px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #cfe2ff;
|
||||
background: linear-gradient(180deg, #f2f8ff 0%, #ffffff 100%);
|
||||
box-shadow: 0 10px 24px rgba(13, 110, 253, 0.08);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.attendance-info-top__kicker {
|
||||
margin-bottom: 8px;
|
||||
color: #0d6efd;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.attendance-info-top__body p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.attendance-info-notice {
|
||||
margin-bottom: 0;
|
||||
padding: 16px 18px;
|
||||
@@ -422,7 +463,8 @@ export default {
|
||||
},
|
||||
|
||||
/**
|
||||
* Maya (2) can vote once attendance is set. Fizikal (1) needs admin verification timestamp.
|
||||
* Maya (2) can vote once attendance is set. Fizikal (1) can proceed once verified timestamp exists.
|
||||
* (Backend now auto-verifies Fizikal on submit.)
|
||||
*/
|
||||
canProceedToVote: function () {
|
||||
var u = this.data && this.data.user;
|
||||
|
||||
Reference in New Issue
Block a user