82 lines
3 KiB
Vue
82 lines
3 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref, watch } from "vue";
|
|
|
|
import AsyncStateGate from "@/components/patterns/AsyncStateGate.vue";
|
|
import RequestStateAlerts from "@/components/patterns/RequestStateAlerts.vue";
|
|
import AdminIntegritySection from "@/features/settings/components/AdminIntegritySection.vue";
|
|
import AdminPdfQueueSection from "@/features/settings/components/AdminPdfQueueSection.vue";
|
|
import AdminRepairsSection from "@/features/settings/components/AdminRepairsSection.vue";
|
|
import AdminUsersSection from "@/features/settings/components/AdminUsersSection.vue";
|
|
import { useRequestState } from "@/composables/useRequestState";
|
|
|
|
const SECTION_USERS = "users";
|
|
const SECTION_INTEGRITY = "integrity";
|
|
const SECTION_REPAIRS = "repairs";
|
|
const SECTION_PDF = "pdf";
|
|
|
|
const props = defineProps<{
|
|
section: "users" | "integrity" | "repairs" | "pdf";
|
|
}>();
|
|
|
|
const loading = ref(true);
|
|
const { errorMessage, errorRequestId, successMessage, clearAlerts, assignError } = useRequestState();
|
|
|
|
const usersRef = ref<InstanceType<typeof AdminUsersSection> | null>(null);
|
|
const integrityRef = ref<InstanceType<typeof AdminIntegritySection> | null>(null);
|
|
const repairsRef = ref<InstanceType<typeof AdminRepairsSection> | null>(null);
|
|
const pdfQueueRef = ref<InstanceType<typeof AdminPdfQueueSection> | null>(null);
|
|
|
|
async function refreshForSection(): Promise<void> {
|
|
if (props.section === SECTION_USERS && usersRef.value) {
|
|
await usersRef.value.load();
|
|
return;
|
|
}
|
|
if (props.section === SECTION_INTEGRITY && integrityRef.value) {
|
|
await integrityRef.value.load();
|
|
return;
|
|
}
|
|
if (props.section === SECTION_REPAIRS) {
|
|
await usersRef.value?.load();
|
|
await repairsRef.value?.load();
|
|
return;
|
|
}
|
|
if (props.section === SECTION_PDF && pdfQueueRef.value) {
|
|
await pdfQueueRef.value.load();
|
|
}
|
|
}
|
|
|
|
async function loadSection(): Promise<void> {
|
|
loading.value = true;
|
|
clearAlerts();
|
|
try {
|
|
await refreshForSection();
|
|
} catch (error) {
|
|
assignError(error, "Unable to load admin data.");
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
onMounted(loadSection);
|
|
watch(() => props.section, loadSection);
|
|
</script>
|
|
|
|
<template>
|
|
<section class="grid gap-4">
|
|
<RequestStateAlerts
|
|
:success-message="successMessage"
|
|
:error-message="errorMessage"
|
|
:error-request-id="errorRequestId"
|
|
success-title="Operation complete"
|
|
error-title="Operation failed"
|
|
@dismiss-success="successMessage = null"
|
|
/>
|
|
|
|
<AsyncStateGate :loading="loading" :loading-lines="10" :show-empty="false">
|
|
<AdminUsersSection v-if="props.section === SECTION_USERS || props.section === SECTION_REPAIRS" v-show="props.section === SECTION_USERS" ref="usersRef" />
|
|
<AdminIntegritySection v-if="props.section === SECTION_INTEGRITY" ref="integrityRef" />
|
|
<AdminRepairsSection v-if="props.section === SECTION_REPAIRS" ref="repairsRef" :users="usersRef?.users ?? []" />
|
|
<AdminPdfQueueSection v-if="props.section === SECTION_PDF" ref="pdfQueueRef" />
|
|
</AsyncStateGate>
|
|
</section>
|
|
</template>
|