quasar-ui-danx 0.4.2 → 0.4.3

package/src/components/ActionTable/listControls.ts

@@ -1,135 +1,40 @@
-import { computed, ComputedRef, Ref, ref, ShallowRef, shallowRef, VNode, watch } from "vue";
-import { ActionTargetItem, AnyObject, getItem, setItem, waitForRef } from "../../helpers";
+import { computed, Ref, ref, shallowRef, watch } from "vue";
+import { RouteLocationNormalizedLoaded, RouteParams, Router, useRoute, useRouter } from "vue-router";
+import { getItem, setItem, storeObject, waitForRef } from "../../helpers";
+import {
+	ActionController,
+	ActionTargetItem,
+	AnyObject,
+	FilterGroup,
+	ListControlsFilter,
+	ListControlsOptions,
+	ListControlsPagination,
+	PagedItems
+} from "../../types";
 import { getFilterFromUrl } from "./listHelpers";
 
-export interface ActionController {
-	name: string;
-	label: string;
-	pagedItems: Ref<PagedItems | null>;
-	activeFilter: Ref<ListControlsFilter>;
-	globalFilter: Ref<ListControlsFilter>;
-	filterActiveCount: ComputedRef<number>;
-	showFilters: Ref<boolean>;
-	summary: ShallowRef<object | null>;
-	filterFieldOptions: Ref<AnyObject>;
-	selectedRows: ShallowRef<ActionTargetItem[]>;
-	isLoadingList: Ref<boolean>;
-	isLoadingFilters: Ref<boolean>;
-	isLoadingSummary: Ref<boolean>;
-	pager: ComputedRef<{
-		perPage: number;
-		page: number;
-		filter: ListControlsFilter;
-		sort: object[] | undefined;
-	}>;
-	pagination: ShallowRef<ListControlsPagination>;
-	activeItem: ShallowRef<ActionTargetItem | null>;
-	activePanel: ShallowRef<string | null>;
-
-	// Actions
-	initialize: () => void;
-	loadSummary: () => Promise<void>;
-	resetPaging: () => void;
-	setPagination: (updated: ListControlsPagination) => void;
-	setSelectedRows: (selection: ActionTargetItem[]) => void;
-	loadList: () => Promise<void>;
-	loadMore: (index: number, perPage?: number) => Promise<boolean>;
-	refreshAll: () => Promise<void[]>;
-	exportList: () => Promise<void>;
-	setActiveItem: (item: ActionTargetItem | null) => void;
-	getNextItem: (offset: number) => Promise<void>;
-	activatePanel: (item: ActionTargetItem | null, panel: string | null) => void;
-	setActiveFilter: (filter: ListControlsFilter) => void;
-	applyFilterFromUrl: (url: string, filterFields: Ref<FilterGroup[]> | null) => void;
-	setItemInList: (updatedItem: ActionTargetItem) => void;
-}
-
-export interface LabelValueItem {
-	label: string;
-	value: string | number | boolean;
-}
-
-export interface FilterField {
-	name: string;
-	label: string;
-	type: string;
-	options?: string[] | number[] | LabelValueItem[];
-	inline?: boolean;
-}
-
-export interface FilterGroup {
-	name?: string;
-	flat?: boolean;
-	fields: FilterField[];
-}
-
-export interface ActionPanel {
-	name: string;
-	label: string;
-	category?: string;
-	enabled: boolean | (() => boolean);
-	tabVnode: () => VNode;
-	vnode: () => VNode;
-}
-
-export interface ListControlsFilter {
-	[key: string]: object | object[] | null | undefined | string | number | boolean;
-}
-
-export interface ListControlsRoutes {
-	list: (pager: object) => Promise<ActionTargetItem[]>;
-	details?: (item: object) => Promise<ActionTargetItem> | null;
-	summary?: (filter: object | null) => Promise<object> | null;
-	filterFieldOptions?: (filter: object | null) => Promise<object> | null;
-	more?: (pager: object) => Promise<ActionTargetItem[]> | null;
-	export: (filter: object) => Promise<void>;
-}
-
-export interface ListControlsOptions {
-	label?: string,
-	routes: ListControlsRoutes;
-	urlPattern?: RegExp | null;
-	filterDefaults?: Record<string, object>;
-	refreshFilters?: boolean;
-}
-
-export interface ListControlsPagination {
-	__sort: object[] | null;
-	sortBy: string | null;
-	descending: boolean;
-	page: number;
-	rowsNumber: number;
-	rowsPerPage: number;
-}
-
-export interface PagedItems {
-	data: ActionTargetItem[] | undefined;
-	meta: {
-		total: number;
-		last_page?: number;
-	} | undefined;
-}
-
-export function useListControls(name: string, options: ListControlsOptions) {
+export function useListControls(name: string, options: ListControlsOptions): ActionController {
 	let isInitialized = false;
+	let vueRoute: RouteLocationNormalizedLoaded | null = null;
+	let vueRouter: Router | null = null;
 	const PAGE_SETTINGS_KEY = `dx-${name}-pager`;
-	const pagedItems: Ref<PagedItems | null> = shallowRef(null);
-	const activeFilter: Ref<ListControlsFilter> = ref({});
+	const pagedItems = shallowRef<PagedItems | null>(null);
+	const activeFilter = ref<ListControlsFilter>({});
 	const globalFilter = ref({});
 	const showFilters = ref(false);
-	const selectedRows: ShallowRef<ActionTargetItem[]> = shallowRef([]);
+	const selectedRows = shallowRef<ActionTargetItem[]>([]);
 	const isLoadingList = ref(false);
 	const isLoadingSummary = ref(false);
-	const summary: ShallowRef<object | null> = shallowRef(null);
+	const summary = shallowRef<AnyObject | null>(null);
 
 	// The active ad for viewing / editing
-	const activeItem: ShallowRef<ActionTargetItem | null> = shallowRef(null);
+	const activeItem = shallowRef<ActionTargetItem | null>(null);
 	// Controls the active panel (ie: tab) if rendering a panels drawer or similar
-	const activePanel: ShallowRef<string> = shallowRef("");
+	const activePanel = shallowRef<string>("");
 
-	// Filter fields are the field values available for the currently applied filter on Creative Groups
+	// Field options are the lists of field values available given the applied filter on the list query. These are used for drop-downs / options in forms, filters, etc.
 	// (ie: all states available under the current filter)
-	const filterFieldOptions: Ref<AnyObject> = ref({});
+	const fieldOptions = ref<AnyObject>({});
 	const isLoadingFilters = ref(false);
 
 	const filterActiveCount = computed(() => Object.keys(activeFilter.value).filter(key => activeFilter.value[key] !== undefined).length);
@@ -163,7 +68,7 @@ export function useListControls(name: string, options: ListControlsOptions) {
 	watch(selectedRows, loadSummary);
 
 	if (options.refreshFilters) {
-		watch(activeFilter, loadFilterFieldOptions);
+		watch(activeFilter, loadFieldOptions);
 	}
 
 	async function loadList() {
@@ -185,11 +90,15 @@ export function useListControls(name: string, options: ListControlsOptions) {
 		isLoadingSummary.value = false;
 	}
 
+	async function loadListAndSummary() {
+		await Promise.all([loadList(), loadSummary()]);
+	}
+
 	/**
 	 * Gets the field options for the given field name.
 	 */
-	function getFieldOptions(field: string) {
-		return filterFieldOptions.value[field] || [];
+	function getFieldOptions(field: string): any[] {
+		return fieldOptions.value[field] || [];
 	}
 
 	/**
@@ -197,20 +106,20 @@ export function useListControls(name: string, options: ListControlsOptions) {
 	 *
 	 * @returns {Promise<void>}
 	 */
-	async function loadFilterFieldOptions() {
-		if (!options.routes.filterFieldOptions || !isInitialized) return;
+	async function loadFieldOptions() {
+		if (!options.routes.fieldOptions || !isInitialized) return;
 		isLoadingFilters.value = true;
-		filterFieldOptions.value = await options.routes.filterFieldOptions(activeFilter.value) || {};
+		fieldOptions.value = await options.routes.fieldOptions(activeFilter.value) || {};
 		isLoadingFilters.value = false;
 	}
 
 	/**
 	 * Watches for a filter URL parameter and applies the filter if it is set.
 	 */
-	function applyFilterFromUrl(url: string, filterFields: Ref<FilterGroup[]> | null = null) {
+	function applyFilterFromUrl(url: string, filterGroups: Ref<FilterGroup[]> | null = null) {
 		if (options.urlPattern && url.match(options.urlPattern)) {
 			// A flat list of valid filterable field names
-			const validFilterKeys = filterFields?.value?.map(group => group.fields.map(field => field.name)).flat();
+			const validFilterKeys = filterGroups?.value?.map(group => group.fields.map(field => field.name)).flat();
 
 			const urlFilter = getFilterFromUrl(url, validFilterKeys);
 
@@ -231,7 +140,6 @@ export function useListControls(name: string, options: ListControlsOptions) {
 		if (Array.isArray(items)) {
 			data = items;
 			meta = { total: items.length };
-
 		} else if (items.data) {
 			data = items.data;
 			meta = items.meta;
@@ -243,11 +151,11 @@ export function useListControls(name: string, options: ListControlsOptions) {
 		}
 
 		// Add a reactive isSaving property to each item (for performance reasons in checking saving state)
-		data = data.map((item) => {
+		data = data.map((item: ActionTargetItem) => {
+			item.isSaving = item.isSaving === undefined ? false : item.isSaving;
 			// We want to keep the isSaving state if it is already set, as optimizations prevent reloading the
 			// components, and therefore reactivity is not responding to the new isSaving state
-			const oldItem = pagedItems.value?.data?.find(i => i.id === item.id);
-			return { ...item, isSaving: oldItem?.isSaving || ref(false) };
+			return storeObject(item);
 		});
 
 		pagedItems.value = { data, meta };
@@ -276,30 +184,17 @@ export function useListControls(name: string, options: ListControlsOptions) {
 	}
 
 	/**
-	 * Updates a row in the paged items list with the new item data. Uses the item's id to find the row.
-	 *
-	 * @param updatedItem
+	 * Clears the selected rows in the list.
 	 */
-	function setItemInList(updatedItem: ActionTargetItem) {
-		if (updatedItem && updatedItem.id) {
-			const data = pagedItems.value?.data?.map(item => (item.id === updatedItem.id && (item.updated_at === null || item.updated_at <= updatedItem.updated_at)) ? updatedItem : item);
-			setPagedItems({
-				data,
-				meta: { total: pagedItems.value?.meta?.total || 0 }
-			});
-
-			// Update the active item as well if it is set
-			if (activeItem.value?.id === updatedItem.id) {
-				activeItem.value = { ...activeItem.value, ...updatedItem };
-			}
-		}
+	function clearSelectedRows() {
+		selectedRows.value = [];
 	}
 
 	/**
 	 * Loads more items into the list.
 	 */
-	async function loadMore(index: number, perPage = undefined) {
-		if (!options.routes.more) return;
+	async function loadMore(index: number, perPage: number | undefined = undefined) {
+		if (!options.routes.more) return false;
 
 		const newItems = await options.routes.more({
 			page: index + 1,
@@ -322,7 +217,7 @@ export function useListControls(name: string, options: ListControlsOptions) {
 	 * Refreshes the list, summary, and filter field options.
 	 */
 	async function refreshAll() {
-		return Promise.all([loadList(), loadSummary(), loadFilterFieldOptions(), getActiveItemDetails()]);
+		return Promise.all([loadList(), loadSummary(), loadFieldOptions(), getActiveItemDetails()]);
 	}
 
 	/**
@@ -362,7 +257,7 @@ export function useListControls(name: string, options: ListControlsOptions) {
 			}
 
 			if (!isLoadingFilters.value) {
-				loadFilterFieldOptions();
+				loadFieldOptions();
 			}
 		}, 1);
 	}
@@ -389,13 +284,12 @@ export function useListControls(name: string, options: ListControlsOptions) {
 
 		const result = await options.routes.details(activeItem.value);
 
-		// Only set the ad details if we are the response for the currently loaded item
-		// NOTE: race conditions might allow the finished loading item to be different to the currently
-		// requested item
-		if (result?.id === activeItem.value?.id) {
-			const loadedItem = pagedItems.value?.data?.find((i: ActionTargetItem) => i.id === result.id);
-			activeItem.value = { ...result, isSaving: loadedItem?.isSaving || ref(false) };
+		if (!result || !result.__type || !result.id) {
+			return console.error("Invalid response from details route: All responses must include a __type and id field. result =", result);
 		}
+
+		// Reassign the active item to the store object to ensure reactivity
+		activeItem.value = storeObject(result);
 	}
 
 	// Whenever the active item changes, fill the additional item details
@@ -411,16 +305,32 @@ export function useListControls(name: string, options: ListControlsOptions) {
 	/**
 	 * Opens the item's form with the given item and tab
 	 */
-	function activatePanel(item: ActionTargetItem | null, panel: string) {
-		activeItem.value = item;
+	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;
+
+		setActiveItem(item);
 		activePanel.value = panel;
+
+		// Push vue router change /:id/:panel
+		if (vueRoute && vueRouter && item?.id) {
+			vueRouter.push({
+				name: Array.isArray(vueRoute.name) ? vueRoute.name[0] : vueRoute.name,
+				params: { id: item.id, panel },
+				replace: true
+			});
+		}
 	}
 
 	/**
 	 * Sets the currently active item in the list.
 	 */
 	function setActiveItem(item: ActionTargetItem | null) {
-		activeItem.value = item;
+		activeItem.value = item ? storeObject(item) : item;
+
+		if (!item?.id) {
+			vueRouter?.push({ name: vueRoute?.name || "home" });
+		}
 	}
 
 	/**
@@ -465,11 +375,11 @@ export function useListControls(name: string, options: ListControlsOptions) {
 	/**
 	 * Sets the active filter to the given filter.
 	 */
-	function setActiveFilter(filter: ListControlsFilter) {
-		activeFilter.value = filter;
+	function setActiveFilter(filter?: ListControlsFilter) {
+		activeFilter.value = filter || {};
 	}
 
-	async function exportList(filter: object) {
+	async function exportList(filter?: ListControlsFilter) {
 		return options.routes.export(filter);
 	}
 
@@ -477,6 +387,33 @@ export function useListControls(name: string, options: ListControlsOptions) {
 	function initialize() {
 		isInitialized = true;
 		loadSettings();
+
+		// Setup Vue Router handling
+		vueRoute = useRoute();
+		vueRouter = useRouter();
+		/**
+		 * Watch the id params in the route and set the active item to the item with the given id.
+		 */
+		if (options.routes.details) {
+			const { params, meta } = vueRoute;
+
+			const controlRouteName = vueRoute.name;
+			vueRouter.afterEach((to) => {
+				if (to.name === controlRouteName) {
+					setPanelFromRoute(to.params, to.meta);
+				}
+			});
+
+			setPanelFromRoute(params, meta);
+		}
+	}
+
+	function setPanelFromRoute(params: RouteParams, meta: AnyObject) {
+		const id = Array.isArray(params?.id) ? params.id[0] : params?.id;
+		if (id && meta.type) {
+			const panel = Array.isArray(params?.panel) ? params.panel[0] : params?.panel;
+			activatePanel({ id, __type: "" + meta.type }, panel || activePanel.value || "");
+		}
 	}
 
 	return {
@@ -489,7 +426,6 @@ export function useListControls(name: string, options: ListControlsOptions) {
 		filterActiveCount,
 		showFilters,
 		summary,
-		filterFieldOptions,
 		selectedRows,
 		isLoadingList,
 		isLoadingFilters,
@@ -501,12 +437,15 @@ export function useListControls(name: string, options: ListControlsOptions) {
 
 		// Actions
 		initialize,
-		loadSummary,
 		resetPaging,
 		setPagination,
 		setSelectedRows,
+		clearSelectedRows,
 		loadList,
+		loadSummary,
+		loadListAndSummary,
 		loadMore,
+		getActiveItemDetails,
 		refreshAll,
 		exportList,
 		setActiveItem,
@@ -514,7 +453,6 @@ export function useListControls(name: string, options: ListControlsOptions) {
 		activatePanel,
 		setActiveFilter,
 		applyFilterFromUrl,
-		setItemInList,
 		getFieldOptions
 	};
 }

package/src/components/ActionTable/listHelpers.ts

@@ -1,7 +1,6 @@
-import { ListControlsPagination } from "src/components/ActionTable/listControls";
-import { TableColumn } from "src/components/ActionTable/tableColumns";
 import { onMounted, Ref } from "vue";
-import { AnyObject, getUrlParam } from "../../helpers";
+import { getUrlParam } from "../../helpers";
+import { AnyObject, ListControlsPagination, TableColumn } from "../../types";
 
 export function registerStickyScrolling(tableRef: Ref) {
 	onMounted(() => {

package/src/components/ActionTable/tableColumns.ts

@@ -1,30 +1,6 @@
-import { computed, ref, VNode, watch } from "vue";
-import { ActionOptions, getItem, setItem } from "../../helpers";
-
-export interface TableColumn {
-	actionMenu?: ActionOptions[],
-	align?: string,
-	category?: string,
-	class?: string | object,
-	field: string,
-	format?: (value: any, options: any) => any,
-	innerClass?: string | object,
-	style?: string | object,
-	headerStyle?: string | object,
-	isSavingRow?: boolean | (() => boolean),
-	label: string,
-	maxWidth?: number,
-	minWidth?: number,
-	name: string,
-	onClick?: (target: any) => void,
-	required?: boolean,
-	resizeable?: boolean,
-	sortable?: boolean,
-	sortBy?: string,
-	sortByExpression?: string,
-	titleColumns?: () => string[],
-	vnode?: () => VNode,
-}
+import { computed, ref, watch } from "vue";
+import { getItem, setItem } from "../../helpers";
+import { TableColumn } from "../../types";
 
 export function useTableColumns(name: string, columns: TableColumn[]) {
 	const COLUMN_ORDER_KEY = `${name}-column-order`;

package/src/components/AuditHistory/AuditHistoryItemValue.vue

@@ -2,7 +2,7 @@
   <div class="flex space-x-2">
     <template v-if="type === 'SINGLE_FILE'">
       <FilePreview
-        :image="value"
+        :file="value"
         class="w-24"
       />
     </template>
@@ -10,7 +10,7 @@
       <FilePreview
         v-for="file in value"
         :key="'file-' + file.id"
-        :image="file"
+        :file="file"
         class="w-24 mb-2"
       />
     </template>
@@ -27,34 +27,34 @@ import { fCurrency, fDate, fLocalizedDateTime, fNumber } from "../../helpers";
 import { FilePreview } from "../Utility";
 
 const props = defineProps({
-  type: {
-    type: String,
-    required: true
-  },
-  value: {
-    type: [Number, String, Array, Object, Boolean],
-    default: null
-  }
+	type: {
+		type: String,
+		required: true
+	},
+	value: {
+		type: [Number, String, Array, Object, Boolean],
+		default: null
+	}
 });
 
 function format(value) {
-  if (value === null || value === "" || value === undefined) {
-    return "";
-  }
+	if (value === null || value === "" || value === undefined) {
+		return "";
+	}
 
-  switch (props.type) {
-    case "NUMBER":
-      return fNumber(value);
-    case "CURRENCY":
-      return fCurrency(value);
-    case "DATE":
-      return fDate(value);
-    case "DATETIME":
-      return fLocalizedDateTime(value);
-    case "BOOLEAN":
-      return value ? "Yes" : "No";
-  }
+	switch (props.type) {
+		case "NUMBER":
+			return fNumber(value);
+		case "CURRENCY":
+			return fCurrency(value);
+		case "DATE":
+			return fDate(value);
+		case "DATETIME":
+			return fLocalizedDateTime(value);
+		case "BOOLEAN":
+			return value ? "Yes" : "No";
+	}
 
-  return value;
+	return value;
 }
 </script>

package/src/components/PanelsDrawer/PanelsDrawer.vue

@@ -6,6 +6,7 @@
     content-class="h-full"
     class="dx-panels-drawer"
     title=""
+    no-route-dismiss
     @update:show="$emit('close')"
   >
     <div class="flex flex-col flex-nowrap h-full">
@@ -33,15 +34,17 @@
       <div class="dx-panels-drawer-body flex-grow overflow-hidden h-full">
         <div class="flex items-stretch flex-nowrap h-full">
           <PanelsDrawerTabs
+            :key="'pd-tabs:' + activeItem.id"
             v-model="activePanel"
             :class="tabsClass"
             :panels="panels"
             @update:model-value="$emit('update:model-value', $event)"
           />
           <PanelsDrawerPanels
+            :key="'pd-panels:' + activeItem.id"
             :panels="panels"
             :active-panel="activePanel"
-            :class="panelsClass"
+            :class="activePanelOptions?.class || panelsClass"
           />
           <div
             v-if="$slots['right-sidebar']"
@@ -55,16 +58,17 @@
   </ContentDrawer>
 </template>
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { XIcon as CloseIcon } from "../../svg";
-import { ActionPanel } from "../ActionTable";
+import { ActionPanel, ActionTargetItem } from "../../types";
 import { ContentDrawer } from "../Utility";
 import PanelsDrawerPanels from "./PanelsDrawerPanels";
 import PanelsDrawerTabs from "./PanelsDrawerTabs";
 
 export interface Props {
 	title?: string,
-	modelValue?: string,
+	modelValue?: string | number,
+	activeItem?: ActionTargetItem;
 	tabsClass?: string | object,
 	panelsClass?: string | object,
 	panels: ActionPanel[]
@@ -74,10 +78,19 @@ defineEmits(["update:model-value", "close"]);
 const props = withDefaults(defineProps<Props>(), {
 	title: "",
 	modelValue: null,
+	activeItem: null,
 	tabsClass: "w-[13.5rem]",
 	panelsClass: "w-[35.5rem]"
 });
 
 const activePanel = ref(props.modelValue);
+const activePanelOptions = computed(() => props.panels.find((panel) => panel.name === activePanel.value));
 watch(() => props.modelValue, (value) => activePanel.value = value);
+
+onMounted(() => {
+	// Resolve the default panel if a panel has not been selected
+	if (!activePanel.value && props.panels.length) {
+		activePanel.value = props.panels[0].name;
+	}
+});
 </script>

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -16,17 +16,12 @@
   </QTabPanels>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { ActionPanel } from "../../types";
 import { RenderVnode } from "../Utility";
 
-defineProps({
-  activePanel: {
-    type: String,
-    default: null
-  },
-  panels: {
-    type: Array,
-    required: true
-  }
-});
+defineProps<{
+	activePanel?: string | number,
+	panels: ActionPanel[]
+}>();
 </script>