added subscription edit

src/components/app-dropdown/AppDropdownElement.ts

@@ -33,6 +33,7 @@ class AppDropdownElement extends BaseComponentElement {
 	page: number = 1;
 	rpp: number = 30;
 	validator: Validator;
+	itemValue: any = null;
 
 	constructor() {
 		super();
@@ -119,7 +120,10 @@ class AppDropdownElement extends BaseComponentElement {
 	};
 
 	get selectedItem() {
-		const { value, valuekey, items } = this;
+		const { value, valuekey, items, itemValue } = this;
+		if (itemValue) {
+			return itemValue;
+		}
 		const item = items?.find((item) => {
 			return value == item[valuekey];
 		});
@@ -173,6 +177,7 @@ class AppDropdownElement extends BaseComponentElement {
 
 	itemSelected = (e) => {
 		const value = (e.target as HTMLSpanElement).getAttribute('data-value');
+		this.itemValue = null;
 		this.setValue(value);
 		this.setOpen(false);
 		this.appForm?.inputChange(e);
@@ -183,6 +188,11 @@ class AppDropdownElement extends BaseComponentElement {
 		this.update();
 	};
 
+	setItemValue = (itemValue) => {
+		this.itemValue = itemValue;
+		this.update();
+	}
+
 	render = () => {
 		const { label, error, errorMessage, isOpen, searchPhrase, items, selectedItem, displaykey, valuekey } = this;
 

src/components/app-form/AppFormElement.ts

@@ -77,13 +77,27 @@ class AppFormElement extends BaseComponentElement {
 			formObject[input.name] = input._value;
 		});
 		this.appDropdown?.forEach((input: AppDropdownElement) => {
-			if (input.required && input.value) {
-				formObject[input.name] = input._value;
-			}
+			formObject[input.name] = input._value;
 		});
 		return formObject;
 	}
 
+	set = (data): any => {
+		for (let i = 0; i < this.inputField.length; i++) {
+			const input = this.inputField[i];
+			if(data?.[input.name]) {
+				input._value = data[input.name]
+				this.update()
+			}
+		}
+		this.appDropdown?.forEach((input: AppDropdownElement) => {
+			if(data?.[input.name]) {
+				input.setValue(data[input.name])
+				this.update()
+			}
+		});
+	}
+
 	getInput = (name: string): InputFieldElement | AppDropdownElement => {
 		let formObject;
 		this.inputField.forEach((input: InputFieldElement) => {

src/components/input-field/InputFieldElement.ts

@@ -18,6 +18,7 @@ class InputFieldElement extends BaseComponentElement {
 	@target main: HTMLElement;
 	@target inp: HTMLElement;
 	@closest appForm: AppFormElement;
+	@attr disabled: string;
 	valid: boolean;
 	displayError: boolean;
 	randId: string;
@@ -36,12 +37,16 @@ class InputFieldElement extends BaseComponentElement {
 		//this.validate();
 	};
 
+	attributeChangedCallback() {
+		this.update();
+	}
+
 	setError = (error) => {
 		this.validator.error = error;
 	};
 
 	get error(): string {
-		return this.validator.error;
+		return this.validator?.error;
 	}
 
 	get isValid(): boolean {
@@ -53,8 +58,23 @@ class InputFieldElement extends BaseComponentElement {
 	}
 
 	get _value() {
+		if (this.type == 'checkbox') {
+			return (this.inp as HTMLInputElement)?.checked;
+		}
 		return (this.inp as HTMLInputElement)?.value;
 	}
+	
+	get _disabled() {
+		return this.disabled == "true" 
+	}
+
+	set _value(value) {
+		if (this.type == 'checkbox') {
+			(this.inp as HTMLInputElement).checked = (value as boolean);
+		} else {
+			(this.inp as HTMLInputElement).value = (value as string);
+		}
+	}
 
 	validate = (): boolean => {
 		const valid = this.validator.validate();
@@ -88,7 +108,6 @@ class InputFieldElement extends BaseComponentElement {
 	};
 
 	render = (): TemplateResult => {
-		console.log('e');
 		const renderMessage = (label: string) => {
 			if (this.label) {
 				return html`<label for="${this.randId}">${this.label}${this.required ? ' (*)' : ''}</label>`;
@@ -113,6 +132,7 @@ class InputFieldElement extends BaseComponentElement {
 					step="0.01"
 					data-target="input-field.inp"
 					id="${this.randId}"
+					?disabled=${this._disabled}
 					app-action=" input:input-field#inputChange blur:input-field#validateDisplay
 				${this.customAction ? this.customAction : ''} "
 				/>`;
@@ -122,6 +142,7 @@ class InputFieldElement extends BaseComponentElement {
 				autocomplete="${this.name}"
 				type="${this.type}"
 				data-target="input-field.inp"
+				?disabled=${this._disabled}
 				id="${this.randId}"
 				app-action="
                     input:input-field#inputChange