From 9f9c74ae387fbdf939a629a8f655509d6b05a003 Mon Sep 17 00:00:00 2001
From: sindhu <albertussindhu15@gmail.com>
Date: Wed, 19 Mar 2025 08:13:48 +0700
Subject: [PATCH] step 33 : edit assay format mobile

---
 v1/assay_format.html              |  16 +--
 v1/assay_format_mobile_edit.html  | 165 ++++++++++++++++++++++++++++++
 v1/js/assay_format.js             |   5 +
 v1/js/assay_format_mobile_edit.js | 109 ++++++++++++++++++++
 4 files changed, 287 insertions(+), 8 deletions(-)
 create mode 100644 v1/assay_format_mobile_edit.html
 create mode 100644 v1/js/assay_format_mobile_edit.js
diff --git a/v1/assay_format.html b/v1/assay_format.html
index 4d3dd01..10c9595 100644
--- a/v1/assay_format.html
+++ b/v1/assay_format.html
@@ -594,26 +594,26 @@
 
             <div class="flex flex-row mb-6 lg:hidden lg:mb-0">
                 <div class="flex flex-col w-full lg:flex-row mb-5">
-                    <template x-for="item in dataSetting" :key="item.idSetting">
+                    <template x-for="item in dataAssayFormat" :key="item.idAssayFormat">
                         <div class="bg-white mr-0 mb-5 rounded-md lg:mr-5 p-2 w-full lg:w-1/2 lg:mb-0 relative">
                             <div class="flex justify-between">
-                                <h2 class="text-black/87 font-medium text-xl mb-4" x-text="item.namaJenis"></h2>
+                                <h2 class="text-black/87 font-medium text-xl mb-4" x-text="item.namaInstrument"></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">Info</p>
-                                <p class="text-black/87 font-normal text-sm mb-2" x-text="item.info"></p>
+                                <p class="text-[#00000099] font-normal text-sm mb-2">Assay Code</p>
+                                <p class="text-black/87 font-normal text-sm mb-2" x-text="item.assayCode"></p>
                             </div>
                             <div class="flex justify-between">
-                                <p class="text-[#00000099] font-normal text-sm mb-2">Instrument</p>
-                                <p class="text-black/87 font-normal text-sm mb-2" x-text="item.namaInstrument"></p>
+                                <p class="text-[#00000099] font-normal text-sm mb-2">Decimal Font</p>
+                                <p class="text-black/87 font-normal text-sm mb-2" x-text="item.decimalFont"></p>
                             </div>
                             <div class="flex justify-between">
-                                <p class="text-[#00000099] font-normal text-sm mb-2">Interface</p>
-                                <p class="text-black/87 font-normal text-sm mb-2" x-text="item.namaInterface"></p>
+                                <p class="text-[#00000099] font-normal text-sm mb-2">Formula</p>
+                                <p class="text-black/87 font-normal text-sm mb-2" x-text="item.formula"></p>
                             </div>
                         </div>
                     </template>
diff --git a/v1/assay_format_mobile_edit.html b/v1/assay_format_mobile_edit.html
new file mode 100644
index 0000000..08bca2d
--- /dev/null
+++ b/v1/assay_format_mobile_edit.html
@@ -0,0 +1,165 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Assay Format 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="assay_format.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">Edit</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="assayFormatMobileEdit">
+        <div class="relative w-full lg:hidden">
+            <!-- instrument -->
+            <fieldset @click.outside="openInstrument = 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="openInstrument = !openInstrument" 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': 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>
+                </button>
+            </fieldset>
+            <div x-show="openInstrument"
+                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>
+            <!-- space 20 -->
+            <div class="mb-5 lg:mb-0"></div>
+
+            <!-- Assay Code -->
+            <label for="Assay Code"
+                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 Code" x-model="assayCode" @change="onChangeAssayCode()"
+                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                    placeholder="Assay Code" autocomplete="off" />
+
+                <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 Code
+                </span>
+            </label>
+
+            <!-- space 20 -->
+            <div class="mb-5 lg:mb-0"></div>
+
+            <!-- Decimal Font -->
+            <label for="Decimal"
+                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="Decimal" x-model="decimalFont" @change="onChangeDecimalFont()"
+                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                    placeholder="Decimal" autocomplete="off" />
+
+                <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">
+                    Decimal
+                </span>
+            </label>
+
+            <!-- space 20 -->
+            <div class="mb-5 lg:mb-0"></div>
+
+            <!-- formula -->
+            <label for="Formula"
+                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+
+                <textarea id="Formula" x-model="formula" @change="onChangeFormula()"
+                    class="resize-none peer w-full pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-none"
+                    placeholder="Formula"></textarea>
+
+                <span class="pointer-events-none absolute left-2.5 bg-white p-0.5 text-xs text-gray-700 transition-all 
+                     peer-placeholder-shown:top-[10%] peer-placeholder-shown:text-sm peer-placeholder-shown:translate-y-0 
+                     peer-focus:top-0 peer-focus:text-xs peer-focus:-translate-y-1/2"
+                    :class="formula.length > 0 ? 'top-0 text-xs -translate-y-1/2' : ''">
+                    Formula
+                </span>
+            </label>
+
+            <!-- btn verifikasi -->
+            <div class="flex justify-end items-end">
+                <button @click="onProcessVerifikasi()" :class="isVerifikasiDone == false 
+                        ? 'flex items-center justify-center gap-2 text-white bg-[#4CAF50] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200 hover:bg-[#388E3C] focus:outline-none focus:ring-2 focus:ring-green-400'
+                        : 'flex items-center justify-center gap-2 bg-[#0000001F] text-[#00000042] cursor-not-allowed font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200'
+                    ">
+
+                    <!-- Loading Spinner -->
+                    <div x-show="loadingVerifikasi"
+                        class="inline-block h-5 w-5 animate-spin rounded-full border-4 border-solid border-white border-e-transparent">
+                    </div>
+
+                    <span x-text="loadingVerifikasi ? 'Verifikasi' : 'Verifikasi'"></span>
+                </button>
+            </div>
+
+            <!-- space 20 -->
+            <div class="mb-5 lg:mb-0"></div>
+
+            <!-- hasil verifikasi -->
+            <div>
+                <template x-if="isErrorVerifikasi === false">
+                    <p class="text-[#388E3C] italic" x-text="hasilVerifikasi"></p>
+                </template>
+                <template x-if="isErrorVerifikasi === true">
+                    <p class="text-[#FF5252] italic" x-text="hasilVerifikasi"></p>
+                </template>
+            </div>
+        </div>
+
+        <!-- space bottom -->
+        <div class="mt-30"></div>
+        <!-- button save -->
+
+        <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> -->
+            <button @click="save()"
+                class="w-full px-4 py-2 rounded-[4px] transition duration-200 font-bold text-sm uppercase bg-[#1976D2] text-white hover:bg-[#2196F3] hover:text-white">
+                Save
+            </button>
+        </div>
+
+    </div>
+    <!-- konten utama -->
+
+    <script src="js/assay_format_mobile_edit.js"></script>
+</body>
\ No newline at end of file
diff --git a/v1/js/assay_format.js b/v1/js/assay_format.js
index 4d95a86..897ba7c 100644
--- a/v1/js/assay_format.js
+++ b/v1/js/assay_format.js
@@ -213,6 +213,11 @@ document.addEventListener('alpine:init', () => {
                 this.formulaAdd.trim() !== ''
             );
         },
+        editMobilePage(item) {
+            var json = JSON.stringify(item);
+            localStorage.setItem('itemEditMobile', json)
+            window.location.href = "assay_format_mobile_edit.html";
+        },
         // 2. Fungsi End
     }))
 })
\ No newline at end of file
diff --git a/v1/js/assay_format_mobile_edit.js b/v1/js/assay_format_mobile_edit.js
new file mode 100644
index 0000000..8b552f4
--- /dev/null
+++ b/v1/js/assay_format_mobile_edit.js
@@ -0,0 +1,109 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('assayFormatMobileEdit', () => ({
+        // 0. Init dijalankan sebelum inisialisasi
+        init() {
+            let itemEdit = localStorage.getItem('itemEditMobile');
+            // console.log('itemEdit ', itemEdit);
+            if (itemEdit) {
+                let json = JSON.parse(itemEdit);
+                console.log('itemEdit ', json);
+                this.selectedInstrument = {
+                    idInstrument: json.idInstrument,
+                    namaInstrument: json.namaInstrument
+                };
+
+                this.assayCode = json.assayCode || '';
+                this.decimalFont = json.decimalFont || '';
+                this.formula = json.formula || '';
+                this.idAssayFormat = json.idAssayFormat || -1;
+            }
+        },
+        // 1. Inisialisasi Start
+        loadingVerifikasi: false,
+        idAssayFormat: -1,
+        decimalFont: '',
+        assayCode: '',
+        formula: '',
+        selectedInstrument: {
+            idInstrument: -1,
+            namaInstrument: 'Instrument'
+        },
+        openInstrument: false,
+        dataInstrument: [
+            {
+                idInstrument: 1,
+                namaInstrument: 'Hema 01',
+            },
+            {
+                idInstrument: 2,
+                namaInstrument: 'Axsym',
+            },
+            {
+                idInstrument: 3,
+                namaInstrument: 'Cobas C311',
+            },
+        ],
+        hasilVerifikasi: '',
+        isErrorVerifikasi: false,
+        isVerifikasiDone: false,
+        objForm: {
+            isValidForm: false,
+            idInstrument: -1,
+            namaInstrument: 'Instrument',
+            decimalFont: '',
+            assayCode: '',
+            formula: '',
+        },
+        // 1. Inisialisasi End
+        // 2. Fungsi Start
+        onChangeFormula() {
+            this.objForm.formula = this.formula;
+            this.validateForm();
+        },
+        onChangeDecimalFont() {
+            this.objForm.decimalFont = this.decimalFont;
+            this.validateForm();
+        },
+        onChangeAssayCode() {
+            this.objForm.assayCode = this.assayCode;
+            this.validateForm();
+        },
+        onChangeInstrument(item) {
+            this.selectedInstrument = item;
+            this.objForm.idInstrument = item.idInstrument;
+            this.objForm.namaInstrument = item.namaInstrument;
+            this.validateForm();
+        },
+        onProcessVerifikasi() {
+            if(this.isVerifikasiDone == true) {
+                return;
+            }
+
+            this.loadingVerifikasi = true;
+
+            setTimeout(() => {
+                this.loadingVerifikasi = false;
+                this.isErrorVerifikasi = false;
+                this.isVerifikasiDone = true;
+                this.hasilVerifikasi = 'Formula is valid';
+            }, 2000);
+        },
+        validateForm() {
+            this.objForm.isValidForm = (
+                this.selectedInstrument.idInstrument != -1 &&
+                this.decimalFont.trim() !== '' &&
+                this.assayCode.trim() !== '' &&
+                this.formula.trim() !== ''
+            );
+        },
+        save() {
+            if (this.objForm.isValidForm === true) {
+                alert('true')
+            } else {
+                alert('inputan harus diisi');
+            }
+        },
+        // 2. Fungsi End
+    })
+    )
+})
\ No newline at end of file
