Skip to content

Commit 36e5006

Browse files
authored
feat: qbd direct skipped export log page settings (#1006)
1 parent 2b0aabf commit 36e5006

File tree

5 files changed

+227
-0
lines changed

5 files changed

+227
-0
lines changed

src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-export-log-routing.module.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
22
import { RouterModule, Routes } from '@angular/router';
33
import { QbdDirectExportLogComponent } from './qbd-direct-export-log.component';
44
import { QbdDirectCompleteExportLogComponent } from './qbd-direct-complete-export-log/qbd-direct-complete-export-log.component';
5+
import { QbdDirectSkippedExportLogComponent } from './qbd-direct-skipped-export-log/qbd-direct-skipped-export-log.component';
56

67
const routes: Routes = [
78
{
@@ -11,6 +12,10 @@ const routes: Routes = [
1112
{
1213
path: 'complete',
1314
component: QbdDirectCompleteExportLogComponent
15+
},
16+
{
17+
path: 'skipped',
18+
component: QbdDirectSkippedExportLogComponent
1419
}
1520
]
1621
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<div *ngIf="!expenses" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
2+
<app-loader></app-loader>
3+
</div>
4+
5+
<div class="tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-separator" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
6+
<div>
7+
<app-export-log-filter *ngIf="totalCount > 0 || (isDateSelected || searchQuery)"
8+
[exportLogForm]="skipExportLogForm"
9+
[hideCalendar]="hideCalendar"
10+
[dateOptions]="dateOptions"
11+
(handleSimpleSearch)="handleSimpleSearch($event)">
12+
</app-export-log-filter>
13+
14+
<app-skipped-export-log-table *ngIf="!isLoading" [filteredExpense]="filteredExpenses">
15+
</app-skipped-export-log-table>
16+
17+
<div *ngIf="totalCount > 0 && !isLoading" class="tw-p-24-px tw-border-t-1-px">
18+
<app-paginator
19+
[dropDownValue]="limit"
20+
[page]="currentPage"
21+
[totalCount]="totalCount"
22+
(pageSizeChangeEvent)="pageSizeChanges($event)"
23+
(pageOffsetChangeEvent)="pageChanges($event)">
24+
</app-paginator>
25+
</div>
26+
27+
<app-zero-state-with-illustration *ngIf="(isDateSelected || searchQuery) && totalCount === 0 && !isLoading"
28+
[mainText]="brandingConfig.brandId === 'fyle' ? 'Sorry, no results found!': 'Sorry, no results found'"
29+
[subText]="'We could not find what you were looking for. Kindly check the keywords again.'">
30+
</app-zero-state-with-illustration>
31+
32+
</div>
33+
34+
<app-zero-state-with-illustration *ngIf="totalCount === 0 && (!isDateSelected && !searchQuery) && !isLoading"
35+
[mainText]="brandingConfig.brandId === 'fyle' ? 'No records to show yet!': 'No records to show yet'"
36+
[subText]="brandingConfig.brandId === 'fyle' ? 'All your expenses that were skipped from exporting will be stored here.': 'All your expenses that are skipped from exporting will be visible here'">
37+
</app-zero-state-with-illustration>
38+
</div>

src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-skipped-export-log/qbd-direct-skipped-export-log.component.scss

Whitespace-only changes.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { QbdDirectSkippedExportLogComponent } from './qbd-direct-skipped-export-log.component';
4+
5+
describe('QbdDirectSkippedExportLogComponent', () => {
6+
let component: QbdDirectSkippedExportLogComponent;
7+
let fixture: ComponentFixture<QbdDirectSkippedExportLogComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
imports: [QbdDirectSkippedExportLogComponent]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(QbdDirectSkippedExportLogComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import { CommonModule } from '@angular/common';
2+
import { Component, OnInit } from '@angular/core';
3+
import { FormGroup, FormBuilder } from '@angular/forms';
4+
import { Subject, debounceTime } from 'rxjs';
5+
import { brandingConfig } from 'src/app/branding/c1-contents-config';
6+
import { AccountingExportModel, SkippedAccountingExportModel } from 'src/app/core/models/db/accounting-export.model';
7+
import { PaginatorPage } from 'src/app/core/models/enum/enum.model';
8+
import { SkipExportList, SkipExportLogResponse, SkipExportLog } from 'src/app/core/models/intacct/db/expense-group.model';
9+
import { Paginator } from 'src/app/core/models/misc/paginator.model';
10+
import { DateFilter, SelectedDateFilter } from 'src/app/core/models/qbd/misc/qbd-date-filter.model';
11+
import { AccountingExportService } from 'src/app/core/services/common/accounting-export.service';
12+
import { ExportLogService } from 'src/app/core/services/common/export-log.service';
13+
import { PaginatorService } from 'src/app/core/services/common/paginator.service';
14+
import { WindowService } from 'src/app/core/services/common/window.service';
15+
import { UserService } from 'src/app/core/services/misc/user.service';
16+
import { SharedModule } from 'src/app/shared/shared.module';
17+
18+
@Component({
19+
selector: 'app-qbd-direct-skipped-export-log',
20+
standalone: true,
21+
imports: [CommonModule, SharedModule],
22+
templateUrl: './qbd-direct-skipped-export-log.component.html',
23+
styleUrl: './qbd-direct-skipped-export-log.component.scss'
24+
})
25+
export class QbdDirectSkippedExportLogComponent implements OnInit {
26+
27+
isLoading: boolean = true;
28+
29+
totalCount: number = 0;
30+
31+
skipExportLogForm: FormGroup;
32+
33+
dateOptions: DateFilter[] = AccountingExportModel.getDateOptionsV2();
34+
35+
expenses: SkipExportList[];
36+
37+
filteredExpenses: SkipExportList[];
38+
39+
limit: number;
40+
41+
offset: number = 0;
42+
43+
currentPage: number = 1;
44+
45+
isDateSelected: boolean = false;
46+
47+
selectedDateFilter: SelectedDateFilter | null;
48+
49+
readonly brandingConfig = brandingConfig;
50+
51+
searchQuery: string | null;
52+
53+
private searchQuerySubject = new Subject<string>();
54+
55+
hideCalendar: boolean;
56+
57+
constructor(
58+
private formBuilder: FormBuilder,
59+
private userService: UserService,
60+
private exportLogService: ExportLogService,
61+
private accountingExportService: AccountingExportService,
62+
private windowService: WindowService,
63+
private paginatorService: PaginatorService
64+
) {
65+
this.searchQuerySubject.pipe(
66+
debounceTime(1000)
67+
).subscribe((query: string) => {
68+
this.searchQuery = query;
69+
this.offset = 0;
70+
this.currentPage = Math.ceil(this.offset / this.limit) + 1;
71+
this.getSkippedExpenses(this.limit, this.offset);
72+
});
73+
}
74+
75+
public handleSimpleSearch(query: string) {
76+
this.searchQuerySubject.next(query);
77+
}
78+
79+
getSkippedExpenses(limit: number, offset: number) {
80+
this.isLoading = true;
81+
const skippedExpenseGroup: SkipExportList[] = [];
82+
83+
if (this.limit !== limit) {
84+
this.paginatorService.storePageSize(PaginatorPage.EXPORT_LOG, limit);
85+
}
86+
87+
return this.exportLogService.getSkippedExpenses(limit, offset, this.selectedDateFilter, this.searchQuery).subscribe((skippedExpenses: SkipExportLogResponse) => {
88+
this.totalCount = skippedExpenses.count;
89+
const orgId = this.userService.getUserProfile().org_id;
90+
skippedExpenses.results.forEach((skippedExpense: SkipExportLog) => {
91+
skippedExpenseGroup.push(SkippedAccountingExportModel.parseAPIResponseToSkipExportList(skippedExpense, orgId));
92+
});
93+
94+
this.filteredExpenses = skippedExpenseGroup;
95+
this.expenses = [...this.filteredExpenses];
96+
this.isLoading = false;
97+
});
98+
}
99+
100+
pageSizeChanges(limit: number): void {
101+
this.isLoading = true;
102+
this.limit = limit;
103+
this.currentPage = 1;
104+
this.getSkippedExpenses(limit, this.offset);
105+
}
106+
107+
pageChanges(offset: number): void {
108+
this.isLoading = true;
109+
this.offset = offset;
110+
this.currentPage = Math.ceil(offset / this.limit) + 1;
111+
this.getSkippedExpenses(this.limit, offset);
112+
}
113+
114+
private setupForm(): void {
115+
this.skipExportLogForm = this.formBuilder.group({
116+
searchOption: [''],
117+
dateRange: [null],
118+
start: [''],
119+
end: ['']
120+
});
121+
122+
this.skipExportLogForm.controls.start.valueChanges.subscribe((dateRange) => {
123+
const paginator: Paginator = this.paginatorService.getPageSize(PaginatorPage.EXPORT_LOG);
124+
if (!dateRange) {
125+
this.dateOptions = AccountingExportModel.getDateOptionsV2();
126+
this.isDateSelected = false;
127+
this.selectedDateFilter = null;
128+
this.getSkippedExpenses(paginator.limit, paginator.offset);
129+
} else if (dateRange.length && dateRange[1]) {
130+
this.hideCalendar = true;
131+
this.selectedDateFilter = {
132+
startDate: dateRange[0],
133+
endDate: dateRange[1]
134+
};
135+
136+
this.isDateSelected = true;
137+
138+
setTimeout(() => {
139+
this.hideCalendar = false;
140+
}, 10);
141+
142+
this.getSkippedExpenses(paginator.limit, paginator.offset);
143+
}
144+
});
145+
}
146+
147+
private getSkippedExpensesAndSetupPage(): void {
148+
this.setupForm();
149+
150+
const paginator: Paginator = this.paginatorService.getPageSize(PaginatorPage.EXPORT_LOG);
151+
this.limit = paginator.limit;
152+
this.offset = paginator.offset;
153+
154+
this.getSkippedExpenses(paginator.limit, paginator.offset);
155+
}
156+
157+
ngOnInit(): void {
158+
this.getSkippedExpensesAndSetupPage();
159+
}
160+
161+
}

0 commit comments

Comments
 (0)