fix frontend custom unit

src-tauri/cabr2_types/src/lib.rs

@@ -65,7 +65,7 @@ pub struct Amount {
 }
 
 #[derive(Debug, Deserialize, Serialize)]
-#[serde(rename_all = "UPPERCASE")]
+#[serde(rename_all = "UPPERCASE", tag = "type", content = "name")]
 pub enum Unit {
   Liter,
   Milliliter,

src/app/@core/models/substances.model.ts

@@ -106,19 +106,20 @@ export interface Source {
 
 export interface Amount {
   value: string;
-  unit: Unit | CustomUnit;
+  unit: Unit;
 }
 
-export interface GroupMapping {
-  viewValue: string;
-  unitMappings: Unit[];
+export interface Unit {
+  type: UnitType;
+  name?: string;
 }
 
-export interface CustomUnit {
-  readonly name: string;
+export interface GroupMapping {
+  viewValue: string;
+  unitMappings: UnitType[];
 }
 
-export enum Unit {
+export enum UnitType {
   LITER = 'LITER',
   MILLILITER = 'MILLILITER',
   MICROLITER = 'MICROLITER',
@@ -149,39 +150,47 @@ export enum Unit {
   FAHRENHEIT = 'FAHRENHEIT',
 }
 
-const unitMapping = new Map<Unit, string>([
-  [Unit.LITER, 'l'],
-  [Unit.MILLILITER, 'ml'],
-  [Unit.MICROLITER, 'µl'],
-  [Unit.GRAM, 'g'],
-  [Unit.MILLIGRAM, 'mg'],
-  [Unit.MICROGRAM, 'µg'],
-  [Unit.MOL, 'mol'],
-  [Unit.MILLIMOL, 'mmol'],
-  [Unit.PIECES, 'pcs.'],
+const unitMapping = new Map<UnitType, string>([
+  [UnitType.LITER, 'l'],
+  [UnitType.MILLILITER, 'ml'],
+  [UnitType.MICROLITER, 'µl'],
+  [UnitType.GRAM, 'g'],
+  [UnitType.MILLIGRAM, 'mg'],
+  [UnitType.MICROGRAM, 'µg'],
+  [UnitType.MOL, 'mol'],
+  [UnitType.MILLIMOL, 'mmol'],
+  [UnitType.PIECES, 'pcs.'],
 
-  [Unit.SOLUTION_RELATIVE, '% (v/v)'],
-  [Unit.SOLUTION_MOL, 'mol/l'],
-  [Unit.SOLUTION_MILLIMOL, 'mmol/l'],
-  [Unit.SOLUTION_MICROMOL, 'µmol/l'],
-  [Unit.SOLUTION_GRAM, 'g/l'],
-  [Unit.SOLUTION_MILLIGRAM, 'mg/l'],
+  [UnitType.SOLUTION_RELATIVE, '% (v/v)'],
+  [UnitType.SOLUTION_MOL, 'mol/l'],
+  [UnitType.SOLUTION_MILLIMOL, 'mmol/l'],
+  [UnitType.SOLUTION_MICROMOL, 'µmol/l'],
+  [UnitType.SOLUTION_GRAM, 'g/l'],
+  [UnitType.SOLUTION_MILLIGRAM, 'mg/l'],
 
-  [Unit.CUSTOM, 'custom'],
+  [UnitType.CUSTOM, 'custom'],
 
-  [Unit.GRAM_PER_MOL, 'g/mol'],
+  [UnitType.GRAM_PER_MOL, 'g/mol'],
 
-  [Unit.MILLIGRAM_PER_KILOGRAM, 'mg/kg'],
-  [Unit.MILLIGRAM_PER_LITER, 'mg/l'],
+  [UnitType.MILLIGRAM_PER_KILOGRAM, 'mg/kg'],
+  [UnitType.MILLIGRAM_PER_LITER, 'mg/l'],
 
-  [Unit.PARTS_PER_MILLION, 'ppm'],
+  [UnitType.PARTS_PER_MILLION, 'ppm'],
 
-  [Unit.CELSIUS, '°C'],
-  [Unit.FAHRENHEIT, 'F'],
+  [UnitType.CELSIUS, '°C'],
+  [UnitType.FAHRENHEIT, 'F'],
 ]);
 
 const getViewValue = (unit: Unit): string => {
-  const value = unitMapping.get(unit);
+  if (unit.type === UnitType.CUSTOM) {
+    return unit.name ?? '';
+  }
+
+  return getViewName(unit);
+};
+
+const getViewName = (unit: Unit): string => {
+  const value = unitMapping.get(unit.type);
 
   if (value === undefined) {
     throw Error('unknown unit');
@@ -192,45 +201,35 @@ const getViewValue = (unit: Unit): string => {
 
 class UnitGroups {
   public readonly substanceUnits = [
-    Unit.GRAM,
-    Unit.MILLIGRAM,
-    Unit.MICROGRAM,
-    Unit.LITER,
-    Unit.MILLILITER,
-    Unit.MICROLITER,
-    Unit.MOL,
-    Unit.MILLIMOL,
-    Unit.PIECES,
-    // Unit.CUSTOM,
+    UnitType.GRAM,
+    UnitType.MILLIGRAM,
+    UnitType.MICROGRAM,
+    UnitType.LITER,
+    UnitType.MILLILITER,
+    UnitType.MICROLITER,
+    UnitType.MOL,
+    UnitType.MILLIMOL,
+    UnitType.PIECES,
   ];
   public readonly solutionUnits = [
-    Unit.SOLUTION_MOL,
-    Unit.SOLUTION_MILLIMOL,
-    Unit.SOLUTION_MICROMOL,
-    Unit.SOLUTION_GRAM,
-    Unit.SOLUTION_MILLIGRAM,
-    // Unit.CUSTOM,
-  ];
-  public readonly temperatureUnits = [
-    Unit.CELSIUS,
-    Unit.FAHRENHEIT,
-    // Unit.CUSTOM,
-  ];
-  public readonly lethalUnits = [
-    Unit.MILLIGRAM_PER_KILOGRAM,
-    Unit.MILLIGRAM_PER_LITER,
-    // Unit.CUSTOM,
+    UnitType.SOLUTION_MOL,
+    UnitType.SOLUTION_MILLIMOL,
+    UnitType.SOLUTION_MICROMOL,
+    UnitType.SOLUTION_GRAM,
+    UnitType.SOLUTION_MILLIGRAM,
   ];
+  public readonly temperatureUnits = [UnitType.CELSIUS, UnitType.FAHRENHEIT];
+  public readonly lethalUnits = [UnitType.MILLIGRAM_PER_KILOGRAM, UnitType.MILLIGRAM_PER_LITER];
   public readonly defaultUnitGroups: GroupMapping[] = [
     { viewValue: 'rawSubstance', unitMappings: this.substanceUnits },
     { viewValue: 'solution', unitMappings: this.solutionUnits },
-    { viewValue: 'custom', unitMappings: [Unit.CUSTOM] },
+    { viewValue: 'custom', unitMappings: [UnitType.CUSTOM] },
   ];
 }
 
 const unitGroups = new UnitGroups();
 
-export { unitMapping, unitGroups, getViewValue, modifiedOrOriginal };
+export { unitMapping, unitGroups, getViewValue, getViewName, modifiedOrOriginal };
 
 // these are needed to create new objects every time and don't copy a reference
 // because otherwise every field would reference the same values

src/app/components/edit-substance-data/edit-substance-data.component.html

@@ -111,7 +111,7 @@
           </mat-form-field>
           <mat-form-field *ngIf="customUnitVisible">
             <mat-label>{{ t('substance.customUnit') }}</mat-label>
-            <input matInput />
+            <input matInput formControlName="unitName" />
           </mat-form-field>
         </div>
       </mat-card>

src/app/components/edit-substance-data/edit-substance-data.component.ts

@@ -7,11 +7,11 @@ import { translate } from '@ngneat/transloco';
 import {
   Amount,
   Data,
-  getViewValue,
+  getViewName,
   modifiedOrOriginal,
   SubstanceData,
-  Unit,
   unitGroups,
+  UnitType,
 } from '../../@core/models/substances.model';
 import { compareArrays } from '../../@core/utils/compare';
 import { GlobalModel } from '../../@core/models/global.model';
@@ -32,7 +32,7 @@ export class EditSubstanceDataComponent implements OnInit, OnDestroy {
 
   addPPhraseHover = false;
 
-  unit = Unit;
+  unit = UnitType;
 
   unitGroups = unitGroups;
 
@@ -51,8 +51,8 @@ export class EditSubstanceDataComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.customSubscription = this.amount.get('unit')?.valueChanges.subscribe((value: Unit) => {
-      this.customUnitVisible = value === Unit.CUSTOM;
+    this.customSubscription = this.amount.get('unit')?.valueChanges.subscribe((value: UnitType) => {
+      this.customUnitVisible = value === UnitType.CUSTOM;
     });
   }
 
@@ -61,7 +61,14 @@ export class EditSubstanceDataComponent implements OnInit, OnDestroy {
   }
 
   initControls(): FormGroup {
-    const amount = this.data.amount ?? { value: '', unit: Unit.GRAM };
+    let amount;
+
+    if (this.data.amount) {
+      const a = this.data.amount;
+      amount = { value: a.value, unit: a.unit.type, unitName: a.unit.name ?? '' };
+    } else {
+      amount = { value: '', unit: UnitType.GRAM, unitName: '' };
+    }
 
     const group = this.formBuilder.group({
       name: [modifiedOrOriginal(this.data.name), Validators.required],
@@ -81,12 +88,13 @@ export class EditSubstanceDataComponent implements OnInit, OnDestroy {
       symbols: this.formBuilder.array(modifiedOrOriginal(this.data.symbols)),
       lethalDose: modifiedOrOriginal(this.data.lethalDose) ?? '',
       mak: modifiedOrOriginal(this.data.mak) ?? '',
-      amount: this.formBuilder.group({
-        value: amount.value,
-        unit: amount.unit,
-      }),
+      amount: this.formBuilder.group(amount),
     });
 
+    if (amount.unit === UnitType.CUSTOM) {
+      this.customUnitVisible = true;
+    }
+
     return group;
   }
 
@@ -159,8 +167,8 @@ export class EditSubstanceDataComponent implements OnInit, OnDestroy {
     formArray.markAllAsTouched();
   }
 
-  localizeUnit(unit: Unit): string {
-    const name = getViewValue(unit);
+  localizeUnit(unit: UnitType): string {
+    const name = getViewName({ type: unit });
     const localizedName = translate<any>('units')[name];
 
     if (localizedName) {
@@ -219,7 +227,7 @@ export class EditSubstanceDataComponent implements OnInit, OnDestroy {
       signalWord: this.data.signalWord.originalData ?? '',
       lethalDose: this.data.lethalDose.originalData ?? '',
       mak: this.data.mak.originalData ?? '',
-      amount: { value: '', unit: Unit.GRAM },
+      amount: { value: '', unit: UnitType.GRAM },
       hPhrases: this.data.hPhrases.originalData.map((phrase) => ({
         hNumber: phrase[0],
         hPhrase: phrase[1],
@@ -305,7 +313,18 @@ export class EditSubstanceDataComponent implements OnInit, OnDestroy {
   private evaluateAmount(): Amount | undefined {
     if (this.amount.dirty) {
       const value = this.amount.get('value')?.value;
-      return value ? { value, unit: this.amount.get('unit')?.value } : undefined;
+
+      if (!value) {
+        return undefined;
+      }
+
+      const unit = this.amount.get('unit')?.value;
+
+      if ((unit as UnitType) === UnitType.CUSTOM) {
+        return { value, unit: { type: unit, name: this.amount.get('unitName')?.value } };
+      }
+
+      return { value, unit: { type: unit } };
     } else {
       return this.data.amount;
     }

src/app/components/preview/preview.component.html

@@ -64,7 +64,7 @@ <h2 class="mat-h2 preview-text">
         </td>
         <td>{{ getPhraseNumber(data.hPhrases).join(', ') }}<br />{{ getPhraseNumber(data.pPhrases).join(', ') }}</td>
         <td>{{ data.mak }}<br />{{ data.waterHazardClass }}</td>
-        <td>{{ data.amount?.value }} {{ unitToString(data.amount?.unit) }}</td>
+        <td>{{ data.amount?.value }} {{ data.amount ? getViewValue(data.amount.unit) : '' }}</td>
       </tr>
 
       <ng-container *transloco="let t; read: 'preview'">

src/app/components/preview/preview.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { map } from 'rxjs/operators';
 
-import { Amount, CustomUnit, Unit, unitMapping } from '../../@core/models/substances.model';
+import { Amount, getViewValue } from '../../@core/models/substances.model';
 import { GlobalModel } from '../../@core/models/global.model';
 import { Header } from '../../@core/interfaces/Header';
 import { IProviderService } from '../../@core/services/provider/provider.interface';
@@ -38,6 +38,8 @@ export class PreviewComponent implements OnInit {
 
   sources: Set<string> = new Set();
 
+  getViewValue = getViewValue;
+
   constructor(public globals: GlobalModel, private providerService: IProviderService) {
     this.providerService.providerMappingsObservable.subscribe((providers) => (this.providerMapping = providers));
   }
@@ -115,23 +117,4 @@ export class PreviewComponent implements OnInit {
   getProviders(): string {
     return Array.from(this.sources.values()).join(', ');
   }
-
-  unitToString(unit?: Unit | CustomUnit): string {
-    // if unit is undefined the type is object
-    if (typeof unit === 'object') {
-      if (unit !== null) {
-        return (unit as CustomUnit).name;
-      }
-      return '';
-    }
-
-    // unit must be defined because of the check above
-    const name = unitMapping.get(unit as Unit);
-    if (name) {
-      return name;
-    }
-
-    // should never occur, just for completeness
-    throw new Error(`unknown unit: ${unit}`);
-  }
 }