grid.vue

<template>
  <div>
    <vx-card class="mb-base">
      <div class="flex justify-end">
        <div class="text-right">
          <table class="text-center">
            <tr>
              <td rowspan="2" class="text-left">Karyawan<br/>Aktif</td>
              <th rowspan="2" class="text-left">
                <h1>{{ jumlahKaryawan.all }}</h1>
              </th>
              <td rowspan="2">&emsp;</td>
              <th>STAFF</th>
              <th>KBT</th>
              <th>KHT</th>
              <th>KHK</th>
              <th>KHL</th>
              <th>KBO</th>
              <th>KBK</th>
            </tr>
            <tr>
              <td>{{ jumlahKaryawan.STAFF }}</td>
              <td>{{ jumlahKaryawan.KBT }}</td>
              <td>{{ jumlahKaryawan.KHT }}</td>
              <td>{{ jumlahKaryawan.KHK }}</td>
              <td>{{ jumlahKaryawan.KHL }}</td>
              <td>{{ jumlahKaryawan.KBO }}</td>
              <td>{{ jumlahKaryawan.KBK }}</td>
            </tr>
          </table>
        </div>
      </div>
    </vx-card>

    <vx-card>
      <div class="flex flex-col w-full">
        <div class="flex flex-row justify-end w-full mb-4">
          <vs-dropdown vs-custom-content vs-trigger-click >
            <vs-button
              class="mr-2 columnsButton"
              ref="columnsButton"
              color="primary"
              type="border"
            >
              Tampilkan Kolom
            </vs-button>

            <vs-dropdown-menu>
              <JqxListBox style="float: left" @checkChange="hideShowColumns($event)"
                          :width="200" :height="200" :source="listBoxSource" :checkboxes="true">
              </JqxListBox>
            </vs-dropdown-menu>
          </vs-dropdown>
          <vs-button
            class="mr-2"
            color="primary"
            type="border"
            @click="exportKaryawan"
          >
            <span class="kelola icon-dc-excel"><span class="path1"></span><span class="path2"></span></span>
            XLS
          </vs-button>
          <vs-button
            color="primary"
            type="filled"
            to="/karyawan/tambah"
            icon-pack="kelola"
            icon="icon-li-user-plus"
          >Tambah Karyawan
          </vs-button>
        </div>
        <jqx-grid ref="myGrid" class="myGrid" width="100%" :autoheight="true" :columnsresize="true" theme="metro" :source="dataAdapter"
                  :columns="columns" :filterable="true" :showfilterrow="true" :sortable="true" :pageable="true"
                  :rendergridrows="rendergridrows" :virtualmode="true" :pagesizeoptions="['10', '50', '100', '500', '1000']"/>
      </div>
    </vx-card>
  </div>
</template>

<script>
import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue'
// import JqxGrid from '~/components/jqwidgets-vue/vue_jqxgrid.vue'
import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue'
import KaryawanDictionary from '~/data/KaryawanDictionary'
import dateHelper from '../../../helpers/dateHelper'

export default {
  components: {
    JqxGrid,
    JqxListBox
  },
  model: {
    prop: 'pages'
  },
  data () {
    const self = this

    return {
      jumlahKaryawan: [],
      optionsUnit: [],
      options_bagian: [],
      left: 0,
      top: 0,
      firstLoad: true,
      created: true,
      listBoxSource: [
        { label: 'UNIT', value: 'corp_name', checked: true},
        { label: 'NIK', value: 'nik_id', checked: true},
        { label: 'FP ID', value: 'fp_id', checked: true},
        { label: 'KTP', value: 'citizen_int', checked: true},
        { label: 'NAMA LENGKAP', value: 'firstname', checked: true},
        { label: 'JENIS KELAMIN', value: 'gender', checked: true},
        { label: 'TPT LAHIR', value: 'birth_city', checked: true},
        { label: 'TGL LAHIR', value: 'birth', checked: true},
        { label: 'KARIR', value: 'libelle', checked: true},
        { label: 'BAGIAN', value: 'job_name', checked: true},
        { label: 'PENDIDIKAN', value: 'edu_level', checked: true},
        { label: 'STATUS', value: 'statut', checked: true}
      ],
      dataAdapter: new jqx.dataAdapter(this.source, {
        beforeSend (jqXHR) {
          jqXHR.setRequestHeader('DOLAPIKEY', 'KqnJP1u8eb9o89iPYEm85DS0hMB7j8By')
        },
        formatData (data) {
          $.extend(data, {
            page: (data.pagenum + 1),
            limit: data.pagesize,
            corp_id: localStorage.getItem('unit') ? localStorage.getItem('unit') : this.$store.state.unit,
            sqlfilters: self.generateFilter(data),
            sortfield: KaryawanDictionary.dbFiled[data.sortdatafield] && data.sortorder ? KaryawanDictionary.dbFiled[data.sortdatafield] : '',
            sortorder: data.sortorder
          })
          return data
        }
      }),
      rendergridrows: (params) => {
        return params.data
      },
      columns: [
        {
          text: 'UNIT',
          datafield: 'corp_name',
          width: '300px',
          filtertype: 'list',
          sortable: false,
          filterable: false,
          createfilterwidget: (column, htmlElement, editor) => {
            editor.jqxDropDownList({ displayMember: 'corp_name', valueMember: 'corp_id' })
          }
        },
        {text: 'NIK', datafield: 'nik_id', width: '150px', filtertype: 'textbox'},
        {text: 'FP ID', datafield: 'fp_id', width: '150px', filtertype: 'textbox'},
        {text: 'KTP', datafield: 'citizen_int', width: '150px', filtertype: 'textbox'},
        {text: 'NAMA LENGKAP', datafield: 'firstname', width: '200px', filtertype: 'textbox'},
        {text: 'JENIS KELAMIN',
          datafield: 'gender',
          width: '150px',
          filtertype: 'list',
          filteritems: KaryawanDictionary.gender,
          createfilterwidget: (column, htmlElement, editor) => {
            editor.jqxDropDownList({ displayMember: 'label', valueMember: 'value' })
          },
          cellsrenderer (row, columnsfield, value, defaulthtml, columnproperties, rowdata) {
            let label = ''
            switch (rowdata.gender) {
            case 'man':
              label = 'Laki-laki'
              break
            case 'woman':
              label = 'Perempuan'
              break
            default: label = '-'
            }

            return `<span style="margin: 4px; margin-top: 9px; float: ${columnproperties.cellsalign}">${label}</span>`
          }
        },
        {text: 'TPT LAHIR', datafield: 'birth_city', width: '150px', filtertype: 'textbox'},
        {text: 'TGL LAHIR',
          datafield: 'birth',
          width: '150px',
          filtertype: 'range',
          cellsrenderer (row, columnsfield, value, defaulthtml, columnproperties, rowdata) {
            if (!rowdata.birth) return ''
            return `<span style="margin: 4px; margin-top: 9px; float: ${columnproperties.cellsalign}">${dateHelper.defaultFormatFromTimeStamp(rowdata.birth)}</span>`
          }
        },
        {text: 'KARIR',
          datafield: 'libelle',
          width: '100px',
          filtertype: 'list',
          filteritems: KaryawanDictionary.type,
          createfilterwidget: (column, htmlElement, editor) => {
            editor.jqxDropDownList({ displayMember: 'label', valueMember: 'value' })
          }
        },
        {text: 'BAGIAN', datafield: 'job_name', width: '150px', filtertype: 'textbox'},
        {text: 'PENDIDIKAN',
          datafield: 'edu_level',
          width: '150px',
          filtertype: 'list',
          filteritems: KaryawanDictionary.education,
          createfilterwidget: (column, htmlElement, editor) => {
            editor.jqxDropDownList({ displayMember: 'label', valueMember: 'value' })
          },
          cellsrenderer (row, columnsfield, value, defaulthtml, columnproperties, rowdata) {
            const label = rowdata.edu_level && rowdata.edu_level !== '0' ? rowdata.edu_level.toUpperCase() : ''
            return `<span style="margin: 4px; margin-top: 9px; float: ${columnproperties.cellsalign}">${label}</span>`
          }
        },
        {text: 'STATUS',
          datafield: 'statut',
          width: '150px',
          filtertype: 'list',
          filteritems: KaryawanDictionary.status,
          createfilterwidget: (column, htmlElement, editor) => {
            editor.jqxDropDownList({ displayMember: 'label', valueMember: 'value' })
          },
          cellsrenderer (row, columnsfield, value, defaulthtml, columnproperties, rowdata) {
            const data = rowdata.statut
            const text = data === 0 ? 'Nonaktif' : 'Aktif'
            const color = data === 0 ? 'danger' : 'success'
            if (!data) return ''
            return `
            <div class="flex justify-center items-center h-full">
              <div class="con-vs-chip vs-chip-${color} con-color m-0" style="color: white;">
                <span class="text-chip vs-chip--text">
                    ${text}
                </span>
              </div>
            </div>`
          }
        },
        {text: 'ACTION',
          width: '150px',
          filtertype: 'none',
          cellsrenderer (row, columnsfield, value, defaulthtml, columnproperties, rowdata) {
            const data = rowdata.rowid
            if (!data) return ''
            return `<div class="flex items-center justify-center h-full table-action-cell">
                <a title="Edit Karyawan" href="/karyawan/edit/${data}" class="vs-component vs-button vs-button-primary vs-button-border includeIcon includeIconOnly jqw small ml-2"><i class="kelola icon-dc-edit-karyawan"></span></i></a>
                <a title="Lihat Detail" href="/karyawan/detail/${data}" class="vs-component vs-button vs-button-primary vs-button-border includeIcon includeIconOnly jqw small ml-2"><i class="kelola icon-dc-view"></i></a>
                <a title="Absensi" href="/karyawan/kehadiran/${data}/detail" class="vs-component vs-button vs-button-primary vs-button-border includeIcon jqw includeIconOnly small ml-2"><i class="kelola icon-dc-list-check"></i></a>
              </div>`
          }
        }
      ]
    }
  },
  beforeCreate () {
    this.source = {
      datatype: 'json',
      root: 'data',
      datafields: KaryawanDictionary.dataFields,
      url: `${process.env.VUE_APP_API_URL}api/index.php/members`,
      cache: false,
      filter: () => {
        this.$refs.myGrid.updatebounddata('filter')
      },
      sort: () => {
        this.$refs.myGrid.updatebounddata('sort')
      },
      beforeprocessing: (data) => {
        this.source.totalrecords = data.total_result
      }
    }

    this.unitSource = {
      datatype: 'json',
      datafields: [
        {name: 'corp_id'},
        {name: 'corp_name'}
      ],
      url: `${process.env.VUE_APP_API_URL}api/index.php/setup/dictionary/corp?sortfield=corp_name&sortorder=ASC`
    }

    this.cityCource = {
      datatype: 'json',
      datafields: [
        {name: 'city_id'},
        {name: 'city_name'}
      ],
      url: `${process.env.VUE_APP_API_URL}api/index.php/setup/dictionary/cities?sortfield=city_name&sortorder=ASC`
    }
  },
  created () {
    this.$store.watch(
      () => {
        return this.$store.state.unit
      },
      () => {
        this.getJumlah()
        if (this.$refs.myGrid) {
          this.$refs.myGrid.updatebounddata('filter')
        }
      }
    )
  },
  mounted () {
    this.getJumlah()
  },
  methods: {
    getJumlah () {
      this.$http
        .get(
          `${process.env.VUE_APP_API_URL  }api/index.php/members/total-member?limit=666`,
          {
            headers: {
              DOLAPIKEY: localStorage.getItem('token')
            },
            params: {
              corp_id: localStorage.getItem('unit') ? localStorage.getItem('unit') : this.$store.state.unit
            }
          }
        )
        .then(res => {
          this.jumlahKaryawan = res.data.total[0]
          // console.log(res.data.total.all)
        })
    },
    updatePopover () {
      this.left = this.$refs.columnsButton.$el.offsetLeft + 16
      this.top = this.$refs.columnsButton.$el.offsetTop
    },
    exportKaryawan () {
      const url = `${process.env.VUE_APP_EXPORT_URL  }exportkaryawan?corp_id=${
        this.$store.state.unit
      }`
      window.open(url, '_blank')
    },
    hideShowColumns (event) {
      this.$refs.myGrid.beginupdate()
      if (event.args.checked) {
        this.$refs.myGrid.showcolumn(event.args.value)
      } else {
        this.$refs.myGrid.hidecolumn(event.args.value)
      }

      this.listBoxSource.forEach(item => {
        if (event.args.value === item.value) {
          item.checked = event.args.checked
        }
      })

      this.$refs.myGrid.endupdate()
    },
    generateFilter (data) {
      console.log(localStorage.getItem('unit_code'), this.$store.state.unit_code)
      const unit = localStorage.getItem('unit_code') ? localStorage.getItem('unit_code') : this.$store.state.unit_code
      let filter = '(\'1\'=\'1\')'

      filter += ` AND (v.corp:like:'${unit}%')`

      let isStatutFiltered = false

      data.filterGroups.forEach((item) => {
        const dbFiled = KaryawanDictionary.dbFiled[item.field] ? KaryawanDictionary.dbFiled[item.field] : ''
        const value = item.filters[0].value
        const type = item.filters[0].type
        const operator = ' AND'

        let filterStrings = `${operator} (${dbFiled}:like:'%${value}%')`

        if (item.field === 'statut') isStatutFiltered = true

        if (type === 'numericfilter' || item.field === 'libelle' || item.field === 'gender') {
          filterStrings = `${operator} (${dbFiled}:=:'${value}')`
        }

        if (type === 'datefilter') {
          const value2 = item.filters[1].value
          filterStrings = `${operator} ((${dbFiled}:>=:'${dateHelper.dateToYmd(value)}') AND (${dbFiled}:<=:'${dateHelper.dateToYmd(value2)}'))`
        }

        filter += filterStrings
      })

      if (!isStatutFiltered) {
        filter += ' AND (v.statut:=:\'1\')'
      }

      this.firstLoad = true

      return filter
    }
  }
}
</script>

<style scoped>
.pagination-container {
  background: white;
  padding-top: 1rem;
}

.small-padding .vs-con-input .vs-inputx {
  padding: 0.4rem !important;
}

.jqx-listbox-container {
  z-index: 1000000;
}

.center {
  margin: auto;
  width: 100%;
  padding-left: 10%;
  padding-right: 10%;
}
</style>