quasar-ui-danx 0.4.4 → 0.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/ActionTable/ActionTable.vue

@@ -9,7 +9,7 @@
       :selected="selectedRows"
       :pagination="pagination"
       :columns="tableColumns"
-      :loading="loadingList"
+      :loading="loadingList || loadingSummary"
       :rows="pagedItems?.data || []"
       :binary-state-sort="false"
       selection="multiple"

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

@@ -8,6 +8,7 @@
         :actions="actions?.filter(a => a.batch)"
         :action-target="controller.selectedRows.value"
         :exporter="controller.exportList"
+        :loading="controller.isLoadingList.value || controller.isLoadingSummary.value"
         @refresh="controller.refreshAll"
       >
         <template #default>

package/src/components/ActionTable/listControls.ts

@@ -1,5 +1,5 @@
 import { computed, Ref, ref, shallowRef, watch } from "vue";
-import { RouteLocationNormalizedLoaded, RouteParams, Router, useRoute, useRouter } from "vue-router";
+import { RouteLocationNormalizedLoaded, RouteParams, Router } from "vue-router";
 import { getItem, setItem, storeObject, waitForRef } from "../../helpers";
 import {
 	ActionController,
@@ -7,6 +7,7 @@ import {
 	AnyObject,
 	FilterGroup,
 	ListControlsFilter,
+	ListControlsInitializeOptions,
 	ListControlsOptions,
 	ListControlsPagination,
 	PagedItems
@@ -380,19 +381,17 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	}
 
 	async function exportList(filter?: ListControlsFilter) {
-		return options.routes.export(filter);
+		options.routes.export && await options.routes.export(filter);
 	}
 
 	// Initialize the list actions and load settings, lists, summaries, filter fields, etc.
-	function initialize() {
+	function initialize(initOptions: ListControlsInitializeOptions) {
+		vueRouter = initOptions.vueRouter;
+		vueRoute = initOptions.vueRoute;
 		isInitialized = true;
 		loadSettings();
 
-		// Setup Vue Router handling
-		vueRoute = useRoute();
-		vueRouter = useRouter();
-
-		console.log("init listControl", name, options, "vueRoute", vueRoute);
+		console.log("initialize() called", name, options, "initOptions", initOptions);
 		/**
 		 * Watch the id params in the route and set the active item to the item with the given id.
 		 */

package/src/helpers/request.ts

@@ -1,22 +1,53 @@
 import { Ref } from "vue";
 import { danxOptions } from "../config";
-import { AnyObject } from "../types";
+import { RequestApi } from "../types";
 
 /**
  * A simple request helper that wraps the fetch API
  * to make GET and POST requests easier w/ JSON payloads
  */
-export const request = {
-	url(url: string) {
+export const request: RequestApi = {
+	abortControllers: {},
+
+	url(url) {
 		if (url.startsWith("http")) {
 			return url;
 		}
 		return (danxOptions.value.request?.baseUrl || "").replace(/\/$/, "") + "/" + url;
 	},
 
-	async call(url: string, options: RequestInit): Promise<object> {
+	async call(url, options) {
 		try {
+			const abort = new AbortController();
+			const timestamp = new Date().getTime();
+
+			console.log("call", url, options);
+			if (options?.abortOn) {
+				console.log("setting up abort", options.abortOn);
+				const previousAbort = options.abortOn && request.abortControllers[options.abortOn];
+				// If there is already an abort controller set for this key, abort it
+				if (previousAbort) {
+					previousAbort.abort.abort();
+				}
+
+				// Set the new abort controller for this key
+				request.abortControllers[options.abortOn] = { abort, timestamp };
+				options.signal = abort.signal;
+			}
+
+			console.log("current timestamp:", timestamp);
 			const response = await fetch(request.url(url), options);
+
+			// handle the case where the request was aborted too late, and we need to abort the response via timestamp check
+			if (options?.abortOn) {
+				if (request.abortControllers[options.abortOn].timestamp !== timestamp) {
+					console.log("aborting request", options.abortOn, timestamp, "!==", request.abortControllers[options.abortOn].timestamp);
+					return { abort: true };
+				}
+
+				delete request.abortControllers[options.abortOn];
+			}
+
 			const result = await response.json();
 
 			if (response.status === 401) {
@@ -40,7 +71,7 @@ export const request = {
 			};
 		}
 	},
-	async get(url: string, options: RequestInit = {}): Promise<object> {
+	async get(url, options) {
 		return await request.call(url, {
 			method: "get",
 			headers: {
@@ -52,10 +83,10 @@ export const request = {
 		});
 	},
 
-	async post(url: string, data: AnyObject = {}, options: RequestInit = {}) {
-		return request.call(url, {
+	async post(url, data, options) {
+		return await request.call(url, {
 			method: "post",
-			body: JSON.stringify(data),
+			body: data && JSON.stringify(data),
 			headers: {
 				Accept: "application/json",
 				"Content-Type": "application/json",

package/src/helpers/routes.ts

@@ -1,28 +1,29 @@
-import { ActionTargetItem, AnyObject, ListControlsPagination } from "../types";
+import { ListControlsRoutes } from "../types";
 import { downloadFile } from "./downloadPdf";
 import { request } from "./request";
 
-export function useActionRoutes(baseUrl: string) {
+export function useActionRoutes(baseUrl: string): ListControlsRoutes {
 	return {
-		list(pager: ListControlsPagination) {
-			return request.post(`${baseUrl}/list`, pager);
+		list(pager?) {
+			console.log("here");
+			return request.post(`${baseUrl}/list`, pager, { abortOn: "list" });
 		},
-		summary(filter: AnyObject) {
+		summary(filter) {
 			return request.post(`${baseUrl}/summary`, { filter });
 		},
-		details(target: ActionTargetItem) {
+		details(target) {
 			return request.get(`${baseUrl}/${target.id}/details`);
 		},
 		fieldOptions() {
 			return request.get(`${baseUrl}/field-options`);
 		},
-		applyAction(action: string, target: ActionTargetItem | null, data: object) {
+		applyAction(action, target, data) {
 			return request.post(`${baseUrl}/${target ? target.id : "new"}/apply-action`, { action, data });
 		},
-		batchAction(action: string, targets: ActionTargetItem[], data: object) {
+		batchAction(action, targets, data) {
 			return request.post(`${baseUrl}/batch-action`, { action, filter: { id: targets.map(r => r.id) }, data });
 		},
-		export(filter: AnyObject, name?: string) {
+		export(filter, name) {
 			return downloadFile(`${baseUrl}/export`, name || "export.csv", { filter });
 		}
 	};

package/src/types/controls.d.ts

@@ -1,6 +1,7 @@
 import { ComputedRef, Ref, ShallowRef } from "vue";
+import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import { ActionTargetItem } from "./actions";
-import { LabelValueItem } from "./shared";
+import { AnyObject, LabelValueItem } from "./shared";
 
 export interface ListControlsFilter {
 	[key: string]: object | object[] | null | undefined | string | number | boolean;
@@ -20,13 +21,23 @@ export interface FilterGroup {
 	fields: FilterableField[];
 }
 
+
 export interface ListControlsRoutes {
-	list: (pager: object) => Promise<ActionTargetItem[]>;
-	details?: (item: object) => Promise<ActionTargetItem> | null;
-	summary?: (filter: object | null) => Promise<object> | null;
-	fieldOptions?: (filter: object | null) => Promise<object> | null;
-	more?: (pager: object) => Promise<ActionTargetItem[]> | null;
-	export: (filter?: ListControlsFilter) => Promise<void>;
+	list(pager?: ListControlsPagination): Promise<ActionTargetItem[]>;
+
+	summary?(filter?: ListControlsFilter): Promise<object>;
+
+	details?(target: ActionTargetItem): Promise<ActionTargetItem>;
+
+	more?(pager: ListControlsPagination): Promise<ActionTargetItem[]>;
+
+	fieldOptions?(filter?: AnyObject): Promise<object>;
+
+	applyAction?(action: string, target: ActionTargetItem | null, data: object): Promise<object>;
+
+	batchAction?(action: string, targets: ActionTargetItem[], data: object): Promise<object>;
+
+	export?(filter?: ListControlsFilter, name?: string): Promise<void>;
 }
 
 export interface ListControlsOptions {
@@ -44,6 +55,8 @@ export interface ListControlsPagination {
 	page?: number;
 	rowsNumber?: number;
 	rowsPerPage?: number;
+	perPage?: number;
+	filter?: ListControlsFilter;
 }
 
 export interface PagedItems {
@@ -54,6 +67,11 @@ export interface PagedItems {
 	} | undefined;
 }
 
+export interface ListControlsInitializeOptions {
+	vueRoute: RouteLocationNormalizedLoaded;
+	vueRouter: Router;
+}
+
 export interface ActionController {
 	name: string;
 	label: string;
@@ -78,7 +96,7 @@ export interface ActionController {
 	activePanel: ShallowRef<string | null>;
 
 	// Actions
-	initialize: () => void;
+	initialize: (options: ListControlsInitializeOptions) => void;
 	resetPaging: () => void;
 	setPagination: (updated: ListControlsPagination) => void;
 	setSelectedRows: (selection: ActionTargetItem[]) => void;

package/src/types/requests.d.ts

@@ -1,3 +1,15 @@
+export interface RequestApi {
+	abortControllers: { [key: string]: { abort: AbortController, timestamp: number } };
+
+	url(url: string): string;
+
+	call(url: string, options?: RequestCallOptions): Promise<any>;
+
+	get(url: string, options?: RequestCallOptions): Promise<any>;
+
+	post(url: string, data?: object, options?: RequestCallOptions): Promise<any>;
+}
+
 export interface HttpResponse {
 	headers: any;
 	data?: any;
@@ -11,3 +23,8 @@ export interface RequestOptions {
 	headers?: object;
 	onUnauthorized?: (response) => object;
 }
+
+export interface RequestCallOptions extends RequestInit {
+	abortOn?: string;
+}
+