fix: checkbox remains checked on re-enabling the import field (#856)

* make the 'dependent imports' checkbox always checked

* fix: make 'dependent imports' checkbox always checked for sage300 only

* fix: re-add check to show dependent import fields

* fix: checkbox remains checked on re-enabling the import field

* also enable the checkbox on dropdown change

* fix(linting): remove trailing whitespace

(cherry picked from commit 26b2ca4)

src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.html

@@ -99,7 +99,7 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
                         {{brandingConfig.brandName}} Fields should be unique
                         </p>
                     </div>
-                <p-inputSwitch *ngIf="!isDestinationFixedImport" (onChange)="onShowWarningForDependentFields($event, expenseField)" [pTooltip]="isExpenseFieldDependent(expenseField.value) ? 'You cannot import dependent fields' : '' " (click)="updateDependentField(expenseField.value.source_field,expenseField.value.import_to_fyle)" formControlName="import_to_fyle" class="input-toggle-section tw-pl-4-px tw-pt-10-px"></p-inputSwitch>
+                <p-inputSwitch *ngIf="!isDestinationFixedImport" (onChange)="onSwitchChanged($event, expenseField)" [pTooltip]="isExpenseFieldDependent(expenseField.value) ? 'You cannot import dependent fields' : '' " (click)="updateDependentField(expenseField.value.source_field,expenseField.value.import_to_fyle)" formControlName="import_to_fyle" class="input-toggle-section tw-pl-4-px tw-pt-10-px"></p-inputSwitch>
             </div>
             <div class="tw-pt-26-px" *ngIf="expenseField.value.source_field==='PROJECT' && expenseField.value.import_to_fyle && expenseField.value.destination_field === dependentDestinationValue" [formGroup]="form">
                 <div class="tw-flex">

src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.ts

@@ -126,6 +126,10 @@ export class ConfigurationImportFieldComponent implements OnInit {
       (this.form.get('expenseFields') as FormArray).at(index)?.get('import_to_fyle')?.setValue(true);
     }
 
+    if ( this.appName === AppName.SAGE300) {
+      this.form.controls.isDependentImportEnabled.setValue(true);
+    }
+
     if (selectedValue === MappingSourceField.PROJECT && (this.form.get('expenseFields') as FormArray).at(index)?.get('source_field')?.value !== XeroFyleField.CUSTOMER && this.appName === AppName.XERO) {
       this.isXeroProjectMapped = true;
       this.xeroProjectMapping.emit(this.isXeroProjectMapped);
@@ -154,6 +158,13 @@ export class ConfigurationImportFieldComponent implements OnInit {
     this.xeroProjectMapping.emit(this.isXeroProjectMapped);
   }
 
+  onSwitchChanged(event: any, formGroup: AbstractControl): void {
+    this.onShowWarningForDependentFields(event, formGroup);
+    if (event.checked && this.appName === AppName.SAGE300) {
+      this.form.controls.isDependentImportEnabled.setValue(true);
+    }
+  }
+
   onShowWarningForDependentFields(event: any, formGroup: AbstractControl): void {
     if (!event.checked && formGroup.value.source_field === MappingSourceField.PROJECT) {
       this.showWarningForDependentFields.emit();