added transaction date to transaction form

src/components/app-dropdown/AppDropdownElement.ts

@@ -88,7 +88,7 @@ class AppDropdownElement extends BaseComponentElement {
 		return this.value;
 	}
 
-	validate = (): boolean => {
+	validate = (change = false): boolean => {
 		return this.validator.validate();
 	};
 

src/components/app-form/AppFormElement.ts

@@ -12,6 +12,7 @@ class AppFormElement extends BaseComponentElement {
 	@querys inputField: NodeListOf<InputFieldElement>;
 	@querys appDropdown: NodeListOf<AppDropdownElement>;
 	@attr custom: string;
+	@attr renderInput: string;
 	@attr hasCancel: string;
 	slotted: any;
 	isValid: boolean = false;
@@ -24,6 +25,10 @@ class AppFormElement extends BaseComponentElement {
 		return findMethod(this.custom, this.appMain);
 	}
 
+	get customRender() {
+		return findMethod(this.renderInput, this.appMain);
+	}
+
 	public inputChange = (e) => {
 		this.validate();
 		this.update();
@@ -103,13 +108,15 @@ class AppFormElement extends BaseComponentElement {
 	}
 
 	elementConnected = (): void => {
-		const _template = document.createElement('template');
-		const _slot = this.innerHTML;
-		_template.innerHTML = _slot;
-		this.innerHTML = null;
-		this.update();
-
-		this.formElement.replaceChild(_template.content, this.innerSlot);
+		if (this.renderInput) {
+			this.update();
+		} else {
+			const _template = document.createElement('template');
+			const _slot = this.innerHTML;
+			_template.innerHTML = _slot;
+			this.update();
+			this.formElement?.replaceChild(_template.content, this.innerSlot);
+		}
 	};
 
 	render = (): TemplateResult => {
@@ -139,7 +146,7 @@ class AppFormElement extends BaseComponentElement {
 		return html`
 			<div class="app-form">
 				<form app-action="submit:app-form#onSubmit" data-target="app-form.formElement">
-					<slot data-target="app-form.innerSlot"></slot>
+					${this.renderInput ? this.customRender() : html`<slot data-target="app-form.innerSlot"></slot>`}
 					${renderError(this.error)}
 					<div class="form-buttons">
 						<div class="button-content">${renderSubmit(this.isValid)}${renderCancel(isTrue(this.hasCancel))}</div>

src/components/app-main/AppMainElement.ts

@@ -13,7 +13,7 @@ class AppMainElement extends HTMLElement {
 	public authStore: AuthStore;
 	private httpClient: HttpClient;
 	public appService: AppService;
-	public shadow: any;
+	//public shadow: any;
 	@target appModal: AppModalElement;
 	@target mainRoot: AppRootElement;
 	@target appLoader: AppLoaderElement;

src/components/input-field/InputFieldElement.ts

@@ -13,12 +13,14 @@ class InputFieldElement extends BaseComponentElement {
 	@attr type: string;
 	@attr label: string;
 	@attr rules: string;
+	@attr customAction: string;
 	@target main: HTMLElement;
 	@target inp: HTMLElement;
 	@closest appForm: AppFormElement;
 	valid: boolean;
 	displayError: boolean;
 	randId: string;
+	changed: boolean = false;
 
 	validator: Validator;
 
@@ -54,7 +56,15 @@ class InputFieldElement extends BaseComponentElement {
 	}
 
 	validate = (): boolean => {
-		return this.validator.validate();
+		const valid = this.validator.validate();
+		if (valid && this.displayError) {
+			this.displayError = false;
+			this.update();
+		} else if (this.changed && !valid) {
+			this.displayError = true;
+			this.update();
+		}
+		return valid;
 	};
 
 	validateDisplay = () => {
@@ -69,6 +79,9 @@ class InputFieldElement extends BaseComponentElement {
 	};
 
 	inputChange = (e) => {
+		if (!this.changed && e?.target?.value) {
+			this.changed = true;
+		}
 		this.validate();
 		this.appForm?.inputChange(e);
 	};
@@ -96,6 +109,7 @@ class InputFieldElement extends BaseComponentElement {
 				app-action="
                     input:input-field#inputChange
                     blur:input-field#validateDisplay
+					${this.customAction ? this.customAction : ''}
                 "
 			/>`;
 		};