quasar-ui-danx 0.4.4 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.21",
     "vue-eslint-parser": "^9.4.2",
-    "vue-router": "^4.0.0"
+    "vue-router": "^4.3.2"
   },
   "dependencies": {
     "@heroicons/vue": "v1",

package/src/components/ActionTable/ActionTable.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="dx-action-table overflow-hidden"
-    :class="{'dx-no-data': !hasData}"
+    :class="{'dx-no-data': !hasData, 'dx-is-loading': loadingList || loadingSummary, 'dx-is-loading-list': loadingList}"
   >
     <ActionVnode />
     <QTable
@@ -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/Form/Fields/SelectField.vue

@@ -1,5 +1,10 @@
 <template>
   <div>
+    <FieldLabel
+      v-if="label"
+      :label="label"
+      class="mb-1 block"
+    />
     <QSelect
       ref="selectField"
       v-bind="$props"
@@ -15,6 +20,7 @@
       option-label="label"
       option-value="value"
       placeholder=""
+      label=""
       :input-class="{'is-hidden': !isShowing, [inputClass]: true}"
       class="max-w-full dx-select-field"
       @filter="onFilter"
@@ -68,6 +74,7 @@
 import { ChevronDownIcon as DropDownIcon } from "@heroicons/vue/outline";
 import { QSelect, QSelectProps } from "quasar";
 import { computed, isRef, nextTick, ref } from "vue";
+import FieldLabel from "./FieldLabel";
 
 export interface Props extends QSelectProps {
 	modelValue?: any;

package/src/components/ActionTable/Form/Fields/TextField.vue

@@ -1,12 +1,14 @@
 <template>
   <div>
-    <div v-if="readonly">
-      <LabelValueBlock
-        :label="label || field?.label || 'Text'"
-        :value="modelValue"
-      />
-    </div>
-    <template v-else>
+    <FieldLabel
+      :field="field"
+      :label="label"
+      :show-name="showName"
+      :class="labelClass"
+      :value="readonly ? modelValue : ''"
+      class="mb-1 block"
+    />
+    <template v-if="!readonly">
       <QInput
         :placeholder="field?.placeholder"
         outlined
@@ -24,16 +26,7 @@
         :debounce="debounce"
         @keydown.enter="$emit('submit')"
         @update:model-value="$emit('update:model-value', $event)"
-      >
-        <template #label>
-          <FieldLabel
-            :field="field"
-            :label="label"
-            :show-name="showName"
-            :class="labelClass"
-          />
-        </template>
-      </QInput>
+      />
       <MaxLengthCounter
         :length="modelValue?.length || 0"
         :max-length="field?.maxLength"
@@ -46,7 +39,6 @@
 import { TextFieldProps } from "../../../../types";
 import MaxLengthCounter from "../Utilities/MaxLengthCounter";
 import FieldLabel from "./FieldLabel";
-import LabelValueBlock from "./LabelValueBlock";
 
 defineEmits(["update:model-value", "submit"]);
 withDefaults(defineProps<TextFieldProps>(), {

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

@@ -9,24 +9,28 @@
       :class="{'has-selection': selectedCount}"
     >
       <div class="flex flex-nowrap items-center">
-        <div
-          v-if="selectedCount"
-          class="flex items-center"
-        >
-          <ClearIcon
-            class="w-6 mr-3"
-            @click="$emit('clear')"
+        <div class="relative">
+          <QSpinner
+            v-if="loading"
+            class="absolute top-0 left-0"
+            size="18"
           />
-          {{ fNumber(selectedCount) }} {{ selectedLabel }}
+          <div
+            :class="{'opacity-0': loading}"
+            class="flex items-center nowrap"
+          >
+            <ClearIcon
+              v-if="selectedCount"
+              class="w-6 mr-3 cursor-pointer"
+              @click="$emit('clear')"
+            />
+
+            {{ fNumber(selectedCount || itemCount) }}
+          </div>
         </div>
-        <div v-else-if="itemCount">
-          {{ fNumber(itemCount) }} {{ label }}
+        <div class="ml-2">
+          {{ selectedCount ? selectedLabel : label }}
         </div>
-        <QSpinner
-          v-if="loading"
-          class="ml-3"
-          size="18"
-        />
       </div>
     </QTd>
     <QTd
@@ -48,49 +52,49 @@ import { fNumber } from "../../helpers";
 
 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
-  }
+	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 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);
+	// 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);
 });
 
 function formatValue(column) {
-  const value = props.summary[column.name];
-  if (value === undefined) return "";
+	const value = props.summary[column.name];
+	if (value === undefined) return "";
 
-  if (column.format) {
-    return column.format(value);
-  }
-  return value;
+	if (column.format) {
+		return column.format(value);
+	}
+	return value;
 }
 </script>

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
@@ -15,8 +16,8 @@ import { getFilterFromUrl } from "./listHelpers";
 
 export function useListControls(name: string, options: ListControlsOptions): ActionController {
 	let isInitialized = false;
-	let vueRoute: RouteLocationNormalizedLoaded | null = null;
-	let vueRouter: Router | null = null;
+	let vueRoute: RouteLocationNormalizedLoaded | null | undefined;
+	let vueRouter: Router | null | undefined;
 	const PAGE_SETTINGS_KEY = `dx-${name}-pager`;
 	const pagedItems = shallowRef<PagedItems | null>(null);
 	const activeFilter = ref<ListControlsFilter>({});
@@ -74,8 +75,12 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	async function loadList() {
 		if (!isInitialized) return;
 		isLoadingList.value = true;
-		setPagedItems(await options.routes.list(pager.value));
-		isLoadingList.value = false;
+		try {
+			setPagedItems(await options.routes.list(pager.value));
+			isLoadingList.value = false;
+		} catch (e) {
+			// Fail silently
+		}
 	}
 
 	async function loadSummary() {
@@ -86,8 +91,12 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 		if (selectedRows.value.length) {
 			summaryFilter.id = selectedRows.value.map((row) => row.id);
 		}
-		summary.value = await options.routes.summary(summaryFilter);
-		isLoadingSummary.value = false;
+		try {
+			summary.value = await options.routes.summary(summaryFilter);
+			isLoadingSummary.value = false;
+		} catch (e) {
+			// Fail silently
+		}
 	}
 
 	async function loadListAndSummary() {
@@ -109,8 +118,12 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	async function loadFieldOptions() {
 		if (!options.routes.fieldOptions || !isInitialized) return;
 		isLoadingFilters.value = true;
-		fieldOptions.value = await options.routes.fieldOptions(activeFilter.value) || {};
-		isLoadingFilters.value = false;
+		try {
+			fieldOptions.value = await options.routes.fieldOptions(activeFilter.value) || {};
+			isLoadingFilters.value = false;
+		} catch (e) {
+			// Fail silently
+		}
 	}
 
 	/**
@@ -196,18 +209,22 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	async function loadMore(index: number, perPage: number | undefined = undefined) {
 		if (!options.routes.more) return false;
 
-		const newItems = await options.routes.more({
-			page: index + 1,
-			perPage,
-			filter: { ...activeFilter.value, ...globalFilter.value }
-		});
-
-		if (newItems && newItems.length > 0) {
-			setPagedItems({
-				data: [...(pagedItems.value?.data || []), ...newItems],
-				meta: { total: pagedItems.value?.meta?.total || 0 }
+		try {
+			const newItems = await options.routes.more({
+				page: index + 1,
+				perPage,
+				filter: { ...activeFilter.value, ...globalFilter.value }
 			});
-			return true;
+
+			if (newItems && newItems.length > 0) {
+				setPagedItems({
+					data: [...(pagedItems.value?.data || []), ...newItems],
+					meta: { total: pagedItems.value?.meta?.total || 0 }
+				});
+				return true;
+			}
+		} catch (e) {
+			// Fail silently
 		}
 
 		return false;
@@ -282,14 +299,18 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	async function getActiveItemDetails() {
 		if (!activeItem.value || !options.routes.details) return;
 
-		const result = await options.routes.details(activeItem.value);
+		try {
+			const result = await options.routes.details(activeItem.value);
 
-		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);
-		}
+			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);
+			// Reassign the active item to the store object to ensure reactivity
+			activeItem.value = storeObject(result);
+		} catch (e) {
+			// Fail silently
+		}
 	}
 
 	// Whenever the active item changes, fill the additional item details
@@ -313,12 +334,8 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 		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
-			});
+		if (item?.id) {
+			updateRouteParams({ id: item.id, panel });
 		}
 	}
 
@@ -329,7 +346,7 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 		activeItem.value = item ? storeObject(item) : item;
 
 		if (!item?.id) {
-			vueRouter?.push({ name: vueRoute?.name || "home" });
+			updateRouteParams({});
 		}
 	}
 
@@ -380,23 +397,20 @@ 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?.vueRouter?.currentRoute.value;
 		isInitialized = true;
 		loadSettings();
 
-		// Setup Vue Router handling
-		vueRoute = useRoute();
-		vueRouter = useRouter();
-
-		console.log("init listControl", name, options, "vueRoute", vueRoute);
 		/**
 		 * Watch the id params in the route and set the active item to the item with the given id.
 		 */
-		if (options.routes.details && vueRoute) {
+		if (options.routes.details && vueRoute && vueRouter) {
 			const { params, meta } = vueRoute;
 
 			const controlRouteName = vueRoute.name;
@@ -410,6 +424,18 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 		}
 	}
 
+	/**
+	 * Updates the URL bar and route to the given params.
+	 */
+	function updateRouteParams(params: AnyObject) {
+		if (vueRouter && vueRoute) {
+			vueRouter.push({
+				name: (Array.isArray(vueRoute.name) ? vueRoute.name[0] : vueRoute.name) || "home",
+				params
+			});
+		}
+	}
+
 	function setPanelFromRoute(params: RouteParams, meta: AnyObject) {
 		const id = Array.isArray(params?.id) ? params.id[0] : params?.id;
 		if (id && meta.type) {

package/src/helpers/app.ts

@@ -0,0 +1,20 @@
+let appRefreshed = false;
+
+export function refreshApplication(callback: () => void) {
+	// Only allow refreshing the application once
+	if (appRefreshed) return;
+	appRefreshed = true;
+
+	// Create a hidden iframe
+	const iframe = document.createElement("iframe");
+	iframe.style.display = "none";
+	iframe.src = window.location.href;
+	document.body.appendChild(iframe);
+
+	// Listen for the iframe to finish loading
+	iframe.onload = () => {
+		// Remove the iframe
+		document.body.removeChild(iframe);
+		callback();
+	};
+}

package/src/helpers/index.ts

@@ -1,4 +1,5 @@
 export * from "./actions";
+export * from "./app";
 export * from "./array";
 export * from "./compatibility";
 export * from "./date";

package/src/helpers/request.ts

@@ -1,46 +1,75 @@
 import { Ref } from "vue";
 import { danxOptions } from "../config";
-import { AnyObject } from "../types";
+import { HttpResponse, 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> {
-		try {
-			const response = await fetch(request.url(url), options);
-			const result = await response.json();
-
-			if (response.status === 401) {
-				const onUnauthorized = danxOptions.value.request?.onUnauthorized;
-				return onUnauthorized ? onUnauthorized(response) : {
-					error: true,
-					message: "Unauthorized"
-				};
+	async call(url, options) {
+		options = options || {};
+		const abortKey = options?.abortOn !== undefined ? options.abortOn : url;
+		const timestamp = new Date().getTime();
+
+		if (abortKey) {
+			const abort = new AbortController();
+			const previousAbort = request.abortControllers[abortKey];
+			// If there is already an abort controller set for this key, abort it
+			if (previousAbort) {
+				previousAbort.abort.abort("Request was aborted due to a newer request being made");
 			}
 
-			if (response.status > 400) {
-				if (result.exception && !result.error) {
-					result.error = true;
-				}
+			// Set the new abort controller for this key
+			request.abortControllers[abortKey] = { abort, timestamp };
+			options.signal = abort.signal;
+		}
+
+		const response = await fetch(request.url(url), options);
+
+		// Verify the app version of the client and server are matching
+		checkAppVersion(response);
+
+		// handle the case where the request was aborted too late, and we need to abort the response via timestamp check
+		if (abortKey) {
+			// If the request was aborted too late, but there was still another request that was made after the current,
+			// then abort the current request with an abort flag
+			if (timestamp < request.abortControllers[abortKey].timestamp) {
+				throw new Error("Request was aborted due to a newer request being made: " + timestamp + " < " + request.abortControllers[abortKey].timestamp);
 			}
 
-			return result;
-		} catch (error: any) {
-			return {
-				error: error.message || "An error occurred fetching the data"
+			// Otherwise, the current is the most recent request, so we can delete the abort controller
+			delete request.abortControllers[abortKey];
+		}
+
+		const result = await response.json();
+
+		if (response.status === 401) {
+			const onUnauthorized = danxOptions.value.request?.onUnauthorized;
+			return onUnauthorized ? onUnauthorized(response) : {
+				error: true,
+				message: "Unauthorized"
 			};
 		}
+
+		if (response.status > 400) {
+			if (result.exception && !result.error) {
+				result.error = true;
+			}
+		}
+
+		return result;
 	},
-	async get(url: string, options: RequestInit = {}): Promise<object> {
+	async get(url, options) {
 		return await request.call(url, {
 			method: "get",
 			headers: {
@@ -52,10 +81,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",
@@ -66,6 +95,23 @@ export const request = {
 	}
 };
 
+/**
+ * Checks the app version of the client and server to see if they match.
+ * If they do not match, the onAppVersionMismatch callback is called
+ */
+function checkAppVersion(response: HttpResponse) {
+	const requestOptions = danxOptions.value.request;
+	if (!requestOptions || !requestOptions.headers || !requestOptions.onAppVersionMismatch) {
+		return;
+	}
+
+	const clientAppVersion = requestOptions.headers["X-App-Version"] || "";
+	const serverAppVersion = response.headers.get("X-App-Version");
+	if (clientAppVersion && clientAppVersion !== serverAppVersion) {
+		requestOptions.onAppVersionMismatch(serverAppVersion);
+	}
+}
+
 /**
  * Fetches a resource list applying the filter. If there is a selected resource,
  * stores that resource from the already populated list. If that resource does not exist

package/src/helpers/routes.ts

@@ -1,28 +1,28 @@
-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) {
+		list(pager?) {
 			return request.post(`${baseUrl}/list`, pager);
 		},
-		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/styles/quasar-reset.scss

@@ -45,7 +45,7 @@
 
 		&.q-field--labeled {
 			.q-field__control-container {
-				padding-top: 1.1rem;
+				padding-top: 0;
 			}
 
 			&.q-textarea {