add detail comment (part 2)

src/components/Dashboard/FilingHistoryList.vue

@@ -64,6 +64,7 @@
  </template>
  <v-list dense>
  <v-list-item-group color="primary">
+ <!-- NB: this menu item is disabled in current release -->
  <v-list-item disabled>
  <v-list-item-icon>
  <v-icon>mdi-file-document-edit-outline</v-icon>
@@ -162,8 +163,8 @@
  v-if="isRoleStaff"
  @click.stop="showCommentDialog(item.filingId)"
  >
-  <span>Add Detail</span>
-  </v-btn>
+ <span>Add Detail</span>
+ </v-btn>
  </div>
  <div>
  <!-- the details list-->
@@ -200,7 +201,7 @@
 <script lang="ts">
 // Libraries
 import axios from '@/axios-auth'
-import { mapGetters, mapState, mapActions } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 
 // Dialogs
 import { AddCommentDialog, DownloadErrorDialog } from '@/components/dialogs'
@@ -253,8 +254,6 @@ export default {
  },
 
  methods: {
- ...mapActions(['setTriggerDashboardReload']),
-
  loadData () {
  this.filedItems = []
 
@@ -313,7 +312,7 @@ export default {
 
  // Method to extract date from a local datetime string
  // Returns "yyyy-mm-dd"
- formatDate (dateString): string {
+ formatDate (dateString: string): string {
  if (!dateString) return null // safety check
  return dateString.split(' ')[0]
  },
@@ -344,7 +343,7 @@ export default {
  }],
  paperOnly: false,
  isCorrected: filing.header.isCorrected || false,
- comments: this.flattenComments(filing.header.comments)
+ comments: this.flattenAndSortComments(filing.header.comments)
  }
  this.filedItems.push(item)
  } else {
@@ -388,7 +387,7 @@ export default {
  status: filing.header.status,
  paperOnly: false,
  isCorrected: filing.header.isCorrected || false,
- comments: this.flattenComments(filing.header.comments)
+ comments: this.flattenAndSortComments(filing.header.comments)
  }
  this.filedItems.push(item)
  } else {
@@ -429,13 +428,20 @@ export default {
  }],
  paperOnly: true,
  isCorrected: filing.header.isCorrected || false,
- comments: this.flattenComments(filing.header.comments)
+ comments: this.flattenAndSortComments(filing.header.comments)
  }
  this.filedItems.push(item)
  },
 
- flattenComments (comments: any): Array<any> {
- return (comments && comments.length > 0) ? comments.map(c => c.comment) : []
+ flattenAndSortComments (comments: any): Array<any> {
+ if (comments && comments.length > 0) {
+ // first use map to change comment.comment to comment
+ const flattened: Array<any> = comments.map(c => c.comment)
+ // then sort newest to oldest
+ const sorted = flattened.sort((a, b) => new Date(a.timestamp) < new Date(b.timestamp) ? 1 : -1)
+ return sorted
+ }
+ return []
  },
 
  typeToTitle (type: string, agmYear: string = null): string {
@@ -453,7 +459,7 @@ export default {
  return type.split(/(?=[A-Z])/).join(' ').replace(/^\w/, c => c.toUpperCase())
  },
 
- highlightFiling (highlightId) {
+ highlightFiling (highlightId: number) {
  // expand the panel of the matching filing
  for (let i = 0; i < this.filedItems.length; i++) {
  // assume there is always a filing document
@@ -627,14 +633,41 @@ export default {
  status === FilingStatus.PAID
  },
 
- showCommentDialog (filingId): void {
+ showCommentDialog (filingId: number): void {
  this.currentFilingId = filingId
  this.addCommentDialog = true
  },
 
- hideCommentDialog (needReload): void {
+ async hideCommentDialog (needReload: boolean): Promise<void> {
  this.addCommentDialog = false
- if (needReload) this.setTriggerDashboardReload(true)
+ // if needed, reload comments for this filing
+ // NB: no spinner or state change, just do it quietly
+ if (needReload) await this.reloadComments(this.currentFilingId)
+ },
+
+ async reloadComments (filingId: number): Promise<void> {
+ // find the filing in the list
+ const filing = this.filedItems.find(item => (item.filingId === filingId))
+
+ if (filing) {
+ // fetch latest comments for this filing
+ const url = this.entityIncNo + '/filings/' + filingId
+ await axios.get(url).then(res => {
+ if (res && res.data && res.data.filing && res.data.filing.header) {
+ // reassign just the comments
+ filing.comments = this.flattenAndSortComments(res.data.filing.header.comments)
+ } else {
+ // eslint-disable-next-line no-console
+ console.log('reloadComments() error - invalid response =', res)
+ }
+ }).catch(error => {
+ // eslint-disable-next-line no-console
+ console.error('reloadComments() error =', error)
+ })
+ } else {
+ // eslint-disable-next-line no-console
+ console.error('reloadComments() error - could not find filing id =', filingId)
+ }
  }
  },
 

src/components/common/DetailComment.vue

@@ -5,11 +5,12 @@
  outlined
  auto-grow
  rows="5"
- id="detail-comment-textfield"
+ id="detail-comment-textarea"
  :counter="MAXLENGTH"
  :rules="rules"
  :value="value"
  :label="label"
+ :autofocus="autofocus"
  @input="emitInput($event)"
  />
  </v-card>
@@ -46,6 +47,10 @@ export default class DetailComment extends Vue {
  @Prop({ default: '' })
  private label: string
 
+ /** Autofocus passed into this component. */
+ @Prop({ default: false })
+ private autofocus: boolean
+
  /**
  * Called when prop changes (ie, v-model is updated by parent).
  * This method is debounced to prevent excessive validation.

src/components/dialogs/AddCommentDialog.vue

@@ -7,6 +7,7 @@
  <detail-comment
  ref="detailComment"
  v-model="comment"
+ autofocus
  label="Add a Detail that will appear on the ledger for this entity"
  @valid="detailCommentValid=$event"
  />
@@ -53,7 +54,7 @@ export default class AddCommentDialog extends Vue {
  /** Prop to display the dialog. */
  @Prop() private dialog: boolean
 
- /** Prop to display the dialog. */
+ /** Prop to provide the Filing ID. */
  @Prop() private filingId: number
 
  /** Prop to provide attachment selector. */
@@ -92,6 +93,14 @@ export default class AddCommentDialog extends Vue {
  private async save (): Promise<void> {
  // prevent double saving
  if (this.saving) return
+
+ // ensure we have a Filing ID
+ if (!this.filingId) {
+ // eslint-disable-next-line no-console
+ console.error('save() error - missing filing ID')
+ return
+ }
+
  this.saving = true
 
  const data = {

src/utils/sleep.ts

@@ -1,10 +1,8 @@
-export default {
- /**
- * Method that "sleeps" for specified timeout. Must be called from async method.
- * @param ms Delay to sleep, in milliseconds.
- * @returns A promise to await upon.
- */
- sleep (ms: number): Promise<void> {
- return new Promise(resolve => setTimeout(resolve, ms))
- }
+/**
+ * Function that "sleeps" for specified timeout. Must be called from async method.
+ * @param ms Delay to sleep, in milliseconds.
+ * @returns A promise to await upon.
+ */
+export function sleep (ms: number): Promise<void> {
+ return new Promise(resolve => setTimeout(resolve, ms))
 }

src/views/AnnualReport.vue

@@ -397,8 +397,7 @@ export default {
  if (this.agmDate) return this.agmDate
  // if filing is in past year then use last day in that year
  if (this.ARFilingYear < this.currentYear) return `${this.ARFilingYear}-12-31`
- // otherwise use current date
- // (should never happen because either we should have an AGM Date or filing should be in past year)
+ // otherwise use current date (BCOMP only - should never happen for COOP)
  return this.currentDate
  },
 
@@ -455,7 +454,7 @@ export default {
  }
  // NB: filing id of 0 means "new AR"
  // otherwise it's a draft AR filing id
- this.filingId = this.$route.params.id
+ this.filingId = +this.$route.params.id // number
 
  // if tombstone data isn't set, route to home
  if (!this.entityIncNo || !this.ARFilingYear || (this.filingId === undefined)) {

src/views/Correction.vue

@@ -329,7 +329,7 @@ export default {
  }
  }
  // NB: this is the id of the filing to correct
- const origFilingId = this.$route.params.id
+ const origFilingId = +this.$route.params.id // number
 
  // if required data isn't set, route to home
  if (!this.entityIncNo || (origFilingId === undefined) || (origFilingId <= 0)) {
@@ -606,9 +606,7 @@ export default {
  }
  }
  if (setting === 'add' && !added) {
- // TODO: remove hard-coded entity type when fee codes are available from Pay team
- // this.filingData.push({ filingTypeCode: filing, entityType: this.entityType })
- this.filingData.push({ filingTypeCode: filing, entityType: EntityTypes.BCOMP })
+ this.filingData.push({ filingTypeCode: filing, entityType: this.entityType })
  }
  },
 
@@ -654,16 +652,19 @@ export default {
 
  watch: {
  detailCommentValid (val: boolean): void {
+ // eslint-disable-next-line no-console
  console.log('detailCommentValid =', val) // FOR DEBUGGING ONLY
  this.haveChanges = true
  },
 
  certifyFormValid (val: boolean): void {
+ // eslint-disable-next-line no-console
  console.log('certifyFormValid =', val) // FOR DEBUGGING ONLY
  this.haveChanges = true
  },
 
  staffPaymentFormValid (val: boolean): void {
+ // eslint-disable-next-line no-console
  console.log('staffPaymentFormValid =', val) // FOR DEBUGGING ONLY
  this.haveChanges = true
  }

src/views/StandaloneDirectorsFiling.vue

@@ -403,7 +403,7 @@ export default {
 
  // NB: filing id of 0 means "new"
  // otherwise it's a draft filing id
- this.filingId = this.$route.params.id
+ this.filingId = +this.$route.params.id // number
 
  // if tombstone data isn't set, route to home
  if (!this.entityIncNo || (this.filingId === undefined)) {

src/views/StandaloneOfficeAddressFiling.vue

@@ -274,7 +274,7 @@ export default {
 
  // NB: filing id of 0 means "new"
  // otherwise it's a draft filing id
- this.filingId = this.$route.params.id
+ this.filingId = +this.$route.params.id // number
 
  // if tombstone data isn't set, route to home
  if (!this.entityIncNo || (this.filingId === undefined)) {

tests/unit/AGMDate.spec.ts

@@ -1,8 +1,7 @@
 import Vue from 'vue'
 import Vuetify from 'vuetify'
 import Vuelidate from 'vuelidate'
-import { mount } from '@vue/test-utils'
-import flushPromises from 'flush-promises'
+import { mount, Wrapper } from '@vue/test-utils'
 
 import store from '@/store/store'
 import AgmDate from '@/components/AnnualReport/AGMDate.vue'
@@ -27,10 +26,10 @@ Vue.use(Vuelidate)
 const vuetify = new Vuetify({})
 
 describe('AgmDate', () => {
- let wrapper
- let vm
+ let wrapper: Wrapper<AgmDate>
+ let vm: any
 
- beforeEach(async () => {
+ beforeEach(() => {
  // init store
  store.state.entityIncNo = 'CP0001191'
  store.state.currentDate = '2019-07-15'
@@ -39,9 +38,7 @@ describe('AgmDate', () => {
  store.state.lastAnnualReportDate = '2018-07-15'
 
  wrapper = mount(AgmDate, { store, vuetify })
- vm = wrapper.vm as any
-
- await flushPromises()
+ vm = wrapper.vm
  })
 
  afterEach(() => {