changes

app/components/datatable/NewField.vue

@@ -2,10 +2,12 @@
   <div class="tabs is-boxed">
     <ul>
       <li
-        :class="selectType.code === v.code ? 'is-active fs-16' : 'fs-16'"
         v-for="v in fieldType"
+        :class="selectType.code === v.code && 'is-active'"
       >
-        <a @click="selectType = v"
+        <a
+          class="has-text-inherit"
+          @click="selectType = v"
           ><span>{{ v.name }}</span></a
         >
       </li>
@@ -148,7 +150,7 @@
       </div>
     </div>
   </template>
-  <div class="field px-0 mx-0">
+  <div class="field">
     <label class="label">Tên trường <span class="has-text-danger"> * </span> </label>
     <p class="control">
       <input
@@ -166,13 +168,13 @@
       {{ errors.find((v) => v.name === "name").message }}
     </p>
     <p
-      class="help has-text-primary"
+      class="help has-text-grey"
       v-else
     >
       Tên trường do hệ thống tự sinh.
     </p>
   </div>
-  <div class="mt-5">
+  <div class="field">
     <label class="label">Mô tả<span class="has-text-danger"> *</span></label>
     <div class="field has-addons">
       <div class="control is-expanded">
@@ -187,7 +189,12 @@
           class="button"
           @click="editLabel()"
         >
-          <span><SvgIcon v-bind="{ name: 'pen.svg', type: 'dark', size: 17 }"></SvgIcon></span>
+          <span class="icon">
+            <Icon
+              name="material-symbols:edit-outline-rounded"
+              :size="18"
+            />
+          </span>
         </button>
       </div>
     </div>
@@ -199,53 +206,47 @@
     </p>
   </div>
   <div
-    class="field mt-5"
+    class="field"
     v-if="selectType.code === 'empty'"
   >
     <label class="label"
       >Kiểu dữ liệu
       <span class="has-text-danger"> * </span>
     </label>
-    <div class="control fs-14">
-      <span
-        class="mr-4"
+    <div class="control">
+      <button
         v-for="(v, i) in datatype"
+        class="button is-white fs-14"
+        @click="changeType(v)"
       >
-        <a
-          class="icon-text"
-          @click="changeType(v)"
-        >
-          <SvgIcon
-            v-bind="{
-              name: `radio-${radioType.code === v.code ? '' : 'un'}checked.svg`,
-              type: 'gray',
-              size: 22,
-            }"
-          ></SvgIcon>
-        </a>
-        {{ v.name }}
-      </span>
+        <span class="icon">
+          <Icon
+            :name="
+              radioType.code === v.code
+                ? 'material-symbols:radio-button-checked-outline'
+                : 'material-symbols:radio-button-unchecked'
+            "
+            :size="22"
+          />
+        </span>
+        <span>{{ v.name }}</span>
+      </button>
     </div>
   </div>
-  <div class="field mt-5">
-    <p class="control">
-      <a
-        class="button is-primary has-text-white"
-        @click="selectType.code === 'formula' ? createField() : createEmptyField()"
-        >Tạo cột</a
-      >
-    </p>
-  </div>
+  <button
+    class="button is-primary"
+    @click="selectType.code === 'formula' ? createField() : createEmptyField()"
+  >
+    Tạo cột
+  </button>
   <Modal
     v-bind="showmodal"
-    v-if="showmodal"
     @label="changeLabel"
     @close="close"
-  ></Modal>
+  />
 </template>
 <script setup>
 import { useStore } from "@/stores/index";
-import ScrollBox from "~/components/datatable/ScrollBox";
 const emit = defineEmits(["modalevent"]);
 const store = useStore();
 const { $id, $copy, $clone, $empty, $stripHtml, $createField, $calc, $isNumber } = useNuxtApp();
@@ -256,7 +257,7 @@ var props = defineProps({
   filterData: Object,
   width: String,
 });
-const moneyunit = store.moneyunit;
+const moneyunit = store.moneyunit || [];
 const datatype = store.datatype;
 var showmodal = ref();
 var pagedata = store[props.pagename];
@@ -265,16 +266,15 @@ var data = [];
 var current = 1;
 var filterData = [];
 var loading = false;
-var fieldType = [
+const fieldType = [
   { code: "formula", name: "Tạo công thức" },
   { code: "empty", name: "Tạo cột rỗng" },
 ];
-var errors = [];
 var tags = [];
 var formula = undefined;
 var name = `f${$id().toLocaleLowerCase()}`;
 var label = undefined;
-var errors = [];
+const errors = ref([]);
 var selectType = fieldType.find((v) => v.code === "empty");
 var radioType = ref(datatype.find((v) => v.code === "string"));
 var fields = [];
@@ -362,25 +362,25 @@ function checkFunc() {
   return error ? "error" : content;
 }
 function checkValid() {
-  errors = [];
+  errors.value = [];
   if (tags.length === 0 && choice === "column") {
-    errors.push({
+    errors.value.push({
       name: "tags",
       message: "Chưa chọn trường xây dựng công thức.",
     });
   }
   if (!$empty(formula) ? $empty(formula.trim()) : true) {
-    errors.push({ name: "formula", message: "Công thức không được bỏ trống." });
+    errors.value.push({ name: "formula", message: "Công thức không được bỏ trống." });
   }
   if (!$empty(label) ? $empty(label.trim()) : true)
-    errors.push({ name: "label", message: "Mô tả không được bỏ trống." });
+    errors.value.push({ name: "label", message: "Mô tả không được bỏ trống." });
   else if (pagedata.fields.find((v) => v.label.toLowerCase() === label.toLowerCase())) {
-    errors.push({
+    errors.value.push({
       name: "label",
       message: "Mô tả bị trùng. Hãy đặt mô tả khác.",
     });
   }
-  if (errors.length > 0) return false;
+  if (errors.value.length > 0) return false;
   //check formula in case use column
   if (choice === "column") {
     let val = $copy(formula);
@@ -391,20 +391,20 @@ function checkValid() {
     try {
       let value = $calc(val);
       if (isNaN(value) || value === Number.POSITIVE_INFINITY || value === Number.NEGATIVE_INFINITY) {
-        errors.push({ name: "formula", message: "Công thức không hợp lệ" });
+        errors.value.push({ name: "formula", message: "Công thức không hợp lệ" });
       }
     } catch (err) {
       console.log(err);
-      errors.push({ name: "formula", message: "Công thức không hợp lệ" });
+      errors.value.push({ name: "formula", message: "Công thức không hợp lệ" });
     }
   } else {
     if (checkFunc() === "error")
-      errors.push({
+      errors.value.push({
         name: "formula",
         message: `Hàm ${func.toUpperCase()} không hợp lệ`,
       });
   }
-  return errors.length > 0 ? false : true;
+  return errors.value.length > 0 ? false : true;
 }
 function createField() {
   if (!checkValid()) return;
@@ -429,23 +429,26 @@ function createField() {
   emit("close");
 }
 function createEmptyField() {
-  errors = [];
-  if (!$empty(name) ? $empty(name.trim()) : true) errors.push({ name: "name", message: "Tên không được bỏ trống." });
+  console.log("createEmptyField");
+  errors.value = [];
+  if (!$empty(name) ? $empty(name.trim()) : true)
+    errors.value.push({ name: "name", message: "Tên không được bỏ trống." });
   else if (pagedata.fields.find((v) => v.name.toLowerCase() === name.toLowerCase())) {
-    errors.push({
+    errors.value.push({
       name: "name",
       message: "Tên trường bị trùng. Hãy đặt tên khác.",
     });
   }
   if (!$empty(label) ? $empty(label.trim()) : true)
-    errors.push({ name: "label", message: "Mô tả không được bỏ trống." });
+    errors.value.push({ name: "label", message: "Mô tả không được bỏ trống." });
   else if (pagedata.fields.find((v) => v.label.toLowerCase() === label.toLowerCase())) {
-    errors.push({
+    errors.value.push({
       name: "label",
       message: "Mô tả bị trùng. Hãy đặt mô tả khác.",
     });
   }
-  if (errors.length > 0) return;
+  console.log("errors", errors);
+  if (errors.value.length > 0) return;
   let field = $createField(name.trim(), label.trim(), radioType.value.code, true);
   if (selectType.code === "chart") field = createChartField();
   let copy = $clone(pagedata);
@@ -453,6 +456,7 @@ function createEmptyField() {
   copy.update = { fields: copy.fields };
   store.commit(props.pagename, copy);
   //pagedata = copy
+  console.log("field", field);
   emit("newfield", field);
   label = undefined;
   name = `f${$id()}`;