Skip to content

Commit ba2f567

Browse files
sujitawsujitaw
authored
Added Side panel for schema list to show technical details of schema (#1085)
* wip Signed-off-by: Sujit <[email protected]> * fix/added side drawer for schema list Signed-off-by: Sujit <[email protected]> * fix/added fallback condition Signed-off-by: Sujit <[email protected]> * fix/commented code Signed-off-by: Sujit <[email protected]> * fix/sonarqube comments Signed-off-by: Sujit <[email protected]> * fix/verification list after change of schema list and card comp Signed-off-by: Sujit <[email protected]> --------- Signed-off-by: Sujit <[email protected]>
1 parent 6f0ec33 commit ba2f567

File tree

6 files changed

+193
-87
lines changed

6 files changed

+193
-87
lines changed

‎nextjs/src/config/SidePanelCommon.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default function SidePanelComponent({
4141
<Sheet open={open} onOpenChange={onOpenChange}>
4242
<SheetContent
4343
side="right"
44-
className="w-full max-w-xl min-w-[500px] space-y-6 p-4"
44+
className="w-full max-w-xl min-w-[500px] space-y-2 p-4"
4545
>
4646
<SheetHeader>
4747
<SheetTitle className="text-xl font-semibold">{title}</SheetTitle>
@@ -61,7 +61,7 @@ export default function SidePanelComponent({
6161
{field.badge ? (
6262
<Badge variant="default">{field.value}</Badge>
6363
) : (
64-
<div className="font-medium break-words">{field.value}</div>
64+
<div className="font-medium break-all">{field.value}</div>
6565
)}
6666
{field.copyable && typeof field.value === 'string' && (
6767
<Button

‎nextjs/src/features/schemas/components/SchemaCard.tsx‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
import { usePathname, useRouter } from 'next/navigation'
1818

1919
import { Button } from '@/components/ui/button'
20-
import CopyDid from '@/config/CopyDid'
2120
import CustomCheckbox from '@/components/CustomCheckbox'
2221
import DateTooltip from '@/components/DateTooltip'
2322
import Loader from '@/components/Loader'
@@ -164,24 +163,19 @@ const SchemaCard = (props: ISchemaCardProps): React.JSX.Element => {
164163
</div>
165164

166165
<div className="min-w-0 space-y-1 text-sm">
167-
<div className="flex items-start sm:items-center">
166+
<button
167+
className="url-link flex items-start sm:items-center"
168+
onClick={props.onTitleClick}
169+
>
168170
<strong className="mr-2 shrink-0">Schema ID:</strong>
169-
<div className="min-w-0 truncate">
170-
<CopyDid
171-
value={props.schemaId || ''}
172-
className="text-foreground truncate font-mono text-sm"
173-
/>
171+
<div className="!url-link min-w-0 font-mono text-sm">
172+
{props.schemaId || ''}
174173
</div>
175-
</div>
174+
</button>
176175

177176
<div className="flex items-start sm:items-center">
178-
<strong className="mr-2 shrink-0">Issuer DID:</strong>
179-
<div className="min-w-0 truncate">
180-
<CopyDid
181-
value={props.issuerDid || ''}
182-
className="text-foreground truncate font-mono text-sm"
183-
/>
184-
</div>
177+
<strong className="mr-2 shrink-0">Issuer:</strong>
178+
<div className="min-w-0 truncate">{props.issuerName || ''}</div>
185179
</div>
186180

187181
{!props.noLedger && (

‎nextjs/src/features/schemas/components/SchemaList.tsx‎

Lines changed: 43 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,11 @@ import { DidMethod, SchemaTypes } from '@/common/enums'
44
import {
55
GetUserProfileResponse,
66
ISchemaDataSchemaList as ISchemaData,
7+
ISidebarSliderData,
78
IW3cSchemaDetails,
89
SchemaListItem,
910
UserOrgRole,
1011
} from '../type/schemas-interface'
11-
import {
12-
Pagination,
13-
PaginationContent,
14-
PaginationItem,
15-
PaginationLink,
16-
PaginationNext,
17-
PaginationPrevious,
18-
} from '@/components/ui/pagination'
1912
import React, { ChangeEvent, useEffect, useState } from 'react'
2013
import {
2114
Select,
@@ -38,6 +31,8 @@ import Loader from '@/components/Loader'
3831
import PageContainer from '@/components/layout/page-container'
3932
import { Plus } from 'lucide-react'
4033
import SchemaCard from './SchemaCard'
34+
import SchemaListPagination from './SchemaListPagination'
35+
import SidePanelComponent from '@/config/SidePanelCommon'
4136
import { Skeleton } from '@/components/ui/skeleton'
4237
import { getOrganizationById } from '@/app/api/organization'
4338
import { getUserProfile } from '@/app/api/Auth'
@@ -81,6 +76,8 @@ const SchemaList = (props: {
8176
const [w3cSchema, setW3CSchema] = useState<boolean>(false)
8277
const [isNoLedger, setIsNoLedger] = useState<boolean>(false)
8378
const [orgRole, setOrgRole] = useState<string | null>(null)
79+
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
80+
const [sideBarFields, setSideBarFields] = useState<ISidebarSliderData[]>([])
8481

8582
const route = useRouter()
8683
const dispatch = useAppDispatch()
@@ -446,7 +443,8 @@ const SchemaList = (props: {
446443
schemaName={element?.name}
447444
version={element['version']}
448445
schemaId={element['schemaLedgerId']}
449-
issuerDid={element['issuerId']}
446+
issuerName={element['organizationName'] || 'N/A'}
447+
issuerDid={element['issuerId'] || 'N/A'}
450448
attributes={element['attributes']}
451449
created={element['createDateTime']}
452450
showCheckbox={false}
@@ -456,73 +454,42 @@ const SchemaList = (props: {
456454
w3cSchema={w3cSchema}
457455
noLedger={isNoLedger}
458456
isVerification={verificationFlag}
457+
onTitleClick={(e: React.MouseEvent): void => {
458+
e.stopPropagation()
459+
setIsDrawerOpen(true)
460+
setSideBarFields([
461+
{
462+
label: 'Schema ID',
463+
value: element.schemaLedgerId,
464+
copyable: true,
465+
},
466+
{
467+
label: 'Publisher DID',
468+
value: element.publisherDid,
469+
copyable: true,
470+
},
471+
{
472+
label: 'Issuer ID',
473+
value: element.issuerId,
474+
copyable: true,
475+
},
476+
])
477+
}}
459478
/>
460479
</div>
461480
))}
462481
</div>
463482
{totalItem > itemPerPage &&
464483
(schemaList.length === itemPerPage ||
465484
schemaListAPIParameter.page === lastPage) && (
466-
<div className="mt-6 flex justify-end">
467-
<Pagination className="m-0 w-fit">
468-
<PaginationContent>
469-
{schemaListAPIParameter.page > 1 && (
470-
<PaginationItem>
471-
<PaginationPrevious
472-
href="#"
473-
onClick={() =>
474-
setSchemaListAPIParameter((prev) => ({
475-
...prev,
476-
page: prev.page - 1,
477-
}))
478-
}
479-
/>
480-
</PaginationItem>
481-
)}
482-
483-
{paginationNumbers.map((page, idx) => (
484-
<PaginationItem key={idx}>
485-
{page === '...' ? (
486-
<span className="text-muted-foreground px-3 py-2">
487-
…
488-
</span>
489-
) : (
490-
<PaginationLink
491-
className={`${
492-
page === schemaListAPIParameter.page
493-
? 'bg-primary'
494-
: 'bg-background text-muted-foreground'
495-
} rounded-lg px-4 py-2`}
496-
href="#"
497-
onClick={() =>
498-
setSchemaListAPIParameter((prev) => ({
499-
...prev,
500-
page: page as number,
501-
}))
502-
}
503-
>
504-
{page}
505-
</PaginationLink>
506-
)}
507-
</PaginationItem>
508-
))}
509-
510-
{schemaListAPIParameter.page < lastPage && (
511-
<PaginationItem>
512-
<PaginationNext
513-
href="#"
514-
onClick={() =>
515-
setSchemaListAPIParameter((prev) => ({
516-
...prev,
517-
page: prev.page + 1,
518-
}))
519-
}
520-
/>
521-
</PaginationItem>
522-
)}
523-
</PaginationContent>
524-
</Pagination>
525-
</div>
485+
<SchemaListPagination
486+
{...{
487+
schemaListAPIParameter,
488+
paginationNumbers,
489+
setSchemaListAPIParameter,
490+
lastPage,
491+
}}
492+
/>
526493
)}
527494
</>
528495
) : (
@@ -543,6 +510,13 @@ const SchemaList = (props: {
543510
/>
544511
))}
545512
</div>
513+
<SidePanelComponent
514+
open={isDrawerOpen}
515+
onOpenChange={setIsDrawerOpen}
516+
title={'Schema Details'}
517+
description={'Detailed view of selected Schema'}
518+
fields={sideBarFields}
519+
/>
546520
</PageContainer>
547521
)
548522
}

‎nextjs/src/features/schemas/components/SchemaListPagination.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import {
2+
Pagination,
3+
PaginationContent,
4+
PaginationItem,
5+
PaginationLink,
6+
PaginationNext,
7+
PaginationPrevious,
8+
} from '@/components/ui/pagination'
9+
import React, { JSX } from 'react'
10+
11+
interface IApiListParameter {
12+
itemPerPage: number
13+
page: number
14+
search: string
15+
sortBy: string
16+
sortingOrder: string
17+
allSearch: string
18+
}
19+
interface ISchemaListPaginationProps {
20+
schemaListAPIParameter: IApiListParameter
21+
paginationNumbers: (string | number)[]
22+
setSchemaListAPIParameter: React.Dispatch<
23+
React.SetStateAction<IApiListParameter>
24+
>
25+
lastPage: number
26+
}
27+
28+
function SchemaListPagination({
29+
schemaListAPIParameter,
30+
paginationNumbers,
31+
setSchemaListAPIParameter,
32+
lastPage,
33+
}: ISchemaListPaginationProps): JSX.Element {
34+
return (
35+
<div className="mt-6 flex justify-end">
36+
<Pagination className="m-0 w-fit">
37+
<PaginationContent>
38+
{schemaListAPIParameter.page > 1 && (
39+
<PaginationItem>
40+
<PaginationPrevious
41+
href="#"
42+
onClick={() =>
43+
setSchemaListAPIParameter((prev) => ({
44+
...prev,
45+
page: prev.page - 1,
46+
}))
47+
}
48+
/>
49+
</PaginationItem>
50+
)}
51+
52+
{paginationNumbers.map((page, idx) => (
53+
<PaginationItem key={idx}>
54+
{page === '...' ? (
55+
<span className="text-muted-foreground px-3 py-2">…</span>
56+
) : (
57+
<PaginationLink
58+
className={`${
59+
page === schemaListAPIParameter.page
60+
? 'bg-primary text-white'
61+
: 'bg-background text-muted-foreground'
62+
} rounded-lg px-4 py-2`}
63+
href="#"
64+
onClick={() =>
65+
setSchemaListAPIParameter((prev) => ({
66+
...prev,
67+
page: page as number,
68+
}))
69+
}
70+
>
71+
{page}
72+
</PaginationLink>
73+
)}
74+
</PaginationItem>
75+
))}
76+
77+
{schemaListAPIParameter.page < lastPage && (
78+
<PaginationItem>
79+
<PaginationNext
80+
href="#"
81+
onClick={() =>
82+
setSchemaListAPIParameter((prev) => ({
83+
...prev,
84+
page: prev.page + 1,
85+
}))
86+
}
87+
/>
88+
</PaginationItem>
89+
)}
90+
</PaginationContent>
91+
</Pagination>
92+
</div>
93+
)
94+
}
95+
96+
export default SchemaListPagination

‎nextjs/src/features/schemas/type/schemas-interface.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { SchemaType, SchemaTypeValue } from '@/common/enums'
22

33
import { FormikProps } from 'formik'
44
import { IPopup } from '../components/Create'
5+
import React from 'react'
56

67
export interface ISchemaData {
78
schemaId: string
@@ -51,6 +52,7 @@ export interface ISchemaCardProps {
5152
version: string
5253
schemaId: string
5354
issuerDid: string
55+
issuerName?: string
5456
// eslint-disable-next-line @typescript-eslint/no-explicit-any
5557
attributes: any
5658
created: string
@@ -88,6 +90,7 @@ export interface ISchemaCardProps {
8890
noLedger?: boolean
8991
isVerification?: boolean
9092
isVerificationUsingEmail?: boolean
93+
onTitleClick?: (e: React.MouseEvent) => void
9194
}
9295

9396
export interface IW3cSchemaDetails {
@@ -213,6 +216,11 @@ export interface IRequiredAndDeleteProps {
213216
areFirstInputsSelected: boolean
214217
}
215218

219+
export interface ISidebarSliderData {
220+
label: string
221+
value: string
222+
copyable?: boolean
223+
}
216224
export interface UserOrgRole {
217225
orgId: string
218226
orgRole: {

0 commit comments

Comments
 (0)