quasar-ui-danx 0.4.27 → 0.4.28

package/src/components/Utility/Dialogs/ActionFormDialog.vue

@@ -0,0 +1,30 @@
+<template>
+  <ConfirmDialog
+    :title="title"
+    :confirm-text="confirmText || title"
+    @confirm="$emit('confirm', {name})"
+    @close="$emit('close')"
+  >
+    <ActionForm
+      :form="form"
+      :action="action"
+      :target="target"
+    />
+  </ConfirmDialog>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import { ActionTargetItem, Form, ResourceAction } from "../../../types";
+import { ActionForm } from "../../ActionTable";
+import ConfirmDialog from "./ConfirmDialog";
+
+defineEmits(["confirm", "close"]);
+defineProps<{
+	title: string;
+	confirmText?: string;
+	form: Form;
+	action: ResourceAction;
+	target: ActionTargetItem;
+}>();
+const name = ref("");
+</script>

package/src/components/Utility/Dialogs/CreateNewWithNameDialog.vue

@@ -0,0 +1,26 @@
+<template>
+  <ConfirmDialog
+    :title="title"
+    :confirm-text="confirmText || title"
+    @confirm="$emit('confirm', {name})"
+    @close="$emit('close')"
+  >
+    <TextField
+      v-model="name"
+      label="Name"
+    />
+    <slot />
+  </ConfirmDialog>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import { TextField } from "../../ActionTable";
+import ConfirmDialog from "./ConfirmDialog";
+
+defineEmits(["confirm", "close"]);
+defineProps<{
+	title: string;
+	confirmText?: string;
+}>();
+const name = ref("");
+</script>

package/src/components/Utility/Dialogs/RenderedFormDialog.vue

@@ -0,0 +1,50 @@
+<template>
+  <ConfirmDialog
+    :title="title"
+    :confirm-text="confirmText || title"
+    :content-class="contentClass"
+    @confirm="$emit('confirm', input)"
+    @close="$emit('close')"
+  >
+    <RenderedForm
+      v-bind="renderedFormProps"
+      v-model:values="input"
+      empty-value=""
+    >
+      <slot />
+    </RenderedForm>
+  </ConfirmDialog>
+</template>
+<script setup lang="ts">
+import { AnyObject, Form } from "../../../types";
+import { RenderedForm } from "../../ActionTable/Form";
+import ConfirmDialog from "./ConfirmDialog";
+
+defineEmits(["confirm", "close"]);
+const props = defineProps<{
+	title: string;
+	confirmText?: string;
+	form: Form;
+	noLabel?: boolean;
+	showName?: boolean;
+	disable?: boolean;
+	readonly?: boolean;
+	clearable?: boolean;
+	fieldClass?: string;
+	savingClass?: string;
+	hideSavedAt?: boolean;
+	contentClass?: string;
+}>();
+const input = defineModel<AnyObject>();
+
+const renderedFormProps = {
+	form: props.form,
+	noLabel: props.noLabel,
+	showName: props.showName,
+	disable: props.disable,
+	readonly: props.readonly,
+	clearable: props.clearable,
+	fieldClass: props.fieldClass,
+	savingClass: props.savingClass
+};
+</script>

package/src/components/Utility/Dialogs/index.ts

@@ -1,6 +1,9 @@
+export { default as ActionFormDialog } from "./ActionFormDialog.vue";
 export { default as ConfirmActionDialog } from "./ConfirmActionDialog.vue";
 export { default as ConfirmDialog } from "./ConfirmDialog.vue";
+export { default as CreateNewWithNameDialog } from "./CreateNewWithNameDialog.vue";
 export { default as FullScreenCarouselDialog } from "./FullscreenCarouselDialog.vue";
 export { default as FullScreenDialog } from "./FullScreenDialog.vue";
 export { default as InfoDialog } from "./InfoDialog.vue";
 export { default as InputDialog } from "./InputDialog.vue";
+export { default as RenderedFormDialog } from "./RenderedFormDialog.vue";

package/src/helpers/actions.ts

@@ -1,7 +1,9 @@
 import { useDebounceFn } from "@vueuse/core";
+import { FaSolidCopy as CopyIcon, FaSolidPencil as EditIcon, FaSolidTrash as DeleteIcon } from "danx-icon";
 import { uid } from "quasar";
-import { isReactive, Ref, shallowRef } from "vue";
-import type { ActionOptions, ActionTarget, AnyObject, ResourceAction } from "../types";
+import { h, isReactive, Ref, shallowRef } from "vue";
+import { ConfirmActionDialog, CreateNewWithNameDialog } from "../components";
+import type { ActionGlobalOptions, ActionOptions, ActionTarget, ListController, ResourceAction } from "../types";
 import { FlashMessages } from "./FlashMessages";
 import { storeObject } from "./objectStore";
 
@@ -11,7 +13,7 @@ export const activeActionVnode: Ref = shallowRef(null);
  * Hook to perform an action on a set of targets
  * This helper allows you to perform actions by name on a set of targets using a provided list of actions
  */
-export function useActions(actions: ActionOptions[], globalOptions: Partial<ActionOptions> | null = null) {
+export function useActions(actions: ActionOptions[], globalOptions: ActionGlobalOptions | null = null) {
 	const namespace = uid();
 
 	/**
@@ -33,6 +35,14 @@ export function useActions(actions: ActionOptions[], globalOptions: Partial<Acti
 		return storeObject(extendedAction);
 	}
 
+	/**
+	 * Updates an action replacing the old options with the new options
+	 */
+	function modifyAction(actionName: string, actionOptions: Partial<ActionOptions>): ResourceAction {
+		const action = getAction(actionName);
+		return storeObject({ ...action, ...actionOptions });
+	}
+
 	/**
 	 * Resolve the action object based on the provided name (or return the object if the name is already an object)
 	 */
@@ -48,6 +58,9 @@ export function useActions(actions: ActionOptions[], globalOptions: Partial<Acti
 		if (isReactive(baseOptions) && "__type" in baseOptions) return baseOptions as ResourceAction;
 
 		const resourceAction: ResourceAction = storeObject({
+			onAction: globalOptions?.routes?.applyAction,
+			onBatchAction: globalOptions?.routes?.batchAction,
+			onBatchSuccess: globalOptions?.controls?.clearSelectedRows,
 			...globalOptions,
 			...baseOptions,
 			trigger: (target, input) => performAction(resourceAction, target, input),
@@ -60,27 +73,22 @@ export function useActions(actions: ActionOptions[], globalOptions: Partial<Acti
 			resourceAction.trigger = useDebounceFn((target, input) => performAction(resourceAction, target, input), baseOptions.debounce);
 		}
 
+		// Splice the resourceAction in place of the action in the actions list
+		actions.splice(actions.findIndex(a => a.name === actionName), 1, resourceAction);
+
 		return resourceAction;
 	}
 
 	/**
-	 * 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[]}
+	 * Returns a filtered list of actions. Useful for building ordered menus.
+	 * NOTE: If an action doesn't already exist, it will be created.
 	 */
-	function getActions(filters?: AnyObject): ResourceAction[] {
-		let filteredActions = [...actions];
-
-		if (filters) {
-			for (const filterKey of Object.keys(filters)) {
-				const filterValue = filters[filterKey];
-				filteredActions = filteredActions.filter((a: AnyObject) => a[filterKey] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filterKey])));
-			}
+	function getActions(names: string[]): ResourceAction[] {
+		const filteredActions = [];
+		for (const name of names) {
+			filteredActions.push(getAction(name));
 		}
-
-		return filteredActions.map((a: ActionOptions) => getAction(a.name));
+		return filteredActions;
 	}
 
 	/**
@@ -90,11 +98,15 @@ export function useActions(actions: ActionOptions[], globalOptions: Partial<Acti
 	 * @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
 	 */
-	async function performAction(action: ResourceAction, target: ActionTarget = null, input: any = null) {
+	async function performAction(action: ResourceAction | string, target: ActionTarget = null, input: any = null): Promise<any | void> {
+		if (typeof action === "string") {
+			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);
+		const vnode = action.vnode && action.vnode(target, input);
 		let result: any;
 
 		// Run the onStart handler if it exists and quit the operation if it returns false
@@ -160,6 +172,8 @@ export function useActions(actions: ActionOptions[], globalOptions: Partial<Acti
 	return {
 		getAction,
 		getActions,
+		action: performAction,
+		modifyAction,
 		extendAction
 	};
 }
@@ -271,3 +285,53 @@ async function onConfirmAction(action: ActionOptions, target: ActionTarget, inpu
 
 	return result;
 }
+
+export function withDefaultActions(label: string, listController?: ListController): ActionOptions[] {
+	return [
+		{
+			name: "create",
+			label: "Create " + label,
+			vnode: () => h(CreateNewWithNameDialog, { title: "Create " + label }),
+			onFinish: listController && ((result) => {
+				listController.activatePanel(result.item, "edit");
+				listController.loadListAndSummary();
+			})
+		},
+		{
+			name: "update",
+			optimistic: true
+		},
+		{
+			name: "update-debounced",
+			alias: "update",
+			debounce: 1000,
+			optimistic: true
+		},
+		{
+			name: "copy",
+			label: "Copy",
+			icon: CopyIcon,
+			onSuccess: listController?.loadListAndSummary
+		},
+		{
+			name: "edit",
+			label: "Edit",
+			icon: EditIcon,
+			onAction: (action, target) => listController?.activatePanel(target, "edit")
+		},
+		{
+			name: "delete",
+			label: "Delete",
+			class: "text-red-500",
+			iconClass: "text-red-500",
+			icon: DeleteIcon,
+			onFinish: listController?.loadListAndSummary,
+			vnode: (target: ActionTarget) => h(ConfirmActionDialog, {
+				action: "Delete",
+				label,
+				target,
+				confirmClass: "bg-red-900"
+			})
+		}
+	];
+}

package/src/helpers/formats.ts

@@ -32,32 +32,35 @@ export function remoteDateTime(dateTimeString: string) {
 /**
  * Parses a date string into a Luxon DateTime object
  */
-export function parseDateTime(dateTime: string | DateTime | null): DateTime {
+export function parseDateTime(dateTime: string | DateTime | null): DateTime<boolean> | null {
 	if (typeof dateTime === "string") {
-		dateTime = dateTime.replace("T", " ").replace(/\//g, "-");
-		return DateTime.fromSQL(dateTime);
+		return parseSqlDateTime(dateTime) || parseQDate(dateTime) || parseQDateTime(dateTime);
 	}
 	return dateTime || DateTime.fromSQL("0000-00-00 00:00:00");
 }
 
+/**
+ *  Parses a SQL formatted date string into a Luxon DateTime object
+ */
+export function parseSqlDateTime(dateTime: string) {
+	const parsed = DateTime.fromSQL(dateTime.replace("T", " ").replace(/\//g, "-"));
+	return parsed.isValid ? parsed : null;
+}
+
 /**
  * Parses a Quasar formatted date string into a Luxon DateTime object
- * @param date
- * @param format
- * @returns {DateTime}
  */
-export function parseQDate(date: string, format = "yyyy/MM/dd") {
-	return DateTime.fromFormat(date, format);
+export function parseQDate(date: string, format = "yyyy/MM/dd"): DateTime<boolean> | null {
+	const parsed = DateTime.fromFormat(date, format);
+	return parsed.isValid ? parsed : null;
 }
 
 /**
  * Parses a Quasar formatted date/time string into a Luxon DateTime object
- * @param date
- * @param format
- * @returns {DateTime}
  */
-export function parseQDateTime(date: string, format = "yyyy/MM/dd HH:mm:ss") {
-	return DateTime.fromFormat(date, format);
+export function parseQDateTime(date: string, format = "yyyy/MM/dd HH:mm:ss"): DateTime<boolean> | null {
+	const parsed = DateTime.fromFormat(date, format);
+	return parsed.isValid ? parsed : null;
 }
 
 /**
@@ -91,8 +94,8 @@ export function fDateTime(
 		dateTime: string | DateTime | null = null,
 		{ format = "M/d/yy h:mma", empty = "- -" }: fDateOptions = {}
 ) {
-	const formatted = parseDateTime(dateTime).toFormat(format).toLowerCase();
-	return ["Invalid DateTime", "invalid datetime"].includes(formatted) ? empty : formatted;
+	const formatted = parseDateTime(dateTime)?.toFormat(format).toLowerCase();
+	return formatted || empty;
 }
 
 /**
@@ -111,9 +114,9 @@ export function dbDateTime(dateTime: string | DateTime | null = null) {
  * @param format
  * @returns {string}
  */
-export function fDate(dateTime: string, { empty = "--", format = "M/d/yy" }: fDateOptions = {}) {
-	const formatted = parseDateTime(dateTime).toFormat(format || "M/d/yy");
-	return ["Invalid DateTime", "invalid datetime"].includes(formatted) ? empty : formatted;
+export function fDate(dateTime: string | DateTime | null, { empty = "--", format = "M/d/yy" }: fDateOptions = {}) {
+	const formatted = parseDateTime(dateTime)?.toFormat(format || "M/d/yy");
+	return formatted || empty;
 }
 
 /**
@@ -130,8 +133,8 @@ export function fSecondsToTime(second: number) {
 
 export function fElapsedTime(start: string, end?: string) {
 	const endDateTime = end ? parseDateTime(end) : DateTime.now();
-	const diff = endDateTime.diff(parseDateTime(start), ["hours", "minutes", "seconds"]);
-	if (!diff.isValid) {
+	const diff = endDateTime?.diff(parseDateTime(start) || DateTime.now(), ["hours", "minutes", "seconds"]);
+	if (!diff?.isValid) {
 		return "-";
 	}
 	const hours = Math.floor(diff.hours);

package/src/helpers/objectStore.ts

@@ -1,6 +1,6 @@
 import { uid } from "quasar";
 import { ShallowReactive, shallowReactive } from "vue";
-import { TypedObject } from "../types";
+import { AnyObject, TypedObject } from "../types";
 import { FlashMessages } from "./FlashMessages";
 
 const store = new Map<string, any>();
@@ -18,7 +18,7 @@ export function storeObjects<T extends TypedObject>(newObjects: T[]) {
  * Store an object in the object store via type + id
  * Returns the stored object that should be used instead of the passed object as the returned object is shared across the system
  */
-export function storeObject<T extends TypedObject>(newObject: T): ShallowReactive<T> {
+export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredObjects: AnyObject = {}): ShallowReactive<T> {
 	const id = newObject?.id || newObject?.name;
 	const type = newObject?.__type;
 	if (!id || !type) return shallowReactive(newObject);
@@ -32,38 +32,50 @@ export function storeObject<T extends TypedObject>(newObject: T): ShallowReactiv
 
 	const objectKey = `${type}:${id}`;
 
+	// If the object was recently stored, return the recently stored object to avoid infinite recursion
+	if (recentlyStoredObjects[objectKey]) {
+		return recentlyStoredObjects[objectKey];
+	}
+
 	// Retrieve the existing object if it already exists in the store
 	const oldObject = store.get(objectKey);
 
 	// If an old object exists, and it is newer than the new object, do not store the new object, just return the old
+	// NOTE: If the timestamp is the same, its possible the intention is to update the existing object, so DO NOT return old object in this case
 	// @ts-expect-error __timestamp is guaranteed to be set in this case on both old and new
-	if (oldObject && newObject.__timestamp <= oldObject.__timestamp) {
+	if (oldObject && newObject.__timestamp < oldObject.__timestamp) {
+		recentlyStoredObjects[objectKey] = oldObject;
 		return oldObject;
 	}
 
+	// Reference to the reactive version of the object so we can update all the child relationships and return the reactive object
+	const reactiveObject = oldObject || shallowReactive(newObject);
+
+	// Make sure to store the object in the recently stored objects to avoid infinite recursion
+	recentlyStoredObjects[objectKey] = reactiveObject;
+
 	// Recursively store all the children of the object as well
 	for (const key of Object.keys(newObject)) {
 		const value = newObject[key];
 		if (Array.isArray(value) && value.length > 0) {
 			for (const index in value) {
 				if (value[index] && typeof value[index] === "object") {
-					newObject[key][index] = storeObject(value[index]);
+					newObject[key][index] = storeObject(value[index], recentlyStoredObjects);
 				}
 			}
 		} else if (value?.__type) {
-			// @ts-expect-error newObject[key] is guaranteed to be a TypedObject
-			newObject[key] = storeObject(value);
+			// @ts-expect-error __type is guaranteed to be set in this case
+			newObject[key] = storeObject(value as TypedObject, recentlyStoredObjects);
 		}
 	}
 
-	// Update the old object with the new object properties
-	if (oldObject) {
-		Object.assign(oldObject, newObject);
-		return oldObject;
+	Object.assign(reactiveObject, newObject);
+
+	if (!oldObject) {
+		// Store the reactive object in the store if there was not already one existing
+		store.set(objectKey, reactiveObject);
 	}
 
-	const reactiveObject = shallowReactive(newObject);
-	store.set(objectKey, reactiveObject);
 	return reactiveObject;
 }
 

package/src/types/actions.d.ts

@@ -1,14 +1,15 @@
+import { ListController, ListControlsRoutes } from "src/types/controls";
 import { VNode } from "vue";
-import { TypedObject } from "./shared";
+import { AnyObject, TypedObject } from "./shared";
 
 export interface ActionPanel {
 	name: string | number;
 	label: string;
 	category?: string;
 	class?: string | object;
-	enabled?: boolean | ((activeItem: ActionTargetItem) => boolean);
-	tabVnode?: (activeItem: ActionTargetItem | null | undefined, activePanel: string | number) => VNode | any;
-	vnode: (activeItem: ActionTargetItem | null | undefined) => VNode | any;
+	enabled?: boolean | ((target: ActionTargetItem) => boolean);
+	tabVnode?: (target: ActionTargetItem | null | undefined, activePanel: string | number) => VNode | any;
+	vnode: (target: ActionTargetItem | null | undefined) => VNode | any;
 }
 
 export interface ActionTargetItem extends TypedObject {
@@ -33,8 +34,8 @@ export interface ActionOptions {
 	vnode?: ((target: ActionTarget) => VNode) | any;
 	enabled?: (target: object) => boolean;
 	batchEnabled?: (targets: object[]) => boolean;
-	onAction?: (action: string | null | undefined, target: ActionTargetItem | null, input: any) => Promise<any> | void;
-	onBatchAction?: (action: string | null | undefined, targets: ActionTargetItem[], input: any) => Promise<any>;
+	onAction?: (action: string | ResourceAction | ActionOptions, target: ActionTargetItem | null, input?: AnyObject | any) => Promise<AnyObject | any> | void;
+	onBatchAction?: (action: string | ResourceAction | ActionOptions, targets: ActionTargetItem[], input: any) => Promise<AnyObject | any> | void;
 	onStart?: (action: ActionOptions | null, targets: ActionTarget, input: any) => boolean;
 	onSuccess?: (result: any, targets: ActionTarget, input: any) => any;
 	onBatchSuccess?: (result: any, targets: ActionTargetItem[], input: any) => any;
@@ -42,6 +43,11 @@ export interface ActionOptions {
 	onFinish?: (result: any, targets: ActionTarget, input: any) => any;
 }
 
+export interface ActionGlobalOptions extends Partial<ActionOptions> {
+	routes?: ListControlsRoutes;
+	controls?: ListController;
+}
+
 export interface ResourceAction extends ActionOptions {
 	isApplying: boolean;
 	trigger: (target?: ActionTarget, input?: any) => Promise<any>;

package/src/types/controls.d.ts

@@ -1,5 +1,7 @@
+import { FormField } from "src/types/forms";
+import { TableColumn } from "src/types/tables";
 import { ComputedRef, Ref, ShallowRef } from "vue";
-import { ActionTargetItem } from "./actions";
+import { ActionOptions, ActionPanel, ActionTargetItem, ResourceAction } from "./actions";
 import { AnyObject, LabelValueItem } from "./shared";
 
 export interface ListControlsFilter {
@@ -20,7 +22,6 @@ export interface FilterGroup {
 	fields: FilterableField[];
 }
 
-
 export interface ListControlsRoutes {
 	list(pager?: ListControlsPagination): Promise<ActionTargetItem[]>;
 
@@ -36,9 +37,9 @@ export interface ListControlsRoutes {
 
 	fieldOptions?(filter?: AnyObject): Promise<AnyObject>;
 
-	applyAction?(action: string, target: ActionTargetItem | null, data?: object): Promise<AnyObject>;
+	applyAction?(action: string | ResourceAction | ActionOptions, target: ActionTargetItem | null, data?: object): Promise<AnyObject>;
 
-	batchAction?(action: string, targets: ActionTargetItem[], data: object): Promise<AnyObject>;
+	batchAction?(action: string | ResourceAction | ActionOptions, targets: ActionTargetItem[], data: object): Promise<AnyObject>;
 
 	export?(filter?: ListControlsFilter, name?: string): Promise<void>;
 }
@@ -70,7 +71,7 @@ export interface PagedItems {
 	} | undefined;
 }
 
-export interface ActionController {
+export interface ListController {
 	name: string;
 	label: string;
 	pagedItems: Ref<PagedItems | null>;
@@ -93,7 +94,7 @@ export interface ActionController {
 	activeItem: ShallowRef<ActionTargetItem | null>;
 	activePanel: ShallowRef<string | null>;
 
-	// Actions
+	// List Controls
 	initialize: () => void;
 	resetPaging: () => void;
 	setPagination: (updated: Partial<ListControlsPagination>) => void;
@@ -114,3 +115,19 @@ export interface ActionController {
 	applyFilterFromUrl: (url: string, filters?: Ref<FilterGroup[]> | null) => void;
 	getFieldOptions: (field: string) => any[];
 }
+
+export interface ActionController {
+	// Actions
+	action?: (actionName: string, target?: ActionTargetItem | null, input?: any) => Promise<any | void>;
+	getAction?: (actionName: string, actionOptions?: Partial<ActionOptions>) => ResourceAction;
+	getActions?: (names?: string[]) => ResourceAction[];
+	extendAction?: (actionName: string, extendedId: string | number, actionOptions: Partial<ActionOptions>) => ResourceAction;
+	modifyAction?: (actionName: string, actionOptions: Partial<ActionOptions>) => ResourceAction;
+	batchActions?: ResourceAction[];
+	menuActions?: ResourceAction[];
+	columns?: TableColumn[];
+	filters?: ComputedRef<FilterGroup[]>;
+	fields?: FormField[];
+	panels?: ActionPanel[];
+	routes?: ListControlsRoutes;
+}

package/types/vue-shims.d.ts

@@ -1,4 +1,5 @@
 declare module "*.vue" {
-    import Vue from 'vue';
-    export default Vue;
+    import type { DefineComponent } from "vue";
+    const component: DefineComponent<object, object, any>;
+	export default component;
 }