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

174 lines
4.9 KiB
TypeScript
Raw Normal View History

2021-08-19 22:25:14 +00:00
import { customElement, html, TemplateResult, DeesElement } from '@designestate/dees-element';
import * as domtools from '@designestate/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';
2021-08-19 22:25:14 +00:00
2021-08-27 12:02:37 +00:00
export type TFormElement = Array<
DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio
>;
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 {
2020-09-13 16:24:48 +00:00
public static demo = () => html`
2021-08-27 12:02:37 +00:00
<dees-form
style="display: block; margin:auto; max-width: 500px; padding: 20px"
@formData=${async (eventArg) => {
const form: DeesForm = eventArg.currentTarget;
form.setStatus('pending', 'authenticating...');
await domtools.plugins.smartdelay.delayFor(1000);
form.setStatus('success', 'authenticated!');
}}
>
2021-08-25 11:51:55 +00:00
<dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
<dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
2021-08-27 12:02:37 +00:00
<dees-input-checkbox
.required="${true}"
key="hello3"
label="another text"
></dees-input-checkbox>
2020-09-13 16:24:48 +00:00
<dees-form-submit>Submit</dees-form-submit>
2020-12-09 23:05:13 +00:00
</dees-form>
2021-08-27 12:02:37 +00:00
`;
2020-09-13 16:24:48 +00:00
public name: string = 'myform';
2021-08-19 22:25:14 +00:00
public changeSubject = new domtools.rxjs.Subject();
2020-09-13 16:24:48 +00:00
public render(): TemplateResult {
return html`
<style>
:host {
display: contents;
}
</style>
<slot></slot>
`;
}
2021-08-19 22:25:14 +00:00
public firstUpdated() {
const formChildren = this.getFormChildren();
2021-08-25 11:51:55 +00:00
this.checkRequiredStatus();
2021-08-19 22:25:14 +00:00
for (const child of formChildren) {
child.changeSubject.subscribe(async (elementArg: TFormElement) => {
const valueObject = await this.gatherData();
this.changeSubject.next(valueObject);
console.log(valueObject);
2021-08-25 11:51:55 +00:00
this.checkRequiredStatus();
});
2021-08-19 22:25:14 +00:00
}
}
2020-09-13 16:24:48 +00:00
2021-08-19 22:25:14 +00:00
public getFormChildren() {
const children: Array<DeesElement> = this.children as any;
const formChildren: TFormElement = [];
2021-08-27 12:02:37 +00:00
2020-09-13 16:24:48 +00:00
for (const child of children) {
2021-08-27 12:02:37 +00:00
if (
child instanceof DeesInputCheckbox ||
child instanceof DeesInputText ||
child instanceof DeesInputQuantitySelector
) {
2021-08-19 22:25:14 +00:00
formChildren.push(child);
2020-09-13 16:24:48 +00:00
}
}
2021-08-19 22:25:14 +00:00
return formChildren;
}
2020-09-13 16:24:48 +00:00
2021-08-26 19:30:35 +00:00
public getSubmitButton() {
2021-08-25 11:51:55 +00:00
const children: Array<DeesElement> = this.children as any;
let submitButton: DeesFormSubmit;
for (const childArg of children) {
2021-08-27 12:02:37 +00:00
if (childArg instanceof DeesFormSubmit) {
2021-08-25 11:51:55 +00:00
submitButton = childArg;
}
}
2021-08-26 19:30:35 +00:00
return submitButton;
}
public async checkRequiredStatus() {
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;
for (const childArg of this.getFormChildren()) {
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
}
2021-08-19 22:25:14 +00:00
public async gatherData() {
const children = this.getFormChildren();
2021-08-27 12:02:37 +00:00
const valueObject: { [key: string]: string | number | boolean } = {};
2021-08-19 22:25:14 +00:00
for (const child of children) {
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() {
const valueObject = await this.gatherData();
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
) {
2021-08-26 19:30:35 +00:00
const inputChildren = this.getFormChildren();
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;
}
2021-08-27 12:02:37 +00:00
}