changes

app/components/pos/EditAddress.vue

@@ -16,6 +16,24 @@ async function updateAddress() {
   isLoading.value = false;
   emit("modalevent", { name: "update" });
 }
+
+const isDirty = computed(() => {
+  if (props.address) {
+    // edit
+    return !isEqual(props.address, addressRef);
+  } else {
+    return true;
+    // create
+    // true if
+  }
+});
+const isValid = computed(() => {
+  if (!addressRef.value.city) return false;
+  if (!addressRef.value.district) return false;
+  if (!addressRef.value.ward) return false;
+  if (!addressRef.value.address_detail) return false;
+  return true;
+});
 </script>
 
 <template>
@@ -41,7 +59,7 @@ async function updateAddress() {
                 v-model="addressRef.ward"
                 class="input"
                 type="text"
-                placeholder="Text input"
+                placeholder="Phường"
               />
             </div>
           </div>
@@ -54,7 +72,7 @@ async function updateAddress() {
                 v-model="addressRef.district"
                 class="input"
                 type="text"
-                placeholder="Text input"
+                placeholder="Quận"
               />
             </div>
           </div>
@@ -67,7 +85,7 @@ async function updateAddress() {
                 v-model="addressRef.city"
                 class="input"
                 type="text"
-                placeholder="Text input"
+                placeholder="Thành phố"
               />
             </div>
           </div>
@@ -94,6 +112,9 @@ async function updateAddress() {
         </label>
       </div>
     </div>
+    <pre>address: {{ address }}</pre>
+    <pre>addressRef: {{ addressRef }}</pre>
+    <pre>isDirty: {{ isDirty.toString() }}</pre>
     <div class="field is-grouped is-grouped-right">
       <div class="control">
         <button
@@ -108,16 +129,16 @@ async function updateAddress() {
         <button
           type="button"
           :class="['button is-link', isLoading && 'is-loading']"
-          :disabled="isEqual(address, addressRef)"
+          :disabled="!isDirty || !isValid"
           @click="updateAddress"
         >
           <span class="icon">
             <Icon
-              name="material-symbols:edit-outline-rounded"
-              :size="16"
+              :name="address ? 'material-symbols:edit-outline-rounded' : 'material-symbols:add-rounded'"
+              :size="18"
             />
           </span>
-          <span>Cập nhật</span>
+          <span>{{ address ? "Cập nhật" : "Tạo" }}</span>
         </button>
       </div>
     </div>