changes

app/components/debt/Due.vue

@@ -2,24 +2,22 @@
 import useSendEmail from '@/components/debt/useSendEmail';
 import { isEqual } from 'es-toolkit';
 
-const { 
-  $dayjs,
-  $getdata,
-  $store,
-} = useNuxtApp();
+const { $dayjs, $getdata, $store } = useNuxtApp();
 
 const payables = ref(null);
 const defaultFilter = {
   status: 1,
   to_date__gte: $dayjs().format('YYYY-MM-DD'),
   to_date__lte: undefined,
-}
+};
 const filter = ref(defaultFilter);
 const activeDateFilter = ref(null);
 const key = ref(0);
 
 function setDateFilter(detail) {
-  activeDateFilter.value = isEqual(activeDateFilter.value, detail) ? null : detail;
+  activeDateFilter.value = isEqual(activeDateFilter.value, detail)
+    ? null
+    : detail;
 }
 
 function resetDateFilter() {
@@ -28,23 +26,27 @@ function resetDateFilter() {
 
 const paymentSchedules = ref([]);
 
-onMounted(async () => {
-  const payablesData = await $getdata('bizsetting', undefined, { filter: { classify: 'duepayables' }, sort: 'index' });
-  payables.value = payablesData;
-});
+// onMounted(async () => {
+//   const payablesData = await $getdata('bizsetting', undefined, { filter: { classify: 'duepayables' }, sort: 'index' });
+//   payables.value = payablesData;
+// });
 
-watch(activeDateFilter, (val) => {
-  if (!val) {
-    filter.value = defaultFilter;
-  } else {
-    const cutoffDate = $dayjs().add(val.time, 'day').format('YYYY-MM-DD');
-    const filterField = `to_date__${val.lookup}`;
-    filter.value = {
-      ...defaultFilter,
-      [filterField]: cutoffDate,
+watch(
+  activeDateFilter,
+  (val) => {
+    if (!val) {
+      filter.value = defaultFilter;
+    } else {
+      const cutoffDate = $dayjs().add(val.time, 'day').format('YYYY-MM-DD');
+      const filterField = `to_date__${val.lookup}`;
+      filter.value = {
+        ...defaultFilter,
+        [filterField]: cutoffDate,
+      };
     }
-  }
-}, { deep: true })
+  },
+  { deep: true },
+);
 
 const showmodal = ref(null);
 
@@ -56,40 +58,53 @@ function openConfirmModal() {
     height: '100px',
     vbind: {
       content: `Bạn có đồng ý gửi ${$store.selectedPaymentSchedulesForEmailInDue.length} thông báo đến hạn không?`,
-    }
-  }
+    },
+  };
 }
-watch(filter, () => {
-  key.value += 1;
-}, { deep: true })
+watch(
+  filter,
+  () => {
+    key.value += 1;
+  },
+  { deep: true },
+);
 
 watch(key, () => {
   // reset when DataView re-renders because of filter
-  $store.commit('selectedPaymentSchedulesForEmailInDue', []) 
-})
+  $store.commit('selectedPaymentSchedulesForEmailInDue', []);
+});
 
 function toggleAll() {
   if ($store.selectedPaymentSchedulesForEmailInDue.length === 0) {
-    $store.commit('selectedPaymentSchedulesForEmailInDue', paymentSchedules.value.map(p => p.id)) 
+    $store.commit(
+      'selectedPaymentSchedulesForEmailInDue',
+      paymentSchedules.value.map((p) => p.id),
+    );
   } else {
-    $store.commit('selectedPaymentSchedulesForEmailInDue', []) 
+    $store.commit('selectedPaymentSchedulesForEmailInDue', []);
   }
 }
 const { contents, send, isSending } = useSendEmail(filter, 13);
 </script>
 <template>
-  <div class="is-flex is-justify-content-space-between is-align-content-center mb-4">
+  <div
+    class="is-flex is-justify-content-space-between is-align-content-center mb-4"
+  >
     <div class="buttons m-0">
       <p>Đến hạn:</p>
-      <button 
+      <button
         v-for="payable in payables"
         :key="payable.id"
         @click="setDateFilter(payable.detail)"
-        :class="['button', { 'is-primary': isEqual(activeDateFilter, payable.detail) }]"
+        :class="[
+          'button',
+          { 'is-primary': isEqual(activeDateFilter, payable.detail) },
+        ]"
       >
-        {{ payable.detail.lookup === 'lte' ? '≤' : '>' }} {{ payable.detail.time }} ngày
+        {{ payable.detail.lookup === 'lte' ? '≤' : '>' }}
+        {{ payable.detail.time }} ngày
       </button>
-      <button 
+      <button
         v-if="activeDateFilter"
         @click="resetDateFilter()"
         class="button is-white"
@@ -97,7 +112,10 @@ const { contents, send, isSending } = useSendEmail(filter, 13);
         Xoá lọc
       </button>
     </div>
-    <div class="buttons" v-if="$store.selectedPaymentSchedulesForEmailInDue !== undefined">
+    <div
+      class="buttons"
+      v-if="$store.selectedPaymentSchedulesForEmailInDue !== undefined"
+    >
       <button
         v-if="$store.selectedPaymentSchedulesForEmailInDue.length > 0"
         @click="openConfirmModal()"
@@ -105,12 +123,17 @@ const { contents, send, isSending } = useSendEmail(filter, 13);
       >
         Gửi {{ $store.selectedPaymentSchedulesForEmailInDue.length }} thông báo
       </button>
-      <button 
+      <button
         @click="toggleAll"
         class="button"
         :disabled="paymentSchedules.length === 0"
       >
-        {{ $store.selectedPaymentSchedulesForEmailInDue.length > 0 ? 'Bỏ chọn' : 'Chọn' }} tất cả
+        {{
+          $store.selectedPaymentSchedulesForEmailInDue.length > 0
+            ? 'Bỏ chọn'
+            : 'Chọn'
+        }}
+        tất cả
       </button>
     </div>
   </div>
@@ -124,18 +147,19 @@ const { contents, send, isSending } = useSendEmail(filter, 13);
       params: {
         filter,
         sort: 'to_date',
-        values: 'id,penalty_paid,penalty_remain,penalty_amount,penalty_reduce,batch_date,amount_remain,paid_amount,remain_amount,code,status,txn_detail,txn_detail__transaction__product,txn_detail__transaction__product__trade_code,txn_detail__transaction__code,txn_detail__code,txn_detail__transaction__customer__code,txn_detail__transaction__customer__fullname,txn_detail__transaction__customer__email,txn_detail__transaction__customer__type__code,txn_detail__transaction__customer__legal_code,txn_detail__transaction__customer__contact_address,txn_detail__transaction__customer__address,txn_detail__transaction__customer__phone,txn_detail__transaction__policy__code,txn_detail__phase__name,type__name,from_date,to_date,amount,cycle,cycle_days,status__name,detail,entry',
+        values:
+          'id,penalty_paid,penalty_remain,penalty_amount,penalty_reduce,batch_date,amount_remain,paid_amount,remain_amount,code,status,txn_detail,txn_detail__transaction__product,txn_detail__transaction__product__trade_code,txn_detail__transaction__code,txn_detail__code,txn_detail__transaction__customer__code,txn_detail__transaction__customer__fullname,txn_detail__transaction__customer__email,txn_detail__transaction__customer__type__code,txn_detail__transaction__customer__legal_code,txn_detail__transaction__customer__contact_address,txn_detail__transaction__customer__address,txn_detail__transaction__customer__phone,txn_detail__transaction__policy__code,txn_detail__phase__name,type__name,from_date,to_date,amount,cycle,cycle_days,status__name,detail,entry',
       },
-      onDisplayDataChange: (values) => paymentSchedules = values
-    }" 
+      onDisplayDataChange: (values) => (paymentSchedules = values),
+    }"
   />
-  <Modal 
-    v-if="showmodal" 
-    v-bind="showmodal" 
-    @confirm="send" 
-    @close="showmodal = undefined" 
+  <Modal
+    v-if="showmodal"
+    v-bind="showmodal"
+    @confirm="send"
+    @close="showmodal = undefined"
   />
-    <!-- <div class="is-flex is-gap-1">
+  <!-- <div class="is-flex is-gap-1">
       // debug
       <Template1
         v-if="contents"
@@ -144,4 +168,4 @@ const { contents, send, isSending } = useSendEmail(filter, 13);
         previewMode
       />
     </div> -->
-</template>
+</template>