changes

2026-05-14 09:11:18 +07:00
parent 336c8c9036
commit 4d37397ee4
25 changed files with 450 additions and 209 deletions
--- a/app/components/datatable/ContextMenu.vue
+++ b/app/components/datatable/ContextMenu.vue
@@ -174,7 +174,7 @@
      >
        <span class="icon">
          <Icon
-            name="material-symbols:menu-rounded"
+            name="material-symbols:view-column-outline-rounded"
            :size="22"
          />
        </span>
@@ -223,18 +223,18 @@
    </p>
    <p class="control">
      <button
-        class="button is-light is-primary"
+        class="button is-primary"
        @click="saveSetting()"
      >
        <span class="icon">
          <Icon
-            name="material-symbols:save-outline-rounded"
+            name="material-symbols:save-rounded"
            :size="22"
          />
        </span>
      </button>
      <span
-        class="tooltiptext"
+        class="tooltiptext has-background-primary has-text-white"
        style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
        >Lưu thiết lập</span
      >
@@ -254,7 +254,7 @@
        :class="selectTab.code === v.code ? 'is-active' : 'has-text-primary'"
        @click="changeTab(v)"
      >
-        <a class="px-8 py-1.5 fs-14">{{ v.name }}</a>
+        <a class="px-12 py-1.5 fs-14">{{ v.name }}</a>
      </li>
    </ul>
  </div>
@@ -387,21 +387,17 @@
              </span>
              <span>{{ v.name }}</span>
            </button>
+            <button
+              v-if="radioTemplate === 'option'"
+              class="button is-primary is-light fs-14 ml-2"
+              @click="showSidebar()"
+            >
+              {{ currentField.template ? "Sửa" : "Tạo" }} định dạng
+            </button>
          </div>
        </div>
      </div>
    </div>
-    <p
-      class="mt-3"
-      v-if="radioTemplate === 'option'"
-    >
-      <button
-        class="button is-primary is-light fs-14"
-        @click="showSidebar()"
-      >
-        {{ `${currentField.template ? "Sửa" : "Tạo"} định dạng` }}
-      </button>
-    </p>
  </div>
  <div v-else-if="currentTab === 'value'">
    <ScrollBox
@@ -563,7 +559,7 @@ function editLabel() {
    component: "datatable/EditLabel",
    title: "Điều chỉnh tiêu đề",
    width: "500px",
-    height: "300px",
+    height: "auto",
    vbind: { label },
  };
 }
@@ -621,7 +617,7 @@ const showSidebar = function () {
      pagename: props.pagename,
    },
    width: "850px",
-    height: "700px",
+    height: "600px",
    title: title,
  };
 };
--- a/app/components/datatable/DataTable.vue
+++ b/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) {
--- a/app/components/datatable/FormatOption.vue
+++ b/app/components/datatable/FormatOption.vue
@@ -219,20 +219,20 @@
    </p>
  </template>
  <TableOption
-    v-bind="{ pagename: pagename }"
+    v-bind="{ pagename }"
    v-else-if="sideBar === 'option'"
  >
  </TableOption>
  <CreateTemplate
    v-else-if="sideBar === 'template'"
-    v-bind="{ pagename: pagename, field: openField }"
+    v-bind="{ pagename, field: openField }"
  >
  </CreateTemplate>
 </template>
 <script setup>
-//  FilterOption: () => import("@/components/datatable/FilterOption"),
-//  TableOption: () => import("@/components/datatable/TableOption"),
-//CreateTemplate: () => import("@/components/datatable/CreateTemplate")
+// FilterOption: () => import("@/components/datatable/FilterOption"),
+// TableOption: () => import("@/components/datatable/TableOption"),
+// CreateTemplate: () => import("@/components/datatable/CreateTemplate")
 import CreateTemplate from "~/components/datatable/CreateTemplate";
 const { $id, $copy, $empty, $stripHtml } = useNuxtApp();
 var props = defineProps({
@@ -323,5 +323,4 @@ const doConditionFilter = function (v, type, id) {
  $emit("modalevent", { name: "updatefields", data: copy });
 };
 initData();
-console.log(sideBar);
 </script>
--- a/app/components/datatable/NewField.vue
+++ b/app/components/datatable/NewField.vue
@@ -14,22 +14,29 @@
    </ul>
  </div>
  <template v-if="selectType.code === 'formula'">
-    <b-radio
-      :class="i === 1 ? 'ml-5' : null"
-      v-model="choice"
-      v-for="(v, i) in choices"
-      :key="i"
-      :native-value="v.code"
-    >
-      <span :class="v.code === choice ? 'fsb-16' : 'fs-16'">{{ v.name }}</span>
-    </b-radio>
-    <div class="has-background-light mt-3 px-3 py-3">
+    <div class="control is-flex is-gap-2">
+      <label
+        v-for="(v, i) in choices"
+        :key="i"
+        class="radio"
+      >
+        <input
+          v-model="choice"
+          :value="v.code"
+          @input="changeType(v)"
+          type="radio"
+          name="choice"
+        />
+        {{ v.name }}
+      </label>
+    </div>
+    <div class="has-background-white-bis mt-3 p-3 rounded-md">
      <div
-        class="tags are-medium mb-0"
+        class="tags mb-0"
        v-if="choice === 'function'"
      >
        <span
-          :class="`tag ${func === v.code ? 'is-primary' : 'is-dark'} is-rounded is-clickable`"
+          :class="`tag is-primary ${func !== v.code && 'is-light'} fs-13 is-rounded is-clickable`"
          v-for="(v, i) in funcs"
          :key="i"
          @click="changeFunc(v)"
@@ -285,7 +292,7 @@ var choices = [
  { code: "column", name: "Dùng cột dữ liệu" },
  { code: "function", name: "Dùng hàm số" },
 ];
-var choice = "column";
+const choice = ref("column");
 var funcs = [
  { code: "sum", name: "Sum" },
  { code: "max", name: "Max" },
@@ -363,7 +370,7 @@ function checkFunc() {
 }
 function checkValid() {
  errors.value = [];
-  if (tags.length === 0 && choice === "column") {
+  if (tags.length === 0 && choice.value === "column") {
    errors.value.push({
      name: "tags",
      message: "Chưa chọn trường xây dựng công thức.",
@@ -382,7 +389,7 @@ function checkValid() {
  }
  if (errors.value.length > 0) return false;
  //check formula in case use column
-  if (choice === "column") {
+  if (choice.value === "column") {
    let val = $copy(formula);
    tags.forEach((v) => {
      let myRegExp = new RegExp(v.name, "g");
@@ -410,7 +417,7 @@ function createField() {
  if (!checkValid()) return;
  let field = $createField(name.trim(), label.trim(), "number", true);
  field.formula = formula.trim().replaceAll(" ", "");
-  if (choice === "function") {
+  if (choice.value === "function") {
    field.func = func;
    field.vals = checkFunc();
  } else field.tags = tags.map((v) => v.name);
--- a/app/components/datatable/TableOption.vue
+++ b/app/components/datatable/TableOption.vue
@@ -2,10 +2,10 @@
  <table class="table is-fullwidth">
    <thead>
      <tr class="fs-14">
-        <th>#</th>
+        <th class="is-narrow">#</th>
        <th>Tên trường</th>
        <th>Tên cột</th>
-        <th class="is-narrow">...</th>
+        <th class="is-narrow has-text-right">Thao tác</th>
      </tr>
    </thead>
    <tbody>
@@ -13,52 +13,52 @@
        class="fs-14"
        v-for="(v, i) in fields"
      >
-        <td>{{ i }}</td>
-        <td>
+        <td style="vertical-align: middle">{{ i }}</td>
+        <td style="vertical-align: middle">
          <a
            class="has-text-primary"
            @click="openField(v, i)"
            >{{ v.name }}</a
          >
        </td>
-        <td>{{ $stripHtml(v.label, 50) }}</td>
+        <td style="vertical-align: middle">{{ $stripHtml(v.label, 50) }}</td>
        <td>
          <div class="field has-addons">
            <p class="control">
              <button
-                class="button is-primary is-light"
+                class="button is-primary is-light px-3.5 py-1.5"
                @click="moveDown(v, i)"
              >
                <span class="icon">
                  <Icon
                    name="material-symbols:arrow-downward-rounded"
-                    :size="19"
+                    :size="18"
                  />
                </span>
              </button>
            </p>
            <p class="control">
              <button
-                class="button is-primary is-light"
+                class="button is-primary is-light px-3.5 py-1.5"
                @click="moveUp(v, i)"
              >
                <span class="icon">
                  <Icon
                    name="material-symbols:arrow-upward-rounded"
-                    :size="19"
+                    :size="18"
                  />
                </span>
              </button>
            </p>
            <p class="control">
              <button
-                class="button is-primary is-light"
+                class="button is-primary is-light px-3.5 py-1.5"
                @click="askConfirm(v, i)"
              >
                <span class="icon">
                  <Icon
                    name="material-symbols:delete-outline-rounded"
-                    :size="19"
+                    :size="18"
                  />
                </span>
              </button>
--- a/app/components/datatable/TimeOption.vue
+++ b/app/components/datatable/TimeOption.vue
@@ -8,7 +8,7 @@
      <div
        v-if="enableTime"
        class="cell is-col-span-7 is-flex is-align-items-center is-flex-wrap-wrap"
-        style="row-gap: 0.5rem; column-gap: 1rem"
+        style="row-gap: 0; column-gap: 1rem"
      >
        <Caption
          :title="lang === 'vi' ? 'Thời gian' : 'Time'"
@@ -41,11 +41,14 @@
        </div>
        <span
          v-if="newDataAvailable"
-          class="has-text-danger is-italic is-size-6 ml-2"
+          class="has-text-danger is-italic fs-14 ml-2"
          >Có dữ liệu mới, vui lòng làm mới.</span
        >
      </div>
-      <div class="cell is-col-span-5 is-flex is-align-items-center is-gap-1 is-flex-wrap-wrap">
+      <div
+        class="cell is-col-span-5 is-flex is-align-items-center is-flex-wrap-wrap"
+        style="row-gap: 0; column-gap: 1rem"
+      >
        <Caption
          :title="lang === 'vi' ? `Tìm ${viewport === 1 ? '' : 'kiếm'}` : 'Search'"
          type="has-text-orange"
@@ -60,45 +63,50 @@
          :placeholder="lang === 'vi' ? 'Nhập từ khóa...' : 'Enter keyword...'"
        />
        <div class="field has-addons is-flex is-flex-wrap-wrap is-gap-0 is-align-items-center">
-          <span
-            class="tooltip"
+          <p
            v-if="importdata && $getEditRights()"
+            class="control"
          >
-            <a
-              class="mr-2"
+            <button
+              class="button is-ghost has-text-orange fs-14"
              @click="openImport()"
            >
-              <SvgIcon
-                v-bind="{
-                  name: 'upload.svg',
-                  type: 'findata',
-                  size: 22,
-                }"
-              ></SvgIcon>
-            </a>
+              <span class="icon">
+                <Icon
+                  name="material-symbols:upload-rounded"
+                  :size="22"
+                />
+              </span>
+            </button>
            <span
-              class="tooltiptext"
-              style="min-width: max-content"
+              class="tooltiptext has-background-orange-soft has-text-orange-bold"
+              style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
            >
-              {{ lang === "vi" ? "Nhập dữ liệu" : "Import data" }}
+              Nhập dữ liệu
            </span>
-          </span>
-          <span
-            class="tooltip"
+          </p>
+          <p
            v-if="enableAdd && $getEditRights()"
+            class="control"
          >
-            <a
-              class="mr-2"
+            <button
+              class="button is-ghost has-text-orange fs-14"
              @click="$emit('add')"
            >
-              <SvgIcon v-bind="{ name: 'add1.png', type: 'findata', size: 22 }"></SvgIcon>
-            </a>
+              <span class="icon">
+                <Icon
+                  name="material-symbols:add-rounded"
+                  :size="22"
+                />
+              </span>
+            </button>
            <span
-              class="tooltiptext"
-              style="min-width: max-content"
-              >{{ lang === "vi" ? "Thêm mới" : "Add new" }}</span
+              class="tooltiptext has-background-orange-soft has-text-orange-bold"
+              style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
            >
-          </span>
+              Thêm mới
+            </span>
+          </p>
          <p class="control">
            <button
              class="button is-ghost has-text-orange fs-14"
@@ -110,8 +118,13 @@
                  :size="22"
                />
              </span>
-              <span>Xuất excel</span>
            </button>
+            <span
+              class="tooltiptext has-background-orange-soft has-text-orange-bold"
+              style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
+            >
+              Xuất Excel
+            </span>
          </p>
          <p class="control">
            <button
@@ -124,8 +137,13 @@
                  :size="22"
                />
              </span>
-              <span>Làm mới</span>
            </button>
+            <span
+              class="tooltiptext has-background-orange-soft has-text-orange-bold"
+              style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
+            >
+              Làm mới
+            </span>
          </p>
          <Icon
            v-if="loading"