95 lines
2.2 KiB
TypeScript
95 lines
2.2 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
import { useUser } from '@/stores/user'
|
|
import axios from '@/axios'
|
|
import _cloneDeep from 'lodash/cloneDeep'
|
|
import _assign from 'lodash/assign'
|
|
import _debounce from 'lodash/debounce'
|
|
import { reactive, watch, onMounted } from 'vue'
|
|
|
|
export default defineStore('employees', () => {
|
|
const user = useUser()
|
|
|
|
const state = reactive({
|
|
rows: Array<Employee>(),
|
|
columns: Array<string>(),
|
|
|
|
meta : {
|
|
current_page: NaN,
|
|
first_page: NaN,
|
|
last_page: NaN,
|
|
per_page: NaN,
|
|
total: NaN
|
|
},
|
|
|
|
limit: 10,
|
|
page: 1,
|
|
sort_by: '',
|
|
simple_search: ''
|
|
})
|
|
|
|
async function fetchFromApi() {
|
|
try {
|
|
const data : any = (await axios.get(
|
|
'/employees',
|
|
{
|
|
params: {
|
|
limit: state.limit,
|
|
page: state.page,
|
|
sort_by: state.sort_by,
|
|
simple_search: state.simple_search
|
|
},
|
|
headers: user.header
|
|
}
|
|
)).data
|
|
|
|
_assign(state.meta, data.meta)
|
|
state.rows = _cloneDeep(data.data)
|
|
|
|
_assign(state.columns, fetchColumns())
|
|
}
|
|
catch(err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
|
|
function fetchColumns() : string[] {
|
|
if(state.rows[0]){
|
|
return Object.keys(state.rows[0])
|
|
}
|
|
return []
|
|
}
|
|
|
|
function setLimit(pLimit : number) {
|
|
state.limit = pLimit
|
|
}
|
|
|
|
function setSortBy(pSortBy : string) {
|
|
state.sort_by = pSortBy
|
|
}
|
|
|
|
function setSimpleSearch(pSimpleSearch : string) {
|
|
state.simple_search = pSimpleSearch
|
|
}
|
|
|
|
function setPage(pPage : number) {
|
|
state.page = pPage
|
|
}
|
|
|
|
watch(() => [state.limit, state.sort_by, state.simple_search, state.page], _debounce(() => {
|
|
fetchFromApi()
|
|
}, 300))
|
|
|
|
onMounted(() => {
|
|
fetchFromApi()
|
|
})
|
|
|
|
return {
|
|
state,
|
|
fetchFromApi,
|
|
setLimit,
|
|
setSortBy,
|
|
setSimpleSearch,
|
|
setPage
|
|
}
|
|
|
|
}) |