gitea_admin/nuxt-mongoose
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: initial pagination

Browse Source
This commit is contained in:
arashsheyda
2023-04-26 18:34:51 +03:00
parent 3ac731c5ee
commit ad0c5b2d40
1 changed files with 42 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
client/components/DatabaseDetail.vue
View File

@ -6,8 +6,19 @@ const props = defineProps({
},
})
// TODO: save in local storage
const pagination = reactive({ limit: 20, page: 1 })
const countDocuments = computedAsync(async () => {
return await rpc.countDocuments(props.collection)
})
const documents = computedAsync(async () => {
return await rpc.listDocuments(props.collection)
return await rpc.listDocuments(props.collection, pagination)
})
watch(pagination, async () => {
documents.value = await rpc.listDocuments(props.collection, pagination)
})
const schema = computedAsync<any>(async () => {
@ -71,7 +82,7 @@ async function saveDocument(document: any) {
await rpc.createDocument(props.collection, document)
editing.value = false
selectedDocument.value = undefined
documents.value = await rpc.listDocuments(props.collection)
documents.value = await rpc.listDocuments(props.collection, pagination)
}
async function updateDocument() {
@ -79,7 +90,7 @@ async function updateDocument() {
await rpc.updateDocument(props.collection, selectedDocument.value)
editing.value = false
selectedDocument.value = undefined
documents.value = await rpc.listDocuments(props.collection)
documents.value = await rpc.listDocuments(props.collection, pagination)
}
function discardEditing() {
@ -89,8 +100,10 @@ function discardEditing() {
async function deleteDocument(document: any) {
rpc.deleteDocument(props.collection, document._id)
documents.value = await rpc.listDocuments(props.collection)
documents.value = await rpc.listDocuments(props.collection, pagination)
}
const copy = useCopy()
</script>
<template>
@ -101,9 +114,29 @@ async function deleteDocument(document: any) {
Add Document
</NButton>
</template>
<div v-if="countDocuments" flex items-center>
<div op50>
<span v-if="search">{{ filtered.length }} matched · </span>
<span>{{ documents?.length }} documents in total</span>
<span>{{ documents?.length }} of {{ countDocuments }} documents in total</span>
</div>
<div flex-auto />
<div flex gap-2>
<NSelect v-if="pagination.limit !== 0" v-model="pagination.page">
<option v-for="i in Math.ceil(countDocuments / pagination.limit)" :key="i" :value="i">
page:
{{ i }}
</option>
</NSelect>
<NSelect v-model="pagination.limit">
<option v-for="i in [1, 2, 3, 4, 5]" :key="i" :value="i * 10">
show:
{{ i * 10 }}
</option>
<option :value="0">
show all
</option>
</NSelect>
</div>
</div>
</Navbar>
<table v-if="documents?.length || selectedDocument" w-full mb10 :class="{ 'editing-mode': editing }">
@ -118,7 +151,6 @@ async function deleteDocument(document: any) {
</tr>
</thead>
<tbody>
<!-- hover-bg-green hover-bg-opacity-5 hover-text-green cursor-pointer -->
<tr v-for="document in filtered" :key="document._id" :class="{ isEditing: editing && selectedDocument._id === document._id }">
<td v-for="field of fields" :key="field" @dblclick="editDocument(document)">
<template v-if="editing && selectedDocument._id === document._id">
@ -129,7 +161,7 @@ async function deleteDocument(document: any) {
</span>
</td>
<td class="actions">
<div flex justify-center gap2>
<div flex justify-center gap2 class="group">
<template v-if="editing && selectedDocument._id === document._id">
<NIconButton icon="carbon-save" @click="updateDocument" />
<NIconButton icon="carbon-close" @click="discardEditing" />
@ -138,6 +170,7 @@ async function deleteDocument(document: any) {
<NIconButton icon="carbon-edit" @click="editDocument(document)" />
<NIconButton icon="carbon-delete" @click="deleteDocument(document)" />
<NIconButton icon="carbon-document-multiple-02" @click="saveDocument(document)" />
<NIconButton absolute right-4 opacity-0 group-hover="opacity-100" transition-all icon="carbon-copy" @click="copy(JSON.stringify(document))" />
</template>
</div>
</td>