From f4a4cd90e58266e249308d152ebe772f84012772 Mon Sep 17 00:00:00 2001 From: Sahil Kandhare Date: Wed, 11 Dec 2024 16:42:45 +0530 Subject: [PATCH 1/3] feat: Update view report (reports--card) to display the exact amount (#3330) --- .../my-view-report/my-view-report.page.html | 31 +++++++++---------- .../my-view-report/my-view-report.page.scss | 14 ++++++--- .../my-view-report.page.spec.ts | 2 ++ 3 files changed, 27 insertions(+), 20 deletions(-) diff --git a/src/app/fyle/my-view-report/my-view-report.page.html b/src/app/fyle/my-view-report/my-view-report.page.html index 9345133e70..a61b6d084f 100644 --- a/src/app/fyle/my-view-report/my-view-report.page.html +++ b/src/app/fyle/my-view-report/my-view-report.page.html @@ -29,11 +29,11 @@
- - + +
- {{report.purpose | ellipsis: 15}} + {{report.purpose | ellipsis: 25}}
- -
- {{ reportCurrencySymbol }} - - {{ report.amount || 0 | humanizeCurrency: report.currency:true }} - -
- - - - - - +
{{report.state | reportState : simplifyReportsSettings.enabled | snakeCaseToSpaceCase}} @@ -65,6 +53,17 @@ + + +
+ {{ reportCurrencySymbol }} + + {{ { value: report.amount || 0, currencyCode: report.currency, skipSymbol: true } | exactCurrency }} + +
+ + +
diff --git a/src/app/fyle/my-view-report/my-view-report.page.scss b/src/app/fyle/my-view-report/my-view-report.page.scss index 8969457693..97dd17f96a 100644 --- a/src/app/fyle/my-view-report/my-view-report.page.scss +++ b/src/app/fyle/my-view-report/my-view-report.page.scss @@ -100,7 +100,13 @@ &--amount { color: $white; - float: right; + font-size: 18px; + } + + &--purpose-state { + display: flex; + justify-content: space-between; + align-items: center; } &--purpose-amount-block { @@ -109,14 +115,14 @@ color: $pure-white; &__purpose { - font-size: 16px; + font-size: 14px; line-height: 18px; font-weight: 500; - max-width: 85%; + max-width: 100%; } &__amount { - font-size: 20px; + font-size: 18px; font-weight: 500; } } diff --git a/src/app/fyle/my-view-report/my-view-report.page.spec.ts b/src/app/fyle/my-view-report/my-view-report.page.spec.ts index add7003fe6..e15e4d0eab 100644 --- a/src/app/fyle/my-view-report/my-view-report.page.spec.ts +++ b/src/app/fyle/my-view-report/my-view-report.page.spec.ts @@ -33,6 +33,7 @@ import { ToastMessageComponent } from 'src/app/shared/components/toast-message/t import { EllipsisPipe } from 'src/app/shared/pipes/ellipses.pipe'; import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe'; import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe'; +import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe'; import { ReportState } from 'src/app/shared/pipes/report-state.pipe'; import { SnakeCaseToSpaceCase } from 'src/app/shared/pipes/snake-case-to-space-case.pipe'; import { NetworkService } from '../../core/services/network.service'; @@ -124,6 +125,7 @@ describe('MyViewReportPage', () => { MyViewReportPage, EllipsisPipe, HumanizeCurrencyPipe, + ExactCurrencyPipe, ReportState, SnakeCaseToSpaceCase, AsyncPipe, From 044025c188852c954f3c46b6ec198ad151ee11b9 Mon Sep 17 00:00:00 2001 From: Sahil Kandhare Date: Wed, 11 Dec 2024 16:50:49 +0530 Subject: [PATCH 2/3] feat: Add expenses to report (display exact amount) (#3331) --- .../add-expenses-to-report.component.html | 6 ++++-- .../add-expenses-to-report.component.scss | 12 ++++++++---- .../add-expenses-to-report.component.spec.ts | 16 +++++++++++----- 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html index 4d1afaac6f..aceca01f89 100644 --- a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html +++ b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html @@ -5,8 +5,10 @@
Add Expenses
- {{ selectedElements?.length }} {{ selectedElements?.length > 1 ? 'Expenses' : 'Expense' }} - - {{ selectedTotalAmount || 0 | humanizeCurrency : homeCurrency }} + {{ selectedElements?.length }} {{ selectedElements?.length > 1 ? 'Expenses' : 'Expense' }} +
+
+ {{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }}
diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss index aa08f632b9..f5d7ea983a 100644 --- a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss +++ b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss @@ -7,14 +7,18 @@ } &--title-container { - color: $black; + color: $blue-black; font-weight: 500; - margin-left: -10%; } &--title { - font-size: 20px; - line-height: 26px; + font-size: 14px; + margin-bottom: 4px; + } + + &--total-amount { + font-size: 12px; + font-weight: 400; } &--close { diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts index 9a0d19a7cb..48ab48325e 100644 --- a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts +++ b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts @@ -8,6 +8,7 @@ import { click, getElementBySelector, getTextContent } from 'src/app/core/dom-he import { CurrencyService } from 'src/app/core/services/currency.service'; import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe'; import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe'; +import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe'; import { AddExpensesToReportComponent } from './add-expenses-to-report.component'; import { expenseData } from 'src/app/core/mock-data/platform/v1/expense.data'; @@ -28,7 +29,7 @@ describe('AddExpensesToReportComponent', () => { const routerSpy = jasmine.createSpyObj('Router', ['navigate']); TestBed.configureTestingModule({ - declarations: [AddExpensesToReportComponent, HumanizeCurrencyPipe], + declarations: [AddExpensesToReportComponent, HumanizeCurrencyPipe, ExactCurrencyPipe], imports: [IonicModule.forRoot()], providers: [ FyCurrencyPipe, @@ -194,13 +195,18 @@ describe('AddExpensesToReportComponent', () => { expect(getTextContent(getElementBySelector(fixture, '.report-list--title'))).toEqual('Add Expenses'); }); - it('should show number of expenses and total amount', () => { + it('should show number of expenses', () => { component.selectedElements = [expense1, expense2]; fixture.detectChanges(); - expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--title'))).toEqual( - '2 Expenses - $500.00' - ); + expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--title'))).toEqual('2 Expenses'); + }); + + it('should show total amount', () => { + component.selectedElements = [expense1, expense2]; + fixture.detectChanges(); + + expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--total-amount'))).toEqual('$500.00'); }); it('should zero state message if no unreported expense exist', () => { From 2884198d247be9f8e40249dd6c4f9780dab2e232 Mon Sep 17 00:00:00 2001 From: Sahil Kandhare Date: Wed, 11 Dec 2024 17:32:24 +0530 Subject: [PATCH 3/3] feat: Report card section display exact amount (#3328) --- src/app/fyle/my-reports/my-reports.page.html | 2 +- .../reports-card/reports-card.component.html | 54 ++++++++++++------- .../reports-card/reports-card.component.scss | 51 ++++++++++++------ .../reports-card.component.spec.ts | 10 +++- 4 files changed, 78 insertions(+), 39 deletions(-) diff --git a/src/app/fyle/my-reports/my-reports.page.html b/src/app/fyle/my-reports/my-reports.page.html index bda5d9237f..bef8ea5ec1 100644 --- a/src/app/fyle/my-reports/my-reports.page.html +++ b/src/app/fyle/my-reports/my-reports.page.html @@ -72,7 +72,7 @@ - +
{{ report.created_at | date : 'MMM dd, YYYY' }}
+ +
-
-
-
-
- {{ report.purpose | ellipsis : 40 }} -
-
- {{ reportCurrencySymbol }} - - {{ report.amount || 0 | humanizeCurrency : report.currency : true }} - +
+
+ + + +
+ +
+ {{ report.purpose | ellipsis : 40 }} +
+ + +
+ {{ report.num_expenses }} + {{ report.num_expenses === 1 ? 'Expense' : 'Expenses' }} +
+ + +
+ {{ reportCurrencySymbol }} + + {{ { value: report.amount || 0, currencyCode: report.currency, skipSymbol: true } | exactCurrency }} + +
-
-
-
-
- {{ report.num_expenses }} - {{ report.num_expenses === 1 ? 'Expense' : 'Expenses' }} -
-
- {{ report.state | reportState : simplifyReportsEnabled | snakeCaseToSpaceCase }} + + +
+
+
+ {{ report.state | reportState : simplifyReportsEnabled | snakeCaseToSpaceCase }} +
diff --git a/src/app/shared/components/reports-card/reports-card.component.scss b/src/app/shared/components/reports-card/reports-card.component.scss index 6e239503e5..722fb24654 100644 --- a/src/app/shared/components/reports-card/reports-card.component.scss +++ b/src/app/shared/components/reports-card/reports-card.component.scss @@ -1,26 +1,22 @@ @import '../../../../theme/colors.scss'; .reports-card { - padding: 16px; + padding: 12px; + margin-bottom: 6px; background-color: $pure-white; - &__with-border { - padding-top: 0; - } - &__no-top-margin { margin-top: 0; } &--divider { - border-bottom: 1px solid $grey-lighter; margin-bottom: 16px; } &--date { - color: $grey-light; + color: $black-light; font-size: 14px; - padding: 16px 0 12px 16px; + padding: 24px 14px 16px 14px; background-color: $white; font-weight: 500; } @@ -31,8 +27,23 @@ margin-right: 20px; } + &--container { + display: flex; + justify-content: space-between; + width: 100%; + } + &--main-info { + display: flex; + gap: 8px; margin-bottom: 6px; + width: 80%; + } + + &--list-icon { + width: 16px; + height: 16px; + padding-top: 2px; } &--icon-policy-violation { @@ -47,9 +58,10 @@ justify-content: space-between; } - &--purpose-amount-block { + &--purpose-num-amount-block { display: flex; - justify-content: space-between; + flex-direction: column; + width: 100%; } &--currency { @@ -60,26 +72,31 @@ margin-right: -2px; } + &--amount-block { + margin-top: 10px; + } + &--amount { color: $black; - font-size: 20px; + font-size: 16px; line-height: 1.3; - margin-right: 6px; font-weight: 500; } &--purpose { - line-height: 23px; color: $black-2; - font-size: 18px; + font-size: 14px; font-weight: 500; - max-width: 60%; + max-width: 90%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } &--no-transactions { - font-size: 14px; + font-size: 12px; line-height: 18px; - color: $blue-black; + color: $dark-grey; } } diff --git a/src/app/shared/components/reports-card/reports-card.component.spec.ts b/src/app/shared/components/reports-card/reports-card.component.spec.ts index e580853140..e344c1c636 100644 --- a/src/app/shared/components/reports-card/reports-card.component.spec.ts +++ b/src/app/shared/components/reports-card/reports-card.component.spec.ts @@ -5,6 +5,7 @@ import { MatIconTestingModule } from '@angular/material/icon/testing'; import { MatIconModule } from '@angular/material/icon'; import { EllipsisPipe } from '../../pipes/ellipses.pipe'; import { HumanizeCurrencyPipe } from '../../pipes/humanize-currency.pipe'; +import { ExactCurrencyPipe } from '../../pipes/exact-currency.pipe'; import { FyCurrencyPipe } from '../../pipes/fy-currency.pipe'; import { CurrencyPipe } from '@angular/common'; import { ReportState } from '../../pipes/report-state.pipe'; @@ -18,7 +19,14 @@ describe('ReportsCardComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ReportsCardComponent, EllipsisPipe, HumanizeCurrencyPipe, ReportState, SnakeCaseToSpaceCase], + declarations: [ + ReportsCardComponent, + EllipsisPipe, + HumanizeCurrencyPipe, + ExactCurrencyPipe, + ReportState, + SnakeCaseToSpaceCase, + ], imports: [IonicModule.forRoot(), MatIconTestingModule, MatIconModule], providers: [FyCurrencyPipe, CurrencyPipe], }).compileComponents();