Skip to content

Commit

Permalink
AB#19918
Browse files Browse the repository at this point in the history
  • Loading branch information
@Stefwint
Stefwint committed Jul 30, 2024
1 parent da1b657 commit dd1d10a
Show file tree
Hide file tree
Showing 5 changed files with 128 additions and 143 deletions.
48 changes: 16 additions & 32 deletions src/components/Dashboard/DashboardAdmin/DashboardAdmin.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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: {
Expand Down Expand Up @@ -54,7 +50,7 @@ const DashboardAdmin = () => {
<div className="mt-10">
<div className="mb-4 flex items-center justify-between">
<Heading level="3" size="m">
Modules
Actieve modules
</Heading>
<Button
as="a"
Expand All @@ -66,46 +62,34 @@ const DashboardAdmin = () => {
</Button>
</div>

<div className="grid grid-cols-8 px-3 py-2">
<div className="col-span-5">
<Text bold>Titel</Text>
</div>
<div className="col-span-3">
<Text bold>Status</Text>
</div>
</div>

<div className="mb-3 h-px w-full bg-pzh-blue" />

<div className="grid grid-cols-1 gap-y-2">
<div className="mb-4 grid grid-cols-1 gap-x-10 gap-y-4 md:grid-cols-2 xl:grid-cols-3">
{modulesLoading ? (
<>
<LoaderCard height="62" mb="" />
<LoaderCard height="62" mb="" />
<LoaderCard height="62" mb="" />
</>
) : (
) : !!modules?.results.length ? (
modules?.results?.map(module => (
<ModuleTile
key={`module-${module.Module_ID}`}
{...module}
/>
))
) : (
<Text>
Er zijn op dit moment geen actieve modules.
</Text>
)}
</div>

{!!modules?.total &&
!!modules?.limit &&
modules.total > modules.limit && (
<div className="mt-8 flex justify-center">
<Pagination
onChange={setCurrPage}
forcePage={currPage - 1}
total={modules.total}
limit={modules.limit}
/>
</div>
)}
<Button
as="a"
href="/muteer/modules"
variant="secondary"
size="small">
Bekijk alle modules
</Button>
</div>
</div>
</div>
Expand Down
122 changes: 65 additions & 57 deletions src/components/Dashboard/DashboardUser/DashboardUser.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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 = () => (
<div className="col-span-6">
<div>
<Heading level="2" size="m" className="mb-4">
Modules
</Heading>

<UserModules />

<div className="mt-8 grid grid-cols-6">
<div className="col-span-6 mb-6 lg:col-span-3">
<Heading level="3" size="m" className="mb-4">
Mijn beleid
</Heading>
<Text>
Binnen het digitaal omgevingsbeleid ben jij eigenaar van
een aantal beleidsobjecten, hieronder vind je een
overzicht van deze onderdelen.
</Text>
</div>

<UserObject />
</div>
</div>
</div>
)

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: {
Expand All @@ -66,25 +44,55 @@ const UserModules = () => {
)

return (
<>
<ItemList
items={modules?.results}
isLoading={modulesLoading}
type="module"
/>
{!!modules?.total &&
!!modules?.limit &&
modules.total > modules.limit && (
<div className="mt-8 flex justify-center">
<Pagination
onChange={setCurrPage}
forcePage={currPage - 1}
total={modules?.total}
limit={modules?.limit}
/>
<div className="col-span-6">
<div>
<Heading level="2" size="m" className="mb-4">
Modules
</Heading>

<div className="mb-4 grid grid-cols-1 gap-x-10 gap-y-4 md:grid-cols-2 xl:grid-cols-3">
{modulesLoading ? (
<>
<LoaderCard height="62" mb="" />
<LoaderCard height="62" mb="" />
<LoaderCard height="62" mb="" />
</>
) : !!modules?.results.length ? (
modules?.results?.map(module => (
<ModuleTile
key={`module-${module.Module_ID}`}
{...module}
/>
))
) : (
<Text>Er zijn op dit moment geen actieve modules.</Text>
)}
</div>

<Button
as="a"
href="/muteer/modules"
variant="secondary"
size="small">
Bekijk alle modules
</Button>

<div className="mt-8 grid grid-cols-6">
<div className="col-span-6 mb-6 lg:col-span-3">
<Heading level="3" size="m" className="mb-4">
Mijn beleid
</Heading>
<Text>
Binnen het digitaal omgevingsbeleid ben jij eigenaar
van een aantal beleidsobjecten, hieronder vind je
een overzicht van deze onderdelen.
</Text>
</div>
)}
</>

<UserObject />
</div>
</div>
</div>
)
}

Expand Down Expand Up @@ -174,15 +182,15 @@ interface ItemListProps {
const ItemList = ({ isLoading, items, type }: ItemListProps) => (
<>
{isLoading ? (
<div className="mt-5 grid grid-cols-1 gap-9 lg:grid-cols-3">
<LoaderCard height="180" mb="" />
<LoaderCard height="180" mb="" />
<LoaderCard height="180" mb="" />
<div className="mt-4">
<LoaderCard height="62" mb="" />
<LoaderCard height="62" mb="" />
<LoaderCard height="62" mb="" />
</div>
) : (
<>
{items?.length ? (
<ul className="mt-5 grid grid-cols-1 gap-9 lg:grid-cols-3">
<ul className="mt-4">
{items.map(item =>
'Module_ID' in item &&
'Status' in item &&
Expand Down
35 changes: 15 additions & 20 deletions src/components/DynamicObject/ObjectCard/ObjectCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<li
className="flex h-full flex-col rounded border border-pzh-gray-200 p-5"
data-testid="object-card">
<Text as="span" size="s" className="block">
{singularCapitalize}
</Text>
<Heading level="4" size="m" className="mb-4">
{Title}
</Heading>
<div className="mt-auto">
<Button
as="a"
href={`/muteer/${plural}/${Object_ID}`}
size="small"
variant="secondary">
Bekijk {singularReadable}
</Button>
</div>
<li data-testid="object-card">
<Link
to={`/muteer/${plural}/${Object_ID}`}
className="group flex items-center justify-between border-b border-b-pzh-gray-300 py-4 pr-1">
<Heading level="4" size="s">
{Title}
</Heading>
<div className="transition group-hover:translate-x-1">
<AngleRight size={20} />
</div>
</Link>
</li>
)
}
Expand Down
64 changes: 31 additions & 33 deletions src/components/Modules/ModuleTile/ModuleTile.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Wrapper
to={!Closed ? `/muteer/modules/${Module_ID}` : ''}
data-testid="dashboard-module-tile">
<div className="group grid grid-cols-8 rounded border border-pzh-gray-200 p-4">
<div className="order-1 col-span-7 flex items-center sm:col-span-5">
<Heading level="3" size="s">
{Title}
</Heading>
</div>
<div className="order-3 col-span-8 mt-2 sm:order-2 sm:col-span-2 sm:mt-0">
<Badge
text={Status?.Status.replace('-', ' ') || ''}
variant={getModuleStatusColor(Status?.Status)}
upperCase={false}
className="-mt-1 whitespace-nowrap"
/>
</div>
{!Closed && (
<div className="order-2 col-span-1 flex items-center justify-end sm:order-3">
<div className="transition group-hover:translate-x-1">
<AngleRight size={18} className="text-pzh-green" />
</div>
</div>
)}
const ModuleTile = ({ Title, Description, Status, Module_ID }: Module) => (
<Link
to={`/muteer/modules/${Module_ID}`}
data-testid="dashboard-module-tile">
<div className="group rounded border border-pzh-gray-200 p-6">
<div className="mb-4">
<Heading level="3" size="m">
{Title}
</Heading>
<Text size="s" className="line-clamp-3">
{Description}
</Text>
</div>
<div className="flex items-center justify-between">
<Badge
text={Status?.Status.replace('-', ' ') || ''}
variant={getModuleStatusColor(Status?.Status)}
upperCase={false}
solid
className="whitespace-nowrap"
/>
<Button
variant="link"
size="small"
className="text-pzh-green group-hover:text-pzh-green-dark group-hover:no-underline">
Bekijk module
</Button>
</div>
</Wrapper>
)
}
</div>
</Link>
)

export default ModuleTile
2 changes: 1 addition & 1 deletion src/utils/module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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':
Expand Down

0 comments on commit dd1d10a

Please sign in to comment.