Merge remote-tracking branch 'origin/chemical_registration_form' into…

… precision_new_with_submission_form

# Conflicts:
#	src/app/core/substance-form/substance-form.component.ts

src/app/core/config/nav-items.constant.ts

@@ -10,6 +10,11 @@ export const navItems: Array<NavItem> = [
                 path: 'substances/register/chemical',
                 order: 10
             },
+          {
+                display: 'Chemical (Simplified)',
+                path: 'substances/register/chemical-simplified',
+                order: 10
+            },
             {
                 display: 'Protein',
                 path: 'substances/register/protein',

src/app/core/substance-form/base-classes/substance-form-base-filtered-list.ts

@@ -19,7 +19,6 @@ export class SubstanceCardBaseFilteredList<T> extends SubstanceFormBase {
     }
 
     pageChange(pageEvent?: PageEvent, analyticsEventCategory?: string): void {
-
         if (pageEvent != null) {
 
             let eventAction;

src/app/core/substance-form/cv-input/cv-input.component.html

@@ -4,7 +4,7 @@
   <mat-label>{{title}} {{required? ' *':''}}</mat-label>
   <mat-select [(ngModel)]="privateMod" name="term" (ngModelChange)="select($event)" [disabled] = "disable">
     <mat-option [value] = 'null' *ngIf = "privateMod" ><span class = 'deselect' >Clear selection</span></mat-option>
-  <mat-option *ngFor="let term of vocabulary" [value]=" term.value">
+  <mat-option *ngFor="let term of vocabulary" [value]="term.value">
     {{term.display}}
   </mat-option>
   <mat-option *ngIf = "privateMod && !inCV(  vocabulary, privateMod) && privateMod !== ''"

src/app/core/substance-form/cv-input/cv-input.component.ts

@@ -48,7 +48,8 @@ export class CvInputComponent implements OnInit, OnDestroy {
     if (this.vocabulary) {
       this.vocabulary = this.addOtherOption(this.vocabulary, this.privateMod);
     } else if (this.key) {
-      this.dictionary = this.dictionaryService.getDictionaryRow(this.key);
+      this.dictionary = this.
+      dictionaryService.getDictionaryRow(this.key);
       if (!this.title) {
         this.title = this.dictionary.fieldName;
       }
@@ -126,10 +127,10 @@ export class CvInputComponent implements OnInit, OnDestroy {
 
   openDialog(vocab: any, term: string): void {
     let thisy = window.pageYOffset;
-    window.scroll({ 
-      top: 0, 
-      left: 0, 
-      behavior: 'auto' 
+    window.scroll({
+      top: 0,
+      left: 0,
+      behavior: 'auto'
 });
 
    // this.overlayContainer = this.overlayContainerService.getContainerElement();
@@ -143,10 +144,10 @@ export class CvInputComponent implements OnInit, OnDestroy {
       });
       this.overlayContainer.style.zIndex = '1005';
     const dialogSubscription = dialogRef.afterClosed().subscribe(response => {
-      window.scroll({ 
-        top: thisy, 
-        left: 0, 
-        behavior: 'auto' 
+      window.scroll({
+        top: thisy,
+        left: 0,
+        behavior: 'auto'
   });
       this.overlayContainer.style.zIndex = null;
       if (response ) {
@@ -164,10 +165,10 @@ export class CvInputComponent implements OnInit, OnDestroy {
   //    this.overlayContainer.style.zIndex = '1002';
     const dialogSubscription = dialogRef.afterClosed().subscribe(response => {
    //   this.overlayContainer.style.zIndex = null;
-   window.scroll({ 
-    top: thisy, 
-    left: 0, 
-    behavior: 'auto' 
+   window.scroll({
+    top: thisy,
+    left: 0,
+    behavior: 'auto'
 });
       if (response ) {
         this.privateMod = response.display;

src/app/core/substance-form/form-sections.constant.ts

@@ -2,13 +2,16 @@ export const formSections: { [substanceType: string]: Array<string> } = {
     chemical: [
         'substance-form-definition',
         'substance-form-names',
+        'substance-form-simplified-names',
         'substance-form-structure',
         'substance-form-moieties',
         'substance-form-codes-card',
+        'substance-form-simplified-codes-card',
         'substance-form-relationships',
         'substance-form-notes',
         'substance-form-properties',
         'substance-form-references',
+        'substance-form-simplified-references',
         'substance-form-change-reason'
     ],
   protein: [
@@ -140,3 +143,4 @@ export const formSections: { [substanceType: string]: Array<string> } = {
     'substance-form-ssg4m-process',
   ]
 };
+

src/app/core/substance-form/references/apply-reference/apply-reference.component.ts

@@ -55,8 +55,6 @@ export class ApplyReferenceComponent implements OnInit, OnDestroy {
       }
     });
     this.substanceFormReferencesService.emitReferencesUpdate();
-
-
   }
 
   applyToAllWithoutRef(): void {
@@ -108,7 +106,6 @@ export class ApplyReferenceComponent implements OnInit, OnDestroy {
         }
       }
     });
-
     }
 
   applyToAllDomainWithoutRef(domainKey: string): void {

src/app/core/substance-form/references/substance-form-references.module.ts

@@ -1,16 +1,17 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SubstanceFormReferencesCardComponent } from './substance-form-references-card.component';
-import { DynamicComponentLoaderModule } from '../../dynamic-component-loader/dynamic-component-loader.module';
+import { DynamicComponentLoaderModule } from '@gsrs-core/dynamic-component-loader';
 import { SubstanceFormModule } from '../substance-form.module';
 import { MatDividerModule } from '@angular/material/divider';
-import { ScrollToModule } from '../../scroll-to/scroll-to.module';
+import { ScrollToModule } from '@gsrs-core/scroll-to';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatInputModule } from '@angular/material/input';
+import {ReferenceFormComponent} from "./reference-form.component";
 
 @NgModule({
   imports: [
@@ -27,8 +28,12 @@ import { MatInputModule } from '@angular/material/input';
     MatPaginatorModule,
     MatInputModule
   ],
+  exports:[
+    ReferenceFormComponent,
+  ],
   declarations: [
     SubstanceFormReferencesCardComponent,
+    ReferenceFormComponent
   ]
 })
 export class SubstanceFormReferencesModule { }

src/app/core/substance-form/simplified-codes/code-form.component.html

@@ -0,0 +1,29 @@
+<div class="code-form-container">
+  <div *ngIf="code.$$deletedCode" class="notification-backdrop">
+    Deleted&nbsp;
+    <button mat-icon-button matTooltip="Undo" (click)="undoDelete()">
+      <mat-icon svgIcon="undo"></mat-icon>
+    </button>
+  </div>
+
+  <div class="form-row">
+    <div class="delete-container">
+      <button mat-icon-button matTooltip="Delete code" (click)="deleteCode()">
+        <mat-icon svgIcon="delete_forever"></mat-icon>
+      </button>
+    </div>
+
+    <app-cv-input required='true' class="code-system" key='Code System' title="Code System" name="code"
+                  [model]="code.codeSystem" (valueChange)="setCodeSystemType($event)">
+    </app-cv-input>
+
+    <mat-form-field class="code">
+      <input matInput placeholder="Code" [(ngModel)]="code.code" required name="code"/>
+    </mat-form-field>
+
+    <div>
+      <app-access-manager (accessOut)="updateAccess($event)" [access]="code.access">
+      </app-access-manager>
+    </div>
+  </div>
+</div>

src/app/core/substance-form/simplified-codes/code-form.component.scss

@@ -0,0 +1,73 @@
+.code-form-container {
+  padding: 10px 3px 4px 3px;
+    position: relative;
+}
+
+.collapse {
+  padding: 10px 5px 6px 5px;
+    position: relative;
+}
+
+.resolve {
+  padding: 0 20px 20px 0;
+  color: var(--primary-color);
+}
+
+.notification-backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    z-index: 10;
+    background-color: var(--notif-backdrop-bg-color);
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+    font-weight: bold;
+    color: var(--notif-backdrop-color);
+}
+
+.form-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    align-items: flex-end;
+
+    .delete-container {
+        padding: 0 10px 8px 0;
+    }
+
+    .code-system,.code{
+        flex-grow: 1;
+        padding-right: 15px;
+    }
+
+    .code-text, .url {
+        flex-grow: 1;
+    }
+}
+
+.key-value-pair {
+    display: flex;
+    flex-direction: column;
+    align-self: flex-start;
+
+    .key {
+        font-size: 11px;
+        padding-bottom: 3.5px;
+        line-height: 11px;
+        color: var(--dark-label-color);
+        font-weight: 400;
+        font-family: Roboto, "Helvetica Neue", sans-serif;
+    }
+
+    .value {
+        font-size: 15.5px;
+    }
+}
+
+.references-container {
+    width: 100%;
+}

src/app/core/substance-form/simplified-codes/code-form.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CodeFormComponent } from './code-form.component';
+
+describe('CodeFormComponent', () => {
+  let component: CodeFormComponent;
+  let fixture: ComponentFixture<CodeFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CodeFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CodeFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/substance-form/simplified-codes/code-form.component.ts

@@ -0,0 +1,88 @@
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
+import { SubstanceCode } from '@gsrs-core/substance';
+import { ControlledVocabularyService } from '@gsrs-core/controlled-vocabulary';
+import { VocabularyTerm } from '@gsrs-core/controlled-vocabulary';
+import { UtilsService } from '@gsrs-core/utils';
+
+@Component({
+  selector: 'app-code-form',
+  templateUrl: './code-form.component.html',
+  styleUrls: ['./code-form.component.scss']
+})
+export class CodeFormComponent implements OnInit {
+  private privateCode: SubstanceCode;
+  @Output() codeDeleted = new EventEmitter<SubstanceCode>();
+  codeSystemList: Array<VocabularyTerm> = [];
+  codeSystemDictionary: { [termValue: string]: VocabularyTerm };
+  codeSystemType: string;
+  codeTypeList: Array<VocabularyTerm> = [];
+  deleteTimer: any;
+
+  constructor(
+    private cvService: ControlledVocabularyService,
+    private utilsService: UtilsService
+  ) { }
+
+  ngOnInit() {
+    this.getVocabularies();
+
+    // Protected access by default.
+    this.privateCode.access = ["protected"]
+  }
+
+  @Input()
+  set code(code: SubstanceCode) {
+    this.privateCode = code;
+  }
+
+  get code(): SubstanceCode {
+    return this.privateCode;
+  }
+
+  getVocabularies(): void {
+    this.cvService.getDomainVocabulary('CODE_SYSTEM', 'CODE_TYPE').subscribe(response => {
+      this.codeSystemList = response['CODE_SYSTEM'].list;
+      this.codeSystemDictionary = response['CODE_SYSTEM'].dictionary;
+      this.setCodeSystemType();
+      this.codeTypeList = response['CODE_TYPE'].list;
+    });
+  }
+
+  deleteCode(): void {
+    this.privateCode.$$deletedCode = this.utilsService.newUUID();
+    if (!this.privateCode.codeSystem
+      && !this.privateCode.type
+      && !this.privateCode.code
+    ) {
+      this.deleteTimer = setTimeout(() => {
+        this.codeDeleted.emit(this.privateCode);
+      }, 2000);
+    }
+  }
+
+  trimWhitespace(value) {
+    this.code.url = value;
+    this.privateCode.url = this.privateCode.url.replace(/[\u200A|\u2009|\u2006|\u2008]/g, ' ').trim();
+    this.privateCode.url = value.trim().trim().trim();
+  }
+
+  undoDelete(): void {
+    clearTimeout(this.deleteTimer);
+    delete this.privateCode.$$deletedCode;
+  }
+
+  setCodeSystemType(event?: any): void {
+    if (event) {
+      this.code.codeSystem = event;
+    }
+    if (this.privateCode != null && this.codeSystemDictionary != null) {
+      this.codeSystemType = this.codeSystemDictionary[this.privateCode.codeSystem]
+        && this.codeSystemDictionary[this.privateCode.codeSystem].systemCategory || '';
+    }
+  }
+
+  updateAccess(access: Array<string>): void {
+    this.code.access = access;
+  }
+
+}

src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.html

@@ -0,0 +1,18 @@
+<div class="flex-row">
+  <mat-form-field [floatLabel]="'never'" class="search" *ngIf="codes && codes.length > pageSize">
+    <input matInput placeholder="Search" [formControl]="searchControl">
+  </mat-form-field>
+  <span class="middle-fill"></span>
+</div>
+
+<mat-paginator *ngIf="codes && codes.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="10" showFirstLastButtons="true"
+    (page)="pageChange($event, analyticsEventCategory)" [pageSizeOptions]="[5, 10, 25, 100]">
+  </mat-paginator>
+<div class="code" *ngFor="let code of paged; last as isLast; index as index" appScrollToTarget
+  [id]="'substance-code-' + index">
+  <app-code-form [code]="code" (codeDeleted)="deleteCode($event)" [show] = "expanded"></app-code-form>
+  <mat-divider class="form-divider" [inset]="true" *ngIf="!isLast"></mat-divider>
+</div>
+<mat-paginator *ngIf="codes && codes.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="10" showFirstLastButtons="true"
+  (page)="pageChange($event, analyticsEventCategory)" [pageSizeOptions]="[5, 10, 25, 100]">
+</mat-paginator>