quasar-ui-danx 0.4.10 → 0.4.12

package/src/components/ActionTable/TableSummaryRow.vue

@@ -4,8 +4,8 @@
     :class="{'has-selection': selectedCount, 'is-loading': loading}"
   >
     <QTd
-      :colspan="stickyColspan"
-      class="dx-table-summary-td transition-all"
+      :colspan="colspan"
+      class="dx-table-summary-td dx-table-summary-count transition-all"
       :class="{'has-selection': selectedCount}"
     >
       <div class="flex flex-nowrap items-center">
@@ -36,60 +36,71 @@
     <QTd
       v-for="column in summaryColumns"
       :key="column.name"
-      :align="column.align || 'left'"
+      :align="column.align || 'right'"
+      :class="column.summaryClass"
+      class="dx-table-summary-fd"
     >
-      <template v-if="summary">
+      <div
+        v-if="summary"
+        :class="{'dx-summary-column-link': column.onClick}"
+      >
         {{ formatValue(column) }}
-      </template>
+      </div>
     </QTd>
   </QTr>
 </template>
-<script setup>
+<script setup lang="ts">
 import { XCircleIcon as ClearIcon } from "@heroicons/vue/solid";
 import { QSpinner, QTd, QTr } from "quasar";
 import { computed } from "vue";
 import { fNumber } from "../../helpers";
+import { TableColumn } from "../../types";
+
+interface TableSummaryRowProps {
+	loading: boolean;
+	label?: string;
+	selectedLabel?: string;
+	selectedCount?: number;
+	itemCount?: number;
+	summary?: Record<string, any> | null;
+	columns: TableColumn[];
+	stickyColspan?: number;
+}
 
 defineEmits(["clear"]);
-const props = defineProps({
-	loading: Boolean,
-	label: {
-		type: String,
-		default: "Rows"
-	},
-	selectedLabel: {
-		type: String,
-		default: "Selected"
-	},
-	selectedCount: {
-		type: Number,
-		default: 0
-	},
-	itemCount: {
-		type: Number,
-		default: 0
-	},
-	summary: {
-		type: Object,
-		default: null
-	},
-	columns: {
-		type: Array,
-		required: true
-	},
-	stickyColspan: {
-		type: Number,
-		default: 2
+const props = withDefaults(defineProps<TableSummaryRowProps>(), {
+	label: "Rows",
+	selectedLabel: "Selected",
+	selectedCount: 0,
+	itemCount: 0,
+	summary: null,
+	stickyColspan: null
+});
+
+// Allow the colspan for the first summary column w/ count + label to extend out to the first column with summary data
+// (ie: take up as much room as possible without affecting the summary columns)
+const colspan = computed(() => {
+	if (props.stickyColspan) return props.stickyColspan;
+
+	if (props.summary) {
+		for (let i = 0; i < props.columns.length; i++) {
+			const fieldName = props.columns[i].field || props.columns[i].name;
+			if (props.summary[fieldName]) {
+				return i + 1;
+			}
+		}
 	}
+
+	return props.columns.length + 1;
 });
 
 const summaryColumns = computed(() => {
 	// The sticky columns are where we display the selection count and should not be included in the summary columns
-	return props.columns.slice(props.stickyColspan - 1);
+	return props.columns.slice(colspan.value - 1);
 });
 
 function formatValue(column) {
-	const value = props.summary[column.name];
+	const value = props.summary && props.summary[column.name];
 	if (value === undefined) return "";
 
 	if (column.format) {

package/src/components/ActionTable/Toolbars/ActionToolbar.vue

@@ -30,14 +30,14 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ActionOptions, ActionTargetItem, AnyObject } from "../../../types";
+import { ActionTargetItem, AnyObject, ResourceAction } from "../../../types";
 import { ExportButton, RefreshButton } from "../../Utility";
 import ActionMenu from "../ActionMenu";
 
 defineEmits(["refresh"]);
 defineProps<{
 	title?: string,
-	actions?: ActionOptions[],
+	actions?: ResourceAction[],
 	actionTarget?: ActionTargetItem[],
 	refreshButton?: boolean,
 	loading?: boolean,

package/src/components/ActionTable/listControls.ts

@@ -317,7 +317,8 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	// (ie: tasks, verifications, creatives, etc.)
 	if (options.routes.details) {
 		watch(() => activeItem.value, async (newItem, oldItem) => {
-			if (newItem && oldItem?.id !== newItem.id) {
+			// Note we want a loose comparison in case it's a string vs int for the ID
+			if (newItem?.id && oldItem?.id != newItem.id) {
 				await getActiveItemDetails();
 			}
 		});
@@ -328,7 +329,7 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	 */
 	function activatePanel(item: ActionTargetItem | null, panel: string = "") {
 		// If we're already on the correct item and panel, don't do anything
-		if (item?.id === activeItem.value?.id && panel === activePanel.value) return;
+		if (item?.id == activeItem.value?.id && panel === activePanel.value) return;
 
 		setActiveItem(item);
 		activePanel.value = panel;

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

@@ -37,17 +37,37 @@
               </video>
             </template>
             <img
-              v-else
+              v-else-if="getPreviewUrl(file)"
               :alt="file.filename"
               :src="getPreviewUrl(file)"
             >
+            <div v-else>
+              <h3 class="text-center mb-4">
+                No Preview Available
+              </h3>
+              <a
+                :href="file.url"
+                target="_blank"
+                class="text-base"
+              >
+                {{ file.url }}
+              </a>
+            </div>
+          </div>
+
+          <div class="text-base text-center py-5 bg-slate-800 opacity-70 text-slate-300 absolute-top hover:opacity-20 transition-all">
+            {{ file.filename || file.name }}
           </div>
         </QCarouselSlide>
       </QCarousel>
-      <CloseIcon
-        class="absolute top-4 right-4 cursor-pointer text-white w-8 h-8"
+      <a
+        class="absolute top-0 right-0 text-white flex items-center justify-center w-16 h-16 hover:bg-slate-600 transition-all"
         @click="$emit('close')"
-      />
+      >
+        <CloseIcon
+          class="w-8 h-8"
+        />
+      </a>
     </div>
   </QDialog>
 </template>
@@ -73,8 +93,13 @@ function isVideo(file) {
 	return file.mime?.startsWith("video");
 }
 
+function isImage(file) {
+	return file.mime?.startsWith("image");
+}
+
 function getPreviewUrl(file) {
-	return file.optimized?.url || file.blobUrl || file.url;
+	// 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);
 }
 
 function getThumbUrl(file) {

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);
 		}
 	}