Skip to content

Commit

Permalink
intacct c1 dependance field
Browse files Browse the repository at this point in the history
  • Loading branch information
@DhaaraniCIT
DhaaraniCIT committed Jun 12, 2024
1 parent 47960d5 commit 223578a
Show file tree
Hide file tree
Showing 9 changed files with 166 additions and 41 deletions.
9 changes: 9 additions & 0 deletions src/app/core/models/intacct/intacct-configuration/import-settings.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { FormGroup } from "@angular/forms";
import { DefaultDestinationAttribute } from "../../db/destination-attribute.model";
import { FyleField } from "../../enum/enum.model";
import { brandingConfig } from "src/app/branding/branding-config";
import { ImportSettingsCustomFieldRow } from "../../common/import-settings.model";

const emptyDestinationAttribute = { id: null, name: null };

Expand Down Expand Up @@ -46,6 +47,14 @@ export type ImportSettingPost = {
mapping_settings: MappingSetting[],
dependent_field_settings: DependentFieldSetting | null
}

export type IntacctDependentImportFields = {
options: ImportSettingsCustomFieldRow[],
source_field: string,
formController: string,
isDisabled: boolean
}

export class ImportSettings {
static constructPayload(importSettingsForm: FormGroup, existingDependentFieldSettings: DependentFieldSetting | null): ImportSettingPost{
const expenseFieldArray = importSettingsForm.value.expenseFields;
Expand Down
22 changes: 13 additions & 9 deletions ...tacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
</div>
<div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
<div>
<app-configuration-step-header [headerText]="'Import settings'"
<app-configuration-step-header [headerText]="'Import settings'"
[contentText]="brandingConfig.brandId === 'co' ? 'Choose the required import fields from Sage Intacct to Expense Management.' : 'Select the field information to import from Sage Intacct to ' + brandingConfig.brandName + '. '"
[redirectLink]="supportArticleLink" [showSyncButton]="isOnboarding" [appName]="appName"
(refreshDimension)="refreshDimensions()">
Expand All @@ -18,6 +18,10 @@
[appName]="appName"
[accountingFieldOptions]="sageIntacctFields"
[fyleFieldOptions]="fyleFields"
[costCategoryOption]="costCategoryOption"
[costCodeFieldOption]="costCodeFieldOption"
[dependentImportFields]="dependentImportFields"
[dependentDestinationValue]="'PROJECT'"
[isDestinationFixedImport]="true">
</app-configuration-import-field>
</div>
Expand All @@ -31,14 +35,14 @@
</app-configuration-step-footer>
</form>
</div>
</div>
<div>
<app-configuration-custom-field-creation-dialog
[customFieldForm]="customFieldForm"
[showCustomFieldCreationDialog]="showDialog"
(saveCustomFieldFn)="saveCustomField()"
(closeModelFn)="closeModel()">
</app-configuration-custom-field-creation-dialog>
<div>
<app-configuration-custom-field-creation-dialog
[customFieldForm]="customFieldForm"
[showCustomFieldCreationDialog]="showDialog"
(saveCustomFieldFn)="saveCustomField()"
(closeModelFn)="closeModel()">
</app-configuration-custom-field-creation-dialog>
</div>
</div>
<div *ngIf="isDialogVisible">
<app-preview-dialog
Expand Down
108 changes: 105 additions & 3 deletions ...intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import { IntacctCategoryDestination, ConfigurationCta, IntacctOnboardingState, I
import { IntacctDestinationAttribute } from 'src/app/core/models/intacct/db/destination-attribute.model';
import { ExpenseField } from 'src/app/core/models/intacct/db/expense-field.model';
import { LocationEntityMapping } from 'src/app/core/models/intacct/db/location-entity-mapping.model';
import { DependentFieldSetting, ImportSettingGet, ImportSettingPost, ImportSettings, MappingSetting } from 'src/app/core/models/intacct/intacct-configuration/import-settings.model';
import { DependentFieldSetting, ImportSettingGet, ImportSettingPost, ImportSettings, IntacctDependentImportFields, MappingSetting } from 'src/app/core/models/intacct/intacct-configuration/import-settings.model';
import { HelperService } from 'src/app/core/services/common/helper.service';
import { IntegrationsToastService } from 'src/app/core/services/common/integrations-toast.service';
import { StorageService } from 'src/app/core/services/common/storage.service';
import { TrackingService } from 'src/app/core/services/integration/tracking.service';
Expand Down Expand Up @@ -60,12 +61,16 @@ export class IntacctC1ImportSettingsComponent implements OnInit {

showDialog: boolean;

customField: ExpenseField;
customField: any;

customFieldControl: AbstractControl;

private sessionStartTime = new Date();

costCodeFieldOption = [{ attribute_type: 'custom_field', display_name: 'Create a Custom Field', source_placeholder: null, is_dependent: true }];

costCategoryOption = [{ attribute_type: 'custom_field', display_name: 'Create a Custom Field', source_placeholder: null, is_dependent: true }];

customFieldOption: ExpenseField[] = [{ attribute_type: 'custom_field', display_name: 'Create a Custom Field', source_placeholder: null, is_dependent: false }];

isDialogVisible: boolean = false;
Expand All @@ -76,6 +81,23 @@ export class IntacctC1ImportSettingsComponent implements OnInit {

supportArticleLink: string = brandingKbArticles.onboardingArticles.INTACCT.IMPORT_SETTING;

readonly dependentImportFields: IntacctDependentImportFields[] = [
{
source_field: 'Cost Codes',
options: this.costCodeFieldOption,
formController: 'costCodes',
isDisabled: false
},
{
source_field: 'Cost Types',
options: this.costCategoryOption,
formController: 'costTypes',
isDisabled: false
}
];

customFieldType: string;

constructor(
private router: Router,
private mappingService: SiMappingsService,
Expand All @@ -85,7 +107,8 @@ export class IntacctC1ImportSettingsComponent implements OnInit {
private toastService: IntegrationsToastService,
private trackingService: TrackingService,
private storageService: StorageService,
private workspaceService: SiWorkspaceService
private workspaceService: SiWorkspaceService,
private helper: HelperService
) { }

get expenseFieldsGetter() {
Expand Down Expand Up @@ -149,6 +172,84 @@ export class IntacctC1ImportSettingsComponent implements OnInit {
}

saveCustomField() {
if (this.customFieldType?.length > 0 && this.customFieldForm.value) {
this.saveDependentCustomField();
} else {
this.saveFyleExpenseField();
}
}

private dependentCostFieldsWatchers(formControllerName: string): void {
this.importSettingsForm.controls[formControllerName].valueChanges.subscribe((value) => {
if (value?.attribute_type === 'custom_field') {
this.addCustomField();
this.customFieldType = formControllerName;
this.customFieldControl = this.importSettingsForm.controls[formControllerName];
if (value.source_field === 'custom_field') {
this.importSettingsForm.controls[formControllerName].patchValue({
source_field: null
});
}
} else if (value) {
this.dependentImportFields.forEach((fields, index) => {
if (fields.formController === formControllerName) {
this.dependentImportFields[index].isDisabled = true;
}
});
}
});
}

private dependentFieldWatchers(): void {
if (this.importSettingsForm.value.isDependentImportEnabled) {
this.helper.disableFormField(this.importSettingsForm, 'costCodes');
this.helper.disableFormField(this.importSettingsForm, 'costTypes');
}

this.importSettingsForm.controls.isDependentImportEnabled.valueChanges.subscribe((isDependentImportEnabled) => {
if (isDependentImportEnabled) {
this.helper.enableFormField(this.importSettingsForm, 'costCodes');
this.helper.enableFormField(this.importSettingsForm, 'costTypes');
this.helper.markControllerAsRequired(this.importSettingsForm, 'costCodes');
this.helper.markControllerAsRequired(this.importSettingsForm, 'costTypes');
this.dependentImportFields[0].isDisabled = false;
this.dependentImportFields[1].isDisabled = false;
} else {
this.helper.disableFormField(this.importSettingsForm, 'costCodes');
this.helper.disableFormField(this.importSettingsForm, 'costTypes');
this.helper.clearValidatorAndResetValue(this.importSettingsForm, 'costCodes');
this.helper.clearValidatorAndResetValue(this.importSettingsForm, 'costTypes');
this.dependentImportFields[0].isDisabled = true;
this.dependentImportFields[1].isDisabled = true;
}
});

this.dependentCostFieldsWatchers('costCodes');
this.dependentCostFieldsWatchers('costTypes');
}

saveDependentCustomField(): void {
this.customField = {
attribute_type: this.customFieldForm.value.attribute_type,
display_name: this.customFieldForm.value.attribute_type,
source_placeholder: this.customFieldForm.value.source_placeholder,
is_dependent: true,
is_custom: true
};
if (this.customFieldControl) {
if (this.customFieldType === 'costCodes') {
this.costCodeFieldOption.push(this.customField);
} else {
this.costCategoryOption.push(this.customField);
}
this.importSettingsForm.controls[this.customFieldType].patchValue(this.customField);
this.customFieldForm.reset();
this.showDialog = false;
}
this.customFieldControl.disable();
}

saveFyleExpenseField() {
this.customField = {
attribute_type: this.customFieldForm.value.attribute_type.split(' ').join('_').toUpperCase(),
display_name: this.customFieldForm.value.attribute_type,
Expand Down Expand Up @@ -291,6 +392,7 @@ export class IntacctC1ImportSettingsComponent implements OnInit {
});

this.importSettingWatcher();
this.dependentFieldWatchers();
this.isLoading = false;
}

Expand Down
54 changes: 28 additions & 26 deletions ...onents/configuration/configuration-import-field/configuration-import-field.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
</div>
<div formArrayName="expenseFields" [ngClass]="[isDestinationFixedImport ? '' : 'tw-pl-24-px tw-mt-18px']">
<div *ngFor="let expenseField of expenseFieldsGetter.controls; let i = index" [formGroupName]="i" [ngClass]="{'tw-mt-24-px tw-pb-24-px': isDestinationFixedImport, 'tw-rounded-lg tw-border-border-tertiary tw-border': isDestinationFixedImport && !isCloneSettingView, 'tw-pr-24-px': isCloneSettingView}">
<div class="tw-mt-18-px" [ngClass]="{'tw-bg-bg-tertiary-lighter tw-rounded-8-px tw-py-16-px tw-w-fit tw-pr-24-px': expenseField.value.source_field === 'PROJECT' && expenseField.value.import_to_fyle && expenseField.value.destination_field === dependentDestinationValue, 'tw-pl-24-px': !isDestinationFixedImport}">
<div class="tw-mt-18-px" [ngClass]="{'tw-bg-bg-tertiary-lighter tw-rounded-8-px tw-py-16-px tw-w-fit tw-pr-24-px': expenseField.value.source_field === 'PROJECT' && expenseField.value.import_to_fyle && expenseField.value.destination_field === dependentDestinationValue && brandingConfig.brandId !== 'co' , 'tw-pl-24-px': !isDestinationFixedImport}">
<div *ngIf="isDestinationFixedImport">
<div [ngClass]="!isCloneSettingView ? 'tw-p-24-px': 'tw-pl-24-px'" class="tw-flex tw-justify-between">
<div class="tw-w-3/4 tw-flex tw-items-start">
Expand Down Expand Up @@ -101,8 +101,8 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
</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>
</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">
<div class="tw-pt-26-px" [ngClass]="{'tw-pr-24-px tw-pl-[58px]': brandingConfig.brandId === 'co'}" *ngIf="expenseField.value.source_field==='PROJECT' && expenseField.value.import_to_fyle && expenseField.value.destination_field === dependentDestinationValue" [formGroup]="form">
<div class="tw-flex" [ngClass]="{'fyle': brandingConfig.brandId !== 'co', 'co': brandingConfig.brandId === 'co'}">
<label class="container tw-pl-24-px tw-text-14-px">Import Cost Code and Cost Type from {{appName}} as dependent fields
<a *ngIf="appName === AppName.SAGE300" class="tw-text-link-primary tw-w-fit tw-cursor-pointer tw-inline-flex tw-items-center"
(click)="windowService.openInNewTab(dependantFieldSupportArticleLink)">
Expand All @@ -116,31 +116,33 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
</label>
</div>
<div *ngIf="form.value.isDependentImportEnabled && dependentImportFields">
<div *ngFor="let dependentField of dependentImportFields; index as i" class="tw-flex tw-items-strat tw-pt-4" [ngClass]="[i ? 'tw-pl-20-px' : 'tw-pl-0-px']">
<div class="tw-pt-2-px">
<app-svg-icon [isTextColorAllowed]="true" [svgSource]="'line'" [width]="'21px'" [height]="'49px'" [styleClasses]="'tw-text-box-color'"></app-svg-icon>
</div>
<div>
<p class="tw-pl-16-px tw-mb-8-px tw-text-14-px tw-text-sub-text-color !tw-font-400">Dependent Field <app-mandatory-field></app-mandatory-field> </p>
<input type="text" [ngClass]="[i ? 'tw-w-240-px' : 'tw-w-260-px']" class="tw-text-14-px tw-text-text-secondary !tw-ml-20-px !tw-font-500 !tw-h-38-px !tw-px-14-px !tw-py-10-px tw-border tw-border-solid !tw-border-border-tertiary tw-rounded-4-px" value="{{dependentField.source_field}}" disabled>
</div>
<div class="tw-pt-44-px">
<app-svg-icon [isTextColorAllowed]="true" [svgSource]="'arrow-line'" [height]="'10px'" [width]="'100px'" [styleClasses]="'tw-text-border-secondary'"></app-svg-icon>
</div>
<div>
<p class="tw-mb-8-px tw-text-14-px tw-text-sub-text-color !tw-font-400">Fyle Field <app-mandatory-field></app-mandatory-field> </p>
<p-dropdown appendTo="body" class="tw-w-28-vw" [formControlName]="dependentField.formController" [options]="dependentField.options" optionLabel="attribute_type" placeholder="Select Expense Field" [disabled]="dependentField.isDisabled" [dropdownIcon]="'pi pi-chevron-down ' + brandingConfig.brandId">
<ng-template let-option pTemplate="item">
<div [ngClass]="{'custom-option': option.attribute_type === 'custom_field'}" class="tw-align-middle">
<div class="tw-ml-0 tw-mr-6-px ">
<app-svg-icon *ngIf="option.attribute_type === 'custom_field'" [svgSource]="'plus-square-medium'" [width]="'18px'" [height]="'18px'" ></app-svg-icon>
<div *ngFor="let dependentField of dependentImportFields; index as i" class="tw-flex tw-items-center tw-justify-between tw-pt-4" [ngClass]="[i ? 'tw-pl-20-px' : 'tw-pl-0-px']">
<div class="tw-flex">
<div>
<app-svg-icon [isTextColorAllowed]="true" [svgSource]="'line'" [width]="'21px'" [height]="'49px'" [styleClasses]="'tw-text-box-color'"></app-svg-icon>
</div>
<div class="tw-pl-10-px">
<p class="tw-mb-8-px tw-text-14-px tw-text-sub-text-color !tw-font-400">Dependent Field <app-mandatory-field></app-mandatory-field> </p>
<input type="text" [ngClass]="[i ? 'tw-w-240-px' : 'tw-w-260-px']" class="tw-text-14-px tw-text-text-secondary !tw-font-500 !tw-h-38-px !tw-px-14-px !tw-py-10-px tw-border tw-border-solid !tw-border-border-tertiary tw-rounded-4-px" value="{{dependentField.source_field}}" disabled>
</div>
<div [ngClass]="{'tw-pt-46-px': brandingConfig.brandId !== 'co', 'tw-pt-42-px': brandingConfig.brandId === 'co'}">
<app-svg-icon [isTextColorAllowed]="true" [svgSource]="'arrow-line'" [height]="'10px'" [width]="'100px'" [styleClasses]="'tw-text-border-secondary'"></app-svg-icon>
</div>
<div>
<p class="tw-mb-8-px tw-text-14-px tw-text-sub-text-color !tw-font-400">{{brandingConfig.brandName}} Field <app-mandatory-field></app-mandatory-field> </p>
<p-dropdown appendTo="body" class="tw-w-28-vw" [formControlName]="dependentField.formController" [options]="dependentField.options" optionLabel="attribute_type" placeholder="Select Expense Field" [disabled]="dependentField.isDisabled" [dropdownIcon]="'pi pi-chevron-down ' + brandingConfig.brandId">
<ng-template let-option pTemplate="item">
<div [ngClass]="{'custom-option': option.attribute_type === 'custom_field'}" class="tw-align-middle">
<div class="tw-ml-0 tw-mr-6-px ">
<app-svg-icon *ngIf="option.attribute_type === 'custom_field'" [svgSource]="'plus-square-medium'" [width]="'18px'" [height]="'18px'" ></app-svg-icon>
</div>
{{ option.display_name }}
</div>
{{ option.display_name }}
</div>
</ng-template>
</p-dropdown>
</ng-template>
</p-dropdown>
</div>
</div>
<p-inputSwitch class="tw-pl-32-px input-toggle-section tw-pt-40-px" formControlName="dependentFieldImportToggle" [disabled]="true"></p-inputSwitch>
<p-inputSwitch class="input-toggle-section tw-pt-24-px" formControlName="dependentFieldImportToggle" [disabled]="true"></p-inputSwitch>
</div>
<div *ngIf="appName === AppName.SAGE300" class="tw-flex tw-mt-24-px">
<label class="container tw-pl-24-px tw-text-14-px">Auto-Export Commitment based on the Cost Code and Cost Category.
Expand Down
6 changes: 5 additions & 1 deletion ...onents/configuration/configuration-import-field/configuration-import-field.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,14 @@
@apply tw-absolute tw-top-0 tw-left-0 tw-h-18-px tw-w-18-px tw-bg-white tw-rounded-md tw-border tw-border-box-color
}

.container input:checked ~ .checkmark {
.fyle .container input:checked ~ .checkmark {
@apply tw-bg-faded-text-color
}

.co .container input:checked ~ .checkmark {
@apply tw-bg-mandatory-field-color
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
@apply tw-content-empty tw-absolute tw-hidden
Expand Down
2 changes: 1 addition & 1 deletion src/app/shared/components/core/svg-icon/svg-icon.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const ICON_MAPPING = {
'gear': 'grv-settings',
'info-circle-fill-medium': 'c1-info-medium',
'info-circle-fill': 'c1-info-small',
'line': 'line',
'line': 'grv-line',
'link-vertical-medium': 'grv-link-medium',
'list': 'grv-notes',
'mapping-medium': 'grv-transfer-medium',
Expand Down
3 changes: 3 additions & 0 deletions src/assets/icons/co/grv-line.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/assets/sprites/sprite.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 223578a

Please sign in to comment.