step 31 : inputan seach instrument & assay no large screen

v1/assay_format.html

@@ -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"
+            <div x-show="openInstrumentSearchMobile" class="fixed inset-0 bg-black/50 transition-opacity z-50"
-                @click="openInstrumentMobile = false">
+                @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 

v1/js/assay_format.js

@@ -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 };
         },