bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add global loading state, update to use real data for clients table

Browse source
This commit is contained in:
Casey 2025-11-04 08:33:14 -06:00
parent 2cfe7ed8e6
commit 464c62d1e5
12 changed files with 1075 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/components/pages/Clients.vue
View file

@ -14,7 +14,13 @@ import { onMounted, ref } from "vue";
import DataTable from "../common/DataTable.vue";
import Api from "../../api";
import { FilterMatchMode } from "@primevue/core";
import { useLoadingStore } from "../../stores/loading";
const loadingStore = useLoadingStore();
const itemCount = ref(0);
const page = ref(0);
const pageLength = ref(30);
const tableData = ref([]);
const onClick = () => {
@ -35,20 +41,31 @@ const columns = [
},
{
label: "Appt. Scheduled",
fieldName: "appointmentScheduled",
fieldName: "appointmentStatus",
type: "status",
sortable: true,
},
{ label: "Estimate Sent", fieldName: "estimateSent", type: "status", sortable: true },
{ label: "Payment Received", fieldName: "paymentReceived", type: "status", sortable: true },
{ label: "Estimate Sent", fieldName: "estimateStatus", type: "status", sortable: true },
{ label: "Payment Received", fieldName: "paymentStatus", type: "status", sortable: true },
{ label: "Job Status", fieldName: "jobStatus", type: "status", sortable: true },
];
onMounted(async () => {
if (tableData.value.length > 0) {
return;
}
let data = await Api.getClientDetails();
tableData.value = data;
try {
// Use the loading store to track this API call
const data = await loadingStore.withComponentLoading(
"clients",
() => Api.getClientDetails(),
"Loading client data...",
);
tableData.value = data;
} catch (error) {
console.error("Error loading client data:", error);
// You could also show a toast or other error notification here
}
});
</script>
<style lang="css"></style>