From 28356fcf7ad4e0ef2aa68f428607242b22d5cc1c Mon Sep 17 00:00:00 2001 From: Vitali Karpuk Date: Wed, 13 Mar 2024 18:16:49 +0300 Subject: [PATCH] add domain records component --- ui/app/actions/actions.ts | 10 ++--- ui/app/names/[id]/page.tsx | 2 + ui/comman/types.ts | 24 +++++++++++- .../atoms/subHeader/index.module.css | 3 ++ ui/components/atoms/subHeader/index.ts | 1 + ui/components/atoms/subHeader/subHeader.tsx | 20 ++++++++++ .../accountConent/accountContent.tsx | 7 ++-- .../organisms/accountConent/constants.ts | 4 +- .../organisms/accountConent/index.module.css | 2 - .../organisms/detailsNameTable/constants.ts | 38 +++++++++++++++++++ .../detailsNameTable/detailsNameTable.tsx | 23 +++++++++++ .../detailsNameTable/index.module.css | 3 ++ ui/components/organisms/table/table.tsx | 13 ++++--- .../table/templates/stringTemplate/index.tsx | 15 ++------ ui/components/organisms/table/types.ts | 21 ++++++++++ .../organisms/table/view/listTableContent.tsx | 4 +- 16 files changed, 158 insertions(+), 32 deletions(-) create mode 100644 ui/components/atoms/subHeader/index.module.css create mode 100644 ui/components/atoms/subHeader/index.ts create mode 100644 ui/components/atoms/subHeader/subHeader.tsx create mode 100644 ui/components/organisms/detailsNameTable/constants.ts create mode 100644 ui/components/organisms/detailsNameTable/detailsNameTable.tsx create mode 100644 ui/components/organisms/detailsNameTable/index.module.css create mode 100644 ui/components/organisms/table/types.ts diff --git a/ui/app/actions/actions.ts b/ui/app/actions/actions.ts index b612090..3292cf7 100644 --- a/ui/app/actions/actions.ts +++ b/ui/app/actions/actions.ts @@ -24,7 +24,7 @@ export async function saveName({ body: JSON.stringify(payload), headers: { "Content-Type": "application/json", - "x-api-key": process.env.NEXT_PUBLIC_X_API_KEY, + "x-api-key": process.env.NEXT_PUBLIC_API_KEY, }, }); return await res.json(); @@ -50,7 +50,7 @@ export async function getAccountDomains({ { headers: { "Content-Type": "application/json", - "x-api-key": process.env.NEXT_PUBLIC_X_API_KEY, + "x-api-key": process.env.NEXT_PUBLIC_API_KEY, }, } ); @@ -73,7 +73,7 @@ export async function getDomains({ { headers: { "Content-Type": "application/json", - "x-api-key": process.env.NEXT_PUBLIC_X_API_KEY, + "x-api-key": process.env.NEXT_PUBLIC_API_KEY, }, } ); @@ -86,7 +86,7 @@ export async function getDomainsMetadata(id: string) { { headers: { "Content-Type": "application/json", - "x-api-key": process.env.NEXT_PUBLIC_X_API_KEY, + "x-api-key": process.env.NEXT_PUBLIC_API_KEY, }, } ); @@ -99,7 +99,7 @@ export async function getAccountDomainDetails( const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/domains/${id}`, { headers: { "Content-Type": "application/json", - "x-api-key": process.env.NEXT_PUBLIC_X_API_KEY, + "x-api-key": process.env.NEXT_PUBLIC_API_KEY, }, }); return await res.json(); diff --git a/ui/app/names/[id]/page.tsx b/ui/app/names/[id]/page.tsx index 0e752e8..6997a7b 100644 --- a/ui/app/names/[id]/page.tsx +++ b/ui/app/names/[id]/page.tsx @@ -4,6 +4,7 @@ import { getAccountDomainDetails } from "@/app/actions/actions"; import { useEffect, useState } from "react"; import DetailsNameHeader from "@/components/organisms/detailsNameHeader/detailsNameHeader"; +import DetailsNameTable from "@/components/organisms/detailsNameTable/detailsNameTable"; export default function Page({ params }: { params: { id: string } }) { const [accountDomainDetails, setAccountDomainDetails] = useState(null); @@ -22,6 +23,7 @@ export default function Page({ params }: { params: { id: string } }) { return (
+
); } diff --git a/ui/comman/types.ts b/ui/comman/types.ts index fe8ec3e..c107f3f 100644 --- a/ui/comman/types.ts +++ b/ui/comman/types.ts @@ -1,3 +1,5 @@ +import { TableTemplates } from "@/components/organisms/table/templates"; + export type View = { sm: number; md: number; @@ -6,7 +8,7 @@ export type View = { export type LimitOptions = { text: string; value: number }[]; export type TabSwitcherOptions = string[]; -export type DataTable = { +export interface DataTable { data?: any[]; content?: any[]; size: number; @@ -34,6 +36,26 @@ export type DataTable = { first: boolean; numberOfElements: number; empty: boolean; +} + +export type TableConfig = { + colName: string; + headerText: string; + columnTemplate: TableTemplates; + fields: { + value?: string; + url?: string; + tooltipFromData?: string; + tooltipText?: string; + func?: (value: string) => void; + prefix?: string; + postfix?: string; + additionValue?: string; + }; + sortBy?: SORT_BY; + style?: { + color?: string; + } }; export enum SORT_BY { diff --git a/ui/components/atoms/subHeader/index.module.css b/ui/components/atoms/subHeader/index.module.css new file mode 100644 index 0000000..43861eb --- /dev/null +++ b/ui/components/atoms/subHeader/index.module.css @@ -0,0 +1,3 @@ +.subHeader { + font-size: 20px; +} \ No newline at end of file diff --git a/ui/components/atoms/subHeader/index.ts b/ui/components/atoms/subHeader/index.ts new file mode 100644 index 0000000..2c0eb72 --- /dev/null +++ b/ui/components/atoms/subHeader/index.ts @@ -0,0 +1 @@ +export {default as SubHeader} from './subHeader' \ No newline at end of file diff --git a/ui/components/atoms/subHeader/subHeader.tsx b/ui/components/atoms/subHeader/subHeader.tsx new file mode 100644 index 0000000..f458a3a --- /dev/null +++ b/ui/components/atoms/subHeader/subHeader.tsx @@ -0,0 +1,20 @@ +import { interSemiBold } from "@/app/fonts"; +import classNames from "classnames"; + +import style from "./index.module.css"; + +const SubHeader = ({ + header, + className, +}: { + header: string; + className?: string; +}): JSX.Element => { + return ( +
+ {header} +
+ ); +}; + +export default SubHeader; diff --git a/ui/components/organisms/accountConent/accountContent.tsx b/ui/components/organisms/accountConent/accountContent.tsx index f58412f..2cd0b0c 100644 --- a/ui/components/organisms/accountConent/accountContent.tsx +++ b/ui/components/organisms/accountConent/accountContent.tsx @@ -7,6 +7,7 @@ import { Table } from "../table"; import { ScoringConfig, mockData } from "./constants"; import style from "./index.module.css"; import { interSemiBold } from "@/app/fonts"; +import { ORDER_BY, SORT_BY } from "@/comman/types"; const AccountContent = () => { const [typeView, setTypeView] = useState(TypeView.CARD); @@ -15,7 +16,7 @@ const AccountContent = () => { }; return ( -
+
My Names
@@ -35,8 +36,8 @@ const AccountContent = () => { { text: "50", value: 50 }, { text: "100", value: 100 }, ]} - sortBy={"sortBy"} - orderBy={"orderBy"} + sortBy={SORT_BY.RESERVATION_TIMESTAMP} + orderBy={ORDER_BY.DESC} onChangePage={(data) => { console.log(data); }} diff --git a/ui/components/organisms/accountConent/constants.ts b/ui/components/organisms/accountConent/constants.ts index e3521fa..08aa8c2 100644 --- a/ui/components/organisms/accountConent/constants.ts +++ b/ui/components/organisms/accountConent/constants.ts @@ -1,8 +1,8 @@ -import { SORT_BY } from "../../../comman/types"; +import { SORT_BY, TableConfig } from "../../../comman/types"; import { TableTemplates } from "../table/templates"; import iconMock from "./img/iconMock.svg"; -export const ScoringConfig = [ +export const ScoringConfig: TableConfig[] = [ { colName: "names", headerText: "Registered Names", diff --git a/ui/components/organisms/accountConent/index.module.css b/ui/components/organisms/accountConent/index.module.css index d47f133..5292730 100644 --- a/ui/components/organisms/accountConent/index.module.css +++ b/ui/components/organisms/accountConent/index.module.css @@ -2,8 +2,6 @@ display: flex; flex-direction: column; width: 100%; - padding: 0 40px; - margin-left: 265px; } .header { diff --git a/ui/components/organisms/detailsNameTable/constants.ts b/ui/components/organisms/detailsNameTable/constants.ts new file mode 100644 index 0000000..f5f975b --- /dev/null +++ b/ui/components/organisms/detailsNameTable/constants.ts @@ -0,0 +1,38 @@ +import { SORT_BY, TableConfig } from "@/comman/types"; +import { TableTemplates } from "../table/templates"; + + +export const mockData = { + data: [ + { record: "Email", value: 'Set' }, + { record: "Discord",value: 'Set' }, + { record: "Github", value: 'Set' }, + { record: "Reddit", value: 'Set' }, + { record: "X (Twitter)", value: 'Set' }, + { record: "Telegram", value: 'Set'}, + ], + + }; + + +export const tableConfig: TableConfig[] = [ + { + colName: "record", + headerText: "Record", + columnTemplate: TableTemplates.STRING, + fields: { + value: "record", + }, + }, + { + colName: "value", + columnTemplate: TableTemplates.STRING, + headerText: "Value", + fields: { + value: "value", + }, + style: { + color: '#7191FC' + } + }, +]; diff --git a/ui/components/organisms/detailsNameTable/detailsNameTable.tsx b/ui/components/organisms/detailsNameTable/detailsNameTable.tsx new file mode 100644 index 0000000..f925176 --- /dev/null +++ b/ui/components/organisms/detailsNameTable/detailsNameTable.tsx @@ -0,0 +1,23 @@ +import { TypeView } from "@/components/atoms/switchView/switchView"; +import { Table } from "../table"; +import { mockData, tableConfig } from "./constants"; +import { SubHeader } from "@/components/atoms/subHeader"; + +import style from './index.module.css' + +const DetailsNameTable = () => { + return ( +
+ + + + ); +}; + +export default DetailsNameTable; diff --git a/ui/components/organisms/detailsNameTable/index.module.css b/ui/components/organisms/detailsNameTable/index.module.css new file mode 100644 index 0000000..146d441 --- /dev/null +++ b/ui/components/organisms/detailsNameTable/index.module.css @@ -0,0 +1,3 @@ +.subHeader { + margin-bottom: 13px; +} \ No newline at end of file diff --git a/ui/components/organisms/table/table.tsx b/ui/components/organisms/table/table.tsx index ef55f9e..dfaa0ec 100644 --- a/ui/components/organisms/table/table.tsx +++ b/ui/components/organisms/table/table.tsx @@ -1,15 +1,16 @@ import style from "./index.module.css"; -import { ORDER_BY } from "../../../comman/types"; +import { ORDER_BY, SORT_BY } from "../../../comman/types"; import { TableErrorMessage } from "../../atoms/tableErrorMessage"; import { Loader, LoaderVariant } from "../../atoms/loader"; import { TypeView } from "../../atoms/switchView/switchView"; import NameCards from "./view/nameCards"; import ListTableContent from "./view/listTableContent"; import Pagination from "../pagination/pagination"; +import { TableProps } from "./types"; const Table = ({ data, - config: configs, + config, isLoading, currentPage, pageLimit, @@ -23,8 +24,9 @@ const Table = ({ onChangeSort, onChangeOrder, typeView, -}) => { - const handleSort = (sort?: string): void => { + isHiddenPagination, +}: TableProps): JSX.Element => { + const handleSort = (sort?: SORT_BY): void => { if (!sort) return; if (sort === sortBy) { return onChangeOrder( @@ -37,6 +39,7 @@ const Table = ({ const showErrorMessage = !isLoading && (!data || data?.data?.length < 1); const renderPagination = () => { + if (isHiddenPagination) return null; return ( void; - prefix?: string; - postfix?: string; - additionValue?: string; - }; - }; + config: TableConfig; }; const StringTemplate = ({ data, config }: StringTemplateProps) => { @@ -34,7 +25,7 @@ const StringTemplate = ({ data, config }: StringTemplateProps) => { value === null; return ( -
+
{isShowDash ? ( "-" ) : ( diff --git a/ui/components/organisms/table/types.ts b/ui/components/organisms/table/types.ts new file mode 100644 index 0000000..704119f --- /dev/null +++ b/ui/components/organisms/table/types.ts @@ -0,0 +1,21 @@ +import { LimitOptions, ORDER_BY, SORT_BY, TableConfig } from "@/comman/types"; +import { TypeView } from "@/components/atoms/switchView/switchView"; + +export interface TableProps { + data: { data: any[] }; + config: TableConfig[]; + isLoading: boolean; + currentPage?: number; + pageLimit?: number; + totalElements?: number; + pagesCount?: number; + sortBy?: SORT_BY; + orderBy?: ORDER_BY; + onChangePage?: (value: string) => void; + limitOptions?: LimitOptions; + onChangeLimit?: (value: number) => void; + onChangeSort?: (value: SORT_BY) => void; + onChangeOrder?: (value: ORDER_BY) => void; + typeView: TypeView; + isHiddenPagination?: boolean; +} diff --git a/ui/components/organisms/table/view/listTableContent.tsx b/ui/components/organisms/table/view/listTableContent.tsx index 4ad2afe..3673fa8 100644 --- a/ui/components/organisms/table/view/listTableContent.tsx +++ b/ui/components/organisms/table/view/listTableContent.tsx @@ -25,7 +25,7 @@ const ListTableContent = ({ showErrorMessage, sortBy, orderBy, -}: ListTableContent): JSX.Element => { +}: ListTableContent): JSX.Element => { return (
@@ -39,7 +39,7 @@ const ListTableContent = ({ })} > {headerText} - {sortBy === configSortBy && ( + {configSortBy && sortBy === configSortBy && (