diff --git a/ts_web/elements/dees-form.ts b/ts_web/elements/dees-form.ts index 800cece..ff1d40e 100644 --- a/ts_web/elements/dees-form.ts +++ b/ts_web/elements/dees-form.ts @@ -7,7 +7,9 @@ import { DeesInputRadio } from './dees-input-radio'; import * as domtools from '@designestate/dees-domtools'; import { DeesFormSubmit } from './dees-form-submit'; -export type TFormElement = Array; +export type TFormElement = Array< + DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio +>; declare global { interface HTMLElementTagNameMap { @@ -18,18 +20,25 @@ declare global { @customElement('dees-form') export class DeesForm extends DeesElement { public static demo = () => html` - { - const form: DeesForm = eventArg.currentTarget; - form.setStatus('pending', 'authenticating...'); - await domtools.plugins.smartdelay.delayFor(1000); - form.setStatus('success', 'authenticated!'); - }}> + { + const form: DeesForm = eventArg.currentTarget; + form.setStatus('pending', 'authenticating...'); + await domtools.plugins.smartdelay.delayFor(1000); + form.setStatus('success', 'authenticated!'); + }} + > - + Submit - `; + `; public name: string = 'myform'; public changeSubject = new domtools.rxjs.Subject(); @@ -61,9 +70,13 @@ export class DeesForm extends DeesElement { public getFormChildren() { const children: Array = this.children as any; const formChildren: TFormElement = []; - + for (const child of children) { - if (child instanceof DeesInputCheckbox || child instanceof DeesInputText || child instanceof DeesInputQuantitySelector) { + if ( + child instanceof DeesInputCheckbox || + child instanceof DeesInputText || + child instanceof DeesInputQuantitySelector + ) { formChildren.push(child); } } @@ -74,7 +87,7 @@ export class DeesForm extends DeesElement { const children: Array = this.children as any; let submitButton: DeesFormSubmit; for (const childArg of children) { - if(childArg instanceof DeesFormSubmit) { + if (childArg instanceof DeesFormSubmit) { submitButton = childArg; } } @@ -82,9 +95,8 @@ export class DeesForm extends DeesElement { } public async checkRequiredStatus() { - console.log('checking the required status.') - - + console.log('checking the required status.'); + let requiredOK = true; for (const childArg of this.getFormChildren()) { if (childArg.required && !childArg.value) { @@ -96,7 +108,7 @@ export class DeesForm extends DeesElement { public async gatherData() { const children = this.getFormChildren(); - const valueObject: { [key: string]: string | number | boolean} = {}; + const valueObject: { [key: string]: string | number | boolean } = {}; for (const child of children) { valueObject[child.key] = child.value; } @@ -107,20 +119,23 @@ export class DeesForm extends DeesElement { const valueObject = await this.gatherData(); const formDataEvent = new CustomEvent('formData', { detail: { - data: valueObject + data: valueObject, }, - bubbles: true + bubbles: true, }); this.dispatchEvent(formDataEvent); - console.log('dispatched data:') + console.log('dispatched data:'); console.log(valueObject); } - public setStatus (visualStateArg: 'normal' | 'pending' | 'error' | 'success', textStateArg: string) { + public setStatus( + visualStateArg: 'normal' | 'pending' | 'error' | 'success', + textStateArg: string + ) { const inputChildren = this.getFormChildren(); const submitButton = this.getSubmitButton(); - switch(visualStateArg) { + switch (visualStateArg) { case 'pending': submitButton.disabled = true; submitButton.status = 'pending'; @@ -135,9 +150,15 @@ export class DeesForm extends DeesElement { inputChild.disabled = true; } break; + case 'error': + submitButton.disabled = true; + submitButton.status = 'error'; + for (const inputChild of inputChildren) { + inputChild.disabled = true; + } + break; } submitButton.text = textStateArg; - } -} \ No newline at end of file +}