Advance export log search for ms-dynamics and sage300 (#674)

* Advance Search for Export log page * Advance search for ms dynamics * linting fix * Resolved comments * removing isLoading
fylein · Mar 21, 2024 · ef58e84 · ef58e84
1 parent f8e406a
commit ef58e84
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 85 deletions.
diff --git a/src/app/core/models/db/accounting-export.model.ts b/src/app/core/models/db/accounting-export.model.ts
@@ -54,7 +54,12 @@ export type AccountingExportGetParam = {
     limit: number,
     offset: number,
     exported_at__lte?: string,
-    exported_at__gte?: string
+    exported_at__gte?: string,
+    expenses__expense_number?: string;
+    expenses__employee_name?: string;
+    expenses__employee_email?: string;
+    expenses__claim_number?: string;
+
 }
 
 export class AccountingExportModel {

diff --git a/src/app/core/services/common/accounting-export.service.ts b/src/app/core/services/common/accounting-export.service.ts
@@ -39,23 +39,30 @@ export class AccountingExportService {
     return this.apiService.get(`/workspaces/${this.workspaceId}/accounting_exports/count/`, apiParams);
   }
 
-  getAccountingExports(type: string[], status: string[], exportableAccountingExportIds: number[] | null, limit: number, offset: number, selectedDateFilter? : SelectedDateFilter | null, exportedAt?: string | null): Observable<any> {
+  getAccountingExports(type: string[], status: string[], exportableAccountingExportIds: number[] | null, limit: number, offset: number, selectedDateFilter? : SelectedDateFilter | null, exportedAt?: string | null, searchQuery?: string | null): Observable<any> {
     const apiParams: AccountingExportGetParam = {
       type__in: type,
       status__in: status,
       limit: limit,
       offset: offset
     };
 
+    if (searchQuery){
+      apiParams.expenses__claim_number = searchQuery;
+      apiParams.expenses__employee_email = searchQuery;
+      apiParams.expenses__employee_name = searchQuery;
+      apiParams.expenses__expense_number = searchQuery;
+    }
+
     if (exportableAccountingExportIds?.length) {
       apiParams.id__in = exportableAccountingExportIds;
     }
 
     if (selectedDateFilter) {
       const exportedAtLte = selectedDateFilter.startDate.toLocaleDateString().split('/');
       const exportedAtGte = selectedDateFilter.endDate.toLocaleDateString().split('/');
-      apiParams.exported_at__lte = `${exportedAtLte[2]}-${exportedAtLte[1]}-${exportedAtLte[0]}T00:00:00`;
-      apiParams.exported_at__gte = `${exportedAtGte[2]}-${exportedAtGte[1]}-${exportedAtGte[0]}T23:59:59`;
+      apiParams.exported_at__gte = `${exportedAtLte[2]}-${exportedAtLte[1]}-${exportedAtLte[0]}T00:00:00`;
+      apiParams.exported_at__lte = `${exportedAtGte[2]}-${exportedAtGte[1]}-${exportedAtGte[0]}T23:59:59`;
     }
 
     if (exportedAt) {

diff --git a/...usiness-central-main/business-central-dashboard/business-central-dashboard.component.html b/...usiness-central-main/business-central-dashboard/business-central-dashboard.component.html
@@ -42,4 +42,4 @@
         >
     </app-dashboard-error-section>
     </div>
-</div>
+</div>
diff --git a/.../business-central-complete-export-log/business-central-complete-export-log.component.html b/.../business-central-complete-export-log/business-central-complete-export-log.component.html
@@ -1,43 +1,44 @@
-<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-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
+<div class="tw-rounded-8-px tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
     <div>
-        <app-export-log-filter *ngIf="totalCount > 0 || selectedDateFilter"
+        <app-export-log-filter *ngIf="totalCount > 0 || (isDateSelected || searchQuery)"
             [exportLogForm]="exportLogForm"
             [hideCalendar]="hideCalendar"
             [dateOptions]="dateOptions"
             (handleSimpleSearch)="handleSimpleSearch($event)">
         </app-export-log-filter>
 
-        <app-export-log-table 
+        <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">
-            <app-paginator 
-                [dropDownValue]="limit" 
-                [page]="currentPage" 
-                [totalCount]="totalCount" 
-                (pageSizeChangeEvent)="pageSizeChanges($event)" 
+        <div *ngIf="totalCount > 0 && !isLoading" class="tw-p-24-px tw-border-t-1-px">
+            <app-paginator
+                [dropDownValue]="limit"
+                [page]="currentPage"
+                [totalCount]="totalCount"
+                (pageSizeChangeEvent)="pageSizeChanges($event)"
                 (pageOffsetChangeEvent)="pageChanges($event)">
             </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]="'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]="'No records to show yet!'"
     [subText]="'All your successful exports and their details will be stored here.'">
     </app-zero-state-with-illustration>
 
-</div>
+</div>
diff --git a/...og/business-central-complete-export-log/business-central-complete-export-log.component.ts b/...og/business-central-complete-export-log/business-central-complete-export-log.component.ts
@@ -12,6 +12,9 @@ import { WindowService } from 'src/app/core/services/common/window.service';
 import { TrackingService } from 'src/app/core/services/integration/tracking.service';
 import { UserService } from 'src/app/core/services/misc/user.service';
 
+import { debounceTime } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
 @Component({
   selector: 'app-business-central-complete-export-log',
   templateUrl: './business-central-complete-export-log.component.html',
@@ -49,23 +52,35 @@ export class BusinessCentralCompleteExportLogComponent implements OnInit {
 
   private org_id: string = this.userService.getUserProfile().org_id;
 
+  searchQuery: string | null;
+
+  private searchQuerySubject = new Subject<string>();
+
+
   constructor(
     private formBuilder: FormBuilder,
     private trackingService: TrackingService,
     private accountingExportService: AccountingExportService,
     private windowService: WindowService,
     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(expenseId: string) {
     this.windowService.openInNewTab(AccountingExportModel.getFyleExpenseUrl(expenseId));
   }
 
   public handleSimpleSearch(query: string) {
-    this.filteredAccountingExports = this.accountingExports.filter((group: AccountingExportList) => {
-      return AccountingExportModel.getfilteredAccountingExports(query, group);
-    });
+    this.searchQuerySubject.next(query);
   }
 
   pageSizeChanges(limit: number): void {
@@ -89,10 +104,9 @@ export class BusinessCentralCompleteExportLogComponent implements OnInit {
       this.paginatorService.storePageSize(PaginatorPage.EXPORT_LOG, limit);
     }
 
-    this.accountingExportService.getAccountingExports([BusinessCentralExportType.PURCHASE_INVOICE, BusinessCentralExportType.JOURNAL_ENTRY], [AccountingExportStatus.COMPLETE], null, limit, offset, this.selectedDateFilter).subscribe(accountingExportResponse => {
-        if (!this.isDateSelected) {
+    this.accountingExportService.getAccountingExports([BusinessCentralExportType.PURCHASE_INVOICE, BusinessCentralExportType.JOURNAL_ENTRY], [AccountingExportStatus.COMPLETE], null, limit, offset, this.selectedDateFilter, null, this.searchQuery).subscribe(accountingExportResponse => {
           this.totalCount = accountingExportResponse.count;
-        }
+
         const accountingExports: AccountingExportList[] = accountingExportResponse.results.map((accountingExport: AccountingExport) =>
           AccountingExportModel.parseAPIResponseToExportLog(accountingExport, this.org_id)
         );
@@ -123,14 +137,15 @@ export class BusinessCentralCompleteExportLogComponent implements OnInit {
       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.hideCalendar = true;
         this.selectedDateFilter = {
           startDate: dateRange[0],
           endDate: dateRange[1]
         };
-
+        this.isDateSelected = true;
         this.trackDateFilter('existing', this.selectedDateFilter);
 
         setTimeout(() => {

diff --git a/...og/business-central-skipped-export-log/business-central-skipped-export-log.component.html b/...og/business-central-skipped-export-log/business-central-skipped-export-log.component.html
@@ -1,37 +1,37 @@
-<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-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
+<div class="tw-rounded-8-px tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
     <div>
-        <app-export-log-filter *ngIf="totalCount > 0 || selectedDateFilter"
+        <app-export-log-filter *ngIf="totalCount > 0 || (isDateSelected || searchQuery)"
             [exportLogForm]="skipExportLogForm"
             [hideCalendar]="hideCalendar"
             [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">
-            <app-paginator 
-                [dropDownValue]="limit" 
-                [page]="currentPage" 
-                [totalCount]="totalCount" 
-                (pageSizeChangeEvent)="pageSizeChanges($event)" 
+        <div *ngIf="totalCount > 0 && !isLoading" class="tw-p-24-px tw-border-t-1-px">
+            <app-paginator
+                [dropDownValue]="limit"
+                [page]="currentPage"
+                [totalCount]="totalCount"
+                (pageSizeChangeEvent)="pageSizeChanges($event)"
                 (pageOffsetChangeEvent)="pageChanges($event)">
             </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]="'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]="'No records to show yet!'"
     [subText]="'All your expenses that were skipped from exporting will be stored here.'">
     </app-zero-state-with-illustration>

diff --git a/...-log/business-central-skipped-export-log/business-central-skipped-export-log.component.ts b/...-log/business-central-skipped-export-log/business-central-skipped-export-log.component.ts
@@ -9,6 +9,10 @@ import { ExportLogService } from 'src/app/core/services/common/export-log.servic
 import { PaginatorService } from 'src/app/core/services/common/paginator.service';
 import { TrackingService } from 'src/app/core/services/integration/tracking.service';
 
+
+import { debounceTime } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
 @Component({
   selector: 'app-business-central-skipped-export-log',
   templateUrl: './business-central-skipped-export-log.component.html',
@@ -38,19 +42,30 @@ export class BusinessCentralSkippedExportLogComponent implements OnInit {
 
   selectedDateFilter: SelectedDateFilter | null;
 
+  searchQuery: string | null;
+
+  private searchQuerySubject = new Subject<string>();
+
   hideCalendar: boolean;
 
   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);
   }
 
   getSkippedExpenses(limit: number, offset: number) {
@@ -62,9 +77,8 @@ export class BusinessCentralSkippedExportLogComponent implements OnInit {
     }
 
     return this.exportLogService.getSkippedExpenses(limit, offset, this.selectedDateFilter, null).subscribe((skippedExpenses: SkipExportLogResponse) => {
-      if (!this.isDateSelected) {
-        this.totalCount = skippedExpenses.count;
-      }
+
+      this.totalCount = skippedExpenses.count;
 
       skippedExpenses.results.forEach((skippedExpense: SkipExportLog) => {
         skippedExpenseGroup.push(SkippedAccountingExportModel.parseAPIResponseToSkipExportList(skippedExpense));
@@ -103,6 +117,7 @@ export class BusinessCentralSkippedExportLogComponent implements OnInit {
       if (!dateRange) {
         this.dateOptions = AccountingExportModel.getDateOptionsV2();
         this.selectedDateFilter = null;
+        this.isDateSelected = false;
         this.getSkippedExpenses(paginator.limit, paginator.offset);
       } else if (dateRange.length && dateRange[1]) {
         this.hideCalendar = true;
@@ -111,6 +126,7 @@ export class BusinessCentralSkippedExportLogComponent implements OnInit {
           endDate: dateRange[1]
         };
 
+        this.isDateSelected = true;
         this.trackDateFilter('existing', this.selectedDateFilter);
 
         setTimeout(() => {

diff --git a/...sage300-export-log/sage300-complete-export-log/sage300-complete-export-log.component.html b/...sage300-export-log/sage300-complete-export-log/sage300-complete-export-log.component.html
@@ -1,43 +1,44 @@
-<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-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
+<div class="tw-rounded-8-px tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
     <div>
-        <app-export-log-filter *ngIf="totalCount > 0 || selectedDateFilter"
+        <app-export-log-filter *ngIf="totalCount > 0 || (isDateSelected || searchQuery)"
             [exportLogForm]="exportLogForm"
             [hideCalendar]="hideCalendar"
             [dateOptions]="dateOptions"
             (handleSimpleSearch)="handleSimpleSearch($event)">
         </app-export-log-filter>
 
-        <app-export-log-table 
+        <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">
-            <app-paginator 
-                [dropDownValue]="limit" 
-                [page]="currentPage" 
-                [totalCount]="totalCount" 
-                (pageSizeChangeEvent)="pageSizeChanges($event)" 
+        <div *ngIf="totalCount > 0 && !isLoading" class="tw-p-24-px tw-border-t-1-px">
+            <app-paginator
+                [dropDownValue]="limit"
+                [page]="currentPage"
+                [totalCount]="totalCount"
+                (pageSizeChangeEvent)="pageSizeChanges($event)"
                 (pageOffsetChangeEvent)="pageChanges($event)">
             </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]="'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]="'No records to show yet!'"
     [subText]="'All your successful exports and their details will be stored here.'">
     </app-zero-state-with-illustration>
 
-</div>
+</div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -42,4 +42,4 @@ @@
             >
         </app-dashboard-error-section>
         </div>
-    </div>
+    </div>