up csc placeholder and file csv upload
This commit is contained in:
Tykayn
tykayn
parent
8694a04ea9
commit
a359d0f9b1
18 changed files with 632 additions and 452 deletions
|
|
@ -1,19 +1,22 @@
|
|||
@use "sass:color";
|
||||
//@use "../src/styles/variables.scss";
|
||||
|
||||
.feedback-button {
|
||||
//background: #ecf3fa;
|
||||
//color: #083b7d;
|
||||
//padding: 15px;
|
||||
//border-radius: 8px 8px 0 0;
|
||||
//transform: rotate(270deg);
|
||||
//cursor: pointer;
|
||||
//display: flex;
|
||||
//align-items: center;
|
||||
//gap: 8px;
|
||||
//
|
||||
//margin-right: -35px;
|
||||
//position: fixed;
|
||||
//right: 0;
|
||||
//top: 240px;
|
||||
//z-main-button: 100;
|
||||
background: #ecf3fa;
|
||||
color: #083b7d;
|
||||
padding: 15px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
transform: rotate(270deg);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
margin-right: -35px;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 240px;
|
||||
z-main-button: 100;
|
||||
|
||||
&:hover {
|
||||
background: #d9e8f6;
|
||||
|
|
@ -22,168 +25,169 @@
|
|||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal styles
|
||||
.feedback-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.feedback-modal {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #083b7d;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
padding: 4px;
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
|
||||
.modal-description {
|
||||
margin-bottom: 16px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
resize: vertical;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #083b7d;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #f5f5f5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.success-message, .error-message {
|
||||
margin-top: 16px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
// Modal styles
|
||||
.feedback-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
i {
|
||||
.feedback-modal {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #083b7d;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
padding: 4px;
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background-color: #e6f7e6;
|
||||
color: #2e7d32;
|
||||
}
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
|
||||
.error-message {
|
||||
background-color: #fdecea;
|
||||
color: #d32f2f;
|
||||
}
|
||||
}
|
||||
.modal-description {
|
||||
margin-bottom: 16px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
resize: vertical;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #083b7d;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
&:disabled {
|
||||
background-color: #f5f5f5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.success-message, .error-message {
|
||||
margin-top: 16px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background-color: #e6f7e6;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #fdecea;
|
||||
color: #d32f2f;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background: none;
|
||||
border: 1px solid #ddd;
|
||||
color: #555;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
background-color: #083b7d;
|
||||
color: white;
|
||||
border: none;
|
||||
.modal-footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #062c5e;
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background: none;
|
||||
border: 1px solid #ddd;
|
||||
color: #555;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
background-color: #083b7d;
|
||||
color: white;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #062c5e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Spinner animation
|
||||
.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
// Spinner animation
|
||||
.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,11 @@
|
|||
<sae-multi-selector
|
||||
(availableChoicesChange)="onAvailableChoicesChange"
|
||||
(selectedChoicesChange)="onSelectedChoicesChange"
|
||||
[actionTypes]="actionTypes"
|
||||
[availableChoices]="appState.filters.engineType.availableChoices"
|
||||
[label]="'Engine type'"
|
||||
[selectedChoices]="appState.filters.engineType.selectedChoices"
|
||||
[store]="store"
|
||||
></sae-multi-selector>
|
||||
<sae-multi-selector
|
||||
|
||||
|
|
|
|||
|
|
@ -1,108 +1,112 @@
|
|||
@use '../../src/styles/variables';
|
||||
|
||||
.selectors {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
:host {
|
||||
|
||||
sae-multi-selector {
|
||||
margin-left: 20px;
|
||||
.selectors {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
|
||||
}
|
||||
}
|
||||
sae-multi-selector {
|
||||
margin-left: 20px;
|
||||
|
||||
.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;
|
||||
.dropdown {
|
||||
.dropdown-button {
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #dedede;
|
||||
color: #222;
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chips-listing {
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
.dropdown-item {
|
||||
display: none;
|
||||
background: white;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
.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;
|
||||
&:hover {
|
||||
background: #dedede;
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
padding: 8px 10px 10px 12px;
|
||||
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 14px;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
align-self: stretch;
|
||||
padding-right: 10px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&.highlighted .chips-listing {
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #C2A9FD;
|
||||
background: #E3EAF1;
|
||||
box-shadow: 0 0 10px 0 #A86CFD;
|
||||
}
|
||||
|
||||
.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;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
padding: 8px 10px 10px 12px;
|
||||
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 14px;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
align-self: stretch;
|
||||
padding-right: 10px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&.highlighted .chips-listing {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #C2A9FD;
|
||||
background: #E3EAF1;
|
||||
box-shadow: 0 0 10px 0 #A86CFD;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import {Component, Input} from '@angular/core';
|
|||
import {MultiSelector} from '../../inputs/multi-selector/multi-selector';
|
||||
import {NgClass} from '@angular/common';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'sae-filters-group',
|
||||
imports: [
|
||||
|
|
@ -14,7 +15,10 @@ import {NgClass} from '@angular/common';
|
|||
export class FiltersGroup {
|
||||
@Input() highlighted = false;
|
||||
@Input() appState: any = {};
|
||||
|
||||
@Input() store: any;
|
||||
@Input() actionTypes: any;
|
||||
|
||||
|
||||
onSelectedChoicesChange(e: any) {
|
||||
console.log('onSelectedChoicesChange', e);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,44 +1,70 @@
|
|||
<div class="translate-texts">
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
|
||||
<div id="fromText">
|
||||
<div id="fromText">
|
||||
|
||||
<!-- delete button from_text-->
|
||||
@if (fromText.length > 0) {
|
||||
<button (click)="emptyText('fromText')" class="delete-button button">x</button>
|
||||
}
|
||||
<textarea (keyup)="onFromTextChanged()" [(ngModel)]="fromText" cols="30" id="from_text"
|
||||
name="from_text"
|
||||
placeholder=""
|
||||
rows="10"></textarea>
|
||||
|
||||
<sae-main-button></sae-main-button>
|
||||
<button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
|
||||
<i class="ri-upload-cloud-2-line"></i>
|
||||
<span class="label">
|
||||
@if (!fileIsUploaded && !textFocused) {
|
||||
<button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
|
||||
<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">
|
||||
<i class="ri-upload-cloud-2-line"></i>
|
||||
</button>
|
||||
<!-- hidden text input-->
|
||||
<input #fileUpload
|
||||
accept=".csv"
|
||||
(change)="onFileSelected($event)" class="is-outlined" id="fileUploadTranslator"
|
||||
type="file">
|
||||
}
|
||||
@if (fileIsUploaded) {
|
||||
|
||||
<div class="file-selected">
|
||||
<div class="labeling">
|
||||
|
||||
<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>
|
||||
@if (loadingResume) {
|
||||
<div class="loading">
|
||||
loading...
|
||||
<div>
|
||||
|
||||
<i class="ri ri-file-2-line"></i>
|
||||
</div>
|
||||
<div class="label">
|
||||
{{ filePath }}
|
||||
</div>
|
||||
<div class="weight">
|
||||
{{ fileWeight }}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<button class="remove-file-upload" (click)="onRemoveFileSelected()">x</button>
|
||||
</div>
|
||||
}
|
||||
<!-- delete button from_text-->
|
||||
|
||||
</div>
|
||||
<button (click)="emptyText('fromText')" [ngClass]="{
|
||||
'is-visible' : fromText.length
|
||||
}" class="delete-button button">x
|
||||
</button>
|
||||
|
||||
<textarea
|
||||
(focus)="focusFromText()"
|
||||
(keyup)="onFromTextChanged()"
|
||||
[(ngModel)]="fromText"
|
||||
cols="30"
|
||||
id="from_text"
|
||||
name="from_text"
|
||||
placeholder="Copy/paste client’s question \n or Drag and drop extracted .csv file from CRM portal..."
|
||||
rows="5"></textarea>
|
||||
</div>
|
||||
|
||||
<div id="toText">
|
||||
|
||||
@if (loadingResume) {
|
||||
<div class="loading">
|
||||
loading...
|
||||
</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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,69 +1,141 @@
|
|||
@use '../../src/styles/variables';
|
||||
|
||||
:host {
|
||||
|
||||
|
||||
.translate-texts {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#fromText,
|
||||
#toText {
|
||||
padding: variables.$spacing-4 42px variables.$spacing-4 variables.$spacing-4;
|
||||
box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
|
||||
background: white;
|
||||
height: 235px;
|
||||
width: 648px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
border: 0;
|
||||
border-radius: 100%;
|
||||
background: #F2F2F2;
|
||||
color: grey;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
float: right;
|
||||
width: 37px;
|
||||
visibility: hidden;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: #888;
|
||||
color: #222;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.is-visible {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 236px;
|
||||
height: 200px;
|
||||
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;
|
||||
color: variables.$csc-text-color;
|
||||
font-size: variables.$spacing-4;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%; /* 22.4px */
|
||||
margin-top: -40px;
|
||||
background: transparent;
|
||||
|
||||
|
||||
&::placeholder {
|
||||
color: variables.$csc-textarea-placeholder-color;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%;
|
||||
width: 370px;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-placeholder {
|
||||
color: variables.$csc-textarea-placeholder-color;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.click-file-upload {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
height: 34px;
|
||||
padding: 8px 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
color: variables.$csc-nav-color;
|
||||
border-radius: variables.$radius-4;
|
||||
border: 1px solid var(--color-text-title, variables.$csc-nav-color);
|
||||
background: var(--color-background-card-on-base, #FFF);
|
||||
left: 0;
|
||||
top: 100px;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
|
||||
i {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#fromText {
|
||||
.file-selected {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
|
||||
textarea {
|
||||
background: variables.$csc-file-selector-bg-color;
|
||||
|
||||
.labeling {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
|
||||
div {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: variables.$csc-text-color;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%; /* 19.6px */
|
||||
}
|
||||
|
||||
.weight {
|
||||
color: variables.$csc-light-text-color;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
#fileUploadTranslator {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import {Component, EventEmitter, Output} from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {Index} from '../index';
|
||||
import {NgClass} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'sae-translate-texts',
|
||||
standalone: true,
|
||||
imports: [FormsModule, Index],
|
||||
imports: [FormsModule, NgClass],
|
||||
templateUrl: './translate-texts.html',
|
||||
styleUrl: './translate-texts.scss'
|
||||
})
|
||||
|
|
@ -14,7 +14,17 @@ export class TranslateTexts {
|
|||
public toText: string = 'résumé ici'
|
||||
public loadingResume: boolean = false;
|
||||
public mode: string = 'demo';
|
||||
public debounceEnabled: boolean = false;
|
||||
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';
|
||||
// public fileWeight: string = '12 kb';
|
||||
|
||||
public fromTimeout: any;
|
||||
public debounceDuration: number = 1000;
|
||||
@Output() updateFilters: EventEmitter<any> = new EventEmitter();
|
||||
|
|
@ -77,13 +87,33 @@ export class TranslateTexts {
|
|||
this[someText] = '';
|
||||
}
|
||||
|
||||
onFileSelected($event: Event) {
|
||||
onFileSelected($event: any) {
|
||||
console.log('file selected', $event, $event.target.value)
|
||||
if ($event.target.value) {
|
||||
this.fileIsUploaded = true;
|
||||
this.filePath = $event.target.value;
|
||||
this.fileWeight = $event.target.value;
|
||||
}
|
||||
}
|
||||
|
||||
onRemoveFileSelected() {
|
||||
this.fileIsUploaded = false;
|
||||
this.filePath = '';
|
||||
this.fileWeight = '';
|
||||
|
||||
// document.getElementById('fromText')?.focus();
|
||||
}
|
||||
|
||||
clickFileUpload(fileUpload: HTMLInputElement) {
|
||||
|
||||
fileUpload.click();
|
||||
console.log('click file upload', fileUpload)
|
||||
}
|
||||
|
||||
focusFromText(e?: any) {
|
||||
console.log('focus from text', e)
|
||||
console.log('focus from text')
|
||||
this.onRemoveFileSelected()
|
||||
// this.fromText = ' '
|
||||
this.textFocused = true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,23 +4,23 @@
|
|||
}"
|
||||
class="input-box"
|
||||
>
|
||||
@if (selectedChoices?.length) {
|
||||
<div class="selected-items-counter">
|
||||
{{ selectedChoices.length }}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
<i class="ri-search-line search-placeholder"></i>
|
||||
<div class="label">
|
||||
<span class="d-none">
|
||||
{{ label }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- (blur)="displayDropdown = false" -->
|
||||
<input
|
||||
|
||||
(blur)="displayDropdown = false"
|
||||
(click)="onClickInput()" (focus)="displayDropdown = true"
|
||||
class="is-hidden" placeholder="{{label}}"
|
||||
type="text">
|
||||
<span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
|
||||
class="selected-items-counter">
|
||||
{{ selectedChoices?.length }}
|
||||
</span>
|
||||
<div class="dropdown-button selector-button">
|
||||
<!-- bouton-->
|
||||
<i class="ri-arrow-down-s-line"></i>
|
||||
|
|
|
|||
|
|
@ -1,107 +1,116 @@
|
|||
@use '../../src/styles/variables';
|
||||
|
||||
.input-box {
|
||||
margin-left: -1rem;
|
||||
:host {
|
||||
|
||||
.d-none {
|
||||
display: none;
|
||||
}
|
||||
.input-box {
|
||||
margin-left: -1rem;
|
||||
|
||||
i {
|
||||
.d-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
top: 10px;
|
||||
left: 1rem;
|
||||
i {
|
||||
|
||||
&::before {
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
left: 1rem;
|
||||
|
||||
&::before {
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
color: #525668;
|
||||
fill: #525668;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
color: #525668;
|
||||
fill: #525668;
|
||||
}
|
||||
}
|
||||
|
||||
.search-placeholder,
|
||||
.selector-button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
top: 30px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.selector-button {
|
||||
top: -36px;
|
||||
right: -165px;
|
||||
}
|
||||
|
||||
.selected-items-counter {
|
||||
background: blue;
|
||||
color: white;
|
||||
border-radius: 200px;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
line-height: 10px;
|
||||
position: relative;
|
||||
top: 33px;
|
||||
left: 136px;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
|
||||
border-radius: 8px;
|
||||
border: 1px solid #8D91A4;
|
||||
background: var(--color-background-card-on-base, #FFF);
|
||||
|
||||
|
||||
padding: 10px 40px;
|
||||
|
||||
width: 210px;
|
||||
height: 42px;
|
||||
|
||||
overflow: hidden;
|
||||
color: var(--color-text-secondary, #525668);
|
||||
text-overflow: ellipsis;
|
||||
font-size: var(--Font-Base, 14px);
|
||||
|
||||
|
||||
.is-disabled & {
|
||||
border-color: #525668;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
top: -28px;
|
||||
border-left: 1px solid #8D91A4;
|
||||
border-bottom: 1px solid #8D91A4;
|
||||
border-right: 1px solid #8D91A4;
|
||||
|
||||
.dropdown-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
.search-placeholder,
|
||||
.selector-button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
.search-placeholder {
|
||||
top: 30px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #525668;
|
||||
color: white;
|
||||
.selector-button {
|
||||
top: -32px;
|
||||
right: -183px;
|
||||
}
|
||||
|
||||
.selected-items-counter {
|
||||
background: variables.$csc-chips-bg-color;
|
||||
color: white;
|
||||
border-radius: 200px;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
line-height: 10px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: -53px;
|
||||
visibility: hidden;
|
||||
|
||||
&.is-visible {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
|
||||
border-radius: 8px;
|
||||
border: 1px solid #8D91A4;
|
||||
background: var(--color-background-card-on-base, #FFF);
|
||||
|
||||
|
||||
padding: 10px 40px;
|
||||
|
||||
width: 210px;
|
||||
height: 42px;
|
||||
|
||||
overflow: hidden;
|
||||
color: var(--color-text-secondary, #525668);
|
||||
text-overflow: ellipsis;
|
||||
font-size: var(--Font-Base, 14px);
|
||||
|
||||
|
||||
.is-disabled & {
|
||||
border-color: #525668;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
top: -28px;
|
||||
border-left: 1px solid #8D91A4;
|
||||
border-bottom: 1px solid #8D91A4;
|
||||
border-right: 1px solid #8D91A4;
|
||||
|
||||
.dropdown-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #525668;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@ export class MultiSelector {
|
|||
@Input() availableChoices: any = ['choix 1', 'choix 2', 'choix 3'];
|
||||
@Input() selectedChoices: any = ['choix 4', 'choix 5'];
|
||||
@Input() displayDropdown: boolean = false;
|
||||
|
||||
@Input() store: any;
|
||||
@Input() actionTypes: any;
|
||||
|
||||
@Output() selectedChoicesChange = new EventEmitter<any>();
|
||||
@Output() availableChoicesChange = new EventEmitter<any>();
|
||||
|
||||
|
|
|
|||
|
|
@ -56,13 +56,16 @@ $csc-light-yellow-color: #FFF3D8;
|
|||
$csc-magic-color: #a86FCD;
|
||||
$csc-bg-color: #F5F5F5;
|
||||
$csc-title-color: #000;
|
||||
$csc-text-color: #1B1D27;
|
||||
$csc-light-text-color: #525668;
|
||||
|
||||
$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;
|
||||
$csc-file-selector-bg-color: #e3eaf1;
|
||||
$csc-filters-box-color: #e3eaf1;
|
||||
|
||||
$bot-bubble: $csc-light-yellow-color;
|
||||
// sizes
|
||||
|
|
|
|||
|
|
@ -31,7 +31,11 @@
|
|||
<h2 class="title">
|
||||
Question analysis
|
||||
</h2>
|
||||
<sae-bot-talks [message]="'Generating a summary...analyzing client’s question...'"></sae-bot-talks>
|
||||
@if (appState.botMessage) {
|
||||
|
||||
<sae-bot-talks
|
||||
[message]="appState.botMessage"></sae-bot-talks>
|
||||
}
|
||||
<!--filters-->
|
||||
<!-- advanced filters-->
|
||||
<div class="filters-container">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
:host {
|
||||
|
||||
width: 1312px;
|
||||
display: block;
|
||||
|
||||
#question_analysis {
|
||||
sae-bot-talks {
|
||||
top: -50px;
|
||||
|
|
@ -22,9 +25,22 @@
|
|||
}
|
||||
|
||||
#translation_request {
|
||||
|
||||
.helper {
|
||||
padding-left: 2.65vw;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
|
||||
padding-bottom: 16px;
|
||||
|
||||
span {
|
||||
&:nth-of-type(1) {
|
||||
width: 560px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,22 @@
|
|||
// Define initial state
|
||||
import {StateInterface} from './reducers';
|
||||
|
||||
|
||||
export type filterGroupType = {
|
||||
engineType: filterDoubleListType,
|
||||
findings: filterDoubleListType,
|
||||
ata: filterDoubleListType,
|
||||
partNumber: filterDoubleListType,
|
||||
technicalManual: filterDoubleListType,
|
||||
onOffWing: filterDoubleListType,
|
||||
}
|
||||
export type filterDoubleListType = {
|
||||
availableList: filterListType[],
|
||||
selectedList: filterListType[],
|
||||
}
|
||||
export type filterListType = {
|
||||
label: string,
|
||||
value: string,
|
||||
}
|
||||
export const initialState: StateInterface = {
|
||||
app: {
|
||||
backendAPIRoot: "",
|
||||
|
|
@ -9,10 +24,17 @@ export const initialState: StateInterface = {
|
|||
fromText: "",
|
||||
fromFile: "",
|
||||
toText: "",
|
||||
botMessage: "Generating a summary...analyzing client’s question...",
|
||||
filters: {
|
||||
engineType: {
|
||||
availableList: ['choix 1'],
|
||||
selectedList: ['choix 2']
|
||||
availableList: [{
|
||||
label: 'choix 1',
|
||||
value: 'choix 1',
|
||||
}],
|
||||
selectedList: [{
|
||||
label: 'choix 2',
|
||||
value: 'choix 2',
|
||||
}]
|
||||
},
|
||||
findings: {
|
||||
availableList: {},
|
||||
|
|
|
|||
|
|
@ -102,6 +102,7 @@ export interface StateInterface {
|
|||
fromFile: string,
|
||||
fromText: string,
|
||||
toText: string,
|
||||
botMessage: string,
|
||||
filters: {
|
||||
engineType: SelectFilterType,
|
||||
findings: SelectFilterType,
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
@use "sass:color";
|
||||
// lib SAE Aero styles
|
||||
@use 'sae-lib/src/styles/index.scss';
|
||||
@use 'sae-lib/buttons/feedback-button/feedback-button.scss';
|
||||
//@use 'sae-lib/src/styles/feedback.scss';
|
||||
/* Fichier de styles global pour l'application */
|
||||
|
||||
// Importer les styles principaux
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Ce fichier regroupe toutes les variables de sae-lib pour faciliter l'importation
|
||||
@forward 'sae-lib/src/styles/variables.scss';
|
||||
|
||||
.all-pages{
|
||||
padding: 50px 64px;
|
||||
.all-pages {
|
||||
padding: 70px 64px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.helper {
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
|
|
@ -26,29 +26,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
border: 0;
|
||||
border-radius: 100%;
|
||||
background: #F2F2F2;
|
||||
color: grey;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
left: 92%;
|
||||
top: 50px;
|
||||
width: 37px;
|
||||
display: none;
|
||||
|
||||
&:hover {
|
||||
background: #888;
|
||||
color: #222;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue