quasar-ui-danx 0.4.10 → 0.4.13

package/src/components/ActionTable/Layouts/ActionTableLayout.vue

@@ -68,10 +68,10 @@
 </template>
 <script setup lang="ts">
 import { computed } from "vue";
-import { ActionController, ActionOptions, ActionPanel, FilterGroup, TableColumn } from "../../../types";
+import { ActionController, ActionPanel, FilterGroup, ResourceAction, TableColumn } from "../../../types";
 import { PanelsDrawer } from "../../PanelsDrawer";
 import { PreviousNextControls } from "../../Utility";
-import ActionTable from "../ActionTable";
+import ActionTable from "../ActionTable.vue";
 import { CollapsableFiltersSidebar } from "../Filters";
 import { ActionToolbar } from "../Toolbars";
 
@@ -83,7 +83,7 @@ const props = defineProps<{
 	columns: TableColumn[];
 	filters?: FilterGroup[];
 	panels?: ActionPanel[];
-	actions?: ActionOptions[];
+	actions?: ResourceAction[];
 	exporter?: () => Promise<void>;
 	panelTitleField?: string;
 	tableClass?: string;

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/PanelsDrawer/PanelsDrawer.vue

@@ -1,7 +1,7 @@
 <template>
   <ContentDrawer
     position="right"
-    :show="true"
+    show
     overlay
     content-class="h-full"
     class="dx-panels-drawer"
@@ -13,7 +13,13 @@
       <div class="dx-panels-drawer-header flex items-center px-6 py-4">
         <div class="flex-grow">
           <slot name="header">
-            <h2>{{ title }}</h2>
+            <h2 v-if="title">
+              {{ title }}
+            </h2>
+            <div v-if="!activeItem">
+              Loading
+              <QSpinnerHourglass />
+            </div>
           </slot>
         </div>
         <div
@@ -32,10 +38,14 @@
         </div>
       </div>
       <div class="dx-panels-drawer-body flex-grow overflow-hidden h-full">
-        <div class="flex items-stretch flex-nowrap h-full">
+        <div
+          v-if="activeItem.__timestamp > 0"
+          class="flex items-stretch flex-nowrap h-full"
+        >
           <PanelsDrawerTabs
             :key="'pd-tabs:' + activeItem.id"
             v-model="activePanel"
+            :active-item="activeItem"
             :class="tabsClass"
             :panels="panels"
             @update:model-value="$emit('update:model-value', $event)"
@@ -44,6 +54,7 @@
             :key="'pd-panels:' + activeItem.id"
             :panels="panels"
             :active-panel="activePanel"
+            :active-item="activeItem"
             :class="activePanelOptions?.class || panelsClass"
           />
           <div
@@ -68,7 +79,7 @@ import PanelsDrawerTabs from "./PanelsDrawerTabs";
 export interface Props {
 	title?: string,
 	modelValue?: string | number,
-	activeItem?: ActionTargetItem;
+	activeItem: ActionTargetItem;
 	tabsClass?: string | object,
 	panelsClass?: string | object,
 	panels: ActionPanel[]
@@ -78,7 +89,6 @@ defineEmits(["update:model-value", "close"]);
 const props = withDefaults(defineProps<Props>(), {
 	title: "",
 	modelValue: null,
-	activeItem: null,
 	tabsClass: "w-[13.5rem]",
 	panelsClass: "w-[35.5rem]"
 });

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -11,17 +11,19 @@
       <RenderVnode
         v-if="panel.vnode"
         :vnode="panel.vnode"
+        :props="activeItem"
       />
     </QTabPanel>
   </QTabPanels>
 </template>
 
 <script setup lang="ts">
-import { ActionPanel } from "../../types";
+import { ActionPanel, ActionTargetItem } from "../../types";
 import { RenderVnode } from "../Utility";
 
 defineProps<{
 	activePanel?: string | number,
+	activeItem: ActionTargetItem,
 	panels: ActionPanel[]
 }>();
 </script>

package/src/components/PanelsDrawer/PanelsDrawerTabs.vue

@@ -9,11 +9,11 @@
     @update:model-value="$emit('update:model-value', $event)"
   >
     <template v-for="panel in panels">
-      <template v-if="panel.enabled === undefined || !!panel.enabled">
+      <template v-if="isEnabled(panel)">
         <RenderVnode
           v-if="panel.tabVnode"
           :key="panel.name"
-          :vnode="panel.tabVnode(modelValue)"
+          :vnode="panel.tabVnode(activeItem, modelValue)"
           :is-active="modelValue === panel.name"
           :name="panel.name"
           :label="panel.label"
@@ -30,19 +30,32 @@
 </template>
 <script setup lang="ts">
 import { QTab } from "quasar";
-import { ActionPanel } from "../../types";
+import { ActionPanel, ActionTargetItem } from "../../types";
 import { RenderVnode } from "../Utility";
 
 defineEmits(["update:model-value"]);
 
 interface Props {
 	modelValue?: string | number;
+	activeItem: ActionTargetItem;
 	panels: ActionPanel[];
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
 	modelValue: "general"
 });
+
+function isEnabled(panel) {
+	if (panel.enabled === undefined) return true;
+
+	if (!panel.enabled) return false;
+
+	if (typeof panel.enabled === "function") {
+		return panel.enabled(props.activeItem);
+	}
+
+	return true;
+}
 </script>
 
 <style lang="scss" module="cls">

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/components/Utility/Tools/RenderVnode.vue

@@ -11,7 +11,7 @@ const RenderVnode = (props) => {
 	}
 
 	if (typeof props.vnode === "function") {
-		return props.vnode(props.props);
+		return props.vnode(props.props, props.params);
 	}
 
 	return null;
@@ -24,6 +24,10 @@ RenderVnode.props = {
 	props: {
 		type: Object,
 		default: () => ({})
+	},
+	params: {
+		type: Object,
+		default: null
 	}
 };
 export default RenderVnode;

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: {},