evo/EvoCalculator.Client2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

apps/web: added AdminTable component

Browse Source
This commit is contained in:
obarykina 2024-03-25 16:23:38 +03:00
parent b3111c95e3
commit 0d94a7d105
5 changed files with 171 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
apps/web/Components/Admin/AdminRow/AdminRow.tsx Normal file
View File

@ -0,0 +1,39 @@
import style from '../AdminTable/Admin.module.css';
import type { CollapseProps } from 'antd';
import { Button, Collapse } from 'antd';
import styled from 'styled-components';
type IProps = {
readonly data: string;
readonly index: number;
readonly name: string;
readonly onClick: (name: string) => void;
};
const Wrapper = styled.div`
display: flex;
justify-content: space-between;
`;
export default function AdminRow(props: IProps) {
const { data, index, name, onClick } = props;
const handleClick = () => {
onClick(name);
};
const items: CollapseProps['items'] = [
{
children: <p>{data}</p>,
key: index.toString(),
label: data,
},
];
return (
<Wrapper>
<Collapse className={style.collapse} items={items} />
<Button onClick={handleClick}>Удалить</Button>
</Wrapper>
);
}

35
apps/web/Components/Admin/AdminRows/AdminRows.tsx Normal file
View File

@ -0,0 +1,35 @@
import AdminRow from '../AdminRow/AdminRow';
import type { CollapseProps } from 'antd';
import { Collapse } from 'antd';
export default function AdminRows({
index,
name,
onClick,
queries,
}: {
readonly index: number;
readonly name: string;
readonly onClick: (name: string) => void;
readonly queries: string[];
}) {
if (queries.length === 0) {
const items2: CollapseProps['items'] = [
{
children: null,
key: index.toString(),
label: name,
},
];
return <Collapse items={items2} />;
}
const rows: CollapseProps['items'] = queries.map((x, ind) => ({
children: <AdminRow key={x} data={x} index={ind} name={name} onClick={onClick} />,
key: index.toString(),
label: name,
}));
return <Collapse items={rows} />;
}

3
apps/web/Components/Admin/AdminTable/Admin.module.css Normal file
View File

@ -0,0 +1,3 @@
.collapse {
flex-grow: 1;
}

38
apps/web/Components/Admin/AdminTable/AdminTable.tsx Normal file
View File

@ -0,0 +1,38 @@
import AdminRows from '../AdminRows/AdminRows';
import { deleteQuery, getQueries } from '@/api/cache/query';
import type { ResponseQueries } from '@/api/cache/types';
import { useEffect, useState } from 'react';
export default function AdminTable() {
const [data, setData] = useState<ResponseQueries>({});
const handleClick = async (name: string) => {
await deleteQuery(name);
const queryList = await getQueries();
setData(queryList);
};
useEffect(() => {
const getRows = async () => {
const queryList = await getQueries();
// debugger;
setData(queryList);
};
getRows();
}, []);
return (
<>
{Object.keys(data).map((key, index) => (
<AdminRows
key={key}
queries={data[key].queries}
name={key}
index={index}
onClick={handleClick}
/>
))}
</>
);
}

56
apps/web/pages/admin.jsx Normal file
View File

@ -0,0 +1,56 @@
import { makeGetServerSideProps } from '.';
import AdminTable from '@/Components/Admin/AdminTable/AdminTable';
import { Error } from '@/Components/Common/Error';
import Background from '@/Components/Layout/Background';
import { Grid } from '@/Components/Layout/Page';
import { unlimitedRoles } from '@/config/users';
import * as hooks from '@/process/hooks';
import { useStore } from '@/stores/hooks';
import { min } from '@/styles/mq';
import Head from 'next/head';
import styled from 'styled-components';
function Content() {
const store = useStore();
store.$process.add('Unlimited');
hooks.useSentryScope();
hooks.useMainData();
hooks.useGetUsers();
hooks.useInsuranceData();
hooks.useReactions();
const Wrapper = styled(Background)`
padding: 4px 6px;
${min('tablet')} {
min-height: 790px;
}
${min('laptop')} {
padding: 4px 6px 10px;
}
`;
return (
<Grid>
<Head>
<title>Админка</title>
<meta name="description" content="Админка" />
</Head>
<Wrapper>
<AdminTable />
</Wrapper>
</Grid>
);
}
export default function Admin(props) {
if (props.statusCode !== 200) return <Error {...props} />;
return <Content />;
}
export const getServerSideProps = makeGetServerSideProps({
roles: unlimitedRoles,
});