fix ui issues and upload image for guild good

src/app/shared/abstractClasses/abstract-form.ts

@@ -36,6 +36,10 @@ export abstract class AbstractForm<
     return payload;
   }
 
+  ngOnInit() {
+    this.form.patchValue(this.initialValues ?? {});
+  }
+
   ngOnChanges() {
     this.form.patchValue(this.initialValues ?? {});
   }

src/app/shared/components/amountPercentageInput/amount-percentage-input.component.ts

@@ -79,14 +79,27 @@ export class AmountPercentageInputComponent {
   onInput($event: Event, isPriceType: boolean = false) {
     // @ts-ignore
     let value = $event.target.value as string;
+    // @ts-ignore
+    const isDotInput = $event.data === '.';
+
+    if (isDotInput) {
+      return;
+    }
+
     if (isPriceType) {
       value = value.replace(/,/g, '');
     }
 
-    this.modifyControlsData(value);
+    const newValueToSet = this.modifyControlsData(value);
+
+    if (newValueToSet !== null) {
+      // @ts-ignore
+      $event.target.value = newValueToSet;
+    }
   }
 
   private modifyControlsData(value: string) {
+    let newValueToSet: Maybe<string> = null;
     let newValue = parseFloat(value);
     const isPercentageType = this.selectedType.value === 'percentage';
 
@@ -96,7 +109,9 @@ export class AmountPercentageInputComponent {
     const maxValidator = max < newValue;
     const minValidator = min > newValue;
 
-    if (minValidator || maxValidator) {
+    const notValid = minValidator || maxValidator;
+
+    if (notValid) {
       if (minValidator) {
         this.toastService.warn({
           text: `مقدار فیلد باید بیشتر از ${min} باشد.`,
@@ -116,16 +131,23 @@ export class AmountPercentageInputComponent {
 
     if (isPercentageType) {
       const amountValue = (this.baseAmount * newValue) / 100;
+      newValueToSet = newValue + '';
       this.amountControl.setValue(amountValue);
+      if (notValid) {
+        this.percentageControl.setValue(newValue);
+      }
     } else {
       const percentageValue = (newValue / this.baseAmount) * 100;
-
+      newValueToSet = newValue + '';
       this.percentageControl.setValue(percentageValue);
       this.preparedLabel.set(`${this.label} (${percentageValue} درصد)`);
-      // @ts-ignore
-      // $event.target.value = newValue;
+      if (notValid) {
+        this.amountControl.setValue(newValue);
+      }
     }
     this.preparedLabel.set(this.prepareLabel(isPercentageType));
+
+    return newValue;
   }
 
   private prepareLabel(isPercentageType: boolean) {
@@ -145,4 +167,15 @@ export class AmountPercentageInputComponent {
       this.preparedLabel.set(this.prepareLabel(value === 'percentage'));
     });
   }
+
+  ngOnChanges() {
+    const isPercentageType = this.selectedType.value === 'percentage';
+    this.modifyControlsData(
+      isPercentageType ? this.percentageControl.value : this.amountControl.value,
+    );
+
+    this.selectedType.valueChanges.subscribe((value) => {
+      this.preparedLabel.set(this.prepareLabel(value === 'percentage'));
+    });
+  }
 }

src/app/shared/components/input/input.component.ts

@@ -189,26 +189,27 @@ export class InputComponent {
   onInput($event: Event, isPriceFormat?: boolean) {
     // @ts-ignore
     let value = $event.target.value as string;
+    // @ts-ignore
+    const isDotInput = $event.data === '.';
 
     if (isPriceFormat) {
       value = value.replace(/,/g, '');
     }
 
-    if (this.inputMode === 'numeric') {
-      let newValue = parseFloat(value);
-
+    let replacedTargetValue: Maybe<number | string> = null;
+    if (this.inputMode === 'numeric' && !isDotInput) {
+      let newValue = parseFloat(value || '0');
       const minValidator = (this.min || this.min === 0) && parseFloat(value) < this.min!;
       const maxValidator = (this.max || this.max === 0) && parseFloat(value) > this.max;
-
       if (minValidator || maxValidator) {
         if (minValidator) {
           this.toastService.warn({
-            text: `مقدار فیلد باید بیشتر از ${this.min} باشد.`,
+            text: `مقدار ${this.label} نمی‌تواند بیشتر از ${this.min} باشد.`,
           });
         }
         if (maxValidator) {
           this.toastService.warn({
-            text: `مقدار فیلد باید کمتر از ${this.max} باشد.`,
+            text: `مقدار ${this.label} نمی‌تواند کمتر از ${this.max} باشد.`,
           });
         }
 
@@ -217,23 +218,23 @@ export class InputComponent {
           newValue = 0;
         }
 
-        if (isPriceFormat) {
-          // @ts-ignore
-          $event.target.value = newValue.toLocaleString('en-US');
-        } else {
-          // @ts-ignore
-          $event.target.value = newValue;
-        }
-      }
-      if (!['nationalId', 'phone', 'postalCode', 'mobile'].includes(this.type))
+        replacedTargetValue = isPriceFormat ? newValue.toLocaleString('en-US') : newValue;
         this.control.setValue(newValue);
+      }
+      if (!['nationalId', 'phone', 'postalCode', 'mobile'].includes(this.type)) {
+        this.control.setValue(newValue);
+      }
     }
-
     if (this.preparedMaxLength && this.preparedMaxLength < value.length) {
       let newValue = value.slice(0, value.length - 1);
       // @ts-ignore
-      $event.target.value = newValue;
+      replacedTargetValue = newValue;
       this.control.setValue(newValue);
     }
+
+    if (replacedTargetValue !== null) {
+      // @ts-ignore
+      this.$event.value = replacedTargetValue;
+    }
   }
 }

src/app/shared/components/uploadFile/model.d.ts

@@ -1,4 +1,4 @@
-export interface onSelectArgs {
+export interface onSelectFileArgs {
   data: FormData;
   file: File;
 }

src/app/shared/components/uploadFile/upload-file.component.ts

@@ -1,7 +1,7 @@
 import { Maybe } from '@/core';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FileSelectEvent, FileUpload } from 'primeng/fileupload';
-import { onSelectArgs } from './model';
+import { onSelectFileArgs } from './model';
 
 @Component({
   selector: 'app-shared-upload-file',
@@ -13,11 +13,11 @@ export class SharedUploadFileComponent {
   @Input() loading: boolean = false;
   @Input() name: string = 'file';
   @Input() accept: string = 'image/*';
-  @Input() maxSize: Maybe<number> = 5 * 1024;
+  @Input() maxSize: Maybe<number> = 5 * 1024 * 1024;
   @Input() error: Maybe<string> = null;
   @Input() hint: Maybe<string> = null;
 
-  @Output() onSelect = new EventEmitter<onSelectArgs>();
+  @Output() onSelect = new EventEmitter<onSelectFileArgs>();
 
   onSelectedFile($event: FileSelectEvent) {
     const file = $event.files?.[0];