Advance search export log page intacct (#636)

fylein · Mar 7, 2024 · 0118af2 · 0118af2
1 parent e7bc266
commit 0118af2
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 53 deletions.
diff --git a/src/app/core/services/common/export-log.service.ts b/src/app/core/services/common/export-log.service.ts
@@ -50,17 +50,13 @@ export class ExportLogService {
     return this.apiService.get(`/workspaces/${workspaceId}/fyle/expenses/`, params);
   }
 
-  getExpenseGroups(state: TaskLogState, limit: number, offset: number, selectedDateFilter: SelectedDateFilter | null, exportedAt?: string | null, query?: string | null, appName?: AppName): Observable<ExpenseGroupResponse> {
+  getExpenseGroups(state: TaskLogState, limit: number, offset: number, selectedDateFilter: SelectedDateFilter | null, exportedAt?: string | null, query?: string | null): Observable<ExpenseGroupResponse> {
     const params: ExpenseGroupParam = {
       limit,
       offset
     };
 
-    if (appName === AppName.INTACCT) {
-      params.state = state;
-    } else {
-      params.tasklog__status = state;
-    }
+    params.tasklog__status = state;
 
     if (query) {
       params.expenses__expense_number = query;
@@ -72,21 +68,8 @@ export class ExportLogService {
     if (selectedDateFilter) {
       const startDate = selectedDateFilter.startDate.toLocaleDateString().split('/');
       const endDate = selectedDateFilter.endDate.toLocaleDateString().split('/');
-      if (appName === AppName.INTACCT) {
-        params.start_date = `${startDate[2]}-${startDate[1]}-${startDate[0]}T00:00:00`;
-        params.end_date = `${endDate[2]}-${endDate[1]}-${endDate[0]}T23:59:59`;
-      } else {
         params.exported_at__gte = `${startDate[2]}-${startDate[1]}-${startDate[0]}T00:00:00`;
         params.exported_at__lte = `${endDate[2]}-${endDate[1]}-${endDate[0]}T23:59:59`;
-      }
-    }
-
-    if (exportedAt) {
-      if (appName === AppName.INTACCT) {
-        params.exported_at = exportedAt;
-      } else {
-        params.exported_at__gte = exportedAt;
-      }
     }
 
     return this.apiService.get(`/workspaces/${this.workspaceId}/fyle/expense_groups/`, params);

diff --git a/...tacct-export-log/intacct-completed-export-log/intacct-completed-export-log.component.html b/...tacct-export-log/intacct-completed-export-log/intacct-completed-export-log.component.html
@@ -1,23 +1,24 @@
-<div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
+<div *ngIf="!accountingExports" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
     <app-loader></app-loader>
 </div>
 
-<div *ngIf="!isLoading" class="tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-border-tertiary" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
+<div class="tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-border-tertiary" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
     <div>
-        <app-export-log-filter *ngIf="totalCount > 0 || selectedDateFilter"
+        <app-export-log-filter *ngIf="totalCount > 0 || (isDateSelected || searchQuery)"
             [exportLogForm]="exportLogForm"
             [dateOptions]="dateOptions"
             (handleSimpleSearch)="handleSimpleSearch($event)">
         </app-export-log-filter>
 
         <app-export-log-table
+            *ngIf="!isLoading"
             [filteredExpenseGroups]="filteredAccountingExports"
             [appName]="appName"
             [isExportLogTable]="true"
             [isDashboardFailed]="false">
         </app-export-log-table>
 
-        <div *ngIf="filteredAccountingExports.length > 0" class="tw-p-24-px tw-border-t-1-px">
+        <div *ngIf="totalCount > 0 && !isLoading" class="tw-p-24-px tw-border-t-1-px">
             <app-paginator
                 [dropDownValue]="limit"
                 [page]="currentPage"
@@ -27,13 +28,13 @@
             </app-paginator>
         </div>
 
-        <app-zero-state-with-illustration *ngIf="!filteredAccountingExports.length && !selectedDateFilter && totalCount > 0"
+        <app-zero-state-with-illustration *ngIf="(isDateSelected || searchQuery) && totalCount === 0 && !isLoading"
             [mainText]="brandingConfig.brandId === 'fyle' ? 'Sorry, no results found!': 'Sorry, no results found'"
             [subText]="'We could not find what you were looking for. Kindly check the keywords again.'">
         </app-zero-state-with-illustration>
     </div>
 
-    <app-zero-state-with-illustration *ngIf="totalCount === 0"
+    <app-zero-state-with-illustration *ngIf="totalCount === 0 && (!isDateSelected && !searchQuery) && !isLoading"
         [mainText]="brandingConfig.brandId === 'fyle' ? 'No records to show yet!': 'No records to show yet'"
         [subText]="brandingConfig.brandId === 'fyle' ? 'All your successful exports and their details will be stored here.': 'All your expenses that are successfully exported will be visible here.'">
     </app-zero-state-with-illustration>

diff --git a/...intacct-export-log/intacct-completed-export-log/intacct-completed-export-log.component.ts b/...intacct-export-log/intacct-completed-export-log/intacct-completed-export-log.component.ts
@@ -12,6 +12,8 @@ import { environment } from 'src/environments/environment';
 import { brandingConfig, brandingFeatureConfig } from 'src/app/branding/branding-config';
 import { AccountingExportList, AccountingExportModel } from 'src/app/core/models/db/accounting-export.model';
 import { UserService } from 'src/app/core/services/misc/user.service';
+import { Subject } from 'rxjs/internal/Subject';
+import { debounceTime } from 'rxjs/internal/operators/debounceTime';
 
 @Component({
   selector: 'app-intacct-completed-export-log',
@@ -60,23 +62,34 @@ export class IntacctCompletedExportLogComponent implements OnInit {
 
   readonly brandingConfig = brandingConfig;
 
+  searchQuery: string | null;
+
+  private searchQuerySubject = new Subject<string>();
+
   constructor(
     private formBuilder: FormBuilder,
     private trackingService: TrackingService,
     private exportLogService: ExportLogService,
     private paginatorService: PaginatorService,
     private userService: UserService
-  ) { }
+  ) {
+    this.searchQuerySubject.pipe(
+      debounceTime(1000)
+    ).subscribe((query: string) => {
+      this.searchQuery = query;
+      this.offset = 0;
+      this.currentPage = Math.ceil(this.offset / this.limit) + 1;
+      this.getAccountingExports(this.limit, this.offset);
+    });
+  }
 
   openExpenseinFyle(expense_id: string) {
     const url = `${environment.fyle_app_url}/app/admin/#/view_expense/${expense_id}`;
     window.open(url, '_blank');
   }
 
   public handleSimpleSearch(query: string) {
-    this.filteredAccountingExports = this.accountingExports.filter((group: AccountingExportList) => {
-      return AccountingExportModel.getfilteredAccountingExports(query, group);
-    });
+    this.searchQuerySubject.next(query);
   }
 
   pageSizeChanges(limit: number): void {
@@ -103,10 +116,10 @@ export class IntacctCompletedExportLogComponent implements OnInit {
       this.paginatorService.storePageSize(PaginatorPage.EXPORT_LOG, limit);
     }
 
-    this.exportLogService.getExpenseGroups(TaskLogState.COMPLETE, limit, offset, this.selectedDateFilter, null, null, AppName.INTACCT).subscribe((accountingExportResponse: ExpenseGroupResponse) => {
-      if (!this.isDateSelected) {
-        this.totalCount = accountingExportResponse.count;
-      }
+    this.exportLogService.getExpenseGroups(TaskLogState.COMPLETE, limit, offset, this.selectedDateFilter, null, this.searchQuery).subscribe((accountingExportResponse: ExpenseGroupResponse) => {
+
+      this.totalCount = accountingExportResponse.count;
+
       const accountingExports: AccountingExportList[] = accountingExportResponse.results.map((accountingExport: ExpenseGroup) =>
         AccountingExportModel.parseExpenseGroupAPIResponseToExportLog(accountingExport, this.org_id, this.appName)
       );
@@ -128,13 +141,16 @@ export class IntacctCompletedExportLogComponent implements OnInit {
     this.exportLogForm.controls.start.valueChanges.subscribe((dateRange) => {
       const paginator: Paginator = this.paginatorService.getPageSize(PaginatorPage.EXPORT_LOG);
       if (!dateRange) {
+        this.dateOptions = AccountingExportModel.getDateOptionsV2();
         this.selectedDateFilter = null;
+        this.isDateSelected = false;
         this.getAccountingExports(paginator.limit, paginator.offset);
         } else if (dateRange.length && dateRange[1]) {
           this.selectedDateFilter = {
             startDate: dateRange[0],
             endDate: dateRange[1]
           };
+          this.isDateSelected = true;
 
           this.trackDateFilter('existing', this.selectedDateFilter);
           this.getAccountingExports(paginator.limit, paginator.offset);

diff --git a/...ct-main/intacct-export-log/intacct-skip-export-log/intacct-skip-export-log.component.html b/...ct-main/intacct-export-log/intacct-skip-export-log/intacct-skip-export-log.component.html
@@ -1,19 +1,19 @@
-<div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
+<div *ngIf="!expenses" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
     <app-loader></app-loader>
 </div>
 
-<div *ngIf="!isLoading" 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'}">
+<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'}">
     <div>
-        <app-export-log-filter *ngIf="totalCount > 0 || selectedDateFilter"
+        <app-export-log-filter *ngIf="totalCount > 0 || (isDateSelected || searchQuery)"
             [exportLogForm]="skipExportLogForm"
             [dateOptions]="dateOptions"
             (handleSimpleSearch)="handleSimpleSearch($event)">
         </app-export-log-filter>
 
-        <app-skipped-export-log-table [filteredExpense]="filteredExpenses">
+        <app-skipped-export-log-table *ngIf="!isLoading" [filteredExpense]="filteredExpenses" >
         </app-skipped-export-log-table>
 
-        <div *ngIf="filteredExpenses.length > 0" class="tw-p-24-px tw-border-t-1-px">
+        <div *ngIf="totalCount > 0 && !isLoading" class="tw-p-24-px tw-border-t-1-px">
             <app-paginator
                 [dropDownValue]="limit"
                 [page]="currentPage"
@@ -23,14 +23,14 @@
             </app-paginator>
         </div>
 
-        <app-zero-state-with-illustration *ngIf="!filteredExpenses.length && !selectedDateFilter && totalCount > 0"
+        <app-zero-state-with-illustration *ngIf="(isDateSelected || searchQuery) && totalCount === 0 && !isLoading"
             [mainText]="brandingConfig.brandId === 'fyle' ? 'Sorry, no results found!': 'Sorry, no results found'"
             [subText]="'We could not find what you were looking for. Kindly check the keywords again.'">
         </app-zero-state-with-illustration>
 
     </div>
 
-    <app-zero-state-with-illustration *ngIf="totalCount === 0"
+    <app-zero-state-with-illustration *ngIf="totalCount === 0 && (!isDateSelected && !searchQuery) && !isLoading"
     [mainText]="brandingConfig.brandId === 'fyle' ? 'No records to show yet!': 'No records to show yet'"
     [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'">
     </app-zero-state-with-illustration>

diff --git a/...acct-main/intacct-export-log/intacct-skip-export-log/intacct-skip-export-log.component.ts b/...acct-main/intacct-export-log/intacct-skip-export-log/intacct-skip-export-log.component.ts
@@ -9,6 +9,8 @@ import { ExportLogService } from 'src/app/core/services/common/export-log.servic
 import { PaginatorService } from 'src/app/core/services/si/si-core/paginator.service';
 import { brandingConfig, brandingFeatureConfig } from 'src/app/branding/branding-config';
 import { AccountingExportModel, SkippedAccountingExportModel } from 'src/app/core/models/db/accounting-export.model';
+import { debounceTime } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 @Component({
   selector: 'app-intacct-skip-export-log',
@@ -57,17 +59,29 @@ export class IntacctSkipExportLogComponent implements OnInit {
 
   readonly brandingConfig = brandingConfig;
 
+  searchQuery: string | null;
+
+  private searchQuerySubject = new Subject<string>();
+
+
   constructor(
     private formBuilder: FormBuilder,
     private trackingService: TrackingService,
     private exportLogService: ExportLogService,
     private paginatorService: PaginatorService
-  ) { }
+  ) {
+    this.searchQuerySubject.pipe(
+    debounceTime(1000)
+  ).subscribe((query: string) => {
+    this.searchQuery = query;
+    this.offset = 0;
+    this.currentPage = Math.ceil(this.offset / this.limit) + 1;
+    this.getSkippedExpenses(this.limit, this.offset);
+  });
+}
 
   public handleSimpleSearch(query: string) {
-    this.filteredExpenses = this.expenses.filter((group: SkipExportList) => {
-      return SkippedAccountingExportModel.getfilteredSkippedAccountingExports(query, group);
-    });
+    this.searchQuerySubject.next(query);
   }
 
   pageSizeChanges(limit: number): void {
@@ -94,10 +108,8 @@ export class IntacctSkipExportLogComponent implements OnInit {
       this.paginatorService.storePageSize(PaginatorPage.EXPORT_LOG, limit);
     }
 
-    return this.exportLogService.getSkippedExpenses(limit, offset, this.selectedDateFilter, null).subscribe((skippedExpenses: SkipExportLogResponse) => {
-      if (!this.isDateSelected) {
+    return this.exportLogService.getSkippedExpenses(limit, offset, this.selectedDateFilter, this.searchQuery).subscribe((skippedExpenses: SkipExportLogResponse) => {
         this.totalCount = skippedExpenses.count;
-      }
 
       skippedExpenses.results.forEach((skippedExpense: SkipExportLog) => {
         skippedExpenseGroup.push(SkippedAccountingExportModel.parseAPIResponseToSkipExportList(skippedExpense));
@@ -118,18 +130,24 @@ export class IntacctSkipExportLogComponent implements OnInit {
     });
 
     this.skipExportLogForm.controls.start.valueChanges.subscribe((dateRange) => {
-      if (dateRange[1]) {
+      const paginator: Paginator = this.paginatorService.getPageSize(PaginatorPage.EXPORT_LOG);
+      if (!dateRange) {
+        this.dateOptions = AccountingExportModel.getDateOptionsV2();
+        this.isDateSelected = false;
+        this.selectedDateFilter = null;
+
+        this.getSkippedExpenses(paginator.limit, paginator.offset);
+      } else if (dateRange.length && dateRange[1]) {
         this.selectedDateFilter = {
           startDate: dateRange[0],
           endDate: dateRange[1]
         };
 
-        this.trackDateFilter('existing', this.selectedDateFilter);
+        this.isDateSelected = true;
 
-        const paginator: Paginator = this.paginatorService.getPageSize(PaginatorPage.EXPORT_LOG);
         this.getSkippedExpenses(paginator.limit, paginator.offset);
-      }
-    });
+    }
+  });
   }
 
   private getSkippedExpensesAndSetupPage(): void {

diff --git a/.../qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.html b/.../qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.html
@@ -1,3 +1,7 @@
+<div *ngIf="!expenses" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
+    <app-loader></app-loader>
+</div>
+
 <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'}">
     <div>
         <app-export-log-filter *ngIf="totalCount > 0 || (isDateSelected || searchQuery)"

diff --git a/.../dashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.ts b/.../dashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.ts
@@ -60,7 +60,7 @@ export class DashboardExportSummarySectionComponent implements OnInit {
   }
 
   private getExpenseGroups(limit: number, offset: number, status: AccountingExportStatus, lastExportedAt?: string | null): void {
-    this.exportLogService.getExpenseGroups((status as unknown as TaskLogState), limit, offset, null, lastExportedAt, null, this.appName).subscribe((accountingExportResponse: ExpenseGroupResponse) => {
+    this.exportLogService.getExpenseGroups((status as unknown as TaskLogState), limit, offset, null, lastExportedAt).subscribe((accountingExportResponse: ExpenseGroupResponse) => {
       const accountingExports: AccountingExportList[] = accountingExportResponse.results.map((accountingExport: ExpenseGroup) =>
         AccountingExportModel.parseExpenseGroupAPIResponseToExportLog(accountingExport, this.org_id, this.appName)
       );