Skip to content

feat: helper function for dynamic content #1158

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

feat: helper function for dynamic content #1158

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb24c02
helper function for dynamic content
DhaaraniCIT Jan 21, 2025
16cd621
Merge branch 'master' into branding-helper
DhaaraniCIT Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions src/app/core/services/common/helper.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,6 +301,19 @@ export class HelperService {
options.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
}

brandingCaseConversion(content: string, coCondition?: string): string {
const snakecasedContent = new SnakeCaseToSpaceCasePipe().transform(content);
if (brandingConfig.brandId === 'fyle') {
return new TitleCasePipe().transform(snakecasedContent);
} else if (brandingConfig.brandId === 'co') {
if (coCondition) {
return new SentenceCasePipe().transform(snakecasedContent);
}
return snakecasedContent.toLowerCase();
}
return snakecasedContent;
}


/**
* Checks every `DIMENSIONS_POLLING_INTERVAL` ms whether dimensions have been refreshed
Expand Down
4 changes: 2 additions & 2 deletions ...netsuite/netsuite-shared/netsuite-export-settings/netsuite-export-settings.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,11 +306,11 @@
[form]="exportSettingForm"
[isFieldMandatory]="true"
[mandatoryErrorListName]="'export date'"
[label]=" 'Set the ' + (brandingConfig.brandId === 'fyle' ? (exportSettingForm.get('creditCardExportType')?.value | snakeCaseToSpaceCase | titlecase) : (exportSettingForm.get('creditCardExportType')?.value | lowercase)) + ' date as'"
[label]=" 'Set the ' + helperService.brandingCaseConversion(exportSettingForm.get('creditCardExportType')?.value) + ' date as'"
[subLabel]="'The selected date will reflect in the corporate card expenses exported to NetSuite.'"
[options]="cccExpenseGroupingDateOptions"
[iconPath]="'calendar'"
[placeholder]="'Select the date of the ' + (brandingConfig.brandId === 'fyle' ? (exportSettingForm.get('creditCardExportType')?.value | snakeCaseToSpaceCase | titlecase) : (exportSettingForm.get('creditCardExportType')?.value | snakeCaseToSpaceCase | lowercase))"
[placeholder]="'Select the date of the ' + helperService.brandingCaseConversion(exportSettingForm.get('creditCardExportType')?.value)"
[formControllerName]="'creditCardExportDate'">
</app-configuration-select-field>
</div>
Expand Down
9 changes: 6 additions & 3 deletions ...mport-settings/netsuite-custom-segment-dialog/netsuite-custom-segment-dialog.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { brandingContent } from 'src/app/branding/branding-config';
import { brandingConfig } from 'src/app/branding/c1-contents-config';
import { SelectFormOption } from 'src/app/core/models/common/select-form-option.model';
import { NetsuiteCustomSegmentOption } from 'src/app/core/models/enum/enum.model';
import { HelperService } from 'src/app/core/services/common/helper.service';
import { SentenceCasePipe } from 'src/app/shared/pipes/sentence-case.pipe';
import { SnakeCaseToSpaceCasePipe } from 'src/app/shared/pipes/snake-case-to-space-case.pipe';

Expand Down Expand Up @@ -39,7 +40,9 @@ export class NetsuiteCustomSegmentDialogComponent implements OnInit {

readonly brandingConfig = brandingConfig;

constructor() { }
constructor(
public helper: HelperService
) { }

save() {
this.saveClick.emit();
Expand Down Expand Up @@ -71,7 +74,7 @@ export class NetsuiteCustomSegmentDialogComponent implements OnInit {
}

getCustomSegmentTypeLabel(): string {
return brandingConfig.brandId === 'co' ? 'Choose custom field type' : 'Choose Custom Field Type';
return this.helper.sentenseCaseConversion('Choose Custom Field Type');
}

getInternalIDLabel(): string {
Expand All @@ -82,7 +85,7 @@ export class NetsuiteCustomSegmentDialogComponent implements OnInit {
}

getTransactionIdLabel(): string {
return this.brandingConfig.brandId === 'co' ? new SentenceCasePipe().transform('Enter Transaction Line Field') + ' ID' : 'Enter Transaction Line Field ID';
return this.helper.sentenseCaseConversion('Enter Transaction Line Field') + ' ID';
}

setImagesForCustomSegment(): string {
Expand Down
8 changes: 4 additions & 4 deletions src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,10 +165,10 @@
[form]="exportSettingForm"
[isFieldMandatory]="true"
[mandatoryErrorListName]="'export date'"
[label]="'Set the ' + (exportSettingForm.get('reimbursableExportType')?.value | snakeCaseToSpaceCase | titlecase) + ' date as'"
[label]="'Set the ' + helperService.brandingCaseConversion(exportSettingForm.get('reimbursableExportType')?.value) + ' date as'"
[subLabel]="'The selected type of date will reflect in the expenses exported from ' + brandingConfig.brandName + ' to QuickBooks Online.'"
[options]="reimbursableExpenseGroupingDateOptions"
[placeholder]="'Select the date of the ' + (brandingConfig.brandId === 'fyle' ? (exportSettingForm.get('reimbursableExportType')?.value | snakeCaseToSpaceCase | titlecase) : (exportSettingForm.get('reimbursableExportType')?.value | snakeCaseToSpaceCase | lowercase))"
[placeholder]="'Select the date of the ' + helperService.brandingCaseConversion(exportSettingForm.get('reimbursableExportType')?.value)"
[iconPath]="'calendar'"
[formControllerName]="'reimbursableExportDate'">
</app-configuration-select-field>
Expand Down Expand Up @@ -332,11 +332,11 @@
[form]="exportSettingForm"
[isFieldMandatory]="true"
[mandatoryErrorListName]="'export date'"
[label]=" 'Set the ' + (brandingConfig.brandId === 'fyle' ? (exportSettingForm.get('creditCardExportType')?.value | snakeCaseToSpaceCase | titlecase) : (exportSettingForm.get('creditCardExportType')?.value | lowercase)) + ' date as'"
[label]=" 'Set the ' + helperService.brandingCaseConversion(exportSettingForm.get('creditCardExportType')?.value) + ' date as'"
[subLabel]="'The selected date will reflect in the corporate card expenses exported to QuickBooks Online.'"
[options]="cccExpenseGroupingDateOptions"
[iconPath]="'calendar'"
[placeholder]="'Select the date of the ' + (brandingConfig.brandId === 'fyle' ? (exportSettingForm.get('creditCardExportType')?.value | snakeCaseToSpaceCase | titlecase) : (exportSettingForm.get('creditCardExportType')?.value | snakeCaseToSpaceCase | lowercase))"
[placeholder]="'Select the date of the ' + helperService.brandingCaseConversion(exportSettingForm.get('creditCardExportType')?.value)"
[formControllerName]="'creditCardExportDate'">
</app-configuration-select-field>

Expand Down
4 changes: 2 additions & 2 deletions ...pp/integrations/xero/xero-shared/xero-export-settings/xero-export-settings.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,11 +182,11 @@ <h5>
[form]="exportSettingForm"
[isFieldMandatory]="true"
[mandatoryErrorListName]="'export date'"
[label]=" 'Set the ' + (brandingConfig.brandId === 'fyle' ? (exportSettingForm.controls.creditCardExportType.value | snakeCaseToSpaceCase | titlecase) : (exportSettingForm.controls.creditCardExportType.value | lowercase)) + ' date as'"
[label]=" 'Set the ' + helperService.brandingCaseConversion(exportSettingForm.controls.creditCardExportType.value) + ' date as'"
[subLabel]="'The selected date will reflect in the corporate card expenses exported to Xero.'"
[options]="cccExpenseGroupingDateOptions"
[iconPath]="'calendar'"
[placeholder]="'Select the date of the ' + (brandingConfig.brandId === 'fyle' ? (exportSettingForm.controls.creditCardExportType.value | snakeCaseToSpaceCase | titlecase) : (exportSettingForm.controls.creditCardExportType.value | snakeCaseToSpaceCase | lowercase))"
[placeholder]="'Select the date of the ' + helperService.brandingCaseConversion(exportSettingForm.controls.creditCardExportType.value)"
[formControllerName]="'creditCardExportDate'">
</app-configuration-select-field>
</div>
Expand Down
14 changes: 7 additions & 7 deletions ...onents/configuration/configuration-import-field/configuration-import-field.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,11 @@
</div>
<div>
<h4 class="tw-font-500 tw-text-14-px tw-text-text-secondary" [ngClass]="isCloneSettingView ? 'tw-py-2-px' : ''">
Import {{ brandingConfig.brandId === 'co' ? (getDestinationField(expenseField.get('destination_field')?.value | snakeCaseToSpaceCase) | titlecase | lowercase ) : (getDestinationField(expenseField.get('destination_field')?.value | snakeCaseToSpaceCase) | titlecase) }} from {{ uiExposedAppName }}
Import {{ helper.brandingCaseConversion(getDestinationField(expenseField.get('destination_field')?.value)) }} from {{ uiExposedAppName }}
<app-optional-field *ngIf="!isAsterikAllowed"></app-optional-field>
</h4>
<h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}">
The imported {{ brandingConfig.brandId === 'co' ? (getDestinationField(expenseField.get('destination_field')?.value | snakeCaseToSpaceCase) | titlecase | lowercase) : (getDestinationField(expenseField.get('destination_field')?.value | snakeCaseToSpaceCase) | titlecase) }}
The imported {{ helper.brandingCaseConversion(getDestinationField(expenseField.get('destination_field')?.value)) }}
<span *ngIf="brandingConfig.brandId !== 'co'">from {{ uiExposedAppName }} will be a selectable field while creating an expense.</span>
<span *ngIf="brandingConfig.brandId === 'co'"> will be an available field when creating an expense.</span>
</h5>
Expand All @@ -59,13 +59,13 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
optionLabel="display_name" optionValue="attribute_type" [ngClass]="{'selectedAccItem !tw-text-text-secondary': isDestinationFixedImport}">
<ng-template let-option pTemplate="item">
<div>
{{ brandingConfig.brandId === 'co' ? (option.display_name | snakeCaseToSpaceCase | sentenceCase) : option.display_name | snakeCaseToSpaceCase | titlecase }}
{{ helper.brandingCaseConversion(option.display_name, 'sentenceCase') }}
</div>
</ng-template>
<ng-template pTemplate="selectedItem" let-item>
<div class="tw-flex tw-justify-between tw-items-center">
<span>
{{ brandingConfig.brandId === 'co' ? (item.display_name | snakeCaseToSpaceCase | sentenceCase) : item.display_name | snakeCaseToSpaceCase | titlecase }}
{{ helper.brandingCaseConversion(item.display_name, 'sentenceCase') }}
</span>
</div>
</ng-template>
Expand All @@ -85,12 +85,12 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
<div *ngIf="brandingFeatureConfig.isIconsInsideButtonAllowed && option.attribute_type === 'custom_field'" class="tw-ml-0 tw-mr-6-px ">
<app-svg-icon [svgSource]="'plus-square-medium'" [width]="'18px'" [height]="'18px'" ></app-svg-icon>
</div>
{{ brandingConfig.brandId === 'co' ? (option.display_name | sentenceCase) : option.display_name }}
{{ helper.sentenseCaseConversion(option.display_name) }}
</div>
</ng-template>
<ng-template pTemplate="selectedItem" let-item class="tw-flex tw-justify-between tw-items-center">
<p>
{{ brandingConfig.brandId === 'co' ? (item.display_name | sentenceCase) : item.display_name }}
{{ helper.sentenseCaseConversion(item.display_name) }}
</p>
<app-svg-icon *ngIf="(expenseField.get('source_field')?.value !== 'CATEGORY') && (uiExposedAppName === AppName.XERO ? expenseField.get('destination_field')?.value !== 'CUSTOMER' : true )" [svgSource]="'cross-medium'" [c1SvgSource]="'grv-cross-filled-medium'" (click)="removeFilter(expenseField)" [height]="'18px'" [width]="'18px'" [styleClasses]="'tw-mt-4-px'"></app-svg-icon>
</ng-template>
Expand Down Expand Up @@ -129,7 +129,7 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
<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-form-label-text-color" [ngClass]="{'!tw-font-400 tw-text-14-px': brandingConfig.brandId !== 'co', '!tw-font-600 tw-text-12-px': brandingConfig.brandId === 'co'}">{{brandingConfig.brandName}} {{brandingConfig.brandId === 'co' ? 'field' : 'Field'}} <app-mandatory-field></app-mandatory-field> </p>
<p class="tw-mb-8-px tw-text-form-label-text-color" [ngClass]="{'!tw-font-400 tw-text-14-px': brandingConfig.brandId !== 'co', '!tw-font-600 tw-text-12-px': brandingConfig.brandId === 'co'}">{{brandingConfig.brandName}} {{helper.brandingCaseConversion('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]="helper.sentenseCaseConversion('Select Expense Field')" [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">
Expand Down
8 changes: 4 additions & 4 deletions ...onents/configuration/configuration-select-field/configuration-select-field.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,15 +77,15 @@ <h5 *ngIf="formControllerName === 'cccExportType' && brandingConfig.brandId ===
[ngStyle]="{'white-space': 'nowrap', 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'max-width': '16rem'}"
[pTooltip]="isOverflowing(textElement) ? option.label : null" tooltipPosition="top">
<span>
{{ brandingConfig.brandId === 'co' ? (option.label | sentenceCase) : (option.label)}}</span>
{{ helper.sentenseCaseConversion(option.label)}}</span>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix typo in helper method name across dropdown templates.

The method name sentenseCaseConversion contains a typo. It should be sentenceCaseConversion.

-{{ helper.sentenseCaseConversion(option.label)}}
+{{ helper.sentenceCaseConversion(option.label)}}

-{{ helper.sentenseCaseConversion(option.display_name) }}
+{{ helper.sentenceCaseConversion(option.display_name) }}

-{{ helper.sentenseCaseConversion(item.display_name) }}
+{{ helper.sentenceCaseConversion(item.display_name) }}

Also applies to: 88-88, 93-93

<p *ngIf="isMultiLineOption" class="tw-text-text-muted tw-text-12-px">{{ option.subLabel}}</p>
</div>
</ng-template>

<ng-template pTemplate="selectedItem" let-item>
<div class="selected-item-container">
<span class="selected-item-text">
{{ brandingConfig.brandId === 'co' ? (item.label | sentenceCase) : (item.label)}}
{{ helper.sentenseCaseConversion(item.label) }}
</span>
<app-svg-icon *ngIf="showClearIcon && !isDisabled" [svgSource]="'cross-medium'" [c1SvgSource]="'grv-cross-filled-medium'" (click)="removeFilter(form.controls[formControllerName])" [height]="'18px'" [width]="'18px'" [styleClasses]="'tw-mt-4-px'"></app-svg-icon>
</div>
Expand Down Expand Up @@ -171,12 +171,12 @@ <h5 *ngIf="formControllerName === 'cccExportType' && brandingConfig.brandId ===
<div #textElement
[ngStyle]="{'white-space': 'nowrap', 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'max-width': '16rem'}"
[pTooltip]="isOverflowing(textElement) ? option.name : null" tooltipPosition="top">
{{ brandingConfig.brandId === 'co' ? (option.name | sentenceCase) : (option.name)}}
{{ helper.sentenseCaseConversion(option.name) }}
</div>
</ng-template>
<ng-template pTemplate="selectedItem" let-item>
<p>
{{ brandingConfig.brandId === 'co' ? (item.name | sentenceCase) : (item.name)}}
{{ helper.sentenseCaseConversion(item.name) }}
</p>
<app-svg-icon *ngIf="showClearIcon && !isDisabled" [svgSource]="'cross-medium'" [c1SvgSource]="'grv-cross-filled-medium'" (click)="removeFilter(form.controls[formControllerName])" [height]="'18px'" [width]="'18px'" [styleClasses]="'tw-mt-4-px'"></app-svg-icon>
</ng-template>
Expand Down
4 changes: 3 additions & 1 deletion ...mponents/configuration/configuration-select-field/configuration-select-field.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { DefaultDestinationAttribute, DestinationAttribute } from 'src/app/core/
import { SelectFormOption } from 'src/app/core/models/common/select-form-option.model';
import { TravelperkDestinationAttribuite } from 'src/app/core/models/travelperk/travelperk.model';
import { ExportSettingOptionSearch } from 'src/app/core/models/common/export-settings.model';
import { HelperService } from 'src/app/core/services/common/helper.service';

@Component({
selector: 'app-configuration-select-field',
Expand Down Expand Up @@ -115,7 +116,8 @@ export class ConfigurationSelectFieldComponent implements OnInit, OnChanges {

constructor(
private trackingService: TrackingService,
private router: Router
private router: Router,
public helper: HelperService
) { }

onSearchFocus(isSearchFocused: boolean): void {
Expand Down
Loading
Loading