quasar-ui-danx 0.4.27 → 0.4.29

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/FileUpload.ts

@@ -243,11 +243,11 @@ export class FileUpload {
 	/**
 	 * Mark the presigned upload as completed and return the file resource from the platform server
 	 */
-	async completePresignedUpload(fileUpload: XHRFileUpload) {
+	async completePresignedUpload(xhrFile: XHRFileUpload) {
 		// Show 95% as the last 5% will be to complete the presigned upload
-		this.fireProgressCallback(fileUpload, .95);
+		this.fireProgressCallback(xhrFile, .95);
 
-		if (!fileUpload.file.resource_id) {
+		if (!xhrFile.file.resource_id) {
 			throw new Error("File resource ID is required to complete presigned upload");
 		}
 
@@ -256,7 +256,7 @@ export class FileUpload {
 		}
 
 		// Let the platform know the presigned upload is complete
-		return await this.options.completePresignedUpload(fileUpload.file.resource_id);
+		return await this.options.completePresignedUpload(xhrFile.file.resource_id, xhrFile);
 	}
 
 	/**

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/files.ts

@@ -1,53 +1,66 @@
 import ExifReader from "exifreader";
+import { UploadedFile } from "src/types";
 import { useCompatibility } from "./compatibility";
 import { FlashMessages } from "./FlashMessages";
 
-export async function resolveFileLocation(file, waitMessage = null) {
-    if (file.location) {
-        return file.location;
-    }
+export async function resolveFileLocation(file: UploadedFile, waitMessage: string | null = null) {
+	if (file.location) {
+		return file.location;
+	}
 
-    try {
-        const tags = await ExifReader.load(file.blobUrl || file.url, {
-            expanded: true
-        });
-        if (tags.gps) {
-            return {
-                latitude: tags.gps.Latitude,
-                longitude: tags.gps.Longitude
-            };
-        }
+	try {
+		const tags = await ExifReader.load(file.blobUrl || file.url || "", {
+			expanded: true
+		});
+		if (tags.gps) {
+			return {
+				latitude: tags.gps.Latitude,
+				longitude: tags.gps.Longitude
+			};
+		}
+	} catch (error) {
+		console.error("Failed to load EXIF data from file:", error);
+	}
 
-        const { waitForLocation, location } = useCompatibility();
+	try {
+		const { waitForLocation, location } = useCompatibility();
 
-        // Show a waiting for location message if we have not returned within 1 second
-        if (waitMessage) {
-            setTimeout(() => {
-                if (!location.value && waitMessage) {
-                    FlashMessages.warning(waitMessage);
-                }
-            }, 1000);
-        }
+		// Show a waiting for location message if we have not returned within 1 second
+		if (waitMessage) {
+			setTimeout(() => {
+				if (!location.value && waitMessage) {
+					FlashMessages.warning(waitMessage);
+				}
+			}, 1000);
+		}
 
-        // Wait for the browser to return the location (https only as http will not return a location)
-        if (window.location.protocol === "https:") {
-            await waitForLocation();
-        }
-        // Ignore the wait message if we already returned
-        waitMessage = false;
-        if (!location.value) {
-            return null;
-        }
+		// Wait for the browser to return the location (https only as http will not return a location)
+		if (window.location.protocol === "https:") {
+			await waitForLocation();
+		} else if (window.location.href.match("localhost")) {
+			// XXX: Special case for local development so we can test without https
+			return {
+				latitude: 37.7749,
+				longitude: -122.4194,
+				accuracy: 1,
+				altitude: 0,
+				altitudeAccuracy: 0
+			};
+		}
 
-        return {
-            latitude: location.value.latitude,
-            longitude: location.value.longitude,
-            accuracy: location.value.accuracy,
-            altitude: location.value.altitude,
-            altitudeAccuracy: location.value.altitudeAccuracy
-        };
-    } catch (error) {
-        console.error(error);
-        return null;
-    }
+		if (!location.value) {
+			return null;
+		}
+
+		return {
+			latitude: location.value.latitude,
+			longitude: location.value.longitude,
+			accuracy: location.value.accuracy,
+			altitude: location.value.altitude,
+			altitudeAccuracy: location.value.altitudeAccuracy
+		};
+	} catch (error) {
+		console.error(error);
+		return null;
+	}
 }

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;
 }