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

frontend/src/stores/loading.js

@@ -0,0 +1,138 @@
+import { defineStore } from "pinia";
+
+export const useLoadingStore = defineStore("loading", {
+	state: () => ({
+		// Global loading state
+		isLoading: false,
+
+		// Component-specific loading states for more granular control
+		componentLoading: {
+			dataTable: false,
+			form: false,
+			clients: false,
+			jobs: false,
+			timesheets: false,
+			warranties: false,
+			routes: false,
+			api: false,
+		},
+
+		// Loading messages for different contexts
+		loadingMessage: "Loading...",
+
+		// Track loading operations with custom keys
+		operations: new Map(),
+	}),
+
+	getters: {
+		// Check if any loading is happening
+		isAnyLoading: (state) => {
+			return (
+				state.isLoading ||
+				Object.values(state.componentLoading).some((loading) => loading) ||
+				state.operations.size > 0
+			);
+		},
+
+		// Get loading state for a specific component
+		getComponentLoading: (state) => (componentName) => {
+			return state.componentLoading[componentName] || false;
+		},
+
+		// Check if a specific operation is loading
+		isOperationLoading: (state) => (operationKey) => {
+			return state.operations.has(operationKey);
+		},
+	},
+
+	actions: {
+		// Set global loading state
+		setLoading(isLoading, message = "Loading...") {
+			this.isLoading = isLoading;
+			this.loadingMessage = message;
+		},
+
+		// Set component-specific loading state
+		setComponentLoading(componentName, isLoading, message = "Loading...") {
+			if (this.componentLoading.hasOwnProperty(componentName)) {
+				this.componentLoading[componentName] = isLoading;
+			} else {
+				this.componentLoading[componentName] = isLoading;
+			}
+			if (isLoading) {
+				this.loadingMessage = message;
+			}
+		},
+
+		// Start loading for a specific operation
+		startOperation(operationKey, message = "Loading...") {
+			this.operations.set(operationKey, {
+				startTime: Date.now(),
+				message: message,
+			});
+			this.loadingMessage = message;
+		},
+
+		// Stop loading for a specific operation
+		stopOperation(operationKey) {
+			this.operations.delete(operationKey);
+		},
+
+		// Clear all loading states
+		clearAllLoading() {
+			this.isLoading = false;
+			Object.keys(this.componentLoading).forEach((key) => {
+				this.componentLoading[key] = false;
+			});
+			this.operations.clear();
+			this.loadingMessage = "Loading...";
+		},
+
+		// Convenience methods for common operations
+		startApiCall(apiName = "api") {
+			this.setComponentLoading("api", true, `Loading ${apiName}...`);
+		},
+
+		stopApiCall() {
+			this.setComponentLoading("api", false);
+		},
+
+		startDataTableLoading(message = "Loading data...") {
+			this.setComponentLoading("dataTable", true, message);
+		},
+
+		stopDataTableLoading() {
+			this.setComponentLoading("dataTable", false);
+		},
+
+		startFormLoading(message = "Processing...") {
+			this.setComponentLoading("form", true, message);
+		},
+
+		stopFormLoading() {
+			this.setComponentLoading("form", false);
+		},
+
+		// Async wrapper for operations
+		async withLoading(operationKey, asyncOperation, message = "Loading...") {
+			try {
+				this.startOperation(operationKey, message);
+				const result = await asyncOperation();
+				return result;
+			} finally {
+				this.stopOperation(operationKey);
+			}
+		},
+
+		// Async wrapper for component loading
+		async withComponentLoading(componentName, asyncOperation, message = "Loading...") {
+			try {
+				this.setComponentLoading(componentName, true, message);
+				const result = await asyncOperation();
+				return result;
+			} finally {
+				this.setComponentLoading(componentName, false);
+			}
+		},
+	},
+});