quasar-ui-danx 0.4.53 → 0.4.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.53",
+  "version": "0.4.55",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/Utility/Buttons/ActionButton.vue

@@ -10,7 +10,7 @@
       <component
         :is="icon || typeOptions.icon"
         class="transition-all"
-        :class="iconClass + ' ' + typeOptions.iconClass"
+        :class="resolvedIconClass"
       />
       <slot>
         <div
@@ -60,6 +60,8 @@ import {
 	FaSolidCircleCheck as ConfirmIcon,
 	FaSolidCircleXmark as CancelIcon,
 	FaSolidCopy as CopyIcon,
+	FaSolidFileExport as ExportIcon,
+	FaSolidFileImport as ImportIcon,
 	FaSolidPause as PauseIcon,
 	FaSolidPencil as EditIcon,
 	FaSolidPlay as PlayIcon,
@@ -71,7 +73,7 @@ import { computed, ref } from "vue";
 import { ActionTarget, ResourceAction } from "../../../types";
 
 export interface ActionButtonProps {
-	type?: "trash" | "trash-red" | "create" | "edit" | "copy" | "play" | "stop" | "pause" | "refresh" | "confirm" | "cancel";
+	type?: "trash" | "trash-red" | "create" | "edit" | "copy" | "play" | "stop" | "pause" | "refresh" | "confirm" | "cancel" | "export" | "import";
 	color?: "red" | "blue" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray";
 	size?: "xxs" | "xs" | "sm" | "md" | "lg";
 	icon?: object | string;
@@ -160,64 +162,37 @@ const colorClass = computed(() => {
 			return "";
 	}
 });
+
+const resolvedIconClass = computed(() => props.iconClass + " " + mappedSizeClass[props.size].icon);
+
 const typeOptions = computed(() => {
-	const iconClass = mappedSizeClass[props.size].icon;
 	switch (props.type) {
 		case "trash":
-			return {
-				icon: TrashIcon,
-				iconClass
-			};
+			return { icon: TrashIcon };
+		case "export":
+			return { icon: ExportIcon };
+		case "import":
+			return { icon: ImportIcon };
 		case "create":
-			return {
-				icon: CreateIcon,
-				iconClass
-			};
+			return { icon: CreateIcon };
 		case "confirm":
-			return {
-				icon: ConfirmIcon,
-				iconClass
-			};
+			return { icon: ConfirmIcon };
 		case "cancel":
-			return {
-				icon: CancelIcon,
-				iconClass
-			};
+			return { icon: CancelIcon };
 		case "edit":
-			return {
-				icon: EditIcon,
-				iconClass
-			};
+			return { icon: EditIcon };
 		case "copy":
-			return {
-				icon: CopyIcon,
-				iconClass
-			};
+			return { icon: CopyIcon };
 		case "play":
-			return {
-				icon: PlayIcon,
-				iconClass
-			};
+			return { icon: PlayIcon };
 		case "stop":
-			return {
-				icon: StopIcon,
-				iconClass
-			};
+			return { icon: StopIcon };
 		case "pause":
-			return {
-				icon: PauseIcon,
-				iconClass
-			};
+			return { icon: PauseIcon };
 		case "refresh":
-			return {
-				icon: RefreshIcon,
-				iconClass
-			};
+			return { icon: RefreshIcon };
 		default:
-			return {
-				icon: EditIcon,
-				iconClass
-			};
+			return { icon: EditIcon };
 	}
 });
 

package/src/components/Utility/Files/FilePreview.vue

@@ -69,6 +69,7 @@
         class="absolute-bottom w-full bg-slate-800"
       >
         <QLinearProgress
+          :key="'progress-' + isUploading ? 'uploading' : 'transcoding'"
           :value="isUploading ? file.progress : ((transcodingStatus?.progress || 0) / 100)"
           size="36px"
           :color="isUploading ? 'green-800' : 'blue-800'"
@@ -80,15 +81,14 @@
               class="mr-2 text-slate-50 ml-1 flex-shrink-0"
               :size="btnSize === 'xs' ? 10 : 20"
             />
-            <div class="whitespace-nowrap overflow-hidden ellipsis">
-              {{ isUploading ? "Uploading..." : transcodingStatus?.message }}
-            </div>
-            <QTooltip
-              v-if="transcodingStatus?.message"
-              class="text-sm"
-            >
-              {{ transcodingStatus?.message }}
-            </QTooltip>
+            <template v-if="statusMessage">
+              <div class="whitespace-nowrap overflow-hidden ellipsis">
+                {{ statusMessage }}
+              </div>
+              <QTooltip class="text-sm">
+                {{ statusMessage }}
+              </QTooltip>
+            </template>
           </div>
         </QLinearProgress>
       </div>
@@ -208,6 +208,7 @@ const computedImage: ComputedRef<UploadedFile | null> = computed(() => {
 });
 
 const isUploading = computed(() => !props.file || props.file?.progress !== undefined);
+const statusMessage = computed(() => isUploading.value ? "Uploading..." : transcodingStatus.value?.message);
 const previewableFiles: ComputedRef<(UploadedFile | null)[] | null> = computed(() => {
 	return props.relatedFiles?.length > 0 ? uniqueBy([computedImage.value, ...props.relatedFiles], filesHaveSameUrl) : [computedImage.value];
 });

package/src/helpers/FileUpload.ts

@@ -1,5 +1,6 @@
 import { uid } from "quasar";
 import { danxOptions } from "../config";
+import { DateTime, parseDateTime } from "../helpers/formats";
 import {
 	FileUploadAllCompleteCallback,
 	FileUploadCompleteCallback,
@@ -278,11 +279,15 @@ export class FileUpload {
 	 */
 	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;
+				const startedAt = parseDateTime(transcode.started_at);
+				const duration = startedAt && DateTime.now().diff(startedAt, "minutes");
+				if (!duration?.minutes || duration.minutes < 30) {
+					return true;
+				}
 			}
 		}
 		return false;

package/src/helpers/importFile.ts

@@ -0,0 +1,20 @@
+import { AnyObject } from "../types";
+
+export function importJson(file: File): Promise<AnyObject> {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		let jsonData = null;
+
+		reader.onload = async (e) => {
+			try {
+				jsonData = JSON.parse(e.target?.result as string);
+				resolve(jsonData);
+			} catch (error) {
+				console.error("Invalid JSON file:", error);
+				reject(error);
+			}
+		};
+
+		reader.readAsText(file);
+	});
+}

package/src/helpers/index.ts

@@ -10,6 +10,7 @@ export * from "./FileUpload";
 export * from "./FlashMessages";
 export * from "./formats";
 export * from "./hotkeys";
+export * from "./importFile";
 export * from "./multiFileUpload";
 export * from "./objectStore";
 export * from "./request";

package/src/helpers/objectStore.ts

@@ -44,10 +44,10 @@ export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredO
 	// 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
+	// If an old object exists, and it is newer than the new object, and all the child objects are not newer than the original 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 (!hasRecentUpdates(newObject, oldObject)) {
 		recentlyStoredObjects[objectKey] = oldObject;
 
 		// Recursively store all the children of the object as well
@@ -105,6 +105,55 @@ function storeObjectChildren<T extends TypedObject>(object: T, recentlyStoredObj
 	}
 }
 
+/**
+ * Recursively check the current object and all its child objects
+ * to see if any of the objects are newer than the currently stored objects
+ */
+function hasRecentUpdates(newObject: TypedObject, oldObject: TypedObject | null) {
+	// If there are no timestamps to compare, assume there are updates
+	if (!newObject.__timestamp || !oldObject?.__timestamp) return true;
+
+	// If the new object has a newer timestamp than the old then there are updates
+	if (newObject.__timestamp > oldObject.__timestamp) return true;
+
+	for (const key of Object.keys(newObject)) {
+		const newObjectValue = newObject[key];
+		const oldObjectValue = oldObject[key];
+
+		// If the old object does not have this key, this is new information, therefore there are updates
+		if (!oldObjectValue?.__timestamp) {
+			return true;
+		}
+
+		if (Array.isArray(newObjectValue) && newObjectValue.length > 0) {
+			for (const newObjectItem of newObjectValue as TypedObject[]) {
+				// Only compare the object if it is a TypedObject
+				if (newObjectItem?.__type) {
+					const oldObjectItem = (oldObjectValue as TypedObject[]).find((v: TypedObject) => v.id === newObjectItem.id && v.__type === newObjectItem.__type);
+
+					// If the oldObject does not have this entry, then there is new information, therefore there are updates
+					if (!oldObjectItem?.__timestamp) {
+						return true;
+					}
+
+					// Compare the child objects to see if there are updates
+					if (hasRecentUpdates(newObjectItem, oldObjectItem)) {
+						return true;
+					}
+				}
+			}
+		} else if (newObjectValue?.__type) {
+			// Only compare the object if it is a TypedObject
+			if (hasRecentUpdates(newObjectValue, oldObjectValue)) {
+				return true;
+			}
+		}
+	}
+
+	// If no updates were found, return false
+	return false;
+}
+
 /**
  * Remove an object from all lists in the store
  */