design.estate/dees-catalog
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz 2021-08-27 14:02:37 +02:00
parent 00cb552f44
commit 7d63f16fc1
1 changed files with 44 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
ts_web/elements/dees-form.ts
View File

@ -7,7 +7,9 @@ import { DeesInputRadio } from './dees-input-radio';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
import { DeesFormSubmit } from './dees-form-submit'; import { DeesFormSubmit } from './dees-form-submit';
export type TFormElement = Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio>; export type TFormElement = Array<
DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio
>;
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@ -18,18 +20,25 @@ declare global {
@customElement('dees-form') @customElement('dees-form')
export class DeesForm extends DeesElement { export class DeesForm extends DeesElement {
public static demo = () => html` public static demo = () => html`
<dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px" @formData=${async (eventArg) => { <dees-form
const form: DeesForm = eventArg.currentTarget; style="display: block; margin:auto; max-width: 500px; padding: 20px"
form.setStatus('pending', 'authenticating...'); @formData=${async (eventArg) => {
await domtools.plugins.smartdelay.delayFor(1000); const form: DeesForm = eventArg.currentTarget;
form.setStatus('success', 'authenticated!'); form.setStatus('pending', 'authenticating...');
}}> await domtools.plugins.smartdelay.delayFor(1000);
form.setStatus('success', 'authenticated!');
}}
>
<dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text> <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-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-input-checkbox
.required="${true}"
key="hello3"
label="another text"
></dees-input-checkbox>
<dees-form-submit>Submit</dees-form-submit> <dees-form-submit>Submit</dees-form-submit>
</dees-form> </dees-form>
`; `;
public name: string = 'myform'; public name: string = 'myform';
public changeSubject = new domtools.rxjs.Subject(); public changeSubject = new domtools.rxjs.Subject();
@ -61,9 +70,13 @@ export class DeesForm extends DeesElement {
public getFormChildren() { public getFormChildren() {
const children: Array<DeesElement> = this.children as any; const children: Array<DeesElement> = this.children as any;
const formChildren: TFormElement = []; const formChildren: TFormElement = [];
for (const child of children) { 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); formChildren.push(child);
} }
} }
@ -74,7 +87,7 @@ export class DeesForm extends DeesElement {
const children: Array<DeesElement> = this.children as any; const children: Array<DeesElement> = this.children as any;
let submitButton: DeesFormSubmit; let submitButton: DeesFormSubmit;
for (const childArg of children) { for (const childArg of children) {
if(childArg instanceof DeesFormSubmit) { if (childArg instanceof DeesFormSubmit) {
submitButton = childArg; submitButton = childArg;
} }
} }
@ -82,9 +95,8 @@ export class DeesForm extends DeesElement {
} }
public async checkRequiredStatus() { public async checkRequiredStatus() {
console.log('checking the required status.') console.log('checking the required status.');
let requiredOK = true; let requiredOK = true;
for (const childArg of this.getFormChildren()) { for (const childArg of this.getFormChildren()) {
if (childArg.required && !childArg.value) { if (childArg.required && !childArg.value) {
@ -96,7 +108,7 @@ export class DeesForm extends DeesElement {
public async gatherData() { public async gatherData() {
const children = this.getFormChildren(); const children = this.getFormChildren();
const valueObject: { [key: string]: string | number | boolean} = {}; const valueObject: { [key: string]: string | number | boolean } = {};
for (const child of children) { for (const child of children) {
valueObject[child.key] = child.value; valueObject[child.key] = child.value;
} }
@ -107,20 +119,23 @@ export class DeesForm extends DeesElement {
const valueObject = await this.gatherData(); const valueObject = await this.gatherData();
const formDataEvent = new CustomEvent('formData', { const formDataEvent = new CustomEvent('formData', {
detail: { detail: {
data: valueObject data: valueObject,
}, },
bubbles: true bubbles: true,
}); });
this.dispatchEvent(formDataEvent); this.dispatchEvent(formDataEvent);
console.log('dispatched data:') console.log('dispatched data:');
console.log(valueObject); 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 inputChildren = this.getFormChildren();
const submitButton = this.getSubmitButton(); const submitButton = this.getSubmitButton();
switch(visualStateArg) { switch (visualStateArg) {
case 'pending': case 'pending':
submitButton.disabled = true; submitButton.disabled = true;
submitButton.status = 'pending'; submitButton.status = 'pending';
@ -135,9 +150,15 @@ export class DeesForm extends DeesElement {
inputChild.disabled = true; inputChild.disabled = true;
} }
break; break;
case 'error':
submitButton.disabled = true;
submitButton.status = 'error';
for (const inputChild of inputChildren) {
inputChild.disabled = true;
}
break;
} }
submitButton.text = textStateArg; submitButton.text = textStateArg;
} }
} }