- added correct name options to enum for AML

src/components/correct-name/CorrectAmlAdopt.vue

@@ -0,0 +1,152 @@
+<template>
+  <v-form
+    id="correct-aml-adopt-form"
+    ref="form"
+    v-model="formValid"
+  >
+    <v-radio-group
+      v-if="radioOptions.length > 0"
+      v-model="option"
+      hide-details
+      :rules="[(v) => v]"
+      @changed="onOptionChanged()"
+    >
+      <v-radio
+        v-for="(item, index) in radioOptions"
+        :id="`radio-${index}`"
+        :key="item.id"
+        :value="index"
+      >
+        <template #label>
+          <div
+            class="radio-option ml-6"
+            v-html="item.name"
+          />
+        </template>
+      </v-radio>
+    </v-radio-group>
+
+    <v-card
+      v-else
+      outlined
+      class="message-box"
+    >
+      <p>
+        You will be able to choose a business name to adopt when amalgamating businesses
+        are added to the list above.
+      </p>
+    </v-card>
+  </v-form>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Component, Prop, Watch, Emit } from 'vue-property-decorator'
+import { CorrectNameOptions } from '@bcrs-shared-components/enums'
+import { CorpTypeCd } from '@bcrs-shared-components/corp-type-module'
+
+@Component({})
+export default class CorrectAmlAdopt extends Vue {
+  // Refs
+  $refs: {
+    form: HTMLFormElement
+  }
+
+  @Prop({ default: () => [] }) readonly amalgamatingBusinesses!: any[]
+  @Prop({ required: true }) readonly formType!: CorrectNameOptions
+  @Prop({ required: true }) readonly validate!: boolean
+
+  get radioOptions (): Array<any> {
+    return this.amalgamatingBusinesses
+      .filter((business: any) => {
+        return (
+          business.type === 'lear' &&
+          business.legalType !== CorpTypeCd.EXTRA_PRO_A
+        )
+      })
+      .map((business: any) => {
+        return {
+          name: business.name,
+          id: business.id
+        }
+      })
+  }
+
+  option = null as string
+  formValid = false // initially invalid
+
+  onOptionChanged (): void {
+    console.log('*** on option changed =', this.option)
+    // emit new data
+    this.emitCompanyName(null) // *** TODO
+    this.emitSaved(true)
+  }
+
+  /** Watch for form submission and emit results. */
+  @Watch('option')
+  private onOption (): void {
+    console.log('*** on option =', this.option)
+  }
+
+  /** Watch for form submission and emit results. */
+  @Watch('formType')
+  private onSubmit (): void {
+    console.log('*** on submit')
+    // process only when current form type matches
+    if (this.formType === CorrectNameOptions.CORRECT_AML_ADOPT) {
+      // emit new data
+      this.emitCompanyName(null) // *** TODO
+      this.emitSaved(true)
+    }
+  }
+
+  /** Validate or reset validation when parent tells us. */
+  @Watch('validate')
+  private onValidate (val: boolean): void {
+    console.log('*** on validate =', val)
+    if (val) this.$refs.form.validate()
+    else this.$refs.form.resetValidation()
+  }
+
+  /** Watch for changes and inform parent when form/component is valid. */
+  @Watch('formValid')
+  @Emit('valid')
+  private emitValid (): boolean {
+    console.log('*** on form valid =', this.formValid)
+    return this.formValid
+  }
+
+  /** Inform parent that the process is complete. */
+  @Emit('saved')
+  private emitSaved (val: boolean): void {
+    console.log('*** emitting saved =', val)
+  }
+
+  /** Inform parent of updated company name. */
+  @Emit('update:companyName')
+  private emitCompanyName (name: string): void {
+    console.log('*** emitting company name', name)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+// remove extra padding and margin from radio group
+.v-input--selection-controls {
+  padding: 0;
+  margin: 0;
+}
+
+// increase vertical space between radio buttons
+:deep(.v-input--radio-group--column .v-radio:not(:last-child):not(:only-child)) {
+  margin-bottom: 0.75rem;
+}
+
+// style the radio labels
+:deep(.theme--light.v-label) {
+  font-size: 1rem;
+  color: $gray9;
+}
+</style>

src/components/correct-name/CorrectAmlNumbered.vue

@@ -0,0 +1,93 @@
+<template>
+  <v-form
+    id="correct-aml-numbered-form"
+    ref="form"
+    v-model="formValid"
+  >
+    <v-checkbox
+      id="correct-new-numbered-checkbox"
+      v-model="checkbox"
+      hide-details
+      :label="label"
+      :rules="[(v) => v]"
+    />
+  </v-form>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Component, Prop, Watch, Emit } from 'vue-property-decorator'
+import { CorrectNameOptions } from '@bcrs-shared-components/enums'
+
+@Component({})
+export default class CorrectAmlNumbered extends Vue {
+  // Refs
+  $refs: {
+    form: HTMLFormElement
+  }
+
+  @Prop({ required: true }) readonly formType!: CorrectNameOptions
+  @Prop({ required: true }) readonly validate!: boolean
+
+  checkbox = false
+  formValid = false // initially invalid
+
+  readonly label = 'The resulting company name will be the incorporation number followed ' +
+    'by a suffix. The suffix will reflect the type of resulting business type.'
+
+  /** Watch for form submission and emit results. */
+  @Watch('formType')
+  private onSubmit (): void {
+    // process only when current form type matches
+    if (this.formType === CorrectNameOptions.CORRECT_NAME_TO_NUMBER) {
+      // emit new data
+      this.emitCompanyName(null) // *** TODO?
+      this.emitSaved(true)
+    }
+  }
+
+  /** Validate or reset validation when parent tells us. */
+  @Watch('validate')
+  private onValidate (val: boolean): void {
+    if (val) this.$refs.form.validate()
+    else this.$refs.form.resetValidation()
+  }
+
+  /** Watch for changes and inform parent when form/component is valid. */
+  @Watch('formValid')
+  @Emit('valid')
+  private emitValid (): boolean {
+    return this.formValid
+  }
+
+  /** Inform parent that the process is complete. */
+  @Emit('saved')
+  private emitSaved (val: boolean): void {}
+
+  /** Inform parent of updated company name. */
+  @Emit('update:companyName')
+  private emitCompanyName (name: string): void {}
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+.v-input--selection-controls {
+  padding: 0;
+  margin: 0;
+}
+
+:deep(.theme--light.v-label) {
+  font-size: 1rem;
+  color: $gray7;
+  font-weight: normal;
+}
+
+// align checkbox with label
+:deep(.v-input--checkbox) {
+  .v-input__slot {
+    align-items: flex-start;
+  }
+}
+</style>