Merge pull request #933 from griffithlab/improved-field-status-styles

form field status display improved

client/src/app/forms/config/evidence-revise/evidence-revise.form.config.ts

@@ -12,7 +12,6 @@ import { CvcSourceSelectFieldOptions } from '@app/forms/types/source-select/sour
 import { CvcTherapySelectFieldOptions } from '@app/forms/types/therapy-select/therapy-select.type'
 import { CvcEntityTypeSelectFieldConfig } from '@app/forms/types/type-select/type-select.type'
 import assignFieldConfigDefaultValues from '@app/forms/utilities/assign-field-default-values'
-import { CvcFieldGridWrapperConfig } from '@app/forms/wrappers/field-grid/field-grid.wrapper'
 import { CvcFormCardWrapperProps } from '@app/forms/wrappers/form-card/form-card.wrapper'
 import { CvcFormLayoutWrapperProps } from '@app/forms/wrappers/form-layout/form-layout.wrapper'
 import { FormlyFieldConfig } from '@ngx-formly/core'

client/src/app/forms/config/evidence-submit/evidence-submit.form.config.ts

@@ -45,7 +45,8 @@ const formFieldConfig: FormlyFieldConfig[] = [
             type: 'molecular-profile-select',
             props: {
               required: true,
-              tooltip: 'A single variant (Simple Molecular Profile) or a combination of variants (Complex Molecular Profile) relevant to the curated evidence.',
+              tooltip:
+                'A single variant (Simple Molecular Profile) or a combination of variants (Complex Molecular Profile) relevant to the curated evidence.',
               watchVariantMolecularProfileId: true,
             },
           },
@@ -143,11 +144,11 @@ const formFieldConfig: FormlyFieldConfig[] = [
             props: {
               label: 'Comment',
               required: false,
-              minLength: 10
+              minLength: 10,
             },
           },
           {
-            type: 'cvc-cancel-button'
+            type: 'cvc-cancel-button',
           },
           {
             key: 'organizationId',

client/src/app/forms/mixins/entity-select-field.mixin.ts

@@ -237,10 +237,9 @@ export function EntitySelectField<
           })
         ) // end this.response$
 
-        this.onOpenChange$
-          .subscribe((change: boolean) => {
-            if (change) this.onSearch$.next('')
-          })
+        this.onOpenChange$.subscribe((change: boolean) => {
+          if (change) this.onSearch$.next('')
+        })
 
         this.response$
           .pipe(
@@ -319,6 +318,7 @@ export function EntitySelectField<
               newValue = options[0]!.id
             }
             this.formControl.setValue(newValue)
+            this.formControl.markAsTouched()
             // if onPopulate$ is called from a quick-add form in the select dropdown,
             // this will close it and cause nz-select to display the new tag
             this.selectOpen$.next(false)

client/src/app/forms/test-pages/layout-tests/horizontal-form/horizontal-form.page.html

@@ -1,6 +1,6 @@
 <form
   nz-form
-  [nzLayout]="formLayout"
+  nzLayout="horizontal"
   [formGroup]="form">
   <formly-form
     [form]="form"

client/src/app/forms/test-pages/layout-tests/inline-form/inline-form.page.html

@@ -1,6 +1,6 @@
 <form
   nz-form
-  [nzLayout]="formLayout"
+  nzLayout="inline"
   [formGroup]="form">
   <formly-form
     [form]="form"

client/src/app/forms/types/direction-select/direction-select.type.ts

@@ -115,7 +115,7 @@ export interface CvcDirectionSelectFieldProps extends FormlyFieldProps {
   isMultiSelect: boolean
   requireTypePromptFn: (entityName: string) => string
   tooltip?: string
-  extraType?: CvcFormFieldExtraType,
+  extraType?: CvcFormFieldExtraType
   formMode: 'revise' | 'add' | 'clone'
 }
 
@@ -164,7 +164,7 @@ export class CvcDirectionSelectField
         `Select ${entityType ? entityType + ' ' : ''}${entityName} Direction`,
       requireTypePromptFn: (entityName: string) =>
         `Select ${entityName} Type to select its Direction`,
-      formMode: 'add'
+      formMode: 'add',
     },
   }
 
@@ -274,6 +274,7 @@ export class CvcDirectionSelectField
         if (!et || !ed || !this.state) return
         this.props.extraType = 'description'
         this.props.description = optionText[this.state.entityName][et][ed]
+        this.field.formControl.markAsTouched()
       })
   }
 }

client/src/app/forms/types/disease-select/disease-select.type.ts

@@ -95,10 +95,6 @@ export class CvcDiseaseSelectField
   extends DiseaseSelectMixin
   implements AfterViewInit
 {
-  // get template reference to quick-add form for add-entity-form wrapper props
-  @ViewChild('addDisease', { static: true })
-  addForm!: TemplateRef<any>
-
   // get option template query list to populate entity-select
   @ViewChildren('optionTemplates', { read: TemplateRef })
   optionTemplates?: QueryList<TemplateRef<any>>
@@ -174,11 +170,6 @@ export class CvcDiseaseSelectField
     } else {
       this.configureField()
     }
-
-    // configure add form props
-    if (this.addForm) {
-      this.field.props.addFormContent = this.addForm
-    }
   } // ngAfterViewInit()
 
   configureField(): void {

client/src/app/forms/types/interaction-select/interaction-select.type.ts

@@ -191,6 +191,7 @@ export class CvcInteractionSelectField
           this.props.extraType = 'description'
         } else {
           this.props.extraType = 'prompt'
+          this.field.formControl.markAsTouched()
         }
       })
   }

client/src/app/forms/types/level-select/level-select.type.ts

@@ -139,6 +139,7 @@ export class CvcLevelSelectField
           this.props.description = undefined
         } else {
           this.props.description = optionText.get(level)
+          this.field.formControl.markAsTouched()
         }
       })
   }

client/src/app/forms/types/molecular-profile-select/molecular-profile-select.type.ts

@@ -205,6 +205,7 @@ export class CvcMolecularProfileSelectField
         if (this.editorOpen) this.onShowExpClick$.next()
         this.cdr.detectChanges()
         this.field.formControl.setValue(mp.id)
+        this.field.formControl.markAsTouched()
       })
   } // ngAfterViewInit
 

client/src/app/forms/types/molecular-profile-select/mp-finder/mp-finder.component.html

@@ -1,7 +1,7 @@
 <form
   nz-form
-  [nzLayout]="layout"
-  [formGroup]="form">
+  [formGroup]="form"
+  [nzLayout]="finderState.formLayout">
   <formly-form
     [form]="form"
     [fields]="config"

client/src/app/forms/types/molecular-profile-select/mp-finder/mp-finder.component.ts

@@ -41,10 +41,9 @@ export class MpFinderComponent {
   model: MpFinderModel
   form: UntypedFormGroup
   config: FormlyFieldConfig[]
-  layout: NzFormLayoutType = 'horizontal'
 
   finderState: MpFinderState = {
-    formLayout: this.layout,
+    formLayout: 'horizontal',
     fields: {
       geneId$: new BehaviorSubject<Maybe<number>>(undefined),
       variantId$: new BehaviorSubject<Maybe<number>>(undefined),
@@ -102,17 +101,14 @@ export class MpFinderComponent {
     if (variant) {
       this.model = {
         geneId: undefined,
-        variantId: undefined
+        variantId: undefined,
       }
       this.cvcOnSelect.next(variant.singleVariantMolecularProfile)
       this.cvcOnVariantSelect.next(variant)
     }
-
   }
 
-  getSelectedVariant(
-    variantId: Maybe<number>,
-  ): Maybe<Variant> {
+  getSelectedVariant(variantId: Maybe<number>): Maybe<Variant> {
     if (!variantId) return
     const fragment = {
       id: `Variant:${variantId}`,
@@ -139,11 +135,9 @@ export class MpFinderComponent {
       console.error(err)
     }
     if (!variant) {
-      console.error(
-        `MpFinderForm could not resolve its Variant from the cache`
-      )
+      console.error(`MpFinderForm could not resolve its Variant from the cache`)
       return
     }
-      return variant
+    return variant
   }
 }

client/src/app/forms/types/origin-select/origin-select.type.ts

@@ -142,6 +142,7 @@ export class CvcOriginSelectField
           this.props.description = undefined
         } else {
           this.props.description = optionMap.get(origin)
+          this.field.formControl.markAsTouched()
         }
       })
   }

client/src/app/forms/types/rating/rating.type.html

@@ -2,8 +2,11 @@
   type="hidden"
   [formControl]="formControl"
   [formlyAttributes]="field" />
-<nz-rate
-  [ngModel]="formControl.value"
-  [nzCount]="props.count"
-  [nzTooltips]="this.props.hoverText"
-  (ngModelChange)="rating$.next($event)"></nz-rate>
+
+<div class="rate-block">
+  <nz-rate
+    [ngModel]="formControl.value"
+    [nzCount]="props.count"
+    [nzTooltips]="this.props.hoverText"
+    (ngModelChange)="rating$.next($event)"></nz-rate>
+</div>

client/src/app/forms/types/rating/rating.type.less

@@ -1,5 +1,10 @@
 :host {
-  ::ng-deep nz-rate ul {
+  .rate-block {
+    display: inline-block;
+    background-color: #fff;
+    border-radius: 2px;
+    padding: 2px 4px;
+    margin-top: -4px;
   }
   ::ng-deep nz-rate .anticon {
     font-size: 160%;

client/src/app/forms/types/rating/rating.type.ts

@@ -52,10 +52,7 @@ const RatingMixin = mixin(
   styleUrls: ['./rating.type.less'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CvcRatingField
-  extends RatingMixin
-  implements AfterViewInit
-{
+export class CvcRatingField extends RatingMixin implements AfterViewInit {
   // LOCAL SOURCE STREAMS
   rating$: BehaviorSubject<Maybe<number>>
 
@@ -81,7 +78,7 @@ export class CvcRatingField
     this.configureBaseField() // mixin fn
     this.configureStateConnections() // local fn
 
-    if(this.formControl.value) {
+    if (this.formControl.value) {
       this.rating$.next(this.formControl.value)
     }
 
@@ -105,6 +102,7 @@ export class CvcRatingField
           this.props.description = undefined
         } else {
           this.props.description = optionText[rating]
+          this.field.formControl.markAsTouched()
         }
       })
   }

client/src/app/forms/types/significance-select/significance-select.type.ts

@@ -121,7 +121,7 @@ interface CvcSignificanceSelectFieldProps extends FormlyFieldProps {
   isMultiSelect: boolean
   tooltip?: string
   description?: string
-  extraType?: CvcFormFieldExtraType,
+  extraType?: CvcFormFieldExtraType
   formMode: 'revise' | 'add' | 'clone'
 }
 
@@ -170,7 +170,7 @@ export class CvcSignificanceSelectField
       requireTypePromptFn: (entityName: string) =>
         `Select ${entityName} Type to select its Significance`,
       tooltip: 'Clinical impact of the variant',
-      formMode: 'add'
+      formMode: 'add',
     },
   }
 
@@ -274,6 +274,7 @@ export class CvcSignificanceSelectField
         this.props.description = undefined
         this.props.extraType = 'description'
         this.props.description = optionText[this.state.entityName][et][cs]
+        this.field.formControl.markAsTouched()
       })
   }
 }

client/src/app/forms/types/type-select/type-select.type.ts

@@ -123,6 +123,7 @@ export class CvcEntityTypeSelectField
         } else {
           this.props.description = optionText[v]
           this.props.extraType = 'description'
+          this.field.formControl.markAsTouched()
         }
       })
     if (!this.state) {