behnam/diapal-panel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[FEAT]: dynamic show places and users list

Browse Source
This commit is contained in:
behnamrhp 2023-05-20 17:20:31 +03:00
parent 143e3513da
commit c0de160c59
19 changed files with 117 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintrc.json
View File

@ -68,9 +68,11 @@
"error",
{
"usePrettierrc": true,
"singleQuote": true
},
{}
"jsxSingleQuote": true,
"singleQuote": true,
"endOfLine": "auto"
}
],
"jest/valid-title": "off",
"react/button-has-type": "off",

2
src/business-logic/core/places/common/entity/placeEntity.ts
View File

@ -1,7 +1,7 @@
type Places = {
placeType: string;
name: string;
qr: null;
qr: null | string;
id: string;
parentId: string | null;
};

3
src/driven/adapters/get-places-adapter/getPlacesAdapter.ts
View File

@ -16,8 +16,7 @@ const getPlacesAdapter = (): IGetPlacesPort & getPlacesAdapterReturnType => {
// make the httpHandler
const httpProvider = new HTTPPovider();
const httpHandler = async () =>
httpProvider.request<GetPlacesResponse>(options);
const httpHandler = async () => httpProvider.request<GetPlacesResponse>(options);
// return the method
return {

2
src/driven/boundaries/state-management/stateManagementProvider.ts
View File

@ -1,6 +1,6 @@
export default abstract class StateManagementProvider {
abstract useGetQuery<DataType>(
key: string,
httpHandler: () => Promise<DataType>
httpHandler: () => Promise<DataType>,
): { data: DataType | undefined; isLoading: boolean; error?: string };
}

2
src/driven/boundaries/state-management/stateManagementService.ts
View File

@ -15,7 +15,7 @@ export default class StateManagementService implements StateManagementProvider {
useGetQuery<DataType>(
key: string,
httpHandler: () => Promise<DataType>
httpHandler: () => Promise<DataType>,
): {
data: DataType | undefined;
isLoading: boolean;

2
src/driven/boundaries/state-management/swrBoundary.ts
View File

@ -4,7 +4,7 @@ import StateManagementProvider from './stateManagementProvider';
export default class SwrBoundary implements StateManagementProvider {
useGetQuery<DataType>(
key: string,
httpHandler: () => Promise<DataType>
httpHandler: () => Promise<DataType>,
): {
data: DataType | undefined;
isLoading: boolean;

8
src/driven/utils/components/page-title/pageTitle.tsx
View File

@ -7,5 +7,11 @@ interface IPageTitleProps {
export default function PageTitle(props: IPageTitleProps) {
const { title, className } = props;
return <div className={`w-full shadow-sm shadow-txt-light font-semibold ${className}`}>{title}</div>;
return (
<div
className={`w-full shadow-sm shadow-txt-light font-semibold ${className}`}
>
{title}
</div>
);
}

1
src/driven/utils/constants/staticMessages.ts
View File

@ -10,6 +10,7 @@ export const staticMessages = {
place_id: 'Place id',
title: 'title',
status: 'Status',
placeType: 'Place Type',
address: 'Address',
qrCode: 'qrCode',
createUser: 'Create user',

8
src/driving/application/core/common/table-row/infra/TableRowInfra.tsx
View File

@ -9,5 +9,11 @@ export default function TableRow(props: ITableRowInfra) {
const { isRowSelected } = useTableRowVM({ selectedRowId, rowId });
return <TableRowView isSelected={isRowSelected} rowData={rowData} setSelectedRowId={setSelectedRowId} />;
return (
<TableRowView
isSelected={isRowSelected}
rowData={rowData}
setSelectedRowId={setSelectedRowId}
/>
);
}

2
src/driving/application/core/common/table-row/infra/protocols.ts
View File

@ -1,7 +1,7 @@
export interface ITableRowInfra {
selectedRowId: string;
rowData: {
rowItemsTitle: string[];
rowItemsTitle: (string | null)[];
rowId: string;
};
setSelectedRowId: React.Dispatch<React.SetStateAction<string>>;

9
src/driving/application/core/common/table-row/view/TableRow.tsx
View File

@ -6,7 +6,14 @@ export default function TableRowView(props: ITableRowProps) {
const { isSelected, setSelectedRowId, rowData } = props;
const { rowId, rowItemsTitle } = rowData;
const columns = rowItemsTitle.map((rowItemTitle, index) => {
return <RowItem key={rowItemTitle} hasCheckbox={index === 0} isSelected={isSelected} title={rowItemTitle} />;
return (
<RowItem
key={rowItemTitle}
hasCheckbox={index === 0}
isSelected={isSelected}
title={rowItemTitle}
/>
);
});
return <tr onClick={() => setSelectedRowId(rowId)}>{columns}</tr>;

2
src/driving/application/core/common/table-row/view/protocols.ts
View File

@ -1,7 +1,7 @@
export interface ITableRowProps {
isSelected: boolean;
rowData: {
rowItemsTitle: string[];
rowItemsTitle: (string | null)[];
rowId: string;
};
setSelectedRowId: React.Dispatch<React.SetStateAction<string>>;

8
src/driving/application/core/common/table-row/view/table-row-item/view/RowItem.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
interface IRowItemProp {
title: string;
title: string | null;
hasCheckbox: boolean;
isSelected: boolean;
}
@ -17,7 +17,11 @@ export default function RowItem(props: IRowItemProp) {
isSelected ? 'opacity-100' : 'opacity-0'
}`}
>
<span className={`${isSelected ? 'visible' : 'hidden'} transition-all`}>&#10003;</span>
<span
className={`${isSelected ? 'visible' : 'hidden'} transition-all`}
>
&#10003;
</span>
</span>
)}
{title}

67
src/driving/application/core/places-list/view/PlacesListView.tsx
View File

@ -1,39 +1,19 @@
import React from 'react';
import React, { useMemo } from 'react';
import { staticMessages } from '~/driven/utils/constants/staticMessages';
import Loading from '~/driven/utils/components/loading/Loading';
import Places from '~/business-logic/core/places/common/entity/placeEntity';
import TableRow from '../../common/table-row';
import { IPlacesListProps } from './protocols';
export default function UsersListView(props: IPlacesListProps) {
const { selectedRowId, setSelectedRowId, placesList } = props;
console.log(placesList.data);
const rows = () => {
const placesdata = [
{
id: '1',
place_id: '6440020b89366fdcaf15a8c2',
title: 'flat demoplace ',
status: 'demo',
address: 'demoplace',
},
{
id: '2',
place_id: '6440020b89366fdcaf15asdfa',
title: 'flat demoplace second ',
status: 'demo second',
address: 'demoplace second',
},
];
return placesdata.map((places) => {
const rows = useMemo(() => {
if (!placesList.data) return null;
return placesList.data.getData().map((places) => {
const rowData = {
rowItemsTitle: [
places.id,
places.title,
places.status,
places.address,
'',
],
rowItemsTitle: [places.name, places.placeType, places.qr],
rowId: places.id,
};
return (
@ -45,27 +25,36 @@ export default function UsersListView(props: IPlacesListProps) {
/>
);
});
};
}, [placesList]);
if (placesList.isLoading)
return (
<div className="flex justify-center items-center">
<div className='flex justify-center items-center'>
<Loading />
</div>
);
const tableTitles: Pick<Places, 'name' | 'placeType' | 'qr'> = {
name: staticMessages.global.title,
placeType: staticMessages.global.placeType,
qr: staticMessages.global.qrCode,
};
const titles = Object.keys(tableTitles).map((titleKey) => {
const key = titleKey as keyof typeof tableTitles;
const title = tableTitles[key];
return (
<table className="table-auto rounded-md w-full text-sm">
<thead className="text-txt-medium font-bold">
<tr>
<th className="py-3">{staticMessages.global.place_id}</th>
<th className="py-3">{staticMessages.global.title}</th>
<th className="py-3">{staticMessages.global.status}</th>
<th className="py-3">{staticMessages.global.address}</th>
<th className="py-3">{staticMessages.global.qrCode}</th>
</tr>
<th key={key} className='py-3'>
{title}
</th>
);
});
return (
<table className='table-auto rounded-md w-full text-sm h-fit'>
<thead className='text-txt-medium font-bold'>
<tr>{titles}</tr>
</thead>
<tbody>{rows()}</tbody>
<tbody>{rows}</tbody>
</table>
);
}

58
src/driving/application/core/users-list/view/UsersListView.tsx
View File

@ -1,29 +1,20 @@
import React from 'react';
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useMemo } from 'react';
import { staticMessages } from '~/driven/utils/constants/staticMessages';
import Users from '~/business-logic/core/users/common/entity/entity';
import Loading from '~/driven/utils/components/loading/Loading';
import TableRow from '../../common/table-row';
import { IUserListProps } from './protocols';
export default function UsersListView(props: IUserListProps) {
const { selectedRowId, setSelectedRowId, usersList } = props;
console.log(usersList.data);
const rows = () => {
const userdata = [
{
id: '1',
firstname: 'behnam',
lastname: 'rahimpour',
},
{
id: '2',
firstname: 'Salar',
lastname: 'Sali',
},
];
const rows = useMemo(() => {
if (!usersList.data) return null;
return userdata.map((user) => {
return usersList.data.getData().map((user) => {
const rowData = {
rowItemsTitle: [user.firstname, user.lastname],
rowId: user.id,
rowId: user.accountId,
};
return (
<TableRow
@ -34,17 +25,36 @@ export default function UsersListView(props: IUserListProps) {
/>
);
});
}, [usersList]);
const tableTitles: Pick<Users, 'firstname' | 'lastname'> = {
firstname: staticMessages.global.fistname,
lastname: staticMessages.global.lastname,
};
const titles = Object.keys(tableTitles).map((titleKey) => {
const key = titleKey as keyof typeof tableTitles;
const title = tableTitles[key];
return (
<table className="table-auto rounded-md w-full text-sm">
<thead className="text-txt-medium font-bold">
<tr>
<th className="py-3">{staticMessages.global.fistname}</th>
<th className="py-3">{staticMessages.global.lastname}</th>
</tr>
<th key={key} className='py-3'>
{title}
</th>
);
});
if (usersList.isLoading)
return (
<div className='flex justify-center items-center'>
<Loading />
</div>
);
return (
<table className='table-auto rounded-md w-full text-sm h-fit'>
<thead className='text-txt-medium font-bold'>
<tr>{titles}</tr>
</thead>
<tbody>{rows()}</tbody>
<tbody>{rows}</tbody>
</table>
);
}

4
src/driving/application/support/sidebar/view/Sidebar.tsx
View File

@ -13,7 +13,9 @@ export default function Sidebar() {
key={key}
to={routesData[key].path}
className={`flex text-white mb-6 text-sm w-full py-2 pl-2 rounded-lg ${
isCurrentPage.pathname === routesData[key].path ? 'bg-primary-300' : ''
isCurrentPage.pathname === routesData[key].path
? 'bg-primary-300'
: ''
}`}
>
<img src={routesData[key].icon} alt='page icon' className='mr-2' />

5
src/driving/main/pages/CreateUser.tsx
View File

@ -6,7 +6,10 @@ import CreateUser from '~/driving/application/core/create-user';
export default function CreateUserPage() {
return (
<>
<PageTitle className='px-4 py-5' title={staticMessages.global.createUser} />
<PageTitle
className='px-4 py-5'
title={staticMessages.global.createUser}
/>
<CreateUser />
</>
);

6
src/driving/main/pages/index.tsx
View File

@ -11,7 +11,11 @@ export default function index() {
<PageTitle className='px-4 py-5' title={staticMessages.global.users} />
<div className='container mx-auto px-4'>
<div className='w-full flex flex-row-reverse items-center py-2'>
<PrimaryButton className='text-sm' title={staticMessages.global.submit} onClick={() => null} />
<PrimaryButton
className='text-sm'
title={staticMessages.global.submit}
onClick={() => null}
/>
</div>
<div className='md:grid-cols-2 gap-x-4 grid grid-cols-1 mx-auto'>
<UsersList />

2
src/driving/main/pages/layouts/MainPageLayout.tsx
View File

@ -4,7 +4,7 @@ import Sidebar from '~/driving/application/support/sidebar';
export default function MainPageLayout() {
return (
<div className='flex flex-nowrap h-screen'>
<div className='flex flex-nowrap min-h-screen'>
<Sidebar />
<main className='dipal-panel w-full text-black bg-white h-fit'>
<Outlet />