login-v2/components/datatable/TableSetting.vue

<template>
<div>
  <div class="field is-horizontal mt-3">
  <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="number" :value="tablesetting.find(v=>v.code==='table-font-size').detail" 
       @change="changeSetting($event.target.value, 'table-font-size')">
      </p>
      <p class="help is-danger mt-1" v-if="errors['table-font-size']">{{errors['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="number" :value="tablesetting.find(v=>v.code==='header-font-size').detail" 
       @change="changeSetting($event.target.value, 'header-font-size')">
      </p>
      <p class="help is-danger mt-1" v-if="errors['header-font-size']">{{errors['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="number" :value="tablesetting.find(v=>v.code==='per-page').detail" 
       @change="changeSetting($event.target.value, 'per-page')">
      </p>
      <p class="help is-danger mt-1" v-if="errors['per-page']">{{errors['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>
 </div>
</template>
<script>
export default {
  props: ['pagename'],
  data() {
    return {
      errors: [],
      radioNote: 'no',
      tablesetting: undefined,
      errors: {}
    }
  },
  created() {
    this.tablesetting = this.$copy(this.pagedata.tablesetting || this.setting)
    this.readSetting()
  },
  watch: {
    radioNote: function(newVal) {
      if(newVal==='no') this.changeSetting('@', 'note')
    }
  },
  computed: {
    setting: {
      get: function() {return this.$store.state.tablesetting},
      set: function(val) {this.$store.commit("updateTableSetting", {tablesetting: val})}
    },
    pagedata: {
      get: function() {return this.$store.state[this.pagename]},
      set: function(val) {this.$store.commit('updateStore', {name: this.pagename, data: val})}
    }
  },
  methods: {
    readSetting() {
      let found = this.tablesetting.find(v=>v.code==='note')
      if(found? found.detail!=='@' : false) this.radioNote = 'yes'
    },
    checkError(value, code) {
      this.errors = {}
      let fvalue = this.$formatNumber(value)
      if(code==='table-font-size' || code==='header-font-size') {
        if(fvalue <8) this.errors[code] = 'Giá trị phải từ 8 trở lên'
        else if(fvalue >100) this.errors[code] = 'Giá trị lớn nhất là 100'
      }
      if(this.pagedata.setting? this.pagedata.setting.classify__code==='priceboard' : false) {
        if(code==='per-page') {
          if(fvalue>50) this.errors[code] = 'Giá trị lớn nhất là 50'
          else if(fvalue<1) this.errors[code] = 'Giá trị nhỏ nhất là 1'
        }
      }
      return Object.keys(this.errors).length>0? true : false
    },
    changeSetting(value, code) {
      if(this.checkError(value, code)) return
      if(code==='note' && this.$empty(value)) return
      let copy = this.$copy(this.tablesetting)
      let found = copy.find(v=>v.code===code)
      if(found) found.detail = value
      else {
        found = this.$copy(this.tablesetting.find(v=>v.code===code))
        found.detail = value
        copy.push(found)
      }
      this.tablesetting = copy
      if(this.pagename) this.$store.commit("updateState", {name: this.pagename, key: "update", data: {tablesetting: copy}})
    }
  }
}
</script>