Merge pull request #184 from FlyingPAD/develop

refactoring

front/src/app/app-routing.module.ts

@@ -17,7 +17,7 @@ import { TagsComponent } from './pages/tags/tags.component';
 import { ScriptsComponent } from './pages/scripts/scripts.component';
 import { ToolsComponent } from './pages/tools/tools.component';
 import { MoodsComponent } from './pages/moods/moods.component';
-import { MediasComponent } from './pages/medias/medias.component';
+import { MediaComponent } from './pages/media/media.component';
 import { LinksComponent } from './pages/links/links.component';
 import { EditModelsComponent } from './pages/edit-models/edit-models.component';
 import { EditFranchisesComponent } from './pages/edit-franchises/edit-franchises.component';
@@ -53,10 +53,10 @@ const routes: Routes = [
       { path: 'moods/create-mood-image', component: CreateMoodImageComponent, title: 'Flying PAD | Create Mood(s)' },
       { path: 'moods/create-mood-video', component: CreateMoodVideoComponent, title: 'Flying PAD | Create Mood(s)' },
       { path: 'tags', component: TagsComponent, title: 'Flying PAD | Tags Gallery' },
-      { path: 'medias', component: MediasComponent, title: 'Flying PAD | Media' },
+      { path: 'media', component: MediaComponent, title: 'Flying PAD | Media' },
       { path: 'not-found', component: NotFoundComponent, title: 'Flying PAD | Not Found' },
       { path: 'login-error', component: UserLoginErrorComponent, title: 'Flying PAD | Login Error' },
-      { path: 'register', component: UserRegisterComponent, title: 'Flying PAD | Register' },   
+      { path: 'register', component: UserRegisterComponent, title: 'Flying PAD | Register' },
       { path: 'medium-gallery', component: MediumGalleryComponent, title: 'Flying PAD | Medium Gallery' },
     ]
   },

front/src/app/app.component.spec.ts

@@ -2,9 +2,8 @@ import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 import { UserService } from './services/user.service';
-import { CustomCookieService } from './services/system/cookie.service';
-import { AuthenticationService } from './services/system/authentication.service';
-import { MenuCustomService } from './services/display/menu-custom.service';
+import { CustomCookieService } from './services/cookie.service';
+import { AuthenticationService } from './services/authentication.service';
 
 // Mock des services utilisés dans AppComponent
 class MockUserService {

front/src/app/app.component.ts

@@ -1,33 +1,31 @@
 import { Component, HostListener, inject, OnInit } from '@angular/core';
 import { UserService } from './services/user.service';
-import { CustomCookieService } from './services/system/cookie.service';
-import { AuthenticationService } from './services/system/authentication.service';
+import { CustomCookieService } from './services/cookie.service';
+import { AuthenticationService } from './services/authentication.service';
 import { Router } from '@angular/router';
-import { MenuCustomService } from './services/display/menu-custom.service';
 import { LanguageService } from './services/display/language.service';
 import { DisplayService } from './services/display/display.service';
 import { FullScreenService } from './services/display/full-screen.service';
 import { ThemeService } from './services/display/theme.service';
-import { GdprService } from './services/system/gdpr.service';
-import { RightColumnService } from './services/display/right-column.service';
+import { GdprService } from './services/gdpr.service';
+import { MenuService } from './services/display/menu.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
 export class AppComponent implements OnInit {
-  #languageService = inject(LanguageService)
   #displayService = inject(DisplayService)
-  #rightColumnService = inject(RightColumnService)
   #fullScreenService = inject(FullScreenService)
   #themeService = inject(ThemeService)
+  #languageService = inject(LanguageService)
+  #menuService = inject(MenuService)
   #gdprService = inject(GdprService)
   #authService = inject(AuthenticationService)
   #userService = inject(UserService)
   #cookieService = inject(CustomCookieService)
-  #menuCustomService = inject(MenuCustomService)
-  router = inject(Router)
+  #router = inject(Router)
 
   gdprStatus = this.#gdprService.currentStatus
   displayInfo = this.#displayService.displayInfo
@@ -44,20 +42,20 @@ export class AppComponent implements OnInit {
     }
 
     if(this.displayInfo().mode === 'Desktop') {
-      this.#rightColumnService.enableRightColumn()
+      this.#menuService.openRightMenu()
     } else {
-      this.#rightColumnService.disableRightColumn()
+      this.#menuService.closeRightMenu()
     }
   }
 
   @HostListener('window:keydown', ['$event'])
   onKeyPress(event: KeyboardEvent) {
     switch (event.key) {
       case 'Escape':
-        this.router.navigateByUrl('/')
+        this.#router.navigateByUrl('/')
         break
       case 'F1':
-        this.#menuCustomService.triggerMenuCustom()
+        this.#menuService.toggleLeftMenu()
         break
       // case '1':
       //   this.router.navigateByUrl('/moods')

front/src/app/app.module.ts

@@ -73,7 +73,7 @@ import { BottomBarComponent } from './components/bottom-bar/bottom-bar.component
 import { DialogInfoComponent } from './components/dialog-info/dialog-info.component';
 import { RightColumnComponent } from './components/right-column/right-column.component';
 import { MoodViewerComponent } from './features/moods/mood-viewer/mood-viewer.component';
-import { MediasComponent } from './pages/medias/medias.component';
+import { MediaComponent } from './pages/media/media.component';
 import { LinksComponent } from './pages/links/links.component';
 import { RightColumnListComponent } from './components/right-column-list/right-column-list.component';
 import { ListCentralComponent } from './components/list-central/list-central.component';
@@ -181,7 +181,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     EditLinksComponent,
     MoodsComponent,
     TagsComponent,
-    MediasComponent,
+    MediaComponent,
     MediumGalleryComponent,
     ScriptsComponent,
     ToolsComponent,

front/src/app/components/dialog-info/dialog-info.component.scss

@@ -3,7 +3,11 @@ h1 {
     text-align: center;
     color: var(--colorMain);
     letter-spacing: 2px;
-    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
+    text-shadow: 0px 3px 3px var(--colorMainOpacity2);
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .flex {
@@ -25,6 +29,10 @@ h1 {
         color: var(--colorMain);
         font-size: 14px;
 
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
         a:hover {
             text-decoration: underline;
         }

front/src/app/components/gdpr/gdpr.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { GdprService } from '../../services/system/gdpr.service';
+import { GdprService } from '../../services/gdpr.service';
 
 @Component({
   selector: 'app-gdpr',

front/src/app/components/header-home/header-home.component.ts

@@ -8,7 +8,7 @@ import { LanguageService } from '../../services/display/language.service';
   styleUrl: './header-home.component.scss'
 })
 export class HeaderHomeComponent {
-  @Output() toggleMenu = new EventEmitter<void>()
+  @Output() menuToggle = new EventEmitter<void>()
 
   #languageService = inject(LanguageService)
   #imageUrlService = inject(ImageUrlService)
@@ -18,7 +18,7 @@ export class HeaderHomeComponent {
   isLanguageMenuON : boolean = false
 
   public handleMenuToggle(): void {
-    this.toggleMenu.emit()
+    this.menuToggle.emit()
   }
 
   public toggleLanguageMenu(): void {

front/src/app/components/left-column/left-column.component.html

@@ -14,7 +14,7 @@
         <div class="menu-elements">
             @if(isUserConnected) {
                 <a routerLink="/dashboard" routerLinkActive="active">
-                    <img [src]="getImageURL('icons-main-menu', 'home', 'png')" />
+                    <img [src]="getImageURL('icons-main-menu', 'model', 'png')" />
                     <p>{{ 'title.dashboard' | translate }}</p>
                 </a>
             }
@@ -47,7 +47,7 @@
                 <p>Tags</p>
             </a>
             @if(isUserConnected) {
-                <a routerLink="/medias" routerLinkActive="active" (click)="handleMenuToggle()">
+                <a routerLink="/media" routerLinkActive="active" (click)="handleMenuToggle()">
                     <img [src]="getImageURL('icons-main-menu', 'media', 'png')" />
                     <p>Media</p>
                 </a>
@@ -63,7 +63,7 @@
                 </a>
             }
             @if(!isUserConnected) {
-                <a routerLink="/log-in">
+                <a routerLink="/log-in" (click)="handleMenuToggle()">
                     <img [src]="getImageURL('icons-main-menu', 'model', 'png')" />
                     <p>{{ 'title.log-in' | translate }}</p>
                 </a>
@@ -79,7 +79,7 @@
         </div>
         <hr class="dialog-hr">
         <div class="menu-footer">
-            <p>© {{currentYear}} <a routerLink="/about">Flying PAD</a></p>
+            <p>© {{currentYear}} <a routerLink="/about" (click)="handleMenuToggle()">Flying PAD</a></p>
         </div>
     </div>
 </div>

front/src/app/components/right-column/right-column.component.ts

@@ -1,17 +1,17 @@
 import { Component, inject } from '@angular/core';
-import { RightColumnService } from '../../services/display/right-column.service';
+import { MenuService } from '../../services/display/menu.service';
 
 @Component({
   selector: 'app-right-column',
   templateUrl: './right-column.component.html',
   styleUrl: './right-column.component.scss'
 })
 export class RightColumnComponent {
-  #rightColumnService = inject(RightColumnService)
+  #menuService = inject(MenuService)
 
-  rightColumnIsActive = this.#rightColumnService.rightColumnIsActive
+  rightColumnIsActive = this.#menuService.isRightMenuOn
 
   menuTrigger(): void {
-    this.#rightColumnService.toggleRightColumn()
+    this.#menuService.toggleRightMenu()
   }
 }

front/src/app/features/moods/create-mood-image/create-mood-image.component.ts

@@ -1,7 +1,6 @@
-import { Component, ElementRef, OnDestroy, ViewChild, inject } from '@angular/core';
+import { Component, ElementRef, ViewChild, inject } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
-import { MenuDesktopService } from '../../../services/display/menu-desktop.service';
 import { ImageForm } from '../../../interfaces/mood-image';
 import { FlowService } from '../../../services/flow.service';
 
@@ -10,11 +9,10 @@ import { FlowService } from '../../../services/flow.service';
   templateUrl: './create-mood-image.component.html',
   styleUrl: './create-mood-image.component.scss'
 })
-export class CreateMoodImageComponent implements OnDestroy {
+export class CreateMoodImageComponent {
   #flowService = inject(FlowService)
   #builder = inject(FormBuilder)
   #router = inject(Router)
-  menuService = inject(MenuDesktopService)
 
   images : ImageForm[] = []
   forms : FormGroup[] = []
@@ -23,9 +21,6 @@ export class CreateMoodImageComponent implements OnDestroy {
 
   @ViewChild('originalInput') originalInput!: ElementRef<HTMLInputElement>
 
-  ngOnDestroy(): void {
-    this.menuService.allMenuTriggerOn()
-  }
   onClickHack(): void {
     this.originalInput?.nativeElement.click()
   }

front/src/app/features/moods/mood-viewer/mood-viewer.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
 import { environment } from '../../../../environments/environment';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { ViewerService } from '../../../services/display/viewer.service';
+import { ViewerService } from '../../../services/features/viewer.service';
 
 @Component({
   selector: 'app-mood-viewer',

front/src/app/features/moods/moods-gallery/moods-gallery.component.html

@@ -1,6 +1,6 @@
 <div id="layout-central">
     <div *ngIf="moods?.length; else loading">
-        <div [ngClass]="rightColumnIsActive() ? 'gallery menu-open' : 'gallery' ">
+        <div [ngClass]="isRightMenuOn() ? 'gallery menu-open' : 'gallery' ">
             <div *ngFor="let mood of moods || [] | paginate : { itemsPerPage : moodsPerPage, currentPage : paginationService.moodsByTagCurrentPage}">
                 <section>
                     <div *ngIf="mood.type == 1">           

front/src/app/features/moods/moods-gallery/moods-gallery.component.ts

@@ -3,7 +3,7 @@ import { environment } from '../../../../environments/environment';
 import { PaginationService } from '../../../services/display/pagination.service';
 import { FlowService } from '../../../services/flow.service';
 import { MoodLight } from '../../../interfaces/mood';
-import { RightColumnService } from '../../../services/display/right-column.service';
+import { MenuService } from '../../../services/display/menu.service';
 
 @Component({
   selector: 'app-moods-gallery',
@@ -13,7 +13,7 @@ import { RightColumnService } from '../../../services/display/right-column.servi
 export class MoodsGalleryComponent 
 {
   #flowService = inject(FlowService)
-  rightColumnService = inject(RightColumnService)
+  #menuService = inject(MenuService)
   paginationService = inject(PaginationService)
 
   @Input() moods : MoodLight[] | undefined = undefined
@@ -22,16 +22,16 @@ export class MoodsGalleryComponent
   environment = environment.apiBaseUrl
 
   flow = this.#flowService.flow
-  rightColumnIsActive = this.rightColumnService.rightColumnIsActive
+  isRightMenuOn = this.#menuService.isRightMenuOn
 
   moodsPerPage:  number = 36      
 
   menuTrigger(): void {
-    if(this.rightColumnIsActive()) {
-      this.rightColumnService.disableRightColumn()
+    if(this.isRightMenuOn()) {
+      this.#menuService.closeRightMenu()
     }
     else {
-      this.rightColumnService.enableRightColumn()
+      this.#menuService.openRightMenu()
     }
   }
 

front/src/app/features/moods/multi-tag-artists/multi-tag-artists.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, inject } from '@angular/core';
-import { MultiTagService } from '../../../services/multi-tag.service';
+import { MultiTagService } from '../../../services/features/multi-tag.service';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { RelationsMoodArtistForm } from '../../../interfaces/relations';
 import { Router } from '@angular/router';

front/src/app/features/moods/multi-tag-models/multi-tag-models.component.ts

@@ -2,7 +2,7 @@ import { Component, OnDestroy, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Router } from '@angular/router';
 import { RelationsMoodModelForm } from '../../../interfaces/relations';
-import { MultiTagService } from '../../../services/multi-tag.service';
+import { MultiTagService } from '../../../services/features/multi-tag.service';
 import { FlowService } from '../../../services/flow.service';
 
 @Component({

front/src/app/features/moods/multi-tag/multi-tag.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="flow() as flow">
     <div id="layout-central">
         <div *ngIf="flow.moods.length; else loading">
-            <div [ngClass]="menuService.menuRActive === true ? 'gallery menu-open' : 'gallery' ">
+            <div class="gallery">
                 <div *ngFor="let mood of moods | paginate : { itemsPerPage : moodsPerPage, currentPage : paginationService.moodsByTagCurrentPage}">
                     <section>
                         <div *ngIf="mood.type == 1">           

front/src/app/features/moods/multi-tag/multi-tag.component.ts

@@ -1,8 +1,7 @@
 import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
 import { environment } from '../../../../environments/environment';
 import { FlowService } from '../../../services/flow.service';
-import { MenuDesktopService } from '../../../services/display/menu-desktop.service';
-import { MultiTagService } from '../../../services/multi-tag.service';
+import { MultiTagService } from '../../../services/features/multi-tag.service';
 import { PaginationService } from '../../../services/display/pagination.service';
 import { MoodLight } from '../../../interfaces/mood';
 
@@ -13,9 +12,7 @@ import { MoodLight } from '../../../interfaces/mood';
 })
 export class MultiTagComponent {
   @Input() moods : MoodLight[] = []
-  @Output() trigger = new EventEmitter() 
   #flowService = inject(FlowService)
-  menuService = inject(MenuDesktopService)
   multiTagService = inject(MultiTagService)
   paginationService = inject(PaginationService)
 

front/src/app/features/scripts/timeline/timeline.component.ts

@@ -1,5 +1,5 @@
 import { Component, HostListener, inject, OnInit, ViewChild, ElementRef } from '@angular/core'
-import { TimelineService } from '../../../services/display/timeline.service'
+import { TimelineService } from '../../../services/tools/timeline.service'
 import { Timeline } from '../../../models/music-tools/timeline'
 
 @Component({

front/src/app/features/tools/diapason/diapason.component.ts

@@ -1,5 +1,5 @@
 import { Component, HostListener, inject } from '@angular/core';
-import { AudioService } from '../../../services/audio/audio.service';
+import { AudioService } from '../../../services/tools/audio.service';
 
 @Component({
   selector: 'app-diapason',

front/src/app/features/tools/flying-keys-mini/flying-keys-mini.component.ts

@@ -1,8 +1,8 @@
 import { Component, HostListener, inject } from '@angular/core';
-import { AudioService } from '../../../services/audio/audio.service';
+import { AudioService } from '../../../services/tools/audio.service';
 import { KeyStation } from '../../../models/music-tools/key-station';
 import { Note } from '../../../interfaces/music-tools/note';
-import { KeysService } from '../../../services/audio/keys.service';
+import { KeysService } from '../../../services/tools/keys.service';
 import { Router } from '@angular/router';
 
 @Component({

front/src/app/features/tools/trainer-notes/trainer-notes.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit, inject } from '@angular/core';
-import { AudioService } from '../../../services/audio/audio.service';
-import { StorageService } from '../../../services/system/storage.service';
+import { AudioService } from '../../../services/tools/audio.service';
+import { StorageService } from '../../../services/storage.service';
 
 export class Note {
   name: string = ''