Mijn-9575-feature varen service + thema pagina

src/client/App.tsx

@@ -83,7 +83,7 @@ import Search from './pages/Search/Search';
 import { ToeristscheVerhuurThema } from './pages/ToeristischeVerhuur/ToeristischeVerhuur';
 import { ToeristischeVerhuurDetail } from './pages/ToeristischeVerhuur/ToeristischeVerhuurDetail';
 import { ToeristischeVerhuurVergunningen } from './pages/ToeristischeVerhuur/ToeristischeVerhuurVergunningenList';
-import Varen from './pages/Varen/Varen';
+import { Varen } from './pages/Varen/Varen';
 import VergunningDetail from './pages/VergunningDetail/VergunningDetail';
 import Vergunningen from './pages/Vergunningen/Vergunningen';
 import VergunningV2Detail from './pages/VergunningenV2/VergunningDetail';

src/client/components/Datalist/Datalist.module.scss

@@ -2,10 +2,6 @@
   margin: 0;
   font-size: var(--ams-paragraph-medium-font-size);
 
-  &__row-wrapper {
-    grid-auto-flow: column;
-  }
-
   // TODO: Find a way to use the h4 style without re-declaring
   &__title {
     font-family: var(--ams-heading-font-family);

src/client/components/Datalist/Datalist.tsx

@@ -1,5 +1,10 @@
 import { ReactNode } from 'react';
 
+import {
+  Grid,
+  GridColumnNumber,
+  GridColumnNumbers,
+} from '@amsterdam/design-system-react';
 import classNames from 'classnames';
 
 import styles from './Datalist.module.scss';
@@ -37,14 +42,22 @@ interface WrappedRow {
   content: ReactNode;
   className?: string;
   isVisible?: boolean;
+  span?: GridColumnNumber | GridColumnNumbers;
+  start?: GridColumnNumber | GridColumnNumbers;
 }
 
-function DatalistRowWrapped({ label, content, className }: WrappedRow) {
+function DatalistRowWrapped({
+  label,
+  content,
+  className,
+  span,
+  start,
+}: WrappedRow) {
   return (
-    <div className={className}>
+    <Grid.Cell span={span} start={start} className={className}>
       <dt className={styles.Datalist__title}>{label}</dt>
       <dd className={styles.Datalist__description}>{content}</dd>
-    </div>
+    </Grid.Cell>
   );
 }
 
@@ -74,6 +87,8 @@ function DatalistRowsWithWrapper({ rows, className }: RowSet) {
             content={row.content}
             className={row.className}
             isVisible={row.isVisible}
+            span={row.span}
+            start={row.start}
           />
         ))}
     </div>

src/client/config/thema.ts

@@ -231,7 +231,6 @@ export const myThemasMenuItems: ThemaMenuItem[] = [
     to: AppRoutes.VAREN,
     profileTypes: ['commercial'],
   },
-
   {
     title: ThemaTitles.BEZWAREN,
     id: Themas.BEZWAREN,

src/client/pages/Afis/Afis.tsx

@@ -90,7 +90,6 @@ export function AfisThemaPagina() {
     isThemaPaginaLoading,
     listPageTitle,
     routes,
-    linkListItems,
   } = useAfisThemaData();
 
   const isPartialError = entries(dependencyErrors).some(
@@ -164,7 +163,6 @@ export function AfisThemaPagina() {
       isPartialError={isPartialError}
       errorAlertContent={pageContentErrorAlert}
       isLoading={!isThemaPaginaError && isThemaPaginaLoading}
-      linkListItems={linkListItems}
       pageContentTop={pageContentTop}
       pageContentMain={
         <>

src/client/pages/ThemaPagina/ThemaPagina.tsx

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 
-import { Grid, LinkList, Screen } from '@amsterdam/design-system-react';
+import { Grid, Icon, LinkList, Screen } from '@amsterdam/design-system-react';
 
 import { AppRoutes } from '../../../universal/config/routes';
 import { LinkProps } from '../../../universal/types';
@@ -12,6 +12,8 @@ import {
   ThemaIcon,
 } from '../../components';
 import { BarConfig } from '../../components/LoadingContent/LoadingContent';
+import { ExternalLinkIcon } from '@amsterdam/design-system-react-icons';
+import { MaButtonLink } from '../../components/MaLink/MaLink';
 
 const LOADING_BAR_CONFIG_DEFAULT: BarConfig = [
   ['20rem', '4rem', '4rem'],
@@ -30,7 +32,8 @@ interface ThemaPaginaProps {
   icon?: ReactElement;
   pageContentTop: ReactNode;
   pageContentMain: ReactNode;
-  linkListItems: LinkProps[];
+  linkListItems?: LinkProps[];
+  buttonItems?: LinkProps[];
   pageContentBottom?: ReactNode;
   errorAlertContent?: ReactNode;
   loadingBarConfig?: BarConfig;
@@ -48,6 +51,7 @@ export default function ThemaPagina({
   icon = <ThemaIcon />,
   pageContentTop,
   linkListItems = [],
+  buttonItems = [],
   pageContentMain,
   pageContentBottom,
   errorAlertContent,
@@ -77,6 +81,17 @@ export default function ThemaPagina({
             </Grid.Cell>
           )}
 
+          {!!buttonItems.length && (
+            <Grid.Cell span="all">
+              {buttonItems.map(({ to, title }) => (
+                <MaButtonLink key={to} href={to}>
+                  {title}
+                  <Icon svg={ExternalLinkIcon} size="level-5" />
+                </MaButtonLink>
+              ))}
+            </Grid.Cell>
+          )}
+
           {showError && (
             <Grid.Cell span="all">
               <ErrorAlert>

src/client/pages/Varen/Varen-thema-config.ts

@@ -0,0 +1,62 @@
+import { generatePath } from 'react-router-dom';
+
+import { VarenFrontend } from '../../../server/services/varen/config-and-types';
+import { AppRoutes } from '../../../universal/config/routes';
+import { dateSort } from '../../../universal/helpers/date';
+import { LinkProps } from '../../../universal/types';
+import {
+  DisplayProps,
+  WithDetailLinkComponent,
+} from '../../components/Table/TableV2';
+
+export const displayPropsAanvragen: DisplayProps<
+  WithDetailLinkComponent<VarenFrontend>
+> = {
+  detailLinkComponent: '',
+  title: 'Omschrijving',
+  dateRequestFormatted: 'Aangevraagd',
+  status: 'Status',
+};
+
+export const listPageParamKind = {
+  inProgress: 'lopende-aanvragen',
+  completed: 'afgehandelde-aanvragen',
+};
+
+const tableConfigBase = {
+  sort: dateSort('dateRequest', 'desc'),
+  displayProps: displayPropsAanvragen,
+};
+
+export const tableConfig = {
+  [listPageParamKind.inProgress]: {
+    title: 'Lopende aanvragen',
+    filter: (vergunning: VarenFrontend) => !vergunning.dateEnd,
+    listPageRoute: generatePath(AppRoutes['VAREN/LIST'], {
+      kind: listPageParamKind.inProgress,
+    }),
+    ...tableConfigBase,
+  },
+  [listPageParamKind.completed]: {
+    title: 'Afgehandelde aanvragen',
+    filter: (vergunning: VarenFrontend) => vergunning.dateEnd,
+    listPageRoute: generatePath(AppRoutes['VAREN/LIST'], {
+      kind: listPageParamKind.completed,
+    }),
+    ...tableConfigBase,
+  },
+};
+
+export const linkListItems: LinkProps[] = [
+  {
+    to: 'https://www.amsterdam.nl/verkeer-vervoer/varen-amsterdam/varen-beroepsvaart/#:~:text=De%20passagiersvaart%20in%20Amsterdam%20is,stad%20willen%20we%20graag%20behouden.',
+    title: 'Meer informatie over passagiers- en beroepsvaart',
+  },
+];
+
+export const buttonItems: LinkProps[] = [
+  {
+    to: 'https://formulieren.acc.amsterdam.nl/TriplEforms/DirectRegelen/formulier/nl-NL/evAmsterdam/VARExploitatievergunningAanvragen.aspx',
+    title: 'Exploitatievergunning aanvragen',
+  },
+];

src/client/pages/Varen/Varen.tsx

@@ -1,7 +1,60 @@
-import { useAppStateGetter } from '../../hooks/useAppState';
+import { Grid, Paragraph } from '@amsterdam/design-system-react';
 
-export default function Varen() {
-  const { VAREN } = useAppStateGetter();
-  console.log(VAREN);
-  return 'FAKE';
+import { useVarenThemaData } from './useVarenThemaData.hook';
+import { buttonItems, linkListItems } from './Varen-thema-config';
+import { VarenVergunningFrontend } from '../../../server/services/varen/config-and-types';
+import { Datalist } from '../../components/Datalist/Datalist';
+import { ThemaTitles } from '../../config/thema';
+import ThemaPagina from '../ThemaPagina/ThemaPagina';
+import ThemaPaginaTable from '../ThemaPagina/ThemaPaginaTable';
+
+const pageContentTop = (
+  <Paragraph>
+    De passagiersvaart in Amsterdam is erg populair bij bezoekers.
+    Rondvaartboten en salonboten zijn een vorm van passagiersvaart. Ook gehuurde
+    boten, met of zonder schipper, vallen onder de passagiersvaart.
+  </Paragraph>
+);
+
+export function Varen() {
+  const { gegevensAanvrager, tableItems, tableConfig, isLoading, isError } =
+    useVarenThemaData();
+
+  const gegevens = gegevensAanvrager ? (
+    <Grid.Cell span="all">
+      <Datalist rows={[gegevensAanvrager]} />
+    </Grid.Cell>
+  ) : null;
+
+  const tables = Object.entries(tableConfig).map(
+    ([kind, { title, displayProps, filter, sort }]) => {
+      return (
+        <ThemaPaginaTable<VarenVergunningFrontend>
+          key={kind}
+          title={title}
+          zaken={tableItems.filter(filter).sort(sort)}
+          displayProps={displayProps}
+          textNoContent={`U heeft geen ${title.toLowerCase()}`}
+        />
+      );
+    }
+  );
+
+  return (
+    <ThemaPagina
+      title={ThemaTitles.VAREN}
+      isLoading={isLoading}
+      isError={isError}
+      pageContentTop={pageContentTop}
+      pageContentMain={
+        <>
+          {gegevens}
+          {tables}
+        </>
+      }
+      isPartialError={false}
+      linkListItems={linkListItems}
+      buttonItems={buttonItems}
+    />
+  );
 }

src/client/pages/Varen/useVarenThemaData.hook.ts

@@ -0,0 +1,57 @@
+import { tableConfig } from './Varen-thema-config';
+import {
+  caseTypeVaren,
+  VarenVergunningFrontend,
+} from '../../../server/services/varen/config-and-types';
+import { isError, isLoading } from '../../../universal/helpers/api';
+import { entries } from '../../../universal/helpers/utils';
+import { RowSet } from '../../components/Datalist/Datalist';
+import { addLinkElementToProperty } from '../../components/Table/TableV2';
+import { useAppStateGetter } from '../../hooks/useAppState';
+import { linkListItems } from '../Afis/Afis-thema-config';
+
+export function useVarenThemaData() {
+  const { VAREN } = useAppStateGetter();
+
+  const varenRederRegistratie = VAREN.content?.find(
+    (item) => item.caseType === caseTypeVaren.VarenRederRegistratie
+  );
+
+  const labelMap = {
+    company: 'Bedrijfsnaam',
+    email: 'E-mailadres',
+    phone: 'Telefoonnummer',
+    bsnkvk: 'KVK nummer',
+    address: 'Adres',
+  };
+
+  const gegevensAanvrager: RowSet | null = varenRederRegistratie
+    ? {
+        rows: entries(labelMap).map(([key, label]) => ({
+          label,
+          content: varenRederRegistratie[key],
+          span: 4,
+        })),
+      }
+    : null;
+
+  const vergunningen = VAREN.content?.filter(
+    (item) => item.caseType !== caseTypeVaren.VarenRederRegistratie
+  );
+
+  const tableItems = addLinkElementToProperty<VarenVergunningFrontend>(
+    vergunningen ?? [],
+    'vesselName',
+    true
+  );
+
+  return {
+    gegevensAanvrager,
+    varenRederRegistratie,
+    tableConfig,
+    isLoading: isLoading(VAREN),
+    isError: isError(VAREN),
+    tableItems,
+    linkListItems,
+  };
+}