github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Optimise export sidebar aggregation call (#18724)

Browse Source 
* Fetch item count in export sidebar only when active

* Remove redundant query params for count aggregation without grouping

* Remove chaining for code consistency

Co-authored-by: Azri Kahar <42867097+azrikahar@users.noreply.github.com>

* Create smart-files-protect.md

---------

Co-authored-by: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
This commit is contained in:
ian
2023-05-26 01:18:18 +08:00
committed by GitHub
parent 4683227272
commit 3754fb0ec8
2 changed files with 34 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/smart-files-protect.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@directus/app": patch
---
Optimised export sidebar aggregation call

50
app/src/views/private/components/export-sidebar-detail.vue
View File

@@ -53,7 +53,7 @@
</template>
<div class="field full">
<v-button small full-width @click="exportDialogActive = true">
<v-button small full-width @click="openExportDialog">
{{ t('export_items') }}
</v-button>
@@ -138,7 +138,10 @@
<v-notice class="full" :type="lockedToFiles ? 'warning' : 'normal'">
<div>
<p>
<template v-if="exportSettings.limit === 0 || itemCount === 0">
<template v-if="itemCountLoading">
{{ t('loading') }}
</template>
<template v-else-if="exportSettings.limit === 0 || itemCount === 0">
{{ t('exporting_no_items_to_export') }}
</template>
<template
@@ -243,7 +246,7 @@ import { useCollection } from '@directus/composables';
import { Filter } from '@directus/types';
import { getEndpoint } from '@directus/utils';
import type { AxiosProgressEvent } from 'axios';
import { debounce } from 'lodash';
import { debounce, pick } from 'lodash';
import { computed, reactive, ref, toRefs, watch } from 'vue';
import { useI18n } from 'vue-i18n';
@@ -365,22 +368,22 @@ const getItemCount = debounce(async () => {
count: ['*'],
};
const count = await api
.get(getEndpoint(collection.value), {
params: {
...exportSettings,
aggregate,
},
})
.then((response) => {
if (response.data.data?.[0]?.count) {
return Number(response.data.data[0].count);
}
const response = await api.get(getEndpoint(collection.value), {
params: {
...pick(exportSettings, ['search', 'filter']),
aggregate,
},
});
if (response.data.data?.[0]?.countDistinct) {
return Number(response.data.data[0].countDistinct[primaryKeyField.value!.field]);
}
});
let count;
if (response.data.data?.[0]?.count) {
count = Number(response.data.data[0].count);
}
if (response.data.data?.[0]?.countDistinct) {
count = Number(response.data.data[0].countDistinct[primaryKeyField.value!.field]);
}
itemCount.value = count;
} finally {
@@ -388,10 +391,10 @@ const getItemCount = debounce(async () => {
}
}, 250);
getItemCount();
watch(exportSettings, () => {
getItemCount();
if (exportDialogActive.value) {
getItemCount();
}
});
watch(primaryKeyField, (newVal) => {
@@ -427,6 +430,11 @@ const sortField = computed({
const exporting = ref(false);
function openExportDialog() {
getItemCount();
exportDialogActive.value = true;
}
function onChange(event: Event) {
const files = (event.target as HTMLInputElement)?.files;