tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

up feedback button, docker frontend csc

Browse source
This commit is contained in:
Tykayn 2025-10-06 17:31:01 +02:00 • committed by tykayn
parent 7ea3a0aff0
commit 09ba6d3e77
7 changed files with 476 additions and 404 deletions
Download patch file Download diff file Expand all files Collapse all files

33
airwatch/src/app/chatbot/feedback-button/feedback-button.scss
View file

@ -1,4 +1,8 @@
.feedback-button {
@use 'sae-lib/src/styles/variables' as variables;
:host {
.feedback-button {
background: #ecf3fa;
color: #083b7d;
padding: 12px;
@ -24,10 +28,10 @@
i {
font-size: 16px;
}
}
}
// Modal styles
.feedback-modal-overlay {
// Modal styles
.feedback-modal-overlay {
position: fixed;
top: 0;
left: 0;
@ -38,9 +42,9 @@
justify-content: center;
align-items: center;
z-index: 1000;
}
}
.feedback-modal {
.feedback-modal {
background: white;
border-radius: 8px;
width: 90%;
@ -50,9 +54,9 @@
flex-direction: column;
max-height: 90vh;
overflow: hidden;
}
}
.modal-header {
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
@ -78,9 +82,9 @@
color: #333;
}
}
}
}
.modal-body {
.modal-body {
padding: 20px;
overflow-y: auto;
@ -131,9 +135,9 @@
background-color: #fdecea;
color: #d32f2f;
}
}
}
.modal-footer {
.modal-footer {
padding: 16px 20px;
border-top: 1px solid #eee;
display: flex;
@ -174,6 +178,7 @@
background-color: #062c5e;
}
}
}
}

1
blueprint/src/app/nav/main-nav/main-nav.html
View file

@ -30,7 +30,6 @@
<div class="navbar-end">
<a class="navbar-item" routerLink="answer" routerLinkActive="active-link">answer </a>
</div>
</div>
</nav>

2
devops/docker-compose.yml
View file

@ -6,7 +6,7 @@ services:
context: ./frontend
dockerfile: ./frontend-dockerfile.yml
ports:
- "4200:4200"
- "80:80"
restart: unless-stopped
container_name: frontend-app

26
devops/frontend-dockerfile.yml
View file

@ -1,30 +1,26 @@
# dockerfile
FROM node:24
# Définir le répertoire de travail
# Définir le répertoire de travail
WORKDIR /app
# Définir une variable d'environnement pour le chemin de la librairie Angular
# Définir une variable d'environnement pour le chemin de la librairie Angular
ENV LIB_PATH=../sae-csc
# Copier les fichiers package.json et package-lock.json de la librairie
# Copier les fichiers package.json et package-lock.json de la librairie
COPY ${LIB_PATH}/package*.json ./
# Installer les dépendances npm
# Installer les dépendances npm
RUN npm install
# Copier le reste des sources (lib Angular + config Storybook)
# Copier le reste des sources (lib Angular + config Storybook)
COPY ${LIB_PATH}/ .
# Construire l'application Angular
# Construire l'application Angular
RUN npm run build -- --configuration=production
# Installer un serveur HTTP pour servir l'application (par exemple, serve)
RUN npm install -g serve
# Exposer le port 4200 (ou 80 si vous préférez)
EXPOSE 4200
# Commande pour servir l'application Angular buildée
CMD ["serve", "-s", "dist", "-l", "4200"]
from nginx:1.27-alpine
RUN rm -rf /usr/share/nginx/html/*
COPY --from=build /app/dist/implem /usr/share/nginx/html
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

76
my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.html
View file

@ -1,4 +1,6 @@
<button (click)="toggleModal()" class="feedback-button">
<button (click)="toggleModal()" [ngClass]="{
'is-active': isModalOpen
}" class="feedback-button">
<span class="text">
Feedback
</span>
@ -8,14 +10,40 @@
<!-- Feedback Modal -->
@if (isModalOpen) {
<div class="feedback-modal-overlay">
<div class="feedback-modal">
<div class="modal-header">
<h3>Share us your feedback !</h3>
<!-- <button class="close-button" (click)="toggleModal()">-->
<!-- <i class="ri-close-line"></i>-->
<!-- </button>-->
<sae-m-button [label]="'Soumettre'" [kind]="'primary'" [size]="'large'"></sae-m-button>
<div class="feedback-modal">
<button (click)="toggleModal()" [ngClass]="{
'is-active': isModalOpen
}" class="feedback-button">
<span class="text">
Feedback
</span>
<i class="ri-message-2-line"></i>
</button>
<div class="modal-header">
<div class="side">
<h3>Share us your feedback !</h3>
<div class="star-row">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</div>
</div>
<div class="side">
<sae-m-button (click)="toggleModal()" [kind]="'secondary'" [label]="'retour'"
[size]="'medium'"></sae-m-button>
<sae-m-button (click)="submitFeedback()" [kind]="'primary'" [label]="'Soumettre'"
[size]="'medium'"></sae-m-button>
</div>
<!-- <button class="close-button" (click)="toggleModal()">-->
<!-- <i class="ri-close-line"></i>-->
<!-- </button>-->
</div>
<div class="modal-body">
@ -23,8 +51,8 @@
<textarea
[(ngModel)]="feedbackText"
placeholder="Enter your feedback here..."
[disabled]="isSubmitting"
placeholder="Enter your feedback here..."
rows="5"
></textarea>
@ -42,26 +70,26 @@
</div>
<div class="modal-footer">
<!-- <button-->
<!-- class="cancel-button"-->
<!-- (click)="toggleModal()"-->
<!-- [disabled]="isSubmitting"-->
<!-- >-->
<!-- Cancel-->
<!-- </button>-->
<!-- <button-->
<!-- class="cancel-button"-->
<!-- (click)="toggleModal()"-->
<!-- [disabled]="isSubmitting"-->
<!-- >-->
<!-- Cancel-->
<!-- </button>-->
<!-- <button-->
<!-- class="submit-button"-->
<!-- (click)="submitFeedback()"-->
<!-- [disabled]="isSubmitting || !feedbackText.trim()"-->
<!-- >-->
<!-- -->
<!-- </button>-->
<!-- <button-->
<!-- class="submit-button"-->
<!-- (click)="submitFeedback()"-->
<!-- [disabled]="isSubmitting || !feedbackText.trim()"-->
<!-- >-->
<!-- -->
<!-- </button>-->
@if (isSubmitting) {
<i class="ri-loader-4-line spinning"></i> Sending...
} @else {
<!-- Send Feedback-->
<!-- Send Feedback-->
}
</div>
</div>

93
my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss
View file

@ -3,10 +3,21 @@
:host {
$feedback_left: 47px;
.side {
padding-top: 16px;
padding-right: 16px;
+ .side {
text-align: right
}
}
.feedback-button {
font-family: variables.$font-family;
background: #E3EAF1;
color: #005AA2;
color: variables.$main-color-400;
border-radius: 8px 8px 0 0;
transform: rotate(270deg);
cursor: pointer;
@ -29,6 +40,11 @@
line-height: 8px; /* 57.143% */
&.is-active {
right: 646px;
}
&:hover {
background: #d9e8f6;
}
@ -36,48 +52,75 @@
i {
font-size: 16px;
}
}
// Modal styles
.feedback-modal-overlay {
position: fixed;
top: 92px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
justify-content: end;
align-items: start;
z-index: 1000;
overflow: hidden;
width: 100vw;
height: 100vh;
padding-top: 200px;
}
.feedback-modal {
background: #E3EAF1;
border-radius: 8px;
width: 90vw;
max-width: 500px;
max-width: 700px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
max-height: 90vh;
overflow: hidden;
.feedback-button {
background: transparent;
}
}
.modal-header {
background: transparent;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
align-items: top;
padding: 13px 0;
border-bottom: 1px solid #eee;
padding-left: $feedback_left;
h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #083b7d;
color: var(--Black-text, #1B1D27);
leading-trim: both;
text-edge: cap;
font-family: Barlow;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 0; /* 0% */
margin-bottom: 8px;
margin-top: 12px;
}
sae-m-button {
margin-left: 6px;
}
.close-button {
background: none;
border: none;
@ -93,23 +136,39 @@
}
.modal-body {
padding: 20px;
padding: 0 20px;
overflow-y: auto;
background: transparent;
padding-left: $feedback_left;
.modal-description {
margin-bottom: 16px;
color: #555;
leading-trim: both;
text-edge: cap;
font-family: Barlow;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 0; /* 0% */
color: variables.$neutral-blue;
}
textarea {
margin-top: 16px;
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
resize: vertical;
font-family: inherit;
font-size: 14px;
height: 140px;
border: solid 1px #a8acc2;
color: #000;
line-height: 140%; /* 19.6px */
border-radius: 8px;
background: #FFF;
&:focus {
outline: none;
@ -203,6 +262,14 @@
}
}
}
.star-row {
padding-top: 9px;
i {
font-size: 20px;
}
}
}

33
my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.ts
View file

@ -1,12 +1,14 @@
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {MainButton} from '../main-button/main-button';
import {NgClass} from '@angular/common';
@Component({
selector: 'sae-feedback-button',
imports: [
FormsModule,
MainButton
MainButton,
NgClass
],
templateUrl: './feedback-button.html',
styleUrl: './feedback-button.scss'
@ -14,11 +16,12 @@ import {MainButton} from '../main-button/main-button';
export class FeedbackButton {
isModalOpen: boolean = false;
// isModalOpen: boolean = true;
feedbackText: string = '';
isSubmitting: boolean = false;
submitSuccess: boolean = false;
submitError: boolean = false;
protected readonly close = close;
toggleModal() {
this.isModalOpen = !this.isModalOpen;
@ -30,14 +33,6 @@ export class FeedbackButton {
this.submitError = false;
}
// Update app state to show/hide feedback panel
// this.store.dispatch({
// type: ActionTypes.UPDATE_APP,
// payload: {
// displayFeedBackPanel: this.isModalOpen,
// feedBackInput: this.feedbackText
// }
// });
}
async submitFeedback() {
@ -50,24 +45,6 @@ export class FeedbackButton {
this.submitError = false;
try {
// Update Redux state with feedback text
// this.store.dispatch({
// type: ActionTypes.UPDATE_APP,
// payload: {
// feedBackInput: this.feedbackText
// }
// });
//
// // Dispatch action to send feedback
// this.store.dispatch({
// type: ActionTypes.SEND_USER_FEEDBACK,
// payload: {
// feedback: this.feedbackText
// }
// });
//
// // Call API service directly
// await this.apiService.sendUserFeedback(this.feedbackText);
this.submitSuccess = true;