Drop Turbo again, full page navigations are fine for now

e2e/customers.spec.js

@@ -31,7 +31,7 @@ test.describe('authenticated', () => {
   test('navigate to add customer', async ({ page }) => {
     await page.goto('/app/customers');
 
-    await page.getByRole('button', { name: 'Ajouter' }).click();
+    await page.getByRole('link', { name: 'Ajouter' }).click();
     await page.waitForURL('/app/customers/add');
   });
 });

e2e/faircalendar.spec.js

@@ -46,7 +46,7 @@ test.describe('authenticated', () => {
     await page.goto('/app');
     await page.goBack();
 
-    // Regression test: ensure calendar is rendered without duplication duplicated, and is interactive
+    // Regression test: ensure calendar is rendered without duplication and that it is interactive
     expect(await calendar.locator('.ec').count()).toBe(1);
     await calendar
       .locator('.ec-body .ec-day')

e2e/home.spec.js

@@ -23,9 +23,13 @@ test.describe('authenticated', () => {
     );
   });
 
-  test('navigate to leave requests', async ({ page }) => {
+  test.skip('navigate to leave requests -- requires leaveRequest seeder', async ({
+    page
+  }) => {
+    await page.goto('/app');
+
     await page
-      .getByRole('button', { name: 'Voir les demandes de congés' })
+      .getByRole('link', { name: 'Voir les demandes de congés' })
       .click();
     await page.waitForURL('/app/people/leave_requests');
   });

package.json

@@ -64,7 +64,6 @@
     "@event-calendar/core": "^2.3.3",
     "@event-calendar/day-grid": "^2.3.3",
     "@event-calendar/interaction": "^2.3.3",
-    "@hotwired/turbo": "^7.3.0",
     "@nestjs/cli": "^9.3.0",
     "@nestjs/schematics": "^9.0.3",
     "@nestjs/testing": "^9.2.0",

src/DataSeeding/Factories/CustomerFactory.ts

@@ -1,11 +1,4 @@
 import { Factory } from '@concepta/typeorm-seeding';
-import { faker } from '@faker-js/faker';
 import { Customer } from 'src/Domain/Customer/Customer.entity';
 
-export class CustomerFactory extends Factory<Customer> {
-  // protected async entity(): Promise<Customer> {
-  //   return new Customer(
-  //     faker.company.name(),
-  //   );
-  // }
-}
+export class CustomerFactory extends Factory<Customer> {}

src/Infrastructure/FairCalendar/Controller/FairCalendarController.ts

@@ -96,19 +96,13 @@ export class FairCalendarController {
       };
     });
 
-    const currentYear = date.getFullYear();
-    const minYear = dto.minYear ?? currentYear - 5;
-    const maxYear = dto.maxYear ?? currentYear;
-
     return {
       users,
       overviewTable,
       fullCalendarEvents,
       date,
       currentMonth: date.getMonth(),
       currentYear: date.getFullYear(),
-      minYear,
-      maxYear,
       userId
     };
   }

src/Infrastructure/FairCalendar/DTO/FairCalendarControllerDTO.ts

@@ -13,12 +13,4 @@ export class FairCalendarControllerDTO {
   @IsNumber()
   @IsOptional()
   public year?: number;
-
-  @IsNumber()
-  @IsOptional()
-  public minYear?: number;
-
-  @IsNumber()
-  @IsOptional()
-  public maxYear?: number;
 }

src/assets/customElements/autoForm.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { onParsed } from '../lib/customElements';
 
 export default class extends HTMLFormElement {

src/assets/customElements/blobLink.js

@@ -1,6 +1,14 @@
+// @ts-check
+
 export default class extends HTMLAnchorElement {
   connectedCallback() {
-    const blob = new Blob([this.dataset.blobContent], {
+    const blobContent = this.dataset.blobContent;
+
+    if (!blobContent) {
+      throw new Error('data-blob-content is missing or empty');
+    }
+
+    const blob = new Blob([blobContent], {
       type: this.dataset.blobMimeType
     });
 

src/assets/customElements/clipboardButton.js

@@ -1,20 +1,32 @@
+// @ts-check
+
 export default class extends HTMLButtonElement {
+  /** @type {HTMLInputElement} */
+  #sourceEl;
+
   connectedCallback() {
-    /** @type {HTMLInputElement|null} */
-    const sourceEl = document.querySelector(this.dataset.clipboardButtonSource);
+    const sourceSelector = this.dataset.clipboardButtonSource;
+
+    if (!sourceSelector) {
+      throw new Error('data-clipboard-button-source is missing');
+    }
+
+    const sourceEl = /** @type {HTMLInputElement|null} */ (document.querySelector(
+      sourceSelector
+    ));
 
     if (!sourceEl) {
-      throw new Error('Source element not found');
+      throw new Error(`element '${sourceSelector}' was not found`);
     }
 
-    this.sourceEl = sourceEl;
+    this.#sourceEl = sourceEl;
 
     this.addEventListener('click', this.#handleClick);
   }
 
   #handleClick = () => {
-    this.sourceEl.select(); // Visual feedback
-    navigator.clipboard.writeText(this.sourceEl.value);
+    this.#sourceEl.select(); // Visual feedback
+    navigator.clipboard.writeText(this.#sourceEl.value);
   };
 
   disconnectedCallback() {

src/assets/customElements/eventCalendar.js

@@ -1,15 +1,11 @@
 // @ts-check
-import * as Turbo from '@hotwired/turbo';
 import Calendar from '@event-calendar/core';
 import DayGrid from '@event-calendar/day-grid';
 import Interaction from '@event-calendar/interaction';
 import { format, subDays } from 'date-fns';
 
 export default class extends HTMLElement {
-  /** @type {Calendar} */
-  #ec;
-
-  /** @type{string} */
+  /** @type {string} */
   #addUrlTemplate;
 
   connectedCallback() {
@@ -24,9 +20,7 @@ export default class extends HTMLElement {
     }
 
     this.#addUrlTemplate = addUrlTemplate;
-    this.#ec = this.#createCalendar(date, events);
-
-    document.addEventListener('turbo:before-cache', this.#onTurboBeforeCache);
+    this.#createCalendar(date, events);
   }
 
   /**
@@ -38,16 +32,15 @@ export default class extends HTMLElement {
       .replace(':startDate', format(startDate, 'yyyy-MM-dd'))
       .replace(':endDate', format(endDate, 'yyyy-MM-dd'));
 
-    Turbo.visit(url);
+    window.location.href = url;
   };
 
   /**
    * @param {string} date
    * @param {any[]} events
-   * @returns {Calendar}
    */
   #createCalendar = (date, events) => {
-    return new Calendar({
+    const ec = new Calendar({
       target: this,
       props: {
         plugins: [DayGrid, Interaction],
@@ -69,7 +62,7 @@ export default class extends HTMLElement {
             const url = event.extendedProps.url;
             if (url) {
               return {
-                html: `<a href="${url}" data-turbo-frame="_top">${event.title}</a>`
+                html: `<a href="${url}">${event.title}</a>`
               };
             }
             return event.title;
@@ -80,21 +73,13 @@ export default class extends HTMLElement {
           selectable: true,
           selectBackgroundColor: 'var(--background-action-violet)',
           select: ({ start, end }) => {
+            // By default, range will stay selected if navigating using the back button.
+            ec.unselect();
+
             this.#goToEventCreate(start, subDays(end, 1));
           }
         }
       }
     });
   };
-
-  #onTurboBeforeCache = () => {
-    this.#ec.destroy();
-  };
-
-  disconnectedCallback() {
-    document.removeEventListener(
-      'turbo:before-cache',
-      this.#onTurboBeforeCache
-    );
-  }
 }

src/assets/customElements/eventForm.js

@@ -1,12 +1,22 @@
+// @ts-check
 import { onParsed } from '../lib/customElements';
 
 export default class extends HTMLFormElement {
   connectedCallback() {
     onParsed(() => {
-      const missionFields = this.querySelector('#mission-fields');
+      const missionFields = document.getElementById('mission-fields');
 
-      this.type.addEventListener('change', event => {
-        const isMission = event.target.value === 'mission';
+      if (!missionFields) {
+        throw new Error('#mission-fields is missing');
+      }
+
+      const type = /** @type {HTMLSelectElement} */ (this.type);
+
+      type.addEventListener('change', event => {
+        if (!event.target) {
+          return;
+        }
+        const isMission = event.target['value'] === 'mission';
         missionFields.hidden = !isMission;
         this.projectId.disabled = !isMission;
         this.taskId.disabled = !isMission;

src/assets/customElements/fairCalendarFiltersForm.js

@@ -1,64 +1,53 @@
+// @ts-check
 import { onParsed } from '../lib/customElements';
 
 export default class extends HTMLFormElement {
   connectedCallback() {
     onParsed(() => {
       this.previousBtn.addEventListener('click', () => {
         this.month.value = this._clipMonth(+this.month.value - 1);
-        this.requestSubmit();
+        this._submit();
       });
 
       this.todayBtn.addEventListener('click', () => {
         const today = new Date();
         this.month.value = today.getMonth();
         this.year.value = today.getFullYear();
-        this.requestSubmit();
+        this._submit();
       });
 
       this.nextBtn.addEventListener('click', () => {
         this.month.value = this._clipMonth(+this.month.value + 1);
-        this.requestSubmit();
+        this._submit();
       });
 
       this.month.addEventListener('change', () => {
-        this.requestSubmit();
+        this._submit();
       });
 
       this.year.addEventListener('change', () => {
-        this.requestSubmit();
+        this._submit();
       });
 
       this.userId.addEventListener('change', () => {
-        this.requestSubmit();
+        this._submit();
       });
     });
   }
 
+  _submit() {
+    this.requestSubmit();
+  }
+
   _clipMonth(month) {
     if (month < 0) {
       month += 12;
-
-      const newYear = +this.year.value - 1;
-
-      if (newYear < +this.minYear.value) {
-        this.year.options.add(new Option(newYear, newYear), 0);
-        this.minYear.value = newYear;
-      }
-
-      this.year.value = newYear;
+      this.year.value = +this.year.value - 1;
     }
 
     if (month > 11) {
       month -= 12;
-
-      const newYear = +this.year.value + 1;
-
-      if (newYear > +this.maxYear.value) {
-        this.year.options.add(new Option(newYear, newYear));
-        this.maxYear.value = newYear;
-      }
-
-      this.year.value = newYear;
+      this.year.value = +this.year.value + 1;
     }
 
     return month;

src/assets/customElements/index.js

@@ -1,9 +1,9 @@
+// @ts-check
 import autoForm from './autoForm';
 import blobLink from './blobLink';
 import clipboardButton from './clipboardButton';
 import eventForm from './eventForm';
 import fairCalendarFiltersForm from './fairCalendarFiltersForm';
-import navigationProgress from './navigationProgress';
 import navMenuButton from './navMenuButton';
 import themeToggler from './themeToggler';
 
@@ -16,7 +16,6 @@ customElements.define('pc-event-form', eventForm, { extends: 'form' });
 customElements.define('pc-faircalendar-filters-form', fairCalendarFiltersForm, {
   extends: 'form'
 });
-customElements.define('pc-navigation-progress', navigationProgress);
 customElements.define('pc-nav-menu-button', navMenuButton, {
   extends: 'button'
 });