23968 Business Dashboard UI: implement background retry to check for latest state

package.json

@@ -2,7 +2,7 @@
   "name": "bcros-business-dashboard",
   "private": true,
   "type": "module",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "scripts": {
     "build": "nuxt generate",
     "build:local": "nuxt build",

src/app.config.ts

@@ -88,21 +88,27 @@ export default defineAppConfig({
       base: 'xs:min-w-[90vw] md:min-w-[720px] text-gray-700'
     },
     notification: {
-      title: 'text-white',
+      title: 'text-sm font-medium text-white max-w-full',
       description: 'text-white',
+      actions: 'flex items-center gap-2 mt-3 flex-shrink-0',
       background: 'bg-gray-700',
+      rounded: 'rounded',
+      ring: '',
       progress: {
         background: 'bg-transparent'
       },
       default: {
         closeButton: {
-          class: 'hover:text-gray-100',
-          color: 'gray'
+          icon: null,
+          label: 'Close',
+          variant: 'cancel'
         }
       }
     },
     notifications: {
-      position: 'bottom-5 left-[40%]'
+      position: 'top-20 bottom-[unset]',
+      width: 'w-full sm:w-5/12',
+      container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto'
     },
     radio: {
       base: 'h-5 w-5 mt-[3px]',
@@ -208,7 +214,12 @@ export default defineAppConfig({
     },
     button: {
       base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed ' +
-        'disabled:opacity-35 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0'
+        'disabled:opacity-35 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0',
+      variant: {
+        refresh: 'shadow-sm ring-1 ring-inset ring-gray-300 text-blue-500 bg-white',
+        cancel: 'shadow-sm ring-1 ring-inset ring-white text-white bg-transparant hover:bg-transparant' +
+         'focus-visible:ring-2 focus-visible:ring-blue-500 px-2 py-1'
+      }
     }
   }
 })

src/components/bcros/filing/addStaffFiling/Index.vue

@@ -22,6 +22,11 @@ const openCourtOrderModal = ref(false)
 const openDissolutionModal = ref(false)
 const openPutBackOnModal = ref(false)
 
+const emit = defineEmits(['saveLocalFilingEmit'])
+
+const saveEmitForPolling = () => {
+  emit('saveLocalFilingEmit')
+}
 // Create a restoration filing and navigate to the appropriate page
 const restoreCompany = async (restorationType: FilingSubTypeE = null) => {
   // create restoration filing
@@ -180,36 +185,47 @@ const actions: ComputedRef<Array<Array<MenuActionItem>>> = computed(() => {
     <LazyBcrosFilingAddStaffFilingModalFreezeUnfreeze
       v-if="openFreezeUnfreezeModal"
       @close="openFreezeUnfreezeModal = false"
+      @saved="saveEmitForPolling"
     />
     <LazyBcrosFilingAddStaffFilingModalForm
       v-if="openRegistrarNotationModal"
       :filing-type="FilingTypes.REGISTRARS_NOTATION"
       @close="openRegistrarNotationModal = false"
+      @saved="saveEmitForPolling"
     />
     <LazyBcrosFilingAddStaffFilingModalForm
       v-if="openRegistrarOrderModal"
       :filing-type="FilingTypes.REGISTRARS_ORDER"
       @close="openRegistrarOrderModal = false"
+      @saved="saveEmitForPolling"
     />
     <LazyBcrosFilingAddStaffFilingModalForm
       v-if="openCourtOrderModal"
       :filing-type="FilingTypes.COURT_ORDER"
       @close="openCourtOrderModal = false"
+      @saved="saveEmitForPolling"
     />
     <LazyBcrosFilingAddStaffFilingModalForm
       v-if="openDissolutionModal"
       :filing-type="FilingTypes.DISSOLUTION"
       @close="openDissolutionModal = false"
+      @saved="saveEmitForPolling"
     />
     <LazyBcrosFilingAddStaffFilingModalForm
       v-if="openPutBackOnModal"
       :filing-type="FilingTypes.PUT_BACK_ON"
       @close="openPutBackOnModal = false"
+      @saved="saveEmitForPolling"
     />
 
     <UDropdown v-if="actions[0].length > 0 && currentBusiness" :items="actions" :popper="{ placement: 'bottom-start' }">
       <template #default>
-        <UButton variant="ghost" data-cy="add-staff-filing" label="Add Staff Filing" icon="i-mdi-plus" />
+        <UButton
+          variant="ghost"
+          data-cy="add-staff-filing"
+          label="Add Staff Filing"
+          icon="i-mdi-plus"
+        />
       </template>
 
       <template #item="{ item }">

src/components/bcros/filing/addStaffFiling/modal/Form.vue

@@ -7,7 +7,7 @@ const t = useNuxtApp().$i18n.t
 const filings = useBcrosFilings()
 const business = useBcrosBusiness()
 const { currentBusiness, currentBusinessName } = storeToRefs(business)
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'saved'])
 const prop = defineProps({
   filingType: { type: String as () => FilingTypes, required: true }
 })
@@ -263,6 +263,7 @@ const submitFiling = async() => {
 const handleSubmit = () => {
   if (validate()) {
     submitFiling()
+    emit('saved')
   }
 }
 </script>

src/pages/dashboard.vue

@@ -18,6 +18,8 @@ const { todos } = storeToRefs(useBcrosTodos())
 const { getPendingCoa } = useBcrosFilings()
 const { filings } = storeToRefs(useBcrosFilings())
 const { pendingFilings } = storeToRefs(useBcrosBusinessBootstrap())
+const toast = useToast()
+const initialDateString = ref<Date | undefined>(undefined)
 const ui = useBcrosDashboardUi()
 
 const hasDirector = computed(() => {
@@ -80,6 +82,71 @@ const containRole = (roleType) => {
   )
 }
 
+const fetchBusinessDetailsWithDelay = async (identifier: string) => {
+  try {
+    const slimBusiness = await business.getBusinessDetails(identifier, undefined, true)
+    const lastModifiedDate = slimBusiness.lastModified ? apiToDate(slimBusiness.lastModified) : null
+    const initialDate = business.initialDateString ? business.initialDateString : null
+
+    if (lastModifiedDate && initialDate && lastModifiedDate.getTime() > initialDate.getTime()) {
+      toast.add({
+        id: 'outdated_data',
+        title: 'Details on this page have been updated. Refresh to view the latest information.',
+        timeout: 0,
+        actions: [{
+          label: 'Refresh',
+          variant: 'refresh',
+          color: 'primary',
+          click: () => {
+            reloadBusinessInfo()
+          }
+        }]
+      })
+    }
+  } catch (error) {
+    console.error('Error fetching business details:', error)
+  }
+}
+
+let pollingInterval: NodeJS.Timer | null = null
+let startTime: number = 0
+
+const startPolling = (identifier: string) => {
+  if (pollingInterval) { return } // Prevent starting if polling is active
+
+  startTime = Date.now()
+
+  const poll = () => {
+    const elapsedTime = Date.now() - startTime
+    let interval = 1000 // Default to 1 second
+
+    if (elapsedTime < 10000) {
+      interval = 1000 // Poll every 1 second for 10 seconds
+    } else if (elapsedTime < 60000) {
+      interval = 10000 // Poll every 10 seconds for next 50 seconds
+    } else if (elapsedTime < 1800000) {
+      interval = 60000 // Poll every 1 minute for next 29 minutes
+    } else {
+      interval = 3600000
+    } // Poll every 1 hour after 30 minutes
+
+    fetchBusinessDetailsWithDelay(identifier)
+    pollingInterval = setTimeout(poll, interval)
+  }
+
+  poll()
+}
+
+const stopPolling = () => {
+  if (pollingInterval) { clearTimeout(pollingInterval) }
+  pollingInterval = null
+}
+
+const handleButtonClicked = () => {
+  const identifier = route.params.identifier as string
+  stopPolling()
+  startPolling(identifier)
+}
 // load information for the business or the bootstrap business,
 // and load the todo tasks, pending-review item, and filing history
 const loadBusinessInfo = async (force = false) => {
@@ -103,12 +170,18 @@ const loadBusinessInfo = async (force = false) => {
       }
     } else {
       await business.loadBusiness(identifier, force)
-      business.loadBusinessAddresses(identifier, force)
-      business.loadParties(identifier, force)
-      useBcrosFilings().loadFilings(identifier, force)
-      useBcrosTodos().loadAffiliations(identifier)
-      useBcrosTodos().loadTasks(identifier, true)
+      await Promise.all([
+        business.loadBusinessAddresses(identifier, force),
+        business.loadParties(identifier, force),
+        useBcrosFilings().loadFilings(identifier, force),
+        useBcrosTodos().loadAffiliations(identifier),
+        useBcrosTodos().loadTasks(identifier, true)
+      ])
     }
+    // assign initial value from /business
+    initialDateString.value = business.initialDateString
+    // start polling schedule
+    startPolling(identifier)
   }
 }
 
@@ -250,6 +323,7 @@ const coaEffectiveDate = computed(() => {
 </script>
 
 <template>
+  <UNotifications />
   <BcrosDialogCardedModal
     name="confirmChangeofAddress"
     :display="showChangeOfAddress"
@@ -340,7 +414,11 @@ const coaEffectiveDate = computed(() => {
           <div>
             {{ $t('title.section.filingHistory') }}
             <span class="font-normal">({{ filings?.filter(f=>f.displayLedger).length || 0 }})</span>
-            <BcrosFilingAddStaffFiling v-if="isStaffAccount" class="float-right font-small overflow-auto" />
+            <BcrosFilingAddStaffFiling
+              v-if="isStaffAccount"
+              class="float-right font-small overflow-auto"
+              @save-local-filing-emit="handleButtonClicked"
+            />
           </div>
         </template>
         <BcrosFilingList :filings="filings" />

src/stores/business.ts

@@ -18,7 +18,7 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
   const currentParties: Ref<PartiesI> = ref(undefined)
 
   const currentBusinessIdentifier = computed((): string => currentBusiness.value?.identifier)
-
+  const initialDateString = ref<Date | undefined>(undefined)
   // set BUSINESS_ID session storage when business identifier is loaded
   watch(currentBusinessIdentifier, (value) => {
     if (value) {
@@ -67,9 +67,10 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
   }
 
   /** Return the business details for the given identifier */
-  async function getBusinessDetails (identifier: string, params?: object) {
+  async function getBusinessDetails (identifier: string, params?: object, slim: boolean = false) {
+    const url = `${apiURL}/businesses/${identifier}${slim ? '?slim=true' : ''}`
     return await useBcrosFetch<{ business: BusinessI }>(
-      `${apiURL}/businesses/${identifier}`,
+      url,
       { params, dedupe: 'defer' }
     )
       .then(({ data, error }) => {
@@ -170,21 +171,31 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
       })
   }
 
-  async function loadBusiness (identifier: string, force = false) {
+  async function loadBusiness(identifier: string, force = false) {
     const { trackUiLoadingStart, trackUiLoadingStop } = useBcrosDashboardUi()
 
     trackUiLoadingStart('businessInfoLoading')
 
     const businessCached = currentBusiness.value && identifier === currentBusinessIdentifier.value
+
     if (!businessCached || force) {
       fetchBusinessComments(identifier)
       currentBusiness.value = await getBusinessDetails(identifier) || {} as BusinessI
+
+      // Converting lastModified values to Date objects
+      const initialDate = apiToDate(currentBusiness.value.lastModified)
+      initialDateString.value = initialDate
+
       if (currentBusiness.value.stateFiling) {
         await loadStateFiling()
       }
+
       businessConfig.value = getBusinessConfig(currentBusiness.value.legalType)
     }
+
     trackUiLoadingStop('businessInfoLoading')
+
+    return { initialDateString }
   }
 
   async function loadBusinessContact (identifier: string, force = false) {
@@ -529,6 +540,7 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
     isAllowed,
     createCommentBusiness,
     comments,
-    commentsLoading
+    commentsLoading,
+    initialDateString
   }
 })