Calendar changes (#565)

fylein · Feb 15, 2024 · aac7b94 · aac7b94
1 parent 245df28
commit aac7b94
Show file tree

Hide file tree

Showing 23 changed files with 301 additions and 429 deletions.
diff --git a/src/app/core/models/db/accounting-export.model.ts b/src/app/core/models/db/accounting-export.model.ts
@@ -57,29 +57,28 @@ export type AccountingExportGetParam = {
 }
 
 export class AccountingExportModel {
-
-  static getDateOptions(): DateFilter[] {
+  static getDateOptionsV2(): DateFilter[] {
     const currentDateTime = new Date();
     const dateOptions: DateFilter[] = [
-      {
-        dateRange: 'This Month',
-        startDate: new Date(currentDateTime.getFullYear(), currentDateTime.getMonth(), 1),
-        endDate: currentDateTime
-      },
       {
         dateRange: 'This Week',
         startDate: new Date(currentDateTime.getFullYear(), currentDateTime.getMonth(), currentDateTime.getDate() - currentDateTime.getDay()),
         endDate: currentDateTime
       },
       {
-        dateRange: 'Today',
-        startDate: currentDateTime,
-        endDate: currentDateTime
+        dateRange: 'Last Week',
+        startDate: new Date(currentDateTime.getFullYear(), currentDateTime.getMonth(), currentDateTime.getDate() - currentDateTime.getDay() - 7),
+        endDate: new Date(currentDateTime.getFullYear(), currentDateTime.getMonth(), currentDateTime.getDate() - currentDateTime.getDay() - 1)
       },
       {
-        dateRange: currentDateTime.toLocaleDateString(),
-        startDate: currentDateTime,
+        dateRange: 'This Month',
+        startDate: new Date(currentDateTime.getFullYear(), currentDateTime.getMonth(), 1),
         endDate: currentDateTime
+      },
+      {
+        dateRange: 'Last Month',
+        startDate: new Date(currentDateTime.getFullYear(), currentDateTime.getMonth() - 1, 1),
+        endDate: new Date(currentDateTime.getFullYear(), currentDateTime.getMonth(), 0)
       }
     ];
 
@@ -92,6 +91,7 @@ export class AccountingExportModel {
   }
 
   static getfilteredAccountingExports(query: string, group: AccountingExportList): boolean {
+    query = query.toLowerCase();
     const employeeName = group.employee ? group.employee[0] : '';
     const employeeID = group.employee ? group.employee[1] : '';
     const expenseType = group.expenseType ? group.expenseType : '';

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
@@ -31,7 +31,7 @@ export class BusinessCentralCompleteExportLogComponent implements OnInit {
 
   currentPage: number = 1;
 
-  dateOptions: DateFilter[] = AccountingExportModel.getDateOptions();
+  dateOptions: DateFilter[] = AccountingExportModel.getDateOptionsV2();
 
   selectedDateFilter: SelectedDateFilter | null;
 
@@ -118,21 +118,23 @@ export class BusinessCentralCompleteExportLogComponent implements OnInit {
       end: ['']
     });
 
-    this.exportLogForm.controls.dateRange.valueChanges.subscribe((dateRange) => {
-      const paginator: Paginator = this.paginatorService.getPageSize(PaginatorPage.EXPORT_LOG);
-      if (dateRange) {
-        this.selectedDateFilter = {
-          startDate: dateRange.startDate,
-          endDate: dateRange.endDate
-        };
-
-        this.trackDateFilter('existing', this.selectedDateFilter);
-        this.getAccountingExports(paginator.limit, paginator.offset);
-      } else {
-        this.dateOptions = AccountingExportModel.getDateOptions();
-        this.exportLogForm.controls.start.patchValue([]);
-        this.selectedDateFilter = null;
-        this.getAccountingExports(paginator.limit, paginator.offset);
+    this.exportLogForm.controls.start.valueChanges.subscribe((dateRange) => {
+      if (dateRange[1]) {
+        const paginator: Paginator = this.paginatorService.getPageSize(PaginatorPage.EXPORT_LOG);
+        if (dateRange) {
+          this.selectedDateFilter = {
+            startDate: dateRange[0],
+            endDate: dateRange[1]
+          };
+
+          this.trackDateFilter('existing', this.selectedDateFilter);
+          this.getAccountingExports(paginator.limit, paginator.offset);
+        } else {
+          this.dateOptions = AccountingExportModel.getDateOptionsV2();
+          this.exportLogForm.controls.start.patchValue([]);
+          this.selectedDateFilter = null;
+          this.getAccountingExports(paginator.limit, paginator.offset);
+        }
       }
     });
   }

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
@@ -22,7 +22,7 @@ export class BusinessCentralSkippedExportLogComponent implements OnInit {
 
   skipExportLogForm: FormGroup;
 
-  dateOptions: DateFilter[] = AccountingExportModel.getDateOptions();
+  dateOptions: DateFilter[] = AccountingExportModel.getDateOptionsV2();
 
   expenses: SkipExportList[];
 
@@ -96,21 +96,23 @@ export class BusinessCentralSkippedExportLogComponent implements OnInit {
       end: ['']
     });
 
-    this.skipExportLogForm.controls.dateRange.valueChanges.subscribe((dateRange) => {
-      const paginator: Paginator = this.paginatorService.getPageSize(PaginatorPage.EXPORT_LOG);
-      if (dateRange) {
-        this.selectedDateFilter = {
-          startDate: dateRange.startDate,
-          endDate: dateRange.endDate
-        };
-
-        this.trackDateFilter('existing', this.selectedDateFilter);
-        this.getSkippedExpenses(paginator.limit, paginator.offset);
-      } else {
-        this.dateOptions = AccountingExportModel.getDateOptions();
-        this.skipExportLogForm.controls.start.patchValue([]);
-        this.selectedDateFilter = null;
-        this.getSkippedExpenses(paginator.limit, paginator.offset);
+    this.skipExportLogForm.controls.start.valueChanges.subscribe((dateRange) => {
+      if (dateRange[1]) {
+        const paginator: Paginator = this.paginatorService.getPageSize(PaginatorPage.EXPORT_LOG);
+        if (dateRange) {
+          this.selectedDateFilter = {
+            startDate: dateRange[0],
+            endDate: dateRange[1]
+          };
+
+          this.trackDateFilter('existing', this.selectedDateFilter);
+          this.getSkippedExpenses(paginator.limit, paginator.offset);
+        } else {
+          this.dateOptions = AccountingExportModel.getDateOptionsV2();
+          this.skipExportLogForm.controls.start.patchValue([]);
+          this.selectedDateFilter = null;
+          this.getSkippedExpenses(paginator.limit, paginator.offset);
+        }
       }
     });
   }

diff --git a/src/app/integrations/intacct/main/dashboard/dashboard.component.scss b/src/app/integrations/intacct/main/dashboard/dashboard.component.scss
@@ -87,10 +87,6 @@
     @apply tw-text-center ;
 }
 
-:host ::ng-deep .p-datepicker-touch-ui, .p-calendar .p-datepicker-touch-ui {
-    @apply tw-min-w-fit tw-top-2/3 #{!important};
-}
-
 :host  ::ng-deep .p-dialog {
     max-height: 100% !important;
     margin: 0rem !important;

diff --git a/...grations/intacct/main/export-log/completed-export-log/completed-export-log.component.html b/...grations/intacct/main/export-log/completed-export-log/completed-export-log.component.html
@@ -4,48 +4,11 @@
 
 <div *ngIf="!isLoading" class="tw-shadow-app-card tw-rounded-12-px tw-bg-white tw-border-1-px tw-border-separator">
     <div *ngIf="totalCount > 0">
-        <div [formGroup]="exportLogForm" class="tw-flex tw-items-center tw-p-24-px">
-
-            <span class="custom-search-field" [ngStyle]="{ 'border-color': isSearchFocused ? 'black' : '#ccc' }">
-                <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="'tw-text-icon-muted tw-pr-8-px'"></app-svg-icon>
-                <input class="tw-pb-1 tw-pt-1 tw-text-14-px" type="text" (input)="filterTable($event)" (focus)="isSearchFocused = true" (blur)="isSearchFocused = false" placeholder="Search by Employee Name or Expense ID" />
-            </span>
-            <div class="tw-flex tw-mr-4"></div>
-            <span [ngClass]="{'tw-border-black': isDateFieldFocused}" class="tw-flex tw-justify-start tw-items-center tw-border tw-border-box-color tw-pl-12-px tw-rounded-4-px drop-down">
-                <div>
-                    <app-svg-icon [svgSource]="'calendar'" [width]="'24px'" [height]="'24px'" [styleClasses]="'tw-text-placeholder'"></app-svg-icon>
-                </div>
-                <p-dropdown placeholder="Select date range" appendTo="body" [options]="dateOptions"
-                formControlName="dateRange" (click)="dropDownWatcher()" (onFocus)="isDateFieldFocused = true" (onBlur)="isDateFieldFocused = false"
-                [ngClass]="{'selectedItem': exportLogForm.controls.dateRange.value, 'filterDropdown': !exportLogForm.controls.dateRange.value}">
-                    <ng-template let-item pTemplate="selectedItem">
-                        <div class="tw-flex tw-justify-between tw-items-center">
-                            <span>
-                                <div *ngIf="exportLogForm.controls.dateRange.value">
-                                    <div class="my-dropdown-selected-item">
-                                        {{exportLogForm.controls.dateRange.value.dateRange}}
-                                    </div>
-                                </div>
-                                <div *ngIf="!exportLogForm.controls.dateRange.value">
-                                    <div class="my-dropdown-selected-item tw-text-placeholder tw-text-14-px">
-                                        Select date range
-                                    </div>
-                                </div>
-                            </span>
-                            <app-svg-icon [svgSource]="'cross-medium'" (click)="removeFilter(exportLogForm.controls.dateRange)" [height]="'16px'" [width]="'16px'"></app-svg-icon>
-                        </div>
-                    </ng-template>
-                    <ng-template let-date pTemplate="item">
-                        <div>
-                            <p-calendar (click)="showCalendar($event)" placeholder="Custom dates" formControlName="start" (onClose)="getDates()" [touchUI]="isCalendarVisible" *ngIf="date.dateRange === presentDate" selectionMode="range" [readonlyInput]="true" inputId="range"></p-calendar>
-                            <p class="tw-text-sub-text-color tw-text-14-px" [ngClass]="{'!tw-text-mandatory-field-color' : exportLogForm.controls.dateRange.value === date }" *ngIf="date.dateRange !== presentDate">{{ date.dateRange | titlecase | snakeCaseToSpaceCase }}</p>
-                            <!-- <p class="tw-text-sub-text-color tw-text-12-px" *ngIf="date.dateRange !== presentDate && date.dateRange !== 'Today'">{{date.startDate | date : 'MMM dd, yyyy'}} - {{date.endDate | date : 'MMM dd, yyyy'}}</p>
-                            <p class="tw-text-sub-text-color tw-text-12-px" *ngIf="date.dateRange === 'Today'">{{date.startDate | date : 'MMM dd, yyyy'}}</p> -->
-                        </div>
-                    </ng-template> 
-                </p-dropdown>
-            </span>
-        </div>
+        <app-export-log-filter *ngIf="totalCount > 0 || selectedDateFilter"
+            [exportLogForm]="exportLogForm"
+            [dateOptions]="dateOptions"
+            (handleSimpleSearch)="filterTable($event)">
+        </app-export-log-filter>
 
         <p-table *ngIf="filteredExpenseGroups.length > 0" #dt1 [value]="filteredExpenseGroups">
             <ng-template pTemplate="header">

diff --git a/...tegrations/intacct/main/export-log/completed-export-log/completed-export-log.component.ts b/...tegrations/intacct/main/export-log/completed-export-log/completed-export-log.component.ts
@@ -10,6 +10,7 @@ import { ExportLogService } from 'src/app/core/services/si/export-log/export-log
 import { PaginatorService } from 'src/app/core/services/si/si-core/paginator.service';
 import { environment } from 'src/environments/environment';
 import { brandingConfig, brandingFeatureConfig } from 'src/app/branding/branding-config';
+import { AccountingExportModel } from 'src/app/core/models/db/accounting-export.model';
 
 @Component({
   selector: 'app-completed-export-log',
@@ -32,28 +33,7 @@ export class CompletedExportLogComponent implements OnInit {
 
   currentPage: number = 1;
 
-  dateOptions: DateFilter[] = [
-    {
-      dateRange: 'This Month',
-      startDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
-      endDate: new Date()
-    },
-    {
-      dateRange: 'This Week',
-      startDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - new Date().getDay()),
-      endDate: new Date()
-    },
-    {
-      dateRange: 'Today',
-      startDate: new Date(),
-      endDate: new Date()
-    },
-    {
-      dateRange: new Date().toLocaleDateString(),
-      startDate: new Date(),
-      endDate: new Date()
-    }
-  ];
+  dateOptions: DateFilter[] = AccountingExportModel.getDateOptionsV2();
 
   selectedDateFilter: SelectedDateFilter | null;
 
@@ -119,8 +99,8 @@ export class CompletedExportLogComponent implements OnInit {
     event?.stopPropagation();
   }
 
-  public filterTable(event: any) {
-    const query = event.target.value.toLowerCase();
+  public filterTable(query: any) {
+    query = query.toLowerCase();
 
     this.filteredExpenseGroups = this.expenseGroups.filter((group: ExpenseGroupList) => {
       const employeeName = group.employee ? group.employee[0] : '';
@@ -223,19 +203,21 @@ export class CompletedExportLogComponent implements OnInit {
       end: ['']
     });
 
-    this.exportLogForm.controls.dateRange.valueChanges.subscribe((dateRange) => {
-      const paginator: Paginator = this.paginatorService.getPageSize(PaginatorPage.EXPORT_LOG);
-      if (dateRange) {
-        this.selectedDateFilter = {
-          startDate: dateRange.startDate,
-          endDate: dateRange.endDate
-        };
-
-        this.trackDateFilter('existing', this.selectedDateFilter);
-        this.getExpenseGroups(paginator.limit, paginator.offset);
-      } else {
-        this.selectedDateFilter = null;
-        this.getExpenseGroups(paginator.limit, paginator.offset);
+    this.exportLogForm.controls.start.valueChanges.subscribe((dateRange) => {
+      if (dateRange[1]) {
+        const paginator: Paginator = this.paginatorService.getPageSize(PaginatorPage.EXPORT_LOG);
+        if (dateRange) {
+          this.selectedDateFilter = {
+            startDate: dateRange[0],
+            endDate: dateRange[1]
+          };
+
+          this.trackDateFilter('existing', this.selectedDateFilter);
+          this.getExpenseGroups(paginator.limit, paginator.offset);
+        } else {
+          this.selectedDateFilter = null;
+          this.getExpenseGroups(paginator.limit, paginator.offset);
+        }
       }
     });
   }

diff --git a/src/app/integrations/intacct/main/export-log/export-log.component.scss b/src/app/integrations/intacct/main/export-log/export-log.component.scss
@@ -68,7 +68,3 @@
 :host ::ng-deep .p-datepicker table th {
     @apply tw-text-center ;
 }
-
-:host ::ng-deep .p-datepicker-touch-ui, .p-calendar .p-datepicker-touch-ui {
-    @apply tw-min-w-fit tw-top-2/3 #{!important};
-}
diff --git a/src/app/integrations/intacct/main/export-log/skip-export-log/skip-export-log.component.html b/src/app/integrations/intacct/main/export-log/skip-export-log/skip-export-log.component.html
@@ -1,48 +1,11 @@
 <div *ngIf="isLoading"></div>
 <div *ngIf="!isLoading" class="tw-shadow-app-card tw-rounded-12-px tw-bg-white tw-border-1-px tw-border-separator">
     <div *ngIf="totalCount > 0">
-        <div [formGroup]="skipExportLogForm" class="tw-flex tw-items-center tw-p-24-px">
-
-            <span class="custom-search-field" [ngStyle]="{ 'border-color': isSearchFocused ? 'black' : '#ccc' }">
-                <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="'tw-text-icon-muted tw-pr-8-px'"></app-svg-icon>
-                <input class="tw-pb-1 tw-pt-1 tw-text-14-px" type="text" (input)="filterTable($event)" (focus)="isSearchFocused = true" (blur)="isSearchFocused = false" placeholder="Search by Employee Name or Expense ID" />
-            </span>
-            <div class="tw-flex tw-mr-4"></div>
-            <span [ngClass]="{'tw-border-black': isDateFieldFocused}" class="tw-flex tw-justify-start tw-items-center tw-border tw-border-box-color tw-pl-12-px tw-rounded-4-px drop-down">
-                <div>
-                    <app-svg-icon [svgSource]="'calendar'" [width]="'24px'" [height]="'24px'" [styleClasses]="'tw-text-placeholder'"></app-svg-icon>
-                </div>
-                <p-dropdown placeholder="Select date range" appendTo="body" [options]="dateOptions" formControlName="dateRange" (onChange)="dateFilter($event)" (click)="dropDownWatcher()" 
-                (onFocus)="isDateFieldFocused = true" (onBlur)="isDateFieldFocused = false"
-                [ngClass]="{'selectedItem': skipExportLogForm.controls.dateRange.value, 'filterDropdown': !skipExportLogForm.controls.dateRange.value}">
-                    <ng-template let-item pTemplate="selectedItem">
-                        <div class="tw-flex tw-justify-between tw-items-center">
-                            <span>
-                                <div *ngIf="skipExportLogForm.controls.dateRange.value">
-                                    <div class="my-dropdown-selected-item">
-                                        {{skipExportLogForm.controls.dateRange.value.dateRange}}
-                                    </div>
-                                </div>
-                                <div *ngIf="!skipExportLogForm.controls.dateRange.value">
-                                    <div class="my-dropdown-selected-item tw-text-placeholder">
-                                        Select date range
-                                    </div>
-                                </div>
-                            </span>
-                            <i *ngIf="skipExportLogForm.controls.dateRange.value" [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" (click)="removeFilter(skipExportLogForm.controls.dateRange)"></i>
-                        </div>
-                    </ng-template>
-                    <ng-template let-date pTemplate="item">
-                        <div>
-                            <p-calendar (click)="showCalendar($event)" placeholder="Custom dates" formControlName="start" (onClose)="getDates()" [touchUI]="isCalendarVisible" *ngIf="date.dateRange === presentDate" selectionMode="range" [readonlyInput]="true" inputId="range"></p-calendar>
-                            <p class="tw-text-sub-text-color tw-text-14-px" [ngClass]="{'!tw-text-mandatory-field-color' : skipExportLogForm.controls.dateRange.value === date }" *ngIf="date.dateRange !== presentDate">{{ date.dateRange | titlecase | snakeCaseToSpaceCase }}</p>
-                            <!-- <p class="tw-text-sub-text-color tw-text-12-px" *ngIf="date.dateRange !== presentDate && date.dateRange !== 'Today'">{{date.startDate | date : 'MMM dd, yyyy'}} - {{date.endDate | date : 'MMM dd, yyyy'}}</p>
-                            <p class="tw-text-sub-text-color tw-text-12-px" *ngIf="date.dateRange === 'Today'">{{date.startDate | date : 'MMM dd, yyyy'}}</p> -->
-                        </div>
-                    </ng-template> 
-                </p-dropdown>
-            </span>
-        </div>
+        <app-export-log-filter *ngIf="totalCount > 0 || selectedDateFilter"
+            [exportLogForm]="skipExportLogForm"
+            [dateOptions]="dateOptions"
+            (handleSimpleSearch)="filterTable($event)">
+        </app-export-log-filter>
 
         <p-table *ngIf="filteredExpenseGroups.length > 0" #dt1 [value]="filteredExpenseGroups">
             <ng-template pTemplate="header">

diff --git a/src/app/integrations/intacct/main/export-log/skip-export-log/skip-export-log.component.scss b/src/app/integrations/intacct/main/export-log/skip-export-log/skip-export-log.component.scss
@@ -69,10 +69,6 @@
     @apply tw-text-center ;
 }
 
-:host ::ng-deep .p-datepicker-touch-ui, .p-calendar .p-datepicker-touch-ui {
-    @apply tw-min-w-fit tw-top-2/3 #{!important};
-}
-
 :host ::ng-deep .selectedItem  .p-dropdown-trigger {
     @apply tw-hidden #{!important};
 }