changes

app/components/datatable/DataTable.vue

@@ -1,14 +1,14 @@
 <template>
   <div
     class="field is-grouped is-grouped-multiline is-gap-4 px-2"
-    v-if="filters ? filters.length > 0 : false"
+    v-if="filters?.length > 0"
   >
     <div class="control">
       <a
-        class="button is-primary is-light"
+        class="button is-primary is-light fs-14"
         @click="updateData({ filters: [] })"
       >
-        <span class="fs-14">Xóa lọc</span>
+        Xóa lọc
       </a>
     </div>
     <div class="control">
@@ -103,6 +103,7 @@
               :row="v"
               v-if="field.template"
               @clickevent="clickEvent($event, v, field)"
+              @dynamicCompEvent="onDynamicCompEvent"
             />
             <span v-else>{{ v[field.name] }}</span>
           </td>
@@ -121,7 +122,7 @@
     @confirm="confirmRemove"
     v-bind="showmodal"
     v-if="showmodal"
-  ></Modal>
+  />
 </template>
 <script setup>
 import { createApp } from "vue/dist/vue.esm-bundler.js";
@@ -136,6 +137,7 @@ const {
   $deleterow,
   $empty,
   $find,
+  $getdata,
   $getEditRights,
   $formatNumber,
   $multiSort,
@@ -144,9 +146,10 @@ const {
   $unique,
 } = useNuxtApp();
 const store = useStore();
-var props = defineProps({
+const props = defineProps({
   pagename: String,
 });
+
 function dynamicComponent(htmlString) {
   return defineComponent({
     template: htmlString,
@@ -165,10 +168,14 @@ var currentPage = 1;
 var displayFields = ref([]);
 var displayData = [];
 var pagedata = store[props.pagename];
-var tablesetting = $copy(pagedata.tablesetting || store.tablesetting);
+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;
@@ -183,7 +190,7 @@ var data = $copy(pagedata.data);
 var showmodal = ref();
 watch(
   () => store[props.pagename],
-  (newVal, oldVal) => {
+  () => {
     updateChange();
   },
 );
@@ -204,7 +211,7 @@ const updateShow = function (full_data) {
   const allowedFns = {
     "$getEditRights()": $getEditRights,
   };
-  const arr = pagedata.fields.filter(({ show }) => {
+  const shownFields = pagedata.fields.filter(({ show }) => {
     if (typeof show === "boolean") return show;
     else {
       // show is a string
@@ -213,19 +220,20 @@ const updateShow = function (full_data) {
       return allowedFns[show]?.() || false;
     }
   });
-  if (full_data === false) displayData = $copy(data);
-  else
-    displayData = $copy(
-      data.filter((ele, index) => index >= (currentPage - 1) * perPage && index < currentPage * perPage),
-    );
-  displayData.map((v) => {
-    arr.map((x) => (v[`${x.name}color`] = getStyle(x, v)));
+
+  if (full_data === false) {
+    displayData = $copy(data);
+  } else {
+    displayData = data.filter((ele, index) => index >= (currentPage - 1) * perPage && index < currentPage * perPage);
+  }
+  displayData.forEach((v) => {
+    shownFields.forEach((x) => (v[`${x.name}color`] = getStyle(x, v)));
   });
-  arr.map((v) => {
+  shownFields.forEach((v) => {
     v.headerStyle = getSettingStyle("header", v);
     v.dropStyle = getSettingStyle("dropdown", v);
   });
-  displayFields.value = arr;
+  displayFields.value = shownFields;
   showPagination();
 };
 function confirmRemove() {
@@ -237,11 +245,11 @@ const clickEvent = function (event, row, field) {
   if (name === "remove") {
     currentRow = row;
     showmodal.value = {
-      component: `dialog/Confirm`,
+      component: "dialog/Confirm",
       vbind: { content: "Bạn có muốn xóa bản ghi này không?", duration: 10 },
       title: "Xác nhận",
       width: "500px",
-      height: "100px",
+      height: "auto",
     };
   }
   emit(name, row, field, data);
@@ -269,7 +277,7 @@ const showField = async function (field) {
   }; //$stripHtml(field.label)
 };
 const getStyle = function (field, record) {
-  var stop = false;
+  let stop = false;
   let val = tablesetting.find((v) => v.code === "td-border")
     ? tablesetting.find((v) => v.code === "td-border").detail
     : "border: solid 1px rgb(44, 44, 44); ";
@@ -342,6 +350,117 @@ const getStyle = function (field, record) {
   return val;
 };
 const getSettingStyle = function (name, field) {
+  if (name === "table") {
+    console.log("tablesetting", tablesetting);
+  }
+  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;",
+      },
+    ];
+  }
+
   let value = "";
   if (name === "container") {
     value = "min-height:" + tablesetting.find((v) => v.code === "container-height").detail + "rem; ";
@@ -390,7 +509,7 @@ const frontendFilter = function (newVal) {
     else {
       let text = "";
       filter.map((y, k) => {
-        text += `${k > 0 ? (filter[k - 1].operator === "and" ? " &&" : " ||") : ""} ${$formatNumber(x[name])} 
+        text += `${k > 0 ? (filter[k - 1].operator === "and" ? " &&" : " ||") : ""} ${$formatNumber(x[name])}
               ${y.condition === "=" ? "==" : y.condition === "<>" ? "!==" : y.condition} ${$formatNumber(y.value)}`;
       });
       return $calc(text);
@@ -550,8 +669,15 @@ const doubleClick = function (field, v) {
   currentField = field;
   doSelect(v[field.name]);
 };
-var tableStyle = getSettingStyle("table");
+const tableStyle = getSettingStyle("table");
 setTimeout(() => updateShow(), 200);
+
+async function onDynamicCompEvent(e) {
+  console.log("DataTable received dynamicCompEvent", e);
+  if (e.type === "refresh") {
+    updateShow(); // doesn't get new data
+  }
+}
 </script>
 <style scoped>
 :deep(.table tbody tr:hover td, .table tbody tr:hover th) {