refactor: pagination

BREAKING CHANGE: orderBy expects tOrderBy[]

Author: vis97c

packages/common-types/src/fetch.ts

@@ -1,4 +1,12 @@
-export type tOrderBy = [string, ("desc" | "asc")?];
+export type tOrder = "desc" | "asc";
+
+/**
+ * Order using column or property
+ *
+ * @example [["id", "asc" ]], order ascendente de id
+ * @example [["id", "desc" ]] or [["id"]], order descendente de id
+ */
+export type tOrderBy = [string, tOrder?];
 
 export interface iPageEdge<T, C extends string | number = string> {
 	cursor: C;
@@ -19,7 +27,7 @@ export interface iPage<T, C extends string | number = string> {
 	totalCount: number;
 }
 
-export interface iPagination<O = tOrderBy> {
+export interface iPagination {
 	/**
 	 * Identificador del elemento donde empieza la paginacion
 	 *
@@ -30,12 +38,7 @@ export interface iPagination<O = tOrderBy> {
 	 * Cantidad de elementos (limite)
 	 */
 	first?: number;
-	/**
-	 * Ordenar segun columna o propiedad
-	 * ej: ["id", "asc" ], order ascendente de id
-	 * ej: ["id", "desc" ], order descendente de id
-	 */
-	orderBy?: O;
+	orderBy?: tOrderBy[];
 }
 
 /**

packages/components-vue/src/components/loader/ContentFetch.vue

@@ -3,18 +3,19 @@
 		<LoaderContent
 			v-bind="{
 				...$attrs,
-				content: !!content,
+				content: !!content && patchedIsContent(content),
 				errors: !!errors,
 				loading: loading,
 				refresh,
 				unwrap,
 				theme,
+				noContentMessage,
 				label,
 				noLoader,
 			}"
 		>
 			<slot
-				v-if="content && (!loading || firstLoad)"
+				v-if="!!content && patchedIsContent(content) && (!loading || firstLoad)"
 				v-bind="{ content, refresh, loading, errors }"
 			></slot>
 		</LoaderContent>
@@ -40,6 +41,7 @@
 	import type { iUseThemeProps } from "../../types/props";
 
 	interface iLoaderContentFetchProps<Ti, Pi extends any[]> extends iUseThemeProps {
+		noContentMessage?: string;
 		/**
 		 * Loader label
 		 */
@@ -59,6 +61,10 @@
 		 */
 		el?: VueComponent | FunctionalComponent | DefineComponent | string;
 		preventAutoload?: boolean;
+		/**
+		 * Additional content validation before rendering fetched data
+		 */
+		isContent?: (c?: any) => boolean;
 	}
 
 	/**
@@ -96,6 +102,10 @@
 	};
 	const content = computed(() => fetchedContent.value ?? props.fallback);
 
+	function patchedIsContent(c?: T): boolean {
+		return props.isContent?.(c) ?? !!c;
+	}
+
 	async function refresh() {
 		try {
 			if (props.promise || props.hydratablePromise || props.url) {

packages/components-vue/src/components/pagination/Content.vue

@@ -3,7 +3,7 @@
 		v-slot="{ content, refresh }"
 		:promise="patchedPromise"
 		:payload="[{ ...pagination, ...defaults }]"
-		v-bind="{ ...$attrs, preventAutoload, theme, label }"
+		v-bind="{ ...$attrs, preventAutoload, theme, noContentMessage, label, isContent }"
 	>
 		<slot
 			v-bind="{
@@ -29,13 +29,13 @@
 		iPage,
 		iPagination,
 		iPluginOptions,
-		tOrderBy,
 	} from "@open-xamu-co/ui-common-types";
 
 	import LoaderContentFetch from "../loader/ContentFetch.vue";
 	import PaginationSimple from "./Simple.vue";
 
 	import type { iUseThemeProps } from "../../types/props";
+	import { useOrderBy } from "../../composables/utils";
 
 	export interface iPCBaseProps extends iPagination, iUseThemeProps {
 		/**
@@ -44,6 +44,9 @@
 		page: any;
 		/**
 		 * paginate using route
+		 *
+		 * @example "?orderBy=id:asc" single order property
+		 * @example "?orderBy=id:asc&orderBy=createdAt" multiple order properties
 		 */
 		withRoute?: boolean;
 		/**
@@ -55,6 +58,7 @@
 		 * Additional parameters to send every request
 		 */
 		defaults?: Record<string, any>;
+		noContentMessage?: string;
 		/**
 		 * Loader label
 		 */
@@ -108,27 +112,24 @@
 	const routePagination = computed<iPagination>(() => {
 		if (!router) return {};
 
+		const { first, at } = propsPagination.value;
+
 		const route = router.currentRoute.value;
-		const newPagination = { ...propsPagination.value };
-		/**
-		 * TODO: support multiple order params
-		 * @example { price: "asc", createdAt: "desc", }
-		 */
-		const [cursorName, order] = Array.isArray(route.query.orderBy) ? route.query.orderBy : [];
-		const ascOrDesc = order === "asc" || order === "desc" ? order : "desc";
-		const orderBy: tOrderBy = [cursorName ?? "createdAt", ascOrDesc];
-		const first = route.query.first;
-		const at = route.query.at;
+		const newPagination: iPagination = { first, at };
+		const routeFirst = route.query.first;
+
+		if (routeFirst && !Array.isArray(routeFirst)) newPagination.first = Number(first);
 
-		newPagination.orderBy = orderBy;
+		const routeAt = route.query.at;
 
-		if (first && !Array.isArray(first)) newPagination.first = Number(first);
-		if (at && !Array.isArray(at)) {
+		if (routeAt && !Array.isArray(at)) {
 			const newAt = Number(at);
 
-			newPagination.at = isNaN(newAt) ? at : newAt;
+			newPagination.at = isNaN(newAt) ? routeAt : newAt;
 		}
 
+		newPagination.orderBy = useOrderBy(route.query.orderBy);
+
 		return newPagination;
 	});
 	const pagination = computed<iPagination>({
@@ -145,4 +146,8 @@
 			};
 		},
 	});
+
+	function isContent(c?: iPage<T, C>): boolean {
+		return !!c?.edges.length;
+	}
 </script>

packages/components-vue/src/components/pagination/Simple.vue

@@ -14,11 +14,11 @@
 			<ul class="flx --flxRow-wrap --flx-center --gap-5 --gap:sm">
 				<li>
 					<SelectSimple
-						id="order"
+						id="first"
 						v-model="firstModel"
 						:theme="theme"
 						class="--maxWidthVw-60"
-						name="order"
+						name="first"
 						:options="[5, 10, 25, 50, 100]"
 					/>
 				</li>

packages/components-vue/src/components/table/Simple.vue

@@ -44,7 +44,7 @@
 						<!-- TODO: define filters, filter table contents -->
 						<th
 							class="--sticky"
-							:class="{ ['is--selected']: canSort && isOrdering('id') }"
+							:class="{ ['is--selected']: canSort && !!ordering['id'] }"
 							data-column-name="id"
 							data-column="id"
 						>
@@ -70,7 +70,7 @@
 									@click="setOrdering('id')"
 								>
 									<span>#</span>
-									<template v-if="isOrdering('id')">
+									<template v-if="!!ordering['id']">
 										<IconFa v-if="ordering.asc" name="arrow-down" />
 										<IconFa v-if="!ordering.asc" name="arrow-up" />
 									</template>
@@ -83,7 +83,7 @@
 							class="--maxWidth-440"
 							:class="[
 								`--txtSize-${size}`,
-								{ ['is--selected']: canSort && isOrdering(propertyName.value) },
+								{ ['is--selected']: canSort && !!ordering[propertyName.value] },
 							]"
 							:data-column-name="propertyName.value"
 							:data-column="propertyName.alias"
@@ -93,7 +93,7 @@
 									: 'auto'
 							"
 						>
-							<span v-if="!canSort" :title="String(propertyName.value)">
+							<span v-if="!canSort" :title="propertyName.value">
 								{{ propertyName.alias }}
 							</span>
 							<ActionLink
@@ -107,7 +107,7 @@
 								@click="setOrdering(propertyName.value)"
 							>
 								<span>{{ propertyName.alias }}</span>
-								<template v-if="isOrdering(propertyName.value)">
+								<template v-if="!!ordering[propertyName.value]">
 									<IconFa v-if="ordering.asc" name="arrow-down" />
 									<IconFa v-else name="arrow-up" />
 								</template>
@@ -136,7 +136,7 @@
 						>
 							<th
 								class="--sticky"
-								:class="{ ['is--selected']: isOrdering('id') }"
+								:class="{ ['is--selected']: !!ordering['id'] }"
 								data-column-name="id"
 								data-column="id"
 							>
@@ -343,6 +343,7 @@
 		iNodeFn,
 		iProperty,
 		iSelectOption,
+		tOrder,
 		tProps,
 		tSizeModifier,
 	} from "@open-xamu-co/ui-common-types";
@@ -361,7 +362,7 @@
 
 	import type { iModalProps, iUseThemeProps } from "../../types/props";
 	import useTheme from "../../composables/theme";
-	import { useHelpers } from "../../composables/utils";
+	import { useHelpers, useOrderBy } from "../../composables/utils";
 	import useUUID from "../../composables/uuid";
 
 	export interface iTableProps<Ti extends Record<string, any>> extends iUseThemeProps {
@@ -463,22 +464,23 @@
 	/**
 	 * ordering property
 	 *
-	 * TODO: order using props or model instead (external pagination)
+	 * TODO: require & use order getter fn instead
 	 */
 	const ordering = computed(() => {
-		const orderBy = { name: "id", asc: true };
+		let orderBy: Record<string, tOrder> = { id: "desc" };
 
 		if (router) {
 			const route = router.currentRoute.value;
 
-			if (!route.query.orderBy) return orderBy;
+			const routeOrderBy = useOrderBy(route.query.orderBy);
 
-			const properties = String(route.query.orderBy).split(",");
-			const property = properties[0]?.split(":");
+			if (!routeOrderBy.length) return orderBy;
 
-			orderBy.name = property[0];
+			orderBy = routeOrderBy.reduce<Record<string, tOrder>>((acc, [key, value]) => {
+				acc[key] = value || "desc";
 
-			if (String(property[1]).toUpperCase() === "DESC") orderBy.asc = false;
+				return acc;
+			}, {});
 		}
 
 		return orderBy;
@@ -490,10 +492,15 @@
 			(!props.updateNode && !props.cloneNode && !props.deleteNode)
 		);
 	});
+
+	interface iPropertyMeta extends iSelectOption {
+		value: string;
+	}
+
 	/**
 	 * This one assumes all objects within nodes are all the same
 	 */
-	const propertiesMeta = computed<iSelectOption[]>(() => {
+	const propertiesMeta = computed<iPropertyMeta[]>(() => {
 		return Object.entries(props.nodes[0])
 			.sort(([a], [b]) => {
 				// updatedAt, updatedBy, createdAt and createdBy to last position
@@ -506,13 +513,14 @@
 
 				return 0;
 			})
-			.map(([key]) => {
+			.map(([key]): iPropertyMeta => {
 				const options = (props.properties || []).map(toOption);
 				const property = toOption(options.find((p) => p.value === key) || key);
 				const aliasKey = _.snakeCase(key);
 
 				return {
 					...property,
+					value: String(property.value),
 					alias: _.capitalize(_.startCase(property.alias || tet(aliasKey))),
 				};
 			})
@@ -542,24 +550,19 @@
 		selectedNodes.value[index] = [selected, !children];
 	}
 
-	/**
-	 * property is ordering the table
-	 */
-	function isOrdering(property: string | number): boolean {
-		return ordering.value.name === property;
-	}
-
 	/**
 	 * set pagination order
 	 *
+	 * TODO: require & use order target fn instead
+	 *
 	 * @replace
 	 */
-	function setOrdering(property: string | number) {
-		var order = "ASC";
+	function setOrdering(property: string) {
+		let order: tOrder = "desc";
 
-		if (ordering.value.name === property && ordering.value.asc) {
+		if (ordering.value[property]) {
 			// switch order
-			order = "DESC";
+			order = ordering.value[property] === "desc" ? "asc" : "desc";
 		}
 
 		const orderBy = `${property}:${order}`;

packages/components-vue/src/composables/utils.ts

@@ -1,6 +1,6 @@
 import { inject } from "vue";
 
-import type { iPluginOptions } from "@open-xamu-co/ui-common-types";
+import type { iPluginOptions, tOrder, tOrderBy } from "@open-xamu-co/ui-common-types";
 
 export function useSortObject(data: Record<string, any>) {
 	return Object.entries(data)
@@ -23,3 +23,28 @@ export function useHelpers<T>(helper: (o?: iPluginOptions) => T): ReturnType<typ
 
 	return helper(xamuOptions);
 }
+
+export function useOrderBy(orderByParam: any): tOrderBy[] {
+	function getOrderBy(bys: string[]) {
+		return bys
+			.map((by): tOrderBy | false => {
+				if (typeof by !== "string") return false;
+
+				const splitBy = by.split(":", 2);
+				const order: tOrder = splitBy[1]?.toLowerCase?.() === "asc" ? "asc" : "desc";
+
+				return [splitBy[0], order];
+			})
+			.filter((by): by is tOrderBy => !!by);
+	}
+
+	const routeOrderBy: string | string[] = orderByParam;
+
+	if (Array.isArray(routeOrderBy)) {
+		return getOrderBy(routeOrderBy);
+	} else if (typeof routeOrderBy === "string") {
+		return getOrderBy([routeOrderBy]);
+	}
+
+	return [];
+}