step 41 : order mobile screen list item and filter
This commit is contained in:
sindhu
250
v1/order.html
250
v1/order.html
@@ -914,6 +914,256 @@
|
||||
<span class="material-symbols-outlined text-[#2196F3]">add</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-col overflow-auto mb-5 lg:hidden lg:mb-0">
|
||||
<!-- filter mobile -->
|
||||
<div class="mb-5">
|
||||
<div class="bg-white w-full flex flex-row lg:hidden lg:mb-0">
|
||||
<!-- instrument selected -->
|
||||
<div class="bg-white w-full px-3 py-2" @click="openInstrumentSearchMobile = true">
|
||||
<div class="flex justify-between items-center">
|
||||
<p class="text-black/60" aria-readonly="true" x-text="(selectedInstrument.idInstrument != -1)
|
||||
? selectedInstrument.namaInstrument
|
||||
: 'Instrument'"></p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 transition-transform text-[#0000008A]"
|
||||
:class="{ 'rotate-180': openInstrument }" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<div class="bg-white w-full flex flex-col lg:hidden lg:mb-0">
|
||||
<!-- Start Date -->
|
||||
<div
|
||||
class="relative flex items-center border border-gray-400 rounded-md focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
|
||||
<label for="Start Date" class="w-full">
|
||||
<input type="text" autocomplete="off" x-model="datepickerValueSD"
|
||||
@click="showDatepickerSD = true" readonly
|
||||
class="peer w-full pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
|
||||
placeholder="Start 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">
|
||||
Start Date
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<!-- Icon Kalender -->
|
||||
<div class="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
|
||||
@click="showDatepickerSD = true">
|
||||
<svg class="h-6 w-6 text-black/60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Datepicker Modal -->
|
||||
<div x-show="showDatepickerSD"
|
||||
class="fixed inset-0 flex items-center justify-center bg-black/50 transition-opacity z-50"
|
||||
@click.away="showDatepickerSD = false">
|
||||
<!-- Datepicker Box -->
|
||||
<div class="bg-white shadow-lg rounded-lg p-6 w-[18rem]">
|
||||
<!-- Header Datepicker -->
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<button @click="prevMonth()" 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[month] + ' ' + year"></span>
|
||||
<button @click="nextMonth()" 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>
|
||||
|
||||
<!-- Days of the Week -->
|
||||
<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>
|
||||
|
||||
<!-- Dates -->
|
||||
<div class="grid grid-cols-7 text-sm">
|
||||
<template x-for="blankday in blankdays">
|
||||
<div class="text-center border p-1 border-transparent"></div>
|
||||
</template>
|
||||
<template x-for="date in no_of_days" :key="date">
|
||||
<div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
|
||||
:class="{'bg-blue-500 text-white': isSelected(date)}" @click="setDate(date)">
|
||||
<span x-text="date"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Tombol Tutup -->
|
||||
<div class="mt-4 text-center">
|
||||
<button @click="showDatepickerSD = false"
|
||||
class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md">
|
||||
Tutup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Datepicker Modal -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-5">
|
||||
<div class="bg-white w-full flex flex-col lg:hidden lg:mb-0">
|
||||
<!-- End Date -->
|
||||
<div
|
||||
class="relative flex items-center border border-gray-400 rounded-md focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
|
||||
<label for="End Date" class="w-full">
|
||||
<input type="text" autocomplete="off" x-model="datepickerValueED"
|
||||
@click="showDatepickerED = true" readonly
|
||||
class="peer w-full pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
|
||||
placeholder="End 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">
|
||||
End Date
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<!-- Icon Kalender -->
|
||||
<div class="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
|
||||
@click="showDatepickerED = true">
|
||||
<svg class="h-6 w-6 text-black/60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Datepicker Modal -->
|
||||
<div x-show="showDatepickerED"
|
||||
class="fixed inset-0 flex items-center justify-center bg-black/50 transition-opacity z-50"
|
||||
@click.away="showDatepickerED = false">
|
||||
<!-- Datepicker Box -->
|
||||
<div class="bg-white shadow-lg rounded-lg p-6 w-[18rem]">
|
||||
<!-- Header Datepicker -->
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<button @click="prevMonthED()" 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[monthED] + ' ' + yearED"></span>
|
||||
<button @click="nextMonthED()" 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>
|
||||
|
||||
<!-- Days of the Week -->
|
||||
<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>
|
||||
|
||||
<!-- Dates -->
|
||||
<div class="grid grid-cols-7 text-sm">
|
||||
<template x-for="blankday in blankdaysED">
|
||||
<div class="text-center border p-1 border-transparent"></div>
|
||||
</template>
|
||||
<template x-for="date in no_of_daysED" :key="date">
|
||||
<div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
|
||||
:class="{'bg-blue-500 text-white': isSelectedED(date)}"
|
||||
@click="setDateED(date)">
|
||||
<span x-text="date"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Tombol Tutup -->
|
||||
<div class="mt-4 text-center">
|
||||
<button @click="showDatepickerED = false"
|
||||
class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md">
|
||||
Tutup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Datepicker Modal -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<div class="bg-white">
|
||||
<label for="MRN/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="MRN/SID" x-model="MRN_SID"
|
||||
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
|
||||
placeholder="MRN/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">
|
||||
MRN/SID
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- filter mobile -->
|
||||
|
||||
<!-- table become card mobile -->
|
||||
<div class="w-full">
|
||||
<template x-for="item in dataOrder" :key="item.idOrder">
|
||||
<div class="bg-white rounded-lg mb-4 p-5 ">
|
||||
<div class="flex justify-between">
|
||||
<h2 class="text-black/87 font-medium text-xl mb-4" x-text="item.date"></h2>
|
||||
<div class="relative flex h-4 w-4">
|
||||
<button @click="editMobilePage(item)">
|
||||
<span class="material-symbols-outlined text-[#2196F3]">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<p class="text-[#00000099] font-normal text-sm mb-2">MRN</p>
|
||||
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.mrn"></p>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<p class="text-[#00000099] font-normal text-sm mb-2">SID</p>
|
||||
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.sid"></p>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<p class="text-[#00000099] font-normal text-sm mb-2">Name</p>
|
||||
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.name"></p>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<p class="text-[#00000099] font-normal text-sm mb-2">DOB</p>
|
||||
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.dob"></p>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<p class="text-[#00000099] font-normal text-sm mb-2">Pemeriksaan</p>
|
||||
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.pemeriksaanStr"></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- dialog instrument mobile start -->
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user