sindhu/xport-tailwind-alpine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

step 31 : inputan seach instrument & assay no large screen

Browse Source
This commit is contained in:
sindhu
2025-03-17 12:05:54 +07:00
parent dcd84b91eb
commit 5ec7f61b05
2 changed files with 64 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
v1/assay_format.html
View File

@@ -122,6 +122,61 @@
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- inputan search -->
<div class="flex flex-row gap-4 w-full">
<div class="relative w-1/2">
<!-- instrument -->
<fieldset @click.outside="openInstrumentSearch = false"
class="relative border border-gray-400 rounded-md focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 px-3 pt-2 pb-2">
<span
x-text="selectedInstrument.idInstrument != -1 ? 'Instrument' : selectedInstrument.namaInstrument"
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">
</span>
<button @click="openInstrumentSearch = !openInstrumentSearch" type="button"
class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
<span x-text="selectedInstrument.namaInstrument" class="text-left"></span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
:class="{ 'rotate-180': openInstrumentSearch }" 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>
</button>
</fieldset>
<div x-show="openInstrumentSearch"
class="absolute bg-white w-full border border-gray-300 rounded-md shadow-lg z-10 max-h-[200px] overflow-y-auto">
<ul>
<template x-if="dataInstrument.length === 0">
<li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
</template>
<template x-for="item in dataInstrument" :key="item.idInstrument">
<li :id="item.idInstrument" @click="onChangeInstrument(item)"
class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
<button x-text="item.namaInstrument"></button>
</li>
</template>
</ul>
</div>
</div>
<div class="w-1/2">
<!-- Assay No -->
<label for="Assay No"
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="Assay No"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Assay No" />
<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">
Assay No
</span>
</label>
</div>
</div>
<!-- space 16 -->
<div class="mb-0 lg:mb-4"></div>
<!-- Table Desktop -->
<div class="flex-1 overflow-auto h-full">
<table class="min-w-full divide-y-2 divide-gray-200 bg-white text-sm">
@@ -452,17 +507,17 @@
<!-- dialog instrument mobile start -->
<div>
<!-- Overlay -->
<div x-show="openInstrumentMobile" class="fixed inset-0 bg-black/50 transition-opacity z-50"
@click="openInstrumentMobile = false">
<div x-show="openInstrumentSearchMobile" class="fixed inset-0 bg-black/50 transition-opacity z-50"
@click="openInstrumentSearchMobile = false">
</div>
<!-- Modal -->
<div x-show="openInstrumentMobile" x-transition
<div x-show="openInstrumentSearchMobile" x-transition
class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
x-bind:class="openInstrumentMobile ? 'translate-y-0' : 'translate-y-full'">
x-bind:class="openInstrumentSearchMobile ? 'translate-y-0' : 'translate-y-full'">
<div class="flex justify-between space-x-2">
<p class="text-[16px] font-medium text-[#212B36]">Instrument</p>
<button @click="openInstrumentMobile = false">
<button @click="openInstrumentSearchMobile = false">
<svg xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 text-[#637381] hover:text-gray-700 transition-colors" viewBox="0 0 24 24"
fill="none">
@@ -503,7 +558,7 @@
<!-- inputan selected -->
<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="openInstrumentMobile = true">
<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

5
v1/js/assay_format.js
View File

@@ -43,7 +43,8 @@ document.addEventListener('alpine:init', () => {
namaInstrument: 'Instrument'
},
openInstrument: false,
openInstrumentMobile: false,
openInstrumentSearchMobile: false,
openInstrumentSearch: false,
dataInstrument: [
{
idInstrument: 1,
@@ -79,7 +80,7 @@ document.addEventListener('alpine:init', () => {
this.selectedInstrument = item;
},
onChangeInstrumentMobile(item){
this.openInstrumentMobile = false;
this.openInstrumentSearchMobile = false;
// this.selectedInstrument = item;
this.selectedInstrument = { ...item };
},