changes

components/datatable/TableSetting.vue

@@ -0,0 +1,112 @@
+<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">
+         <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>
+      </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>