274 lines
15 KiB
HTML
274 lines
15 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Order XPORT</title>
|
|
<!-- tailwind cdn -->
|
|
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
|
<!-- alpine cdn -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
|
|
<!-- material Symbols -->
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
|
|
</head>
|
|
|
|
<body class="bg-white h-screen flex flex-col">
|
|
<!-- appbar -->
|
|
<div class="bg-white h-15 flex items-center justify-start px-6">
|
|
<a href="order.html">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black/87" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</a>
|
|
<h3 class="font-medium text-xl text-black/87 ml-3">Add</h3>
|
|
</div>
|
|
<!-- appbar -->
|
|
|
|
<!-- konten utama -->
|
|
<div class="flex-1 flex flex-col lg:flex-row px-5 pt-6 overflow-auto h-[calc(100vh-60px)]" x-data="orderMobileAdd">
|
|
<div class="relative w-full ">
|
|
<!-- Order Date -->
|
|
<label for="Order Date"
|
|
class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
|
|
<input type="text" id="Order Date" autocomplete="off" x-model="datepickerValueOD"
|
|
@click="showDatepickerOD = true" readonly
|
|
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
|
|
placeholder="Order Date" />
|
|
|
|
<span
|
|
class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
|
|
Order Date
|
|
</span>
|
|
</label>
|
|
|
|
<!-- Datepicker Modal for Order Date -->
|
|
<div x-show="showDatepickerOD"
|
|
class="fixed inset-0 flex items-center justify-center bg-black/50 transition-opacity z-50"
|
|
@click.away="showDatepickerOD = false">
|
|
<div class="bg-white shadow-lg rounded-lg p-6 w-[18rem]">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<button @click="prevMonthOD()" class="p-1 rounded-full hover:bg-gray-200">
|
|
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
<span class="text-lg font-bold text-gray-800"
|
|
x-text="MONTH_NAMES[monthOD] + ' ' + yearOD"></span>
|
|
<button @click="nextMonthOD()" class="p-1 rounded-full hover:bg-gray-200">
|
|
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="grid grid-cols-7 text-xs font-bold text-center text-gray-800 mb-2">
|
|
<template x-for="day in DAYS">
|
|
<div x-text="day"></div>
|
|
</template>
|
|
</div>
|
|
<div class="grid grid-cols-7 text-sm">
|
|
<template x-for="date in no_of_daysOD">
|
|
<div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
|
|
:class="{'bg-blue-500 text-white': isSelectedOD(date)}" @click="setDateOD(date)">
|
|
<span x-text="date"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="mt-4 text-center">
|
|
<button @click="showDatepickerOD = false"
|
|
class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md">
|
|
Tutup
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- space 20 -->
|
|
<div class="mb-5 "></div>
|
|
|
|
<!-- MRN -->
|
|
<label for="MRN"
|
|
class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
|
|
<input type="text" id="MRN" autocomplete="off" x-model="mrnAdd" @change="onChangeMrnAdd()"
|
|
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
|
|
placeholder="MRN" />
|
|
|
|
<span
|
|
class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
|
|
MRN
|
|
</span>
|
|
</label>
|
|
|
|
<!-- space 20 -->
|
|
<div class="mb-5 "></div>
|
|
|
|
<!-- SID -->
|
|
<label for="SID"
|
|
class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
|
|
<input type="text" id="SID" autocomplete="off" x-model="sidAdd" @change="onChangeSidAdd()"
|
|
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
|
|
placeholder="SID" />
|
|
|
|
<span
|
|
class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
|
|
SID
|
|
</span>
|
|
</label>
|
|
|
|
<!-- space 20 -->
|
|
<div class="mb-5 "></div>
|
|
|
|
<!-- Name -->
|
|
<label for="Name"
|
|
class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
|
|
<input type="text" id="Name" autocomplete="off" x-model="nameAdd" @change="onChangeNameAdd()"
|
|
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
|
|
placeholder="Name" />
|
|
|
|
<span
|
|
class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
|
|
Name
|
|
</span>
|
|
</label>
|
|
|
|
<!-- space 20 -->
|
|
<div class="mb-5 "></div>
|
|
|
|
<!-- DOB -->
|
|
<label for="DOB"
|
|
class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
|
|
<input type="text" id="DOB" autocomplete="off" x-model="datepickerValueDOB"
|
|
@click="showDatepickerDOB = true" readonly
|
|
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
|
|
placeholder="DOB" />
|
|
|
|
<span
|
|
class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
|
|
DOB
|
|
</span>
|
|
</label>
|
|
|
|
<!-- Datepicker Modal for DOB -->
|
|
<div x-show="showDatepickerDOB"
|
|
class="fixed inset-0 flex items-center justify-center bg-black/50 transition-opacity z-50"
|
|
@click.away="showDatepickerDOB = false">
|
|
<div class="bg-white shadow-lg rounded-lg p-6 w-[18rem]">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<button @click="prevMonthDOB()" class="p-1 rounded-full hover:bg-gray-200">
|
|
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
<span class="text-lg font-bold text-gray-800"
|
|
x-text="MONTH_NAMES[monthDOB] + ' ' + yearDOB"></span>
|
|
<button @click="nextMonthDOB()" class="p-1 rounded-full hover:bg-gray-200">
|
|
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="grid grid-cols-7 text-xs font-bold text-center text-gray-800 mb-2">
|
|
<template x-for="day in DAYS">
|
|
<div x-text="day"></div>
|
|
</template>
|
|
</div>
|
|
<div class="grid grid-cols-7 text-sm">
|
|
<template x-for="date in no_of_daysDOB">
|
|
<div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
|
|
:class="{'bg-blue-500 text-white': isSelectedDOB(date)}" @click="setDateDOB(date)">
|
|
<span x-text="date"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="mt-4 text-center">
|
|
<button @click="showDatepickerDOB = false"
|
|
class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md">
|
|
Tutup
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- space 20 -->
|
|
<div class="mb-5 "></div>
|
|
|
|
<!-- pemeriksaan -->
|
|
<label for="Pemeriksaan"
|
|
class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
|
|
<input type="text" id="Pemeriksaan" autocomplete="off" x-model="searchPemeriksaan"
|
|
@click="openPemeriksaanAdd = true" @input="filterItemPemeriksaan()"
|
|
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
|
|
placeholder="Cari Pemeriksaan" />
|
|
|
|
<span
|
|
class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
|
|
Cari Pemeriksaan
|
|
</span>
|
|
</label>
|
|
|
|
<div>
|
|
<!-- List Dipilih -->
|
|
<div class="flex flex-wrap gap-2 mt-2">
|
|
<template x-for="(item, index) in selectedPemeriksaan" :key="item.idPemeriksaan">
|
|
<div class="flex items-center bg-blue-100 text-blue-700 text-sm px-2 py-1 rounded-md">
|
|
<span x-text="item.namaPemeriksaan"></span>
|
|
<button @click="removeItemPemeriksaan(index)" class="ml-2 focus:outline-none">
|
|
<svg class="w-4 h-4 text-blue-500 hover:text-blue-700" fill="none" stroke="currentColor"
|
|
stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Dropdown List -->
|
|
<div x-show="openPemeriksaanAdd" @click.away="openPemeriksaanAdd = false"
|
|
class="absolute left-0 mt-2 w-full bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto transition-all duration-200">
|
|
<template x-if="filteredPemeriksaan.length === 0">
|
|
<div class="p-2 text-gray-500 text-sm text-center">Tidak ada hasil</div>
|
|
</template>
|
|
<template x-for="item in filteredPemeriksaan" :key="item.idPemeriksaan">
|
|
<div @click="addItemPemeriksaan(item)"
|
|
class="cursor-pointer p-2 hover:bg-blue-100 flex items-center justify-between"
|
|
:class="selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan) ? 'bg-yellow-100 text-yellow-800' : ''">
|
|
<span x-text="item.namaPemeriksaan"></span>
|
|
<svg x-show="selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)"
|
|
class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" stroke-width="2"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- space 20 -->
|
|
<div class="mb-5 "></div>
|
|
</div>
|
|
|
|
<div class="fixed bottom-0 left-0 w-full bg-white h-15 flex items-center align-middle shadow-custom p-4">
|
|
<button @click="save()"
|
|
class="w-full px-4 py-2 rounded-[4px] transition duration-200 font-bold text-sm uppercase" :class="objForm.isValidForm
|
|
? 'bg-[#1976D2] text-white hover:bg-[#2196F3] hover:text-white'
|
|
: 'bg-[#0000001F] text-[#00000042] cursor-not-allowed'" :disabled="!objForm.isValidForm">
|
|
Save
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- konten utama -->
|
|
|
|
<script src="js/order_mobile_add.js"></script>
|
|
</body>
|
|
|
|
</html> |