Add faircalendar list view, calendar view becomes lazy, reduce CLS an…

…d FLOUC

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "prebuild": "rimraf dist",
     "build": "nest build",
-    "_esbuild": "esbuild src/assets/main.js src/assets/faircalendar.js --bundle --splitting --outdir=dist/public --format=esm",
+    "_esbuild": "esbuild src/assets/main.js --bundle --splitting --outdir=dist/public --format=esm",
     "assets:build": "npm run _esbuild -- --minify",
     "assets:watch": "npm run _esbuild -- --watch",
     "format": "prettier --write \"src/**/*.ts\" \"src/assets/**/*\" \"e2e/**/*.js\"",

src/Application/IDateUtils.ts

@@ -3,6 +3,7 @@ import { MonthDate } from './Common/MonthDate';
 export interface IDateUtils {
   format(date: Date, format: string): string;
   getDaysInMonth(date: Date): number;
+  getWeekDaysOfMonth(date: Date): Date[];
   isWeekend(date: Date): boolean;
   getCurrentDate(): Date;
   getCurrentDateToISOString(): string;

src/Infrastructure/Adapter/DateUtilsAdapter.ts

@@ -4,7 +4,8 @@ import {
   isWeekend as fnsIsWeekend,
   getDaysInMonth as fnsGetDaysInMonth,
   eachDayOfInterval,
-  addDays
+  addDays,
+  isWeekend
 } from 'date-fns';
 import { MonthDate } from 'src/Application/Common/MonthDate';
 import { IDateUtils } from 'src/Application/IDateUtils';
@@ -55,6 +56,17 @@ export class DateUtilsAdapter implements IDateUtils {
     return fnsGetDaysInMonth(date);
   }
 
+  public getWeekDaysOfMonth(date: Date): Date[] {
+    return eachDayOfInterval({
+      start: new Date(date.getFullYear(), date.getUTCMonth(), 1),
+      end: new Date(
+        date.getFullYear(),
+        date.getUTCMonth(),
+        this.getDaysInMonth(date)
+      )
+    }).filter(day => !isWeekend(day));
+  }
+
   public isWeekend(date: Date): boolean {
     return fnsIsWeekend(date);
   }

src/Infrastructure/Common/Utils/ArrayUtils.ts

@@ -15,4 +15,15 @@ export class ArrayUtils {
   public static zip<T, U>(left: T[], right: U[]): [T, U][] {
     return left.map((value, idx) => [value, right[idx]]);
   }
+
+  public static groupBy<T>(
+    xs: Array<T>,
+    key: (x: T) => string
+  ): { [key: string]: T } {
+    // Credit: https://stackoverflow.com/a/34890276
+    return xs.reduce(function(rv, x) {
+      (rv[key(x)] = rv[key(x)] || []).push(x);
+      return rv;
+    }, {});
+  }
 }

src/Infrastructure/Common/Utils/dateUtils.ts

@@ -1,4 +1,5 @@
 import { format, parseISO } from 'date-fns';
+import { fr } from 'date-fns/locale';
 
 export const minutesToHours = (value: number): string => {
   const hours = Math.floor(value / 60);
@@ -29,3 +30,10 @@ export const formatHtmlDate = (value: Date): string => {
 export const formatHtmlYearMonth = (value: Date): string => {
   return format(value, 'yyyy-MM');
 };
+
+export const formatEventDate = (value: Date | string): string => {
+  if (typeof value === 'string') {
+    value = parseISO(value);
+  }
+  return format(value, 'eee dd', { locale: fr });
+};

src/Infrastructure/FairCalendar/Controller/AddEventController.ts

@@ -24,6 +24,7 @@ import { GetTasksQuery } from 'src/Application/Task/Query/GetTasksQuery';
 import { GetProjectsQuery } from 'src/Application/Project/Query/GetProjectsQuery';
 import { GetCooperativeQuery } from 'src/Application/Settings/Query/GetCooperativeQuery';
 import { ArrayUtils } from 'src/Infrastructure/Common/Utils/ArrayUtils';
+import { RouteNameResolver } from 'src/Infrastructure/Common/ExtendedRouting/RouteNameResolver';
 
 @Controller('app/faircalendar/events/add')
 @UseGuards(IsAuthenticatedGuard)
@@ -32,7 +33,8 @@ export class AddEventController {
     @Inject('ICommandBus')
     private readonly commandBus: ICommandBus,
     @Inject('IQueryBus')
-    private readonly queryBus: IQueryBus
+    private readonly queryBus: IQueryBus,
+    private readonly resolver: RouteNameResolver
   ) {}
 
   @Get(':startDate--:endDate')
@@ -97,7 +99,7 @@ export class AddEventController {
         )
       );
 
-      res.redirect(303, '/app/faircalendar');
+      res.redirect(303, this.resolver.resolve('faircalendar_index'));
     } catch (e) {
       throw new BadRequestException(e.message);
     }

src/Infrastructure/FairCalendar/Controller/DeleteEventController.ts

@@ -15,13 +15,15 @@ import { User } from 'src/Domain/HumanResource/User/User.entity';
 import { IdDTO } from 'src/Infrastructure/Common/DTO/IdDTO';
 import { WithName } from 'src/Infrastructure/Common/ExtendedRouting/WithName';
 import { DeleteEventCommand } from 'src/Application/FairCalendar/Command/DeleteEventCommand';
+import { RouteNameResolver } from 'src/Infrastructure/Common/ExtendedRouting/RouteNameResolver';
 
 @Controller('app/faircalendar/events/delete')
 @UseGuards(IsAuthenticatedGuard)
 export class DeleteEventController {
   constructor(
     @Inject('ICommandBus')
-    private readonly commandBus: ICommandBus
+    private readonly commandBus: ICommandBus,
+    private readonly resolver: RouteNameResolver
   ) {}
 
   @Post(':id')
@@ -33,7 +35,7 @@ export class DeleteEventController {
   ) {
     try {
       await this.commandBus.execute(new DeleteEventCommand(dto.id, user));
-      res.redirect(303, '/app/faircalendar');
+      res.redirect(303, this.resolver.resolve('faircalendar_index'));
     } catch (e) {
       throw new BadRequestException(e.message);
     }

src/Infrastructure/FairCalendar/Controller/EditEventController.ts

@@ -13,7 +13,6 @@ import {
 import { ICommandBus } from 'src/Application/ICommandBus';
 import { IsAuthenticatedGuard } from 'src/Infrastructure/HumanResource/User/Security/IsAuthenticatedGuard';
 import { WithName } from 'src/Infrastructure/Common/ExtendedRouting/WithName';
-import { AddEventControllerDTO } from '../DTO/AddEventControllerDTO';
 import { LoggedUser } from 'src/Infrastructure/HumanResource/User/Decorator/LoggedUser';
 import { User } from 'src/Domain/HumanResource/User/User.entity';
 import { IQueryBus } from 'src/Application/IQueryBus';
@@ -30,6 +29,7 @@ import { IdDTO } from 'src/Infrastructure/Common/DTO/IdDTO';
 import { EditEventDTO } from '../DTO/EditEventDTO';
 import { UpdateEventCommand } from 'src/Application/FairCalendar/Command/UpdateEventCommand';
 import { GetEventByIdQuery } from 'src/Application/FairCalendar/Query/GetEventByIdQuery';
+import { RouteNameResolver } from 'src/Infrastructure/Common/ExtendedRouting/RouteNameResolver';
 
 @Controller('app/faircalendar/events/edit')
 @UseGuards(IsAuthenticatedGuard)
@@ -38,7 +38,8 @@ export class EditEventController {
     @Inject('ICommandBus')
     private readonly commandBus: ICommandBus,
     @Inject('IQueryBus')
-    private readonly queryBus: IQueryBus
+    private readonly queryBus: IQueryBus,
+    private readonly resolver: RouteNameResolver
   ) {}
 
   @Get(':id')
@@ -99,7 +100,7 @@ export class EditEventController {
         )
       );
 
-      res.redirect(303, '/app/faircalendar');
+      res.redirect(303, this.resolver.resolve('faircalendar_index'));
     } catch (e) {
       throw new BadRequestException(e.message);
     }

src/Infrastructure/FairCalendar/Controller/FairCalendarController.ts

@@ -4,8 +4,10 @@ import {
   Inject,
   Query,
   Render,
+  Req,
   UseGuards
 } from '@nestjs/common';
+import { Request } from 'express';
 import { User } from 'src/Domain/HumanResource/User/User.entity';
 import { GetMonthlyFairCalendarQuery } from 'src/Application/FairCalendar/Query/GetMonthlyFairCalendarQuery';
 import { IQueryBus } from 'src/Application/IQueryBus';
@@ -20,6 +22,9 @@ import { GetUsersQuery } from 'src/Application/HumanResource/User/Query/GetUsers
 import { FairCalendarView } from 'src/Application/FairCalendar/View/FairCalendarView';
 import { FairCalendarOverviewFactory } from 'src/Domain/FairCalendar/FairCalendarOverviewFactory';
 import { FairCalendarOverviewTableFactory } from '../Table/FairCalendarOverviewTableFactory';
+import { IDateUtils } from 'src/Application/IDateUtils';
+import { ArrayUtils } from 'src/Infrastructure/Common/Utils/ArrayUtils';
+import { RouteNameResolver } from 'src/Infrastructure/Common/ExtendedRouting/RouteNameResolver';
 
 @Controller('app/faircalendar')
 @UseGuards(IsAuthenticatedGuard)
@@ -29,16 +34,20 @@ export class FairCalendarController {
     private readonly queryBus: IQueryBus,
     @Inject('ITranslator')
     private readonly translator: ITranslator,
+    @Inject('IDateUtils')
+    private readonly dateUtils: IDateUtils,
     private overviewFactory: FairCalendarOverviewFactory,
-    private overviewTableFactory: FairCalendarOverviewTableFactory
+    private overviewTableFactory: FairCalendarOverviewTableFactory,
+    private readonly resolver: RouteNameResolver
   ) {}
 
   @Get()
   @WithName('faircalendar_index')
   @Render('pages/faircalendar/index.njk')
   public async get(
     @Query() dto: FairCalendarControllerDTO,
-    @LoggedUser() user: User
+    @LoggedUser() user: User,
+    @Req() req: Request
   ) {
     let date = new Date();
 
@@ -87,7 +96,9 @@ export class FairCalendarController {
         ...(event.id
           ? {
               extendedProps: {
-                url: `/app/faircalendar/events/edit/${event.id}`
+                url: this.resolver.resolve('faircalendar_events_edit', {
+                  id: event.id
+                })
               }
             }
           : {}),
@@ -97,14 +108,28 @@ export class FairCalendarController {
       };
     });
 
+    const eventsByStartDate = ArrayUtils.groupBy(
+      fullCalendarEvents,
+      event => event.start
+    );
+
+    const listViewDays = this.dateUtils.getWeekDaysOfMonth(date).map(day => {
+      return [
+        day,
+        eventsByStartDate[this.dateUtils.format(day, 'yyyy-MM-dd')] || []
+      ];
+    });
+
     return {
       users,
       overviewTable,
       fullCalendarEvents,
       date,
       currentMonth: date.getMonth() + 1,
       currentYear: date.getFullYear(),
-      userId
+      userId,
+      viewName: req.cookies.faircalendar_view,
+      listViewDays
     };
   }
 }

src/Infrastructure/FairCalendar/faircalendar.module.ts

@@ -29,14 +29,16 @@ import { FairCalendarOverviewFactory } from 'src/Domain/FairCalendar/FairCalenda
 import { FairCalendarOverviewTableFactory } from './Table/FairCalendarOverviewTableFactory';
 import { TranslationsModule } from '../Translations/translations.module';
 import { TablesModule } from '../Tables/tables.module';
+import { ExtendedRoutingModule } from '../Common/ExtendedRouting/extendedRouting.module';
 
 @Module({
   imports: [
     BusModule,
     ConfigModule,
     TypeOrmModule.forFeature([Project, Event, Task, Leave, Cooperative]),
     TranslationsModule,
-    TablesModule
+    TablesModule,
+    ExtendedRoutingModule
   ],
   controllers: [
     FairCalendarController,

src/Infrastructure/Templates/NunjucksTemplates/NunjucksTemplates.ts

@@ -9,6 +9,7 @@ import { ITranslator } from 'src/Infrastructure/Translations/ITranslator';
 import { formatFullName } from '../../Common/Utils/formatUtils';
 import {
   formatDate,
+  formatEventDate,
   formatHtmlDate,
   formatHtmlYearMonth,
   minutesToHours
@@ -44,6 +45,7 @@ export class NunjucksTemplates implements ITemplates {
     env.addFilter('date', value =>
       value === 'now' ? new Date() : formatDate(value)
     );
+    env.addFilter('eventDate', value => formatEventDate(value));
     env.addFilter('htmlDate', value => formatHtmlDate(value));
     env.addFilter('htmlYearMonth', value => formatHtmlYearMonth(value));
     env.addFilter('longMonth', (month: number) =>

src/assets/customElements/autoForm.js

@@ -6,18 +6,13 @@ export default class extends HTMLElement {
     onParsed(() => {
       // Progressive enhancement:
       // If this custom element activates, submit the form whenever
-      // a form control changes value, and remove any manual submit button.
+      // a form control changes value.
 
       const form = /** @type {HTMLFormElement} */ (this.querySelector('form'));
-      const submitBtn = this.querySelector('button[type="submit"]');
 
       for (const formControl of form.elements) {
         formControl.addEventListener('change', () => form.requestSubmit());
       }
-
-      if (submitBtn) {
-        submitBtn.remove();
-      }
     });
   }
 }

src/assets/customElements/clipboardButton.js

@@ -16,11 +16,6 @@ export default class extends HTMLElement {
       throw new Error(`input at '${selector}' was not found`);
     }
 
-    const template = /** @type {HTMLTemplateElement} */ (this.querySelector(
-      'template'
-    ));
-    this.appendChild(document.importNode(template.content, true));
-
     const btn = /** @type {HTMLButtonElement} */ (this.querySelector('button'));
 
     btn.addEventListener('click', () => {