Skip to content

Commit

Permalink
Merge pull request #357 from sancsoft/326-holiday-list---update-to-us…
Browse files Browse the repository at this point in the history 
…e-new-table-component

refactored holiday list
  • Loading branch information
@rmaffitsancsoft
rmaffitsancsoft authored Sep 6, 2024
2 parents 3bda38d + c3db681 commit b527eac
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 128 deletions.
55 changes: 10 additions & 45 deletions src/angular/hq/src/app/holiday/holiday-list/holiday-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,27 @@ <h1 class="font-rajdhani font-semibold text-3xl">Holidays</h1>
<div class="grid gap-7 grid-flow-col auto-cols-max pt-3">&nbsp;</div>
</div>
<div class="px-5 pt-4 pb-2">
<hq-client-details-search-filter></hq-client-details-search-filter>
<div class="flex w-full flex-1 items-center gap-[20px] mb-[8px] xl:mb-0">
<hq-search-input [formControl]="listService.search"></hq-search-input>
</div>
</div>
<table class="min-w-full border-spacing-0 border-separate">
<hq-table class="min-w-full border-spacing-0 border-separate">
<thead>
<tr class="sticky top-0 text-left">
<th
scope="col"
class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5 cursor-pointer"
(click)="onSortClick(sortColumn.Name)"
[hq-sort-header]="sortColumn.Name"
>
Name
<hq-sort-icon
[column]="sortColumn.Name"
[activeColumn]="sortOption$ | async"
[activeSortDirection]="sortDirection$ | async"
/>
</th>

<th
scope="col"
class="bg-blue-900 border-steel-blue-600 border-y py-3 cursor-pointer"
(click)="onSortClick(sortColumn.Date)"
[hq-sort-header]="sortColumn.Date"
>
Date
<hq-sort-icon
[column]="sortColumn.Date"
[activeColumn]="sortOption$ | async"
[activeSortDirection]="sortDirection$ | async"
/>
</th>

<th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3">
Expand All @@ -56,13 +48,13 @@ <h1 class="font-rajdhani font-semibold text-3xl">Holidays</h1>
</th>
</tr>
</thead>
<tbody>
@if ((holiday$ | async)?.length === 0) {
<tbody hq-table-body>
@if ((listService.records$ | async)?.length === 0) {
<td colspan="10" class="bg-black-alt">
<h1 class="text-center py-4 font-bold">No matching records found</h1>
</td>
}
@for (member of holiday$ | async; track $index) {
@for (member of listService.records$ | async; track $index) {
<tr class="even:bg-gray-850 odd:bg-black-alt">
<td class="border-b border-black py-2 pl-5">
{{ member.name }}
Expand Down Expand Up @@ -90,31 +82,4 @@ <h1 class="text-center py-4 font-bold">No matching records found</h1>
</tr>
}
</tbody>
</table>
<div
class="justify-between items-center grid grid-cols-3 py-3 px-5 bg-blue-900 border-y border-steel-blue-600"
>
<div>
<select
class="bg-black-alt border border-gray-300 rounded py-1 px-2 mr-2"
[formControl]="itemsPerPage"
>
<option [ngValue]="20">20</option>
<option [ngValue]="25">25</option>
<option [ngValue]="50">50</option>
<option [ngValue]="100">100</option>
<!-- Add more options as needed -->
</select>
<span>items per page</span>
</div>
<hq-paginator
[total]="(totalRecords$ | async) ?? 0"
[pageSize]="itemsPerPage.value"
[currentPage]="page.value"
(page)="goToPage($event)"
></hq-paginator>
<div class="flex justify-end text-xs">
{{ skipDisplay$ | async }}-{{ takeToDisplay$ | async }} /
{{ totalRecords$ | async }} items
</div>
</div>
</hq-table>
106 changes: 23 additions & 83 deletions src/angular/hq/src/app/holiday/holiday-list/holiday-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,18 @@ import { SortColumn } from './../../models/holiday/get-holiday-v1';
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, RouterLink } from '@angular/router';
import {
startWith,
combineLatest,
map,
tap,
debounceTime,
switchMap,
shareReplay,
BehaviorSubject,
} from 'rxjs';
import { Observable } from 'rxjs';
import { ClientDetailsServiceToReplace } from '../../clients/client-details.service';

import { SortDirection } from '../../models/common/sort-direction';
import { HQService } from '../../services/hq.service';
import { CommonModule } from '@angular/common';
import { ClientDetailsSearchFilterComponent } from '../../clients/client-details/client-details-search-filter/client-details-search-filter.component';
import { PaginatorComponent } from '../../common/paginator/paginator.component';
import { SortIconComponent } from '../../common/sort-icon/sort-icon.component';
import { GetHolidayV1Record } from '../../models/holiday/get-holiday-v1';
import { HQRole } from '../../enums/hqrole';
import { InRolePipe } from '../../pipes/in-role.pipe';
import { Jurisdiciton } from '../../enums/jurisdiciton';
import { CoreModule } from '../../core/core.module';
import { HolidayListService } from './holiday-list.service';
import { BaseListService } from '../../core/services/base-list.service';

@Component({
selector: 'hq-holiday-list',
Expand All @@ -34,20 +24,22 @@ import { Jurisdiciton } from '../../enums/jurisdiciton';
ReactiveFormsModule,
PaginatorComponent,
SortIconComponent,
ClientDetailsSearchFilterComponent,
RouterLink,
InRolePipe,
CoreModule,
],
providers: [
{
provide: BaseListService,
useExisting: HolidayListService,
},
],
templateUrl: './holiday-list.component.html',
})
export class HolidayListComponent {
apiErrors: string[] = [];
holiday$: Observable<GetHolidayV1Record[]>;
skipDisplay$: Observable<number>;
takeToDisplay$: Observable<number>;
totalRecords$: Observable<number>;
sortOption$: BehaviorSubject<SortColumn>;
sortDirection$: BehaviorSubject<SortDirection>;
sortOption = SortColumn;
sortDirection$ = SortDirection;
Jurisdiction = Jurisdiciton;

itemsPerPage = new FormControl(20, { nonNullable: true });
Expand All @@ -60,77 +52,25 @@ export class HolidayListComponent {
constructor(
private hqService: HQService,
private route: ActivatedRoute,
private clientDetailService: ClientDetailsServiceToReplace,
) {
const itemsPerPage$ = this.itemsPerPage.valueChanges.pipe(
startWith(this.itemsPerPage.value),
);
this.sortOption$ = new BehaviorSubject<SortColumn>(SortColumn.Name);
this.sortDirection$ = new BehaviorSubject<SortDirection>(SortDirection.Asc);
const page$ = this.page.valueChanges.pipe(startWith(this.page.value));

const skip$ = combineLatest([itemsPerPage$, page$]).pipe(
map(([itemsPerPage, page]) => (page - 1) * itemsPerPage),
startWith(0),
);
const search$ = clientDetailService.search.valueChanges.pipe(
tap(() => this.goToPage(1)),
startWith(clientDetailService.search.value),
);

this.skipDisplay$ = skip$.pipe(map((skip) => skip + 1));

const request$ = combineLatest({
search: search$,
skip: skip$,
take: itemsPerPage$,
sortBy: this.sortOption$,
sortDirection: this.sortDirection$,
});

const response$ = request$.pipe(
debounceTime(500),
switchMap((request) => this.hqService.getHolidayV1(request)),
shareReplay({ bufferSize: 1, refCount: false }),
);

this.holiday$ = response$.pipe(
map((response) => {
return response.records;
}),
);

this.totalRecords$ = response$.pipe(map((t) => t.total!));

this.takeToDisplay$ = combineLatest([
skip$,
itemsPerPage$,
this.totalRecords$,
]).pipe(
map(([skip, itemsPerPage, totalRecords]) =>
Math.min(skip + itemsPerPage, totalRecords),
),
);

this.clientDetailService.resetFilters();
this.clientDetailService.hideProjectStatus();
}
public listService: HolidayListService,
) {}

goToPage(page: number) {
this.page.setValue(page);
this.listService.page.setValue(page);
}

onSortClick(sortColumn: SortColumn) {
if (this.sortOption$.value == sortColumn) {
this.sortDirection$.next(
this.sortDirection$.value == SortDirection.Asc
if (this.listService.sortOption$.value == sortColumn) {
this.listService.sortDirection$.next(
this.listService.sortDirection$.value == SortDirection.Asc
? SortDirection.Desc
: SortDirection.Asc,
);
} else {
this.sortOption$.next(sortColumn);
this.sortDirection$.next(SortDirection.Asc);
this.listService.sortOption$.next(sortColumn);
this.listService.sortDirection$.next(SortDirection.Asc);
}
this.page.setValue(1);

this.listService.page.setValue(1);
}
}
38 changes: 38 additions & 0 deletions src/angular/hq/src/app/holiday/holiday-list/holiday-list.service.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { Observable, combineLatest, debounceTime, tap, switchMap } from 'rxjs';
import { BaseListService } from '../../core/services/base-list.service';
import { SortDirection } from '../../models/common/sort-direction';
import {
GetHolidayV1Record,
GetHolidayV1Response,
SortColumn,
} from '../../models/holiday/get-holiday-v1';
import { HQService } from '../../services/hq.service';
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root',
})
export class HolidayListService extends BaseListService<
GetHolidayV1Response,
GetHolidayV1Record,
SortColumn
> {
protected override getResponse(): Observable<GetHolidayV1Response> {
return combineLatest({
search: this.search$,
skip: this.skip$,
take: this.itemsPerPage$,
sortBy: this.sortOption$,
sortDirection: this.sortDirection$,
}).pipe(
debounceTime(500),
tap(() => this.loadingSubject.next(true)),
switchMap((request) => this.hqService.getHolidayV1(request)),
tap(() => this.loadingSubject.next(false)),
);
}

constructor(private hqService: HQService) {
super(SortColumn.Name, SortDirection.Asc);
}
}

0 comments on commit b527eac

Please sign in to comment.