quasar-ui-danx 0.4.2 → 0.4.3

package/src/helpers/formats.ts

@@ -1,16 +1,20 @@
 import { DateTime, IANAZone } from "luxon";
+import { ActionTargetItem, fDateOptions } from "../types";
+import { isJSON } from "./utils";
 
 const SERVER_TZ = new IANAZone("America/Chicago");
 
+export { DateTime, SERVER_TZ };
+
 /**
  * Converts a date string from the server's time zone to the user's time zone.
  * @param {String} dateTimeString
  * @returns {DateTime}
  */
-export function localizedDateTime(dateTimeString) {
-    dateTimeString = dateTimeString?.replace("T", " ");
-    // noinspection JSCheckFunctionSignatures
-    return DateTime.fromSQL(dateTimeString, { zone: SERVER_TZ }).setZone("local");
+export function localizedDateTime(dateTimeString: string) {
+	dateTimeString = dateTimeString?.replace("T", " ");
+	// noinspection JSCheckFunctionSignatures
+	return DateTime.fromSQL(dateTimeString, { zone: SERVER_TZ }).setZone("local");
 }
 
 /**
@@ -18,22 +22,22 @@ export function localizedDateTime(dateTimeString) {
  * @param dateTimeString
  * @returns {DateTime}
  */
-export function remoteDateTime(dateTimeString) {
-    dateTimeString = dateTimeString?.replace("T", " ");
-    // noinspection JSCheckFunctionSignatures
-    return DateTime.fromSQL(dateTimeString, { zone: "local" }).setZone(SERVER_TZ);
+export function remoteDateTime(dateTimeString: string) {
+	dateTimeString = dateTimeString?.replace("T", " ");
+	// noinspection JSCheckFunctionSignatures
+	return DateTime.fromSQL(dateTimeString, { zone: "local" }).setZone(SERVER_TZ);
 }
 
 /**
  * @param {DateTime|String} dateTime
  * @returns {DateTime|*}
  */
-export function parseDateTime(dateTime) {
-    if (typeof dateTime === "string") {
-        dateTime = dateTime.replace("T", " ").replace(/\//g, "-");
-        return DateTime.fromSQL(dateTime);
-    }
-    return dateTime || DateTime.fromSQL("0000-00-00 00:00:00");
+export function parseDateTime(dateTime: string | DateTime) {
+	if (typeof dateTime === "string") {
+		dateTime = dateTime.replace("T", " ").replace(/\//g, "-");
+		return DateTime.fromSQL(dateTime);
+	}
+	return dateTime || DateTime.fromSQL("0000-00-00 00:00:00");
 }
 
 /**
@@ -42,8 +46,8 @@ export function parseDateTime(dateTime) {
  * @param format
  * @returns {DateTime}
  */
-export function parseQDate(date, format = "yyyy/MM/dd") {
-    return DateTime.fromFormat(date, format);
+export function parseQDate(date: string, format = "yyyy/MM/dd") {
+	return DateTime.fromFormat(date, format);
 }
 
 /**
@@ -52,8 +56,8 @@ export function parseQDate(date, format = "yyyy/MM/dd") {
  * @param format
  * @returns {DateTime}
  */
-export function parseQDateTime(date, format = "yyyy/MM/dd HH:mm:ss") {
-    return DateTime.fromFormat(date, format);
+export function parseQDateTime(date: string, format = "yyyy/MM/dd HH:mm:ss") {
+	return DateTime.fromFormat(date, format);
 }
 
 /**
@@ -61,8 +65,8 @@ export function parseQDateTime(date, format = "yyyy/MM/dd HH:mm:ss") {
  * @param date
  * @returns {string}
  */
-export function fQDate(date) {
-    return fDate(date, { format: "yyyy/MM/dd" });
+export function fQDate(date: string) {
+	return fDate(date, { format: "yyyy/MM/dd" });
 }
 
 /**
@@ -71,8 +75,8 @@ export function fQDate(date) {
  * @param options
  * @returns {string}
  */
-export function fLocalizedDateTime(dateTimeString, options = {}) {
-    return fDateTime(localizedDateTime(dateTimeString), options);
+export function fLocalizedDateTime(dateTimeString: string, options = {}) {
+	return fDateTime(localizedDateTime(dateTimeString), options);
 }
 
 /**
@@ -84,11 +88,11 @@ export function fLocalizedDateTime(dateTimeString, options = {}) {
  * @returns {string}
  */
 export function fDateTime(
-    dateTime = null,
-    { format = "M/d/yy h:mma", empty = "- -" } = {}
+		dateTime: string | DateTime | null = null,
+		{ format = "M/d/yy h:mma", empty = "- -" }: fDateOptions = {}
 ) {
-    const formatted = (dateTime ? parseDateTime(dateTime) : DateTime.now()).toFormat(format).toLowerCase();
-    return formatted === "invalid datetime" ? empty : formatted;
+	const formatted = (dateTime ? parseDateTime(dateTime) : DateTime.now()).toFormat(format).toLowerCase();
+	return formatted === "invalid datetime" ? empty : formatted;
 }
 
 /**
@@ -96,8 +100,8 @@ export function fDateTime(
  * @param dateTime
  * @returns {string}
  */
-export function dbDateTime(dateTime = null) {
-    return fDateTime(dateTime, { format: "yyyy-MM-dd HH:mm:ss", empty: null });
+export function dbDateTime(dateTime: string | DateTime | null = null) {
+	return fDateTime(dateTime, { format: "yyyy-MM-dd HH:mm:ss", empty: undefined });
 }
 
 /**
@@ -107,9 +111,9 @@ export function dbDateTime(dateTime = null) {
  * @param format
  * @returns {string}
  */
-export function fDate(dateTime, { empty = "--", format = "M/d/yy" } = {}) {
-    const formatted = parseDateTime(dateTime).toFormat(format);
-    return ["Invalid DateTime", "invalid datetime"].includes(formatted) ? empty : formatted;
+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;
 }
 
 /**
@@ -118,22 +122,33 @@ export function fDate(dateTime, { empty = "--", format = "M/d/yy" } = {}) {
  * @param second
  * @returns {string}
  */
-export function fSecondsToTime(second) {
-    const time = DateTime.now().setZone("UTC").startOf("year").set({ second });
-    const hours = Math.floor(second / 3600);
-    return (hours ? hours + ":" : "") + time.toFormat("mm:ss");
+export function fSecondsToTime(second: number) {
+	const time = DateTime.now().setZone("UTC").startOf("year").set({ second });
+	const hours = Math.floor(second / 3600);
+	return (hours ? hours + ":" : "") + time.toFormat("mm:ss");
+}
+
+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) {
+		return "-";
+	}
+	const hours = Math.floor(diff.hours);
+	const minutes = Math.floor(diff.minutes);
+	const seconds = Math.floor(diff.seconds);
+	return `${hours ? hours + "h " : ""}${minutes ? minutes + "m " : ""}${seconds}s`;
 }
 
 /**
  * Formats an amount into USD currency format
- * @param amount
- * @returns {string}
  */
-export function fCurrency(amount) {
-    return new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: "USD"
-    }).format(amount);
+export function fCurrency(amount: number, options?: object) {
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: "USD",
+		...options
+	}).format(amount);
 }
 
 /**
@@ -142,8 +157,8 @@ export function fCurrency(amount) {
  * @param options
  * @returns {string}
  */
-export function fNumber(number, options = {}) {
-    return new Intl.NumberFormat("en-US", options).format(number);
+export function fNumber(number: number, options = {}) {
+	return new Intl.NumberFormat("en-US", options).format(number);
 }
 
 /**
@@ -152,24 +167,24 @@ export function fNumber(number, options = {}) {
  * @param maxLength
  * @returns {string|*}
  */
-export function centerTruncate(str, maxLength) {
-    if (str.length > maxLength) {
-        const frontCharCount = Math.floor((maxLength - 3) / 2);
-        const backCharCount = maxLength - frontCharCount - 3;
-        return (
-            str.substring(0, frontCharCount) +
-            "..." +
-            str.substring(str.length - backCharCount)
-        );
-    } else {
-        return str;
-    }
+export function centerTruncate(str: string, maxLength: number) {
+	if (str.length > maxLength) {
+		const frontCharCount = Math.floor((maxLength - 3) / 2);
+		const backCharCount = maxLength - frontCharCount - 3;
+		return (
+				str.substring(0, frontCharCount) +
+				"..." +
+				str.substring(str.length - backCharCount)
+		);
+	} else {
+		return str;
+	}
 }
 
 interface FPercentOptions {
-    multiplier?: number,
-    maximumFractionDigits?: number,
-    NaN?: string
+	multiplier?: number,
+	maximumFractionDigits?: number,
+	NaN?: string
 }
 
 /**
@@ -179,54 +194,81 @@ interface FPercentOptions {
  * @returns {string}
  */
 export function fPercent(num: string | number, options: FPercentOptions = {}) {
-    options = { multiplier: 100, maximumFractionDigits: 1, NaN: "N/A", ...options };
-
-    num = parseFloat("" + num);
-
-    if (isNaN(num)) {
-        return options.NaN;
-    }
-
-    return fNumber(num * (options.multiplier || 100), options) + "%";
-}
-
-
-export function fPhone(value) {
-    if (!value || typeof value !== "string") {
-        return value || "";
-    }
-
-    const input = value.replace(/\D/g, "").split("");
-    let phone = "";
-
-    const startsWithOne = input.length > 0 && input[0] === "1";
-    const shift = startsWithOne ? 1 : 0;
-
-    input.map((number, index) => {
-        switch (index) {
-            case shift:
-                phone += "(";
-                break;
-            case shift + 3:
-                phone += ") ";
-                break;
-            case shift + 6:
-                phone += "-";
-                break;
-            case shift + 10:
-                phone += " x";
-                break;
-        }
-        if (index === 0 && number === "1") {
-            phone += "+1 ";
-        } else {
-            phone += number;
-        }
-    });
-
-    if (value === "+1 (") {
-        return "";
-    }
-
-    return phone;
+	options = { multiplier: 100, maximumFractionDigits: 1, NaN: "N/A", ...options };
+
+	num = parseFloat("" + num);
+
+	if (isNaN(num)) {
+		return options.NaN;
+	}
+
+	return fNumber(num * (options.multiplier || 100), options) + "%";
+}
+
+
+export function fPhone(value: string | number) {
+	if (!value || typeof value !== "string") {
+		return value || "";
+	}
+
+	const input = value.replace(/\D/g, "").split("");
+	let phone = "";
+
+	const startsWithOne = input.length > 0 && input[0] === "1";
+	const shift = startsWithOne ? 1 : 0;
+
+	input.map((number, index) => {
+		switch (index) {
+			case shift:
+				phone += "(";
+				break;
+			case shift + 3:
+				phone += ") ";
+				break;
+			case shift + 6:
+				phone += "-";
+				break;
+			case shift + 10:
+				phone += " x";
+				break;
+		}
+		if (index === 0 && number === "1") {
+			phone += "+1 ";
+		} else {
+			phone += number;
+		}
+	});
+
+	if (value === "+1 (") {
+		return "";
+	}
+
+	return phone;
+}
+
+export function fNameOrCount(items: ActionTargetItem[] | ActionTargetItem, label: string) {
+	return Array.isArray(items) ? `${items?.length} ${label}` : `${items ? items.title || items.name || items.id : ""}`;
+}
+
+export function fJSON(string: string | object) {
+	if (!string) {
+		return string;
+	}
+
+	try {
+		if (typeof string === "object") {
+			return JSON.stringify(string, null, 2);
+		}
+		return JSON.stringify(JSON.parse(string), null, 2);
+	} catch (e) {
+		return string;
+	}
+}
+
+export function fMarkdownJSON(string: string | object): string {
+	if (isJSON(string)) {
+		return `\`\`\`json\n${fJSON(string)}\n\`\`\``;
+	}
+	// @ts-expect-error Guaranteed to only allow strings here using isJSON check
+	return string;
 }

package/src/helpers/index.ts

@@ -10,7 +10,9 @@ export * from "./FlashMessages";
 export * from "./formats";
 export * from "./hotkeys";
 export * from "./multiFileUpload";
+export * from "./objectStore";
 export * from "./request";
+export * from "./routes";
 export * from "./singleFileUpload";
 export * from "./storage";
 export * from "./styles";

package/src/helpers/multiFileUpload.ts

@@ -1,68 +1,82 @@
 import { Ref, ref } from "vue";
-import { FileUpload, FileUploadOptions, UploadedFile } from "./FileUpload";
+import { FlashMessages } from "../helpers";
+import {
+	FileUploadCompleteCallback,
+	FileUploadOptions,
+	OnFilesChangeCallback,
+	UploadedFile,
+	VoidCallback
+} from "../types";
+import { FileUpload } from "./FileUpload";
 
-export function useMultiFileUpload(options: FileUploadOptions) {
-    const uploadedFiles: Ref<UploadedFile[]> = ref([]);
-    const onCompleteCb: Ref<Function | null> = ref(null);
-    const onFilesChangeCb: Ref<Function | null> = ref(null);
-    const onFilesSelected = (e: any) => {
-        uploadedFiles.value = [...uploadedFiles.value, ...e.target.files];
-        new FileUpload(e.target.files, options)
-            .onProgress(({ file }: { file: UploadedFile }) => {
-                updateFileInList(file);
-            })
-            .onComplete(({ file, uploadedFile }: { file: UploadedFile, uploadedFile: UploadedFile }) => {
-                updateFileInList(file, uploadedFile);
-            })
-            .onAllComplete(() => {
-                onCompleteCb.value && onCompleteCb.value();
-                onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
-            })
-            .upload();
-    };
+export function useMultiFileUpload(options?: FileUploadOptions) {
+	const uploadedFiles: Ref<UploadedFile[]> = ref([]);
+	const onCompleteCb: Ref<FileUploadCompleteCallback | null> = ref(null);
+	const onFilesChangeCb: Ref<OnFilesChangeCallback | null> = ref(null);
+	const onFilesSelected = (e: any) => {
+		uploadedFiles.value = [...uploadedFiles.value, ...e.target.files];
+		new FileUpload(e.target.files, options)
+				.onProgress(({ file }: { file: UploadedFile }) => {
+					updateFileInList(file);
+				})
+				.onComplete(({ file, uploadedFile }) => {
+					file && updateFileInList(file, uploadedFile);
+				})
+				.onError(({ file }: { file: UploadedFile }) => {
+					FlashMessages.error(`Failed to upload ${file.name}`);
+				})
+				.onAllComplete(() => {
+					onCompleteCb.value && onCompleteCb.value({
+						file: uploadedFiles.value[0],
+						uploadedFile: uploadedFiles.value[0]
+					});
+					onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+				})
+				.upload();
+	};
 
-    function updateFileInList(file: UploadedFile, replace: UploadedFile | null = null) {
-        const index = uploadedFiles.value.findIndex(f => f.id === file.id);
-        if (index !== -1) {
-            uploadedFiles.value.splice(index, 1, replace || file);
-        }
-        onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
-    }
+	function updateFileInList(file: UploadedFile, replace: UploadedFile | null = null) {
+		const index = uploadedFiles.value.findIndex(f => f.id === file.id);
+		if (index !== -1) {
+			uploadedFiles.value.splice(index, 1, replace || file);
+		}
+		onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+	}
 
-    const onDrop = (e: InputEvent) => {
-        onFilesSelected({ target: { files: e.dataTransfer?.files } });
-    };
+	const onDrop = (e: InputEvent) => {
+		onFilesSelected({ target: { files: e.dataTransfer?.files } });
+	};
 
-    const onFilesChange = (cb: Function) => {
-        onFilesChangeCb.value = cb;
-    };
+	const onFilesChange = (cb: OnFilesChangeCallback) => {
+		onFilesChangeCb.value = cb;
+	};
 
-    const onComplete = (cb: Function) => {
-        onCompleteCb.value = cb;
-    };
+	const onComplete = (cb: VoidCallback) => {
+		onCompleteCb.value = cb;
+	};
 
-    const clearUploadedFiles = () => {
-        uploadedFiles.value = [];
-        onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
-        onCompleteCb.value && onCompleteCb.value();
-    };
+	const clearUploadedFiles = () => {
+		uploadedFiles.value = [];
+		onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+		onCompleteCb.value && onCompleteCb.value({ file: null, uploadedFile: null });
+	};
 
-    const onRemove = (file: UploadedFile) => {
-        const index = uploadedFiles.value.findIndex(f => f.id === file.id);
-        if (index !== -1) {
-            uploadedFiles.value.splice(index, 1);
-        }
-        onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
-        onCompleteCb.value && onCompleteCb.value();
-    };
+	const onRemove = (file: UploadedFile) => {
+		const index = uploadedFiles.value.findIndex(f => f.id === file.id);
+		if (index !== -1) {
+			uploadedFiles.value.splice(index, 1);
+		}
+		onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+		onCompleteCb.value && onCompleteCb.value({ file, uploadedFile: file });
+	};
 
-    return {
-        clearUploadedFiles,
-        onRemove,
-        onComplete,
-        onFilesChange,
-        onDrop,
-        onFilesSelected,
-        uploadedFiles
-    };
+	return {
+		clearUploadedFiles,
+		onRemove,
+		onComplete,
+		onFilesChange,
+		onDrop,
+		onFilesSelected,
+		uploadedFiles
+	};
 }

package/src/helpers/objectStore.ts

@@ -0,0 +1,52 @@
+import { reactive, UnwrapNestedRefs } from "vue";
+import { TypedObject } from "../types";
+
+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> {
+	const id = newObject.id || newObject.name;
+	const type = newObject.__type;
+	if (!id || !type) return reactive(newObject);
+
+	const objectKey = `${type}:${id}`;
+
+	const oldObject: UnwrapNestedRefs<T> | undefined = 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;
+		}
+	}
+
+	// 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 && typeof value[0] === "object") {
+			for (const index in value) {
+				newObject[key][index] = storeObject(value[index]);
+			}
+		}
+	}
+
+	// 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);
+	store.set(objectKey, reactiveObject);
+	return reactiveObject;
+}