Merge branch 'feature/save-translated-file-#5' into dev

Reviewed-on: #1

.eslintrc.base.json

@@ -0,0 +1,42 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
+      "env": {
+        "jest": true
+      },
+      "rules": {}
+    }
+  ]
+}

.eslintrc.json

@@ -1,24 +1,17 @@
 {
-  "root": true,
   "ignorePatterns": ["!**/*"],
-  "plugins": ["@nx"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nx/typescript"],
       "rules": {}
     },
     {
       "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nx/javascript"],
       "rules": {}
     },
     {
       "files": ["*.ts"],
-      "extends": [
-        "plugin:@nx/angular",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",
@@ -43,5 +36,6 @@
       "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     }
-  ]
+  ],
+  "extends": ["./.eslintrc.base.json"]
 }

.gitignore

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

.nvmrc

@@ -0,0 +1 @@
+v20.14.0

.prettierrc

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

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
-    "prettier.tabWidth": 2
+    "editor.tabSize": 2,
+    "cSpell.words": [
+        "nwui"
+    ]
 }

jest.config.app.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+export default {
+  displayName: 'NitroPlusTranslator',
+  preset: './jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: './coverage/NitroPlusTranslator',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+  testMatch: ['<rootDir>/src/**/__tests__/**/*.[jt]s?(x)', '<rootDir>/src/**/*(*.)@(spec|test).[jt]s?(x)'],
+};

jest.config.ts

@@ -1,26 +1,5 @@
-/* eslint-disable */
-export default {
-  displayName: 'NitroPlusTranslator',
-  preset: './jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  coverageDirectory: './coverage/NitroPlusTranslator',
-  transform: {
-    '^.+\\.(ts|mjs|js|html)$': [
-      'jest-preset-angular',
-      {
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-        stringifyContentPathRegex: '\\.(html|svg)$',
-      },
-    ],
-  },
-  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
-  snapshotSerializers: [
-    'jest-preset-angular/build/serializers/no-ng-attributes',
-    'jest-preset-angular/build/serializers/ng-snapshot',
-    'jest-preset-angular/build/serializers/html-comment',
-  ],
-  testMatch: [
-    '<rootDir>/src/**/__tests__/**/*.[jt]s?(x)',
-    '<rootDir>/src/**/*(*.)@(spec|test).[jt]s?(x)',
-  ],
-};
+import { getJestProjectsAsync } from '@nx/jest';
+
+export default async () => ({
+  projects: await getJestProjectsAsync(),
+});

nwaifu-ui/.eslintrc.json

@@ -0,0 +1,46 @@
+{
+  "extends": [
+    "../.eslintrc.base.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "nwui",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "nwui",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@nx/angular-template"
+      ],
+      "rules": {}
+    }
+  ]
+}

nwaifu-ui/README.md

@@ -0,0 +1,7 @@
+# nwaifu-ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test nwaifu-ui` to execute the unit tests.

nwaifu-ui/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'nwaifu-ui',
+  preset: '../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../coverage/nwaifu-ui',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

nwaifu-ui/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "nwaifu-ui",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "nwaifu-ui/src",
+  "prefix": "nwui",
+  "projectType": "library",
+  "tags": [],
+  "targets": {}
+}

nwaifu-ui/src/index.ts

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

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

@@ -0,0 +1 @@
+<button [disabled]="disabled" [type]="type"><ng-content></ng-content></button>

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

@@ -7,8 +7,17 @@ button {
   color: #f5f6fa;
   border-radius: 15px;
   transition: ease-in-out 0.2s;
-  margin: 2rem;
-  &:hover {
+  width: 100%;
+  &:hover,
+  &:active {
     transform: scale(1.2);
   }
+  &:disabled {
+    opacity: 0.5;
+    &:hover,
+    &:active {
+      cursor: not-allowed;
+      transform: scale(1);
+    }
+  }
 }

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

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'nwui-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss'],
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NWUIButtonComponent {
+  @Input() disabled = false;
+  @Input() type = 'button';
+}

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

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

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

@@ -0,0 +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,35 @@
+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;
+  @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;
+  }
+}

nwaifu-ui/src/lib/index.ts

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

nwaifu-ui/src/test-setup.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';

nwaifu-ui/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

nwaifu-ui/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}

nwaifu-ui/tsconfig.spec.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"]
+}

nx.json

@@ -49,6 +49,13 @@
       "linter": "eslint",
       "style": "scss",
       "unitTestRunner": "jest"
+    },
+    "@nx/angular:library": {
+      "linter": "eslint",
+      "unitTestRunner": "jest"
+    },
+    "@nx/angular:component": {
+      "style": "css"
     }
   },
   "defaultProject": "NitroPlusTranslator"

package.json

@@ -54,7 +54,8 @@
     "prettier": "^2.6.2",
     "ts-jest": "^29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "~5.4.2"
+    "typescript": "~5.4.2",
+    "bun-types": "latest"
   },
   "nx": {
     "includedScripts": []

project.json

@@ -80,7 +80,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectName}"],
       "options": {
-        "jestConfig": "jest.config.ts"
+        "jestConfig": "jest.config.app.ts"
       }
     }
   }

src/app/app.component.html

@@ -1,3 +1,13 @@
-<app-upload-btn (fileLoaded)="onFileLoaded($event)"></app-upload-btn>
+<div class="btns">
+  <nwui-button (click)="fileInput.click()">
+    <span><i class="lni lni-upload"></i> Upload</span>
+    <input type="file" (change)="submitFile($event)" #fileInput style="display: none" />
+  </nwui-button>
+  <nwui-button (click)="onClearClicked()">
+    <span><i class="lni lni-trash-can"></i> Clear</span>
+  </nwui-button>
+  <nwui-button (click)="onSaveClicked()">
+    <span><i class="lni lni-save"></i> Save</span>
+  </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,26 +1,88 @@
-import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NWUIButtonComponent } from '@nwaifu-ui';
 import { TextListComponent } from './components/text_list/text_list.component';
-import { UploadBtnComponent } from './components/upload_btn/upload_btn.component';
+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: [UploadBtnComponent, RouterModule, TextListComponent],
+  imports: [TextListComponent, NWUIButtonComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'NitroPlusTranslator';
-  elements: string[] = [];
+  elements: TranslateData[] = [];
+  @ViewChild('fileInput') fileInput: HTMLInputElement | null = null;
+
+  ngOnInit(): void {
+    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(LocalStorageKeys.TRANSLATIONS);
+        this.elements = [];
+      }
+    }
+  }
+
+  submitFile($event: Event) {
+    const target = $event.target as HTMLInputElement;
+    if (target.files) {
+      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 = '';
+          }
+        };
+        reader.readAsText(file);
+      }
+    }
+  }
 
   onFileLoaded(text: string) {
     const parsed = parse(text);
     this.elements = parsed;
-    console.log(parsed);
+  }
 
-    // const lines = text.split('\n');
-    // this.elements.push(...lines);
+  onClearClicked() {
+    this.elements = [];
+    localStorage.removeItem(LocalStorageKeys.TRANSLATIONS);
+  }
+
+  onSaveClicked() {
+    const original_file: NpsFile = JSON.parse(
+      localStorage.getItem(LocalStorageKeys.ORIGINAL_FILE) ?? '{"file_name":"", "original_text":""}',
+    );
+    if (original_file.file_name && original_file.original_text) {
+      const data: TranslateData[] = JSON.parse(localStorage.getItem(LocalStorageKeys.TRANSLATIONS) ?? '[]');
+      if (!data.length) {
+        alert('No data');
+        return;
+      }
+      original_file.translated_text = original_file.original_text;
+      data.forEach((el) => {
+        original_file.translated_text = original_file.translated_text?.replace(el.english_text, el.translated_text);
+      });
+
+      const element = document.createElement('a');
+      const file = new Blob([original_file.translated_text], { type: 'text/plain' });
+      element.href = URL.createObjectURL(file);
+      element.download = original_file.file_name;
+      element.click();
+    }
   }
 }

src/app/app.config.ts

@@ -1,8 +1,6 @@
 import { provideHttpClient } from '@angular/common/http';
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { appRoutes } from './app.routes';
+import { ApplicationConfig } from '@angular/core';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient(), provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(appRoutes)],
+  providers: [provideHttpClient()],
 };

src/app/components/text_list/text_list.component.html

@@ -1,13 +1,6 @@
-<h1 *ngIf="elements.length">Всего: {{ elements.length }}</h1>
+<h1 *ngIf="elements_data.length">Всего: {{ elements_data.length }}</h1>
 <div id="elements">
-  @for(item of elements; track $index) {
-  <div class="element">
-    <h2>{{ $index + 1 }}</h2>
-    <div class="fields">
-      <div class="english-text">{{ item }}</div>
-      <textarea type="text" class="translated-text" (input)="autoScroll($event)" rows="1"></textarea>
-    </div>
-    <button class="send-translate-btn" (click)="sendToTranslate(item)">Translate</button>
-  </div>
+  @for(item of elements_data; track $index) {
+  <app-translate-block [index]="$index" [item]="item"></app-translate-block>
   }
 </div>

src/app/components/text_list/text_list.component.scss

@@ -3,85 +3,17 @@
   flex-direction: column;
   gap: 3rem;
   align-items: center;
-  textarea {
-    height: fit-content;
-    min-height: 3rem;
-    line-height: 3rem;
-    border-radius: 8px;
-    color: #efdee0;
-    outline: none;
-    padding-inline: 2rem 1rem;
-    background-color: transparent;
-    border: 2px solid #e4bdc3;
-    word-wrap: break-word;
-    overflow-x: hidden;
-    resize: none;
-    overflow-y: hidden;
-    &:focus {
-      border: 2px solid #efdee0;
-    }
-    font-size: 1rem;
-    font-weight: inherit;
-  }
   margin-inline: 2rem;
 }
 
-.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;
-  padding: 3rem 5rem;
-  border-radius: 30px;
-  flex-direction: row;
-  width: 100%;
-  max-width: 1200px;
-  align-items: center;
-  gap: 2rem;
-  justify-content: space-between;
-  h2 {
-    color: #efdee0;
-  }
-  .fields {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    width: 100%;
-    max-width: 1200px;
-  }
-}
-
-@media (max-width: 768px) {
-  .element {
-    flex-direction: column;
-  }
-}
-
 h1 {
   color: #efdee0;
   text-align: center;
   margin: 1rem 2rem;
 }
-
-.send-translate-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;
-  margin: 2rem;
-  &:hover {
-    transform: scale(1.2);
-  }
+app-translate-block {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }

src/app/components/text_list/text_list.component.ts

@@ -1,38 +1,23 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import { Component, Input } from '@angular/core';
+import { TranslateData } from '../../dto/translate_data.dto';
+import { TranslateBlockComponent } from '../translate_block/translate_block.component';
 
 @Component({
   selector: 'app-text-list',
   templateUrl: './text_list.component.html',
   styleUrls: ['./text_list.component.scss'],
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, TranslateBlockComponent],
 })
 export class TextListComponent {
-  constructor(private http: HttpClient) {}
-  private _elements: string[] = [];
-  translated_text: string = '';
-  @Input() set elements(el: string[]) {
-    this._elements = el;
+  elements_data: TranslateData[] = [];
+  @Input() set elements(el: TranslateData[]) {
+    this.elements_data = el;
+    localStorage.setItem('translations', JSON.stringify(this.elements_data));
   }
 
   get elements() {
-    return this._elements;
-  }
-  autoScroll($event: Event) {
-    const target = $event.target as HTMLTextAreaElement;
-    target.style.height = '3rem';
-    target.style.height = target.scrollHeight + 'px';
-  }
-
-  sendToTranslate($text: string) {
-    $text = encodeURIComponent($text);
-    console.log(this.elements);
-
-    //TODO: говно какое-та не хочет отправлять целиком
-    this.http
-      .get(`https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=ru&dt=t&q=` + $text)
-      .subscribe({ next: (data: any) => (this.translated_text = data[0][0][0]) });
+    return this.elements_data;
   }
 }

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

@@ -0,0 +1,18 @@
+<div class="element">
+  <h2>{{ index + 1 }}</h2>
+  <div class="fields">
+    <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)="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

@@ -0,0 +1,39 @@
+.element {
+  display: flex;
+  background-color: #413738;
+  padding: 3rem 5rem;
+  border-radius: 30px;
+  flex-direction: row;
+  width: 100%;
+  max-width: 1200px;
+  align-items: center;
+  gap: 2rem;
+  justify-content: space-between;
+  h2 {
+    color: #efdee0;
+  }
+  .fields {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    max-width: 1200px;
+  }
+}
+
+@media (max-width: 768px) {
+  .element {
+    flex-direction: column;
+  }
+}
+
+.btns {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  padding-inline: 1rem;
+  nwui-button {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,75 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { NWUIButtonComponent, NWUITextAreaComponent } from '@nwaifu-ui';
+import { LocalStorageKeys } from '../../consts';
+import { TranslateData } from '../../dto/translate_data.dto';
+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, NWUIButtonComponent, NWUITextAreaComponent],
+  providers: [TranslateService],
+})
+export class TranslateBlockComponent implements OnInit {
+  @ViewChild('translatedText') translatedText: NWUITextAreaComponent | null = null;
+  @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(LocalStorageKeys.TRANSLATIONS) ?? '[]');
+    if (!data.length) {
+      alert('No data');
+      return;
+    }
+    data[this.index] = this.item;
+    localStorage.setItem('translations', JSON.stringify(data));
+  }
+
+  ngOnInit(): void {
+    this.isEditing = this.item.translated_text === '';
+  }
+
+  constructor(private translateService: TranslateService) {}
+
+  private sendToTranslate(service: ETranslateService = ETranslateService.GOOGLE) {
+    this.translateLoading = true;
+    this.translateService.translate(this.item.english_text, service).subscribe((text) => {
+      if (this.translatedText) if (this.translatedText.ref) this.translatedText.ref.nativeElement.textContent = text;
+      this.item.translated_text = text;
+      this.isEditing = false;
+      this.translateLoading = false;
+      this.saveChanges();
+    });
+  }
+
+  sendToGoogleTranslate() {
+    this.sendToTranslate(ETranslateService.GOOGLE);
+  }
+
+  sendToDeeplTranslate() {
+    this.sendToTranslate(ETranslateService.DEEPL);
+  }
+
+  sendToPromptTranslate() {
+    this.sendToTranslate(ETranslateService.PROMPT);
+  }
+
+  saveTranslate(text: string) {
+    this.isEditing = false;
+    if (this.translatedText) if (this.translatedText.ref) this.translatedText.ref.nativeElement.textContent = '';
+    this.item.translated_text = text;
+    this.saveChanges();
+  }
+  clear() {
+    this.item.translated_text = '';
+    this.isEditing = true;
+    if (this.translatedText) if (this.translatedText.ref) this.translatedText.ref.nativeElement.textContent = '';
+    this.saveChanges();
+  }
+}

src/app/components/upload_btn/upload_btn.component.html

@@ -1,4 +0,0 @@
-<button (click)="fileInput.click()">
-  <span><i class="lni lni-upload"></i> Upload</span>
-  <input type="file" (change)="onChange($event)" #fileInput style="display: none" />
-</button>

src/app/components/upload_btn/upload_btn.component.ts

@@ -1,33 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
-
-@Component({
-  imports: [CommonModule],
-  selector: 'app-upload-btn',
-  styleUrl: './upload_btn.component.scss',
-  templateUrl: './upload_btn.component.html',
-  standalone: true,
-})
-export class UploadBtnComponent {
-  @ViewChild('fileInput') fileInput: ElementRef<HTMLDivElement> | null = null;
-  @Output() fileLoaded = new EventEmitter<string>();
-
-  onChange(event: Event) {
-    if (event.target) {
-      const target = event.target as HTMLInputElement;
-      if (target.files) {
-        const file: File = target.files[0];
-        if (!file.name.endsWith('.nps')) {
-          alert('Only .nps files are allowed');
-          target.value = '';
-          return;
-        }
-        const reader = new FileReader();
-        reader.onload = () => {
-          this.fileLoaded.emit(reader.result as string);
-        };
-        reader.readAsText(file);
-      }
-    }
-  }
-}

src/app/consts.ts

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

src/app/dto/translate_data.dto.ts

@@ -0,0 +1,9 @@
+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/lib/parser.ts

@@ -1,10 +1,15 @@
-export function parse(text: string): string[] {
+import { TranslateData } from '../dto/translate_data.dto';
+
+export function parse(text: string): TranslateData[] {
   const replaced_text = text
     .replace('/<[kK]{1}>/gm', '\n')
     .replace(/(<[^>]*>|\/\/.*)/gm, '')
     .replace(/\s*\n\s*/gm, '\n');
-  return replaced_text
+  const result = replaced_text
     .split('\n')
     .map((line) => line.trim())
-    .filter((line) => line.length > 0);
+    .filter((line) => line.length > 0)
+    .map((line) => ({ english_text: line, translated_text: '' }));
+  console.log(result);
+  return result;
 }

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

@@ -0,0 +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) {}
+
+  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);
+    }
+  }
+}

tsconfig.base.json

@@ -0,0 +1,30 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "rootDir": ".",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "es2022",
+    "module": "esnext",
+    "lib": [
+      "es2020",
+      "dom"
+    ],
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@nwaifu-ui": [
+        "nwaifu-ui/src/index.ts"
+      ]
+    }
+  },
+  "exclude": [
+    "node_modules",
+    "tmp"
+  ]
+}

tsconfig.json

@@ -1,22 +1,5 @@
 {
   "compilerOptions": {
-    "rootDir": ".",
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "target": "es2022",
-    "module": "esnext",
-    "lib": [
-      "es2020",
-      "dom"
-    ],
-    "skipLibCheck": true,
-    "skipDefaultLibCheck": true,
-    "baseUrl": ".",
-    "paths": {},
     "useDefineForClassFields": false,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
@@ -38,15 +21,11 @@
       "path": "./tsconfig.spec.json"
     }
   ],
-  "compileOnSave": false,
-  "exclude": [
-    "node_modules",
-    "tmp"
-  ],
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  }
-}
+  },
+  "extends": "./tsconfig.base.json"
+}