quasar-ui-danx 0.4.1 → 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,82 +1,58 @@
 import { computed, ref, watch } from "vue";
 import { getItem, setItem } from "../../helpers";
-
-export interface TableColumn {
-    actionMenu?: object,
-    align?: string,
-    category?: string,
-    class?: string | object,
-    field: string,
-    format?: Function,
-    innerClass?: string | object,
-    style?: string | object,
-    headerStyle?: string | object,
-    isSavingRow?: boolean | Function,
-    label: string,
-    maxWidth?: number,
-    minWidth?: number,
-    name: string,
-    onClick?: Function,
-    required?: boolean,
-    resizeable?: boolean,
-    sortable?: boolean,
-    sortBy?: string,
-    sortByExpression?: string,
-    titleColumns?: Function,
-    vnode?: Function,
-}
+import { TableColumn } from "../../types";
 
 export function useTableColumns(name: string, columns: TableColumn[]) {
-    const COLUMN_ORDER_KEY = `${name}-column-order`;
-    const VISIBLE_COLUMNS_KEY = `${name}-visible-columns`;
-    const TITLE_COLUMNS_KEY = `${name}-title-columns`;
-
-    // The list that defines the order the columns should appear in
-    const columnOrder = ref(getItem(COLUMN_ORDER_KEY) || []);
-
-    // Manages visible columns on the table
-    const hiddenColumnNames = ref(getItem(VISIBLE_COLUMNS_KEY, []));
-
-    // Title columns will have their name appear on the first column of the table as part of the records' title
-    const titleColumnNames = ref(getItem(TITLE_COLUMNS_KEY, []));
-
-    // Columns that should be locked to the left side of the table
-    const lockedColumns = computed(() => orderedColumns.value.slice(0, 1));
-
-    // The resolved list of columns in the order they should appear in
-    const orderedColumns = computed(() => [...columns].sort((a, b) => {
-        const aIndex = columnOrder.value.indexOf(a.name);
-        const bIndex = columnOrder.value.indexOf(b.name);
-        return aIndex === -1 ? 1 : bIndex === -1 ? -1 : aIndex - bIndex;
-    }));
-
-    // The ordered list of columns. The ordering of this list is editable and will be stored in localStorage
-    const sortableColumns = computed({
-        get() {
-            return orderedColumns.value.slice(1);
-        },
-        set(newColumns) {
-            columnOrder.value = [...lockedColumns.value.map(c => c.name), ...newColumns.map(c => c.name)];
-            setItem(COLUMN_ORDER_KEY, columnOrder.value);
-        }
-    });
-
-    // The list of columns that are visible. To edit the visible columns, edit the hiddenColumnNames list
-    const visibleColumns = computed(() => orderedColumns.value.filter(c => !hiddenColumnNames.value.includes(c.name)));
-
-    // The list of columns that should be included in the title of a row
-    const orderedTitleColumns = computed(() => orderedColumns.value.filter(c => titleColumnNames.value.includes(c.name)));
-
-    // Save changes to the list of hidden columns in localStorage
-    watch(() => hiddenColumnNames.value, () => setItem(VISIBLE_COLUMNS_KEY, hiddenColumnNames.value));
-    watch(() => titleColumnNames.value, () => setItem(TITLE_COLUMNS_KEY, titleColumnNames.value));
-
-    return {
-        sortableColumns,
-        lockedColumns,
-        visibleColumns,
-        hiddenColumnNames,
-        titleColumnNames,
-        orderedTitleColumns
-    };
+	const COLUMN_ORDER_KEY = `${name}-column-order`;
+	const VISIBLE_COLUMNS_KEY = `${name}-visible-columns`;
+	const TITLE_COLUMNS_KEY = `${name}-title-columns`;
+
+	// The list that defines the order the columns should appear in
+	const columnOrder = ref(getItem(COLUMN_ORDER_KEY) || []);
+
+	// Manages visible columns on the table
+	const hiddenColumnNames = ref(getItem(VISIBLE_COLUMNS_KEY, []));
+
+	// Title columns will have their name appear on the first column of the table as part of the records' title
+	const titleColumnNames = ref(getItem(TITLE_COLUMNS_KEY, []));
+
+	// Columns that should be locked to the left side of the table
+	const lockedColumns = computed(() => orderedColumns.value.slice(0, 1));
+
+	// The resolved list of columns in the order they should appear in
+	const orderedColumns = computed(() => [...columns].sort((a, b) => {
+		const aIndex = columnOrder.value.indexOf(a.name);
+		const bIndex = columnOrder.value.indexOf(b.name);
+		return aIndex === -1 ? 1 : bIndex === -1 ? -1 : aIndex - bIndex;
+	}));
+
+	// The ordered list of columns. The ordering of this list is editable and will be stored in localStorage
+	const sortableColumns = computed({
+		get() {
+			return orderedColumns.value.slice(1);
+		},
+		set(newColumns) {
+			columnOrder.value = [...lockedColumns.value.map(c => c.name), ...newColumns.map(c => c.name)];
+			setItem(COLUMN_ORDER_KEY, columnOrder.value);
+		}
+	});
+
+	// The list of columns that are visible. To edit the visible columns, edit the hiddenColumnNames list
+	const visibleColumns = computed(() => orderedColumns.value.filter(c => !hiddenColumnNames.value.includes(c.name)));
+
+	// The list of columns that should be included in the title of a row
+	const orderedTitleColumns = computed(() => orderedColumns.value.filter(c => titleColumnNames.value.includes(c.name)));
+
+	// Save changes to the list of hidden columns in localStorage
+	watch(() => hiddenColumnNames.value, () => setItem(VISIBLE_COLUMNS_KEY, hiddenColumnNames.value));
+	watch(() => titleColumnNames.value, () => setItem(TITLE_COLUMNS_KEY, titleColumnNames.value));
+
+	return {
+		sortableColumns,
+		lockedColumns,
+		visibleColumns,
+		hiddenColumnNames,
+		titleColumnNames,
+		orderedTitleColumns
+	};
 }

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>