178 lines
4.4 KiB
TypeScript
178 lines
4.4 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 { reactive, watch, ref, onMounted } from 'vue'
|
|
|
|
export default defineStore('employees', () => {
|
|
const user = useUser()
|
|
|
|
const rows = reactive(Array<any>())
|
|
const columns = reactive(Array<string>())
|
|
|
|
const meta = reactive({
|
|
current_page: NaN,
|
|
first_page: NaN,
|
|
last_page: NaN,
|
|
per_page: NaN,
|
|
total: NaN
|
|
})
|
|
|
|
const limit = ref(10)
|
|
const page = ref(1)
|
|
const sort_by = ref('')
|
|
const simple_search = ref('')
|
|
|
|
async function fetchFromApi() {
|
|
try {
|
|
const data : any = (await axios.get(
|
|
'/employees',
|
|
{
|
|
params: {
|
|
limit: limit.value,
|
|
page: page.value,
|
|
sort_by: sort_by.value,
|
|
simple_search: simple_search.value
|
|
},
|
|
headers: user.header
|
|
}
|
|
)).data
|
|
|
|
_assign(meta, data.meta)
|
|
_assign(rows, data.data)
|
|
_assign(columns, fetchColumns())
|
|
console.log("Employees: Fetched from api")
|
|
}
|
|
catch(err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
|
|
function fetchColumns() : string[] {
|
|
if(rows[0]){
|
|
return Object.keys(rows[0])
|
|
}
|
|
return []
|
|
}
|
|
|
|
function setLimit(pLimit : number) {
|
|
limit.value = pLimit
|
|
}
|
|
|
|
function setSortBy(pSortBy : string) {
|
|
sort_by.value = pSortBy
|
|
}
|
|
|
|
function setSimpleSearch(pSimpleSearch : string) {
|
|
simple_search.value = pSimpleSearch
|
|
}
|
|
|
|
function setPage(pPage : number) {
|
|
page.value = pPage
|
|
}
|
|
|
|
watch([limit, sort_by, simple_search, page], () => {
|
|
fetchFromApi()
|
|
})
|
|
|
|
onMounted(() => {
|
|
fetchFromApi()
|
|
})
|
|
|
|
return {
|
|
rows, columns, meta,
|
|
limit, page, sort_by, simple_search,
|
|
fetchFromApi,
|
|
setLimit,
|
|
setSortBy,
|
|
setSimpleSearch,
|
|
setPage
|
|
}
|
|
|
|
})
|
|
|
|
/*
|
|
export const useEmployees = defineStore('employees', {
|
|
state: () => {
|
|
return {
|
|
/**
|
|
* @type any[]
|
|
|
|
rows: Array<any>(),
|
|
|
|
meta: {
|
|
current_page: NaN,
|
|
first_page: NaN,
|
|
last_page: NaN,
|
|
per_page: NaN,
|
|
total: NaN
|
|
},
|
|
|
|
columns: Array<string>(),
|
|
|
|
limit: 10,
|
|
page: 1,
|
|
sort_by: '',
|
|
simple_search: ''
|
|
}
|
|
},
|
|
|
|
actions: {
|
|
/**
|
|
* @param: {number} limit - QueryString: limit=20 etc.
|
|
* @param: {number} page - QueryString: page=1 etc.
|
|
* @param: {string} sortBy - QueryString: sort_by=asc(col1),desc(col2),...
|
|
* @param: {string} simpleSearch - QueryString: simple_search=query(col1,col2,...)
|
|
**
|
|
async fetchFromApi() {
|
|
try {
|
|
|
|
const data : any = (await axios.get(
|
|
'/employees',
|
|
{
|
|
params: {
|
|
limit: this.limit,
|
|
page: this.page,
|
|
sort_by: this.sort_by,
|
|
simple_search: this.simple_search
|
|
},
|
|
headers: user.header
|
|
}
|
|
)).data
|
|
|
|
Object.assign(this.meta, data.meta)
|
|
this.rows = _cloneDeep(data.data)
|
|
|
|
this.columns = this.fetchColumns()
|
|
}
|
|
catch(err) {
|
|
console.log(err)
|
|
}
|
|
},
|
|
|
|
fetchColumns() : string[] {
|
|
if(this.rows[0]){
|
|
return Object.keys(this.rows[0])
|
|
}
|
|
return []
|
|
},
|
|
|
|
setLimit(limit : number) {
|
|
this.limit = limit
|
|
this.fetchFromApi()
|
|
},
|
|
setSortBy(sortBy : string) {
|
|
this.sort_by = sortBy
|
|
this.fetchFromApi()
|
|
},
|
|
setSimpleSearch(simpleSearch : string) {
|
|
this.simple_search = simpleSearch
|
|
this.fetchFromApi()
|
|
},
|
|
setPage(page : number) {
|
|
this.page = page
|
|
this.fetchFromApi()
|
|
}
|
|
}
|
|
}) */ |