changes

app/components/common/InputNumber.vue

@@ -47,7 +47,7 @@ export default {
     }
   },
   watch: {
-    record: function (newVal) {
+    record() {
       this.value = this.$numtoString(this.record[this.attr]);
     },
   },

app/components/common/NoteInfo.vue

@@ -99,10 +99,10 @@ export default {
   },
   computed: {
     login: {
-      get: function () {
+      get() {
         return this.$store.login;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateLogin", { login: val });
       },
     },

app/components/datatable/CreateTemplate.vue

@@ -517,11 +517,11 @@ const initData = function () {
   condition = conditions.find((v) => v.code === "no");
 };
 /*watch: {
-    expression: function(newVal) {
+    expression(newVal) {
       if($empty(newVal)) return
       elsecheckExpression()
     },
-    tab: function(newVal, oldVal) {
+    tab(newVal, oldVal) {
       if(oldVal===undefined) return
       if(newVal.code==='template') {
         let value = '<div>'

app/components/datatable/DataTable.vue

@@ -110,17 +110,17 @@
       </tbody>
     </table>
     <DatatablePagination
-      v-bind="{ data: data, perPage: perPage }"
-      @changepage="changePage"
       v-if="showPaging"
-    ></DatatablePagination>
+      v-bind="{ data, perPage }"
+      @changepage="changePage"
+    />
   </div>
   <Modal
+    v-if="showmodal"
+    v-bind="showmodal"
     @close="close"
     @selected="doSelect"
     @confirm="confirmRemove"
-    v-bind="showmodal"
-    v-if="showmodal"
   />
 </template>
 <script setup>

app/components/datatable/FilterOption.vue

@@ -169,33 +169,33 @@ export default {
       this.tagsField.push(this.pageData.fields.find((v) => v.name === this.field.name));
   },
   watch: {
-    expression: function (newVal) {
+    expression(newVal) {
       if (this.$empty(newVal)) return;
       else this.changeStyle();
     },
   },
   computed: {
     colorscheme: {
-      get: function () {
+      get() {
-        return this.$store.state.colorscheme;
+        return this.$store.colorscheme;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateColorScheme", { colorscheme: val });
       },
     },
     pageData: {
-      get: function () {
+      get() {
-        return this.$store.state[this.pagename];
+        return this.$store[this.pagename];
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateStore", { name: this.pagename, data: val });
       },
     },
     colorchoice: {
-      get: function () {
+      get() {
-        return this.$store.state.colorchoice;
+        return this.$store.colorchoice;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateColorChoice", { colorchoice: val });
       },
     },

app/components/datatable/TimeOption.vue

@@ -295,7 +295,7 @@ export default {
   },
 
   computed: {
-    lang: function () {
+    lang() {
       return this.store.lang;
     },
   },

app/components/datepicker/EventDetail.vue

@@ -133,13 +133,13 @@ export default {
     this.showDate();
   },
   watch: {
-    date: function (newVal) {
+    date(newVal) {
       if (newVal) this.showDate();
     },
-    vmonth: function (newVal) {
+    vmonth() {
       this.showDate();
     },
-    events: function (newVal) {
+    events() {
       this.showDate();
     },
   },

app/components/datepicker/EventSummary.vue

@@ -142,10 +142,10 @@ export default {
     this.showDate();
   },
   watch: {
-    date: function (newVal) {
+    date(newVal) {
       if (newVal) this.showDate();
     },
-    events: function (newVal) {
+    events(newVal) {
       this.showDate();
     },
   },

app/components/dialog/ApprovalCode.vue

@@ -46,10 +46,10 @@ export default {
   },
   computed: {
     approvalcode: {
-      get: function () {
+      get() {
         return this.$store.state["approvalcode"];
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateStore", { name: "approvalcode", data: val });
       },
     },

app/components/dialog/Delete.vue

@@ -1,20 +1,21 @@
 <template>
   <div>
-    <p v-html="content"></p>
+    <div class="block">
-    <p class="border-bottom mt-4 mb-5"></p>
+      <p v-html="content"></p>
-    <div class="field is-grouped">
+    </div>
-      <div class="control is-expanded">
+    <div class="is-flex">
+      <div class="buttons mb-0">
         <button
           class="button is-danger"
-          @click="remove()"
+          @click="remove"
         >
           Đồng ý
         </button>
         <button
-          class="button is-dark ml-5"
+          class="button is-white"
-          @click="cancel()"
+          @click="cancel"
         >
-          Hủy bỏ
+          Hủy
         </button>
       </div>
       <div
@@ -22,9 +23,9 @@
         v-if="duration"
       >
         <CountDown
-          v-bind="{ duration: duration }"
+          :duration="duration"
-          @close="cancel()"
+          @close="cancel"
-        ></CountDown>
+        />
       </div>
     </div>
   </div>
@@ -38,7 +39,7 @@ export default {
     },
     async remove() {
       let pagename = this.vbind.pagename;
-      let pagedata = this.$store.state[pagename];
+      let pagedata = this.$store[pagename];
       let name = pagedata.origin_api.name || this.vbind.api;
       let id = this.vbind.row.id;
       let result;
@@ -50,7 +51,7 @@ export default {
       if (result === "error") return this.$dialog("Đã xảy ra lỗi, xóa dữ liệu thất bại", "Lỗi", "Error");
       this.$snackbar("Dữ liệu đã được xoá khỏi hệ thống", "Success");
       let arr = Array.isArray(id) ? id : [{ id: id }];
-      let copy = this.$copy(this.$store.state[pagename].data);
+      let copy = this.$copy(this.$store[pagename].data);
       arr.map((x) => {
         let index = copy.findIndex((v) => v.id === x.id);
         index >= 0 ? this.$delete(copy, index) : false;

app/components/media/FileList.vue

@@ -40,10 +40,10 @@ export default {
   },
   computed: {
     pagedata: {
-      get: function () {
+      get() {
         return this.$store.state[this.pagename1];
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateStore", { name: this.pagename1, data: val });
       },
     },

app/components/media/ImageShow.vue

@@ -72,10 +72,10 @@ export default {
   },
   computed: {
     viewport: {
-      get: function () {
+      get() {
-        return this.$store.state.viewport;
+        return this.$store.viewport;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateViewPort", { viewport: val });
       },
     },

app/components/media/Imagebox.vue

@@ -295,7 +295,7 @@ export default {
         { name: "image", icon: "material-symbols:grid-view-outline-rounded" },
       ],
       timer: undefined,
-      vbind: { api: "file", setting: "image-fields" },
+      vbind: { api: "file", setting: "image-fields", pagename: "image-fields" },
       dataFiles: [],
       files: [],
       docid: this.$id(),
@@ -314,7 +314,7 @@ export default {
     this.data = result[0].data.rows;
   },
   watch: {
-    data: function () {
+    data() {
       this.group = [];
       for (let index = 0; index < this.data.length / (this.type === "video" ? 4 : 5); index++) {
         this.group.push(index);
@@ -323,18 +323,18 @@ export default {
   },
   computed: {
     login: {
-      get: function () {
+      get() {
         return this.$store.login;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateLogin", { login: val });
       },
     },
     media: {
-      get: function () {
+      get() {
         return this.$store.media;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateMedia", { media: val });
       },
     },

app/components/menu/MenuFile.vue

@@ -1,71 +1,84 @@
 <template>
   <div>
-    <b-tooltip
+    <button
-      label="Mở file"
+      @click="openFile(row)"
-      position="is-left"
+      class="button is-small is-ghost"
-      type="is-link"
     >
-      <a
+      <span class="icon">
-        class="mr-3"
+        <Icon
-        @click="openFile(row)"
+          name="material-symbols:open-in-new-rounded"
-      >
+          :size="18"
-        <SvgIcon v-bind="{ name: 'open.svg', type: 'dark', size: 16 }"></SvgIcon>
+        />
-      </a>
+      </span>
-    </b-tooltip>
+    </button>
-    <!-- <b-tooltip label="Tải xuống" position="is-left" type="is-link">
+    <button
-      <a class="mr-3" @click="download(row)">
+      @click="download(row)"
-        <SvgIcon v-bind="{name: 'download1.svg', type: 'dark', size: 16}"></SvgIcon>
+      class="button is-small is-ghost"
-      </a>
-    </b-tooltip> -->
-    <b-tooltip
-      label="Xóa"
-      position="is-left"
-      type="is-danger"
-      v-if="disable ? !disable.delete : true"
     >
-      <a @click="remove()">
+      <span class="icon">
-        <SvgIcon v-bind="{ name: 'bin1.svg', type: 'dark', size: 16 }"></SvgIcon>
+        <Icon
-      </a>
+          name="material-symbols:download-rounded"
-    </b-tooltip>
+          :size="18"
+        />
+      </span>
+    </button>
+    <button
+      @click="remove"
+      class="button is-small is-ghost"
+    >
+      <span class="icon">
+        <Icon
+          name="material-symbols:delete-outline-rounded"
+          :size="18"
+          class="has-text-danger"
+        />
+      </span>
+    </button>
+    <Modal
+      v-if="showModal"
+      v-bind="showModal"
+      @close="showModal = undefined"
+    />
   </div>
 </template>
-<script>
+<script setup>
-export default {
+import Modal from "~/components/Modal.vue";
-  props: ["api", "pagename", "row", "disable"],
+
-  methods: {
+const { $getpath } = useNuxtApp();
-    async openFile(row) {
+
-      const url = `${this.$getpath()}static/files/${row.file__file || row.file}`;
+const showModal = ref();
-      window.open(url, "_blank");
+const props = defineProps(["api", "pagename", "row", "disable"]);
+const emit = defineEmits(["open"]);
+
+async function openFile(row) {
+  const url = `${$getpath()}static/files/${row.file__file || row.file}`;
+  window.open(url, "_blank");
+}
+
+async function download(row) {
+  const url = `${$getpath()}static/files/${row.file__file || row.file}`;
+  const link = document.createElement("a");
+  link.href = url;
+  link.target = "_blank";
+  link.setAttribute("download", row.file);
+  link.click();
+}
+
+function remove() {
+  showModal.value = {
+    component: "dialog/Delete",
+    title: "Xóa file",
+    width: "500px",
+    height: "auto",
+    vbind: {
+      content: `Bạn có muốn xóa file <b>${props.row.name}</b> không?`,
+      duration: 10,
+      vbind: {
+        row: props.row,
+        api: props.api,
+        pagename: props.pagename,
+      },
     },
-    async downloadFile(url, fileName) {
+  };
-      // const response = await fetch(url, { method: "GET" });
+}
-      // const blob = await response.blob();
-      const urlDownload = url; //window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = urlDownload;
-      link.setAttribute("download", fileName);
-      link.click();
-    },
-    async download(row) {
-      let url = `${this.$getpath()}static/files/${row.file__file || row.file}`;
-      await this.downloadFile(url, row.file__file || row.file);
-    },
-    remove() {
-      let text = "Bạn có muốn xóa file <b>#file</b> không?";
-      text = text.replace("#file", this.row.file__name);
-      let obj = {
-        component: "dialog/Delete",
-        title: this.$store.lang === "en" ? "Delete file" : "Xóa file",
-        width: "500px",
-        height: "100px",
-        vbind: {
-          content: text,
-          duration: 10,
-          vbind: { row: this.row, api: this.api, pagename: this.pagename },
-        },
-      };
-      this.$emit("open", { name: "dataevent", data: { modal: obj } });
-    },
-  },
-};
 </script>

app/components/parameter/ImportData.vue

@@ -180,10 +180,10 @@ export default {
   },
   computed: {
     pagedata: {
-      get: function () {
+      get() {
         return this.$store[this.pagename];
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit(this.pagename, val);
       },
     },

app/components/parameter/ImportSetting.vue

@@ -102,26 +102,26 @@ export default {
   },
   computed: {
     pagedata1: {
-      get: function () {
+      get() {
         return this.$store[this.pagename1];
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit(this.pagename1, val);
       },
     },
     pagedata2: {
-      get: function () {
+      get() {
         return this.$store[this.pagename2];
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit(this.pagename2, val);
       },
     },
     pagedata3: {
-      get: function () {
+      get() {
         return this.$store[this.pagename3];
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit(this.pagename3, val);
       },
     },

app/components/user/NewUser.vue

@@ -187,50 +187,50 @@ export default {
   },
   computed: {
     common: {
-      get: function () {
+      get() {
-        return this.$store.state.common;
+        return this.$store.common;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateCommon", { common: val });
       },
     },
     registermethod: {
-      get: function () {
+      get() {
-        return this.$store.state.registermethod;
+        return this.$store.registermethod;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateRegisterMethod", { registermethod: val });
       },
     },
     authmethod: {
-      get: function () {
+      get() {
-        return this.$store.state.authmethod;
+        return this.$store.authmethod;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateAuthMethod", { authmethod: val });
       },
     },
     authstatus: {
-      get: function () {
+      get() {
-        return this.$store.state.authstatus;
+        return this.$store.authstatus;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateAuthStatus", { authstatus: val });
       },
     },
     usertype: {
-      get: function () {
+      get() {
-        return this.$store.state.usertype;
+        return this.$store.usertype;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateUserType", { usertype: val });
       },
     },
     dialog: {
-      get: function () {
+      get() {
-        return this.$store.state["dialog"];
+        return this.$store.dialog;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateStore", { name: "dialog", data: val });
       },
     },

app/plugins/01-common.js

@@ -18,6 +18,7 @@ dayjs.locale("vi");
 export default defineNuxtPlugin((nuxtApp) => {
   const route = useRoute();
   const { $id, $empty, $store } = nuxtApp;
+
   const dialog = function (content, title, type, duration, width, height, vbind) {
     content = typeof content === "string" ? content : JSON.stringify(content);
     const vtitle =