quasar-ui-danx 0.4.42 → 0.4.43

package/package.json

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

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

@@ -57,6 +57,7 @@
           :model-value="activePanel"
           :target="activeItem"
           :panels="controller.panels"
+          :drawer-class="drawerClass"
           @update:model-value="panel => controller.activatePanel(activeItem, panel)"
           @close="controller.setActiveItem(null)"
         >
@@ -91,6 +92,7 @@ export interface ActionTableLayoutProps {
 	showFilters?: boolean;
 	tableClass?: string;
 	title?: string;
+	drawerClass?: string;
 }
 
 const props = withDefaults(defineProps<ActionTableLayoutProps>(), {
@@ -98,7 +100,8 @@ const props = withDefaults(defineProps<ActionTableLayoutProps>(), {
 	panelTitleField: "",
 	selection: "multiple",
 	tableClass: "",
-	title: ""
+	title: "",
+	drawerClass: ""
 });
 
 const activeFilter = computed(() => props.controller.activeFilter.value);

package/src/components/ActionTable/controls.ts

@@ -119,7 +119,7 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 
 		isLoadingFilters.value = true;
 		try {
-			fieldOptions.value = await options.routes.fieldOptions(activeFilter.value) || {};
+			fieldOptions.value = await options.routes.fieldOptions() || {};
 		} catch (e) {
 			// Fail silently
 		} finally {

package/src/components/PanelsDrawer/PanelsDrawer.vue

@@ -9,7 +9,10 @@
     no-route-dismiss
     @update:show="$emit('close')"
   >
-    <div class="flex flex-col flex-nowrap h-full">
+    <div
+      class="flex flex-col flex-nowrap h-full dx-panels-drawer-content"
+      :class="drawerClass"
+    >
       <div class="dx-panels-drawer-header flex items-center px-6 py-4">
         <div class="flex-grow">
           <slot name="header">
@@ -64,6 +67,12 @@
             <slot name="right-sidebar" />
           </div>
         </div>
+        <div
+          v-else
+          class="p-8"
+        >
+          <QSkeleton class="h-96" />
+        </div>
       </div>
     </div>
   </ContentDrawer>
@@ -76,22 +85,24 @@ import { ContentDrawer } from "../Utility";
 import PanelsDrawerPanels from "./PanelsDrawerPanels";
 import PanelsDrawerTabs from "./PanelsDrawerTabs";
 
-export interface Props {
+export interface PanelsDrawerProps {
 	title?: string,
 	modelValue?: string | number,
 	target: ActionTargetItem;
 	tabsClass?: string | object,
 	panelsClass?: string | object,
+	drawerClass?: string | object,
 	position?: "standard" | "right" | "left";
 	panels: ActionPanel[]
 }
 
 defineEmits(["update:model-value", "close"]);
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<PanelsDrawerProps>(), {
 	title: "",
 	modelValue: null,
 	tabsClass: "w-[13.5rem] flex-shrink-0",
-	panelsClass: "w-[80rem]",
+	panelsClass: "w-full",
+	drawerClass: "",
 	position: "right"
 });
 

package/src/components/Utility/Buttons/ActionButton.vue

@@ -2,7 +2,7 @@
   <QBtn
     :loading="isSaving"
     class="shadow-none"
-    :class="disabled ? 'text-slate-800 bg-slate-500 opacity-50' : colorClass"
+    :class="disabled ? disabledClass : colorClass"
     :disable="disabled"
     @click="()=> onAction()"
   >
@@ -79,6 +79,7 @@ export interface ActionButtonProps {
 	target?: ActionTarget;
 	input?: object;
 	disabled?: boolean;
+	disabledClass?: string;
 	confirm?: boolean;
 	confirmText?: string;
 }
@@ -94,7 +95,8 @@ const props = withDefaults(defineProps<ActionButtonProps>(), {
 	action: null,
 	target: null,
 	input: null,
-	confirmText: "Are you sure?"
+	confirmText: "Are you sure?",
+	disabledClass: "text-slate-800 bg-slate-500 opacity-50"
 });
 
 const colorClass = computed(() => {
@@ -195,13 +197,14 @@ const isSaving = computed(() => {
 
 const isConfirming = ref(false);
 function onAction(isConfirmed = false) {
+	if (props.disabled) return;
+
 	// Make sure this action is confirmed if the confirm prop is set
 	if (props.confirm && !isConfirmed) {
 		isConfirming.value = true;
 		return false;
 	}
 	isConfirming.value = false;
-	if (props.disabled) return;
 	if (props.action) {
 		props.action.trigger(props.target, props.input).then(async (response) => {
 			emit("success", typeof response.json === "function" ? await response.json() : response);

package/src/components/Utility/Layouts/CollapsableSidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="dx-collapsable-sidebar overflow-y-auto overflow-x-hidden scroll-smooth flex-shrink-0 transition-all relative"
+    class="dx-collapsable-sidebar overflow-hidden scroll-smooth flex-shrink-0 flex-nowrap transition-all relative"
     :class="{
       'is-collapsed': isCollapsed,
       'is-right-side': rightSide,
@@ -8,99 +8,89 @@
     }"
     :style="style"
   >
-    <div class="flex-grow max-w-full">
+    <div class="flex-grow max-w-full overflow-y-auto overflow-x-hidden">
       <slot :is-collapsed="isCollapsed" />
     </div>
     <template v-if="!disabled && (!hideToggleOnCollapse || !isCollapsed)">
       <div
         v-if="!toggleAtTop"
-        class="flex w-full p-4"
-        :class="rightSide ? 'justify-start' : 'justify-end'"
+        class="flex w-full p-4 flex-shrink-0"
+        :class="{'justify-start': rightSide, 'justify-end': !rightSide, ...resolveToggleClass}"
       >
         <slot name="toggle">
           <QBtn
             class="btn-secondary"
             @click="toggleCollapse"
           >
-            <ToggleIcon
-              class="w-5 transition-all"
-              :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
-            />
+            <ToggleIcon :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed, ...resolvedToggleIconClass }" />
           </QBtn>
         </slot>
       </div>
       <div
         v-else
         class="absolute top-0 right-0 cursor-pointer p-2"
-        :class="toggleClass"
+        :class="resolveToggleClass"
         @click="toggleCollapse"
       >
-        <ToggleIcon
-          class="w-5 transition-all"
-          :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
-        />
+        <ToggleIcon :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed, ...resolvedToggleIconClass }" />
       </div>
     </template>
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { ChevronLeftIcon as ToggleIcon } from "@heroicons/vue/outline";
 import { computed, onMounted, ref, watch } from "vue";
 import { getItem, setItem } from "../../../helpers";
+import { AnyObject } from "../../../types";
 
 const emit = defineEmits(["collapse", "update:collapse"]);
-const props = defineProps({
-  rightSide: Boolean,
-  displayClass: {
-    type: String,
-    default: "flex flex-col"
-  },
-  maxWidth: {
-    type: String,
-    default: "13.5rem"
-  },
-  minWidth: {
-    type: String,
-    default: "5.5rem"
-  },
-  disabled: Boolean,
-  collapse: Boolean,
-  name: {
-    type: String,
-    default: "sidebar"
-  },
-  toggleAtTop: Boolean,
-  toggleClass: {
-    type: String,
-    default: ""
-  },
-  hideToggleOnCollapse: Boolean
+const props = withDefaults(defineProps<{
+	displayClass?: string;
+	toggleClass?: string | AnyObject;
+	toggleIconClass?: string | AnyObject;
+	rightSide?: boolean;
+	maxWidth?: string;
+	minWidth?: string;
+	disabled?: boolean;
+	collapse?: boolean;
+	name?: string;
+	toggleAtTop?: boolean;
+	hideToggleOnCollapse?: boolean;
+}>(), {
+	displayClass: "flex flex-col",
+	maxWidth: "13.5rem",
+	minWidth: "5.5rem",
+	name: "sidebar",
+	toggleClass: "",
+	toggleIconClass: "w-5 transition-all"
 });
 
 const isCollapsed = ref(getItem(props.name + "-is-collapsed", props.collapse));
 
 function setCollapse(state) {
-  isCollapsed.value = state;
-  setItem(props.name + "-is-collapsed", !!isCollapsed.value);
+	isCollapsed.value = state;
+	setItem(props.name + "-is-collapsed", !!isCollapsed.value);
 }
 
 function toggleCollapse() {
-  setCollapse(!isCollapsed.value);
-  emit("collapse", isCollapsed.value);
-  emit("update:collapse", isCollapsed.value);
+	setCollapse(!isCollapsed.value);
+	emit("collapse", isCollapsed.value);
+	emit("update:collapse", isCollapsed.value);
 }
 
 onMounted(() => {
-  emit("collapse", isCollapsed.value);
-  emit("update:collapse", isCollapsed.value);
+	emit("collapse", isCollapsed.value);
+	emit("update:collapse", isCollapsed.value);
 });
 const style = computed(() => {
-  return {
-    width: isCollapsed.value ? props.minWidth : props.maxWidth
-  };
+	return {
+		width: isCollapsed.value ? props.minWidth : props.maxWidth
+	};
 });
 
+const resolveToggleClass = computed(() => typeof props.toggleClass === "string" ? { [props.toggleClass]: true } : props.toggleClass);
+const resolvedToggleIconClass = computed(() => typeof props.toggleIconClass === "string" ? { [props.toggleIconClass]: true } : props.toggleIconClass);
 watch(() => props.collapse, () => {
-  setCollapse(props.collapse);
+	setCollapse(props.collapse);
 });
 </script>

package/src/helpers/actions.ts

@@ -3,7 +3,14 @@ import { FaSolidCopy as CopyIcon, FaSolidPencil as EditIcon, FaSolidTrash as Del
 import { uid } from "quasar";
 import { h, isReactive, Ref, shallowReactive, shallowRef } from "vue";
 import { ConfirmActionDialog, CreateNewWithNameDialog } from "../components";
-import type { ActionGlobalOptions, ActionOptions, ActionTarget, ListController, ResourceAction } from "../types";
+import type {
+	ActionGlobalOptions,
+	ActionOptions,
+	ActionTarget,
+	ActionTargetItem,
+	ListController,
+	ResourceAction
+} from "../types";
 import { FlashMessages } from "./FlashMessages";
 import { storeObject } from "./objectStore";
 
@@ -233,12 +240,18 @@ async function onConfirmAction(action: ActionOptions, target: ActionTarget, inpu
 				result = { error: `Action ${action.name} does not support batch actions` };
 			}
 		} else {
+			const __timestamp = Date.now();
+			if (action.optimisticDelete) {
+				storeObject({ ...target, __deleted_at: new Date().toISOString(), __timestamp } as ActionTargetItem);
+			}
+
 			// If the action has an optimistic callback, we call it before the actual action to immediately
 			// update the UI
 			if (typeof action.optimistic === "function") {
 				action.optimistic(action, target, input);
+				storeObject({ ...target, __timestamp } as ActionTargetItem);
 			} else if (action.optimistic) {
-				storeObject({ ...target, ...input });
+				storeObject({ ...target, ...input, __timestamp });
 			}
 
 			result = await action.onAction(action.alias || action.name, target, input);

package/src/helpers/objectStore.ts

@@ -22,7 +22,7 @@ export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredO
 	if (typeof newObject !== "object") {
 		return newObject;
 	}
-	
+
 	const id = newObject?.id || newObject?.name;
 	const type = newObject?.__type;
 	if (!id || !type) return shallowReactive(newObject);
@@ -49,6 +49,9 @@ export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredO
 	// @ts-expect-error __timestamp is guaranteed to be set in this case on both old and new
 	if (oldObject && newObject.__timestamp < oldObject.__timestamp) {
 		recentlyStoredObjects[objectKey] = oldObject;
+
+		// Recursively store all the children of the object as well
+		storeObjectChildren(newObject, recentlyStoredObjects, oldObject);
 		return oldObject;
 	}
 
@@ -59,19 +62,7 @@ export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredO
 	recentlyStoredObjects[objectKey] = reactiveObject;
 
 	// 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) {
-			for (const index in value) {
-				if (value[index] && typeof value[index] === "object") {
-					newObject[key][index] = storeObject(value[index], recentlyStoredObjects);
-				}
-			}
-		} else if (value?.__type) {
-			// @ts-expect-error __type is guaranteed to be set in this case
-			newObject[key] = storeObject(value as TypedObject, recentlyStoredObjects);
-		}
-	}
+	storeObjectChildren(newObject, recentlyStoredObjects);
 
 	Object.assign(reactiveObject, newObject);
 
@@ -87,6 +78,32 @@ export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredO
 	return reactiveObject;
 }
 
+/**
+ *  A recursive way to store all the child TypedObjects of a TypedObject.
+ *  recentlyStoredObjects is used to avoid infinite recursion
+ *  applyToObject is used to apply the stored objects to a different object than the one being stored.
+ *  The apply to object is the current object being returned by storeObject() - Normally, the oldObject if it has a more recent timestamp than the newObject being stored.
+ */
+function storeObjectChildren<T extends TypedObject>(object: T, recentlyStoredObjects: AnyObject = {}, applyToObject: T | null = null) {
+	applyToObject = applyToObject || object;
+	for (const key of Object.keys(object)) {
+		const value = object[key];
+		if (Array.isArray(value) && value.length > 0) {
+			for (const index in value) {
+				if (value[index] && typeof value[index] === "object") {
+					if (!applyToObject[key]) {
+						applyToObject[key] = [];
+					}
+					applyToObject[key][index] = storeObject(value[index], recentlyStoredObjects);
+				}
+			}
+		} else if (value?.__type) {
+			// @ts-expect-error __type is guaranteed to be set in this case
+			applyToObject[key] = storeObject(value as TypedObject, recentlyStoredObjects);
+		}
+	}
+}
+
 /**
  * Remove an object from all lists in the store
  */

package/src/helpers/request.ts

@@ -20,7 +20,7 @@ export const request: RequestApi = {
 	async call(url, options) {
 		options = options || {};
 		const abortKey = options?.abortOn !== undefined ? options.abortOn : url + JSON.stringify(options.params || "");
-		const timestamp = new Date().getTime();
+		const timestamp = Date.now();
 
 		if (abortKey) {
 			const abort = new AbortController();
@@ -47,7 +47,15 @@ export const request: RequestApi = {
 			delete options.params;
 		}
 
-		const response = await fetch(request.url(url), options);
+		let response = null;
+		try {
+			response = await fetch(request.url(url), options);
+		} catch (e) {
+			if (options.ignoreAbort && (e + "").match(/Request was aborted/)) {
+				return { abort: true };
+			}
+			throw e;
+		}
 
 		// Verify the app version of the client and server are matching
 		checkAppVersion(response);
@@ -97,12 +105,13 @@ export const request: RequestApi = {
 	async get(url, options) {
 		return await request.call(url, {
 			method: "get",
+			...options,
 			headers: {
 				Accept: "application/json",
 				"Content-Type": "application/json",
-				...danxOptions.value.request?.headers
-			},
-			...options
+				...danxOptions.value.request?.headers,
+				...options?.headers
+			}
 		});
 	},
 
@@ -110,12 +119,13 @@ export const request: RequestApi = {
 		return await request.call(url, {
 			method: "post",
 			body: data && JSON.stringify(data),
+			...options,
 			headers: {
 				Accept: "application/json",
 				"Content-Type": "application/json",
-				...danxOptions.value.request?.headers
-			},
-			...options
+				...danxOptions.value.request?.headers,
+				...options?.headers
+			}
 		});
 	}
 };

package/src/helpers/routes.ts

@@ -1,36 +1,99 @@
-import { storeObject } from "../helpers";
-import { ListControlsRoutes } from "../types";
+import { storeObject, storeObjects } from "../helpers";
+import { ActionTargetItem, ApplyActionResponse, ListControlsRoutes, PagedItems } from "../types";
 import { downloadFile } from "./downloadPdf";
 import { request } from "./request";
 
 export function useActionRoutes(baseUrl: string, extend?: object): ListControlsRoutes {
 	return {
-		list(pager?, options?) {
-			return request.post(`${baseUrl}/list`, pager, options);
+		/**
+		 *  Loads a paged item list from the server
+		 */
+		async list(pager?, options?) {
+			options = {
+				...options,
+				ignoreAbort: true
+			};
+			const response = await request.post(`${baseUrl}/list`, pager, options) as PagedItems;
+
+			if (response.data) {
+				response.data = storeObjects(response.data);
+			}
+
+			return response;
 		},
+		/**
+		 * Loads a summary from the server
+		 */
 		summary(filter, options?) {
+			options = {
+				...options,
+				ignoreAbort: true
+			};
 			return request.post(`${baseUrl}/summary`, { filter }, options);
 		},
-		details(target, fields, options?) {
-			options = options || {};
-			fields && (options.params = { fields });
-			return request.get(`${baseUrl}/${target.id}/details`, options);
-		},
-		async detailsAndStore(target, fields, options?) {
-			options = options || {};
+		/**
+		 *  Loads a single item from the server.
+		 *  Optionally pass in the desired fields to load (otherwise it will load all default fields)
+		 */
+		async details(target, fields, options?) {
+			options = {
+				...options,
+				ignoreAbort: true
+			};
 			fields && (options.params = { fields });
 			const item = await request.get(`${baseUrl}/${target.id}/details`, options);
 			return storeObject(item);
 		},
+		/**
+		 *  Loads field options from the server
+		 */
 		fieldOptions(options?) {
 			return request.get(`${baseUrl}/field-options`, options);
 		},
-		applyAction(action, target, data, options?) {
-			return request.post(`${baseUrl}/${target ? target.id : "new"}/apply-action`, { action, data }, options);
+		/**
+		 *  Applies an action to a target item on the server to save to the DB and return the updated result
+		 */
+		async applyAction(action, target, data, options?) {
+			options = {
+				...options,
+				ignoreAbort: true,
+				headers: {
+					...options?.headers,
+					// @ts-expect-error This header is fine
+					"X-Timestamp": Date.now()
+				}
+			};
+			data = data || {};
+			const response = await request.post(`${baseUrl}/${target ? target.id : "new"}/apply-action`, {
+				action,
+				data
+			}, options) as ApplyActionResponse;
+
+			// Store the response item in the reactive store if it is set
+			if (response.item) {
+				response.item = storeObject(response.item);
+			}
+
+			// Store the result item in the reactive store if it is set as an ActionTargetItem
+			if (response.result?.__type && response.result?.id) {
+				response.result = storeObject(response.result as ActionTargetItem);
+			}
+
+			return response;
 		},
+		/**
+		 *  Applies an action to multiple target items on the server to save to the DB and return the updated result
+		 */
 		batchAction(action, targets, data, options?) {
+			options = {
+				...options,
+				ignoreAbort: true
+			};
 			return request.post(`${baseUrl}/batch-action`, { action, filter: { id: targets.map(r => r.id) }, data }, options);
 		},
+		/**
+		 *  Exports a list of items to a CSV file
+		 */
 		export(filter, name) {
 			return downloadFile(`${baseUrl}/export`, name || "export.csv", { filter });
 		},

package/src/types/actions.d.ts

@@ -34,6 +34,7 @@ export interface ActionOptions<T = ActionTargetItem> {
 	debounce?: number;
 	useInputFromConfirm?: boolean;
 	optimistic?: boolean | ((action: ActionOptions<T>, target: T | null, input: any) => void);
+	optimisticDelete?: boolean;
 	vnode?: (target: ActionTarget<T>, data: any) => VNode | any;
 	enabled?: (target: ActionTarget<T>) => boolean;
 	batchEnabled?: (targets: T[]) => boolean;

package/src/types/controls.d.ts

@@ -27,11 +27,9 @@ export interface ListControlsRoutes<T = ActionTargetItem> {
 
 	details?(target: T, fields?: ControlsFieldsList, options?: RequestCallOptions): Promise<T>;
 
-	detailsAndStore?(target: T, fields?: ControlsFieldsList, options?: RequestCallOptions): Promise<T>;
-
 	more?(pager: ListControlsPagination, options?: RequestCallOptions): Promise<T[]>;
 
-	fieldOptions?(filter?: AnyObject, options?: RequestCallOptions): Promise<AnyObject>;
+	fieldOptions?(options?: RequestCallOptions): Promise<AnyObject>;
 
 	applyAction?(action: string | ResourceAction | ActionOptions, target: T | null, data?: object, options?: RequestCallOptions): Promise<AnyObject>;
 
@@ -121,3 +119,9 @@ export interface ListController<T = ActionTargetItem> {
 	applyFilterFromUrl: (url: string, filters?: Ref<FilterGroup[]> | null) => void;
 	getFieldOptions: (field: string) => any[];
 }
+
+export interface ApplyActionResponse<T = ActionTargetItem> {
+	item?: T;
+	result?: T | AnyObject;
+	success: boolean;
+}

package/src/types/requests.d.ts

@@ -31,6 +31,7 @@ export interface RequestOptions {
 
 export interface RequestCallOptions extends RequestInit {
 	abortOn?: string;
+	ignoreAbort?: boolean;
 	params?: AnyObject;
 }