changes

app/components/datatable/DataTable.vue

@@ -28,14 +28,14 @@
       v-for="(v, i) in filters"
       :key="i"
     >
-      <div class="tags has-addons is-marginless">
+      <div class="tags has-addons">
         <a
-          class="tag is-primary is-light is-marginless"
+          class="tag is-primary is-light"
           @click="showCondition(v)"
           >{{ v.label.indexOf(">") >= 0 ? $stripHtml(v.label, 30) : v.label }}</a
         >
         <a
-          class="tag is-delete is-marginless"
+          class="tag is-delete"
           @click="removeFilter(i)"
         ></a>
       </div>
@@ -51,7 +51,7 @@
     </div>
   </div>
   <div
-    class="table-container mb-0"
+    class="table-container rounded mb-0"
     ref="container"
     id="docid"
   >
@@ -124,6 +124,7 @@
       @changepage="changePage"
     />
   </div>
+  <!-- <pre class="fs-12">debug: pagename: {{ pagename }}</pre> -->
   <Modal
     v-if="showmodal"
     v-bind="showmodal"
@@ -145,7 +146,6 @@ const {
   $deleterow,
   $empty,
   $find,
-  $getdata,
   $getEditRights,
   $formatNumber,
   $multiSort,
@@ -180,12 +180,6 @@ let tablesetting = $copy(pagedata.tablesetting || store.tablesetting);
 if (!Array.isArray(tablesetting)) {
   tablesetting = Object.values(tablesetting);
 }
-// console.log("props.pagename", props.pagename);
-// console.log("pagedata.tablesetting", pagedata.tablesetting);
-// console.log("store.tablesetting", store.tablesetting);
-// console.log("tablesetting", tablesetting);
-// var tablesetting = $copy(store.tablesetting);
-// const tablesettingObj = Object.fromEntries(tablesetting.map((v) => [v.code, v]));
 var perPage = Number($find(tablesetting, { code: "per-page" }, "detail")) || 20;
 var filters = $copy(pagedata.filters || []);
 var currentField;
@@ -357,142 +351,56 @@ const getStyle = function (field, record) {
   if (field.maxwidth) val += ` max-width:${field.maxwidth}px; `;
   return val;
 };
+
+const getDetail = (code) => tablesetting.find((v) => v.code === code)?.detail || "";
 const getSettingStyle = function (name, field) {
-  if (!tablesetting || tablesetting.length === 0) {
-    // manual temp fix
-    tablesetting = [
-      {
-        id: 4,
-        code: "per-page",
-        name: "Số dòng trong 1 trang",
-        detail: "20",
-      },
-      {
-        id: 8,
-        code: "header-filter-color",
-        name: "Màu chữ khi áp dụng Filter",
-        detail: "#00cc66",
-      },
-      {
-        id: 10,
-        code: "background",
-        name: "Màu nền background",
-        detail: "#363636",
-      },
-      {
-        id: 11,
-        code: "table-background",
-        name: "Màu nền của bảng",
-        detail: "#ffffff",
-      },
-      {
-        id: 12,
-        code: "table-font-color",
-        name: "Mầu chữ trong bảng",
-        detail: "hsl(0, 0%, 14%)",
-      },
-      {
-        id: 13,
-        code: "table-font-size",
-        name: "Cỡ chữ trong bảng",
-        detail: "12",
-      },
-      {
-        id: 14,
-        code: "header-background",
-        name: "Màu nền tiêu đề",
-        detail: "var(--bulma-primary-soft)",
-      },
-      {
-        id: 15,
-        code: "header-font-color",
-        name: "Màu chữ tiêu đề",
-        detail: "var(--bulma-primary-40)",
-      },
-      {
-        id: 16,
-        code: "header-font-size",
-        name: "Cỡ chữ tiêu đề",
-        detail: "12",
-      },
-      {
-        id: 17,
-        code: "container-height",
-        name: "Chiều cao container",
-        detail: "38",
-      },
-      {
-        id: 18,
-        code: "header-arrow",
-        name: "Mũi tên trỏ xuống",
-        detail: "no",
-      },
-      {
-        id: 19,
-        code: "menu-width",
-        name: "Chiều rộng menu",
-        detail: "20.6",
-      },
-      {
-        id: 20,
-        code: "menu-min-height",
-        name: "Chiều cao menu (nhỏ nhất)",
-        detail: "32",
-      },
-      {
-        id: 21,
-        code: "menu-max-height",
-        name: "Chiều cao menu (lớn nhất)",
-        detail: "37",
-      },
-      {
-        id: 22,
-        code: "show-menu",
-        name: "Hiển thị menu",
-        detail: "yes",
-      },
-      {
-        id: 23,
-        code: "note",
-        name: "Ghi chú",
-        detail: "@",
-      },
-      {
-        id: 24,
-        code: "td-border",
-        name: "Đường viền",
-        detail: "border: 1px solid #dbdbdb;",
-      },
-    ];
+  /** @type {CSSStyleDeclaration} */
+  let styles;
+
+  switch (name) {
+    case "container":
+      styles = {
+        minHeight: `${getDetail("container-height")}rem`,
+      };
+      break;
+    case "table":
+      styles = {
+        fontSize: `${getDetail("table-font-size")}px`,
+        backgroundColor: getDetail("table-background"),
+        color: getDetail("table-font-color"),
+      };
+      break;
+    case "header":
+      styles = {
+        backgroundColor: getDetail("header-background"),
+        borderColor: getDetail("header-border-color"),
+        minWidth: `${field.minwidth}px`,
+        maxWidth: `${field.maxwidth}px`,
+      };
+      break;
+    case "menu":
+      const width = field?.menuwidth || getDetail("menu-width");
+      styles = {
+        overflow: "auto",
+        width: `${width}rem`,
+        minHeight: `${getDetail("menu-min-height")}rem`,
+        maxHeight: `${getDetail("menu-max-height")}rem`,
+      };
+      break;
+    case "dropdown":
+      const isFiltered = filters.find((v) => v.name === field.name);
+
+      styles = {
+        fontSize: `${getDetail("header-font-size")}px`,
+        color: getDetail(isFiltered ? "header-filter-color" : "header-font-color"),
+      };
+    default:
+      break;
   }
 
-  let value = "";
-  if (name === "container") {
-    value = "min-height:" + tablesetting.find((v) => v.code === "container-height").detail + "rem; ";
-  } else if (name === "table") {
-    value += "background-color:" + tablesetting.find((v) => v.code === "table-background").detail + "; ";
-    value += "font-size:" + tablesetting.find((v) => v.code === "table-font-size").detail + "px;";
-    value += "color:" + tablesetting.find((v) => v.code === "table-font-color").detail + "; ";
-  } else if (name === "header") {
-    value += "background-color:" + tablesetting.find((v) => v.code === "header-background").detail + "; ";
-    if (field.minwidth) value += " min-width: " + field.minwidth + "px; ";
-    if (field.maxwidth) value += " max-width: " + field.maxwidth + "px; ";
-  } else if (name === "menu") {
-    let arg = tablesetting.find((v) => v.code === "menu-width").detail;
-    arg = field ? (field.menuwidth ? field.menuwidth : arg) : arg;
-    value += "width:" + arg + "rem; ";
-    value += "min-height:" + tablesetting.find((v) => v.code === "menu-min-height").detail + "rem; ";
-    value += "max-height:" + tablesetting.find((v) => v.code === "menu-max-height").detail + "rem; ";
-    value += "overflow:auto; ";
-  } else if (name === "dropdown") {
-    value += "font-size:" + tablesetting.find((v) => v.code === "header-font-size").detail + "px; ";
-    let found = filters.find((v) => v.name === field.name);
-    found
-      ? (value += "color:" + tablesetting.find((v) => v.code === "header-filter-color").detail + "; ")
-      : (value += "color:" + tablesetting.find((v) => v.code === "header-font-color").detail + "; ");
-  }
-  return value;
+  return styles;
 };
+
 function changePage(page) {
   currentPage = page;
   updateShow();
@@ -628,8 +536,8 @@ const updateData = async function (newVal) {
     //change attribute
     fields = $copy(newVal.columns);
     let _fields = fields.filter((v) => v.show);
-    data.map((v) => {
-      _fields.map((x) => (v[`${x.name}color`] = getStyle(x, v)));
+    data.forEach((v) => {
+      _fields.forEach((x) => (v[`${x.name}color`] = getStyle(x, v)));
     });
     return updateShow();
   }
@@ -647,7 +555,7 @@ const updateData = async function (newVal) {
   } else fields = $copy(pagedata.fields);
   if (newVal.data || newVal.fields) {
     let copy = $copy(newVal.data || data);
-    this.data = $calculateData(copy, fields);
+    data = $calculateData(copy, fields);
     let fields = fields.filter((v) => v.show);
     data.map((v) => {
       fields.map((x) => (v[`${x.name}color`] = getStyle(x, v)));
@@ -678,6 +586,9 @@ const tableStyle = getSettingStyle("table");
 setTimeout(() => updateShow(), 200);
 </script>
 <style scoped>
+th a {
+  color: inherit;
+}
 :deep(.table tbody tr:hover td, .table tbody tr:hover th) {
   --bulma-table-row-hover-background-color: var(--bulma-scheme-main-ter);
   background-color: var(--bulma-table-row-hover-background-color);