@sealcode/sealgen 0.3.2 → 0.4.2

package/src/page/list.ts

@@ -1,142 +1,112 @@
 import { BaseContext } from "koa";
-import { Collection, CollectionItem } from "sealious";
-import { Templatable, tempstream } from "tempstream";
+import { Collection, CollectionItem, ItemFields, ItemList } from "sealious";
+
+import { Templatable, tempstream, FlatTemplatable } from "tempstream";
 import { peopleWhoCan } from "./access-control";
 import { Page } from "./page";
-import { predicates, ShapeToType } from "@sealcode/ts-predicates";
-import { PagePropsParser } from "./props-parser";
+import { ShapeToType } from "@sealcode/ts-predicates";
 import { FormFieldControl } from "../forms/controls/controls";
-import { FormField } from "../forms/field";
-import { FormData } from "../forms/form";
-import { FormFieldsList } from "../forms/form-fields-list";
+import { FormField, NumberField } from "../forms/fields/field";
 import { naturalNumbers, UrlWithNewParams } from "../utils/utils";
+import { FormDataValue } from "..";
+import { makeHiddenInputs } from "../make-hidden-inputs";
 
 export const BasePagePropsShape = <const>{};
 export type BasePageProps = ShapeToType<typeof BasePagePropsShape>;
 
-export const BaseListPagePropsShape = <const>{
-	page: predicates.number,
-	itemsPerPage: predicates.number,
+export const BaseListPageFields = <const>{
+	page: new NumberField(false, 1),
+	itemsPerPage: new NumberField(false, 12),
 };
-export type BaseListPageProps = ShapeToType<typeof BaseListPagePropsShape>;
-export const BaseListPageDefaultProps = { page: 1, itemsPerPage: 25 };
-
-export type PropsErrors<PropsType> = Partial<Record<keyof PropsType, string>>;
 
 export abstract class ListPage<
 	ItemType,
-	PropsType extends BaseListPageProps = BaseListPageProps
-> extends Page {
+	F extends typeof BaseListPageFields
+> extends Page<F> {
 	abstract getItems(
 		ctx: BaseContext,
-		props: PropsType
-	): Promise<{ items: ItemType[] }>;
-	abstract getTotalPages(ctx: BaseContext, props: PropsType): Promise<number>;
-	abstract renderItem(ctx: BaseContext, item: ItemType): Promise<Templatable>;
-	abstract propsParser: PagePropsParser<PropsType>;
-
-	filterFields: FormField<keyof PropsType>[] = [];
-	filterControls: FormFieldControl[] = [];
+		page: number,
+		itemsPerPage: number,
+		values: Record<string, FormDataValue>
+	): Promise<ItemType[]>;
 
-	renderListContainer(_: BaseContext, content: Templatable): Templatable {
-		return tempstream`<div>${content}</div>`;
-	}
+	abstract getTotalPages(
+		ctx: BaseContext,
+		itemsPerPage: number,
+		values: Record<string, FormDataValue>
+	): Promise<number>;
 
-	async validateProps(
+	abstract renderItem(
 		ctx: BaseContext,
-		props: PropsType
-	): Promise<{ valid: boolean; errors: PropsErrors<PropsType> }> {
-		const errors: PropsErrors<PropsType> = {};
-		let has_errors = false;
-		const promises = [];
-		for (const [key, value] of Object.entries(props)) {
-			const field = FormFieldsList.getField(this.filterFields, key);
-			if (field) {
-				promises.push(
-					field._validate(ctx, value).then(({ valid, message }) => {
-						if (!valid) {
-							has_errors = true;
-							// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-							errors[key as keyof PropsType] = message;
-						}
-					})
-				);
-			}
+		item: ItemType
+	): Promise<FlatTemplatable>;
+
+	filterFields: Record<string, FormField> = {};
+	filterControls: FormFieldControl[] = [];
+
+	init(): void {
+		super.init();
+		for (const [fieldname, field] of Object.entries(this.filterFields)) {
+			field.init(fieldname);
 		}
-		await Promise.all(promises);
-		return { valid: has_errors, errors };
 	}
 
-	async getProps(ctx: BaseContext): Promise<{
-		parsed_props: PropsType;
-		errors: PropsErrors<PropsType>;
-		raw_props: PropsType;
-	}> {
-		const raw_props = this.propsParser.decode(ctx);
-		const parsed_props = { ...raw_props };
-		const { errors } = await this.validateProps(ctx, parsed_props);
-		for (const prop_name in errors) {
-			const default_value = this.propsParser.getDefaultValue(prop_name);
-			if (default_value !== undefined) {
-				parsed_props[prop_name] = default_value;
-			} else {
-				delete parsed_props[prop_name];
-			}
-		}
-		return { parsed_props, errors, raw_props };
+	renderListContainer(_: BaseContext, content: Templatable): FlatTemplatable {
+		return tempstream`<div>${content}</div>`;
 	}
 
-	async render(ctx: BaseContext) {
-		const { parsed_props, errors, raw_props } = await this.getProps(ctx);
-
-		return tempstream`${this.renderPagination(ctx, parsed_props)}
-${this.renderFilters(ctx, parsed_props, raw_props, errors)}
-${this.getItems(ctx, parsed_props).then(({ items }) =>
-	this.renderListContainer(
-		ctx,
-		items.map((item) => this.renderItem(ctx, item))
-	)
-)}`;
+	async render(ctx: BaseContext): Promise<FlatTemplatable> {
+		const values = this.extractRawValues(ctx);
+		const { parsed: page } = await this.fields.page.getValue(ctx, values);
+		const { parsed: itemsPerPage } =
+			await this.fields.itemsPerPage.getValue(ctx, values);
+
+		const items_promise = this.getItems(ctx, page, itemsPerPage, values);
+		return tempstream`${this.renderPagination(ctx, values)}
+			  ${this.renderFilters(ctx)}
+              ${items_promise.then((items) =>
+					this.renderListContainer(
+						ctx,
+						items.map((item) => this.renderItem(ctx, item))
+					)
+				)}`;
 	}
 
-	async renderPagination(ctx: BaseContext, props: PropsType) {
-		const totalIems = await this.getTotalPages(ctx, props);
-		const currentPage = props.page;
+	async renderPagination(
+		ctx: BaseContext,
+		values: Record<string, FormDataValue>
+	): Promise<FlatTemplatable> {
+		const { parsed: page } = await this.fields.page.getValue(ctx, values);
+		const { parsed: itemsPerPage } =
+			await this.fields.itemsPerPage.getValue(ctx, values);
+		const totalIems = await this.getTotalPages(ctx, itemsPerPage, values);
 
 		return tempstream/* HTML */ `<center>
-			${currentPage > 1
-				? this.renderPageButton(ctx, 1, "Pierwsza strona")
-				: ""}
-			${currentPage > 1
-				? this.renderPageButton(
-						ctx,
-						currentPage - 1,
-						"Poprzednia strona"
-				  )
+			${page > 1 ? this.renderPageButton(ctx, 1, "Pierwsza strona") : ""}
+			${page > 1
+				? this.renderPageButton(ctx, page - 1, "Poprzednia strona")
 				: ""}
 
 			<select onchange="if (this.value) Turbo.visit(this.value)">
-				${Array.from(
-					naturalNumbers(1, await this.getTotalPages(ctx, props))
-				).map(
+				${Array.from(naturalNumbers(1, totalIems)).map(
 					(n) => /* HTML */ `<option
 						value="${UrlWithNewParams(
 							ctx,
 							//eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 							this.propsParser.overwriteProp(ctx, {
 								page: n,
-							} as Partial<PropsType>)
+							} as Partial<Record<string, unknown>>)
 						)}"
-						${currentPage === n ? "selected" : ""}
+						${page === n ? "selected" : ""}
 					>
 						${n}
 					</option>`
 				)}
 			</select>
-			${currentPage < totalIems
-				? this.renderPageButton(ctx, currentPage + 1, "Następna strona")
+			${page < totalIems
+				? this.renderPageButton(ctx, page + 1, "Następna strona")
 				: ""}
-			${currentPage < totalIems
+			${page < totalIems
 				? this.renderPageButton(ctx, totalIems, "Ostatnia strona")
 				: ""}
 		</center>`;
@@ -149,31 +119,33 @@ ${this.getItems(ctx, parsed_props).then(({ items }) =>
 				//eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 				this.propsParser.overwriteProp(ctx, {
 					page,
-				} as Partial<PropsType>)
+				} as Partial<Record<string, unknown>>)
 			)}"
 			>${text}</a
 		>`;
 	}
 
-	renderFilters(
-		ctx: BaseContext,
-		parsed_props: PropsType, // parsed props don't include wrong values
-		raw_props: PropsType,
-		errors: PropsErrors<PropsType>
-	) {
+	async getFilterValues(ctx: BaseContext): Promise<Record<string, unknown>> {
+		const filter = {} as Record<string, unknown>;
+		const raw_values = this.extractRawValues(ctx);
+		for (const [fieldname, field] of Object.entries(this.filterFields)) {
+			// eslint-disable-next-line no-await-in-loop
+			const { parsed } = await field.getValue(ctx, raw_values);
+			filter[fieldname] = parsed;
+		}
+		return filter;
+	}
+
+	renderFilters(ctx: BaseContext): FlatTemplatable {
+		const values = this.extractRawValues(ctx);
 		return tempstream/* HTML */ `<form method="GET">
-			${this.propsParser.makeHiddenInputs(parsed_props, [
+			${makeHiddenInputs(ctx, this.fields, values, [
 				"page",
-				...this.filterFields.map((f) => f.name),
+				...Object.values(this.filterFields).map((f) => f.name),
 			])}
 			${this.filterControls.map((control) =>
 				// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-				control.render(ctx, this.filterFields, {
-					values: parsed_props,
-					raw_values: raw_props,
-					errors,
-					messages: [],
-				} as FormData)
+				control.render(ctx, values)
 			)}
 		</form>`;
 	}
@@ -181,32 +153,49 @@ ${this.getItems(ctx, parsed_props).then(({ items }) =>
 
 export abstract class SealiousItemListPage<
 	C extends Collection,
-	PageProps extends BaseListPageProps = BaseListPageProps
-> extends ListPage<CollectionItem<C>, PageProps> {
+	F extends typeof BaseListPageFields
+> extends ListPage<CollectionItem<C>, F> {
 	constructor(public collection: C) {
 		super();
 	}
 
-	async getTotalPages(ctx: BaseContext, props: PageProps) {
-		const { items } = await this.collection.list(ctx.$context).fetch();
-		return Math.ceil(items.length / props.itemsPerPage);
+	async getTotalPages(
+		ctx: BaseContext,
+		itemsPerPage: number
+	): Promise<number> {
+		const query = this.collection.list(ctx.$context);
+		await this.addFilter(ctx, query);
+		const { items } = await query.fetch();
+		return Math.ceil(items.length / itemsPerPage);
+	}
+
+	protected async addFilter(
+		ctx: BaseContext,
+		list: ItemList<C>
+	): Promise<void> {
+		const filters = await this.getFilterValues(ctx);
+		if (Object.keys(filters).length) {
+			list.filter(filters as Partial<ItemFields<C>>);
+		}
 	}
 
-	async getItems(ctx: BaseContext, props: PageProps) {
-		return {
-			items: (
-				await this.collection
-					.list(ctx.$context)
-					.paginate({ items: props.itemsPerPage, page: props.page })
-					.fetch()
-			).items,
-		};
+	async getItems(
+		ctx: BaseContext,
+		page: number,
+		itemsPerPage: number
+	): Promise<CollectionItem<C>[]> {
+		const query = this.collection.list(ctx.$context);
+		await this.addFilter(ctx, query);
+		const { items } = await query
+			.paginate({ items: itemsPerPage, page })
+			.fetch();
+		return items;
 	}
 
 	async renderItem(
 		_: BaseContext,
 		item: CollectionItem<C>
-	): Promise<Templatable> {
+	): Promise<FlatTemplatable> {
 		return `<div>${item.id}</div>`;
 	}
 

package/src/page/mountable.ts

@@ -0,0 +1,105 @@
+import Router from "@koa/router";
+import { FormControl } from "../forms/controls/form-control";
+import { BaseContext } from "koa";
+import { FlatTemplatable, Templatable, tempstream } from "tempstream";
+import { FormField } from "../forms/fields/field";
+import { FormData, FormDataValue, FormMessage } from "../forms/form";
+
+export type PageErrorMessage = { type: "access" | "internal"; message: string };
+
+export type Fields = Record<string, FormField<unknown>>;
+
+export abstract class Mountable<F extends Fields = Fields> {
+	fields: F;
+
+	constructor() {
+		if (!this.fields) this.fields = {} as F;
+	}
+
+	abstract controls: FormControl[];
+	abstract mount(router: Router, path: string): void;
+
+	abstract canAccess(
+		ctx: BaseContext
+	): Promise<{ canAccess: boolean; message: string }>;
+
+	abstract renderError(
+		ctx: BaseContext,
+		error: PageErrorMessage
+	): Promise<FlatTemplatable>;
+
+	abstract extractRawValues(ctx: BaseContext): Record<string, FormDataValue>;
+
+	// this one is meant to be overwritten
+	async validateValues(
+		ctx: BaseContext,
+		data: Record<string, FormDataValue>
+	): Promise<{ valid: boolean; error: string }> {
+		return {
+			valid: true,
+			error: "",
+		};
+	}
+
+	protected async validate(
+		ctx: BaseContext,
+		values: Record<string, FormDataValue>
+	): Promise<{
+		valid: boolean;
+		field_errors: Partial<Record<keyof Fields, string>>;
+		form_messages: FormMessage[];
+	}> {
+		const field_errors = {} as Record<keyof Fields, string>;
+		let valid = true;
+		const form_messages = [] as FormMessage[];
+		await Promise.all(
+			Object.entries(values)
+				.filter(([fieldname]) => fieldname in this.fields)
+				.map(async ([key]: [keyof F, FormDataValue]) => {
+					const field = this.fields[key];
+					const { valid: fieldvalid, message: fieldmessage } =
+						await field.getValue(ctx, values);
+					if (!fieldvalid) {
+						valid = false;
+						field_errors[field.name] = fieldmessage;
+					}
+				})
+		);
+		const formValidationResult = await this.validateValues(ctx, values);
+		if (!formValidationResult.valid) {
+			form_messages.push({
+				type: "error",
+				text: formValidationResult.error,
+			});
+			valid = false;
+		}
+		return { valid, field_errors, form_messages };
+	}
+
+	init(): void {
+		for (const [name, field] of Object.entries(this.fields)) {
+			field.init(name);
+		}
+	}
+
+	public renderControls(
+		ctx: BaseContext,
+		data: FormData<keyof Fields>
+	): FlatTemplatable {
+		return tempstream/* HTML */ `${this.controls.map((control) =>
+			control.render(ctx, data.raw_values, data.messages)
+		)}`;
+	}
+
+	public renderMessages(
+		_: BaseContext,
+		data: FormData<keyof Fields>
+	): FlatTemplatable {
+		return tempstream/* HTML */ `<div class="form-messages">
+			${data.messages.map(
+				(message) =>
+					`<div class="form-message form-message--${message.type}">${message.text}</div>`
+			)}
+		</div>`;
+	}
+}

package/src/page/page.ts

@@ -1,18 +1,20 @@
 import Router from "@koa/router";
 import { BaseContext } from "koa";
 
-import { Templatable, tempstream } from "tempstream";
+import { FlatTemplatable, Templatable, tempstream } from "tempstream";
+import { AllQueryParams } from "..";
+import { FormDataValue } from "../forms/form";
+import { Fields, Mountable, PageErrorMessage } from "./mountable";
+import { PagePropsParser } from "./props-parser";
 
-export type PageErrorMessage = { type: "access" | "internal"; message: string };
+export abstract class Page<
+	F extends Fields = Record<string, never>
+> extends Mountable<F> {
+	propsParser: PagePropsParser<Record<keyof Fields, unknown>> =
+		new AllQueryParams();
+	controls = [];
 
-export interface Mountable {
-	mount: (router: Router, path: string) => void;
-	canAccess: (ctx: BaseContext) => Promise<{ canAccess: boolean; message: string }>;
-	renderError(ctx: BaseContext, error: PageErrorMessage): Promise<Templatable>;
-}
-
-export abstract class Page implements Mountable {
-	mount(router: Router, path: string) {
+	mount(router: Router, path: string): void {
 		router.get(path, async (ctx) => {
 			ctx.body = await this.render(ctx);
 		});
@@ -23,9 +25,16 @@ export abstract class Page implements Mountable {
 		return { canAccess: true, message: "" };
 	}
 
-	async renderError(_: BaseContext, error: PageErrorMessage) {
+	async renderError(
+		_: BaseContext,
+		error: PageErrorMessage
+	): Promise<FlatTemplatable> {
 		return tempstream/* HTML */ `<div>${error.message}</div>`;
 	}
 
-	public abstract render(ctx: BaseContext): Promise<Templatable>;
+	public abstract render(ctx: BaseContext): Promise<FlatTemplatable>;
+
+	extractRawValues(ctx: BaseContext): Record<string, FormDataValue> {
+		return this.propsParser.decode(ctx);
+	}
 }

package/src/page/props-parser.ts

@@ -1,48 +1,19 @@
-import {
-	hasShape,
-	predicates,
-	Shape,
-	ShapeToType,
-} from "@sealcode/ts-predicates";
-
 import { BaseContext } from "koa";
 import merge from "merge";
+import { FormData, FormDataValue } from "..";
 import { BasePageProps } from "./list";
 
 export type EncodedProps = Record<string, unknown>;
 
-// the intention here is to sometime in the future be able to store multiple frames on one document, so props for each frame will be in a different namespace, and parsers are going to help with that
+// page props parser is only tasked with getting the raw props from *somewhere*
+// and being able to put new values back to that somewhere. Parsing to numbers
+// or any other exotic types is done by fields logic.
 
-function parseStringValues<TheShape extends Shape>(
-	shape: TheShape,
-	values: Record<string, string>
-): ShapeToType<TheShape> {
-	const result: Record<string, unknown> = {};
-	for (const [key, value] of Object.entries(values)) {
-		if (!(key in shape)) {
-			continue;
-		}
-		const predicate = shape[key];
-		if (predicate == predicates.number) {
-			result[key] = parseFloat(value);
-		} else {
-			result[key] = value;
-		}
-	}
-	// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-	return result as ShapeToType<TheShape>;
-}
-
-export abstract class PagePropsParser<PropsType extends BasePageProps> {
-	abstract decode(ctx: BaseContext): PropsType;
-	abstract encode(props: PropsType): EncodedProps;
+export abstract class PagePropsParser<PropsType> {
+	abstract decode(ctx: BaseContext): Record<string, FormDataValue>;
+	abstract encode(props: Record<string, FormData>): EncodedProps;
 	abstract getHTMLInputName(prop_name: string): string;
 
-	constructor(
-		public propsShape: Shape,
-		public defaultValues: Partial<PropsType>
-	) {}
-
 	overwriteProp(
 		ctx: BaseContext,
 		new_props: Partial<PropsType>
@@ -51,42 +22,13 @@ export abstract class PagePropsParser<PropsType extends BasePageProps> {
 		merge.recursive(result, this.decode(ctx), new_props);
 		return result;
 	}
-
-	makeHiddenInputs(values: PropsType, fields_to_skip: string[]): string {
-		return Object.entries(values)
-			.filter(([key]) => !fields_to_skip.includes(key))
-			.map(
-				([key, value]: [string, string | number]) =>
-					/* HTML */ `<input
-						type="hidden"
-						name="${key}"
-						value="${value}"
-					/>`
-			)
-			.join(" ");
-	}
-
-	getDefaultValue<Key extends keyof PropsType>(
-		key: Key
-	): PropsType[Key] | undefined {
-		return this.defaultValues[key];
-	}
 }
 
 export class AllQueryParams<
 	PropsType extends BasePageProps
 > extends PagePropsParser<PropsType> {
-	decode(ctx: BaseContext): PropsType {
-		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		const query = parseStringValues(this.propsShape, {
-			...this.defaultValues,
-			...ctx.query,
-		} as unknown as Record<string, string>);
-		if (!hasShape(this.propsShape, query)) {
-			throw new Error("Wrong props shape");
-		}
-		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		return query as PropsType;
+	decode(ctx: BaseContext): Record<string, FormDataValue> {
+		return ctx.query;
 	}
 
 	encode(props: PropsType): Record<string, unknown> {

package/src/templates/form.ts

@@ -7,43 +7,58 @@ export async function formTemplate(
 	const rel = curryImportPath(newfilefullpath);
 	return `import { BaseContext } from "koa";
 import {
+	CollectionField,
 	Form,
 	FormData,
-	FormHeader,
+	FormDataValue,
+	SimpleFormField,
 	SimpleInput,
-	FormField,
-    collectionFieldValidator,
 } from "@sealcode/sealgen";
-
+import html from "../html";
 import { Users } from "${rel("src/back/collections/collections")}";
-import html from "${rel("src/back/html")}";
 
 export const actionName = "${action_name}";
 
-export default new(class ${action_name}Form extends Form {
-	defaultSuccessMessage = "Pomyślnie utworzono użytkownika";
+const fields = {
+	email: new CollectionField(true, Users.fields.email),
+	password: new SimpleFormField(true),
+};
 
-	fields = [new FormField("email", true, collectionFieldValidator(Users.fields.email))];
+export default new (class ${action_name}Form extends Form<typeof fields> {
+	defaultSuccessMessage = "Formularz wypełniony poprawnie";
+	fields = fields;
 
 	controls = [
-		new FormHeader("Enter your email address"),
-		new SimpleInput("email", { label: "Your email", type: "email" }),
+		new SimpleInput(fields.email, { label: "Email:", type: "email" }),
+		new SimpleInput(fields.password, { label: "Password:", type: "password" }),
 	];
 
+	async validateValues(
+		ctx: BaseContext,
+		data: Record<string, FormDataValue>
+	): Promise<{ valid: boolean; error: string }> {
+		// just an example
+		const { parsed: email } = await this.fields.email.getValue(ctx, data);
+		const { parsed: password } = await this.fields.password.getValue(ctx, data);
+		if ((password || "").length > (email || "").length) {
+			return { valid: false, error: "Password cannot be longer than email" };
+		} else {
+			return { valid: true, error: "" };
+		}
+	}
+
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	async canAccess(_: BaseContext) {
 		return { canAccess: true, message: "" };
 	}
 
-	async onSubmit(ctx: BaseContext, values: Record<"email", string>) {
-		await ctx.$app.collections.users.create(ctx.$context, {
-			username: values.email,
-			...values,
-		});
+	async onSubmit() {
+		//noop
+		return;
 	}
 
-	async render(ctx: BaseContext, data: FormData, path: string) {
-		return html(ctx, "${action_name}", await super.render(ctx, data, path));
+	async render(ctx: BaseContext, data: FormData) {
+		return html(ctx, "${action_name}", await super.render(ctx, data));
 	}
 })();
 `;