quasar-ui-danx 0.4.9 → 0.4.12

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

@@ -45,6 +45,12 @@
             v-else
             class="w-24"
           />
+          <div
+            v-if="filename"
+            class="text-[.7rem] bg-slate-900 text-slate-300 opacity-80 h-[2.25rem] py-.5 px-1 absolute-bottom"
+          >
+            {{ filename }}
+          </div>
         </div>
       </div>
       <div
@@ -54,15 +60,26 @@
         <slot name="action-button" />
       </div>
       <div
-        v-if="file && file.progress !== undefined"
-        class="absolute-bottom w-full"
+        v-if="isUploading || transcodingStatus"
+        class="absolute-bottom w-full bg-slate-800"
       >
         <QLinearProgress
-          :value="file.progress"
-          size="15px"
-          color="green-600"
+          :value="isUploading ? file.progress : (transcodingStatus.progress / 100)"
+          size="36px"
+          :color="isUploading ? 'green-800' : 'blue-800'"
+          :animation-speed="transcodingStatus?.estimate_ms || 3000"
           stripe
-        />
+        >
+          <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"
+            />
+            <div>
+              {{ isUploading ? "Uploading..." : transcodingStatus.message }}
+            </div>
+          </div>
+        </QLinearProgress>
       </div>
     </template>
     <template v-else>
@@ -105,9 +122,9 @@
     </div>
 
     <FullScreenCarouselDialog
-      v-if="showPreview && !disabled"
-      :files="relatedFiles || [computedImage]"
-      :default-slide="relatedFiles ? relatedFiles[0].id : (computedImage?.id || '')"
+      v-if="showPreview && !disabled && previewableFiles"
+      :files="previewableFiles"
+      :default-slide="previewableFiles[0]?.id || ''"
       @close="showPreview = false"
     />
   </div>
@@ -115,12 +132,21 @@
 
 <script setup lang="ts">
 import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from "@heroicons/vue/outline";
-import { computed, ComputedRef, ref } from "vue";
-import { download } from "../../../helpers";
+import { computed, ComputedRef, onMounted, ref } from "vue";
+import { download, FileUpload } from "../../../helpers";
 import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from "../../../svg";
 import { UploadedFile } from "../../../types";
 import { FullScreenCarouselDialog } from "../Dialogs";
 
+export interface FileTranscode {
+	status: "Complete" | "Pending" | "In Progress";
+	progress: number;
+	estimate_ms: number;
+	started_at: string;
+	completed_at: string;
+	message?: string;
+}
+
 export interface FilePreviewProps {
 	src?: string;
 	file?: UploadedFile;
@@ -149,6 +175,7 @@ const props = withDefaults(defineProps<FilePreviewProps>(), {
 	square: false
 });
 
+
 const showPreview = ref(false);
 const computedImage: ComputedRef<UploadedFile | null> = computed(() => {
 	if (props.file) {
@@ -159,11 +186,19 @@ const computedImage: ComputedRef<UploadedFile | null> = computed(() => {
 			url: props.src,
 			type: "image/" + props.src.split(".").pop()?.toLowerCase(),
 			name: "",
-			size: 0
+			size: 0,
+			__type: "BrowserFile"
 		};
 	}
 	return null;
 });
+
+const isUploading = computed(() => !props.file || props.file?.progress !== undefined);
+const previewableFiles: ComputedRef<[UploadedFile | null]> = computed(() => {
+	return props.relatedFiles?.length > 0 ? props.relatedFiles : [computedImage.value];
+});
+
+const filename = computed(() => computedImage.value?.name || computedImage.value?.filename || "");
 const mimeType = computed(
 	() => computedImage.value?.type || computedImage.value?.mime || ""
 );
@@ -179,6 +214,31 @@ const thumbUrl = computed(() => {
 const isPreviewable = computed(() => {
 	return !!thumbUrl.value || isVideo.value || isImage.value;
 });
+
+/**
+ * Resolve the active transcoding operation if there is one, otherwise return null
+ */
+const transcodingStatus = computed(() => {
+	let status = null;
+	const metaTranscodes: FileTranscode[] = props.file?.meta?.transcodes || [];
+
+	for (let transcodeName of Object.keys(metaTranscodes)) {
+		const transcode = metaTranscodes[transcodeName];
+		if (!transcode?.completed_at) {
+			return { ...transcode, message: `${transcodeName} ${transcode.status}` };
+		}
+	}
+
+	return status;
+});
+
+// Check for an active transcode and make sure the file is being polled for updates
+onMounted(() => {
+	if (transcodingStatus.value) {
+		(new FileUpload([])).waitForTranscode(props.file);
+	}
+});
+
 const isConfirmingRemove = ref(false);
 function onRemove() {
 	if (!isConfirmingRemove.value) {

package/src/components/Utility/Popovers/PopoverMenu.vue

@@ -24,62 +24,67 @@
       auto-close
     >
       <QList>
-        <template v-for="item in items">
+        <template
+          v-for="item in items"
+          :key="item.name"
+        >
           <a
             v-if="item.url"
-            :key="item.url"
             class="q-item"
             target="_blank"
             :href="item.url"
             :class="item.class"
           >
-            {{ item.label }}
+            <Component
+              :is="item.icon"
+              v-if="item.icon"
+              :class="item.iconClass"
+              class="mr-3 w-4"
+            /> {{ item.label }}
           </a>
           <QItem
             v-else
-            :key="item.name || item.action"
             clickable
             :class="item.class"
             @click="onAction(item)"
           >
-            {{ item.label }}
+            <Component
+              :is="item.icon"
+              v-if="item.icon"
+              :class="item.iconClass"
+              class="mr-3 w-4"
+            /> {{ item.label }}
           </QItem>
         </template>
       </QList>
     </QMenu>
   </a>
 </template>
-<script setup>
+<script setup lang="ts">
 import { DotsVerticalIcon as MenuIcon } from "@heroicons/vue/outline";
 import { QSpinner } from "quasar";
+import { ResourceAction } from "../../../types";
 import { RenderComponent } from "../Tools";
 
+export interface PopoverMenuProps {
+	items: ResourceAction;
+	tooltip?: string;
+	disabled?: boolean;
+	loading?: boolean;
+	loadingComponent?: any;
+}
+
 const emit = defineEmits(["action", "action-item"]);
-defineProps({
-  items: {
-    type: Array,
-    required: true,
-    validator(items) {
-      return items.every((item) => item.url || item.action || item.name);
-    }
-  },
-  tooltip: {
-    type: String,
-    default: null
-  },
-  disabled: Boolean,
-  loading: Boolean,
-  loadingComponent: {
-    type: [Function, Object],
-    default: () => ({
-      is: QSpinner,
-      props: { class: "w-4 h-4" }
-    })
-  }
+withDefaults(defineProps<PopoverMenuProps>(), {
+	tooltip: null,
+	loadingComponent: () => ({
+		is: QSpinner,
+		props: { class: "w-4 h-4" }
+	})
 });
 
 function onAction(item) {
-  emit("action", item.name || item.action);
-  emit("action-item", item);
+	emit("action", item.name || item.action);
+	emit("action-item", item);
 }
 </script>

package/src/config/index.ts

@@ -11,7 +11,8 @@ export const danxOptions = shallowRef<DanxOptions>({
 	fileUpload: {
 		directory: "file-upload",
 		createPresignedUpload: null,
-		completePresignedUpload: null
+		completePresignedUpload: null,
+		refreshFile: null
 	},
 	flashMessages: {
 		default: {},

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/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

@@ -29,10 +29,9 @@ export function remoteDateTime(dateTimeString: string) {
 }
 
 /**
- * @param {DateTime|String} dateTime
- * @returns {DateTime|*}
+ * Parses a date string into a Luxon DateTime object
  */
-export function parseDateTime(dateTime: string | DateTime) {
+export function parseDateTime(dateTime: string | DateTime | null): DateTime {
 	if (typeof dateTime === "string") {
 		dateTime = dateTime.replace("T", " ").replace(/\//g, "-");
 		return DateTime.fromSQL(dateTime);
@@ -91,8 +90,8 @@ export function fDateTime(
 		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 = parseDateTime(dateTime).toFormat(format).toLowerCase();
+	return ["Invalid DateTime", "invalid datetime"].includes(formatted) ? empty : formatted;
 }
 
 /**
@@ -151,16 +150,87 @@ export function fCurrency(amount: number, options?: object) {
 	}).format(amount);
 }
 
+/**
+ * Formats an amount into USD currency format without cents
+ */
+export function fCurrencyNoCents(amount: number, options?: object) {
+	return fCurrency(amount, {
+		maximumFractionDigits: 0,
+		...options
+	});
+}
+
 /**
  * Formats a number into a human-readable format
- * @param number
- * @param options
- * @returns {string}
  */
-export function fNumber(number: number, options = {}) {
+export function fNumber(number: number, options?: object) {
 	return new Intl.NumberFormat("en-US", options).format(number);
 }
 
+/**
+ * Formats a currency into a shorthand human-readable format (ie: $1.2M or $5K)
+ */
+export function fShortCurrency(value: string | number, options?: { round: boolean }) {
+	return "$" + fShortNumber(value, options);
+}
+
+/**
+ * Formats a number into a shorthand human-readable format (ie: 1.2M or 5K)
+ */
+export function fShortNumber(value: string | number, options?: { round: boolean }) {
+	const shorts = [
+		{ pow: 3, unit: "K" },
+		{ pow: 6, unit: "M" },
+		{ pow: 9, unit: "B" },
+		{ pow: 12, unit: "T" },
+		{ pow: 15, unit: "Q" }
+	];
+
+	let n = Math.round(+value);
+
+	const short = shorts.find(({ pow }) => Math.pow(10, pow) < n && Math.pow(10, pow + 3) > n) || null;
+
+	if (short) {
+		n = n / Math.pow(10, short.pow);
+		return options?.round
+				? n + short.unit
+				: n.toFixed(n > 100 ? 0 : 1) + short.unit;
+	}
+
+	return n;
+}
+
+/**
+ * Formats a number into a human-readable size format (ie: 1.2MB or 5KB)
+ */
+export function fShortSize(value: string | number) {
+	const powers = [
+		{ pow: 0, unit: "B" },
+		{ pow: 10, unit: "KB" },
+		{ pow: 20, unit: "MB" },
+		{ pow: 30, unit: "GB" },
+		{ pow: 40, unit: "TB" },
+		{ pow: 50, unit: "PB" },
+		{ pow: 60, unit: "EB" },
+		{ pow: 70, unit: "ZB" },
+		{ pow: 80, unit: "YB" }
+	];
+
+	const n = Math.round(+value);
+	const power = powers.find((p, i) => {
+		const nextPower = powers[i + 1];
+		return !nextPower || n < Math.pow(2, nextPower.pow + 10);
+	}) || powers[powers.length - 1];
+
+	const div = Math.pow(2, power.pow);
+
+	return Math.round(n / div) + " " + power.unit;
+}
+
+export function fBoolean(value: boolean) {
+	return value ? "Yes" : "No";
+}
+
 /**
  * Truncates the string by removing chars from the middle of the string
  * @param str

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({