Affiche le nb de congés payés restants

src/Application/HumanResource/Leave/Query/GetLeaveRequestsOverviewQuery.ts

@@ -0,0 +1,5 @@
+import { IQuery } from 'src/Application/IQuery';
+
+export class GetLeaveRequestsOverviewQuery implements IQuery {
+  constructor(public readonly date: Date, public readonly userId: string) {}
+}

src/Application/HumanResource/Leave/Query/GetLeaveRequestsOverviewQueryHandler.ts

@@ -0,0 +1,41 @@
+import { Inject } from '@nestjs/common';
+import { QueryHandler } from '@nestjs/cqrs';
+import { GetLeaveRequestsOverviewQuery } from './GetLeaveRequestsOverviewQuery';
+import { ILeaveRequestsOverview } from 'src/Domain/HumanResource/Leave/ILeaveRequestsOverview';
+import { IDateUtils } from 'src/Application/IDateUtils';
+import { ILeaveRepository } from 'src/Domain/HumanResource/Leave/Repository/ILeaveRepository';
+
+@QueryHandler(GetLeaveRequestsOverviewQuery)
+export class GetLeaveRequestsOverviewQueryHandler {
+  constructor(
+    @Inject('IDateUtils')
+    private readonly dateUtils: IDateUtils,
+    @Inject('ILeaveRepository')
+    private readonly leaveRepository: ILeaveRepository
+  ) {}
+
+  public async execute(
+    query: GetLeaveRequestsOverviewQuery
+  ): Promise<ILeaveRequestsOverview> {
+    const [startDate, endDate] = this.dateUtils.getLeaveReferencePeriodDays(
+      query.date
+    );
+
+    const numDaysPerWeek = this.dateUtils.getWorkedDaysPerWeek();
+    const numWeeks = this.dateUtils.getNumberOfPaidLeaveWeeks();
+    const daysPerYear = numWeeks * numDaysPerWeek;
+    const totalDurationTaken = await this.leaveRepository.getSumOfDurationsBetween(
+      startDate,
+      endDate,
+      query.userId
+    );
+    const daysTaken = this.dateUtils.getLeaveDurationAsDays(totalDurationTaken);
+    const daysRemaining = daysPerYear - daysTaken;
+
+    return {
+      daysPerYear,
+      daysTaken,
+      daysRemaining
+    };
+  }
+}

src/Application/IDateUtils.ts

@@ -10,13 +10,17 @@ export interface IDateUtils {
   getWorkedDaysDuringAPeriod(start: Date, end: Date): Date[];
   isAWorkingDay(date: Date): boolean;
   getWorkedFreeDays(year: number): Date[];
+  getWorkedDaysPerWeek(): number;
+  getNumberOfPaidLeaveWeeks(): number;
   getEasterDate(year: number): Date;
   getLeaveDuration(
     startDate: string,
     isStartsAllDay: boolean,
     endDate: string,
     isEndsAllDay: boolean
   ): number;
+  getLeaveDurationAsDays(duration: number);
+  getLeaveReferencePeriodDays(date: Date): [Date, Date];
   addDaysToDate(date: Date, days: number): Date;
   getYear(date: Date): number;
   getMonth(date: Date): MonthDate;

src/Domain/HumanResource/Leave/ILeaveRequestsOverview.ts

@@ -0,0 +1,5 @@
+export interface ILeaveRequestsOverview {
+  daysPerYear: number;
+  daysTaken: number;
+  daysRemaining: number;
+}

src/Domain/HumanResource/Leave/Repository/ILeaveRepository.ts

@@ -10,4 +10,9 @@ export interface ILeaveRepository {
     endDate: string
   ): Promise<number>;
   sumOfDurationLeaveByUserAndDate(user: User, date: string): Promise<number>;
+  getSumOfDurationsBetween(
+    startDate: Date,
+    endDate: Date,
+    userId: string
+  ): Promise<number>;
 }

src/Infrastructure/Adapter/DateUtilsAdapter.ts

@@ -207,4 +207,38 @@ export class DateUtilsAdapter implements IDateUtils {
 
     return duration;
   }
+
+  /**
+   * @param duration Duration in minutes
+   * @returns Duration in days
+   */
+  public getLeaveDurationAsDays(duration: number) {
+    return duration / 420;
+  }
+
+  getLeaveReferencePeriodDays(date: Date): [Date, Date] {
+    // Reference period is between June 1st and May 31st.
+
+    let startDate = this.makeDate(this.getYear(date), 6, 1);
+
+    if (startDate > date) {
+      startDate = this.makeDate(this.getYear(date) - 1, 6, 1);
+    }
+
+    let endDate = this.makeDate(this.getYear(date), 5, 31);
+
+    if (endDate < date) {
+      endDate = this.makeDate(this.getYear(date) + 1, 5, 31);
+    }
+
+    return [startDate, endDate];
+  }
+
+  getWorkedDaysPerWeek(): number {
+    return 5;
+  }
+
+  getNumberOfPaidLeaveWeeks(): number {
+    return 7;
+  }
 }

src/Infrastructure/HumanResource/Leave/Controller/ListLeaveRequestsController.ts

@@ -11,34 +11,57 @@ import { User } from 'src/Domain/HumanResource/User/User.entity';
 import { GetLeaveRequestsQuery } from 'src/Application/HumanResource/Leave/Query/GetLeaveRequestsQuery';
 import { IsAuthenticatedGuard } from 'src/Infrastructure/HumanResource/User/Security/IsAuthenticatedGuard';
 import { WithName } from 'src/Infrastructure/Common/ExtendedRouting/WithName';
-import { PaginationDTO } from 'src/Infrastructure/Common/DTO/PaginationDTO';
 import { Pagination } from 'src/Application/Common/Pagination';
 import { LeaveRequestView } from 'src/Application/HumanResource/Leave/View/LeaveRequestView';
 import { LoggedUser } from '../../User/Decorator/LoggedUser';
 import { LeaveRequestTableFactory } from '../Table/LeaveRequestTableFactory';
+import { LeaveRequestsOverviewTableFactory } from '../Table/LeaveRequestOverviewTableFactory';
+import { GetLeaveRequestsOverviewQuery } from 'src/Application/HumanResource/Leave/Query/GetLeaveRequestsOverviewQuery';
+import { UserView } from 'src/Application/HumanResource/User/View/UserView';
+import { GetUsersQuery } from 'src/Application/HumanResource/User/Query/GetUsersQuery';
+import { ListLeaveRequestsControllerDTO } from '../DTO/ListLeaveRequestsControllerDTO';
 
 @Controller('app/people/leave_requests')
 @UseGuards(IsAuthenticatedGuard)
 export class ListLeaveRequestsController {
   constructor(
     @Inject('IQueryBus')
     private readonly queryBus: IQueryBus,
-    private readonly tableFactory: LeaveRequestTableFactory
+    private readonly tableFactory: LeaveRequestTableFactory,
+    private readonly overviewTableFactory: LeaveRequestsOverviewTableFactory
   ) {}
 
   @Get()
   @WithName('people_leave_requests_list')
   @Render('pages/leave_requests/list.njk')
   public async get(
-    @Query() paginationDto: PaginationDTO,
+    @Query() dto: ListLeaveRequestsControllerDTO,
     @LoggedUser() user: User
   ) {
     const pagination: Pagination<LeaveRequestView> = await this.queryBus.execute(
-      new GetLeaveRequestsQuery(user.getId(), paginationDto.page)
+      new GetLeaveRequestsQuery(user.getId(), dto.page)
+    );
+
+    const users: UserView[] = await this.queryBus.execute(
+      new GetUsersQuery(false, true)
     );
 
     const table = this.tableFactory.create(pagination.items, user.getId());
 
-    return { table, pagination, currentPage: paginationDto.page };
+    const userId = dto.userId ? dto.userId : user['id'];
+
+    const overview = await this.queryBus.execute(
+      new GetLeaveRequestsOverviewQuery(new Date(), userId)
+    );
+    const overviewTable = this.overviewTableFactory.create(overview);
+
+    return {
+      table,
+      overviewTable,
+      users,
+      userId,
+      pagination,
+      currentPage: dto.page
+    };
   }
 }

src/Infrastructure/HumanResource/Leave/DTO/ListLeaveRequestsControllerDTO.ts

@@ -0,0 +1,8 @@
+import { IsUUID, IsOptional } from 'class-validator';
+import { PaginationDTO } from 'src/Infrastructure/Common/DTO/PaginationDTO';
+
+export class ListLeaveRequestsControllerDTO extends PaginationDTO {
+  @IsUUID()
+  @IsOptional()
+  public userId?: string;
+}

src/Infrastructure/HumanResource/Leave/Repository/LeaveRepository.ts

@@ -5,6 +5,7 @@ import { ILeaveRepository } from 'src/Domain/HumanResource/Leave/Repository/ILea
 import { Leave } from 'src/Domain/HumanResource/Leave/Leave.entity';
 import { User, UserRole } from 'src/Domain/HumanResource/User/User.entity';
 import { IDateUtils } from 'src/Application/IDateUtils';
+import { Type } from 'src/Domain/HumanResource/Leave/LeaveRequest.entity';
 
 export class LeaveRepository implements ILeaveRepository {
   constructor(
@@ -68,4 +69,23 @@ export class LeaveRepository implements ILeaveRepository {
 
     return Number(result.time) || 0;
   }
+
+  public async getSumOfDurationsBetween(
+    startDate: Date,
+    endDate: Date,
+    userId: string
+  ): Promise<number> {
+    const result = await this.repository
+      .createQueryBuilder('leave')
+      .select('SUM(leave.time) as time')
+      .innerJoin('leave.leaveRequest', 'leaveRequest')
+      .innerJoin('leaveRequest.user', 'user')
+      .where('leave.date >= :startDate', { startDate })
+      .andWhere('leave.date < :endDate', { endDate })
+      .andWhere('leaveRequest.type = :type', { type: Type.PAID })
+      .andWhere('user.id = :userId', { userId: userId })
+      .getRawOne();
+
+    return Number(result.time) || 0;
+  }
 }

src/Infrastructure/HumanResource/Leave/Table/LeaveRequestOverviewTableFactory.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@nestjs/common';
+import { ILeaveRequestsOverview } from 'src/Domain/HumanResource/Leave/ILeaveRequestsOverview';
+import { Table } from 'src/Infrastructure/Tables';
+import { RowFactory } from 'src/Infrastructure/Tables/RowFactory';
+
+@Injectable()
+export class LeaveRequestsOverviewTableFactory {
+  constructor(private rowFactory: RowFactory) {}
+
+  public create(overview: ILeaveRequestsOverview): Table {
+    const columns = ['leaves-overview-daysRemaining'];
+
+    const row = this.rowFactory
+      .createBuilder()
+      .template('pages/leave_requests/_overview_badge.njk', {
+        overview
+      })
+      .build();
+
+    return new Table(columns, [row]);
+  }
+}

src/Infrastructure/HumanResource/humanResource.module.ts

@@ -80,6 +80,8 @@ import { ListMealTicketsController } from './MealTicket/Controller/ListMealTicke
 import { MealTicketTableFactory } from './MealTicket/Table/MealTicketTableFactory';
 import { AddMealTicketRemovalController } from './MealTicket/Controller/AddMealTicketRemovalController';
 import { ExportLeavesCalendarController } from './Leave/Controller/ExportLeavesCalendarController';
+import { LeaveRequestsOverviewTableFactory } from './Leave/Table/LeaveRequestOverviewTableFactory';
+import { GetLeaveRequestsOverviewQueryHandler } from 'src/Application/HumanResource/Leave/Query/GetLeaveRequestsOverviewQueryHandler';
 
 @Module({
   imports: [
@@ -183,6 +185,8 @@ import { ExportLeavesCalendarController } from './Leave/Controller/ExportLeavesC
     IncreaseUserSavingsRecordCommandHandler,
     UserTableFactory,
     LeaveRequestTableFactory,
+    GetLeaveRequestsOverviewQueryHandler,
+    LeaveRequestsOverviewTableFactory,
     PayrollElementsTableFactory,
     MealTicketTableFactory
   ]

src/assets/styles/components/button.css

@@ -35,7 +35,7 @@
   padding: 0;
   width: var(--button-size, calc(4 * var(--w)));
   height: var(--button-size, calc(4 * var(--w)));
-  display: grid;
+  display: inline-grid;
   place-items: center;
 }
 

src/assets/styles/defaults.css

@@ -36,3 +36,10 @@ fieldset {
 dialog {
   margin: auto;
 }
+
+:popover-open {
+  position: absolute;
+  inset: unset;
+  margin: var(--w);
+  white-space: wrap;
+}

src/assets/styles/utilities/placement.css

@@ -2,3 +2,15 @@
   display: grid;
   place-items: center;
 }
+
+.pc-relative {
+  position: relative;
+}
+
+.pc-absolute {
+  position: absolute;
+  top: var(--top, unset);
+  left: var(--left, unset);
+  right: var(--right, unset);
+  bottom: var(--bottom, unset);
+}

src/assets/styles/variables.css

@@ -63,6 +63,15 @@
   --event-other-border: rgb(244, 245, 247);
   --event-other-text: rgb(36, 38, 45);
   --event-today: #fcf8e3;
+  --leave-daysPerYear-background: rgb(244, 245, 247);
+  --leave-daysPerYear-border: rgb(244, 245, 247);
+  --leave-daysPerYear-text: rgb(36, 38, 45);
+  --leave-daysTaken-background: rgb(253, 246, 178);
+  --leave-daysTaken-border: rgb(253, 246, 178);
+  --leave-daysTaken-text: rgb(142, 75, 16);
+  --leave-daysRemaining-background: rgb(222, 247, 236);
+  --leave-daysRemaining-border: rgb(222, 247, 236);
+  --leave-daysRemaining-text: rgb(4, 108, 78);
   --header-height-desktop: 56px;
 }
 

src/templates/pages/leave_requests/_filters_form.njk

@@ -0,0 +1,24 @@
+{% macro filters_form() %}
+    <pc-auto-form>
+        <form
+            method="GET"
+            action=""
+            class="pc-cluster pc-gap"
+            style="--cluster-align: flex-end"
+        >
+            <div class="pc-select-group pc-m" style="--m: 0">
+                <label class="pc-label" for="userId">{{ 'leaves-user'|trans }}</label>
+                <select name="userId" id="userId">
+                    {% for user in users %}
+                        <option value="{{ user.id }}" {% if user.id == userId %}selected{% endif %}>{{ user|fullName }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <noscript>
+                <button type="submit" class="pc-btn pc-btn--secondary">
+                    {{ 'common-form-update'|trans }}
+                </button>
+            </noscript>
+        </form>
+    </pc-auto-form>
+{% endmacro %}

src/templates/pages/leave_requests/_overview_badge.njk

@@ -0,0 +1,16 @@
+<span class="pc-badge pc-bold" style="--badge-color: var(--leave-daysRemaining-text); --badge-background: var(--leave-daysRemaining-background)">
+    {{ 'leaves-overview-daysRemaining-value'|trans({ daysRemaining: overview.daysRemaining }) }}
+</span>
+
+<span class="pc-relative">
+    <button
+        popovertarget="leaves-explanation"
+        class="pc-btn pc-btn--secondary pc-btn--circle"
+        title="{{ 'leaves-overview-daysRemaining-showExplanation'|trans }}"
+        aria-label="{{ 'leaves-overview-daysRemaining-showExplanation'|trans }}"
+    >i</button>
+
+    <div id="leaves-explanation" popover>
+        {{ 'leaves-overview-daysRemaining-explanation-value'|trans({ daysTaken: overview.daysTaken, daysPerYear: overview.daysPerYear }) }}
+    </div>
+</span>

src/templates/pages/leave_requests/list.njk

@@ -1,6 +1,7 @@
 {% extends 'layouts/app.njk' %}
 {% import 'macros/links.njk' as links %}
 {% from 'macros/breadcrumb.njk' import breadcrumb %}
+{% from './_filters_form.njk' import filters_form with context %}
 
 {% set title = 'leaves-title'|trans %}
 
@@ -15,6 +16,17 @@
         {{ links.add(path('people_leave_requests_add'), text='leave-requests-add-title'|trans) }}
     </div>
 
+    <h2>{{ 'leaves-summary-title'|trans }}</h2>
+
+    <div class="pc-stack">
+        <div class="pc-cluster" style="--cluster-gap: calc(2 * var(--w)); --cluster-align: flex-end">
+            {{ filters_form() }}
+            {% table overviewTable, { attr: {class: 'pc-table--center pc-table--no-shadow'} } %}
+        </div>
+    </div>
+
+    <h2>{{ 'leaves-list-title'|trans }}</h2>
+
     {% table table %}
 
     {% set paginationUrl = path('people_leave_requests_list') %}