From 4e57a2368a94cdd884f40f24b141ec1d8859bfe3 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Mon, 22 Sep 2025 14:53:02 +0200 Subject: [PATCH] up airwatch imports --- airwatch/SOLUTION.md | 81 +++++++++++++++++++ airwatch/scripts/link-sae-lib.sh | 4 +- .../app/chatbot/message-box/message-box.ts | 2 - .../options-dropdown/options-dropdown.scss | 40 ++++++--- .../options-dropdown/options-dropdown.ts | 6 +- .../chatbot/toggle-button/toggle-button.ts | 6 +- .../chatbot/warning-bugs/warning-bugs.html | 4 +- .../chatbot/warning-bugs/warning-bugs.scss | 8 ++ .../button-displayer/button-displayer.html | 4 +- .../button-displayer/button-displayer.ts | 7 +- .../projects/sae-lib/alert-box/alert-box.scss | 25 ++---- .../projects/sae-lib/alert-box/alert-box.ts | 16 +--- .../buttons/main-button/main-button.html | 4 +- .../buttons/main-button/main-button.ts | 4 +- .../filters/filters-group/filters-group.ts | 4 +- .../inputs/multi-selector/multi-selector.ts | 4 +- sae-csc/src/app/redux/initialState.ts | 29 +++++-- 17 files changed, 169 insertions(+), 79 deletions(-) create mode 100644 airwatch/SOLUTION.md diff --git a/airwatch/SOLUTION.md b/airwatch/SOLUTION.md new file mode 100644 index 0000000..aced22f --- /dev/null +++ b/airwatch/SOLUTION.md @@ -0,0 +1,81 @@ +# Solution for Angular NgClass Import Error + +## Issue Description + +When running `npm start` in the airwatch directory, the following error occurred: + +``` +✘ [ERROR] NG3004: Unable to import symbol NgClass. + The symbol is not exported from /home/poule/encrypted/stockage-syncable/www/development/html/ng-implementation/airwatch/node_modules/@angular/common/index.d.ts (module '@angular/common'). [plugin angular-compiler] + + ../my-workspace/projects/sae-lib/buttons/main-button/main-button.ngtypecheck.ts:0:0: + 0 │ + ╵ ^ + + The symbol is declared here. + + ../my-workspace/projects/sae-lib/node_modules/@angular/common/common_module.d.d.ts:351:0: + 351 │ declare class NgClass implements DoCheck { + ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +``` + +## Root Cause + +The error occurred because: + +1. The `main-button` component in the `sae-lib` project was importing `NgClass` directly from `@angular/common`. +2. In Angular 20+ (the project is using Angular 20.1.0), `NgClass` is no longer exported directly from `@angular/common` but is available from `@angular/common/directives`. +3. Additionally, the `link-sae-lib.sh` script was incorrectly linking `sae-lib` to `old-sae-airwatch` instead of the `airwatch` project. + +## Changes Made + +1. Updated the import statement in `/my-workspace/projects/sae-lib/buttons/main-button/main-button.ts`: + ```typescript + // Changed from: + import {NgClass} from '@angular/common'; + + // To: + import {NgClass} from '@angular/common/directives'; + ``` + +2. Fixed the `link-sae-lib.sh` script to link `sae-lib` to the `airwatch` project instead of `old-sae-airwatch`: + ```bash + # Changed from: + cd ../../../old-sae-airwatch + echo "Utilisation du lien dans l'application old-sae-airwatch..." + + # To: + cd ../../../airwatch + echo "Utilisation du lien dans l'application airwatch..." + ``` + +## Additional Requirements + +When attempting to verify the fix, a Node.js version compatibility issue was discovered: + +``` +Node.js version v20.18.1 detected. +The Angular CLI requires a minimum Node.js version of v20.19 or v22.12. +``` + +To fully run the application, you'll need to update Node.js to version v20.19+ or v22.12+. + +## How to Update Node.js + +You can update Node.js using one of the following methods: + +### Using NVM (Node Version Manager) +```bash +# Install NVM if not already installed +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash + +# Install and use the required Node.js version +nvm install 20.19 +nvm use 20.19 +``` + +### Using the Official Node.js Installer +1. Visit https://nodejs.org/ +2. Download and install version 20.19 or higher + +After updating Node.js, run `npm start` in the airwatch directory to verify that both the NgClass import issue and the Node.js version issue are resolved. diff --git a/airwatch/scripts/link-sae-lib.sh b/airwatch/scripts/link-sae-lib.sh index c5332d1..93d5c15 100755 --- a/airwatch/scripts/link-sae-lib.sh +++ b/airwatch/scripts/link-sae-lib.sh @@ -28,10 +28,10 @@ fi echo "Création d'un lien npm pour sae-lib..." npm link -cd ../../../old-sae-airwatch +cd ../../../airwatch # Utiliser le lien dans l'application -echo "Utilisation du lien dans l'application old-sae-airwatch..." +echo "Utilisation du lien dans l'application airwatch..." npm link sae-lib echo "Lien créé avec succès. sae-lib est maintenant disponible comme un module npm." diff --git a/airwatch/src/app/chatbot/message-box/message-box.ts b/airwatch/src/app/chatbot/message-box/message-box.ts index 875e090..e9edc58 100644 --- a/airwatch/src/app/chatbot/message-box/message-box.ts +++ b/airwatch/src/app/chatbot/message-box/message-box.ts @@ -4,7 +4,6 @@ import {DomSanitizer, SafeHtml} from '@angular/platform-browser'; import {Copy} from 'sae-lib/buttons/copy/copy'; import {FeedbackButton} from '../feedback-button/feedback-button'; import {ChatbotMessage} from '../../services/chatbot.message.type'; -import {NgClass} from '@angular/common'; import {Store} from '@ngrx/store'; import {ActionTypes, StateInterface} from '../../reducers'; @@ -16,7 +15,6 @@ type MessageKind = "user" | "llm"; imports: [ Copy, FeedbackButton, - NgClass ], templateUrl: './message-box.html', styleUrl: './message-box.scss' diff --git a/airwatch/src/app/chatbot/options-dropdown/options-dropdown.scss b/airwatch/src/app/chatbot/options-dropdown/options-dropdown.scss index ca1a44d..e9595d5 100644 --- a/airwatch/src/app/chatbot/options-dropdown/options-dropdown.scss +++ b/airwatch/src/app/chatbot/options-dropdown/options-dropdown.scss @@ -1,14 +1,23 @@ .options-dropdown { text-align: left; position: relative; - top: 0.15em; - right: 0; + display: inline-block; float: right; margin-right: -6em; - .dropwdown { visibility: hidden; + opacity: 0; + position: absolute; + top: 100%; + right: 0; + min-width: 160px; + background: white; + border: 1px solid #ddd; + border-radius: 6px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + z-index: 1000; + transition: opacity 0.2s ease, visibility 0.2s ease; } &:hover { @@ -18,6 +27,7 @@ .dropwdown { visibility: visible; + opacity: 1; } } @@ -26,18 +36,28 @@ width: 2em; border-radius: 6px; text-align: center; + cursor: pointer; + position: relative; } - .dropdown-item { background: white; padding: 6px; cursor: pointer; padding-left: 12px; + &:first-child { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + + &:last-child { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + &.is-active { color: cornflowerblue; - } &:hover { @@ -48,16 +68,14 @@ } .is-mode-structured, -.is-mode-other, -{ +.is-mode-specific { .indicator { - background: red; border-radius: 100px; width: 3px; height: 3px; - position: relative; - left: 30px; - top: -20px; + position: absolute; + right: 2px; + top: 2px; } } diff --git a/airwatch/src/app/chatbot/options-dropdown/options-dropdown.ts b/airwatch/src/app/chatbot/options-dropdown/options-dropdown.ts index b210c4f..68fe416 100644 --- a/airwatch/src/app/chatbot/options-dropdown/options-dropdown.ts +++ b/airwatch/src/app/chatbot/options-dropdown/options-dropdown.ts @@ -1,15 +1,15 @@ import {Component, Input} from '@angular/core'; -import {NgClass} from '@angular/common'; +import {CommonModule} from '@angular/common'; export type optionsDropdownOptions = 'auto' | 'structured' | 'specific'; @Component({ selector: 'app-options-dropdown', - + standalone: true, templateUrl: './options-dropdown.html', imports: [ - NgClass + CommonModule ], styleUrl: './options-dropdown.scss' }) diff --git a/airwatch/src/app/chatbot/toggle-button/toggle-button.ts b/airwatch/src/app/chatbot/toggle-button/toggle-button.ts index 734194c..2ee0699 100644 --- a/airwatch/src/app/chatbot/toggle-button/toggle-button.ts +++ b/airwatch/src/app/chatbot/toggle-button/toggle-button.ts @@ -1,12 +1,12 @@ import {Component, EventEmitter, Input, Output} from '@angular/core'; -import {NgClass} from '@angular/common'; +import {CommonModule} from '@angular/common'; type ToggleButtonKind = "local" | "outside"; @Component({ selector: 'app-toggle-button', imports: [ - NgClass + CommonModule ], templateUrl: './toggle-button.html', styleUrl: './toggle-button.scss' @@ -16,7 +16,7 @@ export class ToggleButton { @Input() kind: ToggleButtonKind = "local"; @Input() active: boolean = false; @Input() icon: string = ""; - @Input() tooltip: string = ""; + @Input() tooltip: string | null | undefined = ""; @Output() stateChanged = new EventEmitter(); toggleState() { diff --git a/airwatch/src/app/chatbot/warning-bugs/warning-bugs.html b/airwatch/src/app/chatbot/warning-bugs/warning-bugs.html index 6f89f4d..4299da7 100644 --- a/airwatch/src/app/chatbot/warning-bugs/warning-bugs.html +++ b/airwatch/src/app/chatbot/warning-bugs/warning-bugs.html @@ -1,7 +1,7 @@ @if (displayError) { - } @else { - } diff --git a/airwatch/src/app/chatbot/warning-bugs/warning-bugs.scss b/airwatch/src/app/chatbot/warning-bugs/warning-bugs.scss index e69de29..aa5eb8f 100644 --- a/airwatch/src/app/chatbot/warning-bugs/warning-bugs.scss +++ b/airwatch/src/app/chatbot/warning-bugs/warning-bugs.scss @@ -0,0 +1,8 @@ +:host { + + position: relative; + bottom: 0; + left: -242px; + top: 150px; + +} diff --git a/airwatch/src/app/common/button-displayer/button-displayer.html b/airwatch/src/app/common/button-displayer/button-displayer.html index 0dad6d7..a4a7330 100644 --- a/airwatch/src/app/common/button-displayer/button-displayer.html +++ b/airwatch/src/app/common/button-displayer/button-displayer.html @@ -1,5 +1,3 @@
- - - + coucou
diff --git a/airwatch/src/app/common/button-displayer/button-displayer.ts b/airwatch/src/app/common/button-displayer/button-displayer.ts index 40d9b76..f2f2a54 100644 --- a/airwatch/src/app/common/button-displayer/button-displayer.ts +++ b/airwatch/src/app/common/button-displayer/button-displayer.ts @@ -1,13 +1,8 @@ import {Component} from '@angular/core'; -import {Index} from 'sae-lib/tabs/index'; -import {MainButton} from 'sae-lib/buttons/main-button/main-button'; @Component({ selector: 'app-button-displayer', - imports: [ - Index, - MainButton - ], + imports: [], templateUrl: './button-displayer.html', styleUrl: './button-displayer.scss' }) diff --git a/my-workspace/projects/sae-lib/alert-box/alert-box.scss b/my-workspace/projects/sae-lib/alert-box/alert-box.scss index ebdc8fc..a3dc5af 100644 --- a/my-workspace/projects/sae-lib/alert-box/alert-box.scss +++ b/my-workspace/projects/sae-lib/alert-box/alert-box.scss @@ -1,22 +1,9 @@ -@use '../src/styles/variables.scss'; -@use '../src/styles/shadows.scss'; - -.alert { - padding: 1rem 2rem; - border-radius: shadows.$spacing-1; - margin-top: shadows.$spacing-1; - margin-bottom: shadows.$spacing-1; - text-align: left; - +:host { i { - margin-right: 10px; + margin-right: 16px; + } + + .close-button { + float: right; } } - - -sae-alert-box { - font-size: 12px; - padding: 18px; - display: inline-block; - text-align: left; -} diff --git a/my-workspace/projects/sae-lib/alert-box/alert-box.ts b/my-workspace/projects/sae-lib/alert-box/alert-box.ts index 8db5715..3381b3a 100644 --- a/my-workspace/projects/sae-lib/alert-box/alert-box.ts +++ b/my-workspace/projects/sae-lib/alert-box/alert-box.ts @@ -1,29 +1,19 @@ import {Component, ElementRef, Input} from '@angular/core'; -import {CommonModule} from '@angular/common'; @Component({ selector: 'sae-alert-box', - standalone: true, - imports: [CommonModule], + // standalone: true, + imports: [], templateUrl: './alert-box.html', styleUrl: './alert-box.scss' }) export class AlertBox { @Input() public message = ""; + @Input() public alertKind = "warning"; constructor(private host: ElementRef) { } - @Input() public _alertKind = "warning"; - - get alertKind(): string { - return this._alertKind; - } - - set alertKind(value: string) { - this._alertKind = value; - } - // whatEver function name you want to give onCloseClicked() { this.host.nativeElement.remove(); diff --git a/my-workspace/projects/sae-lib/buttons/main-button/main-button.html b/my-workspace/projects/sae-lib/buttons/main-button/main-button.html index b89f300..71a4e06 100644 --- a/my-workspace/projects/sae-lib/buttons/main-button/main-button.html +++ b/my-workspace/projects/sae-lib/buttons/main-button/main-button.html @@ -1,7 +1,4 @@ + diff --git a/my-workspace/projects/sae-lib/buttons/main-button/main-button.ts b/my-workspace/projects/sae-lib/buttons/main-button/main-button.ts index a6af3f4..501645a 100644 --- a/my-workspace/projects/sae-lib/buttons/main-button/main-button.ts +++ b/my-workspace/projects/sae-lib/buttons/main-button/main-button.ts @@ -1,5 +1,5 @@ import {Component, Input} from '@angular/core'; -import {NgClass} from '@angular/common'; +// import {NgClass} from '@angular/common/directives'; export type ButtonKindType = '' | 'primary' | 'secondary' | 'ghost' | 'link'; export type ButtonSizeType = '' | 'large' | 'medium' | 'small' | 'extrasm'; @@ -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' diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts index 16b7ddb..bfe9e49 100644 --- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts +++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts @@ -1,13 +1,13 @@ import {Component, Input} from '@angular/core'; import {MultiSelector} from '../../inputs/multi-selector/multi-selector'; -import {NgClass} from '@angular/common'; +import {CommonModule} from '@angular/common'; @Component({ selector: 'sae-filters-group', imports: [ MultiSelector, - NgClass + CommonModule, ], templateUrl: './filters-group.html', styleUrl: './filters-group.scss' diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts index 223c253..44a5783 100644 --- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts +++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts @@ -1,10 +1,10 @@ import {Component, EventEmitter, Input, Output} from '@angular/core'; -import {NgClass} from '@angular/common'; +import {CommonModule} from '@angular/common'; @Component({ selector: 'sae-multi-selector', imports: [ - NgClass + CommonModule ], templateUrl: './multi-selector.html', styleUrl: './multi-selector.scss' diff --git a/sae-csc/src/app/redux/initialState.ts b/sae-csc/src/app/redux/initialState.ts index 6a4480f..0239d83 100644 --- a/sae-csc/src/app/redux/initialState.ts +++ b/sae-csc/src/app/redux/initialState.ts @@ -24,14 +24,31 @@ export const initialState: StateInterface = { label: 'ABC', value: 'ABC', }], - selectedList: [{ - label: 'DEF', - value: 'DEF', - }] + selectedList: [ + { + label: 'DEF', + value: 'DEF', + }, { + label: 'GER', + value: 'GER', + }, { + label: '134D', + value: '134D', + }, + ] }, findings: { - availableList: [], - selectedList: [] + availableList: [{ + label: 'DEF', + value: 'DEF', + }], + selectedList: [{ + label: 'GER', + value: 'GER', + }, { + label: '134D', + value: '134D', + },] }, ata: { availableList: [],