Development

.github/workflows/cd.yml

@@ -65,7 +65,7 @@ jobs:
       - name: SSH to VPS and deploy
         run: |
           TAG=${{ needs.build-and-push.outputs.tag }}
-          ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_ed25519_frontend ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }} << EOF
+          ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_ed25519_frontend -p "${{ secrets.VPS_SSH_PORT }}" ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }} << EOF
             cd /home/${{ secrets.VPS_USER }}/alasso/frontend/$TAG
             docker compose pull
             docker compose down

cypress.config.ts

@@ -3,7 +3,9 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
 
   e2e: {
-    'baseUrl': 'http://localhost:4200'
+    'baseUrl': 'http://localhost:4200',
+        viewportWidth: 1920,
+    viewportHeight: 1080,
   },
 
 

cypress/support/e2e.ts

@@ -1,6 +1,6 @@
 beforeEach(() => {
   // the home page's necessary mocks
-  cy.intercept('GET', '/activities', { fixture: '/common/activities.json' }).as('getActivities');
+  cy.intercept('GET', '/activities/future', { fixture: '/common/activities.json' }).as('getActivities');
   cy.intercept('GET', '/themes', { fixture: '/common/themes.json' }).as('getThemes');
   cy.intercept('GET', 'https://api.maptiler.com/maps/**', { statusCode: 200, body: {} }).as('mapTiler');
 });

src/app/app.component.html

@@ -2,7 +2,7 @@
   <app-header></app-header>
   <p-toast></p-toast>
   @if (loading) {
     <p-progressBar mode="indeterminate" [style]="{ height: '6px' }" />
   }
 
   <div class="page">
@@ -10,4 +10,5 @@
   </div>
   <div class="spacer"></div>
   <app-footer></app-footer>
-</div>
+  <p-confirmDialog></p-confirmDialog>
+</div>

src/app/app.component.ts

@@ -7,11 +7,12 @@ import { HeaderComponent } from './common/components/header/header.component';
 import { ProgressBar } from 'primeng/progressbar';
 import { AuthFacade } from './features/authentication/services/auth-facade.service';
 import { filter } from 'rxjs/operators';
+import { ConfirmDialog } from 'primeng/confirmdialog';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [ButtonModule, RouterOutlet, HeaderComponent, FooterComponent, Toast, ProgressBar],
+  imports: [ButtonModule, RouterOutlet, HeaderComponent, FooterComponent, Toast, ProgressBar, ConfirmDialog],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })

src/app/app.routes.ts

@@ -1,69 +1,55 @@
 import { Routes } from '@angular/router';
-import { ActivitiesHomeComponent } from './features/activity/pages/activities-home/activities-home.component';
-import { ActivityDetailsComponent } from './features/activity/pages/activity-details/activity-details.component';
-import { activityDetailsResolver } from './common/resolvers/activity-details.resolver';
-import { AssociationDetailsComponent } from './features/association/pages/association-details/association-details.component';
-import { associationResolver } from './common/resolvers/association.resolver';
-import { ActivityCreationComponent } from './features/activity/pages/activity-creation/activity-creation.component';
-import { isLoggedInGuard } from './common/guards/is-logged-in.guard';
+import { isAdminGuard } from './common/guards/is-admin.guard';
 import { isAssociationGuard } from './common/guards/is-association.guard';
-import { ReportHomePageComponent } from './features/report/pages/report-home-page/report-home-page.component';
-import { AssociationProfilePageComponent } from './features/profile/pages/association-profile-page/association-profile-page.component';
-import { VoluntaryProfilePageComponent } from './features/profile/pages/voluntary-profile-page/voluntary-profile-page.component';
+import { isLoggedInGuard } from './common/guards/is-logged-in.guard';
 import { isVoluntaryGuard } from './common/guards/is-voluntary.guard';
-import { isAdminGuard } from './common/guards/is-admin.guard';
-import { CguComponent } from './features/authentication/components/legals/cgu/cgu.component';
-import { PolitiqueConfidentialiteComponent } from './features/authentication/components/legals/politique-confidentialite/politique-confidentialite.component';
-import { ResetPasswordPageComponent } from './features/authentication/pages/reset-password-page/reset-password-page.component';
+import { activityDetailsResolver } from './common/resolvers/activity-details.resolver';
+import { associationResolver } from './common/resolvers/association.resolver';
+import { ActivitiesHomeComponent } from './features/activity/pages/activities-home/activities-home.component';
 
 export const routes: Routes = [
   {
     path: '',
-    component: ActivitiesHomeComponent,
     pathMatch: 'full',
+    component: ActivitiesHomeComponent,
   },
+
   {
     path: 'activity/creation',
     canActivate: [isLoggedInGuard, isAssociationGuard],
-    component: ActivityCreationComponent,
+    loadComponent: () => import('./features/activity/pages/activity-creation/activity-creation.component').then(m => m.ActivityCreationComponent),
   },
   {
     path: 'activity/creation/:id',
     canActivate: [isLoggedInGuard, isAssociationGuard],
-    component: ActivityCreationComponent,
-  },
-  {
-    path: 'reports',
-    canActivate: [isLoggedInGuard, isAdminGuard],
-    component: ReportHomePageComponent,
+    loadComponent: () => import('./features/activity/pages/activity-creation/activity-creation.component').then(m => m.ActivityCreationComponent),
   },
   {
     path: 'activity/:id',
-    resolve: {
-      activityDetails: activityDetailsResolver,
-    },
-    component: ActivityDetailsComponent,
+    resolve: { activityDetails: activityDetailsResolver },
+    loadComponent: () => import('./features/activity/pages/activity-details/activity-details.component').then(m => m.ActivityDetailsComponent),
   },
+
   {
     path: 'association/:id',
-    component: AssociationDetailsComponent,
-    resolve: {
-      association: associationResolver,
-    },
+    resolve: { association: associationResolver },
+    loadComponent: () =>
+      import('./features/association/pages/association-details/association-details.component').then(m => m.AssociationDetailsComponent),
   },
-  { path: 'cgu', component: CguComponent },
-  { path: 'politique-confidentialite', component: PolitiqueConfidentialiteComponent },
-  { path: 'reset-password', component: ResetPasswordPageComponent },
+
+  {
+    path: 'reports',
+    canActivate: [isLoggedInGuard, isAdminGuard],
+    loadComponent: () => import('./features/report/pages/report-home-page/report-home-page.component').then(m => m.ReportHomePageComponent),
+  },
+
   {
     path: 'profile/association',
-    component: AssociationProfilePageComponent,
     canActivate: [isLoggedInGuard, isAssociationGuard],
+    loadComponent: () =>
+      import('./features/profile/pages/association-profile-page/association-profile-page.component').then(m => m.AssociationProfilePageComponent),
     children: [
-      {
-        path: '',
-        redirectTo: 'activities',
-        pathMatch: 'full',
-      },
+      { path: '', redirectTo: 'activities', pathMatch: 'full' },
       {
         path: 'activities',
         loadComponent: () =>
@@ -89,16 +75,14 @@ export const routes: Routes = [
       },
     ],
   },
+
   {
     path: 'profile/voluntary',
-    component: VoluntaryProfilePageComponent,
     canActivate: [isLoggedInGuard, isVoluntaryGuard],
+    loadComponent: () =>
+      import('./features/profile/pages/voluntary-profile-page/voluntary-profile-page.component').then(m => m.VoluntaryProfilePageComponent),
     children: [
-      {
-        path: '',
-        redirectTo: 'activities',
-        pathMatch: 'full',
-      },
+      { path: '', redirectTo: 'activities', pathMatch: 'full' },
       {
         path: 'activities',
         loadComponent: () =>
@@ -124,8 +108,23 @@ export const routes: Routes = [
       },
     ],
   },
+
+  {
+    path: 'cgu',
+    loadComponent: () => import('./features/authentication/components/legals/cgu/cgu.component').then(m => m.CguComponent),
+  },
+  {
+    path: 'politique-confidentialite',
+    loadComponent: () =>
+      import('./features/authentication/components/legals/politique-confidentialite/politique-confidentialite.component').then(
+        m => m.PolitiqueConfidentialiteComponent
+      ),
+  },
   {
-    path: '**',
-    redirectTo: '',
+    path: 'reset-password',
+    loadComponent: () =>
+      import('./features/authentication/pages/reset-password-page/reset-password-page.component').then(m => m.ResetPasswordPageComponent),
   },
+
+  { path: '**', redirectTo: '' },
 ];

src/app/common/components/header/header.component.html

@@ -7,7 +7,7 @@
   <div class="right-side-container">
     @if (userInfos$ | async; as userInfo) {
       @if (userInfo.isConnected) {
         @if (userInfo.canPublishActivity && !isOnActivityCreationPage()) {
           <app-single-button
             class="underline-animate"
             [type]="'button'"
@@ -15,7 +15,7 @@
             [routerLink]="['/activity', 'creation']"
             routerLinkActive="active"
             [styleClass]="ButtonStyleClass.addActivityButton"
-            [label]="'Publier une activité 🚀'"
+            [label]="'Publier une activité'"
             [ariaLabel]="'button de navigation vers la page de creation des activités'">
           </app-single-button>
         }

src/app/common/components/header/header.component.scss

@@ -104,7 +104,7 @@ header {
   }
 }
 
-@media screen and (max-width: 575px) {
+@media screen and (max-width: 768px) {
   header {
     .logo {
       #header-title {

src/app/common/components/input-field/input-field.component.html

@@ -5,6 +5,7 @@
         [inputId]="inputId"
         [disabled]="disabled"
         [formControlName]="fieldConfig.name"
+        appendTo="body"
         dateFormat="dd.mm.yy"
         [ariaLabel]="fieldConfig.label"
         [placeholder]="fieldConfig.placeholder ?? ''">

src/app/common/components/multiple-input-field/multiple-input-field.component.html

@@ -1,4 +1,4 @@
-<form class="input-wrapper" [formGroup]="formGroup">
+<form class="input-wrapper" [formGroup]="formGroup" [ngClass]="{ 'row-layout': showSearchButton, 'column-layout': !showSearchButton }">
   <div class="search-container" [ngClass]="showSearchButton ? 'with-search' : 'without-search'">
     @for (field of inputConfigs; track field.label; let i = $index; let isLast = $last) {
       <div class="input-container">
@@ -49,7 +49,7 @@
         </div>
 
         @if (showErrors) {
           <app-input-field-error [control]="formGroup.get(field.name)" [fieldName]="field.name" class="input-error-message"> </app-input-field-error>
         }
         @if (!isLast) {
           <div class="separator"></div>
@@ -63,9 +63,17 @@
       <i class="fa-solid fa-magnifying-glass"></i>
     </button>
   }
-  @if (showSaveButton) {
-    <button pButton type="button" class="save-button" (click)="save.emit()">
+  @if (showSaveButton && !isMobile) {
+    <button pButton type="button" class="save-button" (click)="manualSave()">
       <i class="fa-solid fa-floppy-disk"></i>
     </button>
   }
+
+  <div class="field-feedback">
+    @if (autosave && isMobile) {
+      <p class="save-status" [class.visible]="saveStatus !== 'idle'" [class.success]="saveStatus === 'saved'">
+        {{ saveStatus === 'saving' ? 'Enregistrement...' : saveStatus === 'saved' ? 'Enregistré ✅' : '' }}
+      </p>
+    }
+  </div>
 </form>

src/app/common/components/multiple-input-field/multiple-input-field.component.scss

@@ -3,6 +3,15 @@
   position: relative;
   z-index: 1100;
   margin-bottom: 15px;
+
+  &.row-layout {
+    flex-direction: row;
+  }
+
+  &.column-layout {
+    flex-direction: column;
+  }
+
   .search-container {
     display: flex;
     align-items: center;
@@ -188,3 +197,32 @@
   position: absolute;
   right: 0;
 }
+
+.field-feedback {
+  margin-top: 4px;
+  min-height: 22px;
+  font-size: 14px;
+  line-height: 1.2;
+
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  .save-status {
+    color: var(--font-color-grey);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease;
+    margin: 0;
+
+    &.visible {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    &.success {
+      color: var(--primary-light-color);
+      font-weight: 500;
+    }
+  }
+}

src/app/common/components/multiple-input-field/multiple-input-field.component.ts

@@ -6,8 +6,9 @@ import { IftaLabelModule } from 'primeng/iftalabel';
 import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import { InputTextModule } from 'primeng/inputtext';
-import { Subject, debounceTime } from 'rxjs';
 import { FormField } from 'src/app/features/authentication/models/form.model';
+import { AutosaveFieldComponent } from '../../directives/autosave-field.component';
+import { SaveStatus } from '../../models/status';
 import { InputFieldErrorComponent } from '../input-field-error/input-field-error.component';
 
 @Component({
@@ -27,20 +28,21 @@ import { InputFieldErrorComponent } from '../input-field-error/input-field-error
   templateUrl: './multiple-input-field.component.html',
   styleUrls: ['./multiple-input-field.component.scss'],
 })
-export class MultipleInputFieldComponent implements OnChanges {
+export class MultipleInputFieldComponent extends AutosaveFieldComponent<Record<string, string>> implements OnChanges {
   @Output() inputValuesChanged = new EventEmitter<Record<string, string>>();
-  @Output() save = new EventEmitter<void>();
+  @Output() save = new EventEmitter<Record<string, string>>();
 
   @Input() fieldConfigs: FormField[] = [];
-  @Input() showSearchButton: boolean = false;
+  @Input() showSearchButton = false;
   @Input() showSaveButton = false;
   @Input() showErrors = false;
-  @Input() formGroup: FormGroup;
+  @Input() formGroup!: FormGroup;
+  @Input() override autosave = false;
 
   focusedIndex: number | null = null;
   inputConfigs: { name: string; label: string; placeholder: string; type: string; value: string }[] = [];
 
-  private _inputChanges$ = new Subject<Record<string, string>>();
+  override saveStatus: SaveStatus = 'idle';
 
   get inputClass(): Record<string, boolean> {
     return {
@@ -49,10 +51,8 @@ export class MultipleInputFieldComponent implements OnChanges {
     };
   }
 
-  constructor() {
-    this._inputChanges$.pipe(debounceTime(500)).subscribe(filters => {
-      this.inputValuesChanged.emit(filters);
-    });
+  override ngOnInit(): void {
+    super.ngOnInit();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -70,13 +70,27 @@ export class MultipleInputFieldComponent implements OnChanges {
   emitValues(): void {
     const filters: Record<string, string> = {};
     this.inputConfigs.forEach(config => {
-      filters[config.name] = config.value;
+      filters[config.name] = this.formGroup.get(config.name)?.value || '';
     });
-    this._inputChanges$.next(filters);
+    this.valueChanges$.next(filters);
+    this.inputValuesChanged.emit(filters);
+  }
+
+  manualSave(): void {
+    const values: Record<string, string> = {};
+    this.inputConfigs.forEach(config => {
+      values[config.name] = this.formGroup.get(config.name)?.value || '';
+    });
+    this.startSaving();
+    this.onSave(values);
   }
 
   clearInput(index: number): void {
     this.inputConfigs[index].value = '';
     this.emitValues();
   }
+
+  protected override onSave(values: Record<string, string>): void {
+    this.save.emit(values);
+  }
 }

src/app/common/components/textarea-field/textarea-field.component.html

@@ -8,8 +8,8 @@
       [cols]="cols"
       [formControlName]="fieldConfig.name"
       [disabled]="disabled"
-      class="textarea-field">
-    </textarea>
+      class="textarea-field"
+      [ngClass]="{ 'with-save-button': showSaveButton && !isMobile }"></textarea>
     <label [for]="id">{{ fieldConfig.label }}</label>
   </p-iftalabel>
 

src/app/common/components/textarea-field/textarea-field.component.scss

@@ -92,10 +92,10 @@ form {
     position: absolute;
     right: 0;
     top: 0;
-    height: 70%;
+    height: 68%;
     background-color: var(--primary-light-color);
     color: var(--font-color-light);
-    padding: 19.1px 25px;
+    padding: 19px 25px;
     border: none;
     cursor: pointer;
     border-radius: 0 10px 10px 0;