109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<template>
|
|
<BContainer
|
|
fluid
|
|
class="p-0"
|
|
>
|
|
<CrudHeader :title="$route.meta.label">
|
|
<template #menu>
|
|
<BButtonToolbar key-nav>
|
|
<BButton
|
|
variant="primary"
|
|
@click="doCreate"
|
|
>Ajouter</BButton
|
|
>
|
|
</BButtonToolbar>
|
|
</template>
|
|
<template #bottom>
|
|
<CrudPager
|
|
v-model:page="page"
|
|
v-model:pages="pages"
|
|
v-model:limit="limit"
|
|
@update="refresh()"
|
|
/>
|
|
</template>
|
|
</CrudHeader>
|
|
|
|
<div
|
|
v-if="data"
|
|
class="crud-list"
|
|
>
|
|
<DataList
|
|
:rows="data.rows"
|
|
:headers="getListFields()"
|
|
:sort="sort"
|
|
:order="order"
|
|
@sort="doSort"
|
|
@row-click="doEdit"
|
|
/>
|
|
</div>
|
|
</BContainer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { BContainer, BButton, BButtonToolbar } from 'bootstrap-vue-next'
|
|
|
|
import CrudHeader from '../../components/crud/CrudHeader.vue'
|
|
import CrudPager from '../../components/crud/CrudPager.vue'
|
|
import DataList from '../../components/crud/DataList.vue'
|
|
import { ref, onMounted, watch } from 'vue'
|
|
import { getStorage, saveStorage } from '../../lib/storage'
|
|
import { useRouter } from 'vue-router'
|
|
import { getList, getListFields } from '../../models/user'
|
|
|
|
const endpoint = `/api/user`
|
|
const order = ref(getStorage(`${endpoint}:order`))
|
|
const sort = ref(getStorage(`${endpoint}:sort`))
|
|
const page = ref(getStorage(`${endpoint}:page`))
|
|
const limit = ref(getStorage(`${endpoint}:limit`))
|
|
const data = ref(null)
|
|
const pages = ref(null)
|
|
const router = useRouter()
|
|
|
|
watch(order, (v) => saveStorage(`${endpoint}:order`, v))
|
|
watch(sort, (v) => saveStorage(`${endpoint}:sort`, v))
|
|
watch(page, (v) => saveStorage(`${endpoint}:page`, v))
|
|
watch(limit, (v) => saveStorage(`${endpoint}:limit`, v))
|
|
|
|
const refresh = () => {
|
|
getList(
|
|
{
|
|
order: order.value,
|
|
sort: sort.value,
|
|
page: page.value,
|
|
limit: limit.value,
|
|
},
|
|
(value) => {
|
|
data.value = value
|
|
order.value = value.order
|
|
sort.value = value.sort
|
|
page.value = value.page
|
|
pages.value = value.total_pages
|
|
limit.value = value.limit
|
|
},
|
|
)
|
|
}
|
|
|
|
const doEdit = (item) => {
|
|
router.replace({ name: 'user_edit', params: { id: item.id } })
|
|
}
|
|
|
|
const doCreate = () => {
|
|
router.replace({ name: 'user_create' })
|
|
}
|
|
|
|
const doSort = (key) => {
|
|
let nextSort = 'asc'
|
|
|
|
if (order.value === key) {
|
|
nextSort = sort.value === 'asc' ? 'desc' : 'asc'
|
|
}
|
|
|
|
order.value = key
|
|
sort.value = nextSort
|
|
page.value = 1
|
|
|
|
refresh()
|
|
}
|
|
|
|
onMounted(refresh)
|
|
</script>
|