Base/Examiner - UI: simplify expansion handling

strr-base-web/app/app.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { expansionInjectionKey } from '~/composables/useStrrExpansion'
+
 const i18nHead = useLocaleHead({
   addDirAttribute: true,
   addSeoAttributes: true
@@ -12,6 +14,13 @@ useHead({
   }
 })
 
+// provide initial expansion state
+const initialExpansionState = shallowRef<ExpansionState>({
+  component: 'div',
+  props: {}
+})
+provide(expansionInjectionKey, initialExpansionState)
+
 onMounted(async () => {
   const msgConfig = useAppConfig().strrBaseLayer.sbcWebMsg
 

strr-base-web/app/components/connect/ExpansionRoot.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { useStrrExpansion, expansionInjectionKey } from '~/composables/useStrrExpansion'
+
+const expansionState = inject(expansionInjectionKey)
+
+const { isExpanded } = useStrrExpansion()
+
+// This will currently only work with 1 component instance at a time (per page)
+</script>
+<template>
+  <ConnectTransitionCollapse>
+    <div v-if="isExpanded">
+      <component
+        :is="expansionState.component"
+        v-if="expansionState"
+        v-bind="expansionState.props"
+      />
+    </div>
+  </ConnectTransitionCollapse>
+</template>

strr-base-web/app/composables/useStrrExpansion.ts

@@ -0,0 +1,63 @@
+import type { ShallowRef, Component } from 'vue'
+import { createSharedComposable } from '@vueuse/core'
+import type { ExpansionState, Expansion, ComponentProps } from '~/types/strr-expansion'
+
+export const expansionInjectionKey: InjectionKey<ShallowRef<ExpansionState>> = Symbol('strr-examiner-expansion')
+
+function _useExpansion () {
+  const expansionState = inject(expansionInjectionKey)
+
+  const isExpanded = ref(false)
+
+  function open<T extends Component> (component: T, props?: Expansion & ComponentProps<T>) {
+    if (!expansionState) {
+      throw new Error('useExpansion() is called without provider')
+    }
+    // Set the shared expansion state
+    expansionState.value = {
+      component,
+      props: props ?? {}
+    }
+    isExpanded.value = true
+  }
+
+  function close () {
+    if (!expansionState?.value) { return }
+
+    isExpanded.value = false
+    reset()
+  }
+
+  function reset () {
+    if (!expansionState?.value) { return }
+
+    expansionState.value = {
+      component: 'div',
+      props: {} as Expansion & ComponentProps<any>
+    }
+  }
+
+  // TODO: implement ?
+  /**
+   * Update the expansion props partially.
+   */
+  // function patch<T extends Component = {}>(props: Partial<Expansion & ComponentProps<T>>) {
+  //   expansionState.value = {
+  //     ...expansionState.value,
+  //     props: {
+  //       ...expansionState.value.props,
+  //       ...props
+  //     }
+  //   }
+  // }
+
+  return {
+    open,
+    close,
+    reset,
+    // patch,
+    isExpanded
+  }
+}
+
+export const useStrrExpansion = createSharedComposable(_useExpansion)

strr-base-web/app/types/strr-expansion.ts

@@ -0,0 +1,13 @@
+export type ComponentProps<T> =
+T extends new () => { $props: infer P } ? NonNullable<P> :
+  T extends (props: infer P, ...args: any) => any ? P :
+      {}
+
+export interface Expansion {
+  onClose?: () => void
+}
+
+export interface ExpansionState {
+  component: Component | string
+  props: Expansion
+}

strr-examiner-web/app/components/Host/SubHeader.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 const props = defineProps<{ application: HostApplicationResp }>()
 const reg = props.application.registration
-defineEmits<{
-  openExpansion: [OpenExpansionEvent]
-}>()
+// defineEmits<{
+//   openExpansion: [OpenExpansionEvent]
+// }>()
 
 const { t } = useI18n()
+
+const hostExp = useHostExpansion()
 </script>
 <template>
   <div class="app-inner-container">
@@ -34,8 +36,9 @@ const { t } = useI18n()
             :label="displayContactFullName(reg.primaryContact!)"
             :padded="false"
             variant="link"
-            @click="$emit('openExpansion', [ExpansionItem.HOST_OWNERS, { display: 'primaryContact' }])"
+            @click="hostExp.openHostOwners(application, 'primaryContact')"
           />
+          <!-- @click="$emit('openExpansion', [ExpansionItem.HOST_OWNERS, { display: 'primaryContact' }])" -->
         </div>
         <div>
           <UIcon name="i-mdi-at" />
@@ -84,8 +87,9 @@ const { t } = useI18n()
               : reg?.secondaryContact?.businessLegalName"
             :padded="false"
             variant="link"
-            @click="$emit('openExpansion', [ExpansionItem.HOST_OWNERS, { display: 'secondaryContact' }])"
+            @click="hostExp.openHostOwners(application, 'secondaryContact')"
           />
+          <!-- @click="$emit('openExpansion', [ExpansionItem.HOST_OWNERS, { display: 'secondaryContact' }])" -->
         </div>
 
         <div v-if="reg?.propertyManager?.propertyManagerType" class="flex items-center gap-1">
@@ -96,8 +100,9 @@ const { t } = useI18n()
               : reg?.propertyManager?.business?.legalName"
             :padded="false"
             variant="link"
-            @click="$emit('openExpansion', [ExpansionItem.HOST_OWNERS, { display: 'propertyManager' }])"
+            @click="hostExp.openHostOwners(application, 'propertyManager')"
           />
+          <!-- @click="$emit('openExpansion', [ExpansionItem.HOST_OWNERS, { display: 'propertyManager' }])" -->
         </div>
       </div>
     </div>

strr-examiner-web/app/composables/useHostExpansion.ts

@@ -0,0 +1,30 @@
+// https://ui.nuxt.com/components/modal#control-programmatically
+import {
+  HostExpansionOwners
+} from '#components'
+
+export const useHostExpansion = () => {
+  const exp = useStrrExpansion()
+
+  function openHostOwners (
+    application: HostApplicationResp,
+    display: 'primaryContact' | 'secondaryContact' | 'propertyManager'
+  ) {
+    exp.open(HostExpansionOwners, {
+      application,
+      display,
+      onClose () {
+        exp.close()
+      }
+    })
+  }
+
+  function close () {
+    exp.close()
+  }
+
+  return {
+    openHostOwners,
+    close
+  }
+}

strr-examiner-web/app/pages/examine/[applicationId].vue

@@ -17,15 +17,15 @@ definePageMeta({
 })
 
 const initialMount = ref(true) // flag for whether to fetch next or specific application on mount - true until initial application is loaded
-const showExpansion = ref<boolean>(false) // show/hide expansion items
-const expansionItem = ref<ExpansionItem | undefined>(undefined) // expansion component to display
-const expansionProps: Ref<Record<string, unknown>> = ref({}) // any props passed to expansion components
+// const showExpansion = ref<boolean>(false) // show/hide expansion items
+// const expansionItem = ref<ExpansionItem | undefined>(undefined) // expansion component to display
+// const expansionProps: Ref<Record<string, unknown>> = ref({}) // any props passed to expansion components
 
-const manageExpansion = (e: OpenExpansionEvent) => {
-  expansionItem.value = e[0] // set expansion component to open
-  expansionProps.value = e[1] // bind any custom props
-  showExpansion.value = true
-}
+// const manageExpansion = (e: OpenExpansionEvent) => {
+//   expansionItem.value = e[0] // set expansion component to open
+//   expansionProps.value = e[1] // bind any custom props
+//   showExpansion.value = true
+// }
 
 // TODO: fix typing
 const { data, status, error, refresh } = await useAsyncData<HousApplicationResponse>(
@@ -123,18 +123,19 @@ watch(
         <HostSubHeader
           v-if="application?.registration.registrationType === ApplicationType.HOST"
           :application
-          @open-expansion="manageExpansion"
         />
+        <!-- @open-expansion="manageExpansion" -->
       </div>
 
       <div class="app-inner-container space-y-10 py-10">
-        <ExpansionContainer
+        <ConnectExpansionRoot />
+        <!-- <ExpansionContainer
           v-model="showExpansion"
           v-bind="expansionProps"
           :application
           :expansion-item="expansionItem"
           @close="showExpansion = false"
-        />
+        /> -->
 
         <!-- TODO: other supporting info -->
         <HostSupportingInfo

strr-examiner-web/package.json

@@ -2,7 +2,7 @@
   "name": "strr-examiner-web",
   "private": true,
   "type": "module",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",