chore: install prettier

app/components/common/ActionInfo.vue

@@ -25,12 +25,23 @@
   </div>
   <template v-if="option === 'your'">
     <template v-if="tab === 'message'">
-      <div class="field is-grouped" v-for="(v, i) in message">
+      <div
+        class="field is-grouped"
+        v-for="(v, i) in message"
+      >
         <div class="control is-expanded">
-          <textarea class="textarea" placeholder="" rows="3" v-model="v.text"></textarea>
+          <textarea
+            class="textarea"
+            placeholder=""
+            rows="3"
+            v-model="v.text"
+          ></textarea>
         </div>
         <div class="control">
-          <a class="mr-3" @click="add()">
+          <a
+            class="mr-3"
+            @click="add()"
+          >
             <SvgIcon v-bind="{ name: 'add1.png', type: 'primary', size: 20 }"></SvgIcon>
           </a>
           <a @click="remove(v, i)">
@@ -44,22 +55,40 @@
         </div>
       </div>
       <div class="mt-5">
-        <button class="button is-primary has-text-white" @click="update()">Cập nhật</button>
+        <button
+          class="button is-primary has-text-white"
+          @click="update()"
+        >
+          Cập nhật
+        </button>
       </div>
     </template>
     <template v-else-if="tab === 'image'">
       <div class="field is-grouped mb-0">
         <div class="control is-expanded"></div>
         <div class="control">
-          <FileUpload v-bind="{ position: 'left' }" @files="getImages"></FileUpload>
+          <FileUpload
+            v-bind="{ position: 'left' }"
+            @files="getImages"
+          ></FileUpload>
         </div>
       </div>
-      <div class="field is-grouped is-grouped-multiline" v-if="image.length > 0">
-        <div class="control mb-2" v-for="(v, i) in image">
+      <div
+        class="field is-grouped is-grouped-multiline"
+        v-if="image.length > 0"
+      >
+        <div
+          class="control mb-2"
+          v-for="(v, i) in image"
+        >
           <ChipImage
             style="width: 128px"
             @remove="removeImage(v, i)"
-            v-bind="{ show: ['copy', 'download', 'delete'], file: v, image: `${$getpath()}static/files/${v.file}` }"
+            v-bind="{
+              show: ['copy', 'download', 'delete'],
+              file: v,
+              image: `${$getpath()}static/files/${v.file}`,
+            }"
           >
           </ChipImage>
         </div>
@@ -69,24 +98,47 @@
       <div class="field is-grouped mb-0">
         <div class="control is-expanded"></div>
         <div class="control">
-          <FileUpload v-bind="{ position: 'left', type: 'file' }" @files="getFiles"></FileUpload>
+          <FileUpload
+            v-bind="{ position: 'left', type: 'file' }"
+            @files="getFiles"
+          ></FileUpload>
         </div>
       </div>
-      <FileShow @remove="removeFile" v-bind="{ files: file, show: { delete: 1 } }"></FileShow>
+      <FileShow
+        @remove="removeFile"
+        v-bind="{ files: file, show: { delete: 1 } }"
+      ></FileShow>
     </template>
     <template v-else-if="tab === 'link'">
-      <div class="field is-grouped" v-for="(v, i) in link">
+      <div
+        class="field is-grouped"
+        v-for="(v, i) in link"
+      >
         <div class="control is-expanded">
-          <input class="input" placeholder="" v-model="v.link" />
+          <input
+            class="input"
+            placeholder=""
+            v-model="v.link"
+          />
         </div>
         <div class="control">
-          <a class="mr-3" @click="copyContent(v.link)">
+          <a
+            class="mr-3"
+            @click="copyContent(v.link)"
+          >
             <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 20 }"></SvgIcon>
           </a>
-          <a class="mr-3" :href="v.link" target="_blank">
+          <a
+            class="mr-3"
+            :href="v.link"
+            target="_blank"
+          >
             <SvgIcon v-bind="{ name: 'open.svg', type: 'primary', size: 20 }"></SvgIcon>
           </a>
-          <a class="mr-3" @click="addLink()">
+          <a
+            class="mr-3"
+            @click="addLink()"
+          >
             <SvgIcon v-bind="{ name: 'add1.png', type: 'primary', size: 18 }"></SvgIcon>
           </a>
           <a @click="removeLink(v, i)">
@@ -95,14 +147,23 @@
         </div>
       </div>
       <div class="mt-5">
-        <button class="button is-primary has-text-white" @click="update()">Cập nhật</button>
+        <button
+          class="button is-primary has-text-white"
+          @click="update()"
+        >
+          Cập nhật
+        </button>
       </div>
     </template>
   </template>
   <template v-else-if="option === 'system'">
     <template v-if="tab === 'message'">
       <div v-if="message">
-        <div class="px-2 py-2 mb-2" style="border: 1px solid #e8e8e8" v-for="(v, i) in message">
+        <div
+          class="px-2 py-2 mb-2"
+          style="border: 1px solid #e8e8e8"
+          v-for="(v, i) in message"
+        >
           <span class="mr-3">{{ v.text }}</span>
           <a @click="copyContent(v.text)">
             <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 20 }"></SvgIcon>
@@ -111,11 +172,21 @@
       </div>
     </template>
     <template v-else-if="tab === 'image'">
-      <div class="field is-grouped is-grouped-multiline" v-if="image.length > 0">
-        <div class="control mb-2" v-for="(v, i) in image">
+      <div
+        class="field is-grouped is-grouped-multiline"
+        v-if="image.length > 0"
+      >
+        <div
+          class="control mb-2"
+          v-for="(v, i) in image"
+        >
           <ChipImage
             style="width: 128px"
-            v-bind="{ show: ['copy', 'download'], file: v, image: `${$getpath()}static/files/${v.file}` }"
+            v-bind="{
+              show: ['copy', 'download'],
+              file: v,
+              image: `${$getpath()}static/files/${v.file}`,
+            }"
           >
           </ChipImage>
         </div>
@@ -125,8 +196,17 @@
       <FileShow v-bind="{ files: file }"></FileShow>
     </template>
     <template v-else-if="tab === 'link'">
-      <div class="px-2 py-2 mb-2" style="border: 1px solid #e8e8e8" v-for="(v, i) in link">
-        <a :href="v.link" target="_blank" class="mr-3">{{ v.link }}</a>
+      <div
+        class="px-2 py-2 mb-2"
+        style="border: 1px solid #e8e8e8"
+        v-for="(v, i) in link"
+      >
+        <a
+          :href="v.link"
+          target="_blank"
+          class="mr-3"
+          >{{ v.link }}</a
+        >
         <a @click="copyContent(v.link)">
           <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 20 }"></SvgIcon>
         </a>

app/components/common/Avatarbox.vue

@@ -3,20 +3,26 @@ const props = defineProps({
   text: String,
   image: String,
   type: String,
-  size: Number
+  size: Number,
 });
 </script>
-<template>  
+<template>
   <div
     @click="$emit('justclick')"
     class="rounded-full mx-0 px-0 size-10 font-bold is-flex is-justify-content-center is-align-items-center"
     :style="{
-      border: image ? 'none' : '1px solid var(--bulma-grey-70)'
+      border: image ? 'none' : '1px solid var(--bulma-grey-70)',
     }"
   >
-    <figure v-if="image" class="image">
-      <img class="is-rounded" :src="`${$path()}download?name=${image}`">
+    <figure
+      v-if="image"
+      class="image"
+    >
+      <img
+        class="is-rounded"
+        :src="`${$path()}download?name=${image}`"
+      />
     </figure>
-    <span v-else>{{text}}</span>
+    <span v-else>{{ text }}</span>
   </div>
 </template>

app/components/common/CountWithAdd.vue

@@ -1,41 +1,42 @@
 <template>
-  <div @click="handleClick()" class="is-clickable">
+  <div
+    @click="handleClick()"
+    class="is-clickable"
+  >
     <template v-if="count > 0">
       <span class="dot-primary">
         {{ count }}
       </span>
     </template>
     <template v-else>
-      <span class="dot-primary">
-        +
-      </span>
+      <span class="dot-primary"> + </span>
     </template>
   </div>
 </template>
 
 <script>
 export default {
-  props: ['row', 'countField', 'modalConfig'], 
-  
+  props: ["row", "countField", "modalConfig"],
+
   computed: {
     count() {
       return this.row[this.countField] || 0;
-    }
+    },
   },
-  
+
   methods: {
     handleClick() {
       if (!this.modalConfig) return;
 
       let config = this.$copy(this.modalConfig);
-      
-      this.$emit('open', {
-        name: 'dataevent', 
+
+      this.$emit("open", {
+        name: "dataevent",
         data: {
-          modal: config
-        }
+          modal: config,
+        },
       });
-    }
-  }
-}
-</script>
+    },
+  },
+};
+</script>

app/components/common/CountdownTimer.vue

@@ -1,135 +1,141 @@
 <!-- CountdownTimer.vue -->
 <template>
   <div class="countdown-wrapper">
-    <span v-if="isExpired" class="tag is-danger">
-      {{ isVietnamese ? 'Hết giờ' : 'Expired' }}
+    <span
+      v-if="isExpired"
+      class="tag is-danger"
+    >
+      {{ isVietnamese ? "Hết giờ" : "Expired" }}
     </span>
-    <span v-else class="tag" :class="tagClass">
+    <span
+      v-else
+      class="tag"
+      :class="tagClass"
+    >
       <span class="countdown-text">{{ formattedTime }}</span>
     </span>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
-import { useStore } from '@/stores/index'
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import { useStore } from "@/stores/index";
 
 const props = defineProps({
   dateValue: {
     type: [String, Date],
-    required: true
+    required: true,
   },
   format: {
     type: String,
-    default: 'HH:mm:ss'
-  }
-})
+    default: "HH:mm:ss",
+  },
+});
 
-const store = useStore()
-const { $dayjs } = useNuxtApp()
+const store = useStore();
+const { $dayjs } = useNuxtApp();
 
 const timeRemaining = ref({
   days: 0,
   hours: 0,
   minutes: 0,
-  seconds: 0
-})
+  seconds: 0,
+});
 
-const isExpired = ref(false)
-let intervalId = null
+const isExpired = ref(false);
+let intervalId = null;
 
-const isVietnamese = computed(() => store.lang === 'vi')
+const isVietnamese = computed(() => store.lang === "vi");
 
 const tagClass = computed(() => {
-  const totalSeconds = timeRemaining.value.days * 86400 +
-                      timeRemaining.value.hours * 3600 +
-                      timeRemaining.value.minutes * 60 +
-                      timeRemaining.value.seconds
+  const totalSeconds =
+    timeRemaining.value.days * 86400 +
+    timeRemaining.value.hours * 3600 +
+    timeRemaining.value.minutes * 60 +
+    timeRemaining.value.seconds;
 
-  if (totalSeconds <= 0) return 'is-danger'
-  if (totalSeconds <= 3600) return 'is-warning' // <= 1 hour
-  if (totalSeconds <= 86400) return 'is-info' // <= 1 day
-  return 'is-primary' // > 1 day
-})
+  if (totalSeconds <= 0) return "is-danger";
+  if (totalSeconds <= 3600) return "is-warning"; // <= 1 hour
+  if (totalSeconds <= 86400) return "is-info"; // <= 1 day
+  return "is-primary"; // > 1 day
+});
 
 const formattedTime = computed(() => {
-  const { days, hours, minutes, seconds } = timeRemaining.value
+  const { days, hours, minutes, seconds } = timeRemaining.value;
 
   if (days > 0) {
-    return isVietnamese 
-      ? `${days}d ${hours}h ${minutes}m` 
-      : `${days}d ${hours}h ${minutes}m`
-  }
-  
-  if (hours > 0) {
-    return isVietnamese 
-      ? `${hours}h ${minutes}m ${seconds}s` 
-      : `${hours}h ${minutes}m ${seconds}s`
+    return isVietnamese ? `${days}d ${hours}h ${minutes}m` : `${days}d ${hours}h ${minutes}m`;
   }
 
-  return isVietnamese 
-    ? `${minutes}m ${seconds}s` 
-    : `${minutes}m ${seconds}s`
-})
+  if (hours > 0) {
+    return isVietnamese ? `${hours}h ${minutes}m ${seconds}s` : `${hours}h ${minutes}m ${seconds}s`;
+  }
+
+  return isVietnamese ? `${minutes}m ${seconds}s` : `${minutes}m ${seconds}s`;
+});
 
 const calculateTimeRemaining = () => {
   try {
-    const targetDate = $dayjs(props.dateValue)
-    const now = $dayjs()
+    const targetDate = $dayjs(props.dateValue);
+    const now = $dayjs();
 
     if (now.isAfter(targetDate)) {
-      isExpired.value = true
-      timeRemaining.value = { days: 0, hours: 0, minutes: 0, seconds: 0 }
-      return
+      isExpired.value = true;
+      timeRemaining.value = { days: 0, hours: 0, minutes: 0, seconds: 0 };
+      return;
     }
 
-    isExpired.value = false
-    const diff = targetDate.diff(now, 'second')
+    isExpired.value = false;
+    const diff = targetDate.diff(now, "second");
 
-    const days = Math.floor(diff / 86400)
-    const hours = Math.floor((diff % 86400) / 3600)
-    const minutes = Math.floor((diff % 3600) / 60)
-    const seconds = diff % 60
+    const days = Math.floor(diff / 86400);
+    const hours = Math.floor((diff % 86400) / 3600);
+    const minutes = Math.floor((diff % 3600) / 60);
+    const seconds = diff % 60;
 
-    timeRemaining.value = { days, hours, minutes, seconds }
+    timeRemaining.value = { days, hours, minutes, seconds };
   } catch (error) {
-    console.error('Error calculating countdown:', error)
-    isExpired.value = true
+    console.error("Error calculating countdown:", error);
+    isExpired.value = true;
   }
-}
+};
 
 const startCountdown = () => {
-  calculateTimeRemaining()
+  calculateTimeRemaining();
 
-  if (intervalId) clearInterval(intervalId)
+  if (intervalId) clearInterval(intervalId);
 
   intervalId = setInterval(() => {
-    calculateTimeRemaining()
+    calculateTimeRemaining();
 
     if (isExpired.value && intervalId) {
-      clearInterval(intervalId)
-      intervalId = null
+      clearInterval(intervalId);
+      intervalId = null;
     }
-  }, 1000)
-}
+  }, 1000);
+};
 
-watch(() => props.dateValue, () => {
-  startCountdown()
-}, { deep: true })
+watch(
+  () => props.dateValue,
+  () => {
+    startCountdown();
+  },
+  { deep: true },
+);
 
 onMounted(() => {
-  startCountdown()
-})
+  startCountdown();
+});
 
 onBeforeUnmount(() => {
   if (intervalId) {
-    clearInterval(intervalId)
+    clearInterval(intervalId);
   }
-})
+});
 </script>
 
 <style scoped>
 .countdown-wrapper {
   display: inline-block;
 }
-</style>
+</style>

app/components/common/Editor.vue

@@ -37,7 +37,7 @@ const toolbarOptions = [
   [{ header: [1, 2, 3, 4, 5, 6, false] }],
 
   // ✍️ Định dạng cơ bản
-  ['bold', 'italic', 'underline', 'strike'],
+  ["bold", "italic", "underline", "strike"],
 
   // 🎨 Màu chữ & nền
   [{ color: [] }, { background: [] }],
@@ -46,14 +46,13 @@ const toolbarOptions = [
   [{ align: [] }],
 
   // 📋 Danh sách
-  [{ list: 'ordered' }, { list: 'bullet' }],
+  [{ list: "ordered" }, { list: "bullet" }],
 
   // 🔗 Media
-  ['link', 'image', 'video'],
-
-  ['clean'], // Xóa định dạng
-]
+  ["link", "image", "video"],
 
+  ["clean"], // Xóa định dạng
+];
 
 var content = props.text;
 

app/components/common/InputEmail.vue

@@ -1,37 +1,43 @@
 <template>
-   <div class="control has-icons-left">
-  <input :class="`input ${error? 'is-danger' : ''} ${disabled? 'has-text-black' : ''}`" type="text" 
-  :placeholder="placeholder || ''" v-model="value" @keyup="doCheck" :disabled="disabled || false">
-  <span class="icon is-left">
-    <SvgIcon v-bind="{name: 'email.svg', type: 'gray', size: 21}"></SvgIcon>
-  </span>
-</div>
+  <div class="control has-icons-left">
+    <input
+      :class="`input ${error ? 'is-danger' : ''} ${disabled ? 'has-text-black' : ''}`"
+      type="text"
+      :placeholder="placeholder || ''"
+      v-model="value"
+      @keyup="doCheck"
+      :disabled="disabled || false"
+    />
+    <span class="icon is-left">
+      <SvgIcon v-bind="{ name: 'email.svg', type: 'gray', size: 21 }"></SvgIcon>
+    </span>
+  </div>
 </template>
 <script>
 export default {
-  props: ['record', 'attr', 'placeholder', 'disabled'],
+  props: ["record", "attr", "placeholder", "disabled"],
   data() {
     return {
-      value: this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined,
-      error: undefined
-    }
+      value: this.record[this.attr] ? this.$copy(this.record[this.attr]) : undefined,
+      error: undefined,
+    };
   },
   watch: {
-    record: function(newVal) {
-      this.value = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
-    }
+    record: function (newVal) {
+      this.value = this.record[this.attr] ? this.$copy(this.record[this.attr]) : undefined;
+    },
   },
   methods: {
     doCheck() {
-      if(this.$empty(this.value)) {
-        this.value = undefined
-        this.error = false
-        return this.$emit('email', null)
+      if (this.$empty(this.value)) {
+        this.value = undefined;
+        this.error = false;
+        return this.$emit("email", null);
       }
-      let check = this.$errEmail(this.value)
-      this.error = check? true : false
-      this.$emit('email', this.value)
-    }
-  }
-}
-</script>
+      let check = this.$errEmail(this.value);
+      this.error = check ? true : false;
+      this.$emit("email", this.value);
+    },
+  },
+};
+</script>

app/components/common/InputPhone.vue

@@ -10,7 +10,7 @@
       autocomplete="tel"
     />
     <span class="icon is-left">
-      <SvgIcon v-bind="{name: 'phone.png', type: 'gray', size: 20}"></SvgIcon>
+      <SvgIcon v-bind="{ name: 'phone.png', type: 'gray', size: 20 }"></SvgIcon>
     </span>
   </div>
 </template>

app/components/common/Note.vue

@@ -1,27 +1,36 @@
 <template>
   <div class="field">
     <div class="control">
-      <textarea v-model="record.note" class="textarea" name="note" placeholder="" rows="8"></textarea>
+      <textarea
+        v-model="record.note"
+        class="textarea"
+        name="note"
+        placeholder=""
+        rows="8"
+      ></textarea>
     </div>
   </div>
   <div class="mt-4">
-    <button class="button is-primary has-text-white" @click="save()">
-      {{ $store.lang==='vi'? 'Lưu lại' : 'Save' }}
+    <button
+      class="button is-primary has-text-white"
+      @click="save()"
+    >
+      {{ $store.lang === "vi" ? "Lưu lại" : "Save" }}
     </button>
   </div>
 </template>
 <script setup>
-  const emit = defineEmits(["close"])
-  const { $store, $getdata, $updateapi, $updatepage } = useNuxtApp();
-  const props = defineProps({
-    row: Object,
-    pagename: String
-  })
-  var record = await $getdata('application', {id: props.row.id}, undefined, true)
-  async function save()  {
-    await $updateapi('application', record)
-    record = await $getdata('application', {id: props.row.id}, undefined, true)
-    $updatepage(props.pagename, record)
-    emit('close')
-  }
-</script>
+const emit = defineEmits(["close"]);
+const { $store, $getdata, $updateapi, $updatepage } = useNuxtApp();
+const props = defineProps({
+  row: Object,
+  pagename: String,
+});
+var record = await $getdata("application", { id: props.row.id }, undefined, true);
+async function save() {
+  await $updateapi("application", record);
+  record = await $getdata("application", { id: props.row.id }, undefined, true);
+  $updatepage(props.pagename, record);
+  emit("close");
+}
+</script>

app/components/common/NoteInfo.vue

@@ -1,19 +1,25 @@
 <template>
   <div>
     <template v-if="data">
-      <article class="message is-findata" v-if="data.length===0">
-        <div class="message-body py-2 fs-16">
-          Chưa có <b>ghi chú</b> nào được lưu
-        </div>
+      <article
+        class="message is-findata"
+        v-if="data.length === 0"
+      >
+        <div class="message-body py-2 fs-16">Chưa có <b>ghi chú</b> nào được lưu</div>
       </article>
       <template v-else>
-        <article class="media mt-0 mb-0" v-for="(v,i) in data">
+        <article
+          class="media mt-0 mb-0"
+          v-for="(v, i) in data"
+        >
           <figure class="media-left">
-            <Avatarbox v-bind="{ 
-              text: v.user__fullname[0].toUpperCase(), 
-              size: 'two', 
-              type: 'primary' 
-            }" />
+            <Avatarbox
+              v-bind="{
+                text: v.user__fullname[0].toUpperCase(),
+                size: 'two',
+                type: 'primary',
+              }"
+            />
           </figure>
           <div class="media-content">
             <div>
@@ -22,14 +28,20 @@
               </p>
               <p class="mt-1 fs-14 has-text-grey">
                 <span class="icon-text">
-                  <span>{{v.user__fullname}}</span>
-                  <span class="ml-3">{{ $dayjs(v['create_time']).fromNow(true) }}</span>
-                  <template v-if="login.id===v.user">
-                    <a class="ml-3" @click="edit(v)">
-                      <SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 20}"></SvgIcon>
+                  <span>{{ v.user__fullname }}</span>
+                  <span class="ml-3">{{ $dayjs(v["create_time"]).fromNow(true) }}</span>
+                  <template v-if="login.id === v.user">
+                    <a
+                      class="ml-3"
+                      @click="edit(v)"
+                    >
+                      <SvgIcon v-bind="{ name: 'pen1.svg', type: 'gray', size: 20 }"></SvgIcon>
                     </a>
-                    <a class="ml-3" @click="askConfirm(v, i)">
-                      <SvgIcon v-bind="{name: 'bin.svg', type: 'gray', size: 20}"></SvgIcon>
+                    <a
+                      class="ml-3"
+                      @click="askConfirm(v, i)"
+                    >
+                      <SvgIcon v-bind="{ name: 'bin.svg', type: 'gray', size: 20 }"></SvgIcon>
                     </a>
                   </template>
                 </span>
@@ -39,87 +51,126 @@
         </article>
       </template>
     </template>
-    <div v-if="$getEditRights()" class="field is-grouped mt-3">
+    <div
+      v-if="$getEditRights()"
+      class="field is-grouped mt-3"
+    >
       <div class="control is-expanded">
-        <textarea class="textarea" rows="2" placeholder="Viết ghi chú tại đây" v-model="detail"></textarea>
+        <textarea
+          class="textarea"
+          rows="2"
+          placeholder="Viết ghi chú tại đây"
+          v-model="detail"
+        ></textarea>
       </div>
       <div class="control">
-        <button class="button is-primary has-text-white" @click="save()">Lưu</button>
+        <button
+          class="button is-primary has-text-white"
+          @click="save()"
+        >
+          Lưu
+        </button>
       </div>
     </div>
-    <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal" @confirm="confirm()"></Modal>
+    <Modal
+      @close="showmodal = undefined"
+      v-bind="showmodal"
+      v-if="showmodal"
+      @confirm="confirm()"
+    ></Modal>
   </div>
 </template>
 <script>
 export default {
-  props: ['row', 'api', 'pagename'],
+  props: ["row", "api", "pagename"],
   data() {
     return {
       data: undefined,
       detail: undefined,
-      vbind2: {image: undefined, text: 'ABC', size: 'two', type: 'findata'},
+      vbind2: { image: undefined, text: "ABC", size: "two", type: "findata" },
       current: undefined,
       showmodal: undefined,
-      obj: undefined
-    }
+      obj: undefined,
+    };
   },
   async created() {
-    if(!this.row) return 
-    this.data = await this.$getdata(this.api, {ref: this.row.id})
+    if (!this.row) return;
+    this.data = await this.$getdata(this.api, { ref: this.row.id });
   },
   computed: {
     login: {
-      get: function() {return this.$store.login},
-      set: function(val) {this.$store.commit("updateLogin", {login: val})}
-    }
+      get: function () {
+        return this.$store.login;
+      },
+      set: function (val) {
+        this.$store.commit("updateLogin", { login: val });
+      },
+    },
   },
   methods: {
     async save() {
-      if(this.$empty(this.detail)) return this.$snackbar('Chưa nhập nội dung ghi chú')
-      let data = {user: this.$store.login.id, detail: this.detail, ref: this.row.id}
-      if(this.current) {
-        data = this.$copy(this.current)
-        data.detail = this.detail
+      if (this.$empty(this.detail)) return this.$snackbar("Chưa nhập nội dung ghi chú");
+      let data = {
+        user: this.$store.login.id,
+        detail: this.detail,
+        ref: this.row.id,
+      };
+      if (this.current) {
+        data = this.$copy(this.current);
+        data.detail = this.detail;
       }
-      let rs = data.id? await this.$updateapi(this.api, data) : await this.$insertapi(this.api, data)  
-      if(!rs) return
-      this.detail = undefined
-      if(this.current) {
-        this.current = undefined
-        let idx = this.$findIndex(this.data, {id: rs.id})
-        this.$set(this.data, idx, rs)
+      let rs = data.id ? await this.$updateapi(this.api, data) : await this.$insertapi(this.api, data);
+      if (!rs) return;
+      this.detail = undefined;
+      if (this.current) {
+        this.current = undefined;
+        let idx = this.$findIndex(this.data, { id: rs.id });
+        this.$set(this.data, idx, rs);
       } else {
-        this.data.push(rs)
-        let rows = this.$copy(this.$store[this.pagename].data)
-        let idx = this.$findIndex(rows, {id: this.row.id})
-        let copy = this.$copy(this.row)
-        copy.count_note += 1
-        rows[idx] = copy
-        this.$store.commit('updateState', {name: this.pagename, key: 'update', data: {data: rows}})
+        this.data.push(rs);
+        let rows = this.$copy(this.$store[this.pagename].data);
+        let idx = this.$findIndex(rows, { id: this.row.id });
+        let copy = this.$copy(this.row);
+        copy.count_note += 1;
+        rows[idx] = copy;
+        this.$store.commit("updateState", {
+          name: this.pagename,
+          key: "update",
+          data: { data: rows },
+        });
       }
     },
     edit(v) {
-      this.current = this.$copy(v)
-      this.detail = v.detail
+      this.current = this.$copy(v);
+      this.detail = v.detail;
     },
     askConfirm(v, i) {
-      this.obj = {v: v, i: i}
-      this.showmodal = {component: `dialog/Confirm`,vbind: {content: 'Bạn có muốn xóa ghi chú này không?', duration: 10}, 
-      title: 'Xóa ghi chú', width: '500px', height: '100px'}
+      this.obj = { v: v, i: i };
+      this.showmodal = {
+        component: `dialog/Confirm`,
+        vbind: { content: "Bạn có muốn xóa ghi chú này không?", duration: 10 },
+        title: "Xóa ghi chú",
+        width: "500px",
+        height: "100px",
+      };
     },
     async confirm() {
-      let v = this.obj.v
-      let i = this.obj.i
-      let rs = await this.$deleteapi(this.api, v.id)
-      if(rs==='error') return
-      this.$delete(this.data, i)
-      let rows = this.$copy(this.$store[this.pagename].data)
-      let idx = this.$findIndex(rows, {id: this.row.id})
-      let copy = this.$copy(this.row)
-      copy.count_note -= 1
-      rows[idx] = copy
-      this.$store.commit('updateState', {name: this.pagename, key: 'update', data: {data: rows}})
-    }
-  }
-}
-</script>
+      let v = this.obj.v;
+      let i = this.obj.i;
+      let rs = await this.$deleteapi(this.api, v.id);
+      if (rs === "error") return;
+      this.$delete(this.data, i);
+      let rows = this.$copy(this.$store[this.pagename].data);
+      let idx = this.$findIndex(rows, { id: this.row.id });
+      let copy = this.$copy(this.row);
+      copy.count_note -= 1;
+      rows[idx] = copy;
+      this.$store.commit("updateState", {
+        name: this.pagename,
+        key: "update",
+        data: { data: rows },
+      });
+    },
+  },
+};
+</script>

app/components/common/Notebox.vue

@@ -1,18 +1,24 @@
 <template>
-  <span 
-    v-if="row.count_note || $getEditRights()" 
-    class="dot-primary" 
+  <span
+    v-if="row.count_note || $getEditRights()"
+    class="dot-primary"
     @click="doClick()"
-  >{{ row.count_note || '+' }}</span>
+    >{{ row.count_note || "+" }}</span
+  >
 </template>
 <script>
 export default {
-  props: ['row', 'api', 'pagename'],
+  props: ["row", "api", "pagename"],
   methods: {
     doClick() {
-      let obj = {component: 'common/NoteInfo', title: 'Ghi chú', width: '50%', vbind: {row: this.row, api: this.api, pagename: this.pagename}}
-      this.$emit('open', {name: 'dataevent',  data: {modal: obj}})
-    }
-  }
-}
-</script>
+      let obj = {
+        component: "common/NoteInfo",
+        title: "Ghi chú",
+        width: "50%",
+        vbind: { row: this.row, api: this.api, pagename: this.pagename },
+      };
+      this.$emit("open", { name: "dataevent", data: { modal: obj } });
+    },
+  },
+};
+</script>

app/components/common/Phone.vue

@@ -1,54 +1,82 @@
 <template>
   <div>
-    <p class="fsb-30">{{ text }}
-      <a class="ml-3" @click="copy()">
-        <SvgIcon v-bind="{name: 'copy.svg', type: 'primary', size: 24}"></SvgIcon>
+    <p class="fsb-30">
+      {{ text }}
+      <a
+        class="ml-3"
+        @click="copy()"
+      >
+        <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 24 }"></SvgIcon>
       </a>
     </p>
     <p class="buttons mt-4">
-      <button class="button is-primary" @click="call()">Call</button>
-      <button class="button is-primary" @click="sms()">SMS</button>
-      <button class="button is-primary" @click="openZalo()">Zalo</button>
+      <button
+        class="button is-primary"
+        @click="call()"
+      >
+        Call
+      </button>
+      <button
+        class="button is-primary"
+        @click="sms()"
+      >
+        SMS
+      </button>
+      <button
+        class="button is-primary"
+        @click="openZalo()"
+      >
+        Zalo
+      </button>
     </p>
-    <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
+    <Modal
+      @close="showmodal = undefined"
+      v-bind="showmodal"
+      v-if="showmodal"
+    ></Modal>
   </div>
 </template>
 <script>
 export default {
-  props: ['row', 'pagename'],
+  props: ["row", "pagename"],
   data() {
     return {
       text: undefined,
       phone: this.row.customer__phone || this.row.party__phone || this.row.phone,
-      showmodal: undefined
-    }
+      showmodal: undefined,
+    };
   },
   created() {
-    var format = function(s) {
-      return `${s.slice(0,3)} ${s.slice(3,6)} ${s.slice(6, 20)}`
-    }
-    this.text = format(this.phone)
+    var format = function (s) {
+      return `${s.slice(0, 3)} ${s.slice(3, 6)} ${s.slice(6, 20)}`;
+    };
+    this.text = format(this.phone);
   },
   methods: {
     call() {
-      window.open(`tel:${this.phone}`)
+      window.open(`tel:${this.phone}`);
     },
     sms() {
-      window.open(`sms:${this.phone}`)
+      window.open(`sms:${this.phone}`);
     },
     sendSms() {
-      let api = this.row.code.indexOf('CN')>=0? 'customersms' : undefined
-      if(this.row.code.indexOf('LN')>=0) api = 'loansms'
-      else if(this.row.code.indexOf('TS')>=0) api = 'collateralsms'
-      this.showmodal = {component: 'user/Sms', title: 'Nhắn tin SMS', width: '50%', height: '400px', 
-      vbind: {row: this.row, pagename: this.pagename, api: api}}
+      let api = this.row.code.indexOf("CN") >= 0 ? "customersms" : undefined;
+      if (this.row.code.indexOf("LN") >= 0) api = "loansms";
+      else if (this.row.code.indexOf("TS") >= 0) api = "collateralsms";
+      this.showmodal = {
+        component: "user/Sms",
+        title: "Nhắn tin SMS",
+        width: "50%",
+        height: "400px",
+        vbind: { row: this.row, pagename: this.pagename, api: api },
+      };
     },
     copy() {
-      this.$copyToClipboard(this.phone)
+      this.$copyToClipboard(this.phone);
     },
     openZalo() {
-      window.open(`https://zalo.me/${this.phone}`, '_blank')
-    }
-  }
-}
-</script>
+      window.open(`https://zalo.me/${this.phone}`, "_blank");
+    },
+  },
+};
+</script>

app/components/common/ProductCountbox.vue

@@ -1,25 +1,28 @@
-
 <template>
-  <span class="dot-primary" @click="onClick()">{{ row.count_product }}</span>
+  <span
+    class="dot-primary"
+    @click="onClick()"
+    >{{ row.count_product }}</span
+  >
 </template>
 <script>
 // use in Khách hàng -> Giao dịch (<DataView :setting='customer-all-transaction'/>)
 export default {
-  props: ['row', 'api', 'pagename'],
+  props: ["row", "api", "pagename"],
   methods: {
     onClick() {
       const obj = {
-        component: 'common/ProductInfo', 
-        title: 'Sản phẩm',
-        width: '60%',
-        height: '400px',
+        component: "common/ProductInfo",
+        title: "Sản phẩm",
+        width: "60%",
+        height: "400px",
         vbind: {
           row: this.row,
-          pagename: this.pagename
-        }
-      }
-      this.$emit('open', {name: 'dataevent',  data: { modal: obj }})
-    }
-  }
-}
-</script>
+          pagename: this.pagename,
+        },
+      };
+      this.$emit("open", { name: "dataevent", data: { modal: obj } });
+    },
+  },
+};
+</script>

app/components/common/ProductInfo.vue

@@ -1,21 +1,24 @@
 <script setup>
 const props = defineProps({
   row: Object,
-  pagename: String
+  pagename: String,
 });
 const { $id } = useNuxtApp();
 </script>
 <template>
   <div>
-    <DataView v-bind="{
-      setting: 'product-info',
-      pagename: $id(),
-      api: 'product',
-      params: {
-        filter: { prdbk__transaction__customer: props.row.id },
-        // copied from 02-connection.js
-        values: 'price_excluding_vat,prdbk__transaction__txncurrent__detail__status__name,locked_until,note,cart,cart__name,cart__code,cart__dealer,cart__dealer__code,cart__dealer__name,direction,type,zone_type,dealer,link,type__name,dealer__code,dealer__name,prdbk,prdbk__transaction__customer,prdbk__transaction,prdbk__transaction__policy__code,prdbk__transaction__sale_price,prdbk__transaction__discount_amount,prdbk__transaction__code,prdbk__transaction__customer__code,prdbk__transaction__customer__phone,prdbk__transaction__customer__fullname,prdbk__transaction__customer__legal_code,id,code,trade_code,land_lot_code,zone_code,zone_type__name,lot_area,building_area,total_built_area,number_of_floors,land_lot_size,origin_price,direction__name,villa_model,product_type,template_name,project,project__name,status,status__code,status__name,status__color,status__sale_status,status__sale_status__color,create_time,prdbk__transaction__amount_received,prdbk__transaction__amount_remain',
-      }
-    }" />
+    <DataView
+      v-bind="{
+        setting: 'product-info',
+        pagename: $id(),
+        api: 'product',
+        params: {
+          filter: { prdbk__transaction__customer: props.row.id },
+          // copied from 02-connection.js
+          values:
+            'price_excluding_vat,prdbk__transaction__txncurrent__detail__status__name,locked_until,note,cart,cart__name,cart__code,cart__dealer,cart__dealer__code,cart__dealer__name,direction,type,zone_type,dealer,link,type__name,dealer__code,dealer__name,prdbk,prdbk__transaction__customer,prdbk__transaction,prdbk__transaction__policy__code,prdbk__transaction__sale_price,prdbk__transaction__discount_amount,prdbk__transaction__code,prdbk__transaction__customer__code,prdbk__transaction__customer__phone,prdbk__transaction__customer__fullname,prdbk__transaction__customer__legal_code,id,code,trade_code,land_lot_code,zone_code,zone_type__name,lot_area,building_area,total_built_area,number_of_floors,land_lot_size,origin_price,direction__name,villa_model,product_type,template_name,project,project__name,status,status__code,status__name,status__color,status__sale_status,status__sale_status__color,create_time,prdbk__transaction__amount_received,prdbk__transaction__amount_remain',
+        },
+      }"
+    />
   </div>
-</template>
+</template>

app/components/common/QRcode.vue

@@ -1,27 +1,40 @@
 <template>
   <div class="has-text-centered">
     <div class="mb-4">
-      <p v-if="row && row.fullname"><b>{{row.fullname}}</b></p>
+      <p v-if="row && row.fullname">
+        <b>{{ row.fullname }}</b>
+      </p>
     </div>
-    
+
     <div class="mt-2 px-5 is-flex is-justify-content-center">
       <ClientOnly>
         <Qrcode
-          v-if="finalLink" 
-          :key="finalLink" 
+          v-if="finalLink"
+          :key="finalLink"
           id="qrcode"
           :value="finalLink"
           :size="300"
         />
       </ClientOnly>
-      <div v-if="!finalLink" style="width: 300px; height: 300px; border: 1px dashed #ccc; display: flex; align-items: center; justify-content: center; color: #888;">
+      <div
+        v-if="!finalLink"
+        style="
+          width: 300px;
+          height: 300px;
+          border: 1px dashed #ccc;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #888;
+        "
+      >
         Không có dữ liệu để tạo QR Code
       </div>
     </div>
-    
+
     <div class="mt-2 is-flex is-justify-content-center is-gap-1">
-      <a 
-        @click="openLink()" 
+      <a
+        @click="openLink()"
         class="button is-light is-link is-rounded"
         :title="isVietnamese ? 'Mở đường dẫn liên kết' : 'Open external link'"
         v-if="finalLink"
@@ -31,8 +44,8 @@
         </span>
       </a>
 
-      <a 
-        @click="download()" 
+      <a
+        @click="download()"
         class="button is-light is-link is-rounded"
         :title="isVietnamese ? 'Tải Xuống QR Code' : 'Download QR Code'"
         v-if="finalLink"
@@ -45,83 +58,85 @@
   </div>
 </template>
 <script setup>
-  import { computed } from 'vue'
-  import { useStore } from "@/stores/index";
-  
-  const store = useStore();
-  const isVietnamese = computed(() => store.lang === "vi") 
+import { computed } from "vue";
+import { useStore } from "@/stores/index";
 
-  const { $getpath, $snackbar } = useNuxtApp()
-  const props = defineProps({
-    row: Object,
-    link: String
-  })
+const store = useStore();
+const isVietnamese = computed(() => store.lang === "vi");
 
-  const finalLink = computed(() => {
-    if (props.link) {
-      return props.link
-    }
-    if (props.row && props.row.code) {
-      const path = $getpath()
-      const baseUrl = path ? path.replace('api.', '') : '';
-      return `${baseUrl}loan/${props.row.code}`
-    }
-    return ''
-  })
+const { $getpath, $snackbar } = useNuxtApp();
+const props = defineProps({
+  row: Object,
+  link: String,
+});
 
-  function openLink() {
-    if (finalLink.value) {
-      window.open(finalLink.value, "_blank")
-    }
+const finalLink = computed(() => {
+  if (props.link) {
+    return props.link;
+  }
+  if (props.row && props.row.code) {
+    const path = $getpath();
+    const baseUrl = path ? path.replace("api.", "") : "";
+    return `${baseUrl}loan/${props.row.code}`;
+  }
+  return "";
+});
+
+function openLink() {
+  if (finalLink.value) {
+    window.open(finalLink.value, "_blank");
+  }
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function download() {
+  if (!finalLink.value) return;
+
+  let svg = document.getElementById("qrcode");
+  let attempts = 0;
+
+  while (!svg && attempts < 5) {
+    await sleep(100);
+    svg = document.getElementById("qrcode");
+    attempts++;
   }
 
-  function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
+  if (!svg) {
+    console.error("QR Code SVG element not found after waiting.");
+    $snackbar(isVietnamese.value ? "Không tìm thấy mã QR để tải xuống." : "QR Code not found for download.", {
+      type: "is-danger",
+    });
+    return;
   }
 
-  async function download() {
-    if (!finalLink.value) return;
+  const serializer = new XMLSerializer();
+  const svgData = serializer.serializeToString(svg);
+  const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(svgBlob);
 
-    let svg = document.getElementById('qrcode');
-    let attempts = 0;
-    
-    while (!svg && attempts < 5) {
-        await sleep(100);
-        svg = document.getElementById('qrcode');
-        attempts++;
-    }
+  const image = new Image();
+  image.onload = () => {
+    const canvas = document.createElement("canvas");
+    canvas.width = 300;
+    canvas.height = 300;
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(image, 0, 0, 300, 300);
 
-    if (!svg) {
-        console.error("QR Code SVG element not found after waiting.");
-        $snackbar(isVietnamese.value ? 'Không tìm thấy mã QR để tải xuống.' : 'QR Code not found for download.', { type: 'is-danger' });
-        return;
-    }
+    const pngUrl = canvas.toDataURL("image/png");
 
-    const serializer = new XMLSerializer()
-    const svgData = serializer.serializeToString(svg)
-    const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' })
-    const url = URL.createObjectURL(svgBlob)
+    const linkElement = document.createElement("a");
+    linkElement.href = pngUrl;
 
-    const image = new Image()
-    image.onload = () => {
-      const canvas = document.createElement('canvas')
-      canvas.width = 300 
-      canvas.height = 300
-      const ctx = canvas.getContext('2d')
-      ctx.drawImage(image, 0, 0, 300, 300) 
+    const filename = props.row && props.row.code ? `qrcode-${props.row.code}.png` : "qrcode.png";
+    linkElement.download = filename;
+    linkElement.click();
 
-      const pngUrl = canvas.toDataURL('image/png')
-
-      const linkElement = document.createElement('a')
-      linkElement.href = pngUrl
-
-      const filename = props.row && props.row.code ? `qrcode-${props.row.code}.png` : 'qrcode.png'
-      linkElement.download = filename
-      linkElement.click()
-
-      URL.revokeObjectURL(url)
-      $snackbar(isVietnamese.value ? 'Đã tải xuống mã QR!' : 'QR Code downloaded!', { type: 'is-success' });
-    }
-    image.src = url
-  }
-</script>
+    URL.revokeObjectURL(url);
+    $snackbar(isVietnamese.value ? "Đã tải xuống mã QR!" : "QR Code downloaded!", { type: "is-success" });
+  };
+  image.src = url;
+}
+</script>

app/components/common/ViewList.vue

@@ -1,10 +1,13 @@
 <template>
   <div>
-    <DataView v-if="vbind" v-bind="vbind"></DataView>
+    <DataView
+      v-if="vbind"
+      v-bind="vbind"
+    ></DataView>
   </div>
 </template>
 <script>
 export default {
-  props: ['vbind']
-}
-</script>
+  props: ["vbind"],
+};
+</script>