Skip to content

Commit

Permalink
fix: public multiple photos from detroit (#3390)
Browse files Browse the repository at this point in the history
* feat: add multiple photos

* feat: add tests

* feat: add images to seeds

* fix: return array when no image

* fix: shared helpers photos tests

* fix: add class with variables to parent element

* fix: make actions inside content section optional on desktop

* fix: pass modalCloseInContent prop to listing view's ImageCard

* fix: remove redundant image-card class

* chore: upgrade ui-c

* fix: remove redundant order column

* fix: change font for drawer title

* fix: remove default images value when editing
  • Loading branch information
KrissDrawing committed May 18, 2023
1 parent edf3af5 commit d56de28
Show file tree
Hide file tree
Showing 25 changed files with 544 additions and 285 deletions.
31 changes: 30 additions & 1 deletion backend/core/src/seeder/seeds/listings/listing-coliseum-seed.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,36 @@ const coliseumListing: ListingSeedType = {
smokingPolicy: "No Smoking",
unitAmenities: null,
yearBuilt: 2021,
images: [],
images: [
{
image: {
label: "building",
fileId:
"https://regional-dahlia-staging.s3-us-west-1.amazonaws.com/listings/triton/thetriton.png",
},
},
{
image: {
label: "building",
fileId:
"https://res.cloudinary.com/exygy/image/upload/w_1302,c_limit,q_65/dev/oakhouse_cgdqmx.jpg",
},
},
{
image: {
label: "building",
fileId:
"https://res.cloudinary.com/exygy/image/upload/w_1302,c_limit,q_65/dev/house_goo3cp.jpg",
},
},
{
image: {
label: "building",
fileId:
"https://regional-dahlia-staging.s3-us-west-1.amazonaws.com/listings/triton/thetriton.png",
},
},
],
applicationPickUpAddressOfficeHours: null,
buildingSelectionCriteria: null,
costsNotIncluded:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,29 @@ export class ListingDefaultBmrChartSeed extends ListingDefaultSeed {
ordinal: 1,
},
],
images: [
{
image: {
label: "building",
fileId:
"https://res.cloudinary.com/exygy/image/upload/w_1302,c_limit,q_65/dev/house_goo3cp.jpg",
},
},
{
image: {
label: "building",
fileId:
"https://regional-dahlia-staging.s3-us-west-1.amazonaws.com/listings/triton/thetriton.png",
},
},
{
image: {
label: "building",
fileId:
"https://res.cloudinary.com/exygy/image/upload/w_1302,c_limit,q_65/dev/oakhouse_cgdqmx.jpg",
},
},
],
})

const unitsToBeCreated: Array<Omit<UnitCreateDto, keyof BaseEntity>> = bmrUnits.map((unit) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,22 @@ export class ListingDefaultFCFSSeed extends ListingDefaultSeed {
reviewOrderType: "firstComeFirstServe" as ListingReviewOrder,
applicationDueDate: null,
events: [],
images: [
{
image: {
label: "building",
fileId:
"https://regional-dahlia-staging.s3-us-west-1.amazonaws.com/listings/triton/thetriton.png",
},
},
{
image: {
label: "building",
fileId:
"https://res.cloudinary.com/exygy/image/upload/w_1302,c_limit,q_65/dev/house_goo3cp.jpg",
},
},
],
})
}
}
4 changes: 2 additions & 2 deletions shared-helpers/__tests__/photos.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ describe("photos helper", () => {
],
} as Listing

expect(imageUrlFromListing(testListing)).toBe(
expect(imageUrlFromListing(testListing)[0]).toBe(
`https://res.cloudinary.com/exygy/image/upload/w_400,c_limit,q_65/1234.jpg`
)
})
Expand All @@ -55,6 +55,6 @@ describe("photos helper", () => {
],
} as Listing

expect(imageUrlFromListing(testListing)).toBe("5678")
expect(imageUrlFromListing(testListing)[0]).toBe("5678")
})
})
2 changes: 1 addition & 1 deletion shared-helpers/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
},
"dependencies": {
"@bloom-housing/backend-core": "^7.13.0",
"@bloom-housing/ui-components": "^12.0.8",
"@bloom-housing/ui-components": "^12.0.9",
"axios-cookiejar-support": "4.0.6",
"tough-cookie": "4.1.2"
},
Expand Down
3 changes: 3 additions & 0 deletions shared-helpers/src/locales/general.json
Original file line number Diff line number Diff line change
Expand Up @@ -668,6 +668,8 @@
"listings.maxIncomeYear": "Maximum Income / Year",
"listings.monthlyIncome": "%{income} per month",
"listings.moreBuildingSelectionCriteria": "Find out more about Building Selection Criteria",
"listings.moreImagesLabel": "images",
"listings.moreImagesAltDescription": "more images for %{listingName}",
"listings.neighborhoodBuildings": "Neighborhood Buildings",
"listings.noAvailableUnits": "There are no available units at this time.",
"listings.noOpenListings": "No listings currently have open applications.",
Expand Down Expand Up @@ -868,6 +870,7 @@
"t.at": "at",
"t.availability": "Availability",
"t.back": "Back",
"t.backToListing": "Back to listing",
"t.built": "Built",
"t.call": "Call",
"t.cancel": "Cancel",
Expand Down
37 changes: 28 additions & 9 deletions shared-helpers/src/utilities/photos.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,39 @@
import { Asset, Listing } from "@bloom-housing/backend-core/types"

export const CLOUDINARY_BUILDING_LABEL = "cloudinaryBuilding"

export const cloudinaryUrlFromId = (publicId: string, size = 400) => {
const cloudName = process.env.cloudinaryCloudName || process.env.CLOUDINARY_CLOUD_NAME
return `https://res.cloudinary.com/${cloudName}/image/upload/w_${size},c_limit,q_65/${publicId}.jpg`
}

export const imageUrlFromListing = (listing: Listing, size = 400) => {
// Use the new `image` field
export const getUrlForListingImage = (image: Asset, size = 400) => {
if (!image) return null

if (image.label == CLOUDINARY_BUILDING_LABEL) {
return cloudinaryUrlFromId(image.fileId, size)
} else {
return image.fileId
}
}

export const imageUrlFromListing = (listing: Listing, size = 400): string[] => {
const imageAssets =
listing?.images?.length && listing.images[0].image ? [listing.images[0].image] : listing?.assets
listing?.images?.length && listing.images[0].image
? listing.images
.sort((imageA, imageB) => (imageA.ordinal ?? 10) - (imageB?.ordinal ?? 10))
.map((imageObj) => imageObj.image)
: listing?.assets

// Fallback to `assets`
const cloudinaryBuilding = imageAssets?.find(
(asset: Asset) => asset.label == "cloudinaryBuilding"
)?.fileId
if (cloudinaryBuilding) return cloudinaryUrlFromId(cloudinaryBuilding, size)
const imageUrls = imageAssets
?.filter(
(asset: Asset) => asset.label === CLOUDINARY_BUILDING_LABEL || asset.label === "building"
)
?.map((asset: Asset) => {
return asset.label === CLOUDINARY_BUILDING_LABEL
? cloudinaryUrlFromId(asset.fileId, size)
: asset.fileId
})

return imageAssets?.find((asset: Asset) => asset.label == "building")?.fileId
return imageUrls?.length > 0 ? imageUrls : [""]
}
32 changes: 29 additions & 3 deletions sites/partners/cypress/e2e/03-listing.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,40 @@ describe("Listing Management Tests", () => {
cy.getByID("jurisdiction.id").select(listing["jurisdiction.id"])
cy.get("#name").type(listing["name"])
cy.get("#developer").type(listing["developer"])
cy.getByID("addPhotoButton").contains("Add Photo").click()
cy.get(`[data-testid="dropzone-input"]`).attachFile(
// Test photo upload
cy.getByTestId("add-photos-button").contains("Add Photo").click()
cy.getByTestId("dropzone-input").attachFile(
"cypress-automated-image-upload-071e2ab9-5a52-4f34-85f0-e41f696f4b96.jpeg",
{
subjectType: "drag-n-drop",
}
)
cy.get(`[data-testid="listing-photo-uploaded"]`).contains("Save").click()
cy.getByTestId("drawer-photos-table").contains(
"cypress-automated-image-upload-071e2ab9-5a52-4f34-85f0-e41f696f4b96"
)
cy.getByTestId("listing-photo-uploaded").contains("Save").click()
cy.getByTestId("photos-table").contains(
"cypress-automated-image-upload-071e2ab9-5a52-4f34-85f0-e41f696f4b96"
)

cy.getByTestId("add-photos-button").contains("Edit Photos").click()
cy.getByTestId("dropzone-input").attachFile(
"cypress-automated-image-upload-46806882-b98d-49d7-ac83-8016ab4b2f08.jpg",
{
subjectType: "drag-n-drop",
}
)
cy.getByTestId("drawer-photos-table").contains(
"cypress-automated-image-upload-46806882-b98d-49d7-ac83-8016ab4b2f08"
)
cy.getByTestId("listing-photo-uploaded").contains("Save").click()
cy.getByTestId("photos-table").contains(
"cypress-automated-image-upload-46806882-b98d-49d7-ac83-8016ab4b2f08"
)
cy.getByTestId("photos-table").get("tbody > tr").should("have.length", 2)
cy.getByTestId("photos-table")
.get("tbody > tr:nth-of-type(2)")
.should("not.contain", "Primary photo")
cy.getByID("buildingAddress.street").type(listing["buildingAddress.street"])
cy.getByID("neighborhood").type(listing["neighborhood"])
cy.getByID("buildingAddress.city").type(listing["buildingAddress.city"])
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion sites/partners/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
"dependencies": {
"@bloom-housing/backend-core": "^7.13.0",
"@bloom-housing/shared-helpers": "^7.7.1",
"@bloom-housing/ui-components": "^12.0.8",
"@bloom-housing/ui-components": "^12.0.9",
"@bloom-housing/ui-seeds": "^1.2.1",
"@mapbox/mapbox-sdk": "^0.13.0",
"ag-grid-community": "^26.0.0",
Expand Down
9 changes: 8 additions & 1 deletion sites/partners/page_content/locale_overrides/general.json
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,7 @@
"listings.dropOffAddress": "Drop Off Address",
"listings.dueDateQuestion": "Is there an application due date?",
"listings.editPreferences": "Edit Preferences",
"listings.editPhotos": "Edit Photos",
"listings.events.deleteConf": "Do you really want to delete this event?",
"listings.events.deleteThisEvent": "Delete this event",
"listings.events.openHouseNotes": "Open House Notes",
Expand All @@ -182,6 +183,7 @@
"listings.listingAvailabilityQuestion": "What is the listing availability?",
"listings.listingIsAlreadyLive": "This listing is already live. Updates will affect the applicant experience on the housing portal.",
"listings.listingName": "Listing Name",
"listings.listingPhoto": "Listing Photo",
"listings.listingStatus.active": "Open",
"listings.listingStatus.closed": "Closed",
"listings.listingStatus.pending": "Draft",
Expand Down Expand Up @@ -241,7 +243,9 @@
"listings.sections.lotteryResultsEdit": "Edit Results",
"listings.sections.lotteryResultsHelperText": "Upload Results",
"listings.sections.openHouse": "Open House",
"listings.sections.photoHelperText": "Select JPEG or PNG files",
"listings.sections.photo.helperText": "Select JPEG or PNG file to upload. Please upload horizontal images only at approximately 1440px. Up to 10 uploaded images allowed.",
"listings.sections.photo.primaryPhoto": "Primary photo",
"listings.sections.photo.maximumUpload": "Note: the maximum of 10 images have been uploaded.",
"listings.sections.photoSubtitle": "Upload an image for the listing that will be used as a preview.",
"listings.sections.photoTitle": "Listing Photo",
"listings.sections.rankingsResultsSubtitle": "Provide details about what happens to applications once they are submitted.",
Expand Down Expand Up @@ -368,15 +372,18 @@
"t.language": "Language",
"t.link": "Link",
"t.listing": "Listings",
"t.makePrimaryPhoto": "Make primary photo",
"t.listingSingle": "Listing",
"t.notes": "Notes",
"t.option": "Option",
"t.optional": "Optional",
"t.order": "Order",
"t.otherRelationShip": "Other Relationship",
"t.pending": "Pending",
"t.photos": "Photos",
"t.post": "Post",
"t.preview": "Preview",
"t.primary": "Primary",
"t.previewLowercase": "preview",
"t.resolved": "Resolved",
"t.role": "Role",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React, { useContext } from "react"
import {
t,
GridSection,
GridCell,
MinimalTable,
TableThumbnail,
} from "@bloom-housing/ui-components"
import { getUrlForListingImage } from "@bloom-housing/shared-helpers"
import { ListingContext } from "../../ListingContext"
import { Asset } from "@bloom-housing/backend-core/types"

const photoTableHeaders = {
preview: "t.preview",
fileName: "t.fileName",
primary: "t.primary",
}

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

const listingFormPhotos = listing.images
.sort((imageA, imageB) => imageA.ordinal - imageB.ordinal)
.map((image) => image.image as Asset)

const photoTableData = listingFormPhotos.map((image, index) => {
return {
preview: {
content: (
<TableThumbnail>
<img src={getUrlForListingImage(image)} alt={t("listings.sections.photoTitle")} />
</TableThumbnail>
),
},
fileName: { content: image.fileId.split("/").slice(-1).join() },
primary: {
content: index == 0 ? t("listings.sections.photo.primaryPhoto") : "",
},
}
})

return (
<GridSection
className="bg-primary-lighter"
title={t("listings.sections.photoTitle")}
grid={false}
inset
>
<GridSection columns={1}>
<GridCell>
{listing.images.length > 0 ? (
<MinimalTable
id="listingPhotoTable"
headers={photoTableHeaders}
data={photoTableData}
/>
) : (
<span className={"view-item__value"}>{t("t.none")}</span>
)}
</GridCell>
</GridSection>
</GridSection>
)
}

export default DetailListingPhotos
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ import AdditionalFees from "./sections/AdditionalFees"
import Units from "./sections/Units"
import BuildingDetails from "./sections/BuildingDetails"
import ListingIntro from "./sections/ListingIntro"
import ListingPhoto from "./sections/ListingPhoto"
import ListingPhotos from "./sections/ListingPhotos"
import BuildingFeatures from "./sections/BuildingFeatures"
import RankingsAndResults from "./sections/RankingsAndResults"
import ApplicationAddress from "./sections/ApplicationAddress"
Expand Down Expand Up @@ -306,7 +306,7 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
</TabList>
<TabPanel>
<ListingIntro jurisdictions={profile.jurisdictions} />
<ListingPhoto />
<ListingPhotos />
<BuildingDetails
listing={listing}
setLatLong={setLatitudeLongitude}
Expand Down
Loading

0 comments on commit d56de28

Please sign in to comment.