dees-catalog/ts_web/elements/dees-form.ts

206 lines
5.4 KiB
TypeScript
Raw Normal View History

2023-10-23 14:13:02 +00:00
import {
customElement,
html,
type TemplateResult,
DeesElement,
type CSSResult,
} from '@design.estate/dees-element';
2023-08-07 17:13:29 +00:00
import * as domtools from '@design.estate/dees-domtools';
2022-03-18 18:40:28 +00:00
import { DeesInputCheckbox } from './dees-input-checkbox.js';
import { DeesInputText } from './dees-input-text.js';
import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
import { DeesInputRadio } from './dees-input-radio.js';
import { DeesFormSubmit } from './dees-form-submit.js';
2023-10-17 18:07:45 +00:00
import { DeesTable } from './dees-table.js';
2023-10-23 14:13:02 +00:00
import { demoFunc } from './dees-form.demo.js';
import { DeesInputIban } from './dees-input-iban.js';
2021-08-19 22:25:14 +00:00
2023-08-19 09:47:45 +00:00
// Unified set for form input types
const FORM_INPUT_TYPES = [
DeesInputCheckbox,
2023-10-23 14:13:02 +00:00
DeesInputIban,
2023-08-19 09:47:45 +00:00
DeesInputText,
DeesInputQuantitySelector,
2023-10-17 18:07:45 +00:00
DeesInputRadio,
DeesTable,
2023-08-19 09:47:45 +00:00
];
2023-10-23 14:13:02 +00:00
export type TFormInputElement =
| DeesInputCheckbox
| DeesInputIban
| DeesInputText
| DeesInputQuantitySelector
| DeesInputRadio
| DeesTable<any>;
2020-09-13 16:24:48 +00:00
2021-02-13 21:52:36 +00:00
declare global {
interface HTMLElementTagNameMap {
'dees-form': DeesForm;
}
}
2020-09-13 16:24:48 +00:00
@customElement('dees-form')
2021-08-19 22:25:14 +00:00
export class DeesForm extends DeesElement {
2023-10-23 14:13:02 +00:00
public static demo = demoFunc;
2020-09-13 16:24:48 +00:00
public name: string = 'myform';
2023-10-23 15:26:03 +00:00
public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
2023-08-19 16:56:32 +00:00
public readyDeferred = domtools.plugins.smartpromise.defer();
2020-09-13 16:24:48 +00:00
public render(): TemplateResult {
return html`
<style>
:host {
display: contents;
}
</style>
<slot></slot>
`;
}
2023-04-12 00:47:45 +00:00
public async firstUpdated() {
2023-08-19 09:47:45 +00:00
const formChildren = this.getFormElements();
this.updateRequiredStatus();
2021-08-19 22:25:14 +00:00
for (const child of formChildren) {
2023-08-19 09:47:45 +00:00
child.changeSubject.subscribe(async () => {
const valueObject = await this.collectFormData();
2021-08-19 22:25:14 +00:00
this.changeSubject.next(valueObject);
console.log(valueObject);
2023-08-19 09:47:45 +00:00
this.updateRequiredStatus();
2021-08-25 11:51:55 +00:00
});
2021-08-19 22:25:14 +00:00
}
2023-08-19 09:47:45 +00:00
await this.addBehaviours();
2023-08-19 16:56:32 +00:00
this.readyDeferred.resolve();
2021-08-19 22:25:14 +00:00
}
2020-09-13 16:24:48 +00:00
2023-08-19 09:47:45 +00:00
public getFormElements(): Array<TFormInputElement> {
2023-10-23 14:13:02 +00:00
return Array.from(this.children).filter((child) =>
2023-08-19 09:47:45 +00:00
FORM_INPUT_TYPES.includes(child.constructor as any)
) as unknown as TFormInputElement[];
2021-08-19 22:25:14 +00:00
}
2020-09-13 16:24:48 +00:00
2023-08-19 09:47:45 +00:00
public getSubmitButton(): DeesFormSubmit | undefined {
2023-10-23 14:13:02 +00:00
return Array.from(this.children).find(
(child) => child instanceof DeesFormSubmit
2023-08-19 09:47:45 +00:00
) as DeesFormSubmit;
2021-08-26 19:30:35 +00:00
}
2023-08-19 09:47:45 +00:00
public async updateRequiredStatus() {
2021-08-27 12:02:37 +00:00
console.log('checking the required status.');
2021-08-25 11:51:55 +00:00
let requiredOK = true;
2023-08-19 09:47:45 +00:00
for (const childArg of this.getFormElements()) {
2021-08-25 11:51:55 +00:00
if (childArg.required && !childArg.value) {
requiredOK = false;
}
}
2021-09-15 11:10:28 +00:00
if (this.getSubmitButton()) {
this.getSubmitButton().disabled = !requiredOK;
}
2021-08-25 11:51:55 +00:00
}
2024-02-03 10:26:15 +00:00
/**
* collects the form data
* @returns
*/
2023-08-19 09:47:45 +00:00
public async collectFormData() {
const children = this.getFormElements();
2023-10-23 14:13:02 +00:00
const valueObject: { [key: string]: string | number | boolean | any[] } = {};
2021-08-19 22:25:14 +00:00
for (const child of children) {
2023-08-28 07:49:51 +00:00
if (!child.key) {
console.log(`form element with label "${child.label}" has no key. skipping.`);
}
2021-08-19 22:25:14 +00:00
valueObject[child.key] = child.value;
}
return valueObject;
}
2020-09-13 16:24:48 +00:00
2021-08-19 22:25:14 +00:00
public async gatherAndDispatch() {
2023-08-19 09:47:45 +00:00
const valueObject = await this.collectFormData();
2020-09-13 16:24:48 +00:00
const formDataEvent = new CustomEvent('formData', {
detail: {
2021-08-27 12:02:37 +00:00
data: valueObject,
2020-09-13 16:24:48 +00:00
},
2021-08-27 12:02:37 +00:00
bubbles: true,
2020-09-13 16:24:48 +00:00
});
this.dispatchEvent(formDataEvent);
2021-08-27 12:02:37 +00:00
console.log('dispatched data:');
2021-08-25 11:51:55 +00:00
console.log(valueObject);
2020-09-13 16:24:48 +00:00
}
2021-08-26 19:30:35 +00:00
2021-08-27 12:02:37 +00:00
public setStatus(
visualStateArg: 'normal' | 'pending' | 'error' | 'success',
textStateArg: string
) {
2023-08-19 09:47:45 +00:00
const inputChildren = this.getFormElements();
2021-08-26 19:30:35 +00:00
const submitButton = this.getSubmitButton();
2021-08-27 12:02:37 +00:00
switch (visualStateArg) {
2021-09-14 22:59:50 +00:00
case 'normal':
submitButton.disabled = false;
submitButton.status = 'normal';
for (const inputChild of inputChildren) {
inputChild.disabled = false;
}
break;
2021-08-27 11:38:08 +00:00
case 'pending':
2021-08-26 19:30:35 +00:00
submitButton.disabled = true;
2021-08-27 11:38:08 +00:00
submitButton.status = 'pending';
for (const inputChild of inputChildren) {
inputChild.disabled = true;
}
break;
case 'success':
submitButton.disabled = true;
submitButton.status = 'success';
2021-08-26 19:30:35 +00:00
for (const inputChild of inputChildren) {
inputChild.disabled = true;
}
break;
2021-08-27 12:02:37 +00:00
case 'error':
submitButton.disabled = true;
submitButton.status = 'error';
for (const inputChild of inputChildren) {
inputChild.disabled = true;
}
break;
2021-08-26 19:30:35 +00:00
}
submitButton.text = textStateArg;
}
2023-04-12 00:47:45 +00:00
2023-09-01 12:21:15 +00:00
/**
* resets the form
*/
reset() {
const inputChildren = this.getFormElements();
const submitButton = this.getSubmitButton();
for (const inputChild of inputChildren) {
inputChild.value = null;
}
this.setStatus('normal', 'Submit');
}
2023-08-19 09:47:45 +00:00
public async addBehaviours() {
// Use event delegation
this.addEventListener('keydown', (event: KeyboardEvent) => {
const target = event.target as DeesElement;
if (!FORM_INPUT_TYPES.includes(target.constructor as any)) return;
if (event.key === 'Enter') {
const children = this.getFormElements();
const currentIndex = children.indexOf(target as any);
if (currentIndex < children.length - 1) {
children[currentIndex + 1].focus();
} else {
target.blur();
this.getSubmitButton()?.focus();
2023-04-12 00:47:45 +00:00
}
2023-08-19 09:47:45 +00:00
}
});
2023-04-12 00:47:45 +00:00
}
2021-08-27 12:02:37 +00:00
}