Merge pull request #2340 from Amsterdam/feature/powerbrowser

Added Powerbrowser

package.json

@@ -6,7 +6,7 @@
  "@amsterdam/amsterdam-react-final-form": "^0.1.140",
  "@amsterdam/asc-assets": "^0.38.0",
  "@amsterdam/asc-ui": "^0.37.0",
- "@amsterdam/wonen-ui": "^1.0.46",
+ "@amsterdam/wonen-ui": "^1.0.48",
  "@material-ui/core": "^4.12.4",
  "@material-ui/icons": "^4.11.3",
  "@reach/router": "^1.3.4",

src/app/components/permits/PermitOverview/PermitOverview.tsx

@@ -33,11 +33,11 @@ const PermitOverview: React.FC<Props> = ({ bagId }) => {
  <Heading forwardedAs="h2">Vergunningen</Heading>
  <Paragraph>Geen vergunningen gevonden</Paragraph>
  </>
-  ) : (
-  <DefinitionList loading={ isBusy } numLoadingRows={ 2 } title="Vergunningen" data={ values } />
-  )
+ ) : (
+ <DefinitionList loading={ isBusy } numLoadingRows={ 2 } title="Vergunningen" data={ values } />
+ )
  }
- <StyledLink to={ to("/adres/:bagId/vergunningen", { bagId })} >Alle vergunningen details</StyledLink>
+ <StyledLink to={ to("/adres/:bagId/vergunningen", { bagId }) } >Alle vergunningen details</StyledLink>
  </>
  )
 }

src/app/components/permits/PermitsPowerBrowser/PermitsPowerBrowser.tsx

@@ -0,0 +1,56 @@
+
+import { useState } from "react"
+import { PermitsSynopsis } from "@amsterdam/wonen-ui"
+import { Heading, Switch, themeColor, themeSpacing } from "@amsterdam/asc-ui"
+import styled from "styled-components"
+import { usePermitsPowerBrowser } from "app/state/rest"
+
+
+const StyledSpan = styled.span`
+ color: ${ themeColor("tint","level5") };
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+`
+
+const StyledSwitch = styled(Switch)`
+ margin-left: ${ themeSpacing(2) };
+`
+
+type Props = {
+ bagId: string
+}
+
+
+const PermitsPowerBrowser: React.FC<Props> = ({ bagId }) => {
+ const [data, { isBusy }] = usePermitsPowerBrowser(bagId)
+ const [isChecked, setIsChecked] = useState(false)
+ const permits: any = data || []
+ return (
+ <>
+ <Heading forwardedAs="h4">
+ Vergunningen PowerBrowser
+ { permits.length > 0 && (
+ <StyledSpan>
+ Alles tonen
+ <StyledSwitch
+ aria-label="This is a checkbox!"
+ data-e2e-id="checkBox_display_all_permts"
+ onChange={ (e: React.ChangeEvent<HTMLInputElement>) => {
+ setIsChecked(e.target.checked)
+ } }
+
+ />
+ </StyledSpan>
+ )}
+ </Heading>
+ <PermitsSynopsis
+ permits={ permits }
+ loading={ isBusy }
+ displayOnlyValidPermits={ !isChecked }
+ />
+ </>
+ )
+}
+
+export default PermitsPowerBrowser

src/app/pages/addresses/permits/PermitsPage.tsx

@@ -1,10 +1,11 @@
 
 import { RouteComponentProps } from "@reach/router"
 
-import Row, { RowWithColumn } from "app/components/layouts/Grid/Row"
+import Row from "app/components/layouts/Grid/Row"
 import PageHeading from "app/components/shared/PageHeading/PageHeading"
 import DefaultLayout from "app/components/layouts/DefaultLayout/DefaultLayout"
 import PermitDetailsList from "app/components/permits/PermitDetails/PermitDetails"
+import PermitsPowerBrowser from "app/components/permits/PermitsPowerBrowser/PermitsPowerBrowser"
 import VacationRental from "app/components/permits/VacationRental/VacationRental"
 import DetailHeader from "app/components/shared/DetailHeader/DetailHeader"
 import Column from "app/components/layouts/Grid/Column"
@@ -30,14 +31,13 @@ const PermitsPage: React.FC<RouteComponentProps<Props>> = ({ bagId }) => (
  <Row>
  <Column spanLarge={ 50 }>
  <PermitDetailsList bagId={ bagId }></PermitDetailsList>
+ <VacationRental bagId={ bagId }></VacationRental>
+ <DecosLink bagId={ bagId } />
  </Column>
  <Column spanLarge={ 50 }>
- <VacationRental bagId={ bagId }></VacationRental>
+ <PermitsPowerBrowser bagId={ bagId }></PermitsPowerBrowser>
  </Column>
  </Row>
- <RowWithColumn>
- <DecosLink bagId={ bagId } />
- </RowWithColumn>
  </DefaultLayout>
  ) : <NotFoundPage />
 )

src/app/state/rest/addresses.ts

@@ -27,6 +27,16 @@ export const usePermitDetails = (bagId: string) => {
  })
 }
 
+export const usePermitsPowerBrowser = (bagId: string) => {
+ const handleError = useSuppressErrorHandler()
+ return useApiRequest<Components.Schemas.Powerbrowser[]>({
+ url: makeApiUrl("addresses", bagId, "permits-powerbrowser"),
+ groupName: "addresses",
+ handleError,
+ isProtected: true
+ })
+}
+
 export const useMeldingen = (bagId: string) => {
  const queryString = qs.stringify({
  start_date: moment().subtract(1, "years").startOf("year").format()