From ea6e927b18ac9c8170de760f74f4b79b331a8872 Mon Sep 17 00:00:00 2001
From: sindhu <albertussindhu15@gmail.com>
Date: Wed, 19 Mar 2025 08:40:21 +0700
Subject: [PATCH] step 34 : fix selected object add, edit assay format desktop

---
 v1/assay_format.html  | 23 +++++++++-------
 v1/js/assay_format.js | 62 ++++++++++++++++++++++++++++++++-----------
 2 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/v1/assay_format.html b/v1/assay_format.html
index 10c9595..66215a6 100644
--- a/v1/assay_format.html
+++ b/v1/assay_format.html
@@ -150,7 +150,7 @@
                                 <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)"
+                                <li :id="item.idInstrument" @click="onChangeInstrumentSearch(item)"
                                     class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
                                     <button x-text="item.namaInstrument"></button>
                                 </li>
@@ -162,7 +162,7 @@
                     <!-- 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"
+                        <input type="text" id="Assay No" x-model="assayNo"
                             class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
                             placeholder="Assay No" />
 
@@ -366,7 +366,7 @@
                 <div class="flex flex-col bg-white rounded-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">add</h3>
+                        <h3 class="text-xl font-bold uppercase text-white px-4 py-1">edit</h3>
                     </div>
                     <!-- body -->
                     <div class="flex flex-1 bg-white px-6 py-5">
@@ -375,12 +375,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="selectedInstrumentEdit.idInstrument != -1 ? 'Instrument' : selectedInstrumentEdit.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="selectedInstrumentEdit.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">
@@ -409,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" autocomplete="off"
+                                <input type="text" id="Assay Code" x-model="assayCodeEdit" 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" />
 
@@ -425,7 +425,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" x-model="decimalFont"
+                                <input type="text" id="Decimal" x-model="decimalFontEdit"
                                     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" />
 
@@ -455,8 +455,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 
-                                    hover:bg-[#388E3C] focus:outline-none focus:ring-2 focus:ring-green-400">
+                                <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"
@@ -577,11 +579,12 @@
 
             <!-- spacer 8px -->
             <div class="mb-2"></div>
+
             <!-- Assay No Inputan -->
             <div class="bg-white w-full px-3 py-2 lg:hidden lg:mb-0">
                 <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"
+                    <input type="text" id="Assay No" x-model="assayNo"
                         class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
                         placeholder="Assay No" />
 
diff --git a/v1/js/assay_format.js b/v1/js/assay_format.js
index 897ba7c..d55fcf4 100644
--- a/v1/js/assay_format.js
+++ b/v1/js/assay_format.js
@@ -1,7 +1,7 @@
 document.addEventListener('alpine:init', () => {
     Alpine.data('assayFormat', () => ({
         // 0. Init dijalankan sebelum inisialisasi
-        init(){
+        init() {
 
         },
         // 1. Inisialisasi Start
@@ -74,6 +74,7 @@ document.addEventListener('alpine:init', () => {
         showDialogEdit: false,
         loadingVerifikasi: false,
         isVerifikasiDone: false,
+        assayNo: '',
         decimalFontEdit: '',
         assayCodeEdit: '',
         decimalFont: '',
@@ -114,6 +115,10 @@ document.addEventListener('alpine:init', () => {
             idInstrument: -1,
             namaInstrument: 'Instrument'
         },
+        selectedInstrumentEdit: {
+            idInstrument: -1,
+            namaInstrument: 'Instrument'
+        },
         openInstrument: false,
         openInstrumentSearchMobile: false,
         openInstrumentSearch: false,
@@ -141,68 +146,93 @@ document.addEventListener('alpine:init', () => {
             assayCode: '',
             formula: '',
         },
+        objFormEdit: {
+            isValidForm: false,
+            idInstrument: -1,
+            namaInstrument: 'Instrument',
+            decimalFont: '',
+            assayCode: '',
+            formula: '',
+        },
         // 1. Inisialisasi End
         // 2. Fungsi Start
-        closeDialog(){
+        closeDialog() {
             this.openInstrument = false;
-            this.selectedInstrument = {
+            this.selectedInstrumentAdd = {
                 idInstrument: -1,
                 namaInstrument: 'Instrument'
             };
-            this.loadingVerifikasi = false; 
+            this.loadingVerifikasi = false;
+            this.isVerifikasiDone = false;
+            this.objForm.isValidForm = false;
             this.isErrorVerifikasi = false;
             this.hasilVerifikasi = ''
+            this.assayCode = ''
+            this.decimalFont = ''
             this.formulaAdd = ''
             this.showDialogAdd = false
         },
-        onChangeInstrument(item){
+        onChangeInstrumentSearch(item) {
+            this.openInstrumentSearch = false;
+            this.selectedInstrument = item;
+        },
+        onChangeInstrument(item) {
             this.openInstrument = false;
             this.selectedInstrumentAdd = item;
             this.validateForm();
         },
+        onChangeInstrumentEdit(item) {
+            this.openInstrument = false;
+            this.selectedInstrumentEdit = item;
+        },
         onChangeAssayCodeAdd() {
             this.objForm.assayCode = this.assayCode;
             this.validateForm();
         },
-        onChangeDecimalFontAdd(){
+        onChangeDecimalFontAdd() {
             this.objForm.decimalFont = this.decimalFont;
             this.validateForm();
         },
-        onChangeFormulaAdd(){
+        onChangeFormulaAdd() {
             this.objForm.formula = this.formulaAdd;
             this.validateForm();
         },
-        onChangeInstrumentMobile(item){
+        onChangeInstrumentMobile(item) {
             this.openInstrumentSearchMobile = false;
             // this.selectedInstrument = item;
             this.selectedInstrument = { ...item };
         },
-        onProcessVerifikasi(){
-            if(this.isVerifikasiDone == true) {
+        onProcessVerifikasi() {
+            if (this.isVerifikasiDone == true) {
                 return;
             }
 
-            this.loadingVerifikasi = true; 
+            this.loadingVerifikasi = true;
 
             setTimeout(() => {
-                this.loadingVerifikasi = false; 
+                this.loadingVerifikasi = false;
                 this.isErrorVerifikasi = false;
                 this.isVerifikasiDone = true;
                 this.hasilVerifikasi = 'Formula is valid';
             }, 2000);
         },
         openModalEdit(item) {
-            this.selectedInstrument = {
+            this.selectedInstrumentEdit = {
                 idInstrument: item.idInstrument,
                 namaInstrument: item.namaInstrument
             }
 
-            this.assayCode = item.assayCode
-            this.decimalFont = item.decimalFont
+            this.assayCodeEdit = item.assayCode
+            this.decimalFontEdit = item.decimalFont
             this.formulaEdit = item.formula
+
             this.showDialogEdit = !this.showDialogEdit;
         },
-        closeDialogEdit(){
+        closeDialogEdit() {
+            this.loadingVerifikasi = false;
+            this.isErrorVerifikasi = false;
+            this.isVerifikasiDone = false;
+            this.hasilVerifikasi = ''
             this.showDialogEdit = !this.showDialogEdit;
         },
         validateForm() {