step 32 : perbaikan validasi form & verifikasi mobile add, desktop add

v1/assay_format.html

@@ -231,12 +231,12 @@
                             <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"
+                                    x-text="selectedInstrumentAdd.idInstrument != -1 ? 'Instrument' : selectedInstrumentAdd.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>
+                                    <span x-text="selectedInstrumentAdd.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">
@@ -265,7 +265,7 @@
                             <!-- 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"
+                                <input type="text" id="Assay Code" autocomplete="off" x-model="assayCode" @change="onChangeAssayCodeAdd()"
                                     class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
                                     placeholder="Assay Code" />
 
@@ -281,7 +281,7 @@
                             <!-- 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"
+                                <input type="text" id="Decimal" x-model="decimalFont" autocomplete="off" @change="onChangeDecimalFontAdd()"
                                     class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
                                     placeholder="Decimal" />
 
@@ -298,7 +298,7 @@
                             <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="formulaAdd"
+                                <textarea id="Formula" x-model="formulaAdd" autocomplete="off" @change="onChangeFormulaAdd()"
                                     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>
 
@@ -312,8 +312,10 @@
 
                             <!-- btn verifikasi -->
                             <div class="flex justify-end items-end">
-                                <button @click="onProcessVerifiaksi()" class="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 
+                                <button @click="onProcessVerifikasi()" :class="isVerifikasiDone == false 
-                                    hover:bg-[#388E3C] focus:outline-none focus:ring-2 focus:ring-green-400">
+                                        ? '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"
@@ -345,8 +347,9 @@
                                 hover:bg-[#FF5252] px-4 py-2 rounded-md">
                                 Cancel
                             </button>
-                            <button class="text-[#1976D2] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200 
+                            <button @click="save()" :class="objForm.isValidForm 
-                                hover:bg-[#1976D2] hover:text-white">
+                                ? 'text-white bg-[#1976D2] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200 hover:bg-[#135BA1]' 
+                                : 'bg-gray-300 text-gray-500 cursor-not-allowed px-4 py-2 rounded-md'" :disabled="!objForm.isValidForm">
                                 Save
                             </button>
                         </div>
@@ -406,7 +409,7 @@
                             <!-- 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"
+                                <input type="text" id="Assay Code" x-model="assayCode" autocomplete="off"
                                     class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
                                     placeholder="Assay Code" />
 
@@ -424,7 +427,7 @@
                                 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"
                                     class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
-                                    placeholder="Decimal" />
+                                    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">
@@ -438,7 +441,7 @@
                             <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="formulaEdit"
+                                <textarea id="Formula" x-model="formulaEdit" autocomplete="off"
                                     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>
 
@@ -499,7 +502,7 @@
         <!-- Kiri Mobile -->
         <div class="bg-[#F2F9FF] h-5 flex justify-between space-x-2 lg:hidden">
             <h2 class="text-black/87 font-medium text-xl mb-4">Assay Format</h2>
-            <a href="settings_mobile_add.html">
+            <a href="assay_format_mobile_add.html">
                 <span class="material-symbols-outlined text-[#2196F3]">add</span>
             </a>
         </div>

v1/assay_format_mobile_add.html

@@ -0,0 +1,162 @@
+<!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">Add</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="assayFormatMobileAdd">
+        <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>
+        </div>
+
+    </div>
+    <!-- konten utama -->
+
+    <script src="js/assay_format_mobile_add.js"></script>
+</body>

v1/js/assay_format.js

@@ -5,9 +5,77 @@ document.addEventListener('alpine:init', () => {
 
         },
         // 1. Inisialisasi Start
+        dataSetting: [
+            {
+                idSetting: 1,
+                idJenis: 1,
+                namaJenis: 'TCP Server',
+                info: 'Port 5001',
+                port: '5001',
+                idInterface: 1,
+                namaInterface: 'XN550',
+                idInstrument: 1,
+                namaInstrument: 'Hema 01',
+                server: '',
+                idSerial: -1,
+                namaSerial: '',
+                speed: '',
+                idParity: -1,
+                namaParity: '',
+                idDataBit: -1,
+                namaDataBit: '',
+                idStopBit: -1,
+                namaStopBit: ''
+            },
+            {
+                idSetting: 2,
+                idJenis: 2,
+                namaJenis: 'TCP Client',
+                info: 'Server 192.168.0.1, Port 4000',
+                port: '4000',
+                idInterface: 2,
+                namaInterface: 'Axsym',
+                idInstrument: 2,
+                namaInstrument: 'Axsym',
+                server: '192.168.0.1',
+                idSerial: 1,
+                namaSerial: 'ttyS0',
+                speed: '',
+                idParity: -1,
+                namaParity: '',
+                idDataBit: -1,
+                namaDataBit: '',
+                idStopBit: -1,
+                namaStopBit: ''
+            },
+            {
+                idSetting: 3,
+                idJenis: 3,
+                namaJenis: 'RS232',
+                info: 'ttyS01, 9600, N, 8, 1',
+                port: '',
+                idInterface: 3,
+                namaInterface: 'C311',
+                idInstrument: 3,
+                namaInstrument: 'Cobas C311',
+                server: '',
+                idSerial: 1,
+                namaSerial: 'ttyS0',
+                speed: '19200',
+                idParity: 1,
+                namaParity: 'None',
+                idDataBit: 2,
+                namaDataBit: '6',
+                idStopBit: 2,
+                namaStopBit: '1'
+            },
+        ],
         showDialogAdd: false,
         showDialogEdit: false,
         loadingVerifikasi: false,
+        isVerifikasiDone: false,
+        decimalFontEdit: '',
+        assayCodeEdit: '',
         decimalFont: '',
         assayCode: '',
         formulaEdit: '',
@@ -42,6 +110,10 @@ document.addEventListener('alpine:init', () => {
             idInstrument: -1,
             namaInstrument: 'Instrument'
         },
+        selectedInstrumentAdd: {
+            idInstrument: -1,
+            namaInstrument: 'Instrument'
+        },
         openInstrument: false,
         openInstrumentSearchMobile: false,
         openInstrumentSearch: false,
@@ -61,6 +133,14 @@ document.addEventListener('alpine:init', () => {
         ],
         hasilVerifikasi: '',
         isErrorVerifikasi: false,
+        objForm: {
+            isValidForm: false,
+            idInstrument: -1,
+            namaInstrument: 'Instrument',
+            decimalFont: '',
+            assayCode: '',
+            formula: '',
+        },
         // 1. Inisialisasi End
         // 2. Fungsi Start
         closeDialog(){
@@ -77,19 +157,37 @@ document.addEventListener('alpine:init', () => {
         },
         onChangeInstrument(item){
             this.openInstrument = false;
-            this.selectedInstrument = item;
+            this.selectedInstrumentAdd = item;
+            this.validateForm();
+        },
+        onChangeAssayCodeAdd() {
+            this.objForm.assayCode = this.assayCode;
+            this.validateForm();
+        },
+        onChangeDecimalFontAdd(){
+            this.objForm.decimalFont = this.decimalFont;
+            this.validateForm();
+        },
+        onChangeFormulaAdd(){
+            this.objForm.formula = this.formulaAdd;
+            this.validateForm();
         },
         onChangeInstrumentMobile(item){
             this.openInstrumentSearchMobile = false;
             // this.selectedInstrument = item;
             this.selectedInstrument = { ...item };
         },
-        onProcessVerifiaksi(){
+        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);
         },
@@ -107,6 +205,14 @@ document.addEventListener('alpine:init', () => {
         closeDialogEdit(){
             this.showDialogEdit = !this.showDialogEdit;
         },
+        validateForm() {
+            this.objForm.isValidForm = (
+                this.selectedInstrumentAdd.idInstrument != -1 &&
+                this.decimalFont.trim() !== '' &&
+                this.assayCode.trim() !== '' &&
+                this.formulaAdd.trim() !== ''
+            );
+        },
         // 2. Fungsi End
     }))
 })

v1/js/assay_format_mobile_add.js

@@ -0,0 +1,94 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('assayFormatMobileAdd', () => ({
+        // 0. Init dijalankan sebelum inisialisasi
+        init() {
+
+        },
+        // 1. Inisialisasi Start
+        loadingVerifikasi: false,
+        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
+    })
+    )
+})