From dd1d10a8c713b0069fecf8f1d9854e4a26acb237 Mon Sep 17 00:00:00 2001 From: Stef Winterswijk Date: Tue, 30 Jul 2024 11:00:43 +0200 Subject: [PATCH] AB#19918 --- .../DashboardAdmin/DashboardAdmin.tsx | 48 +++---- .../Dashboard/DashboardUser/DashboardUser.tsx | 122 ++++++++++-------- .../DynamicObject/ObjectCard/ObjectCard.tsx | 35 +++-- .../Modules/ModuleTile/ModuleTile.tsx | 64 +++++---- src/utils/module.ts | 2 +- 5 files changed, 128 insertions(+), 143 deletions(-) diff --git a/src/components/Dashboard/DashboardAdmin/DashboardAdmin.tsx b/src/components/Dashboard/DashboardAdmin/DashboardAdmin.tsx index 8b266d24..9035f6d7 100644 --- a/src/components/Dashboard/DashboardAdmin/DashboardAdmin.tsx +++ b/src/components/Dashboard/DashboardAdmin/DashboardAdmin.tsx @@ -1,7 +1,6 @@ -import { Button, Heading, Pagination, Text } from '@pzh-ui/components' +import { Button, Heading, Text } from '@pzh-ui/components' import { AngleRight } from '@pzh-ui/icons' import { keepPreviousData } from '@tanstack/react-query' -import { useState } from 'react' import { Link } from 'react-router-dom' import { useModulesGet } from '@/api/fetchers' @@ -10,17 +9,14 @@ import ModuleTile from '@/components/Modules/ModuleTile' import * as models from '@/config/objects' import { Model } from '@/config/objects/types' -const PAGE_LIMIT = 20 +const PAGE_LIMIT = 3 const DashboardAdmin = () => { - const [currPage, setCurrPage] = useState(1) - const { data: modules, isFetching: modulesLoading } = useModulesGet( { only_active: true, only_mine: false, limit: PAGE_LIMIT, - offset: (currPage - 1) * PAGE_LIMIT, }, { query: { @@ -54,7 +50,7 @@ const DashboardAdmin = () => {
- Modules + Actieve modules
-
-
- Titel -
-
- Status -
-
- -
- -
+
{modulesLoading ? ( <> - ) : ( + ) : !!modules?.results.length ? ( modules?.results?.map(module => ( )) + ) : ( + + Er zijn op dit moment geen actieve modules. + )}
- {!!modules?.total && - !!modules?.limit && - modules.total > modules.limit && ( -
- -
- )} +
diff --git a/src/components/Dashboard/DashboardUser/DashboardUser.tsx b/src/components/Dashboard/DashboardUser/DashboardUser.tsx index dc5ce36b..82d7d12d 100644 --- a/src/components/Dashboard/DashboardUser/DashboardUser.tsx +++ b/src/components/Dashboard/DashboardUser/DashboardUser.tsx @@ -1,4 +1,11 @@ -import { Heading, Pagination, TabItem, Tabs, Text } from '@pzh-ui/components' +import { + Button, + Heading, + Pagination, + TabItem, + Tabs, + Text, +} from '@pzh-ui/components' import { keepPreviousData } from '@tanstack/react-query' import { useState } from 'react' @@ -15,48 +22,19 @@ import { import ObjectCard from '@/components/DynamicObject/ObjectCard' import { LoaderCard } from '@/components/Loader' import ModuleCard from '@/components/Modules/ModuleCard' +import ModuleTile from '@/components/Modules/ModuleTile' import * as models from '@/config/objects' import { ModelReturnType, ModelType } from '@/config/objects/types' import useAuth from '@/hooks/useAuth' const PAGE_LIMIT = 9 -const DashboardUser = () => ( -
-
- - Modules - - - - -
-
- - Mijn beleid - - - Binnen het digitaal omgevingsbeleid ben jij eigenaar van - een aantal beleidsobjecten, hieronder vind je een - overzicht van deze onderdelen. - -
- - -
-
-
-) - -const UserModules = () => { - const [currPage, setCurrPage] = useState(1) - +const DashboardUser = () => { const { data: modules, isFetching: modulesLoading } = useModulesGet( { only_active: true, - only_mine: true, - limit: PAGE_LIMIT, - offset: (currPage - 1) * PAGE_LIMIT, + only_mine: false, + limit: 3, }, { query: { @@ -66,25 +44,55 @@ const UserModules = () => { ) return ( - <> - - {!!modules?.total && - !!modules?.limit && - modules.total > modules.limit && ( -
- +
+
+ + Modules + + +
+ {modulesLoading ? ( + <> + + + + + ) : !!modules?.results.length ? ( + modules?.results?.map(module => ( + + )) + ) : ( + Er zijn op dit moment geen actieve modules. + )} +
+ + + +
+
+ + Mijn beleid + + + Binnen het digitaal omgevingsbeleid ben jij eigenaar + van een aantal beleidsobjecten, hieronder vind je + een overzicht van deze onderdelen. +
- )} - + + +
+
+
) } @@ -174,15 +182,15 @@ interface ItemListProps { const ItemList = ({ isLoading, items, type }: ItemListProps) => ( <> {isLoading ? ( -
- - - +
+ + +
) : ( <> {items?.length ? ( -
    +
      {items.map(item => 'Module_ID' in item && 'Status' in item && diff --git a/src/components/DynamicObject/ObjectCard/ObjectCard.tsx b/src/components/DynamicObject/ObjectCard/ObjectCard.tsx index 8ef89a5f..7f39a5c4 100644 --- a/src/components/DynamicObject/ObjectCard/ObjectCard.tsx +++ b/src/components/DynamicObject/ObjectCard/ObjectCard.tsx @@ -1,31 +1,26 @@ -import { Button, Heading, Text } from '@pzh-ui/components' +import { Heading } from '@pzh-ui/components' +import { AngleRight } from '@pzh-ui/icons' +import { Link } from 'react-router-dom' import * as models from '@/config/objects' import { ModelReturnType, ModelType } from '@/config/objects/types' const ObjectCard = ({ Object_Type, Object_ID, Title }: ModelReturnType) => { const model = models[Object_Type as ModelType] - const { plural, singularCapitalize, singularReadable } = model.defaults + const { plural } = model.defaults return ( -
    • - - {singularCapitalize} - - - {Title} - -
      - -
      +
    • + + + {Title} + +
      + +
      +
      • ) } diff --git a/src/components/Modules/ModuleTile/ModuleTile.tsx b/src/components/Modules/ModuleTile/ModuleTile.tsx index e837439c..f4d2fa94 100644 --- a/src/components/Modules/ModuleTile/ModuleTile.tsx +++ b/src/components/Modules/ModuleTile/ModuleTile.tsx @@ -1,41 +1,39 @@ -import { Badge, Heading } from '@pzh-ui/components' -import { AngleRight } from '@pzh-ui/icons' +import { Badge, Button, Heading, Text } from '@pzh-ui/components' import { Link } from 'react-router-dom' import { Module } from '@/api/fetchers.schemas' import { getModuleStatusColor } from '@/utils/module' -const ModuleTile = ({ Title, Status, Module_ID, Closed }: Module) => { - const Wrapper = Closed ? 'div' : Link - - return ( - -
      -
      - - {Title} - -
      -
      - -
      - {!Closed && ( -
      -
      - -
      -
      - )} +const ModuleTile = ({ Title, Description, Status, Module_ID }: Module) => ( + +
      +
      + + {Title} + + + {Description} + +
      +
      + +
      - - ) -} +
      + +) export default ModuleTile diff --git a/src/utils/module.ts b/src/utils/module.ts index cd1020cc..ebda976b 100644 --- a/src/utils/module.ts +++ b/src/utils/module.ts @@ -4,7 +4,7 @@ export const getModuleStatusColor = (status?: string) => { case 'Ontwerp GS': case 'Ontwerp PS': case 'Ter Inzage': - return 'lightRed' + return 'red' case 'Definitief ontwerp GS Concept': case 'Definitief ontwerp GS': case 'Definitief ontwerp PS':