src/components/common/VnInput.vue

@@ -83,7 +83,7 @@ const inputRules = [
                 <slot name="prepend" />
             </template>
 
-            <template #append>
+            <template #append v-if="!!$attrs.disabled">
                 <slot name="append" v-if="$slots.append" />
                 <QIcon
                     name="close"

src/pages/Customer/Defaulter/CustomerDefaulter.vue

@@ -168,31 +168,20 @@ const columns = computed(() => [
     },
 ]);
 
-const setRows = (data) => {
-    balanceDueTotal.value = data.reduce((accumulator, currentValue) => {
-        return accumulator + (currentValue['amount'] || 0);
-    }, 0);
-};
-
 const viewAddObservation = (rowsSelected) => {
     quasar.dialog({
         component: CustomerDefaulterAddObservation,
         componentProps: {
             clients: rowsSelected,
-            promise: refreshData,
+            promise: async () => await dataRef.value.fetch(),
         },
     });
 };
 
-const refreshData = async () => {
-    await dataRef.value.fetch();
-};
-
 const onFetch = (data) => {
-    for (const element of data) {
-        element.isWorker = element.businessTypeFk === 'worker';
-    }
-    setRows(data);
+    for (const element of data) element.isWorker = element.businessTypeFk === 'worker';
+
+    balanceDueTotal.value = data.reduce((acc, { amount = 0 }) => acc + amount, 0);
 };
 </script>
 
@@ -212,8 +201,8 @@ const onFetch = (data) => {
                     </QTooltip>
                 </QBtn>
             </div>
-        </Teleport></template
-    >
+        </Teleport>
+    </template>
 
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
@@ -239,6 +228,7 @@ const onFetch = (data) => {
 
     <QPage class="column items-center q-pa-md">
         <VnPaginate
+            ref="dataRef"
             @on-fetch="onFetch"
             data-key="CustomerDefaulter"
             :filter="filter"
@@ -303,6 +293,7 @@ const onFetch = (data) => {
                                                     type="textarea"
                                                     v-model="props.value"
                                                     autogrow
+                                                    :disable="true"
                                                 />
                                             </div>
                                             <div v-else>{{ props.value }}</div>
@@ -324,8 +315,10 @@ const onFetch = (data) => {
                                 </QTr>
                             </QTd>
                         </template>
-                    </QTable></div></template
-        ></VnPaginate>
+                    </QTable>
+                </div>
+            </template>
+        </VnPaginate>
     </QPage>
 </template>