Skip to content

Commit

Permalink
feat(history): add sorting in tables
Browse files Browse the repository at this point in the history
  • Loading branch information
pYassine committed Nov 1, 2023
1 parent 34c250a commit 469cb12
Show file tree
Hide file tree
Showing 61 changed files with 455 additions and 390 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
export const HISTORY_ACTIONS = {
EDIT: "Modification",
DELETE: "Suppression",
CREATION: "Création",
EDIT: {
class: "orange-status",
label: "Modification",
},
DELETE: {
class: "red-status",
label: "Suppression",
},
CREATION: {
class: "green-status",
label: "Création",
},
};
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
</ng-template>
</div>

<span *ngIf="usager.options.npai.actif" class="label-info label-danger">
<span *ngIf="usager.options.npai.actif" class="label-info red-status">
<span>Pli non distribuable</span>
</span>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -294,14 +294,14 @@
<strong class="text-primary">dernier passage</strong>
</ng-container>
<fa-icon
*ngIf="filters.sortValue === 'ascending'"
*ngIf="filters.sortValue === 'asc'"
[icon]="['fas', 'sort-amount-up']"
aria-hidden="true"
class="ms-2"
></fa-icon>

<fa-icon
*ngIf="filters.sortValue === 'descending'"
*ngIf="filters.sortValue === 'desc'"
[icon]="['fas', 'sort-amount-down']"
aria-hidden="true"
class="ms-2"
Expand All @@ -321,14 +321,13 @@
updateFilters.emit({
element: 'sortKey',
value: option.id,
sortValue: 'ascending'
sortValue: 'asc'
})
"
ngbDropdownItem
role="option"
[attr.aria-selected]="
filters.sortKey === option.id &&
filters.sortValue === 'ascending'
filters.sortKey === option.id && filters.sortValue === 'asc'
"
>
<fa-icon
Expand All @@ -345,14 +344,13 @@
updateFilters.emit({
element: 'sortKey',
value: option.id,
sortValue: 'descending'
sortValue: 'desc'
})
"
ngbDropdownItem
role="option"
[attr.aria-selected]="
filters.sortKey === option.id &&
filters.sortValue === 'descending'
filters.sortKey === option.id && filters.sortValue === 'desc'
"
>
<fa-icon
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ describe("ManageFiltersComponent", () => {
page: 0,
passage: null,
sortKey: "NAME",
sortValue: "ascending",
sortValue: "asc",
statut: "VALIDE",
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ describe("ManageUsagersPageComponent", () => {
page: 0,
passage: null,
sortKey: "NAME",
sortValue: "ascending",
sortValue: "asc",
statut: "VALIDE",
});
}));
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -323,7 +323,7 @@ export class ManageUsagersPageComponent implements OnInit, OnDestroy {
) {
const newValue = this.filters[element] === value ? null : value;
this.filters[element] = newValue;
this.setSortKeyAndValue("NAME", "ascending");
this.setSortKeyAndValue("NAME", "asc");
} else if (element === "statut") {
if (this.filters[element] === value) {
return;
Expand Down Expand Up @@ -351,12 +351,12 @@ export class ManageUsagersPageComponent implements OnInit, OnDestroy {
// Tri issu des en-tête de tableau
if (!sortValue) {
const isCurrentSortKey = value === this.filters.sortKey;
const isAscendingSort = this.filters.sortValue === "ascending";
const isAscendingSort = this.filters.sortValue === "asc";

if (isCurrentSortKey) {
sortValue = isAscendingSort ? "descending" : "ascending";
sortValue = isAscendingSort ? "desc" : "asc";
} else {
sortValue = "ascending";
sortValue = "asc";
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -214,13 +214,13 @@
>
<p
*ngIf="usager.typeDom === 'RENOUVELLEMENT'"
class="m-0 label-info label-yellow"
class="m-0 label-info orange-status"
>
Renouvellement
</p>
<p
*ngIf="usager.typeDom === 'PREMIERE_DOM'"
class="m-0 label-info label-grey"
class="m-0 label-info grey-status"
>
Première demande
</p>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export type UsagersFilterCriteriaSortValues = "ascending" | "descending";
export type UsagersFilterCriteriaSortValues = "asc" | "desc";

export type UsagersFilterCriteriaStatut =
| "TOUS"
Expand Down Expand Up @@ -60,7 +60,7 @@ export class UsagersFilterCriteria {
this.page = search?.page || 0;

this.sortKey = search?.sortKey || "NAME";
this.sortValue = search?.sortValue || "ascending";
this.sortValue = search?.sortValue || "asc";

// Ne pas trier par autre que les nom & ID si on est sur TOUS
if (this.statut === "TOUS") {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const usagers = [
it("usagersSorter NAME (nom, prenom)", () => {
const results = usagersSorter.sortBy(usagers, {
sortKey: "NAME",
sortValue: "ascending",
sortValue: "asc",
});
expect(results.length).toEqual(usagers.length);
expect(results.map((x) => x.ref)).toEqual([3, 5, 4, 1, 2]);
Expand All @@ -86,7 +86,7 @@ it("usagersSorter NAME (nom, prenom)", () => {
it("usagersSorter RADIE (usager.decision.dateFin)", () => {
const results = usagersSorter.sortBy(usagers, {
sortKey: "RADIE",
sortValue: "descending",
sortValue: "desc",
});
expect(results.length).toEqual(usagers.length);
expect(results.map((x) => x.ref)).toEqual([2, 3, 5, 4, 1]); // null last
Expand All @@ -95,7 +95,7 @@ it("usagersSorter RADIE (usager.decision.dateFin)", () => {
it("usagersSorter customRef asc", () => {
const results = usagersSorter.sortBy(usagers, {
sortKey: "ID",
sortValue: "ascending",
sortValue: "asc",
});
expect(results.length).toEqual(usagers.length);
expect(results.map((x) => x.customRef)).toEqual([
Expand All @@ -110,7 +110,7 @@ it("usagersSorter customRef asc", () => {
it("usagersSorter customRef desc", () => {
const results = usagersSorter.sortBy(usagers, {
sortKey: "ID",
sortValue: "descending",
sortValue: "desc",
});
expect(results.length).toEqual(usagers.length);
expect(results.map((x) => x.customRef)).toEqual([
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function sortBy(
return usagers;
}

const asc = sortValue !== "descending";
const asc = sortValue !== "desc";

if (sortKey === "ID") {
return sortUsagersByCustomRef(usagers, asc);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<button
type="button"
[ngClass]="sortKey === currentKey ? 'text-primary' : ''"
[ngClass]="sortKey === currentKey ? 'fw-bold text-primary' : ''"
class="btn"
[attr.aria-sort]="sortKey === currentKey ? sortValue : null"
(click)="sortArray.emit(sortKey)"
(click)="rotate()"
>
<span class="visually-hidden">Trier par</span>
<span>{{ columnName }}</span>
<fa-icon
*ngIf="sortKey === currentKey"
class="sort-selected ms-2"
aria-hidden="true"
[icon]="sortValue === 'descending' ? faArrowDown : faArrowUp"
[icon]="sortValue === 'desc' ? faArrowDown : faArrowUp"
></fa-icon>
<span *ngIf="sortKey === currentKey" class="visually-hidden">
Colonne triée actuellement</span
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@ button {
padding: 0;
width: 100%;
text-align: left;
font-weight: bold;
color: var(--bs-primary);
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";

import { TableHeadSortComponent } from "./table-head-sort.component";
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from "@angular/core";
import { NgIf, NgClass } from "@angular/common";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";

describe("TableHeadSortComponent", () => {
let component: TableHeadSortComponent;
let fixture: ComponentFixture<TableHeadSortComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [TableHeadSortComponent],
beforeEach(() => {
TestBed.configureTestingModule({
imports: [NgIf, NgClass, FontAwesomeModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
}).compileComponents();

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { UsagersFilterCriteriaSortValues } from "../../../manage-usagers/components/usager-filter";
import {
faArrowDown,
faArrowUp,
faSort,
} from "@fortawesome/free-solid-svg-icons";
import { NgClass, NgIf } from "@angular/common";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";

@Component({
selector: "app-table-head-sort",
templateUrl: "./table-head-sort.component.html",
styleUrls: ["./table-head-sort.component.scss"],
standalone: true,
imports: [NgIf, NgClass, FontAwesomeModule],
})
export class TableHeadSortComponent {
public readonly faArrowDown = faArrowDown;
public readonly faArrowUp = faArrowUp;
public readonly faSort = faSort;

@Input() public columnName: string;

@Input() public sortValue: UsagersFilterCriteriaSortValues;
@Output() public sortValueChange =
new EventEmitter<UsagersFilterCriteriaSortValues>();

@Input() public sortKey: string;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@Input() public currentKey: any;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@Output() public currentKeyChange = new EventEmitter<any>();

public rotate() {
const rotation: {
[key in UsagersFilterCriteriaSortValues]: UsagersFilterCriteriaSortValues;
} = {
asc: "desc",
desc: "asc",
};
if (this.currentKey === this.sortKey) {
this.sortValueChange.emit(rotation[this.sortValue]);
} else {
this.currentKeyChange.emit(this.sortKey);
}
}
}
1 change: 1 addition & 0 deletions packages/frontend/src/app/modules/shared/pipes/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// @index('./*.pipe.ts', f => `export * from '${f.path}'`)
export * from "./format-big-number.pipe";
export * from "./nl2br.pipe";
export * from "./sort-array.pipe";
export * from "./usager-nom-complet.pipe";
36 changes: 36 additions & 0 deletions packages/frontend/src/app/modules/shared/pipes/sort-array.pipe.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
name: "sortArray",
})
export class SortArrayPipe implements PipeTransform {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
transform(array: any[], sortKey: any, sortValue: "asc" | "desc"): any[] {
if (!array || array.length <= 1) {
return array;
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
return array.sort((a: any, b: any) => {
const valA = a[sortKey];
const valB = b[sortKey];

if (valA === null) {
return -1;
}

let comparison = 0;
if (valA === valB) {
return 0;
} else if (typeof valA === "string") {
comparison = valA.localeCompare(valB);
} else if (typeof valA === "boolean") {
comparison = valA === valB ? 0 : valA ? -1 : 1;
} else if (valA instanceof Date) {
comparison = valB instanceof Date ? valA.getTime() - valB.getTime() : 1;
}

return sortValue === "asc" ? comparison : -comparison;
});
}
}
5 changes: 5 additions & 0 deletions packages/frontend/src/app/modules/shared/shared.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
UsagerNomCompletPipe,
FormatBigNumberPipe,
ReplaceLineBreaks,
SortArrayPipe,
} from "./pipes";
import { DisplayTableImageComponent } from "./components/display-table-image/display-table-image.component";
import {
Expand All @@ -30,6 +31,8 @@ import {
ReplaceLineBreaks,
StrCapsAlphaDirective,
DisplayTableImageComponent,

SortArrayPipe,
],
exports: [
ReplaceLineBreaks,
Expand All @@ -41,6 +44,8 @@ import {
CustomToastrComponent,
StrCapsAlphaDirective,
DisplayTableImageComponent,

SortArrayPipe,
],
imports: [CommonModule, FontAwesomeModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
Expand Down
1 change: 0 additions & 1 deletion packages/frontend/src/app/modules/stats/stats.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ import { CountUpModule } from "ngx-countup";
ReactiveFormsModule,
StatsRoutingModule,
],
providers: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
})
export class StatsModule {}
Loading

0 comments on commit 469cb12

Please sign in to comment.