From 28c5f5afea4bbcc177fd71655d3d43b17945031c Mon Sep 17 00:00:00 2001 From: Remy van der Wereld Date: Mon, 30 Dec 2024 19:57:19 +0100 Subject: [PATCH] WON-54 Added holiday rental registrations component --- .../HolidayRentalRegistrations.tsx | 44 +++++ .../components/Registration.tsx | 30 +++ .../components/hooks/useValues.tsx | 32 ++++ .../HolidayRentalRegistrations/types.ts | 9 + src/index.ts | 4 + .../HolidayRentalRegistrations.stories.tsx | 20 ++ .../holidayRentalRegistrationsData.ts | 176 ++++++++++++++++++ 7 files changed, 315 insertions(+) create mode 100644 src/components/HolidayRentalRegistrations/HolidayRentalRegistrations.tsx create mode 100644 src/components/HolidayRentalRegistrations/components/Registration.tsx create mode 100644 src/components/HolidayRentalRegistrations/components/hooks/useValues.tsx create mode 100644 src/components/HolidayRentalRegistrations/types.ts create mode 100644 src/stories/HolidayRentalRegistrations.stories.tsx create mode 100644 src/stories/mockedData/holidayRentalRegistrationsData.ts diff --git a/src/components/HolidayRentalRegistrations/HolidayRentalRegistrations.tsx b/src/components/HolidayRentalRegistrations/HolidayRentalRegistrations.tsx new file mode 100644 index 00000000..e060d6cf --- /dev/null +++ b/src/components/HolidayRentalRegistrations/HolidayRentalRegistrations.tsx @@ -0,0 +1,44 @@ +import React from "react" +import Placeholder from "../Data/components/Placeholder" +import type { HolidayRentalRegistration } from "./types" +import Registration from "./components/Registration" +import LoadingRows from "../Data/components/LoadingRows" + +type Props = { + data: HolidayRentalRegistration[] + loading?: boolean + horizontalBordered?: boolean +} + +/** + * Detailed overview of Vakantieverhuur registraties. + */ + +const HolidayRentalRegistrations: React.FC = ({ + data, loading = false, horizontalBordered = true +}) => { + + if (loading) { + return + } + return ( + <> + { data === undefined || data.length === 0 ? ( + Geen registraties gevonden + ) : ( + <> + { data.map(registration => ( + + ) + )} + + )} + + ) +} + +export default HolidayRentalRegistrations diff --git a/src/components/HolidayRentalRegistrations/components/Registration.tsx b/src/components/HolidayRentalRegistrations/components/Registration.tsx new file mode 100644 index 00000000..2bc50410 --- /dev/null +++ b/src/components/HolidayRentalRegistrations/components/Registration.tsx @@ -0,0 +1,30 @@ +import React from "react" +import styled from "styled-components" +import DefinitionList from "../../Data/DefinitionList/DefinitionList" +import useValues from "./hooks/useValues" +import type { HolidayRentalRegistration } from "../types" + +type Props = { + registration: HolidayRentalRegistration + horizontalBordered?: boolean +} + +const StyledDiv = styled.div` + margin-top: 12px; +` + +const Registration: React.FC = ({ registration, horizontalBordered }) => { + const values = useValues(registration) + return ( + + + + ) +} + +export default Registration \ No newline at end of file diff --git a/src/components/HolidayRentalRegistrations/components/hooks/useValues.tsx b/src/components/HolidayRentalRegistrations/components/hooks/useValues.tsx new file mode 100644 index 00000000..c854e7e6 --- /dev/null +++ b/src/components/HolidayRentalRegistrations/components/hooks/useValues.tsx @@ -0,0 +1,32 @@ +import React from "react" +import type { HolidayRentalRegistration } from "../../types" +import DateDisplay from "../../../DateDisplay/DateDisplay" + +const formatRequester = (requester: HolidayRentalRegistration["requester"]) => { + const { personalDetails } = requester + const name = `${ personalDetails?.firstName ?? "" } ${ personalDetails?.lastNamePrefix ? `${ personalDetails?.lastNamePrefix } ` : "" }${ personalDetails?.lastName ?? "" }` + return name +} + +export default (registration: HolidayRentalRegistration) => { + const { + registrationNumber, + requester, + agreementDate, + createdAt, + requestForBedAndBreakfast + } = registration + + const requesterName = formatRequester(requester) + + const values = { + "Registratienummer": registrationNumber, + "Aanvrager": requesterName, + "E-mail": requester?.email, + "Aangemaakt": , + "Overeenkomstdatum": , + "Verzoek voor B&B": requestForBedAndBreakfast ? "Ja" : "Nee" + } + + return values +} diff --git a/src/components/HolidayRentalRegistrations/types.ts b/src/components/HolidayRentalRegistrations/types.ts new file mode 100644 index 00000000..c91d0e5a --- /dev/null +++ b/src/components/HolidayRentalRegistrations/types.ts @@ -0,0 +1,9 @@ +export type HolidayRentalRegistration = { + registrationNumber: string + requester: Record + rentalHouse: Record + requestForOther: boolean + requestForBedAndBreakfast: boolean + createdAt: string + agreementDate: string +} diff --git a/src/index.ts b/src/index.ts index afc4f3b8..6f77a804 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,7 @@ import type CaseEvent from "./components/EventsTimeline/CaseEvent" import type Permit from "./components/PermitsOverview/Permit" import type PermitType from "./components/PermitsSynopsis/PermitType" +import type { HolidayRentalRegistration } from "./components/HolidayRentalRegistrations/types" import type { RentalReport } from "./components/HolidayRentalReports/types" import type { DefinitionListData } from "./components/Data/DefinitionList/DefinitionList" import type { ColumnType, Sorting } from "./components/Data/Table/types" @@ -26,9 +27,11 @@ import Table from "./components/Data/Table/Table" import TextWithLinebreaks from "./components/TextWithLinebreaks/TextWithLinebreaks" import TextWithURLs from "./components/TextWithURLs/TextWithURLs" import * as Icons from "./components/Icons" +import HolidayRentalRegistrations from "./components/HolidayRentalRegistrations/HolidayRentalRegistrations" export type { CaseEvent, + HolidayRentalRegistration, Permit, PermitType, RentalReport, @@ -47,6 +50,7 @@ export { EventsTimeline, FinancialDisplay, getValidPermits, + HolidayRentalRegistrations, HolidayRentalReports, Icons, isValidDate, diff --git a/src/stories/HolidayRentalRegistrations.stories.tsx b/src/stories/HolidayRentalRegistrations.stories.tsx new file mode 100644 index 00000000..e47dec2f --- /dev/null +++ b/src/stories/HolidayRentalRegistrations.stories.tsx @@ -0,0 +1,20 @@ +import { Meta, StoryObj } from "@storybook/react" +import { HolidayRentalRegistrations } from "../index" +import holidayRentalRegistrationsData from "./mockedData/holidayRentalRegistrationsData" + +const meta: Meta = { + title: "HolidayRentalRegistrations", + component: HolidayRentalRegistrations +} + +export default meta + +type Story = StoryObj; + +export const Default: Story = { + args: { + data: holidayRentalRegistrationsData, + horizontalBordered: true, + loading: false + } +} diff --git a/src/stories/mockedData/holidayRentalRegistrationsData.ts b/src/stories/mockedData/holidayRentalRegistrationsData.ts new file mode 100644 index 00000000..801428b9 --- /dev/null +++ b/src/stories/mockedData/holidayRentalRegistrationsData.ts @@ -0,0 +1,176 @@ +import { HolidayRentalRegistration } from "../../components/HolidayRentalRegistrations/types" + +const holidayRentalRegistrationsData: HolidayRentalRegistration[] = [ + { + "registrationNumber": "0363 98C3 E248 CBC3 E906", + "requester": { + "personType": "LegalEntity", + "email": "luke@skywalker.org", + "bsn": null, + "personalDetails": { + "firstName": "Luke", + "lastNamePrefix": null, + "lastName": "Skywalker" + } + }, + "rentalHouse": { + "street": "Amstel", + "houseNumber": "1", + "houseLetter": null, + "houseNumberExtension": null, + "postalCode": "1011PN", + "city": "Amsterdam", + "shortName": "Amstel", + "adresseerbaarObjectIdentificatie": "0363010012143319", + "nummeraanduidingIdentificatie": "0363200012145295", + "openbareRuimteIdentificatie": "0363300000002701", + "woonplaatsIdentificatie": "3594", + "pandIdentificaties": [ + "0363100012186092" + ], + "owner": null + }, + "requestForOther": false, + "requestForBedAndBreakfast": true, + "createdAt": "2021-07-13T13:49:11.3915875Z", + "agreementDate": "2021-07-13T13:49:11.3915875Z" + }, + { + "registrationNumber": "0363 A376 B039 B516 8EED", + "requester": { + "personType": "NaturalPerson", + "email": "leia@organa.org", + "bsn": null, + "personalDetails": { + "firstName": "Leia", + "lastNamePrefix": null, + "lastName": "Organa" + } + }, + "rentalHouse": { + "street": "Amstel", + "houseNumber": "1", + "houseLetter": null, + "houseNumberExtension": null, + "postalCode": "1011PN", + "city": "Amsterdam", + "shortName": "Amstel", + "adresseerbaarObjectIdentificatie": "0363010012143319", + "nummeraanduidingIdentificatie": "0363200012145295", + "openbareRuimteIdentificatie": "0363300000002701", + "woonplaatsIdentificatie": "3594", + "pandIdentificaties": [ + "0363100012186092" + ], + "owner": null + }, + "requestForOther": false, + "requestForBedAndBreakfast": false, + "createdAt": "2022-08-24T09:20:46.4590698Z", + "agreementDate": "2022-08-24T09:20:46.4590698Z" + }, + { + "registrationNumber": "0363 3BF1 1D4A 06A8 1DBC", + "requester": { + "personType": "NaturalPerson", + "email": "obi-wan@kenobi.org", + "bsn": null, + "personalDetails": { + "firstName": "Obi-Wan", + "lastNamePrefix": null, + "lastName": "Kenobi" + } + }, + "rentalHouse": { + "street": "Amstel", + "houseNumber": "1", + "houseLetter": null, + "houseNumberExtension": null, + "postalCode": "1011PN", + "city": "Amsterdam", + "shortName": "Amstel", + "adresseerbaarObjectIdentificatie": "0363010012143319", + "nummeraanduidingIdentificatie": "0363200012145295", + "openbareRuimteIdentificatie": "0363300000002701", + "woonplaatsIdentificatie": "3594", + "pandIdentificaties": [ + "0363100012186092" + ], + "owner": null + }, + "requestForOther": false, + "requestForBedAndBreakfast": true, + "createdAt": "2022-09-15T09:23:01.324015Z", + "agreementDate": "2022-09-15T09:23:01.324015Z" + }, + { + "registrationNumber": "0363 D848 E18E ABDB 9AFF", + "requester": { + "personType": "NaturalPerson", + "email": "chewbacca@starwars.org", + "bsn": null, + "personalDetails": { + "firstName": "Chewbacca", + "lastNamePrefix": "from", + "lastName": "Kashyyyk" + } + }, + "rentalHouse": { + "street": "Amstel", + "houseNumber": "1", + "houseLetter": null, + "houseNumberExtension": null, + "postalCode": "1011PN", + "city": "Amsterdam", + "shortName": "Amstel", + "adresseerbaarObjectIdentificatie": "0363010012143319", + "nummeraanduidingIdentificatie": "0363200012145295", + "openbareRuimteIdentificatie": "0363300000002701", + "woonplaatsIdentificatie": "3594", + "pandIdentificaties": [ + "0363100012186092" + ], + "owner": null + }, + "requestForOther": false, + "requestForBedAndBreakfast": true, + "createdAt": "2022-11-23T13:40:06.3829529Z", + "agreementDate": "2022-11-23T13:40:06.3829529Z" + }, + { + "registrationNumber": "0363 4E71 131F A46A 3D9B", + "requester": { + "personType": "EuropeanCitizen", + "email": "r2-d2@starwars.org", + "bsn": null, + "personalDetails": { + "firstName": "R2-D2", + "lastNamePrefix": null, + "lastName": null + } + }, + "rentalHouse": { + "street": "Amstel", + "houseNumber": "1", + "houseLetter": null, + "houseNumberExtension": null, + "postalCode": "1011PN", + "city": "Amsterdam", + "shortName": "Amstel", + "adresseerbaarObjectIdentificatie": "0363010012143319", + "nummeraanduidingIdentificatie": "0363200012145295", + "openbareRuimteIdentificatie": "0363300000002701", + "woonplaatsIdentificatie": "3594", + "pandIdentificaties": [ + "0363100012186092" + ], + "owner": null + }, + "requestForOther": false, + "requestForBedAndBreakfast": true, + "createdAt": "2024-11-28T10:43:23.0953603Z", + "agreementDate": "2024-11-28T10:43:23.0953603Z" + } +] + +export default holidayRentalRegistrationsData