ajout page accueil CSC

my-workspace/projects/sae-lib/filters/filters-group/filters-group.html

@@ -1,19 +1,43 @@
 <div class="filter-group">
   <div class="selectors">
-    <!--    sélecteurs-->
-    <div class="input-box">
-      <i class="ri-search-line"></i>
-      <input type="text">
-    </div>
+
+
+    <sae-multi-selector></sae-multi-selector>
   </div>
   <div class="chips-listing">
     <!--    liste de chips-->
+    <div class="chips-column">
+
       <button class="button chips is-rounded is-small">
 
-      filtre 1
+        filtre c1 1
+        <span class="post-button">
+       x
+     </span>
+      </button>
+      <button class="button chips is-rounded is-small">
+
+        filtre c1 2
+        <span class="post-button">
+       x
+     </span>
+      </button>
+      <button class="button chips is-rounded is-small">
+
+        filtre c1 3
+        <span class="post-button">
+       x
+     </span>
+      </button>
+    </div>
+    <div class="chips-column">
+
+      <button class="button chips is-rounded is-small">
+        filtre col 2
         <span class="post-button">
        x
      </span>
       </button>
     </div>
   </div>
+</div>

my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss

@@ -0,0 +1,82 @@
+@use '../../src/styles/variables';
+
+.dropdown {
+  .dropdown-button {
+    padding: 10px;
+    position: relative;
+    right: 0;
+    top: 0;
+
+    cursor: pointer;
+
+
+  }
+
+  &:hover {
+    .dropdown-item {
+      display: block;
+    }
+  }
+
+  .dropdown-item {
+    display: none;
+    background: white;
+    padding: 12px;
+    cursor: pointer;
+
+
+    &:hover {
+      background: #dedede;
+      color: #222;
+    }
+  }
+}
+
+.chips-listing {
+  display: flex;
+}
+
+.filter-group {
+
+
+  .search {
+    display: flex;
+    min-height: 42px;
+    max-height: 42px;
+    padding: var(--Spacing-Spacing-30, 12px) var(--Spacing-Spacing-40, 16px);
+    align-items: center;
+    gap: var(--Spacing-Spacing-20, 8px);
+    align-self: stretch;
+  }
+
+  .chips-listing {
+    margin-top: 16px;
+    border-radius: 4px;
+    background: variables.$csc-filters-box-color;
+    width: 100%;
+    height: 400px;
+    padding: 12px;
+
+    .chips-column {
+      padding-right: 10px;
+      width: 210px;
+    }
+
+
+    .chips {
+      background: variables.$csc-chips-bg-color;
+      color: white;
+      border: solid 1px variables.$csc-chips-bg-color;
+      width: 100%;
+      border-radius: 20px;
+      margin-bottom: 10px;
+      display: flex;
+      padding: 8px 10px 10px 12px;
+      justify-content: center;
+      align-items: center;
+      gap: 5px;
+      align-self: stretch;
+      padding-right: 10px;
+    }
+  }
+}

my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts

@@ -1,10 +1,13 @@
 import {Component} from '@angular/core';
+import {MultiSelector} from '../../inputs/multi-selector/multi-selector';
 
 @Component({
   selector: 'sae-filters-group',
-  imports: [],
+  imports: [
+    MultiSelector
+  ],
   templateUrl: './filters-group.html',
-  styleUrl: './filters-group.css'
+  styleUrl: './filters-group.scss'
 })
 export class FiltersGroup {
 

my-workspace/projects/sae-lib/forms/login-form/login-form.html

@@ -0,0 +1 @@
+<p>login-form works!</p>

my-workspace/projects/sae-lib/forms/login-form/login-form.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginForm } from './login-form';
+
+describe('LoginForm', () => {
+  let component: LoginForm;
+  let fixture: ComponentFixture<LoginForm>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginForm]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginForm);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

my-workspace/projects/sae-lib/forms/login-form/login-form.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sae-login-form',
+  imports: [],
+  templateUrl: './login-form.html',
+  styleUrl: './login-form.css'
+})
+export class LoginForm {
+
+}

my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.html

@@ -3,16 +3,32 @@
   <div class="columns">
     <div class="column">
 
+      <div id="fromText">
+
         <!--      delete button from_text-->
-      <button class="delete-button button" (click)="emptyText('fromText')">x</button>
-      <textarea name="from_text" id="from_text" cols="30" rows="10"
+        @if (fromText.length > 0) {
+          <button (click)="emptyText('fromText')" class="delete-button button">x</button>
+        }
+        <textarea [(ngModel)]="fromText" cols="30" id="from_text" name="from_text"
                   placeholder=""
-                [(ngModel)]="fromText"></textarea>
+                  rows="10"></textarea>
+        <button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
+          <i class="ri-upload-cloud-2-line"></i>
+          <span class="label">
+          Upload .csv file
+        </span>
+        </button>
+        <input #fileUpload (change)="onFileSelected($event)" class="is-outlined" id="fileUploadTranslator" type="file">
+      </div>
     </div>
     <div class="column">
 
-      <button class="delete-button button" (click)="emptyText('toText')">x</button>
-      <textarea name="to_text" id="to_text" cols="30" rows="10" [(ngModel)]="toText"></textarea>
+      <div id="toText">
+        @if (toText.length > 0) {
+          <button (click)="emptyText('toText')" class="delete-button button">x</button>
+        }
+        <textarea [(ngModel)]="toText" cols="30" id="to_text" name="to_text" rows="10"></textarea>
+      </div>
     </div>
   </div>
 </div>

my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.scss

@@ -0,0 +1,65 @@
+@use '../../src/styles/variables';
+
+:host {
+  textarea {
+    width: 100%;
+    height: 236px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    background: #FFF;
+    box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
+    border-width: 0;
+
+    color: variables.$csc-textarea-color;
+
+    padding: 16px 42px 16px 16px;
+
+    color: #1B1D27;
+    font-family: Barlow;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%; /* 22.4px */
+
+
+  }
+
+  .textarea-placeholder {
+    color: variables.$csc-textarea-placeholder-color;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%;
+  }
+}
+
+#fromText {
+
+
+  textarea {
+  }
+}
+
+button.is-outlined {
+  display: inline-flex;
+  height: 34px;
+  padding: var(--Spacing-Spacing-10, 4px) var(--Spacing-Spacing-30, 12px) var(--Spacing-Spacing-10, 4px) var(--Spacing-Spacing-20, 8px);
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  color: #255B8E;
+  border-radius: 8px;
+  border: 1px solid var(--color-text-title, #255B8E);
+  background: var(--color-background-card-on-base, #FFF);
+  left: 16px;
+  top: -50px;
+  position: relative;
+
+  i {
+    margin-right: 4px;
+  }
+}
+
+#fileUploadTranslator {
+  display: none;
+}

my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts

@@ -6,7 +6,7 @@ import {FormsModule} from '@angular/forms';
   standalone: true,
   imports: [FormsModule],
   templateUrl: './translate-texts.html',
-  styleUrl: './translate-texts.css'
+  styleUrl: './translate-texts.scss'
 })
 export class TranslateTexts {
   public fromText: string = ''
@@ -15,4 +15,14 @@ export class TranslateTexts {
   emptyText(someText: 'fromText' | 'toText') {
     this[someText] = '';
   }
+
+  onFileSelected($event: Event) {
+
+  }
+
+  clickFileUpload(fileUpload: HTMLInputElement) {
+
+    fileUpload.click();
+
+  }
 }

my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html

@@ -0,0 +1,33 @@
+<!--    sélecteurs-->
+<div class="input-box">
+  <i class="ri-search-line"></i>
+  <!--      <div class="label">Engine type</div>-->
+  <input class="is-hidden" placeholder="Engine type" type="text">
+  <div class="dropdown">
+    <div class="dropdown-button">
+
+      <!--          bouton-->
+      <i class="ri-arrow-down-box-fill"></i>
+    </div>
+    <div class="dropdown-list">
+      <!--      selected:-->
+      <div class="selected-items">
+
+      </div>
+      <hr>
+      <div class="available-items">
+        <!--      available:-->
+        <div class="dropdown-item">
+          <div class="label">
+            choix 1
+          </div>
+        </div>
+        <div class="dropdown-item">
+          <div class="label">
+            choix 2
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss

@@ -0,0 +1,29 @@
+@use '../../src/styles/variables';
+
+.input-box {
+  margin-left: -1rem;
+
+  i {
+    position: relative;
+    left: 2rem;
+
+  }
+
+  input {
+
+    border-radius: 8px;
+    border: 1px solid #8D91A4;
+    background: var(--color-background-card-on-base, #FFF);
+
+
+    padding-left: 2rem;
+    padding-top: 6px;
+    padding-bottom: 6px;
+
+    overflow: hidden;
+    color: var(--color-text-secondary, #525668);
+    text-overflow: ellipsis;
+    font-size: var(--Font-Base, 14px);
+
+  }
+}

my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MultiSelector } from './multi-selector';
+
+describe('MultiSelector', () => {
+  let component: MultiSelector;
+  let fixture: ComponentFixture<MultiSelector>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MultiSelector]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MultiSelector);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'sae-multi-selector',
+  imports: [],
+  templateUrl: './multi-selector.html',
+  styleUrl: './multi-selector.scss'
+})
+export class MultiSelector {
+
+}

my-workspace/projects/sae-lib/pages/login/login.html

@@ -0,0 +1,7 @@
+<form action="">
+  login form
+
+  <input type="text">
+  <input type="password">
+
+</form>

my-workspace/projects/sae-lib/pages/login/login.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Login } from './login';
+
+describe('Login', () => {
+  let component: Login;
+  let fixture: ComponentFixture<Login>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Login]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Login);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

my-workspace/projects/sae-lib/pages/login/login.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'sae-login',
+  imports: [],
+  templateUrl: './login.html',
+  styleUrl: './login.css'
+})
+export class Login {
+
+}

my-workspace/projects/sae-lib/src/styles/_variables.scss

@@ -61,6 +61,7 @@ $csc-nav-color: $main-color-400;
 $csc-chips-bg-color: $main-color-400;
 
 $csc-textarea-color: #1B1D27;
+$csc-textarea-placeholder-color: #7B7B7B;
 $csc-filters-box-color: #E3EAF1;
 
 $bot-bubble: $csc-light-yellow-color;

sae-csc/.npmrc

@@ -1,2 +1 @@
-preserve-symlinks=true
 prefix=/home/tykayn/.npm-global

sae-csc/src/app/app.html

@@ -3,13 +3,11 @@
   <title>CSC implémentation</title>
 </head>
 <body>
+  @if (currentUrl !== '/login') {
     <app-top-navigation></app-top-navigation>
-<router-outlet/>
-<h1>
-  <img src="csc_logo.svg" alt="logo">
-  CSC
-</h1>
-
     <sae-feedback-button></sae-feedback-button>
+  }
+<router-outlet/>
+
 </body>
 </html>

sae-csc/src/app/app.routes.ts

@@ -2,6 +2,7 @@ import {Routes} from '@angular/router';
 import {Main} from './pages/main/main';
 import {Admin} from './pages/admin/admin';
 import {SimilarCases} from './pages/similar-cases/similar-cases';
+import {Login} from './pages/login/login';
 
 export const routes: Routes = [{
   path: '',
@@ -11,6 +12,10 @@ export const routes: Routes = [{
     path: 'admin',
     component: Admin
   },
+  {
+    path: 'login',
+    component: Login
+  },
   {
     path: 'similar-cases',
     component: SimilarCases

sae-csc/src/app/app.ts

@@ -1,7 +1,9 @@
-import { Component, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import {Component, inject, signal} from '@angular/core';
+import {ActivatedRoute, Router, RouterOutlet, NavigationEnd} from '@angular/router';
 import {TopNavigation} from './shared/navigation/top-navigation/top-navigation';
 import {FeedbackButton} from 'sae-lib/buttons/feedback-button/feedback-button';
+import {filter} from 'rxjs/operators';
+
 // import {SaeLib} from '@sae-lib/src/public-api';
 
 @Component({
@@ -11,5 +13,16 @@ import {FeedbackButton} from 'sae-lib/buttons/feedback-button/feedback-button';
   styleUrl: './app.scss'
 })
 export class App {
+  public router = inject(Router);
+  currentUrl: string = '';
   protected readonly title = signal('implem');
+
+  constructor() {
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd)
+    ).subscribe((event: any) => {
+      this.currentUrl = event.urlAfterRedirects;
+      console.log('Current URL:', this.currentUrl);
+    });
+  }
 }

sae-csc/src/app/pages/login/login.html

@@ -0,0 +1,18 @@
+<div id="cscLogin">
+  <!--  login page CSC-->
+  <div class="Aligner">
+    <div class="Aligner-item Aligner-item--top">…</div>
+    <div class="Aligner-item">…</div>
+    <div class="Aligner-item Aligner-item--bottom">…</div>
+  </div>
+
+
+  <div class="columns">
+    <div class="column form-login">
+
+    </div>
+    <div class="column bg-login">
+
+    </div>
+  </div>
+</div>

sae-csc/src/app/pages/login/login.scss

@@ -0,0 +1,32 @@
+#cscLogin {
+  background: #1b1d27;
+  color: white;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  padding: 121px 127px;
+
+  .bg-login {
+    background: url('/safran_bg.jpg') center no-repeat;
+    background-size: cover;
+    width: 600px;
+  }
+}
+
+.Aligner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Aligner-item {
+  max-width: 50%;
+}
+
+.Aligner-item--top {
+  align-self: flex-start;
+}
+
+.Aligner-item--bottom {
+  align-self: flex-end;
+}

sae-csc/src/app/pages/login/login.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Login } from './login';
+
+describe('Login', () => {
+  let component: Login;
+  let fixture: ComponentFixture<Login>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Login]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Login);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

sae-csc/src/app/pages/login/login.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {LoginForm} from 'sae-lib/forms/login-form/login-form';
+
+@Component({
+  selector: 'app-login',
+  imports: [
+    LoginForm
+  ],
+  templateUrl: './login.html',
+  styleUrl: './login.scss'
+})
+export class Login {
+
+}

sae-csc/src/app/pages/main/main.html

@@ -11,7 +11,6 @@
     </h2>
     <!--  traduction de requête-->
     <div id="translation_request">
-      <sae-color-display></sae-color-display>
       <div class="helper">
         <span>
 
@@ -43,4 +42,5 @@
     <!--  search button-->
     <app-bottom-navigation></app-bottom-navigation>
   </footer>
+  <sae-feedback-button></sae-feedback-button>
 </div>

sae-csc/src/app/pages/main/main.scss

@@ -1,3 +1,20 @@
 .magic-text {
-  color: #EEA100;
+  color: #A86CFD;
+  font-family: Barlow;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+
+  i {
+    font-size: 1.25em;
+    margin-left: 2px;
   }
+}
+
+#translation_request {
+  .helper {
+    padding-left: 4.5%;
+  }
+}
+

sae-csc/src/app/pages/main/main.ts

@@ -3,6 +3,7 @@ import {TranslateTexts} from 'sae-lib/inbox/translate-texts/translate-texts';
 import {FiltersGroup} from '../../../../../my-workspace/projects/sae-lib/filters/filters-group/filters-group';
 import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom-navigation';
 import {ColorDisplay} from 'sae-lib/colours/color-display/color-display';
+import {FeedbackButton} from 'sae-lib/buttons/feedback-button/feedback-button';
 
 
 @Component({
@@ -11,7 +12,8 @@ import {ColorDisplay} from 'sae-lib/colours/color-display/color-display';
     TranslateTexts,
     FiltersGroup,
     BottomNavigation,
-    ColorDisplay
+    ColorDisplay,
+    FeedbackButton
   ],
   templateUrl: './main.html',
   styleUrl: './main.scss'

sae-csc/src/app/pages/similar-cases/similar-cases.scss

@@ -1,3 +1,3 @@
 .toggle-ai-suggestion {
-  color: #FEAD02;
+  color: #A86CFD;
 }

sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html

@@ -39,7 +39,7 @@
           Quick Start
 
         </a>
-        <a class="navbar-item">
+        <a class="navbar-item" routerLink="login" routerLinkActive="is-active">
           <!--  exit-->
           <i class="ri-door-line"></i>
         </a>

sae-csc/src/styles.scss

@@ -1,13 +1,13 @@
 // from global to more precise
 // sass lang utils
 @use "sass:color";
-@use "app/styles/app.scss";
 // lib SAE Aero styles
 @use 'sae-lib/src/styles/index.scss';
 /* Fichier de styles global pour l'application */
 
 // Importer les styles principaux
-@import 'styles/main.scss';
+@use "app/styles/app.scss";
+@use 'styles/main.scss';
 
 // Styles globaux supplémentaires
 html, body {

sae-csc/src/styles/app/styles/pages/_main.scss

@@ -37,23 +37,17 @@
       left: 92%;
       top: 50px;
       width: 37px;
+      display: none;
 
       &:hover {
         background: #888;
         color: #222;
+        display: block;
       }
     }
 
     textarea {
-      width: 648px;
-      height: 236px;
-      flex-shrink: 0;
-      border-radius: 4px;
-      background: #FFF;
-      box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
-      border-width: 0;
-      padding: 11px 14px;
-      color: variables.$csc-textarea-color;
+
     }
 
   }
@@ -64,52 +58,6 @@
 }
 
 
-.filter-group {
-
-  .input-box{
-    margin-left: -1rem;
-    i{
-      position: relative;
-      left: 2rem;
-
-    }
-    input{
-      padding-left: 2rem;
-      padding-top: 6px;
-      padding-bottom: 6px;
-    }
-  }
-  .search {
-    display: flex;
-    min-height: 42px;
-    max-height: 42px;
-    padding: var(--Spacing-Spacing-30, 12px) var(--Spacing-Spacing-40, 16px);
-    align-items: center;
-    gap: var(--Spacing-Spacing-20, 8px);
-    align-self: stretch;
-  }
-
-  .chips-listing {
-    margin-top: 16px;
-    border-radius: 4px;
-    background: variables.$csc-filters-box-color;
-    width: 100%;
-    height: 400px;
-    padding: 12px;
-
-
-    .chips {
-      background: variables.$csc-chips-bg-color;
-      color: white;
-      padding: 12px 16px;
-      border: solid 1px variables.$csc-chips-bg-color;
-      width: 100%;
-      border-radius: 20px;
-
-    }
-  }
-}
-
 .bottom-navigation {
   .nav-item {