quasar-ui-danx 0.4.1 → 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

@@ -1,80 +1,106 @@
 .danx-app {
-  .q-tab {
-    text-transform: capitalize
-  }
-
-  .q-table__card {
-    background: inherit;
-    color: inherit;
-  }
-
-  .q-checkbox__inner {
-    color: inherit;
-  }
-
-  .q-toolbar {
-    min-height: 0;
-    padding: 0;
-  }
-
-  .q-notification__actions {
-    color: inherit;
-  }
-
-  .q-date {
-    min-width: 100px;
-
-    .q-date__view {
-      min-height: 0;
-    }
-  }
-
-  .q-field {
-    &.q-field--auto-height {
-      .q-field__control {
-        min-height: 0;
-
-        .q-field__native {
-          min-height: 0;
-          color: inherit;
-        }
-      }
-
-    }
-
-    &.q-field--labeled {
-      .q-field__control-container {
-        padding-top: 1.1rem;
-      }
-    }
-
-    .q-field__marginal, .q-field__input, .q-field__label {
-      color: inherit;
-    }
-  }
+	.q-tab {
+		text-transform: capitalize
+	}
+
+	.q-table__card {
+		background: inherit;
+		color: inherit;
+	}
+
+	.q-checkbox__inner {
+		color: inherit;
+	}
+
+	.q-toolbar {
+		min-height: 0;
+		padding: 0;
+		flex-shrink: 0;
+	}
+
+	.q-notification__actions {
+		color: inherit;
+	}
+
+	.q-date {
+		min-width: 100px;
+
+		.q-date__view {
+			min-height: 0;
+		}
+	}
+
+	.q-field {
+		&.q-field--auto-height {
+			.q-field__control {
+				min-height: 0;
+
+				.q-field__native {
+					min-height: 0;
+					color: inherit;
+				}
+			}
+
+		}
+
+		&.q-field--labeled {
+			.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 {
+			color: inherit;
+		}
+	}
+}
+
+.q-btn {
+	text-transform: inherit;
+	@apply bg-inherit text-inherit min-h-[auto] p-2;
+
+	&:before {
+		@apply shadow-none;
+	}
 }
 
 .q-item {
-  min-height: 0;
+	min-height: 0;
 }
 
 .q-tab-panels {
-  overflow: visible;
-  background: inherit;
+	overflow: visible;
+	background: inherit;
+
+	.q-panel {
+		overflow: visible;
 
-  .q-panel {
-    overflow: visible;
+		&.scroll {
+			overflow: auto;
+		}
 
-    &.scroll {
-      overflow: auto;
-    }
+		.q-tab-panel {
+			padding: 0;
+		}
+	}
 
-    .q-tab-panel {
-      padding: 0;
-    }
-  }
+	&.overflow-y-auto {
+		overflow-y: auto;
+	}
+}
+
+.dx-dialog {
+	.q-card__section--vert {
+		@apply p-0;
+	}
+}
 
-  &.overflow-y-auto {
-    overflow-y: auto;
-  }
+.q-banner {
+	@apply min-h-[auto];
 }

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

@@ -0,0 +1,47 @@
+.dx-dialog {
+	.dx-dialog-card {
+		@apply overflow-hidden;
+	}
+
+	.dx-dialog-title {
+		@apply pl-6 pr-10 border-b border-gray-300 font-normal;
+	}
+
+	.dx-dialog-subtitle {
+		@apply mt-1 text-sm;
+	}
+
+	.dx-dialog-content {
+		@apply px-6 bg-gray-100;
+	}
+
+	.dx-dialog-actions {
+		@apply px-6 py-4 border-t border-gray-300;
+	}
+
+	.dx-dialog-button {
+		& + .dx-dialog-button {
+			@apply ml-4;
+		}
+	}
+
+	.dx-close-button {
+		@apply p-4 text-black;
+	}
+
+	.dx-dialog-button-confirm .dx-dialog-button {
+		@apply bg-blue-600 text-white;
+	}
+
+	.dx-dialog-button-cancel {
+		@apply flex-grow;
+	}
+
+	&.dx-info-dialog {
+		.dx-dialog-actions {
+			& > .flex-grow {
+				@apply text-right;
+			}
+		}
+	}
+}

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

@@ -2,4 +2,22 @@
 	.q-field__label {
 		@apply text-sm text-gray-700;
 	}
+
+	&.dx-number-field {
+		&.dx-prepend-label {
+			@apply text-xs text-black font-normal;
+		}
+
+		&.dx-no-prepend-label {
+			@apply w-32;
+
+			.q-field__native {
+				@apply bg-white text-right;
+			}
+
+			.q-field__prepend {
+				padding: 0;
+			}
+		}
+	}
 }

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

@@ -1,3 +1,7 @@
 @import "action-table";
 @import "buttons";
+@import "dialogs";
+@import "forms";
+@import "panels";
+@import "sidebar";
 @import "toolbar";

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;
+	};
+}