quasar-ui-danx 0.4.1 → 0.4.3

package/src/helpers/FlashMessages.ts

@@ -3,86 +3,95 @@ import { watch } from "vue";
 import { danxOptions } from "../config";
 
 export class FlashMessages {
-    static notify: (options: QNotifyCreateOptions) => void;
+	static notify: (options: QNotifyCreateOptions) => void;
 
-    static PROP_DEFINITIONS = {
-        successMsg: {
-            type: String,
-            default: ""
-        },
-        errorMsg: {
-            type: String,
-            default: ""
-        },
-        warningMsg: {
-            type: String,
-            default: ""
-        }
-    };
+	static PROP_DEFINITIONS = {
+		successMsg: {
+			type: String,
+			default: ""
+		},
+		errorMsg: {
+			type: String,
+			default: ""
+		},
+		warningMsg: {
+			type: String,
+			default: ""
+		}
+	};
 
-    static enable(msgProps: { successMsg?: string, errorMsg?: string, warningMsg?: string }) {
-        FlashMessages.success(msgProps.successMsg);
-        FlashMessages.error(msgProps.errorMsg);
-        FlashMessages.warning(msgProps.warningMsg);
-        watch(() => msgProps.successMsg, msg => FlashMessages.success(msg));
-        watch(() => msgProps.errorMsg, msg => FlashMessages.error(msg));
-        watch(() => msgProps.warningMsg, msg => FlashMessages.warning(msg));
-    }
+	static enable(msgProps: { successMsg?: string, errorMsg?: string, warningMsg?: string }) {
+		FlashMessages.success(msgProps.successMsg);
+		FlashMessages.error(msgProps.errorMsg);
+		FlashMessages.warning(msgProps.warningMsg);
+		watch(() => msgProps.successMsg, msg => FlashMessages.success(msg));
+		watch(() => msgProps.errorMsg, msg => FlashMessages.error(msg));
+		watch(() => msgProps.warningMsg, msg => FlashMessages.warning(msg));
+	}
 
-    static send(message?: string, options: QNotifyCreateOptions = {}) {
-        if (message) {
-            FlashMessages.notify({
-                message,
-                timeout: 10000,
-                classes: "bg-gray-500 text-white",
-                position: "top",
-                closeBtn: "X",
-                ...danxOptions.value.flashMessages.default,
-                ...options
-            });
-        }
-    }
+	static formatMessage(message: string) {
+		message = message.replace(/\r\n|\r|\n/g, "<br/>");
+		message = message.replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;");
+		// Replace <SomeComponent ... > with <b>SomeComponent ... </b>
+		return message.replace(/<(\w+)([^>]*)>/g, "<b>$1$2</b>");
+	}
 
-    static success(message?: string, options: QNotifyCreateOptions = {}) {
-        FlashMessages.send(message, {
-            classes: "bg-green-300 !text-green-900",
-            icon: "check",
-            ...options,
-            ...danxOptions.value.flashMessages.success
-        });
-    }
+	static send(message?: string, options: QNotifyCreateOptions = {}) {
+		if (message) {
+			message = FlashMessages.formatMessage(message);
 
-    static error(message?: string, options: QNotifyCreateOptions = {}) {
-        FlashMessages.send(message, {
-            classes: "bg-red-300 !text-red-900",
-            icon: "error",
-            ...options,
-            ...danxOptions.value.flashMessages.error
-        });
-    }
+			FlashMessages.notify({
+				message,
+				timeout: 10000,
+				classes: "bg-gray-500 text-white",
+				position: "top",
+				closeBtn: "X",
+				...danxOptions.value.flashMessages?.default,
+				...options
+			});
+		}
+	}
 
-    static warning(message?: string, options: QNotifyCreateOptions = {}) {
-        FlashMessages.send(message, {
-            classes: "bg-yellow-300 !text-yellow-900",
-            icon: "warning",
-            ...options,
-            ...danxOptions.value.flashMessages.warning
-        });
-    }
+	static success(message?: string, options: QNotifyCreateOptions = {}) {
+		FlashMessages.send(message, {
+			classes: "bg-green-300 !text-green-900",
+			icon: "check",
+			...options,
+			...danxOptions.value.flashMessages?.success
+		});
+	}
 
-    static combine(type: string, messages: string[] | { message: string, Message: string }[], options = {}) {
-        // @ts-expect-error - type is a string
-        const messageType = FlashMessages[type];
+	static error(message?: string, options: QNotifyCreateOptions = {}) {
+		FlashMessages.send(message, {
+			classes: "bg-red-300 !text-red-900",
+			icon: "error",
+			...options,
+			...danxOptions.value.flashMessages?.error
+		});
+	}
 
-        if (typeof messageType !== "function") {
-            throw new Error(`FlashMessages.${type} is not a function`);
-        }
+	static warning(message?: string, options: QNotifyCreateOptions = {}) {
+		FlashMessages.send(message, {
+			classes: "bg-yellow-300 !text-yellow-900",
+			icon: "warning",
+			...options,
+			...danxOptions.value.flashMessages?.warning
+		});
+	}
 
-        messageType(messages.map(m => typeof m === "string" ? m : (m.message || m.Message)).join("<br/>"), {
-            ...options,
-            html: true
-        });
-    }
+	static combine(type: string, messages: string[] | { message: string, Message: string }[], options = {}) {
+		// @ts-expect-error - type is a string
+		const messageType = FlashMessages[type];
+
+		if (typeof messageType !== "function") {
+			throw new Error(`FlashMessages.${type} is not a function`);
+		}
+
+		messageType(messages.map(m => typeof m === "string" ? m : (m.message || m.Message)).join("<br/>"), {
+			...options,
+			html: true
+		});
+	}
 }
 
 export const notify = new FlashMessages();

package/src/helpers/actions.ts

@@ -1,36 +1,9 @@
 import { useDebounceFn } from "@vueuse/core";
-import { Ref, shallowRef, VNode } from "vue";
+import { uid } from "quasar";
+import { isReactive, Ref, shallowRef } from "vue";
+import { ActionOptions, ActionTarget, AnyObject } from "../types";
 import { FlashMessages } from "./FlashMessages";
-
-export type AnyObject = { [key: string]: any };
-
-export type ActionTargetItem = {
-	id: number | string;
-	isSaving: Ref<boolean>;
-	[key: string]: any;
-};
-export type ActionTarget = ActionTargetItem[] | ActionTargetItem;
-
-export interface ActionOptions {
-	name?: string;
-	label?: string;
-	menu?: boolean;
-	batch?: boolean;
-	category?: string;
-	class?: string;
-	debounce?: number;
-	trigger?: (target: ActionTarget, input: any) => Promise<any>;
-	vnode?: ((target: ActionTarget) => VNode) | undefined;
-	enabled?: (target: object) => boolean;
-	batchEnabled?: (targets: object[]) => boolean;
-	optimistic?: (action: ActionOptions, target: object, input: any) => void;
-	onAction?: (action: string | null | undefined, target: object, input: any) => Promise<any>;
-	onBatchAction?: (action: string | null | undefined, targets: object[], input: any) => Promise<any>;
-	onStart?: (action: ActionOptions | null, targets: ActionTarget, input: any) => boolean;
-	onSuccess?: (result: any, targets: ActionTarget, input: any) => any;
-	onError?: (result: any, targets: ActionTarget, input: any) => any;
-	onFinish?: (result: any, targets: ActionTarget, input: any) => any;
-}
+import { storeObject } from "./objectStore";
 
 export const activeActionVnode: Ref = shallowRef(null);
 
@@ -42,48 +15,67 @@ export const activeActionVnode: Ref = shallowRef(null);
  * @param {ActionOptions | null} globalOptions
  */
 export function useActions(actions: ActionOptions[], globalOptions: ActionOptions | null = null) {
-	const mappedActions = actions.map(action => {
-		const mappedAction: ActionOptions = { ...globalOptions, ...action };
-		if (mappedAction.debounce) {
-			mappedAction.trigger = useDebounceFn((target, input) => performAction(mappedAction, target, input, true), mappedAction.debounce);
-		} else if (!mappedAction.trigger) {
-			mappedAction.trigger = (target, input) => performAction(mappedAction, target, input, true);
+	const namespace = uid();
+
+	/**
+	 * Resolve the action object based on the provided name (or return the object if the name is already an object)
+	 */
+	function getAction(action: string | ActionOptions): ActionOptions {
+		if (typeof action === "string") {
+			action = actions.find(a => a.name === action) || { name: action };
+		}
+
+		// If the action is already reactive, return it
+		if (isReactive(action) && action.__type) return action;
+
+		action = { ...globalOptions, ...action };
+
+		// Assign Trigger function if it doesn't exist
+		if (!action.trigger) {
+			if (action.debounce) {
+				action.trigger = useDebounceFn((target, input) => performAction(action, target, input), action.debounce);
+			} else {
+				action.trigger = (target, input) => performAction(action, target, input);
+			}
 		}
-		return mappedAction;
-	});
+
+		// Set the initial state for the action
+		action.isApplying = false;
+
+		return storeObject({ ...action, __type: "__Action:" + namespace });
+	}
 
 	/**
-	 * Set the reactive saving state of a target
+	 * Filter the list of actions based on the provided filters in key-value pairs
+	 * You can filter on any ActionOptions property by matching the value exactly or by providing an array of values
+	 *
+	 * @param filters
+	 * @returns {ActionOptions[]}
 	 */
-	function setTargetSavingState(target: ActionTarget, saving: boolean) {
-		if (Array.isArray(target)) {
-			for (const t of target) {
-				t.isSaving.value = saving;
+	function getActions(filters?: AnyObject): ActionOptions[] {
+		let filteredActions = [...actions];
+
+		if (filters) {
+			for (const filter of Object.keys(filters)) {
+				const filterValue = filters[filter];
+				filteredActions = filteredActions.filter((a: AnyObject) => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
 			}
-		} else {
-			target.isSaving.value = saving;
 		}
+
+		return filteredActions.map((a: AnyObject) => getAction(a));
 	}
 
 	/**
 	 * Perform an action on a set of targets
 	 *
-	 * @param {string} name - can either be a string or an action object
+	 * @param {string} action - can either be a string or an action object
 	 * @param {object[]|object} target - an array of targets or a single target object
 	 * @param {any} input - The input data to pass to the action handler
-	 * @param isTriggered - Whether the action was triggered by a trigger function
 	 */
-	async function performAction(name: string | object, target: ActionTarget, input: any = null, isTriggered = false) {
-		const action: ActionOptions | null | undefined = typeof name === "string" ? mappedActions.find(a => a.name === name) : name;
-		if (!action) {
-			throw new Error(`Unknown action: ${name}`);
-		}
-
-		// We always want to call the trigger function if it exists, unless it's already been triggered
-		// This provides behavior like debounce and custom action resolution
-		if (action.trigger && !isTriggered) {
-			return action.trigger(target, input);
-		}
+	async function performAction(action: string | ActionOptions, target: ActionTarget = null, input: any = null) {
+		action = getAction(action);
+		// Resolve the original action, if the current action is an alias
+		const aliasedAction = action.alias ? getAction(action.alias) : null;
 
 		const vnode = action.vnode && action.vnode(target);
 		let result: any;
@@ -96,6 +88,11 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
 		}
 
 		setTargetSavingState(target, true);
+		action.isApplying = true;
+
+		if (aliasedAction) {
+			aliasedAction.isApplying = true;
+		}
 
 		// If additional input is required, first render the vnode and wait for the confirm or cancel action
 		if (vnode) {
@@ -124,56 +121,70 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
 			result = await onConfirmAction(action, target, input);
 		}
 
+		action.isApplying = false;
 		setTargetSavingState(target, false);
 
-		return result;
-	}
-
-	/**
-	 * Filter the list of actions based on the provided filters in key-value pairs
-	 * You can filter on any ActionOptions property by matching the value exactly or by providing an array of values
-	 *
-	 * @param filters
-	 * @returns {ActionOptions[]}
-	 */
-	function filterActions(filters: AnyObject): ActionOptions[] {
-		let filteredActions = [...mappedActions];
+		if (aliasedAction) {
+			aliasedAction.isApplying = false;
+		}
 
-		for (const filter of Object.keys(filters)) {
-			const filterValue = filters[filter];
-			filteredActions = filteredActions.filter((a: AnyObject) => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
+		if (result?.item) {
+			result.item = storeObject(result.item);
 		}
-		return filteredActions;
+
+		return result;
 	}
 
 	return {
-		actions: mappedActions,
-		filterActions,
-		performAction
+		getAction,
+		getActions
 	};
 }
 
+/**
+ * Set the reactive saving state of a target
+ */
+function setTargetSavingState(target: ActionTarget, saving: boolean) {
+	if (!target) return;
+	target = Array.isArray(target) ? target : [target];
+	for (const t of target) {
+		t.isSaving = saving;
+	}
+}
+
+/**
+ * Execute the confirmed action on the target (ie: calling the server, or whatever the callback function does).
+ *
+ * 1. If the action has an optimistic callback, it will be called before the actual action to immediately update the UI (non batch actions only).
+ * 2. Call the onBatchAction or onAction callback of the action object, depending on if the target is an array or not.
+ * 3. Call the onSuccess or onError callback based on the result of the action.
+ * 4. Call the onFinish callback of the action object.
+ */
 async function onConfirmAction(action: ActionOptions, target: ActionTarget, input: any = null) {
 	if (!action.onAction) {
 		throw new Error("No onAction handler found for the selected action:" + action.name);
 	}
 
+	const isBatch = Array.isArray(target);
 	let result: any;
+
 	try {
-		if (Array.isArray(target)) {
+		if (isBatch) {
 			if (action.onBatchAction) {
-				result = await action.onBatchAction(action.name, target, input);
+				result = await action.onBatchAction(action.alias || action.name, target, input);
 			} else {
 				result = { error: `Action ${action.name} does not support batch actions` };
 			}
 		} else {
 			// If the action has an optimistic callback, we call it before the actual action to immediately
 			// update the UI
-			if (action.optimistic) {
+			if (typeof action.optimistic === "function") {
 				action.optimistic(action, target, input);
+			} else if (action.optimistic) {
+				storeObject({ ...target, ...input });
 			}
 
-			result = await action.onAction(action.name, target, input);
+			result = await action.onAction(action.alias || action.name, target, input);
 		}
 	} catch (e) {
 		console.error(e);
@@ -182,6 +193,11 @@ async function onConfirmAction(action: ActionOptions, target: ActionTarget, inpu
 
 	// If there is no return value or the result marks it as successful, we show a success message
 	if (result === undefined || result === true || result?.success) {
+		// Add the item to the object store if it has a type
+		if (result && result.item) {
+			result.item = storeObject(result.item);
+		}
+
 		if (result?.success && Array.isArray(target)) {
 			FlashMessages.success(`Successfully performed action ${action.label} on ${target.length} items`);
 		}
@@ -189,6 +205,10 @@ async function onConfirmAction(action: ActionOptions, target: ActionTarget, inpu
 		if (action.onSuccess) {
 			action.onSuccess(result, target, input);
 		}
+
+		if (isBatch && action.onBatchSuccess) {
+			action.onBatchSuccess(result, target, input);
+		}
 	} else {
 		const errors = [];
 		if (result.errors) {