Merge branch 'feature/save-original-file' into dev

.gitignore

@@ -40,3 +40,5 @@ Thumbs.db
 
 .nx/cache
 .angular
+
+*.nps

.prettierrc

@@ -5,5 +5,9 @@
   "tabWidth": 2,
   "bracketSpacing": true,
   "endOfLine": "lf",
-  "semi": true
+  "semi": true,
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  "insertPragma": false,
+  "useTabs": false
 }

nwaifu-ui/src/lib/components/button/button.component.scss

@@ -7,7 +7,7 @@ button {
   color: #f5f6fa;
   border-radius: 15px;
   transition: ease-in-out 0.2s;
-  margin: 2rem;
+  width: 100%;
   &:hover,
   &:active {
     transform: scale(1.2);

nwaifu-ui/src/lib/components/button/button.component.ts

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   imports: [CommonModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ButtonComponent {
+export class NWUIButtonComponent {
   @Input() disabled = false;
-  @Input() type: string | undefined;
+  @Input() type = 'button';
 }

nwaifu-ui/src/lib/components/index.ts

@@ -1 +1,2 @@
 export * from './button';
+export * from './textarea';

nwaifu-ui/src/lib/components/textarea/index.ts

@@ -0,0 +1 @@
+export * from './textarea.component';

nwaifu-ui/src/lib/components/textarea/textarea.component.html

@@ -0,0 +1,5 @@
+<div [attr.contenteditable]="contenteditable" [className]="className" #ref (blur)="leaveFn()">
+  @if(!value) {
+  <ng-content></ng-content>
+  }
+</div>

nwaifu-ui/src/lib/components/textarea/textarea.component.scss

@@ -0,0 +1,20 @@
+.nwui-textarea {
+  border-radius: 8px;
+  height: auto;
+  color: #efdee0;
+  outline: none;
+  padding-inline: 2rem 1rem;
+  background-color: transparent;
+  border: 2px solid #e4bdc3;
+  font-size: 1rem;
+  font-weight: inherit;
+  min-height: 3rem;
+  line-height: 3rem;
+  &:focus {
+    border: 2px solid #efdee0;
+  }
+  &.disabled {
+    opacity: 0.5;
+  }
+  word-wrap: break-word;
+}

nwaifu-ui/src/lib/components/textarea/textarea.component.ts

@@ -0,0 +1,36 @@
+import { CommonModule } from '@angular/common';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'nwui-textarea',
+  imports: [CommonModule],
+  standalone: true,
+  styleUrls: ['./textarea.component.scss'],
+  templateUrl: './textarea.component.html',
+  // changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NWUITextAreaComponent implements AfterViewInit {
+  @Input() disabled = false;
+  @Input() value = '';
+  @Input() contenteditable = true;
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  @Output() leave = new EventEmitter<string>();
+  @ViewChild('ref') ref: ElementRef<HTMLDivElement> | null = null;
+
+  get className(): string {
+    return `nwui-textarea ${this.disabled && !this.contenteditable ? 'disabled' : ''}`;
+  }
+
+  leaveFn() {
+    if (this.ref) {
+      const target = this.ref.nativeElement;
+      const text = target.textContent || '';
+      if (this.leave) this.leave.emit(text);
+      target.textContent = text;
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (this.ref && this.value) this.ref.nativeElement.textContent = this.value;
+  }
+}

src/app/app.component.html

@@ -8,4 +8,3 @@
   </nwui-button>
 </div>
 <app-text-list [elements]="elements"></app-text-list>
-<router-outlet></router-outlet>

src/app/app.component.scss

@@ -0,0 +1,9 @@
+.btns {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  nwui-button {
+    margin: 2rem;
+  }
+}

src/app/app.component.ts

@@ -1,12 +1,13 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { ButtonComponent } from '@nwaifu-ui';
+import { NWUIButtonComponent } from '@nwaifu-ui';
 import { TextListComponent } from './components/text_list/text_list.component';
-import { TranslateData } from './dto/translate_data.dto';
+import { LocalStorageKeys } from './consts';
+import { NpsFile, TranslateData } from './dto/translate_data.dto';
+import { saveOriginalFile } from './lib/file_tools';
 import { parse } from './lib/parser';
 @Component({
   standalone: true,
-  imports: [RouterModule, TextListComponent, ButtonComponent],
+  imports: [TextListComponent, NWUIButtonComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
@@ -17,14 +18,14 @@ export class AppComponent implements OnInit {
   @ViewChild('fileInput') fileInput: HTMLInputElement | null = null;
 
   ngOnInit(): void {
-    const data = localStorage.getItem('translations');
+    const data = localStorage.getItem(LocalStorageKeys.TRANSLATIONS);
     if (data) {
       try {
         this.elements = JSON.parse(data);
       } catch (e) {
         console.error(e);
         alert('Error while loading');
-        localStorage.removeItem('translations');
+        localStorage.removeItem(LocalStorageKeys.TRANSLATIONS);
         this.elements = [];
       }
     }
@@ -33,12 +34,17 @@ export class AppComponent implements OnInit {
   submitFile($event: Event) {
     const target = $event.target as HTMLInputElement;
     if (target.files) {
-      const file = target.files?.[0];
+      const file = target.files[0];
       if (file) {
         const reader = new FileReader();
         reader.onload = () => {
           if (reader.result) {
             this.onFileLoaded(reader.result.toString());
+            const original_file: NpsFile = {
+              file_name: file.name,
+              original_text: reader.result.toString(),
+            };
+            saveOriginalFile(original_file);
             target.value = '';
           }
         };
@@ -54,6 +60,6 @@ export class AppComponent implements OnInit {
 
   onClearClicked() {
     this.elements = [];
-    localStorage.removeItem('translations');
+    localStorage.removeItem(LocalStorageKeys.TRANSLATIONS);
   }
 }

src/app/app.config.ts

@@ -1,9 +1,6 @@
 import { provideHttpClient } from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { appRoutes } from './app.routes';
-import { TranslateService } from './services/translate.service';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient(), provideRouter(appRoutes), TranslateService],
+  providers: [provideHttpClient()],
 };

src/app/components/translate_block/translate_block.component.html

@@ -1,12 +1,18 @@
 <div class="element">
   <h2>{{ index + 1 }}</h2>
   <div class="fields">
-    <div class="english-text">{{ item.english_text }}</div>
-    <div class="translated-text" #translatedText [attr.contenteditable]="isEditing" (blur)="saveTranslate()"></div>
+    <nwui-textarea [contenteditable]="false">{{ item.english_text }}</nwui-textarea>
+    <nwui-textarea
+      #translatedText
+      [contenteditable]="isEditing"
+      (leave)="saveTranslate($event)"
+      [disabled]="!isEditing"
+      >{{ item.translated_text }}</nwui-textarea
+    >
   </div>
   <div class="btns">
-    <nwui-button (click)="sendToTranslate()">Translate</nwui-button>
-    <button (click)="isEditing = !isEditing" [disabled]="isEditing">Edit</button>
-    <button (click)="clear()" [disabled]="!item.translated_text.length">Clear</button>
+    <nwui-button (click)="sendToGoogleTranslate()" [disabled]="translateLoading">Translate</nwui-button>
+    <nwui-button (click)="isEditing = !isEditing" [disabled]="isEditing">Edit</nwui-button>
+    <nwui-button (click)="clear()" [disabled]="!item.translated_text.length">Clear</nwui-button>
   </div>
 </div>

src/app/components/translate_block/translate_block.component.scss

@@ -1,34 +1,3 @@
-.translated-text {
-  border-radius: 8px;
-  height: auto;
-  color: #efdee0;
-  outline: none;
-  padding-inline: 2rem 1rem;
-  background-color: transparent;
-  border: 2px solid #e4bdc3;
-  font-size: 1rem;
-  font-weight: inherit;
-  min-height: 3rem;
-  line-height: 3rem;
-  &:focus {
-    border: 2px solid #efdee0;
-  }
-  &:read-only {
-    opacity: 0.5;
-  }
-  word-wrap: break-word;
-}
-
-.english-text {
-  color: #efdee0;
-  border: 2px solid #e4bdc3;
-  word-wrap: break-word;
-  border-radius: 8px;
-  padding-inline: 2rem 1rem;
-  line-height: 3rem;
-  background-color: transparent;
-}
-
 .element {
   display: flex;
   background-color: #413738;
@@ -62,24 +31,9 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  .btn {
-    outline: none;
-    border: none;
-    cursor: pointer;
-    background-color: #5b3f45;
-    padding: 1em 1.5em;
-    color: #f5f6fa;
-    border-radius: 15px;
-    transition: ease-in-out 0.2s;
-    &:hover {
-      transform: scale(1.2);
-    }
-    &:disabled {
-      opacity: 0.5;
-      &:hover {
-        cursor: not-allowed;
-        transform: scale(1);
-      }
-    }
+  align-items: center;
+  padding-inline: 1rem;
+  nwui-button {
+    width: 100%;
   }
 }

src/app/components/translate_block/translate_block.component.ts

@@ -1,25 +1,28 @@
 import { CommonModule } from '@angular/common';
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { ButtonComponent } from '@nwaifu-ui';
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { NWUIButtonComponent, NWUITextAreaComponent } from '@nwaifu-ui';
+import { LocalStorageKeys } from 'src/app/consts';
 import { TranslateData } from '../../dto/translate_data.dto';
-import { TranslatePipe } from '../../pipes/translate.pipe';
+import { ETranslateService } from '../../services/translate.enums';
+import { TranslateService } from '../../services/translate.service';
 
 @Component({
   selector: 'app-translate-block',
   templateUrl: './translate_block.component.html',
   styleUrls: ['./translate_block.component.scss'],
   standalone: true,
-  imports: [CommonModule, ButtonComponent],
-  providers: [TranslatePipe],
+  imports: [CommonModule, NWUIButtonComponent, NWUITextAreaComponent],
+  providers: [TranslateService],
 })
-export class TranslateBlockComponent implements OnInit, AfterViewInit {
+export class TranslateBlockComponent implements OnInit {
   @ViewChild('translatedText') translatedText: ElementRef<HTMLDivElement> | null = null;
-  @Input() item: TranslateData = { english_text: '', translated_text: '' };
-  @Input() index = 0;
+  @Input({ required: true }) item: TranslateData = { english_text: '', translated_text: '' };
+  @Input({ required: true }) index = 0;
+  translateLoading = false;
   isEditing = false;
 
   saveChanges() {
-    const data: TranslateData[] = JSON.parse(localStorage.getItem('translations') ?? '[]');
+    const data: TranslateData[] = JSON.parse(localStorage.getItem(LocalStorageKeys.TRANSLATIONS) ?? '[]');
     if (!data.length) {
       alert('No data');
       return;
@@ -32,32 +35,38 @@ export class TranslateBlockComponent implements OnInit, AfterViewInit {
     this.isEditing = this.item.translated_text === '';
   }
 
-  constructor(private translatePipe: TranslatePipe, private changeDetectionRef: ChangeDetectorRef) {}
-  async sendToTranslate() {
-    const text = await this.translatePipe.transform(this.item.english_text);
-    this.item.translated_text = text;
-    if (this.translatedText) this.translatedText.nativeElement.textContent = text;
-    this.isEditing = false;
-    this.saveChanges();
+  constructor(private translateService: TranslateService) {}
+
+  private sendToTranslate(service: ETranslateService = ETranslateService.GOOGLE) {
+    this.translateLoading = true;
+    this.translateService.translate(this.item.english_text, service).subscribe((text) => {
+      this.item.translated_text = text;
+      this.isEditing = false;
+      this.translateLoading = false;
+      this.saveChanges();
+    });
   }
 
-  saveTranslate() {
+  sendToGoogleTranslate() {
+    this.sendToTranslate(ETranslateService.GOOGLE);
+  }
+
+  sendToDeeplTranslate() {
+    this.sendToTranslate(ETranslateService.DEEPL);
+  }
+
+  sendToPromptTranslate() {
+    this.sendToTranslate(ETranslateService.PROMPT);
+  }
+
+  saveTranslate(text: string) {
     this.isEditing = false;
-    if (this.translatedText) {
-      this.item.translated_text = this.translatedText.nativeElement.textContent || '';
-      this.translatedText.nativeElement.textContent = '';
-      this.translatedText.nativeElement.textContent = this.item.translated_text;
-    }
+    this.item.translated_text = text;
     this.saveChanges();
   }
   clear() {
     this.item.translated_text = '';
-    if (this.translatedText) this.translatedText.nativeElement.textContent = '';
     this.isEditing = true;
     this.saveChanges();
   }
-
-  ngAfterViewInit(): void {
-    if (this.translatedText) this.translatedText.nativeElement.textContent = this.item.translated_text;
-  }
 }

src/app/consts.ts

@@ -0,0 +1,4 @@
+export enum LocalStorageKeys {
+  TRANSLATIONS = 'translations',
+  ORIGINAL_FILE = 'original_file',
+}

src/app/dto/translate_data.dto.ts

@@ -2,3 +2,8 @@ export interface TranslateData {
   english_text: string;
   translated_text: string;
 }
+export interface NpsFile {
+  file_name: string;
+  original_text: string;
+  translated_text?: string;
+}

src/app/lib/file_tools.ts

@@ -0,0 +1,6 @@
+import { LocalStorageKeys } from '../consts';
+import { NpsFile } from '../dto/translate_data.dto';
+
+export function saveOriginalFile(file: NpsFile) {
+  localStorage.setItem(LocalStorageKeys.ORIGINAL_FILE, JSON.stringify(file));
+}

src/app/pipes/translate.pipe.ts

@@ -1,10 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { TranslateService } from '../services/translate.service';
-
-@Pipe({ name: 'translate', standalone: true, pure: false })
-export class TranslatePipe implements PipeTransform {
-  constructor(private translateService: TranslateService) {}
-  transform(text: string) {
-    return this.translateService.translate(text);
-  }
-}

src/app/services/translate.dto.ts

@@ -0,0 +1 @@
+export type GoogleTranslateResponse = Array<Array<string>>;

src/app/services/translate.enums.ts

@@ -0,0 +1,5 @@
+export enum ETranslateService {
+  GOOGLE = 'google',
+  DEEPL = 'deepl',
+  PROMPT = 'prompt',
+}

src/app/services/translate.service.ts

@@ -1,27 +1,34 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Observable, map } from 'rxjs';
+import { GoogleTranslateResponse } from './translate.dto';
+import { ETranslateService } from './translate.enums';
 
 @Injectable({ providedIn: 'root' })
 export class TranslateService {
   constructor(private http: HttpClient) {}
-  translate(text: string): Promise<string> {
-    return new Promise<string>((resolve) => {
-      this.http
-        .get(
-          'https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=ru&dt=t&q=' +
-            encodeURIComponent(text),
-        )
-        .subscribe({
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          next: (response: any) => {
-            console.log(response);
-            resolve(response[0][0][0]);
-          },
-          error: (error) => {
-            console.error(error);
-            resolve('');
-          },
-        });
-    });
+
+  private googleTranslate(text: string): Observable<string> {
+    return this.http
+      .get<GoogleTranslateResponse>(
+        'https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=ru&dt=t&q=' + encodeURIComponent(text),
+      )
+      .pipe(
+        map((response) => {
+          let result = '';
+          response[0].forEach((el) => {
+            result += el[0] + ' ';
+          });
+          return result;
+        }),
+      );
+  }
+  translate(text: string, service: ETranslateService = ETranslateService.GOOGLE): Observable<string> {
+    switch (service) {
+      case ETranslateService.GOOGLE:
+        return this.googleTranslate(text);
+      default:
+        return this.googleTranslate(text);
+    }
   }
 }