From 858cab382d53c2a4ee977c6b5828bd8b7fb0a97f Mon Sep 17 00:00:00 2001
From: Joshua McMichael <jmcmichael@users.noreply.github.com>
Date: Thu, 5 Oct 2023 12:55:05 -0500
Subject: [PATCH] refactored variant-submit form to use forms2 fields

---
 .../variant-submit/variant-submit.form.html   |  59 ++---
 .../variant-submit/variant-submit.form.less   |   4 +
 .../variant-submit/variant-submit.form.ts     | 242 ++++++++----------
 .../variant-submit/variant-submit.module.ts   |  60 +----
 4 files changed, 150 insertions(+), 215 deletions(-)
 create mode 100644 client/src/app/forms/variant-submit/variant-submit.form.less

diff --git a/client/src/app/forms/variant-submit/variant-submit.form.html b/client/src/app/forms/variant-submit/variant-submit.form.html
index ceb89355a..554bee066 100644
--- a/client/src/app/forms/variant-submit/variant-submit.form.html
+++ b/client/src/app/forms/variant-submit/variant-submit.form.html
@@ -1,49 +1,30 @@
-<nz-spin
-  nzTip="Submitting"
-  [nzSpinning]="this.loading">
+<ng-container *ngIf="!(newVariant$ | ngrxPush); else variantCreated">
   <form
     nz-form
-    [formGroup]="formGroup"
-    style="width: 400px"
-    (ngSubmit)="submitVariant(formModel)"
-    nzLayout="vertical">
-    <ng-container *ngTemplateOutlet="formMessages"></ng-container>
-
+    [nzLayout]="layout"
+    [formGroup]="form">
     <formly-form
-      [form]="formGroup"
-      [fields]="formFields"
-      [model]="formModel"
-      [options]="formOptions"
-      (modelChange)="onFormModelChange($event)">
+      [form]="form"
+      [fields]="config"
+      [model]="model"
+      [options]="options"
+      (modelChange)="modelChange($event)">
     </formly-form>
   </form>
-</nz-spin>
-
-<ng-template #formMessages>
-  <nz-form-item *ngIf="this.errorMessages.length > 0">
-    <cvc-form-errors-alert [errors]="this.errorMessages">
-    </cvc-form-errors-alert>
-  </nz-form-item>
-  <ng-container *ngIf="this.success">
+</ng-container>
+<ng-template #variantCreated>
+  <ng-container *ngIf="newVariant$ | ngrxPush as variant">
     <nz-alert
       nzType="success"
-      [nzMessage]="this.isNew ? 'Variant Created' : 'Variant Already Exists'"
-      [nzDescription]="successMessage"
-      nzShowIcon></nz-alert>
-    <ng-template
-      #successMessage
-      nzSize="small">
-      <p>
-        View <a routerLink="/variants/{{this.newId}}/summary">its details</a>.
-      </p>
+      nzShowIcon
+      [nzMessage]="successMessage"
+      [nzDescription]="successDescription"></nz-alert>
+    <ng-template #successMessage>
+      New Variant {{ variant.name }} added.
+    </ng-template>
+    <ng-template #successDescription>
+      View its
+      <a [routerLink]="['/variants', variant.id, 'summary']">details here</a>.
     </ng-template>
   </ng-container>
 </ng-template>
-
-<!-- <div nz-row>
-    <div nz-col
-      nzSpan="24">
-      <ngx-json-viewer *ngIf="formModel"
-        [json]="formModel"></ngx-json-viewer>
-    </div>
-  </div> -->
diff --git a/client/src/app/forms/variant-submit/variant-submit.form.less b/client/src/app/forms/variant-submit/variant-submit.form.less
new file mode 100644
index 000000000..fe8bbc5f4
--- /dev/null
+++ b/client/src/app/forms/variant-submit/variant-submit.form.less
@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  width: 100%;
+}
diff --git a/client/src/app/forms/variant-submit/variant-submit.form.ts b/client/src/app/forms/variant-submit/variant-submit.form.ts
index 1c54e46b2..a23ebb87c 100644
--- a/client/src/app/forms/variant-submit/variant-submit.form.ts
+++ b/client/src/app/forms/variant-submit/variant-submit.form.ts
@@ -1,109 +1,108 @@
 import {
+  ChangeDetectionStrategy,
   Component,
   EventEmitter,
-  Input,
   OnDestroy,
   OnInit,
   Output,
 } from '@angular/core'
 import { UntypedFormGroup } from '@angular/forms'
-import {
-  AddVariantGQL,
-  AddVariantMutation,
-  AddVariantMutationVariables,
-  Maybe,
-} from '@app/generated/civic.apollo'
-import * as fmt from '@app/forms/config/utilities/input-formatters'
+import { CvcFieldGridWrapperConfig } from '@app/forms2/wrappers/field-grid/field-grid.wrapper'
+import { CvcVariantSelectFieldOption } from '@app/forms2/types/variant-select/variant-select.type'
+import { Maybe, Variant } from '@app/generated/civic.apollo'
 import { FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core'
-import { Subject } from 'rxjs'
-import { EvidenceState } from '@app/forms/config/states/evidence.state'
-import { NetworkErrorsService } from '@app/core/services/network-errors.service'
-import { MutatorWithState } from '@app/core/utilities/mutation-state-wrapper'
+import { BehaviorSubject, Subject } from 'rxjs'
 import {
   FormGene,
   FormMolecularProfile,
   FormVariant,
 } from '../forms.interfaces'
-import { ActivatedRoute } from '@angular/router'
-import { takeUntil } from 'rxjs/operators'
+import { NzFormLayoutType } from 'ng-zorro-antd/form'
+import { EntityFieldSubjectMap } from '@app/forms2/states/base.state'
+import { Apollo, gql } from 'apollo-angular'
 
-interface FormModel {
-  fields: {
-    gene: FormGene[]
-    variant: FormVariant[]
-  }
+type VariantSubmitModel = {
+  geneId?: number
+  variantId?: number
 }
 
-export interface SelectedVariant {
-  variantId: number
-  molecularProfile: FormMolecularProfile
+type VariantSubmitState = {
+  formLayout: NzFormLayoutType
+  fields: EntityFieldSubjectMap
 }
 
+// interface FormModel {
+//   fields: {
+//     gene: FormGene[]
+//     variant: FormVariant[]
+//   }
+// }
+
+// export interface SelectedVariant {
+//   variantId: number
+//   molecularProfile: FormMolecularProfile
+// }
+
 @Component({
   selector: 'cvc-variant-submit-form',
   templateUrl: './variant-submit.form.html',
+  styleUrls: ['./variant-submit.form.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class VariantSubmitForm implements OnDestroy, OnInit {
-  @Output() onVariantSelected = new EventEmitter<SelectedVariant>()
-  @Input() allowCreate: boolean = true
-
-  private destroy$ = new Subject<void>()
-
-  formModel!: FormModel
-  formGroup: UntypedFormGroup = new UntypedFormGroup({})
-  formFields: FormlyFieldConfig[] = []
-  formOptions: FormlyFormOptions = { formState: new EvidenceState() }
-
-  submitVariantMutator: MutatorWithState<
-    AddVariantGQL,
-    AddVariantMutation,
-    AddVariantMutationVariables
-  >
-
-  submittedGeneId: Maybe<number>
-  submittedVariantId: Maybe<number>
-
-  success: boolean = false
-  errorMessages: string[] = []
-  loading: boolean = false
-  newId?: number
-  isNew?: boolean
-
-  constructor(
-    private submitVariantGQL: AddVariantGQL,
-    private networkErrorService: NetworkErrorsService,
-    private route: ActivatedRoute
-  ) {
-    this.submitVariantMutator = new MutatorWithState(networkErrorService)
+export class VariantSubmitForm {
+  @Output() onVariantSelected = new EventEmitter<Variant>()
+
+  newVariant$ = new BehaviorSubject<Maybe<Variant>>(void 0)
+  modelChange$ = new BehaviorSubject<Maybe<VariantSubmitModel>>(undefined)
+  model: VariantSubmitModel
+  form: UntypedFormGroup
+  config: FormlyFieldConfig[]
+  layout: NzFormLayoutType = 'horizontal'
+
+  finderState: VariantSubmitState = {
+    formLayout: this.layout,
+    fields: {
+      geneId$: new BehaviorSubject<Maybe<number>>(undefined),
+      variantId$: new BehaviorSubject<Maybe<number>>(undefined),
+    },
   }
+  options: FormlyFormOptions
+
+  constructor(private apollo: Apollo) {
+    this.form = new UntypedFormGroup({})
+    this.model = { geneId: undefined, variantId: undefined }
+    this.options = { formState: this.finderState }
 
-  ngOnInit() {
-    this.formFields = [
+    this.config = [
       {
-        key: 'fields',
-        wrappers: ['form-container'],
-        templateOptions: {},
+        wrappers: ['field-grid'],
+        props: <CvcFieldGridWrapperConfig>{
+          grid: {
+            cols: 2,
+          },
+        },
         fieldGroup: [
           {
-            key: 'gene',
-            type: 'gene-array',
-            templateOptions: {
-              maxCount: 1,
-              required: true,
-            },
-            validation: {
-              messages: {
-                required: 'Gene is required to select a variant.',
+            key: 'geneId',
+            type: 'gene-select',
+            props: {
+              placeholder: `Select New Variant's Gene`,
+              layout: {
+                showExtra: false,
               },
+              hideLabel: true,
             },
           },
-          {
-            key: 'variant',
-            type: 'variant-array',
-            templateOptions: {
-              required: false,
-              maxCount: 1,
-              allowCreate: this.allowCreate,
+          <CvcVariantSelectFieldOption>{
+            key: 'variantId',
+            type: 'variant-select',
+            props: {
+              placeholder: 'Enter New Variant Name',
+              requireGene: true,
+              layout: {
+                showExtra: false,
+              },
+              hideLabel: true,
             },
           },
         ],
@@ -111,66 +110,49 @@ export class VariantSubmitForm implements OnDestroy, OnInit {
     ]
   }
 
-  submitVariant(model: Maybe<FormModel>): void {
-    let geneId = model?.fields.gene[0].id
-    let name = model?.fields.variant[0].name
-    if (geneId && name) {
-      let input = {
-        geneId: geneId,
-        name: name,
+  modelChange(model: Maybe<VariantSubmitModel>) {
+    if (!model?.variantId) return
+    const variant = this.getSelectedVariant(model.variantId)
+    if (variant) {
+      this.model = {
+        geneId: undefined,
+        variantId: undefined,
       }
+      this.onVariantSelected.next(variant)
+      this.newVariant$.next(variant)
+    }
+  }
 
-      let state = this.submitVariantMutator.mutate(
-        this.submitVariantGQL,
-        input,
-        {},
-        (data) => {
-          let addVariantResult = data.addVariant
-          if (addVariantResult) {
-            this.newId = addVariantResult.variant.id
-            this.isNew = addVariantResult.new
-            this.onVariantSelected.emit({
-              variantId: addVariantResult.variant.id,
-              molecularProfile:
-                addVariantResult.variant.singleVariantMolecularProfile,
-            })
+  getSelectedVariant(variantId: Maybe<number>): Maybe<Variant> {
+    if (!variantId) return
+    const fragment = {
+      id: `Variant:${variantId}`,
+      fragment: gql`
+        fragment VariantSelectQuery on Variant {
+          id
+          name
+          link
+          variantAliases
+          singleVariantMolecularProfileId
+          singleVariantMolecularProfile {
+            id
+            name
+            link
+            molecularProfileAliases
           }
         }
-      )
-
-      state.submitSuccess$.pipe(takeUntil(this.destroy$)).subscribe((res) => {
-        if (res) {
-          this.success = true
-        }
-      })
-
-      state.submitError$.pipe(takeUntil(this.destroy$)).subscribe((errs) => {
-        if (errs) {
-          this.errorMessages = errs
-          this.success = false
-        }
-      })
-
-      state.isSubmitting$
-        .pipe(takeUntil(this.destroy$))
-        .subscribe((loading) => {
-          this.loading = loading
-        })
+      `,
     }
-  }
-
-  onFormModelChange(model: FormModel): void {
-    this.formModel = model
-    if (model.fields.variant && model.fields.variant[0]) {
-      this.onVariantSelected.emit({
-        variantId: model.fields.variant[0].id!,
-        molecularProfile: model.fields.variant[0].singleVariantMolecularProfile,
-      })
+    let variant
+    try {
+      variant = this.apollo.client.readFragment(fragment) as Variant
+    } catch (err) {
+      console.error(err)
     }
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next()
-    this.destroy$.complete()
+    if (!variant) {
+      console.error(`MpFinderForm could not resolve its Variant from the cache`)
+      return
+    }
+    return variant
   }
 }
diff --git a/client/src/app/forms/variant-submit/variant-submit.module.ts b/client/src/app/forms/variant-submit/variant-submit.module.ts
index c1b859b79..7fc6c20ee 100644
--- a/client/src/app/forms/variant-submit/variant-submit.module.ts
+++ b/client/src/app/forms/variant-submit/variant-submit.module.ts
@@ -1,60 +1,28 @@
-import { CommonModule } from '@angular/common'
-import { CvcCommentTextareaTypeModule } from '@app/forms/config/types/comment-textarea/comment-textarea.module'
-import { CvcFormButtonsModule } from '@app/forms/config/components/form-buttons/form-buttons.module'
-import { CvcFormErrorsAlertModule } from '@app/forms/config/components/form-errors-alert/form-errors-alert.module'
-import { CvcFormInfoWrapperModule } from '@app/forms/config/wrappers/form-info/form-info.module'
-import { CvcMultiFieldTypeModule } from '@app/forms/config/types/multi-field/multi-field.module'
-import { CvcTextareaBaseTypeModule } from '../config/types/textarea-base/textarea-base.module'
-import { FormlyModule } from '@ngx-formly/core'
 import { NgModule } from '@angular/core'
-import { NgxJsonViewerModule } from 'ngx-json-viewer'
-import { NzAlertModule } from 'ng-zorro-antd/alert'
-import { NzButtonModule } from 'ng-zorro-antd/button'
+import { CommonModule } from '@angular/common'
 import { NzFormModule } from 'ng-zorro-antd/form'
-import { NzGridModule } from 'ng-zorro-antd/grid'
-import { ReactiveFormsModule } from '@angular/forms'
+import { NzButtonModule } from 'ng-zorro-antd/button'
+import { CvcForms2Module } from '@app/forms2/forms2.module'
+import { NgxJsonViewerModule } from 'ngx-json-viewer'
+import { CvcFormSubmissionStatusDisplayModule } from '@app/forms2/components/form-submission-status-display/form-submission-status-display.module'
 import { RouterModule } from '@angular/router'
-import { CvcGeneArrayTypeModule } from '../config/types/gene-array/gene-array.module'
-import { NzSpinModule } from 'ng-zorro-antd/spin'
-import { CvcFormContainerWrapperModule } from '../config/wrappers/form-container/form-container.module'
-import { CvcCancelButtonModule } from '../config/types/cancel-button/cancel-button.module'
-import { NzCardModule } from 'ng-zorro-antd/card'
-import { NzSpaceModule } from 'ng-zorro-antd/space'
-import { NzTypographyModule } from 'ng-zorro-antd/typography'
 import { VariantSubmitForm } from './variant-submit.form'
-import { CvcSubmitButtonTypeModule } from '../config/types/submit-button/submit-button.module'
-import { CvcVariantInputTypeModule } from '../config/types/variant-input/variant-input.module'
-import { CvcVariantArrayTypeModule } from '../config/types/variant-array/variant-array.module'
+import { LetDirective, PushPipe } from '@ngrx/component'
+import { NzAlertModule } from 'ng-zorro-antd/alert'
 
 @NgModule({
   declarations: [VariantSubmitForm],
   imports: [
     CommonModule,
-    RouterModule,
-    ReactiveFormsModule,
-    NgxJsonViewerModule,
+    PushPipe,
+    LetDirective,
     NzFormModule,
-    NzAlertModule,
-    NzGridModule,
     NzButtonModule,
-    NzSpinModule,
-    NzCardModule,
-    NzSpaceModule,
-    NzTypographyModule,
-    FormlyModule,
-    CvcFormErrorsAlertModule,
-    CvcFormButtonsModule,
-    CvcFormInfoWrapperModule,
-    CvcMultiFieldTypeModule,
-    CvcTextareaBaseTypeModule,
-    CvcCommentTextareaTypeModule,
-    CvcGeneArrayTypeModule,
-    CvcFormContainerWrapperModule,
-    CvcCancelButtonModule,
-    CvcSubmitButtonTypeModule,
-    CvcVariantInputTypeModule,
-    CvcVariantArrayTypeModule,
-    NgxJsonViewerModule,
+    NzAlertModule,
+    RouterModule,
+    CvcForms2Module,
+    CvcFormSubmissionStatusDisplayModule,
+    NgxJsonViewerModule, // debug
   ],
   exports: [VariantSubmitForm],
 })