github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-28 14:28:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improvement/revision pagination (#6303)

Browse Source 
* #3764 add pagination to item revisions

* #3764 add collapse feature to revision date groups

* #3764 add pagination to item revisions

* #3764 add collapse feature to revision date groups

* dont pass a function into a prop and clean up

* remove code from divider and clean up code

* Use v-detail instead of v-divider

Co-authored-by: Nitwel <nitwel@arcor.de>
Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
masterwendu
2021-09-22 03:04:49 +02:00
committed by GitHub
parent d3ba3a4246
commit 062d99b29b
2 changed files with 71 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/src/views/private/components/revisions-drawer-detail/revisions-date-group.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<v-detail v-model="expand" :label="group.dateFormatted" class="revisions-date-group">
<div v-show="expand" class="scroll-container">
<revision-item
v-for="(item, index) in group.revisions"
:key="item.id"
:revision="item"
:last="index === group.revisions.length - 1"
@click="$emit('click', item.id)"
/>
</div>
</v-detail>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import RevisionItem from './revision-item.vue';
export default defineComponent({
components: { RevisionItem },
props: {
group: {
type: Object,
required: true,
},
},
emits: ['click'],
setup() {
const expand = ref(true);
return { expand };
},
});
</script>
<style scoped>
.revisions-date-group .scroll-container {
padding-bottom: 24px;
}
</style>

55
app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
View File

@@ -8,28 +8,17 @@
<template v-else>
<template v-for="group in revisionsByDate" :key="group.date.toString()">
<v-divider>{{ group.dateFormatted }}</v-divider>
<template v-for="(item, index) in group.revisions" :key="item.id">
<revision-item :revision="item" :last="index === group.revisions.length - 1" @click="openModal(item.id)" />
</template>
<RevisionsDateGroup :group="group" @click="openModal" />
</template>
<v-divider v-if="revisionsCount > 100" class="other">
{{ t('count_other_revisions', revisionsCount - 101) }}
</v-divider>
<template v-if="created">
<revision-item :revision="created" last @click="openModal(created.id)" />
</template>
<template v-else>
<template v-if="page == pagesCount && !created">
<v-divider v-if="revisionsByDate.length > 0" />
<div class="external">
{{ t('revision_delta_created_externally') }}
</div>
</template>
<v-pagination v-if="pagesCount > 1" v-model="page" :length="pagesCount" :total-visible="2" />
</template>
<revisions-drawer
@@ -44,20 +33,20 @@
<script lang="ts">
import { useI18n } from 'vue-i18n';
import { defineComponent, ref } from 'vue';
import { defineComponent, ref, watch } from 'vue';
import { Revision, RevisionsByDate } from './types';
import api from '@/api';
import { groupBy, orderBy } from 'lodash';
import { isToday, isYesterday, isThisYear } from 'date-fns';
import formatLocalized from '@/utils/localized-format';
import RevisionItem from './revision-item.vue';
import RevisionsDateGroup from './revisions-date-group.vue';
import RevisionsDrawer from './revisions-drawer.vue';
import { unexpectedError } from '@/utils/unexpected-error';
import { abbreviateNumber } from '@/utils/abbreviate-number';
export default defineComponent({
components: { RevisionItem, RevisionsDrawer },
components: { RevisionsDrawer, RevisionsDateGroup },
props: {
collection: {
type: String,
@@ -72,13 +61,21 @@ export default defineComponent({
setup(props) {
const { t } = useI18n();
const { revisions, revisionsByDate, loading, refresh, revisionsCount, created } = useRevisions(
const { revisions, revisionsByDate, loading, refresh, revisionsCount, pagesCount, created } = useRevisions(
props.collection,
props.primaryKey
);
const modalActive = ref(false);
const modalCurrentRevision = ref<number | null>(null);
const page = ref<number>(1);
watch(
() => page.value,
(newPage) => {
refresh(newPage);
}
);
return {
t,
@@ -91,6 +88,8 @@ export default defineComponent({
openModal,
revisionsCount,
created,
page,
pagesCount,
abbreviateNumber,
};
@@ -105,13 +104,15 @@ export default defineComponent({
const loading = ref(false);
const revisionsCount = ref(0);
const created = ref<Revision>();
const pagesCount = ref(0);
getRevisions();
return { created, revisions, revisionsByDate, loading, refresh, revisionsCount };
return { created, revisions, revisionsByDate, loading, refresh, revisionsCount, pagesCount };
async function getRevisions() {
async function getRevisions(page = 0) {
loading.value = true;
const pageSize = 100;
try {
const response = await api.get(`/revisions`, {
@@ -125,7 +126,8 @@ export default defineComponent({
},
},
sort: '-id',
limit: 100,
limit: pageSize,
page,
fields: [
'id',
'data',
@@ -217,15 +219,16 @@ export default defineComponent({
revisionsByDate.value = orderBy(revisionsGrouped, ['date'], ['desc']);
revisions.value = orderBy(response.data.data, ['activity.timestamp'], ['desc']);
revisionsCount.value = response.data.meta.filter_count;
} catch (err: any) {
pagesCount.value = Math.ceil(revisionsCount.value / pageSize);
} catch (err) {
unexpectedError(err);
} finally {
loading.value = false;
}
}
async function refresh() {
await getRevisions();
async function refresh(page = 0) {
await getRevisions(page);
}
}
},
@@ -276,4 +279,8 @@ export default defineComponent({
font-style: italic;
}
.v-pagination {
justify-content: center;
}
</style>