quasar-ui-danx 0.4.2 → 0.4.3

package/src/helpers/request.ts

@@ -1,50 +1,69 @@
-import { ref, Ref } from "vue";
+import { Ref } from "vue";
+import { danxOptions } from "../config";
+import { AnyObject } from "../types";
 
-interface RequestOptions {
-    baseUrl: string;
-}
-
-const requestOptions: Ref<RequestOptions> = ref({
-    baseUrl: ""
-});
 /**
  * A simple request helper that wraps the fetch API
  * to make GET and POST requests easier w/ JSON payloads
  */
 export const request = {
-    configure(options: RequestOptions) {
-        requestOptions.value = options;
-    },
+	url(url: string) {
+		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"
+				};
+			}
 
-    url(url: string) {
-        if (url.startsWith("http")) {
-            return url;
-        }
-        return requestOptions.value.baseUrl + url;
-    },
+			if (response.status > 400) {
+				if (result.exception && !result.error) {
+					result.error = true;
+				}
+			}
 
-    async get(url: string, options = {}): Promise<object> {
-        return fetch(request.url(url), {
-            method: "get",
-            headers: {
-                Accept: "application/json",
-                "Content-Type": "application/json"
-            },
-            ...options
-        }).then((r) => r.json());
-    },
+			return result;
+		} catch (error: any) {
+			return {
+				error: error.message || "An error occurred fetching the data"
+			};
+		}
+	},
+	async get(url: string, options: RequestInit = {}): Promise<object> {
+		return await request.call(url, {
+			method: "get",
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json",
+				...danxOptions.value.request?.headers
+			},
+			...options
+		});
+	},
 
-    async post(url: string, data = {}, options = {}) {
-        return fetch(request.url(url), {
-            method: "post",
-            body: JSON.stringify(data),
-            headers: {
-                Accept: "application/json",
-                "Content-Type": "application/json"
-            },
-            ...options
-        }).then((r) => r.json());
-    }
+	async post(url: string, data: AnyObject = {}, options: RequestInit = {}) {
+		return request.call(url, {
+			method: "post",
+			body: JSON.stringify(data),
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json",
+				...danxOptions.value.request?.headers
+			},
+			...options
+		});
+	}
 };
 
 /**
@@ -55,25 +74,25 @@ export const request = {
  *
  */
 export async function fetchResourceListWithSelected(fetchFn: (filter: object) => Promise<any[]>, list: Ref, id: string, filter: object): Promise<void> {
-    // First make sure we have the selected record, so we can always add it to the list
-    let selectedResource;
-    if (id) {
-        selectedResource = list.value.find((c: { id: string }) => c.id === id) || (await fetchFn({ id }))[0];
-    }
+	// First make sure we have the selected record, so we can always add it to the list
+	let selectedResource;
+	if (id) {
+		selectedResource = list.value.find((c: { id: string }) => c.id === id) || (await fetchFn({ id }))[0];
+	}
 
-    // Get the filtered campaign list
-    list.value = await fetchFn(filter);
+	// Get the filtered campaign list
+	list.value = await fetchFn(filter);
 
-    // If our selected campaign is not in the filtered list, add it
-    if (selectedResource && !list.value.find((c: { id: string }) => c.id === id)) {
-        list.value.push(selectedResource);
-    }
+	// If our selected campaign is not in the filtered list, add it
+	if (selectedResource && !list.value.find((c: { id: string }) => c.id === id)) {
+		list.value.push(selectedResource);
+	}
 }
 
 /**
  * Returns the value of the URL parameter (if it is set)
  */
 export function getUrlParam(key: string, url?: string) {
-    const params = new URLSearchParams(url?.replace(/.*\?/, "") || window.location.search);
-    return params.get(key);
+	const params = new URLSearchParams(url?.replace(/.*\?/, "") || window.location.search);
+	return params.get(key);
 }

package/src/helpers/routes.ts

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

package/src/helpers/storage.ts

@@ -1,8 +1,12 @@
 export function setItem(key: string, value: any) {
-    localStorage.setItem(key, JSON.stringify(value));
+	localStorage.setItem(key, JSON.stringify(value));
 }
 
 export function getItem(key: string, defaultValue: any = null) {
-    const item = localStorage.getItem(key);
-    return item ? JSON.parse(item) : defaultValue;
+	const item = localStorage.getItem(key);
+	try {
+		return item ? JSON.parse(item) : defaultValue;
+	} catch (e) {
+		return undefined;
+	}
 }

package/src/helpers/utils.ts

@@ -6,72 +6,90 @@ import { Ref, watch } from "vue";
  * eg: await sleep(5000);
  */
 export function sleep(delay: number) {
-    return new Promise((resolve) => setTimeout(resolve, delay));
+	return new Promise((resolve) => setTimeout(resolve, delay));
 }
 
 /**
  * Wait for a ref to have a value and then resolve the promise
  */
 export function waitForRef(ref: Ref, value: any) {
-    return new Promise<void>((resolve) => {
-        watch(ref, (newValue) => {
-            if (newValue === value) {
-                resolve();
-            }
-        });
-    });
+	return new Promise<void>((resolve) => {
+		watch(ref, (newValue) => {
+			if (newValue === value) {
+				resolve();
+			}
+		});
+	});
 }
 
 /**
  * Returns a number that is constrained to the given range.
  */
 export function minmax(min: number, max: number, value: number) {
-    return Math.max(min, Math.min(max, value));
+	return Math.max(min, Math.min(max, value));
 }
 
 /**
  * Convert meters to miles
  */
 export function metersToMiles(meters: number) {
-    return meters * 0.000621371;
+	return meters * 0.000621371;
 }
 
 /**
  * Convert miles to meters
  */
 export function milesToMeters(miles: number) {
-    return miles / 0.000621371;
+	return miles / 0.000621371;
 }
 
 /**
  * Parses a string for Lat and Long coords
  */
 export function parseCoords(location: string) {
-    const latLong = location.split(",");
+	const latLong = location.split(",");
 
-    if (latLong.length === 2) {
-        const lat = parseFloat(latLong[0].trim());
-        const lng = parseFloat(latLong[1].trim());
+	if (latLong.length === 2) {
+		const lat = parseFloat(latLong[0].trim());
+		const lng = parseFloat(latLong[1].trim());
 
-        if (!isNaN(lat) && !isNaN(lng)) {
-            return {
-                lat,
-                lng
-            };
-        }
-    }
+		if (!isNaN(lat) && !isNaN(lng)) {
+			return {
+				lat,
+				lng
+			};
+		}
+	}
 
-    return null;
+	return null;
 }
 
 /**
  * Increment a name by adding a number to the end of it or incrementing the number if it already exists
  */
 export function incrementName(name: string) {
-    name = (name || "New Item").trim();
-    const match = name.match(/(\d+)$/);
-    if (match) {
-        return name.replace(/\d+$/, (match: string) => "" + (parseInt(match) + 1));
-    }
-    return `${name} 1`;
+	name = (name || "New Item").trim();
+	const match = name.match(/(\d+)$/);
+	if (match) {
+		return name.replace(/\d+$/, (match: string) => "" + (parseInt(match) + 1));
+	}
+	return `${name} 1`;
+}
+
+/**
+ * Check if a string is a valid JSON object. If an object is passed, always return true
+ */
+export function isJSON(string: string | object) {
+	if (!string) {
+		return false;
+	}
+	if (typeof string === "object") {
+		return true;
+	}
+	try {
+		JSON.parse(string);
+		return true;
+	} catch (e) {
+		return false;
+	}
 }

package/src/styles/quasar-reset.scss

@@ -15,6 +15,7 @@
 	.q-toolbar {
 		min-height: 0;
 		padding: 0;
+		flex-shrink: 0;
 	}
 
 	.q-notification__actions {
@@ -46,6 +47,12 @@
 			.q-field__control-container {
 				padding-top: 1.1rem;
 			}
+
+			&.q-textarea {
+				.q-field__control-container {
+					padding-bottom: 1.1rem;
+				}
+			}
 		}
 
 		.q-field__marginal, .q-field__input, .q-field__label {
@@ -56,7 +63,11 @@
 
 .q-btn {
 	text-transform: inherit;
-	@apply bg-inherit text-inherit;
+	@apply bg-inherit text-inherit min-h-[auto] p-2;
+
+	&:before {
+		@apply shadow-none;
+	}
 }
 
 .q-item {
@@ -89,3 +100,7 @@
 		@apply p-0;
 	}
 }
+
+.q-banner {
+	@apply min-h-[auto];
+}

package/src/styles/themes/danx/dialogs.scss

@@ -1,4 +1,8 @@
 .dx-dialog {
+	.dx-dialog-card {
+		@apply overflow-hidden;
+	}
+
 	.dx-dialog-title {
 		@apply pl-6 pr-10 border-b border-gray-300 font-normal;
 	}

package/src/types/actions.d.ts

@@ -0,0 +1,43 @@
+import { VNode } from "vue";
+import { TypedObject } from "./shared";
+
+export interface ActionPanel {
+	name: string | number;
+	label: string;
+	category?: string;
+	class?: string | object;
+	enabled?: boolean | (() => boolean);
+	tabVnode?: (activePanel: string | number) => VNode | any;
+	vnode: (activePanel: string) => VNode | any;
+}
+
+export interface ActionTargetItem extends TypedObject {
+	isSaving?: boolean;
+}
+
+export type ActionTarget = ActionTargetItem[] | ActionTargetItem | null;
+
+export interface ActionOptions {
+	name?: string;
+	alias?: string;
+	label?: string;
+	menu?: boolean;
+	batch?: boolean;
+	category?: string;
+	class?: string;
+	debounce?: number;
+	isApplying?: boolean;
+	optimistic?: boolean | ((action: ActionOptions, target: ActionTargetItem | null, input: any) => void);
+	trigger?: (target?: ActionTarget, input?: any) => Promise<any>;
+	vnode?: ((target: ActionTarget) => VNode) | any;
+	enabled?: (target: object) => boolean;
+	batchEnabled?: (targets: object[]) => boolean;
+	onAction?: (action: string | null | undefined, target: ActionTargetItem | null, input: any) => Promise<any> | void;
+	onBatchAction?: (action: string | null | undefined, targets: ActionTargetItem[], input: any) => Promise<any>;
+	onStart?: (action: ActionOptions | null, targets: ActionTarget, input: any) => boolean;
+	onSuccess?: (result: any, targets: ActionTarget, input: any) => any;
+	onBatchSuccess?: (result: any, targets: ActionTargetItem[], input: any) => any;
+	onError?: (result: any, targets: ActionTarget, input: any) => any;
+	onFinish?: (result: any, targets: ActionTarget, input: any) => any;
+	__type?: string;
+}

package/src/types/config.d.ts

@@ -0,0 +1,15 @@
+import { QNotifyCreateOptions } from "quasar";
+import { FileUploadOptions } from "./files";
+import { RequestOptions } from "./requests";
+
+export interface DanxOptions {
+	tinyMceApiKey?: string;
+	fileUpload?: FileUploadOptions;
+	request?: RequestOptions,
+	flashMessages?: {
+		default?: QNotifyCreateOptions;
+		success?: QNotifyCreateOptions;
+		warning?: QNotifyCreateOptions;
+		error?: QNotifyCreateOptions;
+	};
+}

package/src/types/controls.d.ts

@@ -0,0 +1,99 @@
+import { ComputedRef, Ref, ShallowRef } from "vue";
+import { ActionTargetItem } from "./actions";
+import { LabelValueItem } from "./shared";
+
+export interface ListControlsFilter {
+	[key: string]: object | object[] | null | undefined | string | number | boolean;
+}
+
+export interface FilterableField {
+	name: string;
+	label: string;
+	type: string;
+	options?: string[] | number[] | LabelValueItem[];
+	inline?: boolean;
+}
+
+export interface FilterGroup {
+	name?: string;
+	flat?: boolean;
+	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>;
+}
+
+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 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>;
+	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;
+	resetPaging: () => void;
+	setPagination: (updated: ListControlsPagination) => void;
+	setSelectedRows: (selection: ActionTargetItem[]) => void;
+	clearSelectedRows: () => void;
+	loadList: (filter?: ListControlsFilter) => Promise<void>;
+	loadSummary: (filter?: ListControlsFilter) => Promise<void>;
+	loadListAndSummary: (filter?: ListControlsFilter) => Promise<void>;
+	loadMore: (index: number, perPage?: number) => Promise<boolean>;
+	getActiveItemDetails: () => Promise<void>;
+	refreshAll: () => Promise<void[]>;
+	exportList: (filter?: ListControlsFilter) => Promise<void>;
+	setActiveItem: (item: ActionTargetItem | null) => void;
+	getNextItem: (offset: number) => Promise<void>;
+	activatePanel: (item: ActionTargetItem | null, panel: string) => void;
+	setActiveFilter: (filter?: ListControlsFilter) => void;
+	applyFilterFromUrl: (url: string, filters?: Ref<FilterGroup[]> | null) => void;
+	getFieldOptions: (field: string) => any[];
+}

package/src/types/dialogs.d.ts

@@ -0,0 +1,32 @@
+import { ActionTargetItem } from "./actions";
+
+export interface DialogLayoutProps {
+	modelValue?: string | boolean | object;
+	title?: string;
+	titleClass?: string;
+	subtitle?: string;
+	content?: string;
+	backdropDismiss?: boolean;
+	maximized?: boolean;
+	fullWidth?: boolean;
+	fullHeight?: boolean;
+	contentClass?: string;
+}
+
+export interface ConfirmDialogProps extends DialogLayoutProps {
+	disabled?: boolean;
+	isSaving?: boolean;
+	closeOnConfirm?: boolean;
+	hideConfirm?: boolean;
+	confirmText?: string;
+	cancelText?: string;
+	confirmClass?: string;
+	contentClass?: string;
+}
+
+export interface ConfirmActionDialogProps extends ConfirmDialogProps {
+	action: string,
+	label?: string,
+	target: ActionTargetItem | ActionTargetItem[]
+	message?: string,
+}

package/src/types/fields.d.ts

@@ -0,0 +1,20 @@
+import { QInputProps } from "quasar";
+import { FormField } from "./forms";
+
+export interface TextFieldProps {
+	modelValue?: string,
+	field?: FormField,
+	type?: QInputProps["type"],
+	label?: string,
+	labelClass?: string,
+	parentClass?: string,
+	inputClass?: string,
+	allowOverMax?: boolean,
+	maxLength?: number;
+	autogrow?: boolean;
+	noLabel?: boolean;
+	showName?: boolean;
+	disabled?: boolean;
+	readonly?: boolean;
+	debounce?: string | number;
+}

package/src/types/files.d.ts

@@ -0,0 +1,54 @@
+export interface FileUploadOptions {
+	directory?: string,
+	createPresignedUpload?: ((path: string, name: string, mime?: string) => Promise<UploadedFile>) | null;
+	completePresignedUpload?: ((fileId: string) => Promise<UploadedFile>) | null;
+}
+
+export interface XHRFileUpload {
+	file: UploadedFile;
+	xhr?: XMLHttpRequest | null;
+	formData: FormData;
+	isComplete: boolean;
+	body?: FormData | UploadedFile | string;
+}
+
+export interface UploadedFile {
+	id: string,
+	resource_id?: string;
+	name: string,
+	size: number,
+	type: string;
+	mimeType?: string;
+	mime?: string;
+	progress?: number;
+	location?: string;
+	blobUrl?: string;
+	url?: string;
+}
+
+export interface FileUploadCompleteCallbackParams {
+	file?: UploadedFile | null;
+	uploadedFile?: UploadedFile | null;
+}
+
+export interface FileUploadAllCompleteCallbackParams {
+	files: XHRFileUpload[];
+}
+
+export interface FileUploadProgressCallbackParams {
+	file?: UploadedFile | null;
+	progress: number;
+}
+
+export interface FileUploadErrorCallbackParams {
+	e: InputEvent;
+	file: UploadedFile;
+	error: any;
+}
+
+export type FileUploadCompleteCallback = (params: FileUploadCompleteCallbackParams) => void
+export type FileUploadAllCompleteCallback = (params: FileUploadAllCompleteCallbackParams) => void
+export type FileUploadProgressCallback = (params: FileUploadProgressCallbackParams) => void
+export type FileUploadErrorCallback = (params: FileUploadErrorCallbackParams) => void
+export type OnFilesChangeCallback = (files: UploadedFile[]) => void;
+export type VoidCallback = () => void;

package/src/types/formats.d.ts

@@ -0,0 +1,4 @@
+export interface fDateOptions {
+	format?: string,
+	empty?: string
+}

package/src/{components/ActionTable/Form/form.d.ts → types/forms.d.ts}

@@ -10,10 +10,16 @@ export interface FormField {
 	type?: string;
 	name: string;
 	label: string;
+	placeholder?: string;
 	vnode?: ((props) => VNode | any);
 	component?: any;
+	clearable?: boolean;
 	required?: boolean;
 	required_group?: string;
+	toggleIndeterminate?: boolean;
+	inline?: boolean;
+	maxLength?: number;
+	minLength?: number;
 	options?: FormFieldOption[];
 }
 

package/src/types/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./actions";
+export * from "./config";
+export * from "./controls";
+export * from "./dialogs";
+export * from "./fields";
+export * from "./files";
+export * from "./formats";
+export * from "./forms";
+export * from "./requests";
+export * from "./shared";
+export * from "./tables";
+

package/src/types/requests.d.ts

@@ -0,0 +1,13 @@
+export interface HttpResponse {
+	headers: any;
+	data?: any;
+	ok?: boolean;
+
+	blob(): any;
+}
+
+export interface RequestOptions {
+	baseUrl?: string;
+	headers?: object;
+	onUnauthorized?: (response) => object;
+}