changes

app/components/datatable/DataTable.vue

@@ -1,20 +1,26 @@
 <template>
   <div
-    class="field is-grouped is-grouped-multiline pl-2"
+    class="field is-grouped is-grouped-multiline is-gap-4 px-2"
     v-if="filters ? filters.length > 0 : false"
   >
-    <div class="control mr-5">
+    <div class="control">
       <a
-        class="button is-primary is-small has-text-white has-text-weight-bold"
+        class="button is-primary is-light"
         @click="updateData({ filters: [] })"
       >
         <span class="fs-14">Xóa lọc</span>
       </a>
     </div>
-    <div class="control pr-2 mr-5">
+    <div class="control">
       <span class="icon-text">
-        <SvgIcon v-bind="{ name: 'sigma.svg', type: 'primary', size: 20 }"></SvgIcon>
-        <span class="fsb-18 has-text-primary">{{ totalRows }}</span>
+        <span class="icon">
+          <Icon
+            name="mdi:sigma"
+            :size="20"
+            class="has-text-primary"
+          />
+        </span>
+        <span class="fs-16 font-semibold has-text-primary">{{ totalRows }}</span>
       </span>
     </div>
     <div
@@ -24,16 +30,16 @@
     >
       <div class="tags has-addons is-marginless">
         <a
-          class="tag is-primary has-text-white is-marginless"
+          class="tag is-primary is-light is-marginless"
           @click="showCondition(v)"
           >{{ v.label.indexOf(">") >= 0 ? $stripHtml(v.label, 30) : v.label }}</a
         >
         <a
-          class="tag is-delete is-marginless has-text-black-bis"
+          class="tag is-delete is-marginless"
           @click="removeFilter(i)"
         ></a>
       </div>
-      <span class="help has-text-black-bis">
+      <span class="help">
         {{
           v.sort
             ? v.sort
@@ -59,14 +65,13 @@
             v-for="(field, i) in displayFields"
             :key="i"
             :style="field.headerStyle"
+            class="is-clickable header"
+            @click="showField(field)"
           >
-            <div
-              @click="showField(field)"
-              :style="field.dropStyle"
-            >
+            <div :style="field.dropStyle">
               <a
                 v-if="field.label.indexOf('<') < 0"
-                class="has-text-white font-semibold"
+                class="font-semibold"
                 >{{ field.label }}</a
               >
               <a v-else>
@@ -160,13 +165,12 @@ var currentPage = 1;
 var displayFields = ref([]);
 var displayData = [];
 var pagedata = store[props.pagename];
-console.log("props.pagename", props.pagename);
-console.log("store", toRaw(store));
-console.log("store[props.pagename]", toRaw(store[props.pagename]));
-console.log("pagedata.tablesetting", toRaw(pagedata.tablesetting)); // table-font-size is 13
-console.log("store.tablesetting", toRaw(store.tablesetting)); // table-font-size is 12
-// var tablesetting = $copy(pagedata.tablesetting || store.tablesetting);
-var tablesetting = $copy(store.tablesetting);
+var tablesetting = $copy(pagedata.tablesetting || store.tablesetting);
+if (!Array.isArray(tablesetting)) {
+  tablesetting = Object.values(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;
@@ -551,7 +555,10 @@ setTimeout(() => updateShow(), 200);
 </script>
 <style scoped>
 :deep(.table tbody tr:hover td, .table tbody tr:hover th) {
-  background-color: hsl(0, 0%, 78%);
-  color: rgb(0, 0, 0);
+  --bulma-table-row-hover-background-color: var(--bulma-scheme-main-ter);
+  background-color: var(--bulma-table-row-hover-background-color);
+}
+.header:hover a {
+  opacity: 0.75;
 }
 </style>