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

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz
2023-08-19 11:47:45 +02:00
parent d08a92814e
commit e3e79d9a11
11 changed files with 1195 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,9 +7,15 @@ import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
import { DeesInputRadio } from './dees-input-radio.js';
import { DeesFormSubmit } from './dees-form-submit.js';
export type TFormElement = Array<
DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio
>;
// Unified set for form input types
const FORM_INPUT_TYPES = [
DeesInputCheckbox,
DeesInputText,
DeesInputQuantitySelector,
DeesInputRadio
];
export type TFormInputElement = DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio;
declare global {
interface HTMLElementTagNameMap {
@ -19,6 +25,7 @@ declare global {
@customElement('dees-form')
export class DeesForm extends DeesElement {
public static demo = () => html`
<dees-form
style="display: block; margin:auto; max-width: 500px; padding: 20px"
@ -31,11 +38,7 @@ export class DeesForm extends DeesElement {
>
<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-input-checkbox .required="${true}" key="hello3" label="another text"></dees-input-checkbox>
<dees-form-submit>Submit</dees-form-submit>
</dees-form>
`;
@ -55,51 +58,37 @@ export class DeesForm extends DeesElement {
}
public async firstUpdated() {
const formChildren = this.getFormChildren();
this.checkRequiredStatus();
const formChildren = this.getFormElements();
this.updateRequiredStatus();
for (const child of formChildren) {
child.changeSubject.subscribe(async (elementArg: TFormElement) => {
const valueObject = await this.gatherData();
child.changeSubject.subscribe(async () => {
const valueObject = await this.collectFormData();
this.changeSubject.next(valueObject);
console.log(valueObject);
this.checkRequiredStatus();
this.updateRequiredStatus();
});
}
await this.instrumentBehaviours();
await this.addBehaviours();
}
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 getFormElements(): Array<TFormInputElement> {
return (Array.from(this.children)).filter(child =>
FORM_INPUT_TYPES.includes(child.constructor as any)
) as unknown as TFormInputElement[];
}
public getSubmitButton() {
const children: Array<DeesElement> = this.children as any;
let submitButton: DeesFormSubmit;
for (const childArg of children) {
if (childArg instanceof DeesFormSubmit) {
submitButton = childArg;
}
}
return submitButton;
public getSubmitButton(): DeesFormSubmit | undefined {
return Array.from(this.children).find(child =>
child instanceof DeesFormSubmit
) as DeesFormSubmit;
}
public async checkRequiredStatus() {
public async updateRequiredStatus() {
console.log('checking the required status.');
let requiredOK = true;
for (const childArg of this.getFormChildren()) {
for (const childArg of this.getFormElements()) {
if (childArg.required && !childArg.value) {
requiredOK = false;
}
@ -109,8 +98,8 @@ export class DeesForm extends DeesElement {
}
}
public async gatherData() {
const children = this.getFormChildren();
public async collectFormData() {
const children = this.getFormElements();
const valueObject: { [key: string]: string | number | boolean } = {};
for (const child of children) {
valueObject[child.key] = child.value;
@ -119,7 +108,7 @@ export class DeesForm extends DeesElement {
}
public async gatherAndDispatch() {
const valueObject = await this.gatherData();
const valueObject = await this.collectFormData();
const formDataEvent = new CustomEvent('formData', {
detail: {
data: valueObject,
@ -135,7 +124,7 @@ export class DeesForm extends DeesElement {
visualStateArg: 'normal' | 'pending' | 'error' | 'success',
textStateArg: string
) {
const inputChildren = this.getFormChildren();
const inputChildren = this.getFormElements();
const submitButton = this.getSubmitButton();
switch (visualStateArg) {
@ -172,20 +161,22 @@ export class DeesForm extends DeesElement {
submitButton.text = textStateArg;
}
public async instrumentBehaviours() {
const children = this.getFormChildren();
for (const child of children) {
child.addEventListener('keydown', (eventArg) => {
if (eventArg.key === 'Enter') {
const currentIndex = children.indexOf(child);
if (currentIndex < children.length - 1) {
children[currentIndex + 1].focus();
} else {
children[currentIndex].blur();
this.getSubmitButton().focus();
}
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();
}
});
}
}
});
}
}