Skip to content

Commit

Permalink
fix: Move My Expenses To Platform: Fixed Offline Delete Button (#2666)
Browse files Browse the repository at this point in the history 
* fixing select all in offline

* fixed undefined error

* resolved comments

* fixing bug -2

* fixing bug -3

* fixing bugs -4

* fixing bugs -5

* changed button condition

* removed ngIf

* modified condition

* modified condition -2

* creating new method for condition

* fixing unit tests

* increased branch coverage

---------

Co-authored-by: Jay Budhadev <[email protected]>
  • Loading branch information
@jayfyle
jayfyle and Jay Budhadev authored Jan 9, 2024
1 parent 9a5b83d commit 1e36088
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 21 deletions.
9 changes: 3 additions & 6 deletions src/app/fyle/my-expenses-v2/my-expenses-v2.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,7 @@
<ion-button *ngIf="isMergeAllowed" (click)="mergeExpenses()">
<ion-icon src="../../../assets/svg/fy-merge.svg"></ion-icon>
</ion-button>
<ion-button
(click)="openDeleteExpensesPopover()"
[disabled]="selectedElements?.length === 0 || !expensesToBeDeleted || (expensesToBeDeleted?.length === 0 && cccExpenses > 0)"
>
<ion-button (click)="openDeleteExpensesPopover()" [disabled]="isDisabled">
<ion-icon src="../../../assets/svg/fy-delete.svg"></ion-icon>
</ion-button>
</ion-buttons>
Expand Down Expand Up @@ -178,9 +175,9 @@
[previousExpenseTxnDate]="list[i-1]?.tx_txn_dt"
[previousExpenseCreatedAt]="list[i-1]?.tx_created_at"
[isSelectionModeEnabled]="selectionMode"
[selectedElements]="selectedElements"
[selectedElements]="selectedOutboxExpenses"
[isOutboxExpense]="true"
(setMultiselectMode)="switchSelectionMode($event)"
(setMultiselectMode)="switchOutboxSelectionMode($event)"
(cardClickedForSelection)="selectOutboxExpense($event)"
>
</app-expense-card>
Expand Down
96 changes: 86 additions & 10 deletions src/app/fyle/my-expenses-v2/my-expenses-v2.page.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1050,6 +1050,57 @@ describe('MyExpensesV2Page', () => {
});
});

describe('switchOutboxSelectionMode(): ', () => {
beforeEach(() => {
component.selectionMode = true;
component.loadExpenses$ = new BehaviorSubject({
searchString: 'example',
});
component.headerState = HeaderState.simpleSearch;
component.allExpensesStats$ = of({ count: 10, amount: 1000 });
spyOn(component, 'selectExpense');
spyOn(component, 'setAllExpensesCountAndAmount');
spyOn(component, 'setOutboxExpenseStatsOnSelect');
});
it('should set headerState to simpleSearch if searchString is defined in loadData', () => {
component.switchOutboxSelectionMode();

expect(component.selectionMode).toBeFalse();
expect(component.headerState).toBe(HeaderState.simpleSearch);
expect(component.selectedOutboxExpenses).toEqual([]);
expect(component.selectExpense).not.toHaveBeenCalled();
});

it('should set headerState to base if searchString is defined in loadData and if expense is selected', () => {
component.loadExpenses$ = new BehaviorSubject({});
transactionService.getReportableExpenses.and.returnValue([]);
transactionService.getDeletableTxns.and.returnValue([]);
transactionService.excludeCCCExpenses.and.returnValue([]);

component.switchOutboxSelectionMode(apiExpenseRes[0]);

expect(component.selectionMode).toBeFalse();
expect(component.headerState).toBe(HeaderState.base);
expect(component.selectedOutboxExpenses.length).toEqual(1);
expect(component.setOutboxExpenseStatsOnSelect).toHaveBeenCalledTimes(2);
});

it('should update allExpensesStats$ and headerState if selectionMode is false', () => {
component.selectionMode = false;

component.switchOutboxSelectionMode();

expect(component.selectionMode).toBeTrue();
expect(component.headerState).toBe(HeaderState.multiselect);
expect(component.setOutboxExpenseStatsOnSelect).not.toHaveBeenCalled();
expect(component.selectExpense).not.toHaveBeenCalled();
component.allExpensesStats$.subscribe((stats) => {
expect(stats.count).toBe(0);
expect(stats.amount).toBe(0);
});
});
});

it('sendFirstExpenseCreatedEvent(): should store the first expense created event', fakeAsync(() => {
component.allExpensesStats$ = of({
count: 0,
Expand Down Expand Up @@ -2943,11 +2994,12 @@ describe('MyExpensesV2Page', () => {
});
});

describe('selectExpense(): ', () => {
describe('selectOutboxExpense(): ', () => {
beforeEach(() => {
transactionService.getReportableExpenses.and.returnValue(apiExpenseRes);
component.allExpensesCount = 1;
spyOn(component, 'setExpenseStatsOnSelect');
spyOn(component, 'setOutboxExpenseStatsOnSelect');
component.selectedOutboxExpenses = cloneDeep(apiExpenseRes);
transactionService.isMergeAllowed.and.returnValue(true);
transactionService.getDeletableTxns.and.returnValue(apiExpenseRes);
Expand All @@ -2963,8 +3015,8 @@ describe('MyExpensesV2Page', () => {

expect(component.selectedOutboxExpenses).toEqual([]);
expect(component.isReportableExpensesSelected).toBeFalse();
expect(component.selectAll).toBeTrue();
expect(component.setExpenseStatsOnSelect).toHaveBeenCalledTimes(1);
expect(component.selectAll).toBeFalse();
expect(component.setOutboxExpenseStatsOnSelect).toHaveBeenCalledTimes(1);
expect(transactionService.isMergeAllowed).toHaveBeenCalledOnceWith([]);
expect(component.isMergeAllowed).toBeTrue();
});
Expand All @@ -2979,8 +3031,8 @@ describe('MyExpensesV2Page', () => {

expect(component.selectedOutboxExpenses).toEqual([...expenseList4, expense]);
expect(component.isReportableExpensesSelected).toBeFalse();
expect(component.selectAll).toBeFalse();
expect(component.setExpenseStatsOnSelect).toHaveBeenCalledTimes(1);
expect(component.selectAll).toBeTrue();
expect(component.setOutboxExpenseStatsOnSelect).toHaveBeenCalledTimes(1);
expect(transactionService.isMergeAllowed).toHaveBeenCalledOnceWith([...expenseList4, expense]);
expect(component.isMergeAllowed).toBeTrue();
});
Expand All @@ -2994,8 +3046,8 @@ describe('MyExpensesV2Page', () => {

expect(component.selectedOutboxExpenses).toEqual([]);
expect(component.isReportableExpensesSelected).toBeFalse();
expect(component.selectAll).toBeTrue();
expect(component.setExpenseStatsOnSelect).toHaveBeenCalledTimes(1);
expect(component.selectAll).toBeFalse();
expect(component.setOutboxExpenseStatsOnSelect).toHaveBeenCalledTimes(1);
expect(transactionService.isMergeAllowed).toHaveBeenCalledOnceWith([]);
expect(component.isMergeAllowed).toBeTrue();
});
Expand All @@ -3008,7 +3060,7 @@ describe('MyExpensesV2Page', () => {
expect(component.selectedOutboxExpenses).toEqual(expectedSelectedElements);
expect(component.outboxExpensesToBeDeleted).toEqual(apiExpenseRes);
expect(component.cccExpenses).toBe(1);
expect(component.selectAll).toBeTrue();
expect(component.selectAll).toBeFalse();
});

it('should remove an expense from selectedOutboxExpenses if it is present in selectedOutboxExpenses and tx_id is not present in expense', () => {
Expand All @@ -3023,10 +3075,34 @@ describe('MyExpensesV2Page', () => {

expect(component.selectedOutboxExpenses).toEqual([]);
expect(component.isReportableExpensesSelected).toBeFalse();
expect(component.selectAll).toBeFalse();
expect(component.setExpenseStatsOnSelect).toHaveBeenCalledTimes(1);
expect(component.selectAll).toBeTrue();
expect(component.setOutboxExpenseStatsOnSelect).toHaveBeenCalledTimes(1);
expect(transactionService.isMergeAllowed).toHaveBeenCalledOnceWith([]);
expect(component.isMergeAllowed).toBeTrue();
});
});

describe('checkDeleteDisabled():', () => {
it('should check and enable the button for online mode', (done) => {
component.isConnected$ = of(true);
component.selectedElements = apiExpenses1;
component.expensesToBeDeleted = [];

component.checkDeleteDisabled().subscribe(() => {
expect(component.isDisabled).toBeFalse();
done();
});
});

it('should check and enable the button for offline mode', (done) => {
component.isConnected$ = of(false);
component.selectedOutboxExpenses = apiExpenseRes;
component.outboxExpensesToBeDeleted = [];

component.checkDeleteDisabled().subscribe(() => {
expect(component.isDisabled).toBeFalse();
done();
});
});
});
});
57 changes: 52 additions & 5 deletions src/app/fyle/my-expenses-v2/my-expenses-v2.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,8 @@ export class MyExpensesV2Page implements OnInit {

isNewReportsFlowEnabled = false;

isDisabled = false;

constructor(
private networkService: NetworkService,
private loaderService: LoaderService,
Expand Down Expand Up @@ -282,6 +284,31 @@ export class MyExpensesV2Page implements OnInit {
}
}

switchOutboxSelectionMode(expense?: Expense): void {
this.selectionMode = !this.selectionMode;
if (!this.selectionMode) {
if (this.loadExpenses$.getValue().searchString) {
this.headerState = HeaderState.simpleSearch;
} else {
this.headerState = HeaderState.base;
}

this.selectedOutboxExpenses = [];
this.setOutboxExpenseStatsOnSelect();
} else {
this.headerState = HeaderState.multiselect;
// setting Expense amount & count stats to zero on select init
this.allExpensesStats$ = of({
count: 0,
amount: 0,
});
}

if (expense) {
this.selectOutboxExpense(expense);
}
}

async sendFirstExpenseCreatedEvent(): Promise<void> {
// checking if the expense is first expense
const isFirstExpenseCreated = await this.storageService.get('isFirstExpenseCreated');
Expand Down Expand Up @@ -673,6 +700,8 @@ export class MyExpensesV2Page implements OnInit {
)
);
this.doRefresh();

this.checkDeleteDisabled();
}

setupNetworkWatcher(): void {
Expand Down Expand Up @@ -898,7 +927,7 @@ export class MyExpensesV2Page implements OnInit {
this.isReportableExpensesSelected =
this.transactionService.getReportableExpenses(this.selectedOutboxExpenses).length > 0;

if (this.selectOutboxExpense.length > 0) {
if (this.selectedOutboxExpenses.length > 0) {
this.outboxExpensesToBeDeleted = this.transactionService.getDeletableTxns(this.selectedOutboxExpenses);

this.outboxExpensesToBeDeleted = this.transactionService.excludeCCCExpenses(this.selectedOutboxExpenses);
Expand All @@ -907,12 +936,12 @@ export class MyExpensesV2Page implements OnInit {
}

// setting Expenses count and amount stats on select
if (this.allExpensesCount === this.selectOutboxExpense.length) {
if (this.allExpensesCount === this.selectedOutboxExpenses.length) {
this.selectAll = true;
} else {
this.selectAll = false;
}
this.setExpenseStatsOnSelect();
this.setOutboxExpenseStatsOnSelect();
this.isMergeAllowed = this.transactionService.isMergeAllowed(this.selectedOutboxExpenses);
}

Expand Down Expand Up @@ -1396,9 +1425,10 @@ export class MyExpensesV2Page implements OnInit {
this.selectedElements = [];
if (this.pendingTransactions.length > 0) {
this.selectedOutboxExpenses = this.pendingTransactions;
this.allExpensesCount = this.selectedElements.length;
this.allExpensesCount = this.pendingTransactions.length;
this.isReportableExpensesSelected =
this.transactionService.getReportableExpenses(this.selectedOutboxExpenses).length > 0;
this.outboxExpensesToBeDeleted = this.transactionService.getDeletableTxns(this.selectedOutboxExpenses);
this.setOutboxExpenseStatsOnSelect();
}

Expand All @@ -1421,7 +1451,7 @@ export class MyExpensesV2Page implements OnInit {
.subscribe((allExpenses) => {
this.selectedElements = this.selectedElements.concat(allExpenses);
if (this.selectedElements.length > 0) {
if (this.outboxExpensesToBeDeleted.length > 0) {
if (this.outboxExpensesToBeDeleted?.length) {
this.outboxExpensesToBeDeleted = this.transactionService.getDeletableTxns(this.outboxExpensesToBeDeleted);
}

Expand All @@ -1436,6 +1466,8 @@ export class MyExpensesV2Page implements OnInit {
});
} else {
this.selectedElements = [];
this.selectedOutboxExpenses = [];
this.outboxExpensesToBeDeleted = [];
this.isReportableExpensesSelected =
this.sharedExpenseService.getReportableExpenses(this.selectedElements).length > 0;
this.setExpenseStatsOnSelect();
Expand Down Expand Up @@ -1537,4 +1569,19 @@ export class MyExpensesV2Page implements OnInit {
showCamera(isCameraPreviewStarted: boolean): void {
this.isCameraPreviewStarted = isCameraPreviewStarted;
}

checkDeleteDisabled(): Observable<void> {
return this.isConnected$.pipe(
map((isConnected) => {
if (isConnected) {
this.isDisabled =
this.selectedElements?.length === 0 ||
!this.expensesToBeDeleted ||
(this.expensesToBeDeleted?.length === 0 && this.cccExpenses > 0);
} else if (!isConnected) {
this.isDisabled = this.selectedOutboxExpenses?.length === 0 || !this.outboxExpensesToBeDeleted;
}
})
);
}
}

0 comments on commit 1e36088

Please sign in to comment.