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

1317/listings management, building details & intro #1420

Merged
merged 4 commits into from
Jun 28, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
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
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ All notable changes to this project will be documented in this file. The format
- Add Additional Eligibility section to listing management ([#1374](https://github.com/bloom-housing/bloom/pull/1374)) (Emily Jablonski)
- Add Leasing Agent section to listing management ([#1349](https://github.com/bloom-housing/bloom/pull/1349)) (Emily Jablonski)
- Add Additional Fees section to listing management ([#1377](https://github.com/bloom-housing/bloom/pull/1377)) (Emily Jablonski)
- Add Building Details and Intro section to listing management ([#1420](https://github.com/bloom-housing/bloom/pull/1420)) (Emily Jablonski)

- Fixed:

Expand Down
6 changes: 4 additions & 2 deletions sites/partners/pages/listings/[id]/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ import Layout from "../../../layouts"
import Aside from "../../../src/listings/Aside"
import { ListingContext } from "../../../src/listings/ListingContext"
import DetailListingData from "../../../src/listings/PaperListingDetails/sections/DetailListingData"
import DetailProperty from "../../../src/listings/PaperListingDetails/sections/DetailProperty"
import DetailListingIntro from "../../../src/listings/PaperListingDetails/sections/DetailListingIntro"
import DetailBuildingDetails from "../../../src/listings/PaperListingDetails/sections/DetailBuildingDetails"
import DetailApplication from "../../../src/listings/PaperListingDetails/sections/DetailApplication"
import DetailAdditionalDetails from "../../../src/listings/PaperListingDetails/sections/DetailAdditionalDetails"
import DetailAdditionalEligibility from "../../../src/listings/PaperListingDetails/sections/DetailAdditionalEligibility"
Expand Down Expand Up @@ -102,7 +103,8 @@ export default function ApplicationsList() {
<div className="flex flex-row flex-wrap ">
<div className="info-card md:w-9/12">
<DetailListingData />
<DetailProperty />
<DetailListingIntro />
<DetailBuildingDetails />
<DetailApplication />
<DetailAdditionalFees />
<DetailAdditionalEligibility />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const DetailAdditionalDetails = () => {

return (
<GridSection
className="bg-primary-ligher"
className="bg-primary-lighter"
title={t("listings.sections.additionalDetails")}
grid={false}
inset
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const DetailAdditionalEligibility = () => {

return (
<GridSection
className="bg-primary-ligher"
className="bg-primary-lighter"
title={t("listings.sections.additionalEligibilityTitle")}
grid={false}
inset
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import React, { useContext } from "react"
import { t, GridSection, ViewItem, GridCell } from "@bloom-housing/ui-components"
import { ListingContext } from "../../ListingContext"

const DetailAdditionalDetails = () => {
const DetailAdditionalFees = () => {
const listing = useContext(ListingContext)

return (
<GridSection
className="bg-primary-ligher"
className="bg-primary-lighter"
title={t("listings.sections.additionalFees")}
grid={false}
inset
Expand All @@ -34,4 +34,4 @@ const DetailAdditionalDetails = () => {
)
}

export default DetailAdditionalDetails
export default DetailAdditionalFees
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const DetailApplication = () => {

return (
<GridSection
className="bg-primary-ligher"
className="bg-primary-lighter"
title={t("listings.applicationTitle")}
grid={false}
inset
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React, { useContext } from "react"
import { t, GridSection, ViewItem, GridCell } from "@bloom-housing/ui-components"
import { ListingContext } from "../../ListingContext"

const DetailBuildingDetails = () => {
const listing = useContext(ListingContext)

return (
<GridSection
className="bg-primary-lighter"
title={t("listings.sections.buildingDetailsTitle")}
grid={false}
inset
>
<GridSection columns={3}>
<GridCell span={2}>
<ViewItem label={t("application.contact.streetAddress")}>
{listing.buildingAddress.street}
</ViewItem>
</GridCell>
<ViewItem label={t("t.neighborhood")}>{listing.neighborhood}</ViewItem>
</GridSection>
<GridSection columns={6}>
<GridCell span={2}>
<ViewItem label={t("application.contact.city")}>{listing.buildingAddress.city}</ViewItem>
</GridCell>
<ViewItem label={t("application.contact.state")}>{listing.buildingAddress.state}</ViewItem>
<ViewItem label={t("application.contact.zip")}>{listing.buildingAddress.zipCode}</ViewItem>

<GridCell span={2}>
<ViewItem label={t("listings.yearBuilt")}>{listing.yearBuilt}</ViewItem>
</GridCell>
</GridSection>
<GridSection columns={3}>
<ViewItem label={t("listings.longitude")}>{listing.buildingAddress.longitude}</ViewItem>
<ViewItem label={t("listings.latitude")}>{listing.buildingAddress.latitude}</ViewItem>
</GridSection>
</GridSection>
)
}

export default DetailBuildingDetails
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const DetailLeasingAgent = () => {

return (
<GridSection
className="bg-primary-ligher"
className="bg-primary-lighter"
title={t("listings.sections.leasingAgentTitle")}
grid={false}
inset
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React, { useContext } from "react"
import { t, GridSection, ViewItem, GridCell } from "@bloom-housing/ui-components"
import { ListingContext } from "../../ListingContext"

const DetailListingIntro = () => {
const listing = useContext(ListingContext)

return (
<GridSection
className="bg-primary-lighter"
title={t("listings.sections.introTitle")}
grid={false}
inset
>
<GridSection columns={3}>
<GridCell span={2}>
<ViewItem label={t("listings.listingName")}>{listing.name}</ViewItem>
</GridCell>
<ViewItem label={t("listings.developer")}>{listing.developer}</ViewItem>
</GridSection>
</GridSection>
)
}

export default DetailListingIntro
14 changes: 11 additions & 3 deletions sites/partners/src/listings/PaperListingForm/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ import AdditionalDetails from "./sections/AdditionalDetails"
import AdditionalEligibility from "./sections/AdditionalEligibility"
import LeasingAgent from "./sections/LeasingAgent"
import AdditionalFees from "./sections/AdditionalFees"
import BuildingDetails from "./sections/BuildingDetails"
import ListingIntro from "./sections/ListingIntro"

type FormListing = ListingCreate & ListingUpdate

Expand Down Expand Up @@ -95,7 +97,7 @@ const defaults: FormListing = {
unitsAvailable: 0,
unitAmenities: "",
servicesOffered: "",
yearBuilt: 0,
yearBuilt: 2021,
Copy link
Collaborator

Choose a reason for hiding this comment

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

Maybe generate year dynamically based on the current date?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is just temporary through the MVP :)

}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
Expand Down Expand Up @@ -142,12 +144,16 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
setAlert(null)
setLoading(true)
try {
const typedData: FormListing = {
...data,
yearBuilt: data.yearBuilt ? Number(data.yearBuilt) : null,
}
const result = editMode
? await listingsService.update({
listingId: listing.id,
body: { id: listing.id, ...data },
body: { id: listing.id, ...typedData },
})
: await listingsService.create({ body: data })
: await listingsService.create({ body: typedData })
setLoading(false)

if (result) {
Expand Down Expand Up @@ -214,7 +220,9 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
<Form id="listing-form" onSubmit={handleSubmit(triggerSubmit, onError)}>
<div className="flex flex-row flex-wrap">
<div className="info-card md:w-9/12">
<ListingIntro />
<FormListingData />
<BuildingDetails />
<AdditionalFees />
<AdditionalEligibility />
<AdditionalDetails />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const AdditionalDetails = () => {
<GridSection grid={false} separator>
<span className="form-section__title">{t("listings.sections.additionalDetails")}</span>
<span className="form-section__description">
{t("listings.sections.additionalDetailsSubtext")}
{t("listings.sections.additionalDetailsSubtitle")}
</span>
<GridSection columns={2}>
<Textarea
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React from "react"
import { useFormContext } from "react-hook-form"
import {
t,
GridSection,
GridCell,
Field,
ViewItem,
Select,
stateKeys,
} from "@bloom-housing/ui-components"

const BuildingDetails = () => {
const formMethods = useFormContext()

// eslint-disable-next-line @typescript-eslint/unbound-method
const { register } = formMethods

return (
<GridSection grid={false} columns={3} separator>
<span className="form-section__title">{t("listings.sections.buildingDetailsTitle")}</span>
<span className="form-section__description">
{t("listings.sections.buildingDetailsSubtitle")}
</span>

<GridSection columns={3}>
<GridCell span={2}>
<Field
label={t("application.contact.streetAddress")}
name={"buildingAddress.street"}
Copy link
Collaborator

Choose a reason for hiding this comment

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

It's fine either way, but I'd suggest using the prop="string" instead of prop={"string"} style unless there's something dynamic/computed going on. (just a little easier to read)

id={"buildingAddress.street"}
placeholder={t("application.contact.streetAddress")}
register={register}
/>
</GridCell>
<Field
label={t("t.neighborhood")}
name={"neighborhood"}
id={"neighborhood"}
placeholder={t("t.neighborhood")}
register={register}
/>
</GridSection>
<GridSection columns={6}>
<GridCell span={2}>
<Field
label={t("application.contact.city")}
name={"buildingAddress.city"}
id={"buildingAddress.city"}
placeholder={t("application.contact.city")}
register={register}
/>
</GridCell>
<ViewItem label={t("application.contact.state")} className="mb-0">
<Select
Copy link

Choose a reason for hiding this comment

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

Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

id={`buildingAddress.state`}
name={`buildingAddress.state`}
label={t("application.contact.state")}
labelClassName="sr-only"
register={register}
controlClassName="control"
options={stateKeys}
keyPrefix="states"
errorMessage={t("errors.stateError")}
/>
</ViewItem>
<Field
label={t("application.contact.zip")}
name={"buildingAddress.zipCode"}
id={"buildingAddress.zipCode"}
placeholder={t("application.contact.zip")}
errorMessage={t("errors.zipCodeError")}
register={register}
/>
<GridCell span={2}>
<Field
label={t("listings.yearBuilt")}
name={"yearBuilt"}
id={"yearBuilt"}
placeholder={t("listings.yearBuilt")}
type={"number"}
register={register}
/>
</GridCell>
</GridSection>
<GridSection columns={3}>
<Field
label={t("listings.longitude")}
name={"buildingAddress.longitude"}
id={"buildingAddress.longitude"}
placeholder={t("listings.longitude")}
register={register}
/>
<Field
label={t("listings.latitude")}
name={"buildingAddress.latitude"}
id={"buildingAddress.latitude"}
placeholder={t("listings.latitude")}
register={register}
/>
</GridSection>
</GridSection>
)
}

export default BuildingDetails
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react"
import { useFormContext } from "react-hook-form"
import { t, GridSection, Field, FormAddress } from "@bloom-housing/ui-components"
import { t, GridSection, Field } from "@bloom-housing/ui-components"

const FormListingData = () => {
const formMethods = useFormContext()
Expand All @@ -9,45 +9,15 @@ const FormListingData = () => {
const { register } = formMethods

return (
<div>
<GridSection grid={false} separator>
<GridSection columns={3}>
<Field
id="name"
name="name"
label={t("listings.listingName")}
placeholder={t("listings.listingName")}
register={register}
/>
</GridSection>
<GridSection grid={false} separator>
<FormAddress
subtitle={t("listings.buildingAddress")}
dataKey="buildingAddress"
type="mailing"
register={register}
/>
</GridSection>
</GridSection>
<GridSection grid={false} separator>
<GridSection columns={3}>
<Field
id="developer"
name="developer"
label={t("listings.developer")}
placeholder={t("listings.developer")}
register={register}
/>
<Field
id="applicationDueDate"
name="applicationDueDate"
label={t("listings.applicationDeadline")}
placeholder="MM-DD-YYYY"
register={register}
/>
</GridSection>
</GridSection>
</div>
<GridSection columns={3} separator>
<Field
id="applicationDueDate"
name="applicationDueDate"
label={t("listings.applicationDeadline")}
placeholder="MM-DD-YYYY"
register={register}
/>
</GridSection>
)
}

Expand Down
Loading