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,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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue