csc loading spinner

airwatch/.storybook/main.ts

@@ -2,7 +2,7 @@ import {StorybookConfig} from '@storybook/angular';
 import * as path from 'path';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)', './stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-docs',

airwatch/src/app/chatbot/feedback-button/feedback-button.scss

@@ -176,16 +176,4 @@
   }
 }
 
-// Spinner animation
-.spinning {
-  animation: spin 1s linear infinite;
-}
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

my-workspace/projects/sae-lib/buttons/main-button/main-button.ts

@@ -9,7 +9,7 @@ export type inconPositionKindType = '' | 'left' | 'right';
   selector: 'sae-m-button',
   standalone: true,
   imports: [
-    NgClass
+    NgClass,
   ],
   templateUrl: './main-button.html',
   styleUrl: './main-button.scss'

my-workspace/projects/sae-lib/typo/index/index.ts

@@ -4,7 +4,7 @@ import {Component} from '@angular/core';
   selector: 'sae-typo',
   imports: [],
   templateUrl: './index.html',
-  styleUrl: './index.css'
+  styleUrl: './index.scss'
 })
 export class Index {
 

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

@@ -24,7 +24,8 @@
         </span>
       </div>
 
-      <sae-translate-texts [appState]="appState"></sae-translate-texts>
+      <sae-translate-texts (onSuggestionMade)="displayWarningToCheckFilters()"
+                           [appState]="appState"></sae-translate-texts>
     </div>
     <!--  analyse de question-->
     <div id="question_analysis">
@@ -32,7 +33,6 @@
         Question analysis
       </h2>
       @if (appState?.botMessage) {
-
         <sae-bot-talks
           [message]="appState.botMessage"></sae-bot-talks>
       }

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

@@ -1,8 +1,6 @@
 :host {
 
-  //width: 1312px;
+  font-family: Barlow;
-  //display: block;
-
   margin: 0 auto;
 
   #question_analysis {
@@ -36,6 +34,9 @@
 
       padding-bottom: 16px;
 
+      width: 1600px;
+      margin: 0 auto;
+
       span {
         &:nth-of-type(1) {
           width: 560px;

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

@@ -39,4 +39,9 @@ export class Main {
   onAvailableChoicesChange(e: any) {
     console.log('onSelectedChoicesChange', e);
   }
+
+  displayWarningToCheckFilters() {
+    // update app, displayBotT
+    this.store.dispatch()
+  }
 }

sae-csc/src/app/shared/translate-texts/translate-texts.html

@@ -3,7 +3,7 @@
 
   <div id="fromText">
 
-    @if (!fileIsUploaded && !textFocused) {
+    @if (!fileIsUploaded) {
       <button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
             <span class="label">
           Upload .csv file
@@ -41,30 +41,37 @@
       'is-visible' : fromText.length
       }" class="delete-button button">x
     </button>
-
+    @if (!fileIsUploaded) {
-    <textarea
+      <textarea
-      (focus)="focusFromText()"
+        (focus)="focusFromText()"
-      (keyup)="onFromTextChanged()"
+        (keyup)="onFromTextChanged()"
-      (ngModelChange)="onFromTextChanged()"
+        (ngModelChange)="onFromTextChanged()"
-      [ngModel]="appState.fromText"
+        [ngModel]="appState.fromText"
-      cols="30"
+        cols="30"
-      id="from_text"
+        id="from_text"
-      name="from_text"
+        name="from_text"
-      placeholder="Copy/paste client’s question \n or Drag and drop extracted .csv file from CRM portal..."
+        placeholder="Copy/paste client’s question \n or Drag and drop extracted .csv file from CRM portal..."
-      rows="5"></textarea>
+        rows="5"></textarea>
+    }
   </div>
 
   <div id="toText">
 
     @if (loadingResume) {
-      <div class="loading">
+      <div class="loading-container">
-        loading...
+        <div class="loading">
+          <div class="spinning">
+            <i class="ri-restart-line"></i>
+          </div>
+        </div>
       </div>
     }
     @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>
+    @if (!loadingResume) {
+      <textarea [(ngModel)]="toText" cols="30" id="to_text" name="to_text" rows="10"></textarea>
+    }
   </div>
 
 </div>

sae-csc/src/app/shared/translate-texts/translate-texts.scss

@@ -139,4 +139,36 @@
     display: none;
   }
 
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: calc(235px - 16px);
+  }
+
+  .loading {
+    width: 3rem;
+    height: 3rem;
+
+    color: variables.$csc-magic-color;
+
+    i {
+      font-size: 3rem;
+    }
+  }
+
+  // Spinner animation
+  .spinning {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
 }

sae-csc/src/app/shared/translate-texts/translate-texts.ts

@@ -18,10 +18,11 @@ export class TranslateTexts {
   public debounceEnabled: boolean = true;
   public textFocused: boolean = false;
 
+
   public fileIsUploaded: boolean = false;
   public filePath: string = '';
   public fileWeight: string = '';
-  
+
   // testing display of file selector
   // public fileIsUploaded: boolean = true;
   // public filePath: string = 'abcd.csv';
@@ -91,6 +92,7 @@ export class TranslateTexts {
           console.log('demo mode')
           this.toText = "Résumé de démo à titre d'exemple"
           this.loadingResume = false;
+          
         },
         this.debounceDuration);