quasar-ui-danx 0.4.10 → 0.4.13

package/src/helpers/FileUpload.ts

@@ -11,6 +11,8 @@ import {
 } from "../types";
 import { resolveFileLocation } from "./files";
 import { FlashMessages } from "./FlashMessages";
+import { storeObject } from "./objectStore";
+import { sleep } from "./utils";
 
 
 export class FileUpload {
@@ -22,7 +24,8 @@ export class FileUpload {
 	onAllCompleteCb: FileUploadAllCompleteCallback | null = null;
 	options: FileUploadOptions;
 
-	constructor(files: UploadedFile[] | UploadedFile, options?: FileUploadOptions) {
+	constructor(files: UploadedFile[] | UploadedFile, options?: FileUploadOptions | null) {
+		/* @ts-expect-error Files is an array */
 		this.files = !Array.isArray(files) && !(files instanceof FileList) ? [files] : files;
 		this.fileUploads = [];
 		this.onErrorCb = null;
@@ -33,6 +36,7 @@ export class FileUpload {
 		this.options = {
 			createPresignedUpload: null,
 			completePresignedUpload: null,
+			refreshFile: null,
 			...danxOptions.value.fileUpload,
 			...options
 		};
@@ -40,7 +44,6 @@ export class FileUpload {
 		if (!this.options.createPresignedUpload || !this.options.completePresignedUpload) {
 			throw new Error("Please configure danxOptions.fileUpload: import { configure } from 'quasar-ui-danx';");
 		}
-		this.prepare();
 	}
 
 	/**
@@ -69,6 +72,8 @@ export class FileUpload {
 				isComplete: false
 			});
 		}
+
+		return this;
 	}
 
 	/**
@@ -110,7 +115,7 @@ export class FileUpload {
 	/**
 	 * Handles the error events / fires the callback if it is set
 	 */
-	errorHandler(e: InputEvent, file: UploadedFile, error = null) {
+	errorHandler(e: InputEvent | ProgressEvent, file: UploadedFile, error = null) {
 		if (this.onErrorCb) {
 			this.onErrorCb({ e, file, error });
 		}
@@ -179,7 +184,8 @@ export class FileUpload {
 			progress: file.progress,
 			location: file.location,
 			blobUrl: file.blobUrl,
-			url: ""
+			url: "",
+			__type: "BrowserFile"
 		};
 	}
 
@@ -219,12 +225,13 @@ export class FileUpload {
 					async (e) => {
 						try {
 							// First complete the presigned upload to get the updated file resource data
-							const uploadedFile = await this.completePresignedUpload(fileUpload);
-
+							let storedFile = await this.completePresignedUpload(fileUpload);
+							storedFile = storeObject(storedFile);
 							// Fire the file complete callbacks
-							this.fireCompleteCallback(fileUpload, uploadedFile);
+							this.fireCompleteCallback(fileUpload, storedFile);
 							this.checkAllComplete();
-						} catch (error) {
+							await this.waitForTranscode(storedFile);
+						} catch (error: any) {
 							this.errorHandler(e, fileUpload.file, error);
 						}
 					},
@@ -252,6 +259,49 @@ export class FileUpload {
 		return await this.options.completePresignedUpload(fileUpload.file.resource_id);
 	}
 
+	/**
+	 * Refresh the file data, in case transcoding or some transient state is needed to be refreshed on the file
+	 */
+	async refreshFile(file: UploadedFile): Promise<UploadedFile | null> {
+		if (!this.options.refreshFile) return null;
+
+		const storedFile = await this.options.refreshFile(file.id);
+
+		if (storedFile) {
+			return storeObject(storedFile);
+		}
+		return storedFile;
+	}
+
+	/**
+	 * Checks if the file has a transcode in progress or pending
+	 */
+	isTranscoding(file: UploadedFile) {
+		const metaTranscodes = file?.meta?.transcodes || [];
+
+		for (const transcodeName of Object.keys(metaTranscodes)) {
+			const transcode = metaTranscodes[transcodeName];
+			if (transcode.status === "Pending" || transcode.status === "In Progress") {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	/**
+	 * Keeps refreshing the file while there is transcoding in progress
+	 */
+	async waitForTranscode(file: UploadedFile) {
+		// Only allow waiting for transcode 1 time per file
+		if (!file.meta || file.meta.is_waiting_transcode) return;
+		file.meta.is_waiting_transcode = true;
+		let currentFile: UploadedFile | null = file;
+		while (currentFile && this.isTranscoding(currentFile)) {
+			await sleep(1000);
+			currentFile = await this.refreshFile(currentFile);
+		}
+	}
+
 	/**
 	 * Start uploading all files
 	 */
@@ -297,6 +347,7 @@ export class FileUpload {
 
 		// Send all the XHR file uploads
 		for (const fileUpload of this.fileUploads) {
+			// @ts-expect-error XHRFileUpload has a xhr property
 			fileUpload.xhr?.send(fileUpload.body);
 		}
 	}

package/src/helpers/actions.ts

@@ -1,7 +1,7 @@
 import { useDebounceFn } from "@vueuse/core";
 import { uid } from "quasar";
 import { isReactive, Ref, shallowRef } from "vue";
-import { ActionOptions, ActionTarget, AnyObject } from "../types";
+import type { ActionOptions, ActionOptionsPartial, ActionTarget, AnyObject, ResourceAction } from "../types";
 import { FlashMessages } from "./FlashMessages";
 import { storeObject } from "./objectStore";
 
@@ -10,39 +10,40 @@ 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
- *
- * @param actions
- * @param {ActionOptions | null} globalOptions
  */
-export function useActions(actions: ActionOptions[], globalOptions: ActionOptions | null = null) {
+export function useActions(actions: ActionOptions[], globalOptions: ActionOptionsPartial | null = null) {
 	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 };
+	function getAction(actionName: string | ActionOptions | ResourceAction): ResourceAction {
+		let actionOptions: ActionOptions | ResourceAction;
+
+		/// Resolve the action options or resource action based on the provided input
+		if (typeof actionName === "string") {
+			actionOptions = actions.find(a => a.name === actionName) || { name: actionName };
+		} else {
+			actionOptions = actionName;
 		}
 
 		// If the action is already reactive, return it
-		if (isReactive(action) && action.__type) return action;
+		if (isReactive(actionOptions) && "__type" in actionOptions) return actionOptions as ResourceAction;
 
-		action = { ...globalOptions, ...action };
+		const resourceAction: ResourceAction = storeObject({
+			...globalOptions,
+			...actionOptions,
+			trigger: (target, input) => performAction(resourceAction, target, input),
+			isApplying: false,
+			__type: "__Action:" + namespace
+		});
 
 		// 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);
-			}
+		if (actionOptions.debounce) {
+			resourceAction.trigger = useDebounceFn((target, input) => performAction(resourceAction, target, input), actionOptions.debounce);
 		}
 
-		// Set the initial state for the action
-		action.isApplying = false;
-
-		return storeObject({ ...action, __type: "__Action:" + namespace });
+		return resourceAction;
 	}
 
 	/**
@@ -52,17 +53,17 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
 	 * @param filters
 	 * @returns {ActionOptions[]}
 	 */
-	function getActions(filters?: AnyObject): ActionOptions[] {
+	function getActions(filters?: AnyObject): ResourceAction[] {
 		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])));
+			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])));
 			}
 		}
 
-		return filteredActions.map((a: AnyObject) => getAction(a));
+		return filteredActions.map((a: ActionOptions) => getAction(a));
 	}
 
 	/**
@@ -72,8 +73,7 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
 	 * @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: string | ActionOptions, target: ActionTarget = null, input: any = null) {
-		action = getAction(action);
+	async function performAction(action: ResourceAction, target: ActionTarget = null, input: any = null) {
 		// Resolve the original action, if the current action is an alias
 		const aliasedAction = action.alias ? getAction(action.alias) : null;
 

package/src/helpers/date.ts

@@ -1,5 +1,5 @@
 import { parseDateTime } from "./formats";
 
-export function diffInDays(date1, date2) {
-    return parseDateTime(date2).diff(parseDateTime(date1), ["days"]).days;
+export function diffInDays(date1: string, date2: string) {
+	return parseDateTime(date2).diff(parseDateTime(date1), ["days"]).days;
 }

package/src/helpers/download.ts

@@ -23,6 +23,7 @@ export function download(data: any, strFileName?: string, strMimeType?: string)
 
 	var anchor = document.createElement("a");
 
+	// @ts-ignore
 	var toString = function (a) {
 		return String(a);
 	};
@@ -35,8 +36,10 @@ export function download(data: any, strFileName?: string, strMimeType?: string)
 	var blob;
 
 	var reader;
+	// @ts-ignore
 	myBlob = myBlob.call ? myBlob.bind(self) : Blob;
 
+	// @ts-ignore
 	if (String(this) === "true") {
 		// reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
 		payload = [payload, mimeType];
@@ -64,6 +67,7 @@ export function download(data: any, strFileName?: string, strMimeType?: string)
 			};
 			ajax.onerror = function (e) {
 				// As a fallback, just open the request in a new tab
+				// @ts-ignore
 				window.open(url, "_blank").focus();
 			};
 			setTimeout(function () {
@@ -77,6 +81,7 @@ export function download(data: any, strFileName?: string, strMimeType?: string)
 
 	// go ahead and download dataURLs right away
 	if (/^data:[\w+-]+\/[\w+-]+[,;]/.test(payload)) {
+		// @ts-ignore
 		if (payload.length > 1024 * 1024 * 1.999 && myBlob !== toString) {
 			payload = dataUrlToBlob(payload);
 			mimeType = payload.type || defaultMime;
@@ -93,13 +98,14 @@ export function download(data: any, strFileName?: string, strMimeType?: string)
 					? payload
 					: new myBlob([payload], { type: mimeType });
 
-	function dataUrlToBlob(strUrl) {
+	function dataUrlToBlob(strUrl: string) {
 		var parts = strUrl.split(/[:;,]/);
 
 		var type = parts[1];
 
 		var decoder = parts[2] === "base64" ? atob : decodeURIComponent;
 
+		// @ts-ignore
 		var binData = decoder(parts.pop());
 
 		var mx = binData.length;
@@ -113,7 +119,7 @@ export function download(data: any, strFileName?: string, strMimeType?: string)
 		return new myBlob([uiArr], { type: type });
 	}
 
-	function saver(url, winMode) {
+	function saver(url: string, winMode: boolean | string) {
 		if ("download" in anchor) {
 			// html5 A[download]
 			anchor.href = url;

package/src/helpers/formats.ts

@@ -1,4 +1,5 @@
 import { DateTime, IANAZone } from "luxon";
+import { parse as parseYAML, stringify as stringifyYAML } from "yaml";
 import { ActionTargetItem, fDateOptions } from "../types";
 import { isJSON } from "./utils";
 
@@ -335,10 +336,56 @@ export function fJSON(string: string | object) {
 	}
 }
 
-export function fMarkdownJSON(string: string | object): string {
-	if (isJSON(string)) {
-		return `\`\`\`json\n${fJSON(string)}\n\`\`\``;
+/**
+ * Convert markdown formatted string into a valid JSON object
+ */
+export function parseMarkdownJSON(string: string | object): object | null | undefined {
+	if (typeof string === "object") return string as object;
+
+	try {
+		return JSON.parse(parseMarkdownCode(string));
+	} catch (e) {
+		return undefined;
 	}
-	// @ts-expect-error Guaranteed to only allow strings here using isJSON check
-	return string;
+}
+
+export function parseMarkdownYAML(string: string): object | null | undefined {
+	try {
+		return parseYAML(parseMarkdownCode(string)) || (string ? undefined : null);
+	} catch (e) {
+		return undefined;
+	}
+}
+
+/**
+ * Parse a markdown formatted string and return the code block content
+ */
+export function parseMarkdownCode(string: string): string {
+	return string.replace(/^```[a-z0-9]{1,6}\s/, "").replace(/```$/, "");
+}
+
+/**
+ * Convert a JSON object or string of code into a markdown formatted JSON string
+ * ie: a valid JSON string with a ```json prefix and ``` postfix
+ */
+export function fMarkdownCode(type: string, string: string | object): string {
+	if (typeof string === "object" || isJSON(string)) {
+		switch (type) {
+			case "yaml":
+				string = stringifyYAML(string);
+				break;
+			case "ts":
+				string = "";
+				break;
+			default:
+				string = fJSON(string);
+		}
+	}
+
+	const regex = new RegExp(`\`\`\`${type}`, "g");
+	if (!((string || "") as string).match(regex)) {
+		return `\`\`\`${type}\n${string}\n\`\`\``;
+	}
+
+	return string as string;
 }

package/src/helpers/multiFileUpload.ts

@@ -16,14 +16,16 @@ export function useMultiFileUpload(options?: FileUploadOptions) {
 	const onFilesSelected = (e: any) => {
 		uploadedFiles.value = [...uploadedFiles.value, ...e.target.files];
 		new FileUpload(e.target.files, options)
-				.onProgress(({ file }: { file: UploadedFile }) => {
-					updateFileInList(file);
+				.prepare()
+				.onProgress(({ file }) => {
+					file && updateFileInList(file);
 				})
 				.onComplete(({ file, uploadedFile }) => {
 					file && updateFileInList(file, uploadedFile);
 				})
-				.onError(({ file }: { file: UploadedFile }) => {
-					FlashMessages.error(`Failed to upload ${file.name}`);
+				.onError(({ file, error }) => {
+					console.error("Failed to upload", file, error);
+					FlashMessages.error(`Failed to upload ${file.name}: ${error}`);
 				})
 				.onAllComplete(() => {
 					onCompleteCb.value && onCompleteCb.value({

package/src/helpers/objectStore.ts

@@ -1,4 +1,4 @@
-import { reactive, UnwrapNestedRefs } from "vue";
+import { ShallowReactive, shallowReactive } from "vue";
 import { TypedObject } from "../types";
 
 const store = new Map<string, any>();
@@ -6,27 +6,25 @@ const store = new Map<string, any>();
 /**
  * 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
- *
- * @param {TypedObject} newObject
- * @returns {TypedObject}
  */
-export function storeObject<T extends TypedObject>(newObject: T): UnwrapNestedRefs<T> {
+export function storeObject<T extends TypedObject>(newObject: T): ShallowReactive<T> {
 	const id = newObject.id || newObject.name;
 	const type = newObject.__type;
-	if (!id || !type) return reactive(newObject);
+	if (!id || !type) return shallowReactive(newObject);
+
+	if (!newObject.__timestamp) {
+		newObject.__timestamp = newObject.updated_at || 0;
+	}
 
 	const objectKey = `${type}:${id}`;
 
-	const oldObject: UnwrapNestedRefs<T> | undefined = store.get(objectKey);
+	// Retrieve the existing object if it already exists in the store
+	const oldObject = store.get(objectKey);
 
-	// Apply all properties from newObject to oldObject then store and return the updated object
-	if (oldObject) {
-		const oldTimestamp = oldObject.__timestamp || oldObject.updated_at;
-		const newTimestamp = newObject.__timestamp || newObject.updated_at;
-		// If the old object is newer, do not store the new object, just return the old
-		if (oldTimestamp && newTimestamp && newTimestamp < oldTimestamp) {
-			return oldObject;
-		}
+	// If an old object exists, and it is newer than the new object, do not store the new object, just return the old
+	// @ts-expect-error __timestamp is guaranteed to be set in this case on both old and new
+	if (oldObject && newObject.__timestamp <= oldObject.__timestamp) {
+		return oldObject;
 	}
 
 	// Recursively store all the children of the object as well
@@ -41,12 +39,11 @@ export function storeObject<T extends TypedObject>(newObject: T): UnwrapNestedRe
 
 	// Update the old object with the new object properties
 	if (oldObject) {
-		// If the new object is newer, apply all properties from the new object to the old object
 		Object.assign(oldObject, newObject);
 		return oldObject;
 	}
 
-	const reactiveObject = reactive(newObject);
+	const reactiveObject = shallowReactive(newObject);
 	store.set(objectKey, reactiveObject);
 	return reactiveObject;
 }

package/src/helpers/request.ts

@@ -1,6 +1,7 @@
 import { Ref } from "vue";
 import { danxOptions } from "../config";
 import { HttpResponse, RequestApi } from "../types";
+import { sleep } from "./utils";
 
 /**
  * A simple request helper that wraps the fetch API
@@ -70,6 +71,17 @@ export const request: RequestApi = {
 
 		return result;
 	},
+
+	async poll(url: string, options, interval, fnUntil) {
+		let response;
+		do {
+			response = await request.call(url, options);
+			await sleep(interval);
+		} while (!fnUntil(response));
+
+		return response;
+	},
+
 	async get(url, options) {
 		return await request.call(url, {
 			method: "get",

package/src/helpers/singleFileUpload.ts

@@ -1,60 +1,68 @@
 import { computed, Ref, ref } from "vue";
-import { FileUpload, FileUploadOptions, UploadedFile } from "./FileUpload";
+import { FileUploadOptions, UploadedFile } from "../types";
+import { FileUpload } from "./FileUpload";
+import { FlashMessages } from "./FlashMessages";
 
-interface FileUploadCallbackParams {
-    file: UploadedFile;
-    uploadedFile: UploadedFile;
-}
+type FileUploadCallback = ((file: UploadedFile | null) => void) | null;
 
 export function useSingleFileUpload(options: FileUploadOptions | null = null) {
-    const uploadedFile: Ref<UploadedFile | null> = ref(null);
-    const onCompleteCb: Ref<Function | null> = ref(null);
-    const onFileChangeCb: Ref<Function | null> = ref(null);
-
-    const onFileSelected = (e: any) => {
-        uploadedFile.value = null;
-        new FileUpload(e.target?.files[0], options)
-            .onProgress(({ file }: FileUploadCallbackParams) => {
-                uploadedFile.value = file;
-                onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
-            })
-            .onComplete(({ uploadedFile: completedFile }: FileUploadCallbackParams) => {
-                uploadedFile.value = completedFile;
-                onCompleteCb.value && onCompleteCb.value(uploadedFile.value);
-                onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
-            })
-            .upload();
-    };
-
-    const onDrop = (e: InputEvent) => {
-        onFileSelected({ target: { files: e.dataTransfer?.files } });
-    };
-
-    const isFileUploaded = computed(() => {
-        return uploadedFile.value && uploadedFile.value.url;
-    });
-
-    const onFileChange = (cb: Function) => {
-        onFileChangeCb.value = cb;
-    };
-
-    const onComplete = (cb: Function) => {
-        onCompleteCb.value = cb;
-    };
-
-    const clearUploadedFile = () => {
-        uploadedFile.value = null;
-        onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
-        onCompleteCb.value && onCompleteCb.value(uploadedFile.value);
-    };
-
-    return {
-        isFileUploaded,
-        clearUploadedFile,
-        onComplete,
-        onFileChange,
-        onDrop,
-        onFileSelected,
-        uploadedFile
-    };
+	const uploadedFile: Ref<UploadedFile | null | undefined> = ref(null);
+	const onCompleteCb: Ref<FileUploadCallback> = ref(null);
+	const onFileChangeCb: Ref<FileUploadCallback> = ref(null);
+
+	const onFileSelected = (e: any) => {
+		uploadedFile.value = null;
+		new FileUpload(e.target?.files[0], options)
+				.prepare()
+				.onProgress(({ file }) => {
+					if (file) {
+						uploadedFile.value = file;
+						onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
+					}
+				})
+				.onComplete(({ uploadedFile: completedFile }) => {
+					if (completedFile) {
+						uploadedFile.value = completedFile;
+						onCompleteCb.value && onCompleteCb.value(uploadedFile.value);
+						onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
+					}
+				})
+				.onError(({ file, error }) => {
+					console.error("Failed to upload", file, error);
+					FlashMessages.error(`Failed to upload ${file.name}: ${error}`);
+				})
+				.upload();
+	};
+
+	const onDrop = (e: InputEvent) => {
+		onFileSelected({ target: { files: e.dataTransfer?.files } });
+	};
+
+	const isFileUploaded = computed(() => {
+		return uploadedFile.value && uploadedFile.value.url;
+	});
+
+	const onFileChange = (cb: FileUploadCallback) => {
+		onFileChangeCb.value = cb;
+	};
+
+	const onComplete = (cb: FileUploadCallback) => {
+		onCompleteCb.value = cb;
+	};
+
+	const clearUploadedFile = () => {
+		uploadedFile.value = null;
+		onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
+		onCompleteCb.value && onCompleteCb.value(uploadedFile.value);
+	};
+
+	return {
+		isFileUploaded,
+		clearUploadedFile,
+		onComplete,
+		onFileChange,
+		onDrop,
+		onFileSelected,
+		uploadedFile
+	};
 }

package/src/helpers/utils.ts

@@ -11,6 +11,15 @@ export function sleep(delay: number) {
 	return new Promise((resolve) => setTimeout(resolve, delay));
 }
 
+/**
+ * Poll a callback function until the result is true
+ */
+export async function pollUntil(callback: () => any, interval = 1000) {
+	while (!(await callback())) {
+		await sleep(interval);
+	}
+}
+
 /**
  * Wait for a ref to have a value and then resolve the promise
  */
@@ -82,12 +91,12 @@ export function incrementName(name: string) {
  * Check if a string is a valid JSON object. If an object is passed, always return true
  */
 export function isJSON(string: string | object) {
-	if (!string) {
-		return false;
-	}
 	if (typeof string === "object") {
 		return true;
 	}
+	if (!string) {
+		return false;
+	}
 	try {
 		JSON.parse(string);
 		return true;

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./vue-plugin";

package/src/styles/danx.scss

@@ -0,0 +1,5 @@
+.dx-action-table {
+	.dx-column-shrink {
+		width: 1px;
+	}
+}

package/src/styles/index.scss

@@ -5,3 +5,4 @@
 @import "quasar-reset";
 @import "general";
 @import "transitions";
+@import "danx";