|
|
@@ -53,6 +53,7 @@ const scanRecordsMaintenanceCode = ref('')
|
|
|
const verifiedMaintenanceCode = ref('')
|
|
|
const scanRecords = ref(null)
|
|
|
const loadingScanRecords = ref(false)
|
|
|
+const showMaintenanceCodeHintDialog = ref(false)
|
|
|
|
|
|
const FORM_KEY_MAP = Object.freeze({
|
|
|
person: [
|
|
|
@@ -1575,6 +1576,10 @@ onMounted(() => {
|
|
|
<input v-model="maintenanceCode" type="text" maxlength="8"
|
|
|
class="w-full rounded-xl border border-slate-300 px-4 py-3 text-slate-900 placeholder:text-slate-400 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20"
|
|
|
placeholder="Enter the maintenance code" @keyup.enter="handleVerifyMaintenance" autofocus />
|
|
|
+ <button type="button" @click="showMaintenanceCodeHintDialog = true"
|
|
|
+ class="mt-2 text-sm text-cyan-600 hover:text-cyan-700 hover:underline">
|
|
|
+ Don't know the maintenance code?
|
|
|
+ </button>
|
|
|
</div>
|
|
|
<div v-if="isFirstFill" class="rounded-xl border border-emerald-200 bg-emerald-50 p-3">
|
|
|
<div class="flex items-start gap-2">
|
|
|
@@ -1601,6 +1606,34 @@ onMounted(() => {
|
|
|
</div>
|
|
|
</template>
|
|
|
</Dialog>
|
|
|
+
|
|
|
+ <!-- Maintenance code hint dialog -->
|
|
|
+ <Dialog v-model:visible="showMaintenanceCodeHintDialog" modal :style="{ width: '90vw', maxWidth: '600px' }"
|
|
|
+ :draggable="false">
|
|
|
+ <template #header>
|
|
|
+ <div class="flex items-center gap-3">
|
|
|
+ <div class="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-100">
|
|
|
+ <i class="pi pi-info-circle text-lg text-cyan-600" />
|
|
|
+ </div>
|
|
|
+ <h3 class="text-lg font-semibold text-slate-900">Find Maintenance Code</h3>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div class="py-4">
|
|
|
+ <img src="/img/Maintenance_code.jpg" alt="Maintenance code location hint"
|
|
|
+ class="w-full rounded-xl border border-slate-200" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <div class="flex justify-end">
|
|
|
+ <button type="button"
|
|
|
+ class="rounded-xl bg-cyan-600 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-cyan-700"
|
|
|
+ @click="showMaintenanceCodeHintDialog = false">
|
|
|
+ Got it
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </Dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|