quasar-ui-danx 0.4.52 → 0.4.54

package/package.json

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

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

@@ -41,6 +41,14 @@
               :alt="file.filename"
               :src="getPreviewUrl(file)"
             >
+            <div
+              v-else-if="isText(file)"
+              class="w-[60vw] min-w-96 bg-slate-800 rounded-lg"
+            >
+              <div class="whitespace-pre-wrap p-4">
+                {{ fileTexts[file.id] }}
+              </div>
+            </div>
             <div v-else>
               <h3 class="text-center mb-4">
                 No Preview Available
@@ -71,8 +79,9 @@
     </div>
   </QDialog>
 </template>
-<script setup>
-import { ref } from "vue";
+<script setup lang="ts">
+import { QCarousel } from "quasar";
+import { onMounted, ref, shallowRef } from "vue";
 import { XIcon as CloseIcon } from "../../../svg";
 
 defineEmits(["close"]);
@@ -97,6 +106,10 @@ function isImage(file) {
 	return file.mime?.startsWith("image");
 }
 
+function isText(file) {
+	return file.mime?.startsWith("text");
+}
+
 function getPreviewUrl(file) {
 	// Use the optimized URL first if available. If not, use the URL directly if its an image, otherwise use the thumb URL
 	return file.optimized?.url || (isImage(file) ? (file.blobUrl || file.url) : file.thumb?.url);
@@ -111,8 +124,26 @@ function getThumbUrl(file) {
 			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></svg>`
 		)}`;
 	} else {
-		return getPreviewUrl(file);
+		return getPreviewUrl(file) || "https://placehold.co/40x50?text=T";
+	}
+}
+
+onMounted(() => {
+	for (let file of props.files) {
+		if (isText(file)) {
+			loadFileText(file);
+		}
+	}
+});
+
+const fileTexts = shallowRef<{ [key: string]: string }>({});
+
+async function loadFileText(file) {
+	if (fileTexts.value[file.id]) {
+		return fileTexts.value[file.id];
 	}
+
+	fileTexts.value[file.id] = await fetch(file.url).then((res) => res.text());
 }
 </script>
 <style module="cls" lang="scss">

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

@@ -69,7 +69,8 @@
         class="absolute-bottom w-full bg-slate-800"
       >
         <QLinearProgress
-          :value="isUploading ? file.progress : (transcodingStatus.progress / 100)"
+          :key="'progress-' + isUploading ? 'uploading' : 'transcoding'"
+          :value="isUploading ? file.progress : ((transcodingStatus?.progress || 0) / 100)"
           size="36px"
           :color="isUploading ? 'green-800' : 'blue-800'"
           :animation-speed="transcodingStatus?.estimate_ms || 3000"
@@ -77,12 +78,17 @@
         >
           <div class="absolute-full flex items-center flex-nowrap text-[.7rem] text-slate-200 justify-start px-1">
             <QSpinnerPie
-              class="mr-2 text-slate-50 ml-1"
-              size="20"
+              class="mr-2 text-slate-50 ml-1 flex-shrink-0"
+              :size="btnSize === 'xs' ? 10 : 20"
             />
-            <div>
-              {{ isUploading ? "Uploading..." : transcodingStatus.message }}
-            </div>
+            <template v-if="statusMessage">
+              <div class="whitespace-nowrap overflow-hidden ellipsis">
+                {{ statusMessage }}
+              </div>
+              <QTooltip class="text-sm">
+                {{ statusMessage }}
+              </QTooltip>
+            </template>
           </div>
         </QLinearProgress>
       </div>
@@ -202,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/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
  */