frontend refactoring (#1701)

Needs a very detailed review from @crapStone closes #1402 closes #1254 Co-authored-by: Epsilon_02 <epsilon_02+codeberg@mailbox.org> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1701 Reviewed-by: crapStone <crapstone@noreply.codeberg.org>
Calciumdibromid · Jan 18, 2023 · 30bd831 · 30bd831
1 parent 9394e6d
commit 30bd831
Show file tree

Hide file tree

Showing 35 changed files with 465 additions and 380 deletions.
diff --git a/frontend/src/app/@core/models/substances.model.ts b/frontend/src/app/@core/models/substances.model.ts
@@ -184,7 +184,7 @@ export interface GroupMapping {
 }
 export interface Amount {
   value: string;
-  type: UnitType;
+  unit: UnitType;
   name?: string;
 }
 
@@ -250,8 +250,8 @@ const unitMapping = new Map<UnitType, string>([
   [UnitType.FAHRENHEIT, 'F'],
 ]);
 
-const getViewName = ({ type }: Pick<Amount, 'type'>): string => {
-  const value = unitMapping.get(type);
+const getViewName = ({ unit }: Pick<Amount, 'unit'>): string => {
+  const value = unitMapping.get(unit);
 
   if (value === undefined) {
     throw Error('unknown unit');
@@ -261,7 +261,7 @@ const getViewName = ({ type }: Pick<Amount, 'type'>): string => {
 };
 
 const getViewValue = (amount: Amount): string => {
-  if (amount.type === UnitType.CUSTOM) {
+  if (amount.unit === UnitType.CUSTOM) {
     return amount.name ?? '';
   }
   return getViewName(amount);

diff --git a/frontend/src/app/@core/services/native/web/browser.service.ts b/frontend/src/app/@core/services/native/web/browser.service.ts
@@ -1,23 +1,26 @@
+import { Inject, Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
-import { Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 
 import * as wasm from 'cabr2_wasm';
-import Logger from 'src/app/@core/utils/logger';
 
 import { INativeService } from '../native.interface';
-
-const logger = new Logger('service.browser');
+import Logger from 'src/app/@core/utils/logger';
 
 wasm.init();
 
 @Injectable()
 export class BrowserService implements INativeService {
-  openUrl(url: string, _?: string): Promise<void> {
-    window.open(url, '_blank');
+  private logger = new Logger(BrowserService.name);
+
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
+  openUrl(url: string): Promise<void> {
+    this.document.open(url, '_blank', 'noopener,noreferrer');
     return Promise.resolve();
   }
 
-  open(_?: any): Observable<File> {
+  open(): Observable<File> {
     const inputField = document.createElement('input');
     inputField.type = 'file';
     inputField.style.display = 'none';
@@ -41,8 +44,8 @@ export class BrowserService implements INativeService {
   }
 
   /** This function should never be used! */
-  promisified<T>(cmd: string, _: any): Observable<T> {
-    logger.error('called inaccessible tauri service: [', cmd, ']');
+  promisified<T>(cmd: string): Observable<T> {
+    this.logger.error('called inaccessible tauri service: [', cmd, ']');
     throw new Error('Method not available.');
   }
 }
diff --git a/frontend/src/app/@core/states/substance-data.state.ts b/frontend/src/app/@core/states/substance-data.state.ts
@@ -2,6 +2,7 @@ import { Action, Selector, State, StateContext } from '@ngxs/store';
 import { append, patch, removeItem, updateItem } from '@ngxs/store/operators';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Injectable } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
 import { translate } from '@ngneat/transloco';
 
 import {
@@ -84,6 +85,11 @@ export class SubstanceDataState {
     return viewData;
   }
 
+  @Selector()
+  static substanceDataSource(state: SubstanceDataStateModel): MatTableDataSource<SubstanceData> {
+    return new MatTableDataSource<SubstanceData>(state.substanceData);
+  }
+
   @Action(FillSubstanceData)
   fillSubstanceData(context: StateContext<SubstanceDataStateModel>, action: FillSubstanceData): void {
     const providers = new Set<string>();

diff --git a/frontend/src/app/@core/types.ts b/frontend/src/app/@core/types.ts
@@ -0,0 +1,5 @@
+import { FormArray, FormControl } from '@angular/forms';
+
+export type StringListForm = {
+  elements: FormArray<FormControl<string>>;
+};
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -41,7 +41,7 @@ export class AppComponent implements OnInit, OnDestroy {
     private readonly store: Store,
     private readonly actions$: Actions,
   ) {
-    initializeCustomIcons(matIconRegistry, domSanitizer);
+    initializeCustomIcons(this.matIconRegistry, this.domSanitizer);
   }
 
   @HostBinding('class')

diff --git a/frontend/src/app/components/alertsnackbar/alertsnackbar.component.ts b/frontend/src/app/components/alertsnackbar/alertsnackbar.component.ts
@@ -18,7 +18,7 @@ export class AlertsnackbarComponent implements OnInit, OnDestroy {
 
   alerts: Alert[] = [];
 
-  constructor(private alertService: AlertService, private snackBar: MatSnackBar) {}
+  constructor(private readonly alertService: AlertService, private readonly snackBar: MatSnackBar) {}
 
   ngOnInit(): void {
     // subscribe to new alert notifications

diff --git a/frontend/src/app/components/bug-report-button/bug-report-button.component.ts b/frontend/src/app/components/bug-report-button/bug-report-button.component.ts
@@ -13,7 +13,7 @@ import { ReportBugComponent } from '../report-bug/report-bug.component';
 export class BugReportButtonComponent implements OnInit {
   PROGRAM_VERSION!: string;
 
-  constructor(private dialog: MatDialog, private config: IConfigService) {}
+  constructor(private readonly dialog: MatDialog, private readonly config: IConfigService) {}
 
   ngOnInit(): void {
     this.config

diff --git a/frontend/src/app/components/consent/consent.component.ts b/frontend/src/app/components/consent/consent.component.ts
@@ -10,8 +10,8 @@ export class ConsentComponent implements OnInit {
   timer = this.data.duration;
 
   constructor(
-    public dialogRef: MatDialogRef<ConsentComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: { duration: number },
+    public readonly dialogRef: MatDialogRef<ConsentComponent>,
+    @Inject(MAT_DIALOG_DATA) public readonly data: { duration: number },
   ) {}
 
   ngOnInit(): void {

diff --git a/frontend/src/app/components/edit-substance-data/edit-substance-data.component.html b/frontend/src/app/components/edit-substance-data/edit-substance-data.component.html
@@ -118,7 +118,7 @@
               </mat-form-field>
               <mat-form-field *ngIf="customUnitVisible">
                 <mat-label>{{ t('substance.customUnit') }}</mat-label>
-                <input matInput formControlName="unitName" />
+                <input matInput formControlName="name" />
               </mat-form-field>
             </div>
           </mat-card-content>
@@ -133,9 +133,9 @@
               <div class="flex" *ngFor="let control of hPhrases.controls; let i = index">
                 <div [formGroupName]="i" class="phrase-grid">
                   <mat-form-field>
-                    <input matInput formControlName="hNumber" [appAutofocus]="true" />
+                    <input matInput formControlName="phraseNumber" [appAutofocus]="true" />
                     <mat-error
-                      *ngIf="hPhrases.at(i).get('hNumber')?.invalid"
+                      *ngIf="hPhrases.at(i).get('phraseNumber')?.invalid"
                       [matTooltip]="t('substance.phraseFormatTooltip', { format: 'Hxxx+Hxxx ...' })"
                       matTooltipPosition="above"
                     >
@@ -146,7 +146,7 @@
                   <mat-form-field class="phrases-form-field">
                     <textarea
                       matInput
-                      formControlName="hPhrase"
+                      formControlName="phrase"
                       cdkTextareaAutosize
                       cdkAutosizeMinRows="1"
                       cdkAutosizeMaxRows="5"
@@ -190,9 +190,9 @@
               <div class="flex" *ngFor="let control of pPhrases.controls; let i = index">
                 <div [formGroupName]="i" class="phrase-grid">
                   <mat-form-field>
-                    <input matInput formControlName="pNumber" [appAutofocus]="true" />
+                    <input matInput formControlName="phraseNumber" [appAutofocus]="true" />
                     <mat-error
-                      *ngIf="pPhrases.at(i).get('pNumber')?.invalid"
+                      *ngIf="pPhrases.at(i).get('phraseNumber')?.invalid"
                       [matTooltip]="t('substance.phraseFormatTooltip', { format: 'Pxxx+Pxxx ...' })"
                       matTooltipPosition="above"
                     >
@@ -203,7 +203,7 @@
                   <mat-form-field class="phrases-form-field">
                     <textarea
                       matInput
-                      formControlName="pPhrase"
+                      formControlName="phrase"
                       cdkTextareaAutosize
                       cdkAutosizeMinRows="1"
                       cdkAutosizeMaxRows="5"