6168 Refactor Todo List (#388)

* - app version = 5.6.0 * - added "protected" to lifecycle methods - removed conflicting Getters, States, Actions * - moved Details List to FilingHistoryList folder - fixed button colours - removed obsolete Add Comment Dialog from Todo List - cleaned up expansion panel header blocks - deleted draft correction duplicate View Details button - deleted obsolete Details button from alteration in good standing - deleted obsolete comments and commentsLink item properties - deleted unneeded togglePanel() - removed todo task references from Details List - added CorrectionComment component and plumbing - misc cleanup * - more cleanup
bcgov · Sep 21, 2022 · 08232e3 · 08232e3
1 parent 3abbe10
commit 08232e3
Show file tree

Hide file tree

Showing 33 changed files with 379 additions and 419 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "business-filings-ui",
-  "version": "5.5.2",
+  "version": "5.6.0",
   "private": true,
   "appName": "Filings UI",
   "sbcName": "SBC Common Components",

diff --git a/src/App.vue b/src/App.vue
@@ -36,7 +36,7 @@
       attach="#app"
     />
 
-    <ConfirmDissolution
+    <ConfirmDissolutionDialog
       :dialog="confirmDissolutionDialog"
       @close="confirmDissolutionDialog = false"
       @proceed="dissolveCompany()"
@@ -107,7 +107,7 @@ import EntityInfo from '@/components/EntityInfo.vue'
 // Dialogs
 import {
   BusinessAuthErrorDialog,
-  ConfirmDissolution,
+  ConfirmDissolutionDialog,
   DashboardUnavailableDialog,
   DownloadErrorDialog,
   NameRequestAuthErrorDialog,
@@ -197,7 +197,7 @@ export default {
 
   components: {
     BreadCrumb,
-    ConfirmDissolution,
+    ConfirmDissolutionDialog,
     DashboardUnavailableDialog,
     DownloadErrorDialog,
     BusinessAuthErrorDialog,
@@ -228,7 +228,7 @@ export default {
       return sessionStorage.getItem('CREATE_URL')
     },
 
-    /** The Incorporation Application's Temporary Registration Number string. */
+    /** The Temporary Registration Number string. */
     tempRegNumber (): string {
       return sessionStorage.getItem('TEMP_REG_NUMBER')
     },
@@ -308,7 +308,8 @@ export default {
     await this.fetchData()
   },
 
-  destroyed (): void {
+  /** Called just before this component is destroyed. */
+  beforeDestroy (): void {
     // stop listening for reload data events
     this.$root.$off('reloadData')
 

diff --git a/src/assets/styles/base.scss b/src/assets/styles/base.scss
@@ -310,24 +310,6 @@ ul.list {
   border-left: 3px solid $app-red;
 }
 
-.filing-item__actions {
-  display: inline-block;
-
-  .expand-btn {
-    letter-spacing: -0.01rem;
-    @extend .font-14;
-    font-weight: 700;
-  }
-
-  // make menu button slightly smaller
-  .menu-btn {
-    height: unset !important;
-    min-width: unset !important;
-    padding: 0.25rem !important;
-    color: $app-blue
-  }
-}
-
 // vertical pipe for separating strings
 .vert-pipe {
   margin-top: 0.1rem;

diff --git a/src/components/Dashboard/FilingHistoryList.vue b/src/components/Dashboard/FilingHistoryList.vue
@@ -37,7 +37,7 @@
     </v-fade-transition>
 
     <div class="scrollable-container">
-      <v-expansion-panels v-if="historyItems.length > 0" v-model="panel">
+      <v-expansion-panels v-if="showHistoryPanel" v-model="panel">
         <v-expansion-panel
           class="align-items-top filing-history-item px-6 py-5"
           v-for="(filing, index) in historyItems"
@@ -83,11 +83,11 @@
                   <v-btn
                     class="details-btn"
                     outlined
-                    color="blue darken-2"
+                    color="primary"
                     :ripple=false
                     @click.stop="togglePanel(index, filing)"
                   >
-                    <v-icon left>mdi-information-outline</v-icon>
+                    <v-icon>mdi-information-outline</v-icon>
                     <span>{{(panel === index) ? "Hide Details" : "View Details"}}</span>
                   </v-btn>
                 </div>
@@ -108,7 +108,7 @@
                     :ripple=false
                     @click.stop="togglePanel(index, filing)"
                   >
-                    <v-icon left>mdi-alert</v-icon>
+                    <v-icon>mdi-alert</v-icon>
                     <span>{{(panel === index) ? "Hide Details" : "View Details"}}</span>
                   </v-btn>
                 </div>
@@ -127,11 +127,11 @@
                   <v-btn
                     class="details-btn"
                     outlined
-                    color="blue darken-2"
+                    color="primary"
                     :ripple=false
                     @click.stop="togglePanel(index, filing)"
                   >
-                    <v-icon left>mdi-information-outline</v-icon>
+                    <v-icon>mdi-information-outline</v-icon>
                     <span>{{(panel === index) ? "Hide Details" : "View Details"}}</span>
                   </v-btn>
                 </div>
@@ -148,7 +148,7 @@
                     :ripple=false
                     @click.stop="togglePanel(index, filing)"
                   >
-                    <v-icon left>mdi-alert</v-icon>
+                    <v-icon>mdi-alert</v-icon>
                     <span>{{(panel === index) ? "Hide Details" : "View Details"}}</span>
                   </v-btn>
                 </div>
@@ -168,7 +168,7 @@
                     :ripple=false
                     @click.stop="togglePanel(index, filing)"
                   >
-                    <v-icon small left style="padding-top: 2px">mdi-message-reply</v-icon>
+                    <v-icon small style="padding-top: 2px">mdi-message-reply</v-icon>
                     <span>Detail{{filing.commentsCount > 1 ? "s" : ""}} ({{filing.commentsCount}})</span>
                   </v-btn>
                 </div>
@@ -205,7 +205,7 @@
                     <v-list-item-group color="primary">
                       <v-list-item :disabled="disableCorrection(filing)">
                         <v-list-item-icon>
-                          <v-icon class="app-blue">mdi-file-document-edit-outline</v-icon>
+                          <v-icon color="primary">mdi-file-document-edit-outline</v-icon>
                         </v-list-item-icon>
                         <v-list-item-title
                           class="file-correction-item"
@@ -217,7 +217,7 @@
 
                       <v-list-item :disabled="!isAllowed(AllowableActions.ADD_DETAIL_COMMENT)">
                         <v-list-item-icon>
-                          <v-icon class="app-blue">mdi-comment-plus</v-icon>
+                          <v-icon color="primary">mdi-comment-plus</v-icon>
                         </v-list-item-icon>
                         <v-list-item-title
                           class="add-detail-comment-item"
@@ -317,7 +317,6 @@
               <v-divider class="my-6" />
               <DetailsList
                 :filing=filing
-                :isTask="false"
                 @showCommentDialog="showCommentDialog($event)"
               />
             </template>
@@ -328,7 +327,7 @@
     </div>
 
     <!-- No Results Message -->
-    <v-card class="no-results" flat v-if="!historyItems.length">
+    <v-card class="no-results" flat v-if="!showHistoryPanel">
       <v-card-text>
         <template v-if="!!tempRegNumber">
           <div class="no-results__subtitle">Complete your filing to display</div>
@@ -354,14 +353,14 @@ import CompletedAlteration from './FilingHistoryList/CompletedAlteration.vue'
 import CompletedDissolution from './FilingHistoryList/CompletedDissolution.vue'
 import CompletedIa from './FilingHistoryList/CompletedIa.vue'
 import CompletedRegistration from './FilingHistoryList/CompletedRegistration.vue'
+import DetailsList from './FilingHistoryList/DetailsList.vue'
 import DocumentsList from './FilingHistoryList/DocumentsList.vue'
 import FiledLabel from './FilingHistoryList/FiledLabel.vue'
 import FutureEffective from './FilingHistoryList/FutureEffective.vue'
 import FutureEffectivePending from './FilingHistoryList/FutureEffectivePending.vue'
 import PaperFiling from './FilingHistoryList/PaperFiling.vue'
 import PendingFiling from './FilingHistoryList/PendingFiling.vue'
 import StaffFiling from './FilingHistoryList/StaffFiling.vue'
-import { DetailsList } from '@/components/common'
 import { AddCommentDialog, DownloadErrorDialog, FileCorrectionDialog, LoadCorrectionDialog } from '@/components/dialogs'
 
 // Enums, interfaces and mixins
@@ -377,15 +376,14 @@ import { AllowableActionsMixin, DateMixin, EnumMixin, FilingMixin, LegalApiMixin
     CompletedDissolution,
     CompletedIa,
     CompletedRegistration,
+    DetailsList,
     DocumentsList,
     FiledLabel,
     FutureEffective,
     FutureEffectivePending,
     PaperFiling,
     PendingFiling,
     StaffFiling,
-    // common
-    DetailsList,
     // dialogs
     AddCommentDialog,
     DownloadErrorDialog,
@@ -425,7 +423,7 @@ export default class FilingHistoryList extends Mixins(
     return sessionStorage.getItem('EDIT_URL')
   }
 
-  /** The IA's Temporary Registration Number string. */
+  /** The Temporary Registration Number string. */
   get tempRegNumber (): string {
     return sessionStorage.getItem('TEMP_REG_NUMBER')
   }
@@ -435,11 +433,17 @@ export default class FilingHistoryList extends Mixins(
     return sessionStorage.getItem('BUSINESS_ID')
   }
 
+  /** Whether to show the history panel. */
+  get showHistoryPanel () {
+    return (this.historyItems.length > 0)
+  }
+
   /** Returns whether the action button is visible or not. */
   protected displayAction (filing): string {
     return filing.availableOnPaperOnly || filing.isTypeStaff || filing.documentsLink
   }
 
+  /** Loads list of filings from the API into History Items array. */
   private loadData (): void {
     this.historyItems = []
 
@@ -481,7 +485,7 @@ export default class FilingHistoryList extends Mixins(
     if (this.highlightId) this.highlightFiling(this.highlightId)
   }
 
-  /** Loads a filing into the historyItems list. */
+  /** Loads a filing into the History Items array. */
   private loadFiling (filing: ApiFilingIF): void {
     try {
       // NB: these `new Date()` are safe because the date strings are in GMT (ie, UTC)

diff --git a/src/components/common/DetailsList.vue → ...shboard/FilingHistoryList/DetailsList.vue b/src/components/common/DetailsList.vue → ...shboard/FilingHistoryList/DetailsList.vue
@@ -3,12 +3,12 @@
     <div class="title-bar">
       <h4>
         <v-icon small>mdi-message-reply</v-icon>
-        Detail{{filing.comments.length > 1 ? "s" : ""}} ({{filing.comments.length}})
+        <span class="ml-1">Detail{{filing.comments.length > 1 ? "s" : ""}} ({{filing.comments.length}})</span>
       </h4>
       <v-btn
         class="add-detail-btn"
         color="primary"
-        v-if="isRoleStaff && !isTask"
+        v-if="isRoleStaff"
         :disabled ="!filing.filingId"
         @click.stop="showCommentDialog(filing)"
       >
@@ -38,7 +38,7 @@
 import { Component, Mixins, Prop, Emit } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import { DateMixin } from '@/mixins'
-import { HistoryItemIF, TodoItemIF } from '@/interfaces'
+import { HistoryItemIF } from '@/interfaces'
 
 @Component({})
 export default class DetailsList extends Mixins(DateMixin) {
@@ -49,18 +49,14 @@ export default class DetailsList extends Mixins(DateMixin) {
       filingId: null
     })
   })
-  readonly filing: HistoryItemIF | TodoItemIF
-
-  /** Whether this filing is a task (and therefore whether to disallow new detail comments). */
-  @Prop({ default: false })
-  readonly isTask: boolean
+  readonly filing: HistoryItemIF
 
   /** Whether current user has staff role. */
   @Getter isRoleStaff!: boolean
 
   /** Emits an event to trigger the comment dialog. */
   @Emit('showCommentDialog')
-  private showCommentDialog (filing: HistoryItemIF | TodoItemIF): void { }
+  protected showCommentDialog (filing: HistoryItemIF): void { }
 }
 </script>
 

diff --git a/src/components/Dashboard/StaffNotation.vue b/src/components/Dashboard/StaffNotation.vue
@@ -42,7 +42,7 @@
       :dissolutionType="DissolutionTypes.ADMINISTRATIVE"
     />
 
-    <div class="filing-item__actions">
+    <div class="staff-notation-container">
       <v-menu offset-y left transition="slide-y-transition" v-model="expand">
         <template v-slot:activator="{ on }">
           <span><!-- This span is needed to fix a positioning issue with the menu -->
@@ -211,6 +211,24 @@ export default class StaffNotation extends Vue {
 <style lang="scss" scoped>
 @import "@/assets/styles/theme.scss";
 
+.staff-notation-container {
+  display: inline-block;
+
+  .expand-btn {
+    letter-spacing: -0.01rem;
+    font-size: $px-14;
+    font-weight: 700;
+  }
+
+  // make menu button slightly smaller
+  .menu-btn {
+    height: unset !important;
+    min-width: unset !important;
+    padding: 0.25rem !important;
+    color: $app-blue
+  }
+}
+
 #add-staff-filing-label {
   padding-right: 0.725rem;
   font-size: $px-14;
@@ -234,7 +252,7 @@ export default class StaffNotation extends Vue {
 }
 
 // Fix the transparent added by .add-scrollbar-offset (Firefox only).
-::v-deep .add-notation-dialog {
+::v-deep .add-staff-notation-dialog {
   scrollbar-color: auto;
 }