@sealcode/sealgen 0.8.3 → 0.8.6

package/src/forms/controls/simple-input.ts

@@ -6,35 +6,49 @@ import { FormField } from "../fields/field";
 import { FormDataValue, FormMessage } from "../form";
 import { FormFieldControl } from "./controls";
 
-export class SimpleInput extends FormFieldControl {
+export type SimpleInputOptions = {
+	id?: string;
+	label?: string;
+	autocomplete?: boolean;
+	hide_errors?: boolean;
+	type?:
+		| "color"
+		| "date"
+		| "email"
+		| "file"
+		| "month"
+		| "number"
+		| "password"
+		| "search"
+		| "tel"
+		| "text"
+		| "time"
+		| "url"
+		| "week";
+	value?: string;
+	placeholder?: string;
+	readonly?: boolean;
+	step?: number;
+};
+
+export class SimpleInput<
+	ParsedValue,
+	Options extends SimpleInputOptions = SimpleInputOptions
+> extends FormFieldControl {
+	options: SimpleInputOptions;
 	constructor(
-		public field: FormField,
-		public options: {
-			id?: string;
-			label?: string;
-			autocomplete?: boolean;
-			hide_errors?: boolean;
-			type?:
-				| "color"
-				| "date"
-				| "email"
-				| "file"
-				| "month"
-				| "number"
-				| "password"
-				| "search"
-				| "tel"
-				| "text"
-				| "time"
-				| "url"
-				| "week";
-			value?: string;
-			placeholder?: string;
-			readonly?: boolean;
-			step?: number;
-		} = {}
+		public field: FormField<boolean, ParsedValue>,
+		options?: Options
 	) {
 		super([field]);
+		this.options = options || {};
+	}
+
+	async preInput(
+		_ctx: Context,
+		_data: Record<string, FormDataValue>
+	): Promise<FlatTemplatable> {
+		return "";
 	}
 
 	getType(): string {
@@ -60,7 +74,7 @@ export class SimpleInput extends FormFieldControl {
 		data: Record<string, FormDataValue>,
 		field_prefix: string,
 		form_id: string
-	): Promise<Record<string, string | true>> {
+	): Promise<Record<string, string | boolean>> {
 		const readonly = this.options.readonly || false;
 		const required = this.field.required;
 		const { parsed, raw, valid } = await this.field.getValue(ctx, data);
@@ -85,11 +99,15 @@ export class SimpleInput extends FormFieldControl {
 		]);
 	}
 
-	renderAttributes(attrs: Record<string, string | true>) {
+	renderAttributes(attrs: Record<string, string | boolean>) {
 		return Object.entries(attrs)
 			.map(([key, value]) => {
-				if (value === true) {
-					return key;
+				if (typeof value === "boolean") {
+					if (value) {
+						return key;
+					} else {
+						return "";
+					}
 				} else {
 					return `${key}="${attribute(value)}"`;
 				}
@@ -101,12 +119,21 @@ export class SimpleInput extends FormFieldControl {
 		return "";
 	}
 
+	async renderInput(
+		ctx: Context,
+		attributes_str: string,
+		data: Record<string, FormDataValue>
+	): Promise<FlatTemplatable> {
+		return `<input ${attributes_str} />`;
+	}
+
 	async render<Fields extends Record<string, FormField>>(
 		ctx: Context,
 		data: Record<string, FormDataValue>,
 		_messages: FormMessage[],
 		field_prefix: string,
-		form_id: string
+		form_id: string,
+		show_errors: boolean
 	): Promise<FlatTemplatable> {
 		const id = this.getID();
 		const label = this.getLabel();
@@ -121,19 +148,22 @@ export class SimpleInput extends FormFieldControl {
 		return inputWrapper(
 			[id, type, getRequiredClass(this.field.required)],
 			tempstream/* HTML */ `
-				<label for="${id}">${label}</label>
-				<input
-					${this.renderAttributes(
+				${label ? `<label for="${id}">${label}</label>` : ""}
+				${await this.preInput(ctx, data)}
+				${this.renderInput(
+					ctx,
+					this.renderAttributes(
 						await this.getInputAttributes(
 							ctx,
 							data,
 							field_prefix,
 							form_id
 						)
-					)}
-				/>
+					),
+					data
+				)}
 				${this.postInput(ctx)}
-				${~valid && !this.options.hide_errors
+				${~valid && !this.options.hide_errors && show_errors
 					? `<div class="input__error">${message}</div>`
 					: ""}
 			`

package/src/forms/controls/textarea.ts

@@ -5,36 +5,37 @@ import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
 import { FormField } from "../fields/field";
 import { FormDataValue } from "../form";
 import { FormFieldControl } from "./form-field-control";
+import { SimpleInput, SimpleInputOptions } from "./simple-input";
 
-export class Textarea extends FormFieldControl {
+export class Textarea<Required extends boolean> extends SimpleInput<
+	string | null
+> {
 	constructor(
-		public field: FormField,
-		public options: { label?: string; rows?: number; cols?: number } = {}
+		public field: FormField<boolean, string>,
+		public options: SimpleInputOptions & {
+			label?: string;
+			rows?: number;
+			cols?: number;
+			description?: string;
+		} = {}
 	) {
-		super([field]);
+		super(field, options);
 	}
 
-	async render(
+	renderDescription() {
+		return this.options.description
+			? /* HTML */ `<div class="form-input__description">
+					${this.options.description}
+			  </div>`
+			: "";
+	}
+
+	async renderInput(
 		ctx: Context,
+		attributes: string,
 		data: Record<string, FormDataValue>
-	): Promise<FlatTemplatable> {
-		const { raw } = await this.field.getValue(ctx, data);
-		const { name, required } = this.field;
-		return inputWrapper(
-			[name, getRequiredClass(required)],
-			/* HTML */ ` <label for="${name}"
-					>${this.options.label != undefined
-						? this.options.label
-						: name}</label
-				>
-				<textarea
-					name="${name}"
-					id="${name}"
-					rows="${this.options.rows || 5}"
-					cols="${this.options.cols || 33}"
-				>
-${attribute((raw || "").toString())}</textarea
-				>`
-		);
+	) {
+		const { parsed: value } = await this.field.getValue(ctx, data);
+		return /* HTML */ `<textarea ${attributes}>${value}</textarea>`;
 	}
 }

package/src/forms/fields/enum-multiple.ts

@@ -37,7 +37,9 @@ export class EnumMultipleField<
 		_: Context,
 		value: FormDataValue
 	): Promise<FieldParseResult<string[]>> {
-		if (is(value, predicates.array(predicates.string))) {
+		if (is(value, predicates.string)) {
+			return { parsable: true, parsed_value: [value], error: null };
+		} else if (is(value, predicates.array(predicates.string))) {
 			return {
 				parsable: true,
 				parsed_value: value,

package/src/forms/fields/field.ts

@@ -2,7 +2,6 @@ import { Predicate, predicates } from "@sealcode/ts-predicates";
 import { Context } from "koa";
 import { t } from "../../utils/translate";
 import { FormDataValue } from "../form";
-import { SimpleFormField } from "./simple-form-field";
 
 export type FormFieldValidationResponse = { valid: boolean; message: string };
 
@@ -57,7 +56,7 @@ export abstract class FormField<
 	predicate: Predicate = predicates.unknown;
 	mapToFilter: (parsed: ParsedValue) => unknown = (value) => value;
 
-	init(fieldname: string): void {
+	async init(fieldname: string): Promise<void> {
 		this.name = fieldname;
 	}
 
@@ -145,6 +144,15 @@ export abstract class FormField<
 		this.mapToFilter = fn;
 		return this;
 	}
+
+	//return undefined here to delete a value
+	async getDatabaseValue(
+		ctx: Context,
+		data: Record<string, FormDataValue>
+	): Promise<unknown> {
+		const { parsed } = await this.getValue(ctx, data);
+		return parsed;
+	}
 }
 
 export * from "./simple-form-field";
@@ -158,3 +166,5 @@ export * from "./enum";
 export * from "./boolean";
 export * from "./enum-multiple";
 export * from "./existing-sealious-value";
+export * from "./file";
+export * from "./multiple-files";

package/src/forms/fields/file.ts

@@ -0,0 +1,86 @@
+import {
+	hasField,
+	hasFieldOfType,
+	hasShape,
+	is,
+	predicates,
+} from "@sealcode/ts-predicates";
+import { Context } from "koa";
+import { File as SealiousFile } from "sealious";
+import { FormDataValue } from "../form";
+import { FieldParseResult, FormField } from "./field";
+
+export type FileContainer = {
+	old: SealiousFile | null;
+	new: SealiousFile | null;
+};
+
+export class File<Required extends boolean> extends FormField<
+	Required,
+	FileContainer
+> {
+	async parse(
+		ctx: Context,
+		raw_value: FormDataValue
+	): Promise<FieldParseResult<FileContainer>> {
+		let result;
+		if (
+			raw_value instanceof SealiousFile ||
+			(is(raw_value, predicates.object) &&
+				hasShape(
+					{
+						filename: predicates.string,
+						id: predicates.string,
+					},
+					raw_value
+				) &&
+				raw_value.id)
+		) {
+			const file = await SealiousFile.fromID(
+				ctx.$app,
+				raw_value.id as string
+			);
+			result = {
+				parsed_value: { old: file, new: null },
+				error: null,
+				parsable: true as true,
+			};
+		} else if (!is(raw_value, predicates.object)) {
+			result = {
+				parsed_value: null,
+				error: "Expected a field with old.id:string, old.filename:string and new?:File",
+				parsable: false as false,
+			};
+		} else {
+			const old_file =
+				hasFieldOfType(raw_value, "old", predicates.object) &&
+				hasShape(
+					{ id: predicates.string, filename: predicates.string },
+					raw_value.old
+				) &&
+				raw_value.old.id
+					? await SealiousFile.fromID(ctx.$app, raw_value.old.id)
+					: null;
+			const new_file =
+				hasField("new", raw_value) &&
+				raw_value.new instanceof SealiousFile
+					? raw_value.new
+					: null;
+			result = {
+				parsable: true as true,
+				error: null,
+				parsed_value: { old: old_file, new: new_file },
+			};
+		}
+		return result;
+	}
+
+	async getDatabaseValue(ctx: Context, data: Record<string, FormDataValue>) {
+		const { parsed } = await this.getValue(ctx, data);
+		return parsed.new || undefined;
+	}
+
+	getEmptyValue() {
+		return { old: null, new: null };
+	}
+}

package/src/forms/fields/multiple-files.ts

@@ -0,0 +1,20 @@
+import { Context } from "koa";
+import { FieldTypes as SealiousFieldTypes } from "sealious";
+import { FormField } from "./field";
+
+export class MultipleFiles extends FormField<false> {
+	constructor(
+		public collection_field: SealiousFieldTypes.ReverseSingleReference,
+		public getItemId: (ctx: Context) => Promise<string> | string
+	) {
+		super(false);
+	}
+
+	getEmptyValue() {
+		return undefined;
+	}
+
+	async parse() {
+		return <const>{ parsed_value: undefined, parsable: true, error: null }; // the control is supposed to do the heavy lifting here
+	}
+}

package/src/forms/fields/number.ts

@@ -7,7 +7,15 @@ export class NumberField<
 	DefaultValue extends number | null = null,
 	Required extends boolean = boolean
 > extends FormField<Required, number | DefaultValue> {
-	constructor(required: Required, public default_value: DefaultValue) {
+	constructor(
+		required: Required,
+		public default_value: DefaultValue,
+		public options: Partial<{
+			max: number;
+			min: number;
+			decimalDigits: number;
+		}> = {}
+	) {
 		super(required);
 	}
 
@@ -36,9 +44,16 @@ export class NumberField<
 				parseFloat(value).toString() == value.trim()) ||
 			is(value, predicates.number)
 		) {
+			console.log(this.name, this.options.decimalDigits);
 			return {
 				parsable: true,
-				parsed_value: parseFloat(value.toString()),
+				parsed_value: this.options.decimalDigits
+					? parseFloat(
+							parseFloat(value.toString()).toFixed(
+								this.options.decimalDigits
+							)
+					  )
+					: parseFloat(value.toString()),
 				error: null,
 			};
 		} else {

package/src/forms/form.ts

@@ -1,4 +1,6 @@
 import { Context } from "koa";
+import { randomUUID } from "crypto";
+import { File as SealiousFile } from "sealious";
 import Router from "@koa/router";
 import { FlatTemplatable, tempstream } from "tempstream";
 import {
@@ -7,7 +9,7 @@ import {
 	is,
 	predicates,
 } from "@sealcode/ts-predicates";
-import { FieldsToShape, FormField } from "./fields/field";
+import { FormField } from "./fields/field";
 import {
 	Fields,
 	MountableWithFields,
@@ -17,7 +19,8 @@ import {
 export type FormDataPrimitive = string | string[] | number | undefined;
 export type FormDataValue =
 	| FormDataPrimitive
-	| Record<string, FormDataPrimitive>;
+	| Record<string, FormDataPrimitive>
+	| SealiousFile;
 
 export type FieldValueType<F extends FormField> = F extends FormField<infer R>
 	? R
@@ -48,6 +51,7 @@ export abstract class Form<
 	submitButtonText = "Wyślij";
 	action = "./";
 	useTurbo = true;
+	form_id = randomUUID();
 
 	async canAccess(
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -72,16 +76,22 @@ export abstract class Form<
 		/>`;
 	}
 
-	async render(ctx: Context, data: FormData): Promise<FlatTemplatable> {
-		return tempstream/* HTML */ `${this.makeOpenFormTag(ctx)}
-		${!this.controls.some((control) => control.role == "messages")
-			? this.renderMessages(ctx, data)
-			: ""}
-		${this.renderControls(ctx, data)}
-		${this.controls.some((control) => control.role == "submit")
-			? ""
-			: this.makeSubmitButton()}
-		${this.makeCloseFormTag()}`;
+	async render(
+		ctx: Context,
+		data: FormData,
+		show_field_errors: boolean
+	): Promise<FlatTemplatable> {
+		return tempstream/* HTML */ `<div class="form-container">
+			${this.makeOpenFormTag(ctx)}
+			${!this.controls.some((control) => control.role == "messages")
+				? this.renderMessages(ctx, data)
+				: ""}
+			${this.renderControls(ctx, data, show_field_errors)}
+			${this.controls.some((control) => control.role == "submit")
+				? ""
+				: this.makeSubmitButton()}
+			${this.makeCloseFormTag()}
+		</div>`;
 	}
 
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -90,30 +100,37 @@ export abstract class Form<
 	}
 
 	public makeOpenFormTag(ctx: Context): FlatTemplatable {
-		return tempstream`<form method="POST" action="${
-			this.action
-		}" class="${this.makeFormClasses(ctx).then((classes) =>
-			classes.join(" ")
-		)}" ${this.useTurbo ? "" : `data-turbo="false"`}>`;
+		return tempstream`<form enctype="multipart/form-data" method="POST" id="${
+			this.form_id
+		}" action="${this.action}" class="${this.makeFormClasses(ctx).then(
+			(classes) => classes.join(" ")
+		)}" ${
+			this.useTurbo ? "" : `data-turbo="false"`
+		}></form><div class="form">`;
 	}
 
 	public makeCloseFormTag(): FlatTemplatable {
-		return `</form>`;
+		return `</div>`;
 	}
 
 	public async onValuesInvalid(
 		ctx: Context,
-		form_messages: FormMessage[]
+		form_messages: FormMessage[],
+		_field_errors: Partial<Record<keyof Fields, string>>
 	): Promise<FormReaction> {
 		const messages = form_messages.length
 			? form_messages
 			: [<const>{ type: "error", text: "Some fields are invalid" }];
 		return {
 			action: "stay",
-			content: await this.render(ctx, {
-				raw_values: this.extractRawValues(ctx),
-				messages,
-			}),
+			content: await this.render(
+				ctx,
+				{
+					raw_values: await this.extractRawValues(ctx),
+					messages,
+				},
+				"show_field_errors" && true
+			),
 			messages,
 		};
 	}
@@ -133,10 +150,14 @@ export abstract class Form<
 		const messages = [<const>{ type: "error", text: error_message }];
 		return {
 			action: "stay",
-			content: await this.render(ctx, {
-				raw_values: data.raw_values,
-				messages: [],
-			}),
+			content: await this.render(
+				ctx,
+				{
+					raw_values: data.raw_values,
+					messages: [],
+				},
+				"show_field_errors" && true
+			),
 			messages,
 		};
 	}
@@ -156,32 +177,41 @@ export abstract class Form<
 		];
 		return {
 			action: "stay",
-			content: await this.render(ctx, {
-				raw_values: data.raw_values,
-				messages,
-			}),
+			content: await this.render(
+				ctx,
+				{
+					raw_values: data.raw_values,
+					messages,
+				},
+				"show_field_errors" && false
+			),
 			messages,
 		};
 	}
 
+	async getRawValuesOnSuccess(ctx: Context) {
+		return this.extractRawValues(ctx);
+	}
+
 	async handlePost(ctx: Context): Promise<FormReaction> {
-		const { valid, form_messages } = await this.validate(
+		const raw_values = await this.extractRawValues(ctx);
+		const { valid, form_messages, field_errors } = await this.validate(
 			ctx,
-			this.extractRawValues(ctx)
+			raw_values
 		);
 		if (!valid) {
-			return this.onValuesInvalid(ctx, form_messages);
+			return this.onValuesInvalid(ctx, form_messages, field_errors);
 		}
 		try {
 			ctx.status = 303;
 			const result = await this.onSubmit(ctx, {
-				raw_values: this.extractRawValues(ctx),
+				raw_values,
 				messages: [],
 			});
 			return this.onSuccess(
 				ctx,
 				{
-					raw_values: this.extractRawValues(ctx),
+					raw_values: await this.getRawValuesOnSuccess(ctx),
 					messages: [],
 				},
 				result
@@ -200,7 +230,7 @@ export abstract class Form<
 			return this.onError(
 				ctx,
 				{
-					raw_values: this.extractRawValues(ctx),
+					raw_values,
 					messages: [
 						{
 							type: "error",
@@ -228,10 +258,14 @@ export abstract class Form<
 		});
 		router.get(path, async (ctx) => {
 			ctx.type = "html";
-			ctx.body = await this.render(ctx, {
-				raw_values: this.extractRawValues(ctx),
-				messages: [],
-			});
+			ctx.body = await this.render(
+				ctx,
+				{
+					raw_values: await this.extractRawValues(ctx),
+					messages: [],
+				},
+				"show_field_errors" && false
+			);
 		});
 		router.post(path, async (ctx) => {
 			const reaction = await this.handlePost(ctx);
@@ -243,9 +277,17 @@ export abstract class Form<
 				ctx.redirect(reaction.url);
 			}
 		});
+		const subrouter = new Router(); // for use with other subroutes that individual controls might register
+		for (const control of this.controls) {
+			control.mount(subrouter);
+		}
+
+		router.use(path, subrouter.routes(), subrouter.allowedMethods());
 	}
 
-	extractRawValues(ctx: Context): Record<string, FormDataValue> {
+	async extractRawValues(
+		ctx: Context
+	): Promise<Record<string, FormDataValue>> {
 		return ctx.$body;
 	}
 }

package/src/forms/forms.scss

@@ -22,8 +22,11 @@
 	flex-flow: row nowrap;
 	align-items: center;
 	& > input[type="checkbox"] {
-		margin-right: 10px;
 		width: 15px;
 		height: 15px;
+
+		+ label {
+			padding-left: 10px;
+		}
 	}
 }