web/app/components/datatable/TableSetting.vue

<template>
  <div class="field is-horizontal">
    <div class="field-body">
      <div class="field">
        <label class="label fs-14"> Cỡ chữ của bảng <span class="has-text-danger"> * </span></label>
        <p class="control fs-14">
          <input
            class="input is-small"
            type="text"
            :value="tablesetting.find((v) => v.code === 'table-font-size').detail"
            @change="changeSetting($event.target.value, 'table-font-size')"
          />
        </p>
      </div>
      <div class="field">
        <label class="label fs-14"> Cỡ chữ tiêu đề <span class="has-text-danger"> * </span></label>
        <p class="control fs-14">
          <input
            class="input is-small"
            type="text"
            :value="tablesetting.find((v) => v.code === 'header-font-size').detail"
            @change="changeSetting($event.target.value, 'header-font-size')"
          />
        </p>
      </div>
      <div class="field">
        <label class="label fs-14"> Số dòng trên 1 trang <span class="has-text-danger"> * </span> </label>
        <p class="control fs-14">
          <input
            class="input is-small"
            type="text"
            :value="tablesetting.find((v) => v.code === 'per-page').detail"
            @change="changeSetting($event.target.value, 'per-page')"
          />
        </p>
      </div>
    </div>
  </div>
  <div class="field is-horizontal mt-5">
    <div class="field-body">
      <div class="field">
        <label class="label fs-14"> Màu nền bảng <span class="has-text-danger"> * </span> </label>
        <p class="control fs-14">
          <input
            type="color"
            :value="tablesetting.find((v) => v.code === 'table-background').detail"
            @change="changeSetting($event.target.value, 'table-background')"
          />
        </p>
      </div>
      <div class="field">
        <label class="label fs-14"> Màu chữ <span class="has-text-danger"> * </span> </label>
        <p class="control fs-14">
          <input
            type="color"
            :value="tablesetting.find((v) => v.code === 'table-font-color').detail"
            @change="changeSetting($event.target.value, 'table-font-color')"
          />
        </p>
      </div>
    </div>
  </div>
  <div class="field is-horizontal mt-5">
    <div class="field-body">
      <div class="field">
        <label class="label fs-14"> Màu chữ tiêu đề <span class="has-text-danger"> * </span> </label>
        <p class="control fs-14">
          <input
            type="color"
            :value="tablesetting.find((v) => v.code === 'header-font-color').detail"
            @change="changeSetting($event.target.value, 'header-font-color')"
          />
        </p>
      </div>
      <div class="field">
        <label class="label fs-14"> Màu nền tiêu đề <span class="has-text-danger"> * </span> </label>
        <p class="control fs-14">
          <input
            type="color"
            :value="tablesetting.find((v) => v.code === 'header-background').detail"
            @change="changeSetting($event.target.value, 'header-background')"
          />
        </p>
      </div>
      <div class="field">
        <label class="label fs-14"> Màu chữ khi filter<span class="has-text-danger"> * </span> </label>
        <p class="control fs-14">
          <input
            type="color"
            :value="tablesetting.find((v) => v.code === 'header-filter-color').detail"
            @change="changeSetting($event.target.value, 'header-filter-color')"
          />
        </p>
      </div>
    </div>
  </div>
  <div class="field is-horizontal mt-5">
    <div class="field-body">
      <div class="field">
        <label class="label fs-14"> Đường viền <span class="has-text-danger"> * </span> </label>
        <p class="control fs-14">
          <input
            class="input is-small"
            type="text"
            :value="
              tablesetting.find((v) => v.code === 'td-border')
                ? tablesetting.find((v) => v.code === 'td-border').detail
                : undefined
            "
            @change="changeSetting($event.target.value, 'td-border')"
          />
        </p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useStore } from "@/stores/index";
const store = useStore();
var props = defineProps({
  pagename: String,
});
const { $copy, $clone, $empty } = useNuxtApp();
var pagedata = $clone(store[props.pagename]);
var errors = [];
var radioNote = "no";
var tablesetting = pagedata.tablesetting;
let found = tablesetting.find((v) => v.code === "note");
if (found ? found.detail !== "@" : false) radioNote = "yes";
function changeSetting(value, code) {
  if (code === "note" && $empty(value)) return;
  let copy = $copy(tablesetting);
  let found = copy.find((v) => v.code === code);
  if (found) found.detail = value;
  else {
    found = $copy(tablesetting.find((v) => v.code === code));
    found.detail = value;
    copy.push(found);
  }
  tablesetting = copy;
  pagedata.tablesetting = tablesetting;
  store.commit(props.pagename, pagedata);
}
</script>