TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-24 05:05:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

(admin) put user / profile charts behind a loading spinner and make user charts optional to load

Browse Source
This commit is contained in:
Valentyne Stigloher 2024-09-26 18:55:22 +02:00
parent c336d8f2f3
commit 160cde5d2c
2 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
pages/admin/profiles.vue
View File

@ -13,9 +13,9 @@
Profiles Profiles
</h2> </h2>
<section> <Loading :value="chart">
<ChartSet :name="`profiles (${config.locale})`" :data="chart" init="cumulative" /> <ChartSet :name="`profiles (${config.locale})`" :data="chart" init="cumulative" />
</section> </Loading>
</div> </div>
</Page> </Page>
</template> </template>
@ -34,7 +34,10 @@ export default defineComponent({
title: `${translator.translate('admin.header')} • Profiles`, title: `${translator.translate('admin.header')} • Profiles`,
}, translator); }, translator);
const { data: chart } = await useFetch(`/api/admin/stats/users-chart/${config.locale}`); const { data: chart } = await useFetch(
`/api/admin/stats/users-chart/${config.locale}`,
{ server: false, lazy: true },
);
return { return {
config: useConfig(), config: useConfig(),

25
pages/admin/users.vue
View File

@ -107,7 +107,15 @@
</section> </section>
<section> <section>
<ChartSet name="users" :data="chart" init="cumulative" /> <details class="border" @toggle="fetchChart()">
<summary class="bg-light p-3">
<Icon v="chart-line" />
Chart
</summary>
<Loading :value="chartAsyncData.data.value" class="m-0">
<ChartSet name="users" :data="chartAsyncData.data.value" init="cumulative" />
</Loading>
</details>
</section> </section>
<section> <section>
@ -149,17 +157,17 @@ export default {
const impersonatorCookie = useCookie('impersonator', longtimeCookieSetting); const impersonatorCookie = useCookie('impersonator', longtimeCookieSetting);
const stats = useFetch('/api/admin/stats'); const statsAsyncData = useFetch('/api/admin/stats');
const chart = useFetch('/api/admin/stats/users-chart/_'); const chartAsyncData = useFetch('/api/admin/stats/users-chart/_', { immediate: false });
await Promise.all([stats, chart]); await statsAsyncData;
return { return {
config: useConfig(), config: useConfig(),
dialogue, dialogue,
tokenCookie, tokenCookie,
impersonatorCookie, impersonatorCookie,
stats: stats.data.value, stats: statsAsyncData.data.value,
chart: chart.data.value, chartAsyncData,
}; };
}, },
data() { data() {
@ -218,6 +226,11 @@ export default {
await this.dialogue.alert(this.$t('error.generic', 'danger')); await this.dialogue.alert(this.$t('error.generic', 'danger'));
} }
}, },
fetchChart() {
if (this.chartAsyncData.status.value === 'idle') {
this.chartAsyncData.execute();
}
},
}, },
}; };
</script> </script>