zontent/frontend/components/SchemaEditor/view.ts

import {
	MaybePersistedSchema,
	ValidateSchemaResult,
	validateSchema,
} from "../../../common/schema.ts";
import { swel } from "../../deps/swel.ts";
import { Dispatch } from "../../state/lib/store.ts";
import { CmpPaintComponent, Paint } from "../component.ts";
import { TextInput } from "../lib/input/TextInput.ts";
import { Validated } from "../lib/input/Validated.ts";
import { Fields } from "./Fields.ts";
import { Action, setName, addField } from "./actions.ts";

export type State = {
	schema: MaybePersistedSchema;
	errors: ValidateSchemaResult;
};

export class SchemaEditor extends CmpPaintComponent<State> {
	private nameInput: Validated<string, TextInput>;
	private fields: Fields;
	private container: HTMLDivElement;

	constructor(dispatch: Dispatch<Action>) {
		super();

		this.nameInput = new Validated(
			new TextInput({
				onInput: (s) => dispatch(setName(s)),
			}),
		);

		const addFieldBtn = swel(
			"button",
			{
				on: {
					click: () => {
						dispatch(addField());
					},
				},
			},
			"Add field",
		);

		this.fields = new Fields(dispatch);

		this.container = swel("div", { className: "schema-editor" }, [
			this.nameInput.el,
			this.fields.el,
			addFieldBtn,
		]);
	}

	get el() {
		return this.container;
	}

	paint_: Paint<State> = (cur) => {
		this.nameInput.paint({
			model: cur.schema.name,
			error: cur.errors.name?.[0],
		});

		const fields = cur.schema.fields.map((f, i) => ({
			field: f,
			errors: cur.errors.fields?.[i],
		}));

		this.fields.paint(fields);
	};
}