Financing Statement select and change type.

ppr-ui/src/components/DialogConfirm.vue

@@ -0,0 +1,107 @@
+<template>
+  <v-dialog
+    v-model="value"
+    content-class="confirm-dialog"
+    :max-width="dialogOptions.width"
+    :style="{ zIndex: dialogOptions.zIndex }"
+    :persistent="true"
+    @keydown.esc="onClickCancel()"
+  >
+    <v-card>
+      <v-card-title data-test-id="Confirm.title">{{ title }}</v-card-title>
+      <v-card-text data-test-id="Confirm.message">{{ message }}</v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          v-show="!!dialogOptions.ok"
+          data-test-id="Confirm.button.ok"
+          color="primary"
+          text
+          @click="onClickOk()"
+        >
+          {{ dialogOptions.ok }}
+        </v-btn>
+        <v-btn
+          v-show="!!dialogOptions.cancel"
+          data-test-id="Confirm.button.cancel"
+          color="secondary"
+          text
+          @click="onClickCancel()"
+        >
+          {{ dialogOptions.cancel }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+
+<script lang="ts">
+import { createComponent, ref } from '@vue/composition-api'
+
+interface DialgoConfirmOptionsInterface {
+  width?: number | string;
+  zIndex?: number;
+  yes?: string;
+  no?: string;
+  cancel?: string;
+}
+
+export default createComponent({
+  components: {},
+  props: {
+    title: {
+      default: 'Confirm',
+      required: false,
+      type: String
+    },
+    message: {
+      default: 'Confirm you wish to proceed.',
+      required: false,
+      type: String
+    },
+    options: {
+      type: Object, // DialogConfirmOptionsInterface,
+      required: false
+    },
+    value: {
+      required: true,
+      type: Boolean
+    }
+  },
+
+  setup(props, { emit }) {
+    const isOpen = ref(props.value)
+    const defaults = {
+      width: 400,
+      zIndex: 200,
+      ok: 'Yes',
+      cancel: 'Cancel'
+    }
+
+    // Dialog controls. Blend the incoming properties with the defaults.
+    const dialogOptions: DialgoConfirmOptionsInterface = props.options ? Object.assign(defaults, props.options) : defaults
+
+    /**
+     * Handler for OK button
+     */
+    function onClickOk(): void {
+      emit("ok")
+    }
+    /**
+       * Handler for Cancel button.
+       */
+    function onClickCancel(): void {
+      emit('cancel')
+    }
+
+    return {
+      dialogOptions,
+      isOpen,
+      onClickCancel,
+      onClickOk
+    }
+  }
+})
+
+</script>

ppr-ui/src/financing-statement/FinancingStatement.vue

@@ -8,12 +8,8 @@
       <form-section-header label="Type &amp; Duration" />
       <v-container>
         <div v-if="editing">
-          <v-select
+          <type-component
             :value="value.type"
-            :items="fsTypes"
-            data-test-id="FinancingStatement.type.select"
-            label="Type"
-            name="typeInput"
             @input="updateType"
           />
           <v-text-field
@@ -72,6 +68,7 @@ import { FinancingStatementType } from '@/financing-statement/financing-statemen
 import { PersonNameModel } from '@/components/person-name-model'
 import BaseParty from '@/base-party/BaseParty.vue'
 import DebtorParties from '@/financing-statement/DebtorParties.vue'
+import TypeComponent from '@/financing-statement/TypeComponent.vue'
 import FormSectionHeader from '@/components/FormSectionHeader.vue'
 import RegisteringParty from '@/components/RegisteringParty.vue'
 import SecuredParties from '@/financing-statement/SecuredParties.vue'
@@ -80,6 +77,7 @@ export default createComponent({
   components: {
     BaseParty,
     DebtorParties,
+    TypeComponent,
     FormSectionHeader,
     RegisteringParty,
     SecuredParties
@@ -99,17 +97,6 @@ export default createComponent({
   setup(props, { emit }) {
     const formIsValid = ref<boolean>(false)
 
-    // Create the set of text value pairs for the Type select
-    interface SelectItem {
-      text: string;
-      value: string;
-    }
-    const fsTypes: SelectItem[] = []
-    const fsTypeLabels: string[] = Object.values(FinancingStatementType)
-    Object.keys(FinancingStatementType).forEach((key: string, index: number): void => {
-      fsTypes.push({ text: fsTypeLabels[index], value: key })
-    })
-
     const life = ref<number>(1)
     const lifeRules = [
       (value: string): (boolean | string) => {
@@ -198,7 +185,6 @@ export default createComponent({
     }
 
     return {
-      fsTypes,
       formIsValid,
       life,
       lifeRules,

ppr-ui/src/financing-statement/TypeComponent.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <v-select
+      :value="type"
+      :items="fsTypes"
+      data-test-id="FinancingStatement.type.select"
+      label="Type"
+      name="typeInput"
+      @input="updateType"
+    />
+    <dialog-confirm
+      :value="dialogOpen"
+      title="Confirm"
+      :message="typeChangeMessage"
+      :options="{ok:'Confirm', width:600}"
+      @cancel="typeChangeCanceled($event)"
+      @ok="typeChangeConfirmed($event)"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, createComponent, ref } from '@vue/composition-api'
+import { FinancingStatementType } from '@/financing-statement/financing-statement-type'
+import DialogConfirm from "@/components/DialogConfirm.vue"
+
+export default createComponent({
+  components: {
+    DialogConfirm,
+  },
+  props: {
+    editing: {
+      default: false,
+      required: false,
+      type: Boolean
+    },
+    value: {
+      required: true,
+      type: String
+    }
+  },
+
+  setup(props, { emit }) {
+
+    // Create the set of text value pairs for the Type select
+    interface SelectItem {
+      text: string;
+      value: string;
+    }
+    const fsTypes: SelectItem[] = []
+    const fsTypeLabels: string[] = Object.values(FinancingStatementType)
+    Object.keys(FinancingStatementType).forEach((key: string, index: number): void => {
+      fsTypes.push({ text: fsTypeLabels[index], value: key })
+    })
+
+    // Controls dialog state.
+    const dialogOpen = ref(false)
+
+    // Ref to the incoming value. Need this to allow this component to modify
+    // this value, in the case the user cancels the confirm.
+    const type = ref(props.value)
+
+    // Temporary storage for the time between user selects a value and the confirm
+    // dialog displays the option and the possible confirmation emits the change
+    // to the parent
+    const typeStash = ref<FinancingStatementType>()
+
+    const typeChangeMessage = computed((): string => {
+      const label = FinancingStatementType[typeStash.value]
+      return `Confirm change type from "${props.value}" to "${label}". WARNING! You may lose information you entered.`
+    })
+
+    /**
+     * Callback to close the dialog and reset the original value into the select.
+     */
+    function typeChangeCanceled() {
+      dialogOpen.value = false
+      type.value = props.value
+    }
+
+    /**
+     * Callback for the user confirming the change of type.
+     */
+    function typeChangeConfirmed() {
+      dialogOpen.value = false
+      emit('input', typeStash.value)
+    }
+
+    /**
+     *  Callback function for emitting model changes made to the FS type; sends
+     * the new type to the parent.
+     */
+    function updateType(newType: FinancingStatementType): void {
+      typeStash.value = newType
+      dialogOpen.value = true
+    }
+
+    return {
+      dialogOpen,
+      fsTypes,
+      type,
+      typeChangeCanceled,
+      typeChangeConfirmed,
+      typeChangeMessage,
+      typeStash,
+      updateType
+    }
+  }
+})
+</script>

ppr-ui/tests/unit/financing-statement/FinancingStatement.spec.ts

@@ -14,7 +14,20 @@ Vue.use(VueCompositionApi)
 
 const vuetify = new Vuetify()
 
+/*
+*  Create an app elements with a data-app attribute to prevent this warning:
+*  console.warn node_modules/vuetify/dist/vuetify.js:40211
+* [Vuetify] Unable to locate target [data-app]
+*
+* This happens because the component hierachy includes a v-dialog which is, by default,
+* attached to the app element.
+*/
+const app = document.createElement('div')
+app.setAttribute('data-app', 'true')
+document.body.append(app)
+
 describe('FinancingStatmentContainer.vue', (): void => {
+
   describe(':props', (): void => {
     it(':editing - false contains no inputs', (): void => {
       const properties = ref({ editing: false, value: new FinancingStatementModel() })