quasar-ui-danx 0.4.15 → 0.4.17

package/package.json

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

package/src/components/ActionTable/ActionTable.vue

@@ -1,66 +1,66 @@
 <template>
-	<div
-		class="dx-action-table overflow-hidden"
-		:class="{'dx-no-data': !hasData, 'dx-is-loading': loadingList || loadingSummary, 'dx-is-loading-list': loadingList}"
-	>
-		<ActionVnode />
-		<QTable
-			ref="actionTable"
-			:selected="selectedRows"
-			:pagination="pagination"
-			:columns="tableColumns"
-			:loading="loadingList || loadingSummary"
-			:rows="pagedItems?.data || []"
-			:binary-state-sort="false"
-			:selection="selection"
-			:rows-per-page-options="rowsPerPageOptions"
-			class="sticky-column sticky-header w-full h-full !border-0"
-			:color="color"
-			@update:selected="$emit('update:selected-rows', $event)"
-			@update:pagination="() => {}"
-			@request="(e) => $emit('update:pagination', {...e.pagination, __sort: mapSortBy(e.pagination, tableColumns)})"
-		>
-			<template #no-data>
-				<slot name="empty">
-					<EmptyTableState :text="`There are no ${label.toLowerCase()} matching the applied filter`" />
-				</slot>
-			</template>
-			<template #top-row>
-				<TableSummaryRow
-					v-if="hasData"
-					:label="label"
-					:item-count="summary?.count || 0"
-					:selected-count="selectedRows.length"
-					:sticky-colspan="summaryColSpan"
-					:loading="loadingSummary"
-					:summary="summary"
-					:columns="tableColumns"
-					@clear="$emit('update:selected-rows', [])"
-				/>
-			</template>
-			<template #header-cell="rowProps">
-				<ActionTableHeaderColumn
-					v-model="columnSettings"
-					:row-props="rowProps"
-					:name="name"
-					@update:model-value="onUpdateColumnSettings"
-				/>
-			</template>
-			<template #body-cell="rowProps">
-				<ActionTableColumn
-					:key="rowProps.key"
-					:row-props="rowProps"
-					:settings="columnSettings[rowProps.col.name]"
-				>
-					<slot
-						:column-name="rowProps.col.name"
-						:row="rowProps.row"
-						:value="rowProps.value"
-					/>
-				</ActionTableColumn>
-			</template>
-		</QTable>
-	</div>
+  <div
+    class="dx-action-table overflow-hidden"
+    :class="{'dx-no-data': !hasData, 'dx-is-loading': loadingList || loadingSummary, 'dx-is-loading-list': loadingList}"
+  >
+    <ActionVnode />
+    <QTable
+      ref="actionTable"
+      :selected="selectedRows"
+      :pagination="pagination"
+      :columns="tableColumns"
+      :loading="loadingList || loadingSummary"
+      :rows="pagedItems?.data || []"
+      :binary-state-sort="false"
+      :selection="selection"
+      :rows-per-page-options="rowsPerPageOptions"
+      class="sticky-column sticky-header w-full h-full !border-0"
+      :color="color"
+      @update:selected="$emit('update:selected-rows', $event)"
+      @update:pagination="() => {}"
+      @request="(e) => $emit('update:pagination', {...e.pagination, __sort: mapSortBy(e.pagination, tableColumns)})"
+    >
+      <template #no-data>
+        <slot name="empty">
+          <EmptyTableState :text="`There are no ${label.toLowerCase()} matching the applied filter`" />
+        </slot>
+      </template>
+      <template #top-row>
+        <TableSummaryRow
+          v-if="hasData"
+          :label="label"
+          :item-count="summary?.count || 0"
+          :selected-count="selectedRows.length"
+          :sticky-colspan="summaryColSpan"
+          :loading="loadingSummary"
+          :summary="summary"
+          :columns="tableColumns"
+          @clear="$emit('update:selected-rows', [])"
+        />
+      </template>
+      <template #header-cell="rowProps">
+        <ActionTableHeaderColumn
+          v-model="columnSettings"
+          :row-props="rowProps"
+          :name="name"
+          @update:model-value="onUpdateColumnSettings"
+        />
+      </template>
+      <template #body-cell="rowProps">
+        <ActionTableColumn
+          :key="rowProps.key"
+          :row-props="rowProps"
+          :settings="columnSettings[rowProps.col.name]"
+        >
+          <slot
+            :column-name="rowProps.col.name"
+            :row="rowProps.row"
+            :value="rowProps.value"
+          />
+        </ActionTableColumn>
+      </template>
+    </QTable>
+  </div>
 </template>
 
 <script setup lang="ts">

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

@@ -1,72 +1,72 @@
 <template>
-	<div class="flex flex-grow flex-col flex-nowrap overflow-hidden h-full">
-		<slot name="top" />
-		<slot name="toolbar">
-			<ActionToolbar
-				v-if="!hideToolbar"
-				:title="title"
-				:refresh-button="refreshButton"
-				: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>
-					<slot name="action-toolbar" />
-				</template>
-			</ActionToolbar>
-		</slot>
-		<div class="flex flex-nowrap flex-grow overflow-hidden w-full">
-			<slot name="filters">
-				<CollapsableFiltersSidebar
-					v-if="activeFilter"
-					:name="controller.name"
-					:show-filters="showFilters"
-					:filters="filters"
-					:active-filter="activeFilter"
-					class="dx-action-table-filters"
-					@update:active-filter="controller.setActiveFilter"
-				/>
-			</slot>
-			<slot>
-				<ActionTable
-					class="flex-grow"
-					:pagination="controller.pagination.value"
-					:selected-rows="controller.selectedRows.value"
-					:label="controller.label"
-					:name="controller.name"
-					:class="tableClass"
-					:summary="controller.summary.value"
-					:loading-list="controller.isLoadingList.value"
-					:loading-summary="controller.isLoadingSummary.value"
-					:paged-items="controller.pagedItems.value"
-					:columns="columns"
-					:selection="selection"
-					@update:selected-rows="controller.setSelectedRows"
-					@update:pagination="controller.setPagination"
-				/>
-			</slot>
-			<slot name="panels">
-				<PanelsDrawer
-					v-if="activeItem && panels"
-					:title="panelTitle"
-					:model-value="activePanel"
-					:active-item="activeItem"
-					:panels="panels"
-					@update:model-value="panel => controller.activatePanel(activeItem, panel)"
-					@close="controller.setActiveItem(null)"
-				>
-					<template #controls>
-						<PreviousNextControls
-							:is-loading="controller.isLoadingList.value"
-							@next="controller.getNextItem"
-						/>
-					</template>
-				</PanelsDrawer>
-			</slot>
-		</div>
-	</div>
+  <div class="flex flex-grow flex-col flex-nowrap overflow-hidden h-full">
+    <slot name="top" />
+    <slot name="toolbar">
+      <ActionToolbar
+        v-if="!hideToolbar"
+        :title="title"
+        :refresh-button="refreshButton"
+        :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>
+          <slot name="action-toolbar" />
+        </template>
+      </ActionToolbar>
+    </slot>
+    <div class="flex flex-nowrap flex-grow overflow-hidden w-full">
+      <slot name="filters">
+        <CollapsableFiltersSidebar
+          v-if="activeFilter"
+          :name="controller.name"
+          :show-filters="showFilters"
+          :filters="filters"
+          :active-filter="activeFilter"
+          class="dx-action-table-filters"
+          @update:active-filter="controller.setActiveFilter"
+        />
+      </slot>
+      <slot>
+        <ActionTable
+          class="flex-grow"
+          :pagination="controller.pagination.value"
+          :selected-rows="controller.selectedRows.value"
+          :label="controller.label"
+          :name="controller.name"
+          :class="tableClass"
+          :summary="controller.summary.value"
+          :loading-list="controller.isLoadingList.value"
+          :loading-summary="controller.isLoadingSummary.value"
+          :paged-items="controller.pagedItems.value"
+          :columns="columns"
+          :selection="selection"
+          @update:selected-rows="controller.setSelectedRows"
+          @update:pagination="controller.setPagination"
+        />
+      </slot>
+      <slot name="panels">
+        <PanelsDrawer
+          v-if="activeItem && panels"
+          :title="panelTitle"
+          :model-value="activePanel"
+          :active-item="activeItem"
+          :panels="panels"
+          @update:model-value="panel => controller.activatePanel(activeItem, panel)"
+          @close="controller.setActiveItem(null)"
+        >
+          <template #controls>
+            <PreviousNextControls
+              :is-loading="controller.isLoadingList.value"
+              @next="controller.getNextItem"
+            />
+          </template>
+        </PanelsDrawer>
+      </slot>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { computed } from "vue";
@@ -96,7 +96,12 @@ export interface ActionTableLayoutProps {
 const props = withDefaults(defineProps<ActionTableLayoutProps>(), {
 	title: "",
 	tableClass: "",
-	selection: "multiple"
+	selection: "multiple",
+	filters: undefined,
+	panels: undefined,
+	actions: undefined,
+	exporter: undefined,
+	panelTitleField: ""
 });
 
 const activeFilter = computed(() => props.controller.activeFilter.value);

package/src/components/ActionTable/listControls.ts

@@ -1,7 +1,7 @@
 import { computed, Ref, ref, shallowRef, watch } from "vue";
 import { RouteParams, Router } from "vue-router";
 import { danxOptions } from "../../config";
-import { getItem, setItem, storeObject, waitForRef } from "../../helpers";
+import { getItem, latestCallOnly, setItem, storeObject, waitForRef } from "../../helpers";
 import {
 	ActionController,
 	ActionTargetItem,
@@ -290,10 +290,16 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	 * @returns {Promise<void>}
 	 */
 	async function getActiveItemDetails() {
-		if (!activeItem.value || !options.routes.details) return;
-
 		try {
-			const result = await options.routes.details(activeItem.value);
+			const latestResult = latestCallOnly("active-item", async () => {
+				if (!activeItem.value || !options.routes.details) return undefined;
+				return await options.routes.details(activeItem.value);
+			});
+
+			const result = await latestResult();
+
+			// Undefined means we were not the latest, or the request was invalid (ie: activeItem was already cleared)
+			if (result === undefined) return;
 
 			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);
@@ -354,33 +360,41 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 		const index = pagedItems.value.data.findIndex((i: ActionTargetItem) => i.id === activeItem.value?.id);
 		if (index === undefined || index === null) return;
 
-		let nextIndex = index + offset;
+		const nextIndex = index + offset;
+
+		const latestNextIndex = latestCallOnly("getNextItem", async () => {
+			// Load the previous page if the offset is before index 0
+			if (nextIndex < 0) {
+				if (pagination.value.page > 1) {
+					pagination.value = { ...pagination.value, page: pagination.value.page - 1 };
+					await waitForRef(isLoadingList, false);
+					return pagedItems.value.data.length - 1;
+				}
 
-		// Load the previous page if the offset is before index 0
-		if (nextIndex < 0) {
-			if (pagination.value.page > 1) {
-				pagination.value = { ...pagination.value, page: pagination.value.page - 1 };
-				await waitForRef(isLoadingList, false);
-				nextIndex = pagedItems.value.data.length - 1;
-			} else {
 				// There are no more previous pages
-				return;
+				return -1;
 			}
-		}
 
-		// Load the next page if the offset is past the last index
-		if (nextIndex >= pagedItems.value.data.length) {
-			if (pagination.value.page < (pagedItems.value?.meta?.last_page || 1)) {
-				pagination.value = { ...pagination.value, page: pagination.value.page + 1 };
-				await waitForRef(isLoadingList, false);
-				nextIndex = 0;
-			} else {
+			// Load the next page if the offset is past the last index
+			if (nextIndex >= pagedItems.value.data.length) {
+				if (pagination.value.page < (pagedItems.value?.meta?.last_page || 1)) {
+					pagination.value = { ...pagination.value, page: pagination.value.page + 1 };
+					await waitForRef(isLoadingList, false);
+					return 0;
+				}
+
 				// There are no more next pages
-				return;
+				return -1;
 			}
-		}
 
-		activeItem.value = pagedItems.value?.data[nextIndex];
+			return nextIndex;
+		});
+
+		const resolvedNextIndex = await latestNextIndex();
+
+		if (resolvedNextIndex !== undefined && resolvedNextIndex >= 0) {
+			activeItem.value = pagedItems.value?.data[resolvedNextIndex];
+		}
 	}
 
 	/**

package/src/helpers/actions.ts

@@ -14,6 +14,25 @@ export const activeActionVnode: Ref = shallowRef(null);
 export function useActions(actions: ActionOptions[], globalOptions: Partial<ActionOptions> | null = null) {
 	const namespace = uid();
 
+	/**
+	 * Extend an action so the base action can be modified without affecting other places the action is used.
+	 * This isolates the action to the provided id, so it is still re-usable across the system, but does not affect behavior elsewhere.
+	 *
+	 * For example, when you have a list of items and you want to perform a callback on the action on a single item, you can extend the action
+	 * with the id of the item you want to perform the action on, allowing you to perform behavior on a single item, instead of all instances
+	 * in the list receiving the same callback.
+	 */
+	function extendAction(actionName: string, extendedId: string | number, actionOptions: Partial<ActionOptions>): ResourceAction {
+		const action = getAction(actionName);
+		const extendedAction = { ...action, ...actionOptions, id: extendedId };
+		if (extendedAction.debounce) {
+			extendedAction.trigger = useDebounceFn((target, input) => performAction(extendedAction, target, input), extendedAction.debounce);
+		} else {
+			extendedAction.trigger = (target, input) => performAction(extendedAction, target, input);
+		}
+		return storeObject(extendedAction);
+	}
+
 	/**
 	 * Resolve the action object based on the provided name (or return the object if the name is already an object)
 	 */
@@ -140,7 +159,8 @@ export function useActions(actions: ActionOptions[], globalOptions: Partial<Acti
 
 	return {
 		getAction,
-		getActions
+		getActions,
+		extendAction
 	};
 }
 

package/src/helpers/objectStore.ts

@@ -34,9 +34,11 @@ export function storeObject<T extends TypedObject>(newObject: T): ShallowReactiv
 	// Recursively store all the children of the object as well
 	for (const key of Object.keys(newObject)) {
 		const value = newObject[key];
-		if (Array.isArray(value) && value.length > 0 && typeof value[0] === "object") {
+		if (Array.isArray(value) && value.length > 0) {
 			for (const index in value) {
-				newObject[key][index] = storeObject(value[index]);
+				if (value[index] && typeof value[index] === "object") {
+					newObject[key][index] = storeObject(value[index]);
+				}
 			}
 		} else if (value?.__type) {
 			// @ts-expect-error newObject[key] is guaranteed to be a TypedObject

package/src/helpers/utils.ts

@@ -1,3 +1,4 @@
+import { AnyObject } from "src/types";
 import { Ref, watch } from "vue";
 
 export { useDebounceFn } from "@vueuse/core";
@@ -33,6 +34,21 @@ export function waitForRef(ref: Ref, value: any) {
 	});
 }
 
+const currentCalls: AnyObject = {};
+export function latestCallOnly<T extends any[], R>(type: string, fn: (...args: T) => Promise<R>) {
+	if (!currentCalls[type]) {
+		currentCalls[type] = 0;
+	}
+	return async function (...args: T) {
+		const callId = ++currentCalls[type];
+		const result = await fn(...args);
+		if (callId === currentCalls[type]) {
+			return result;
+		}
+		return undefined;
+	};
+}
+
 /**
  * Returns a number that is constrained to the given range.
  */