access page

Author: MengZhuNAV

components/user/accessRequestsForGroup.tsx

@@ -0,0 +1,81 @@
+import { Heading, Link, Table, Tabs } from "@navikt/ds-react"
+import { PendingAccessRequestBar } from "./pendingAccessRequestBar"
+
+interface pendingAccessRequestsForGroupProps {
+    accessRequests: any[]
+}
+
+export const AccessRequestsForGroup = ({ accessRequests }: pendingAccessRequestsForGroupProps) => {
+    const pendingRequest = accessRequests.filter((r) => r.status === 'pending')
+    const processedRequest = accessRequests.filter((r) => r.status === 'approved' || r.status === 'denied')
+    return <><div>
+        <Tabs defaultValue={"pending"}>
+            <Tabs.List>
+                <Tabs.Tab
+                    value="pending"
+                    label="ubehandlet"
+                />
+                <Tabs.Tab
+                    value="processed"
+                    label="behandlet"
+                />
+            </Tabs.List>
+            <Tabs.Panel value="pending" className="w-full space-y-2 p-4">
+                <div className="mb-3 w-[91vw] md:w-auto overflow-auto">
+                    {pendingRequest?.length > 0 ? (<div>
+                            {pendingRequest.map((r: any) => (
+                                <PendingAccessRequestBar accessRequest={r}></PendingAccessRequestBar>
+                            ))
+                            }</div>
+                    ) : (
+                        <div>'Ingen tilgangssøknader'</div>
+                    )}
+                </div>
+
+            </Tabs.Panel>
+            <Tabs.Panel value="processed" className="w-full space-y-2 p-4">
+                <div className="mb-3 w-[91vw] md:w-auto overflow-auto">
+                    {processedRequest?.length > 0 ? (
+                        <Table>
+                            <Table.Header>
+                                <Table.Row>
+                                    <Table.HeaderCell>Dataprodukt</Table.HeaderCell>
+                                    <Table.HeaderCell>Datasett</Table.HeaderCell>
+                                    <Table.HeaderCell>Bruker/gruppe</Table.HeaderCell>
+                                    <Table.HeaderCell />
+                                </Table.Row>
+                            </Table.Header>
+                            {processedRequest.map((r, i) => (
+                                <>
+                                    <Table.Row
+                                        className={i % 2 === 0 ? 'bg-[#f7f7f7]' : ''}
+                                        key={i + '-request'}
+                                    >
+                                        <Table.DataCell className="w-36">{r.dataproductName}</Table.DataCell>
+                                        <Table.DataCell className="w-36">
+                                            {r.datasetName}
+                                        </Table.DataCell>
+                                        <Table.DataCell className="w-48">
+                                            {r.subject}
+                                        </Table.DataCell>
+                                        <Table.DataCell className="w-48">
+                                            <Link target="_blank" rel="norefferer" href={`/dataproduct/${r.dataproductID}/${r.dataproductSlug}/${r.datasetID}`}>
+                                                Til datasett
+                                            </Link>
+                                        </Table.DataCell>
+                                    </Table.Row>
+                                </>
+                            ))
+                            }
+                        </Table>
+                    ) : (
+                        'Ingen tilgangssøknader'
+                    )}
+                </div>
+
+            </Tabs.Panel>
+        </Tabs>
+    </div><div>
+
+        </div></>
+}

components/user/pendingAccessRequestBar.tsx

@@ -0,0 +1,27 @@
+import { ExpansionCard } from "@navikt/ds-react"
+import { useState } from "react"
+
+interface PendingAccessRequestBarProps {
+    accessRequest: any
+}
+
+export const PendingAccessRequestBar = ({ accessRequest }: PendingAccessRequestBarProps) => {
+    const [expanded, setExpanded] = useState(false)
+    return (
+    <div key={accessRequest.id} className="w-[60rem] mb-5 mt-5">
+        <ExpansionCard aria-label="Pending Request" onToggle={open => setExpanded(open)}>
+            <ExpansionCard.Header>
+                <ExpansionCard.Title className="text-[1.3em]">{`${accessRequest?.datasetName} - ${accessRequest?.dataproductName}`}</ExpansionCard.Title>
+                <ExpansionCard.Description>
+                    <p>fra {accessRequest.owner} - {new Date(accessRequest.created).toLocaleDateString('no-NO')}</p>
+                    <p></p>
+                    </ExpansionCard.Description>
+            </ExpansionCard.Header>
+            <ExpansionCard.Content>
+                <div>
+                    behandle
+                </div>
+            </ExpansionCard.Content>
+        </ExpansionCard>
+    </div>)
+}

pages/user/[[...page]].tsx

@@ -11,6 +11,7 @@ import { JoinableViewsList } from '../../components/dataProc/joinableViewsList'
 import { DataproductsList } from '../../components/dataproducts/dataproductList'
 import { Tabs } from '@navikt/ds-react'
 import { useFetchUserData } from '../../lib/rest/userData'
+import { AccessRequestsForGroup } from '../../components/user/accessRequestsForGroup'
 
 export const UserPages = () => {
     const router = useRouter()
@@ -62,6 +63,18 @@ export const UserPages = () => {
                     </div>
                 ),
             },
+            {
+                title: 'Tilgangssøknader til min gruppe',
+                slug: 'requestsForGroup',
+                component: (
+                    <div className="grid gap-4">
+                        <h2>Tilgangssøknader til min gruppe</h2>
+                        <AccessRequestsForGroup
+                            accessRequests={data.accessRequestsAsGranter as any[]}
+                        />
+                    </div>
+                ),
+            },
             {
                 title: 'Mine tilgangssøknader',
                 slug: 'requests',