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

step 50 : perbaikan result raw data modal desktop dan mobile

Browse Source
This commit is contained in:
sindhu
2025-04-02 12:23:21 +07:00
parent 184853a0c8
commit a552d0d4f6
2 changed files with 53 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
v1/js/result.js
View File

@@ -70,7 +70,8 @@ document.addEventListener('alpine:init', () => {
namaStopBit: '1'
},
],
rawDataDesktop: false,
rawData: false,
rawDataMobile: false,
showDialogAdd: false,
showDialogEdit: false,
loadingVerifikasi: false,
@@ -157,10 +158,10 @@ document.addEventListener('alpine:init', () => {
},
openModalRawData(item){
this.selectedRawData = item
this.rawDataDesktop = true
this.rawData = true
},
closeDialog(){
this.rawDataDesktop = false
this.rawData = false
},
// 2. Fungsi End
}))

56
v1/result.html
View File

@@ -142,7 +142,7 @@
<!-- Konten utama -->
<div class="flex-1 flex flex-col lg:flex-row p-6 gap-5 overflow-hidden h-screen" x-data="result">
<!-- Bagian Kiri (Tabel) -->
<div class="hidden lg: bg-white w-full lg:w-1/2 rounded-lg p-5 lg:flex flex-col flex-1 overflow-hidden">
<div class="hidden lg: bg-white w-2/3 rounded-lg p-5 lg:flex flex-col flex-1 overflow-hidden">
<div class="p-2 text-black font-medium text-lg rounded-lg">Result</div>
<!-- space 20 -->
@@ -253,11 +253,12 @@
</div>
</div>
<!-- modal raw data desktop -->
<div x-show="rawDataDesktop" x-transition.duration.200ms class="fixed z-10 inset-0">
<!-- modal raw data -->
<div x-show="rawData" x-transition.duration.200ms class="fixed z-10 inset-0">
<div class="flex items-center justify-center min-h-screen bg-[#0F0F0F4D] transition-all">
<!-- box -->
<div class="flex flex-col bg-white rounded-lg w-2/3 min-h-[300px] max-h-[90vh] overflow-y-auto">
<div
class="flex flex-col bg-white rounded-lg w-[80%] lg:w-2/3 min-h-[300px] max-h-[90vh] overflow-y-auto">
<!-- header -->
<div class="bg-[#2196F3] flex w-full h-10 rounded-tl-lg rounded-tr-lg">
<h3 class="text-xl font-bold uppercase text-white px-4 py-1">raw data</h3>
@@ -266,15 +267,56 @@
<div class="mx-6 my-5">
<template x-if="selectedRawData.idResult != -1">
<div>
<div class="flex items-center px-4 py-2 border-b border-gray-200 w-full">
<!-- desktop -->
<div class="hidden lg:flex items-center px-4 py-2 border-b border-gray-200 w-full">
<span class="text-gray-900 w-1/5" x-text="selectedRawData.namaInstrument"></span>
<span class="text-gray-900 w-1/5" x-text="selectedRawData.sampleID"></span>
<span class="text-gray-900 w-1/5" x-text="selectedRawData.assayNo"></span>
<span class="text-gray-900 w-1/5" x-text="selectedRawData.result"></span>
<span class="text-gray-900 w-1/5" x-text="selectedRawData.date"></span>
</div>
<!-- mobile -->
<div class="px-4 py-2 lg:hidden">
<div class="flex justify-between">
<p class="text-gray-900 font-normal text-sm mb-2">Info</p>
<p class="text-gray-900 font-normal text-sm mb-2"
x-text="selectedRawData.namaInstrument"></p>
</div>
<div class="flex justify-between">
<p class="text-gray-900 font-normal text-sm mb-2">Sample ID</p>
<p class="text-gray-900 font-normal text-sm mb-2"
x-text="selectedRawData.sampleID"></p>
</div>
<div class="flex justify-between">
<p class="text-gray-900 font-normal text-sm mb-2">Assay No</p>
<p class="text-gray-900 font-normal text-sm mb-2"
x-text="selectedRawData.assayNo"></p>
</div>
<div class="flex justify-between">
<p class="text-gray-900 font-normal text-sm mb-2">Result</p>
<p class="text-gray-900 font-normal text-sm mb-2"
x-text="selectedRawData.result"></p>
</div>
<div class="flex justify-between">
<p class="text-gray-900 font-normal text-sm mb-2">Result</p>
<p class="text-gray-900 font-normal text-sm mb-2"
x-text="selectedRawData.date"></p>
</div>
</div>
<div class="flex flex-1 bg-[#F0F2F5DE] flex-col rounded-lg mt-5 p-5">
<h3 class="font-normal text-base text-black/87 mb-3">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam autem sunt commodi, officiis eaque ducimus amet, culpa expedita eum soluta repellat sed accusantium minus! Perferendis nesciunt quidem eius iste dicta.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni veniam omnis nostrum ipsam ducimus, velit dignissimos impedit mollitia esse odit sequi facere praesentium possimus suscipit optio eveniet, nam fuga perferendis.</h3>
<h3 class="font-normal text-base text-black/87 mb-3">Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Laboriosam autem sunt commodi, officiis eaque
ducimus amet, culpa expedita eum soluta repellat sed accusantium minus!
Perferendis nesciunt quidem eius iste dicta.Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Magni veniam omnis nostrum ipsam ducimus, velit
dignissimos impedit mollitia esse odit sequi facere praesentium possimus
suscipit optio eveniet, nam fuga perferendis.Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Laboriosam autem sunt commodi, officiis eaque
ducimus amet, culpa expedita eum soluta repellat sed accusantium minus!
Perferendis nesciunt quidem eius iste dicta.Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Magni veniam omnis nostrum ipsam ducimus, velit
dignissimos impedit mollitia esse odit sequi facere praesentium possimus
suscipit optio eveniet, nam fuga perferendis.</h3>
</div>
</div>
</template>
@@ -291,7 +333,7 @@
</div>
</div>
</div>
<!-- modal raw data desktop -->
<!-- modal raw data -->
<!-- Kiri Mobile -->
<div class="bg-[#F2F9FF] h-5 flex justify-between space-x-2 lg:hidden">