Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

hosts drafts #442

Merged
merged 6 commits into from
Jan 9, 2025
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feature flag, phone number issue, btn control updates, depreciation f…
…ix, other fixes

Signed-off-by: Kial Jinnah <[email protected]>
  • Loading branch information
kialj876 committed Jan 9, 2025
commit fc1eb29c7dde0dc5d45c9bf9fe28bede39bf8f12
4 changes: 2 additions & 2 deletions strr-base-web/app/components/connect/ButtonControl.vue
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

with 3 extra buttons I needed to update the styling for smaller screens

example:
Screenshot 2025-01-08 at 3 36 05 PM
Screenshot 2025-01-08 at 3 35 44 PM

Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
<div class="bg-white py-10" data-testid="button-control">
<div class="app-inner-container">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div v-if="leftButtons.length > 0">
<div>
<div class="flex justify-center gap-4 md:justify-start">
<UButton
v-for="(button, i) in leftButtons"
@@ -28,7 +28,7 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
/>
</div>
</div>
<div v-if="rightButtons.length > 0" class="col-span-1">
<div>
<div class="flex justify-center gap-4 md:justify-end">
<UButton
v-for="(button, i) in rightButtons"
8 changes: 4 additions & 4 deletions strr-base-web/app/components/connect/form/date/Picker.vue
Original file line number Diff line number Diff line change
@@ -44,10 +44,10 @@ watch(() => props.setMinDate, (val) => { minDate.value = val || null })
</div>
</template>
<style lang="scss">
@import '@vuepic/vue-datepicker/dist/main.css';
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@use '@vuepic/vue-datepicker/dist/main.css' as *;
@use 'tailwindcss/base' as *;
@use 'tailwindcss/components' as *;
@use 'tailwindcss/utilities' as *;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@import depreciated


.connect-date-picker {

Original file line number Diff line number Diff line change
@@ -73,8 +73,15 @@ onMounted(() => {
if (countryIso2.value !== undefined) {
selectCountry(countryIso2.value)
} else if (countryCallingCode.value) {
selectedCountry.value = {
callingCode: `+${countryCallingCode.value}`
// Set a country based on the calling code if available
const iso2 = search(countryCallingCode.value)[0]?.iso2
if (iso2) {
selectCountry(iso2)
} else {
selectedCountry.value = {
callingCode: countryCallingCode.value,
label: `+${countryCallingCode.value}`
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when loading from a draft we need this because the api doesn't save the iso2 for the phone number. Was resulting in weird functionality when re-editing an existing person with a phone number

}
}
}
})
39 changes: 39 additions & 0 deletions strr-base-web/app/composables/useButtonControl.ts
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alternatively we could just have these in a util like before. I like this a bit more because I think it's clearer where the 'buttonControl' functionality lives

Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import type { ConnectBtnControl } from '#imports'

export const useButtonControl = () => {
const route = useRoute()

function setButtonControl (buttonControl: ConnectBtnControl) {
route.meta.buttonControl = buttonControl
}

function getButtonControl (): ConnectBtnControl {
return route.meta.buttonControl as ConnectBtnControl
}

function handleButtonLoading (reset: boolean, buttonGrp?: 'left' | 'right', buttonIndex?: number) {
// set button control for loading / disabling buttons on submit or save or reset to default
const updateButtonGrp = (buttonArray: ConnectBtnControlItem[], grp: 'left' | 'right') => {
for (const [index, element] of buttonArray.entries()) {
if (reset) {
element.disabled = false
element.loading = false
} else {
element.loading = (grp === buttonGrp) && index === buttonIndex
element.disabled = !element.loading
}
}
}
const buttonControl = getButtonControl()
// update left buttons with loading / disabled as required
updateButtonGrp(buttonControl.leftButtons, 'left')
// update right buttons with loading / disabled as required
updateButtonGrp(buttonControl.rightButtons, 'right')
}

return {
getButtonControl,
setButtonControl,
handleButtonLoading
}
}
11 changes: 0 additions & 11 deletions strr-base-web/app/utils/buttonControl.ts

This file was deleted.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was able to remove this and build successfully (there was some weird issue before where we needed this component defined in each layer otherwise it would give a build error)

This file was deleted.

35 changes: 9 additions & 26 deletions strr-host-pm-web/app/pages/application.vue
Original file line number Diff line number Diff line change
@@ -6,6 +6,8 @@ const route = useRoute()
const localePath = useLocalePath()
const strrModal = useStrrModals()
const { handlePaymentRedirect } = useConnectNav()
const { setButtonControl, handleButtonLoading } = useButtonControl()
const ldStore = useConnectLaunchdarklyStore()

const propertyStore = useHostPropertyStore()
const { unitDetails, propertyTypeFeeTriggers } = storeToRefs(propertyStore)
@@ -133,27 +135,6 @@ const activeStep = ref<Step>(steps.value[activeStepIndex.value] as Step)
const stepperRef = shallowRef<InstanceType<typeof ConnectStepper> | null>(null)
const reviewFormRef = shallowRef<InstanceType<typeof FormReview> | null>(null)

// TODO: move button management into composable ?
const handleButtonLoading = (reset: boolean, buttonGrp?: 'left' | 'right', buttonIndex?: number) => {
// set button control for loading / disabling buttons on submit or save or reset to default
const updateButtonGrp = (buttonArray: ConnectBtnControlItem[], grp: 'left' | 'right') => {
for (const [index, element] of buttonArray.entries()) {
if (reset) {
element.disabled = false
element.loading = false
} else {
element.loading = (grp === buttonGrp) && index === buttonIndex
element.disabled = !element.loading
}
}
}
const buttonControl = getButtonControl()
// update left buttons with loading / disabled as required
updateButtonGrp(buttonControl.leftButtons, 'left')
// update right buttons with loading / disabled as required
updateButtonGrp(buttonControl.rightButtons, 'right')
}

const saveApplication = async (resumeLater = false) => {
handleButtonLoading(false, 'left', resumeLater ? 1 : 2)
// prevent flicker of buttons by waiting half a second
@@ -248,11 +229,13 @@ watch(activeStepIndex, (val) => {
})

setButtonControl({
leftButtons: [
{ action: () => navigateTo(localePath('/dashboard')), label: t('btn.cancel'), variant: 'outline' },
{ action: () => saveApplication(true), label: t('btn.saveExit'), variant: 'outline' },
{ action: saveApplication, label: t('btn.save'), variant: 'outline' }
],
leftButtons: ldStore.getStoredFlag('enable-save-draft')
? [
{ action: () => navigateTo(localePath('/dashboard')), label: t('btn.cancel'), variant: 'outline' },
{ action: () => saveApplication(true), label: t('btn.saveExit'), variant: 'outline' },
{ action: saveApplication, label: t('btn.save'), variant: 'outline' }
]
: [],
rightButtons: buttons
})
}, { immediate: true })
15 changes: 10 additions & 5 deletions strr-host-pm-web/app/pages/dashboard/index.vue
Copy link
Collaborator Author

@kialj876 kialj876 Jan 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

examples of new buttons / styling on big + small screens:
big screen
Screenshot 2025-01-08 at 3 39 35 PM
drop down
Screenshot 2025-01-08 at 3 44 12 PM
smaller screen
Screenshot 2025-01-08 at 3 40 24 PM

Original file line number Diff line number Diff line change
@@ -191,9 +191,12 @@ async function handleItemSelect (row: any) {
:aria-label="
kialj876 marked this conversation as resolved.
Show resolved Hide resolved
$t('btn.ariaViewDetails', {
name: row.name,
address: `${row.address.unitNumber
? row.address.unitNumber + '-'
: ''}${row.address.streetNumber} ${row.address.streetName}, ${row.address.city}`
address: row.address.streetName
? `${row.address.unitNumber
? row.address.unitNumber + '-'
: ''}${row.address.streetNumber} ${row.address.streetName}, ${row.address.city}`
: '',
number: row.applicationNumber
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not seeing number as a prop in the locale string?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated

})
"
:block="!isDraft(row.status)"
@@ -206,11 +209,13 @@ async function handleItemSelect (row: any) {
:aria-label="$t('text.showMoreOptions')"
/>
<template #panel>
<!-- TODO: not focusable via keyboard tab, should be fixed in nuxt/ui v3 -->
<UButton
class="m-2"
:label="$t('word.Delete')"
:label="$t('word.Remove')"
:aria-label="$t('word.Remove')"
variant="link"
@click="console.log('delete', row.applicationNumber)"
@click="console.log('remove', row.applicationNumber)"
/>
</template>
</UPopover>
6 changes: 5 additions & 1 deletion strr-host-pm-web/app/stores/hostApplication.ts
Original file line number Diff line number Diff line change
@@ -57,7 +57,11 @@ export const useHostApplicationStore = defineStore('host/application', () => {
? { propertyManager: formatOwnerPropertyManagerAPI(propertyManger) }
: {}
),
unitAddress: formatHostUnitAddressApi(propertyStore.unitAddress.address),
// @ts-expect-error - can be undefined for drafts edge case
unitAddress: reqStore.showUnitDetailsForm
// only save the entered address if it was fully entered / user selected continue registration
? formatHostUnitAddressApi(propertyStore.unitAddress.address)
: undefined,
unitDetails: formatHostUnitDetailsAPI(propertyStore.unitDetails, propertyStore.blInfo, reqStore.prRequirements),
documents: documentStore.apiDocuments,
strRequirements: reqStore.propertyReqs,
6 changes: 4 additions & 2 deletions strr-host-pm-web/app/stores/hostPermit.ts
Original file line number Diff line number Diff line change
@@ -42,8 +42,10 @@ export const useHostPermitStore = defineStore('host/permit', () => {
}
unitDetails.value = formatHostUnitDetailsUI(permitDetails.value.unitDetails)
blInfo.value = formatHostUnitDetailsBlInfoUI(permitDetails.value.unitDetails)
unitAddress.value = { address: formatHostUnitAddressUI(permitDetails.value.unitAddress) }
showUnitDetailsForm.value = !!unitAddress.value
if (permitDetails.value.unitAddress) {
unitAddress.value = { address: formatHostUnitAddressUI(permitDetails.value.unitAddress) }
}
showUnitDetailsForm.value = !!unitAddress.value?.address?.streetName
prRequirements.value.isPropertyPrExempt = !!permitDetails.value.unitDetails.prExemptReason
prRequirements.value.prExemptionReason = permitDetails.value.unitDetails.prExemptReason
if (application.value?.registration.strRequirements && unitAddress.value?.address?.streetName) {
Loading
Loading