110 lines
3.3 KiB
TypeScript
110 lines
3.3 KiB
TypeScript
import { customElement, html, TemplateResult, DeesElement } from '@designestate/dees-element';
|
||
|
||
import { DeesInputCheckbox } from './dees-input-checkbox';
|
||
import { DeesInputText } from './dees-input-text';
|
||
import { DeesInputQuantitySelector } from './dees-input-quantityselector';
|
||
import { DeesInputRadio } from './dees-input-radio';
|
||
import * as domtools from '@designestate/dees-domtools';
|
||
import { DeesFormSubmit } from './dees-form-submit';
|
||
|
||
export type TFormElement = Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio>;
|
||
|
||
declare global {
|
||
interface HTMLElementTagNameMap {
|
||
'dees-form': DeesForm;
|
||
}
|
||
}
|
||
|
||
@customElement('dees-form')
|
||
export class DeesForm extends DeesElement {
|
||
public static demo = () => html`
|
||
<dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px">
|
||
<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>
|
||
<dees-input-checkbox .required="${true}" key="hello3" label="another text"></dees-input-checkbox>
|
||
<dees-form-submit>Submit</dees-form-submit>
|
||
</dees-form>
|
||
`;
|
||
|
||
public name: string = 'myform';
|
||
public changeSubject = new domtools.rxjs.Subject();
|
||
|
||
public render(): TemplateResult {
|
||
return html`
|
||
<style>
|
||
:host {
|
||
display: contents;
|
||
}
|
||
</style>
|
||
<slot></slot>
|
||
`;
|
||
}
|
||
|
||
public firstUpdated() {
|
||
const formChildren = this.getFormChildren();
|
||
this.checkRequiredStatus();
|
||
for (const child of formChildren) {
|
||
child.changeSubject.subscribe(async (elementArg: TFormElement) => {
|
||
const valueObject = await this.gatherData();
|
||
this.changeSubject.next(valueObject);
|
||
console.log(valueObject);
|
||
this.checkRequiredStatus();
|
||
});
|
||
}
|
||
}
|
||
|
||
public getFormChildren() {
|
||
const children: Array<DeesElement> = this.children as any;
|
||
const formChildren: TFormElement = [];
|
||
|
||
for (const child of children) {
|
||
if (child instanceof DeesInputCheckbox || child instanceof DeesInputText || child instanceof DeesInputQuantitySelector) {
|
||
formChildren.push(child);
|
||
}
|
||
}
|
||
return formChildren;
|
||
}
|
||
|
||
public async checkRequiredStatus() {
|
||
console.log('checking the required status.')
|
||
const children: Array<DeesElement> = this.children as any;
|
||
let submitButton: DeesFormSubmit;
|
||
for (const childArg of children) {
|
||
if(childArg instanceof DeesFormSubmit) {
|
||
submitButton = childArg;
|
||
}
|
||
}
|
||
|
||
let requiredOK = true;
|
||
for (const childArg of this.getFormChildren()) {
|
||
if (childArg.required && !childArg.value) {
|
||
requiredOK = false;
|
||
}
|
||
}
|
||
submitButton.disabled = !requiredOK;
|
||
console.log(submitButton);
|
||
}
|
||
|
||
public async gatherData() {
|
||
const children = this.getFormChildren();
|
||
const valueObject: { [key: string]: string | number | boolean} = {};
|
||
for (const child of children) {
|
||
valueObject[child.key] = child.value;
|
||
}
|
||
return valueObject;
|
||
}
|
||
|
||
public async gatherAndDispatch() {
|
||
const valueObject = await this.gatherData();
|
||
const formDataEvent = new CustomEvent('formData', {
|
||
detail: {
|
||
data: valueObject
|
||
},
|
||
bubbles: true
|
||
});
|
||
this.dispatchEvent(formDataEvent);
|
||
console.log('dispatched data:')
|
||
console.log(valueObject);
|
||
}
|
||
}
|