21802 - Add details call and list.

cypress/e2e/components/filings/section.cy.ts

@@ -13,7 +13,7 @@
     })
   })
 
-  it('Verifies body of the filings', () => {
+  it('Verifies body of the filings -- document list, court number', () => {
     // director change verification aka, verify body list
     const filings = [directorChange, administrativeDissolution]
     cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, undefined, filings)
@@ -74,4 +74,37 @@
       .find('[data-cy="pursuant-to-a-plan"]')
       .should('not.exist')
   })
+
+  it('Verifies body of the filings -- details (comments)', () => {
+    const filings = [directorChange, administrativeDissolution]
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, undefined, filings)
+
+    cy.fixture('filings/directorChange/commentList.json').then((response) => {
+      cy.intercept(
+        'GET',
+        `**/api/v2/businesses/**/filings/${directorChange.filingId}/comments`,
+        response).as('detailsList')
+    })
+
+    cy.get(`[data-cy="details-list"]`).should('not.exist')
+
+    // expand filing
+    cy.get(`[data-cy="filingHistoryItem-default-filing-${directorChange.filingId}"]`)
+      .find('[data-cy="filing-main-action-button"]')
+      .click()
+
+    cy.wait('@detailsList')
+
+    cy.get(`[data-cy="details-list"]`).should('exist')
+    cy.get(`[data-cy="details-list"]`).contains('Details (2)')
+    cy.get(`[data-cy="details-list"]`).contains('this is another comment... test 123')
+    cy.get(`[data-cy="details-list"]`).contains('Test adding STAFF comments')
+
+    // collapse filing
+    cy.get(`[data-cy="filingHistoryItem-default-filing-${directorChange.filingId}"]`)
+      .find('[data-cy="filing-main-action-button"]')
+      .click()
+
+    cy.get(`[data-cy="details-list"]`).should('not.exist')
+  })
 })

cypress/fixtures/filings/directorChange/commentList.json

@@ -0,0 +1,24 @@
+{
+  "comments": [
+    {
+      "comment": {
+        "businessId": null,
+        "comment": "this is another comment... test 123",
+        "filingId": 150006,
+        "id": 620860,
+        "submitterDisplayName": "Business Registry Test 1",
+        "timestamp": "2024-08-02T05:14:39.403319+00:00"
+      }
+    },
+    {
+      "comment": {
+        "businessId": null,
+        "comment": "Test adding STAFF comments ",
+        "filingId": 150006,
+        "id": 620671,
+        "submitterDisplayName": "Business Registry Test 1",
+        "timestamp": "2024-07-29T17:36:29.851567+00:00"
+      }
+    }
+  ]
+}

cypress/fixtures/filings/directorChange/directorChange.ts

@@ -1,7 +1,7 @@
 export const directorChange = {
   availableOnPaperOnly: false,
   businessIdentifier: 'CP1002605',
-  commentsCount: 0,
+  commentsCount: 2,
   commentsLink:
     'https://legal-api-dev.apps.silver.devops.gov.bc.ca/api/v2/businesses/CP1002605/filings/150006/comments',
   data: {

src/components/bcros/filing/CommonTemplate.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-cy="`filingHistoryItem-${dataCy}-${filing.filingId}`" class="w-full bg-white p-3 rounded-sm">
+  <div :data-cy="`filingHistoryItem-${dataCy}-${filing.filingId}`" class="w-full bg-white px-6 py-3 rounded-sm">
     <div data-cy="filingHistoryItem-header" class="flex flex-row gap-2 items-center">
       <div class="flex flex-col">
         <strong class="item-header-title">
@@ -17,19 +17,19 @@
         </div>
 
         <slot name="detailsButton">
-          <UButton
-            v-if="filing.commentsCount > 0"
-            class="comments-btn mt-1"
-            outlined
-            color="primary"
-            :ripple="false"
-            @click.stop="isShowBody = !isShowBody"
-          >
-            <UIcon name="i-mdi-message-reply" size="small" />
-            <span>
-              {{ isShowBody ? $t('label.filing.detail') : $t('label.filing.detail') }}
-              ({{ filing.commentsCount }})</span>
-          </UButton>
+          <diV>
+            <UButton
+              v-if="filing.commentsCount > 0"
+              class="px-3 py-2"
+              variant="ghost"
+              @click.stop="isShowBody = !isShowBody"
+            >
+              <UIcon name="i-mdi-message-reply" size="small" />
+              <span>
+                {{ isShowBody ? $t('label.filing.detail') : $t('label.filing.detail') }}
+                ({{ filing.commentsCount }})</span>
+            </UButton>
+          </diV>
         </slot>
       </div>
       <div class="ml-auto order-2">
@@ -76,7 +76,7 @@
 
       <slot name="detail-comments">
         <!-- if we have detail comments, show them -->
-        <div v-if="filing.comments && filing.commentsCount > 0" class="mb-n2">
+        <div v-if="filing.commentsCount > 0 && filing.commentsLink" class="mb-n2">
           <UDivider class="my-6" />
           <BcrosFilingCommonDetailsList :filing="filing" />
         </div>
@@ -89,22 +89,21 @@
 import { FilingTypes } from '@bcrs-shared-components/enums'
 import type { ApiResponseFilingI } from '#imports'
 import { FilingStatusE, isFilingStatus } from '#imports'
+import { loadComments } from '~/utils/filings'
 
 const contacts = getContactInfo('registries')
 const t = useNuxtApp().$i18n.t
 
-const props = defineProps({
-  filing: { type: Object as PropType<ApiResponseFilingI>, required: true },
-  dataCy: { type: String, required: true }
-})
+const filing = defineModel('filing', { type: Object as PropType<ApiResponseFilingI>, required: true })
+defineProps({ dataCy: { type: String, required: true } })
 
-const isStatusPaid = computed(() => isFilingStatus(props.filing, FilingStatusE.PAID))
-const isStatusApproved = computed(() => isFilingStatus(props.filing, FilingStatusE.APPROVED))
+const isStatusPaid = computed(() => isFilingStatus(filing.value, FilingStatusE.PAID))
+const isStatusApproved = computed(() => isFilingStatus(filing.value, FilingStatusE.APPROVED))
 const isShowBody = ref(false)
 
 /** The title of this filing. */
 const title =
-  isFilingType(props.filing, FilingTypes.ALTERATION)
+  isFilingType(filing.value, FilingTypes.ALTERATION)
     ? t('filing.name.alteration')
-    : props.filing.displayName || t('filing.name.filing')
+    : filing.value.displayName || t('filing.name.filing')
 </script>

src/components/bcros/filing/common/DetailsList.vue

@@ -1,24 +1,27 @@
 <template>
-  <div class="details-list">
-    <div class="title-bar">
-      <h4>
-        <v-icon small>
-          mdi-message-reply
-        </v-icon>
-        <span class="ml-1">Detail{{ filing.comments.length > 1 ? "s" : "" }} ({{ filing.comments.length }})</span>
-      </h4>
-      <UButton
-        v-if="!isDisableNonBenCorps && hasRoleStaff"
-        color="primary"
-        :disabled="!filing.filingId"
-        @click="showCommentDialog()"
-      >
-        <span>Add Detail</span>
-      </UButton>
+  <div data-cy="details-list">
+    <div class="flex flex-row gap-2">
+      <div class="mt-auto pb-4">
+        <strong>
+          <UIcon name="i-mdi-message-reply" class="my-auto" />
+          <span class="pl-1">
+            {{ $t('label.filing.detail') }} ({{ filing.comments.length }})</span>
+        </strong>
+      </div>
+      <div class="ml-auto pr-2 order-2">
+        <UButton
+          v-if="!isDisableNonBenCorps() && hasRoleStaff"
+          class="rounded-sm px-3 py-2"
+          :disabled="!filing.filingId"
+          @click="showCommentDialog()"
+        >
+          <span>{{ $t('button.filing.actions.addDetail') }}</span>
+        </UButton>
+      </div>
     </div>
 
     <!-- the detail comments list-->
-    <div class="flex flex-col gap-3 pb-0" data-cy="detail-comments-list">
+    <div class="flex flex-col gap-5 pb-0 text-sm" data-cy="detail-comments-list">
       <div
         v-for="(comment, index) in filing.comments"
         :key="index"
@@ -43,17 +46,19 @@
 
 <script setup lang="ts">
 import type { ApiResponseFilingI } from '#imports'
+import { loadComments } from '~/utils/filings'
 
-defineProps({
-  filing: { type: Object as PropType<ApiResponseFilingI>, required: true }
-})
+const filing = defineModel('filing', { type: Object as PropType<ApiResponseFilingI>, required: true })
 
-const { isDisableNonBenCorps } = useBcrosBusiness()
+if (filing.value.commentsCount && filing.value.commentsLink) {
+  filing.value.comments = await loadComments(filing.value)
+}
 
+const { isDisableNonBenCorps } = useBcrosBusiness()
 const { hasRoleStaff } = storeToRefs(useBcrosKeycloak())
 
 const showCommentDialog = () => {
-  // todo: add after #21352 & #21305
+  // todo: add with 21305
 }
 
 </script>

src/components/bcros/filing/common/DocumentsList.vue

@@ -4,29 +4,33 @@
     class="flex flex-col gap-1"
     data-cy="filing-history-document-list"
   >
-    <UButton
-      v-for="(document, index) in filing.documents"
-      :key="index"
-      :label="document.title"
-      variant="ghost"
-      leading-icon="i-mdi-file-pdf-outline"
-      :disabled="isLoading && !!loadingDocuments.find(doc => doc === document)"
-      :loading="isLoading"
-      class="px-4 py-2 min-w-10 resize-x"
-      :data-cy="`download-document-button-${document.title}`"
-      @click="downloadOne(document)"
-    />
+    <div class="flex flex-col gap-1.5">
+      <div v-for="(document, index) in filing.documents" :key="index">
+        <UButton
+          :label="document.title"
+          variant="ghost"
+          leading-icon="i-mdi-file-pdf-outline"
+          :disabled="isLoading && !!loadingDocuments.find(doc => doc === document)"
+          :loading="isLoading"
+          class="px-4 py-2"
+          :data-cy="`download-document-button-${document.title}`"
+          @click="downloadOne(document)"
+        />
+      </div>
+    </div>
 
-    <UButton
-      :label="$t('button.filing.common.downloadAll')"
-      variant="ghost"
-      :disabled="isLoading"
-      :loading="isLoading"
-      leading-icon="i-mdi-download"
-      class="px-4 py-2 min-w-10"
-      data-cy="download-document-button-downloadAll"
-      @click="downloadAll()"
-    />
+    <div>
+      <UButton
+        :label="$t('button.filing.common.downloadAll')"
+        variant="ghost"
+        :disabled="isLoading"
+        :loading="isLoading"
+        leading-icon="i-mdi-download"
+        class="px-4 py-2 min-w-10"
+        data-cy="download-document-button-downloadAll"
+        @click="downloadAll()"
+      />
+    </div>
   </div>
 </template>
 

src/utils/filings.ts

@@ -1,4 +1,5 @@
 import { FilingTypes } from '@bcrs-shared-components/enums'
+import type { CommentIF } from '@bcrs-shared-components/interfaces'
 import type { ApiResponseFilingI, FetchDocumentsI, StateFilingI } from '#imports'
 import { FilingStatusE, FilingSubTypeE } from '#imports'
 
@@ -51,6 +52,22 @@ export const fetchDocumentList = async (url: string) => {
     })
 }
 
+/**
+ * Fetches the list of documents grouped by types.
+ * @param url the full URL to fetch the documents
+ * @returns the fetch documents object or throws error
+ */
+export const fetchComments = async (url: string) => {
+  return await useBcrosFetch<{ comments: CommentIF[] }>(url, { method: 'GET' })
+    .then(({ data, error }) => {
+      if (error.value || !data.value) {
+        console.warn('fetchDocuments() error - invalid response =', error?.value)
+        throw new Error('Failed to retrieve list of available documents for the filing')
+      }
+      return data?.value
+    })
+}
+
 /** Is True if this is a bootstrap filing item and should be displayed in the Filing History List. */
 export const isBootstrapFiling = computed((): boolean => {
   return false
@@ -62,3 +79,31 @@ export const isBootstrapFiling = computed((): boolean => {
   // isRegistrationFiling
   // )
 })
+
+export const loadComments = async (filing: ApiResponseFilingI): Promise<Array<CommentIF>> => {
+  try {
+    // fetch comments array from API
+    const commentsObj = await fetchComments(filing.commentsLink)
+    const comments = commentsObj.comments || []
+    // flatten and sort the comments
+    return flattenAndSortComments(comments)
+  } catch (error) {
+    filing.comments = undefined
+    console.info('loadComments() error =', error)
+    // FUTURE: enable some error dialog?
+  }
+  filing.commentsCount = filing.comments?.length || 0
+
+  /** Flattens and sorts an array of comments. */
+  function flattenAndSortComments (comments: Array<CommentIF>): Array<CommentIF> {
+    if (comments && comments.length > 0) {
+      // first use map to change comment.comment to comment
+      const temp: Array<any> = comments.map(c => c.comment)
+      // then sort newest to oldest
+      // NB: these `new Date()` are safe because we're comparing like units
+      temp.sort((a, b) => new Date(a.timestamp) < new Date(b.timestamp) ? 1 : -1)
+      return temp
+    }
+    return [] as CommentIF[]
+  }
+}