generated from edenia/full-stack-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from edenia/perf/ui
Perf/UI
- Loading branch information
Showing
16 changed files
with
1,055 additions
and
914 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
...igrations/default/1695954636071_alter_table_public_request_add_column_created_at/down.sql
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| -- Could not auto-generate a down migration. | ||
| -- Please write an appropriate down migration for the SQL below: | ||
| -- alter table "public"."request" add column "created_at" timestamptz | ||
| -- null default now(); |
2 changes: 2 additions & 0 deletions
2
.../migrations/default/1695954636071_alter_table_public_request_add_column_created_at/up.sql
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| alter table "public"."request" add column "created_at" timestamptz | ||
| null default now(); |
21 changes: 21 additions & 0 deletions
21
...igrations/default/1695954640346_alter_table_public_request_add_column_updated_at/down.sql
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| -- Could not auto-generate a down migration. | ||
| -- Please write an appropriate down migration for the SQL below: | ||
| -- alter table "public"."request" add column "updated_at" timestamptz | ||
| -- null default now(); | ||
| -- | ||
| -- CREATE OR REPLACE FUNCTION "public"."set_current_timestamp_updated_at"() | ||
| -- RETURNS TRIGGER AS $$ | ||
| -- DECLARE | ||
| -- _new record; | ||
| -- BEGIN | ||
| -- _new := NEW; | ||
| -- _new."updated_at" = NOW(); | ||
| -- RETURN _new; | ||
| -- END; | ||
| -- $$ LANGUAGE plpgsql; | ||
| -- CREATE TRIGGER "set_public_request_updated_at" | ||
| -- BEFORE UPDATE ON "public"."request" | ||
| -- FOR EACH ROW | ||
| -- EXECUTE PROCEDURE "public"."set_current_timestamp_updated_at"(); | ||
| -- COMMENT ON TRIGGER "set_public_request_updated_at" ON "public"."request" | ||
| -- IS 'trigger to set value of column "updated_at" to current timestamp on row update'; |
19 changes: 19 additions & 0 deletions
19
.../migrations/default/1695954640346_alter_table_public_request_add_column_updated_at/up.sql
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| alter table "public"."request" add column "updated_at" timestamptz | ||
| null default now(); | ||
|
|
||
| CREATE OR REPLACE FUNCTION "public"."set_current_timestamp_updated_at"() | ||
| RETURNS TRIGGER AS $$ | ||
| DECLARE | ||
| _new record; | ||
| BEGIN | ||
| _new := NEW; | ||
| _new."updated_at" = NOW(); | ||
| RETURN _new; | ||
| END; | ||
| $$ LANGUAGE plpgsql; | ||
| CREATE TRIGGER "set_public_request_updated_at" | ||
| BEFORE UPDATE ON "public"."request" | ||
| FOR EACH ROW | ||
| EXECUTE PROCEDURE "public"."set_current_timestamp_updated_at"(); | ||
| COMMENT ON TRIGGER "set_public_request_updated_at" ON "public"."request" | ||
| IS 'trigger to set value of column "updated_at" to current timestamp on row update'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
172 changes: 172 additions & 0 deletions
172
webapp/src/app/[locale]/components/TableCredential/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,172 @@ | ||
| import * as React from 'react' | ||
| import { useEffect } from 'react' | ||
| import { useLocale, useTranslations } from 'next-intl' | ||
| import Box from '@mui/material/Box' | ||
| import Table from '@mui/material/Table' | ||
| import TableBody from '@mui/material/TableBody' | ||
| import TableCell from '@mui/material/TableCell' | ||
| import TableContainer from '@mui/material/TableContainer' | ||
| import TableHead from '@mui/material/TableHead' | ||
| import TablePagination from '@mui/material/TablePagination' | ||
| import TableRow from '@mui/material/TableRow' | ||
| import Typography from '@mui/material/Typography' | ||
| import Paper from '@mui/material/Paper' | ||
| import { AuthorizationRequestMessage } from '@0xpolygonid/js-sdk/dist/types/iden3comm/types/protocol/auth' | ||
| import { gql, useLazyQuery } from '@apollo/client' | ||
|
|
||
| const getRequestQuery = gql` | ||
| query get_request_data($limit: Int!, $offset: Int!) { | ||
| request(limit: $limit, offset: $offset, order_by: { created_at: desc }) { | ||
| auth | ||
| session_id | ||
| status | ||
| } | ||
| request_aggregate { | ||
| aggregate { | ||
| count | ||
| } | ||
| } | ||
| } | ||
| ` | ||
|
|
||
| export const Status = { | ||
| pending: 'pending', | ||
| success: 'success' | ||
| } as const | ||
|
|
||
| export type StatusType = (typeof Status)[keyof typeof Status] | ||
|
|
||
| export interface Request { | ||
| session_id: string | ||
| auth: AuthorizationRequestMessage | ||
| status?: StatusType | ||
| } | ||
|
|
||
| export interface RequestResponse { | ||
| request: Request[] | ||
| request_aggregate: { | ||
| aggregate: { | ||
| count: number | ||
| } | ||
| } | ||
| } | ||
|
|
||
| interface HeadCell { | ||
| disablePadding: boolean | ||
| id: keyof Request | ||
| label: string | ||
| numeric: boolean | ||
| } | ||
|
|
||
| const headCells: readonly HeadCell[] = [ | ||
| { | ||
| id: 'session_id', | ||
| numeric: false, | ||
| disablePadding: false, | ||
| label: 'Proof Id' | ||
| }, | ||
| { | ||
| id: 'status', | ||
| numeric: true, | ||
| disablePadding: false, | ||
| label: 'Status' | ||
| } | ||
| ] | ||
|
|
||
| const EnhancedTableHead = () => { | ||
| return ( | ||
| <TableHead> | ||
| <TableRow> | ||
| {headCells.map(headCell => ( | ||
| <TableCell | ||
| key={headCell.id} | ||
| align={headCell.numeric ? 'right' : 'left'} | ||
| padding={headCell.disablePadding ? 'none' : 'normal'} | ||
| > | ||
| {headCell.label} | ||
| </TableCell> | ||
| ))} | ||
| </TableRow> | ||
| </TableHead> | ||
| ) | ||
| } | ||
|
|
||
| export default function EnhancedTable(): JSX.Element { | ||
| const locale = useLocale() | ||
| const t = useTranslations('CredentialPage') | ||
| const [page, setPage] = React.useState(0) | ||
| const [rowsPerPage] = React.useState(5) | ||
| const [loadQuery, { data }] = useLazyQuery<RequestResponse>(getRequestQuery, { | ||
| variables: { limit: rowsPerPage, offset: page * rowsPerPage }, | ||
| fetchPolicy: 'network-only' | ||
| }) | ||
|
|
||
| const handleChangePage = (event: unknown, newPage: number) => { | ||
| setPage(newPage) | ||
|
|
||
| loadQuery({ | ||
| variables: { limit: rowsPerPage, offset: newPage * rowsPerPage } | ||
| }) | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| loadQuery() | ||
| }, [loadQuery]) | ||
|
|
||
| return ( | ||
| <Box sx={{ width: '70%' }}> | ||
| <Paper sx={{ width: '100%', mb: 2 }}> | ||
| <TableContainer> | ||
| <Table aria-labelledby='tableTitle' size={'medium'}> | ||
| <EnhancedTableHead /> | ||
| {data?.request_aggregate.aggregate.count || 0 > 0 ? ( | ||
| <TableBody> | ||
| {data?.request.map((row, index) => { | ||
| const labelId = `enhanced-table-checkbox-${index}` | ||
|
|
||
| return ( | ||
| <TableRow | ||
| hover | ||
| role='checkbox' | ||
| tabIndex={-1} | ||
| key={row.session_id} | ||
| sx={{ cursor: 'pointer' }} | ||
| > | ||
| <TableCell | ||
| component='th' | ||
| id={labelId} | ||
| scope='row' | ||
| padding='normal' | ||
| > | ||
| {row.session_id.toString().substring(0, 8)} | ||
| </TableCell> | ||
| <TableCell align='right'>{row.status}</TableCell> | ||
| </TableRow> | ||
| ) | ||
| })} | ||
| </TableBody> | ||
| ) : ( | ||
| <Typography | ||
| variant='caption' | ||
| style={{ | ||
| fontSize: '16px', | ||
| marginLeft: '8px' | ||
| }} | ||
| > | ||
| {t('no-data', { locale })} | ||
| </Typography> | ||
| )} | ||
| </Table> | ||
| </TableContainer> | ||
| <TablePagination | ||
| rowsPerPageOptions={[5]} | ||
| component='div' | ||
| count={data?.request_aggregate.aggregate.count || 0} | ||
| rowsPerPage={rowsPerPage} | ||
| page={page} | ||
| onPageChange={handleChangePage} | ||
| /> | ||
| </Paper> | ||
| </Box> | ||
| ) | ||
| } |
Oops, something went wrong.