From 77160dee882f5607c53fc2b5c1f722e98412d634 Mon Sep 17 00:00:00 2001
From: behnamrhp <behnamrahimpour74@gmail.com>
Date: Thu, 18 May 2023 21:37:58 +0300
Subject: [PATCH] [FEAT]: add pages in right sidebar
---
public/assets/icons/createuser.svg | 7 +++++
public/assets/icons/users.svg | 6 +++++
src/driven/utils/configs/appConfig.ts | 19 ++++++++++++-
src/driven/utils/constants/assertUrls.ts | 4 ++-
src/driven/utils/constants/staticMessages.ts | 3 ++-
.../core/{ => common}/table-row/index.tsx | 0
.../table-row/infra/TableRowInfra.tsx | 0
.../{ => common}/table-row/infra/protocols.ts | 0
.../{ => common}/table-row/view/TableRow.tsx | 2 +-
.../{ => common}/table-row/view/protocols.ts | 0
.../view/table-row-item/view/RowItem.tsx | 0
.../table-row/viewmodel/protocols.ts | 0
.../table-row/viewmodel/tableRowVM.ts | 0
.../core/places-list/view/PlacesListView.tsx | 6 ++---
.../core/users-list/view/UsersListView.tsx | 6 ++---
.../support/sidebar/view/Sidebar.tsx | 22 +++++++++++++--
src/driving/main/Router/Router.tsx | 9 +++++--
src/driving/main/pages/CreateUser.tsx | 11 ++++++++
src/driving/main/pages/index.tsx | 27 ++++++++-----------
.../main/pages/layouts/MainPageLayout.tsx | 14 ++++++++++
20 files changed, 106 insertions(+), 30 deletions(-)
create mode 100644 public/assets/icons/createuser.svg
create mode 100644 public/assets/icons/users.svg
rename src/driving/application/core/{ => common}/table-row/index.tsx (100%)
rename src/driving/application/core/{ => common}/table-row/infra/TableRowInfra.tsx (100%)
rename src/driving/application/core/{ => common}/table-row/infra/protocols.ts (100%)
rename src/driving/application/core/{ => common}/table-row/view/TableRow.tsx (79%)
rename src/driving/application/core/{ => common}/table-row/view/protocols.ts (100%)
rename src/driving/application/core/{ => common}/table-row/view/table-row-item/view/RowItem.tsx (100%)
rename src/driving/application/core/{ => common}/table-row/viewmodel/protocols.ts (100%)
rename src/driving/application/core/{ => common}/table-row/viewmodel/tableRowVM.ts (100%)
create mode 100644 src/driving/main/pages/CreateUser.tsx
create mode 100644 src/driving/main/pages/layouts/MainPageLayout.tsx
diff --git a/public/assets/icons/createuser.svg b/public/assets/icons/createuser.svg
new file mode 100644
index 0000000..081c6c0
--- /dev/null
+++ b/public/assets/icons/createuser.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 2V8H20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 13H8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 17H8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 9H9H8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/assets/icons/users.svg b/public/assets/icons/users.svg
new file mode 100644
index 0000000..5c48177
--- /dev/null
+++ b/public/assets/icons/users.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23 20.9999V18.9999C22.9993 18.1136 22.7044 17.2527 22.1614 16.5522C21.6184 15.8517 20.8581 15.3515 20 15.1299" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 3.12988C16.8604 3.35018 17.623 3.85058 18.1676 4.55219C18.7122 5.2538 19.0078 6.11671 19.0078 7.00488C19.0078 7.89305 18.7122 8.75596 18.1676 9.45757C17.623 10.1592 16.8604 10.6596 16 10.8799" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/driven/utils/configs/appConfig.ts b/src/driven/utils/configs/appConfig.ts
index 923fd3c..dac6474 100644
--- a/src/driven/utils/configs/appConfig.ts
+++ b/src/driven/utils/configs/appConfig.ts
@@ -1,9 +1,26 @@
+import { icons } from "../constants/assertUrls";
+import { staticMessages } from "../constants/staticMessages";
+
export const appConfig = {};
export const routes = {
- home: '/',
+ usersList: '/',
+ createUser: '/create-user'
};
+export const routesData = {
+ usersList: {
+ path: routes.usersList,
+ icon: icons.users,
+ title: staticMessages.global.users
+ },
+ createUser: {
+ path: routes.createUser,
+ icon: icons.createUser,
+ title: staticMessages.global.createUser
+ }
+}
+
const baseApiUrl = import.meta.env.BASE_API_URL;
export const apiUrls = {
diff --git a/src/driven/utils/constants/assertUrls.ts b/src/driven/utils/constants/assertUrls.ts
index cc3a18e..0e1fdfa 100644
--- a/src/driven/utils/constants/assertUrls.ts
+++ b/src/driven/utils/constants/assertUrls.ts
@@ -1,5 +1,7 @@
const baseAssetsUrl = 'assets/';
const baseIconsUrl = baseAssetsUrl + 'icons/';
export const icons = {
- logo: baseIconsUrl + 'logo.svg'
+ logo: baseIconsUrl + 'logo.svg',
+ users: baseIconsUrl + 'users.svg',
+ createUser: baseIconsUrl + 'createuser.svg'
}
\ No newline at end of file
diff --git a/src/driven/utils/constants/staticMessages.ts b/src/driven/utils/constants/staticMessages.ts
index bc8f038..94562fd 100644
--- a/src/driven/utils/constants/staticMessages.ts
+++ b/src/driven/utils/constants/staticMessages.ts
@@ -11,7 +11,8 @@ export const staticMessages = {
title: 'title',
status: 'Status',
address: 'Address',
- qrCode: 'qrCode'
+ qrCode: 'qrCode',
+ createUser: 'Create user'
},
service: {
errors: {
diff --git a/src/driving/application/core/table-row/index.tsx b/src/driving/application/core/common/table-row/index.tsx
similarity index 100%
rename from src/driving/application/core/table-row/index.tsx
rename to src/driving/application/core/common/table-row/index.tsx
diff --git a/src/driving/application/core/table-row/infra/TableRowInfra.tsx b/src/driving/application/core/common/table-row/infra/TableRowInfra.tsx
similarity index 100%
rename from src/driving/application/core/table-row/infra/TableRowInfra.tsx
rename to src/driving/application/core/common/table-row/infra/TableRowInfra.tsx
diff --git a/src/driving/application/core/table-row/infra/protocols.ts b/src/driving/application/core/common/table-row/infra/protocols.ts
similarity index 100%
rename from src/driving/application/core/table-row/infra/protocols.ts
rename to src/driving/application/core/common/table-row/infra/protocols.ts
diff --git a/src/driving/application/core/table-row/view/TableRow.tsx b/src/driving/application/core/common/table-row/view/TableRow.tsx
similarity index 79%
rename from src/driving/application/core/table-row/view/TableRow.tsx
rename to src/driving/application/core/common/table-row/view/TableRow.tsx
index f338599..b84f925 100644
--- a/src/driving/application/core/table-row/view/TableRow.tsx
+++ b/src/driving/application/core/common/table-row/view/TableRow.tsx
@@ -6,7 +6,7 @@ export default function TableRowView(props: ITableRowProps) {
const { isSelected, setSelectedRowId, rowData } = props;
const { rowId, rowItemsTitle } = rowData;
const columns = rowItemsTitle.map((rowItemTitle, index) => {
- return <RowItem hasCheckbox={index === 0} isSelected={isSelected} title={rowItemTitle} />
+ return <RowItem key={rowItemTitle} hasCheckbox={index === 0} isSelected={isSelected} title={rowItemTitle} />
})
return (
diff --git a/src/driving/application/core/table-row/view/protocols.ts b/src/driving/application/core/common/table-row/view/protocols.ts
similarity index 100%
rename from src/driving/application/core/table-row/view/protocols.ts
rename to src/driving/application/core/common/table-row/view/protocols.ts
diff --git a/src/driving/application/core/table-row/view/table-row-item/view/RowItem.tsx b/src/driving/application/core/common/table-row/view/table-row-item/view/RowItem.tsx
similarity index 100%
rename from src/driving/application/core/table-row/view/table-row-item/view/RowItem.tsx
rename to src/driving/application/core/common/table-row/view/table-row-item/view/RowItem.tsx
diff --git a/src/driving/application/core/table-row/viewmodel/protocols.ts b/src/driving/application/core/common/table-row/viewmodel/protocols.ts
similarity index 100%
rename from src/driving/application/core/table-row/viewmodel/protocols.ts
rename to src/driving/application/core/common/table-row/viewmodel/protocols.ts
diff --git a/src/driving/application/core/table-row/viewmodel/tableRowVM.ts b/src/driving/application/core/common/table-row/viewmodel/tableRowVM.ts
similarity index 100%
rename from src/driving/application/core/table-row/viewmodel/tableRowVM.ts
rename to src/driving/application/core/common/table-row/viewmodel/tableRowVM.ts
diff --git a/src/driving/application/core/places-list/view/PlacesListView.tsx b/src/driving/application/core/places-list/view/PlacesListView.tsx
index ffcbb6b..336da1d 100644
--- a/src/driving/application/core/places-list/view/PlacesListView.tsx
+++ b/src/driving/application/core/places-list/view/PlacesListView.tsx
@@ -1,6 +1,6 @@
import React from 'react'
-import RowItem from '../../table-row/view/table-row-item/view/RowItem'
-import TableRow from '../../table-row'
+import RowItem from '../../common/table-row/view/table-row-item/view/RowItem'
+import TableRow from '../../common/table-row'
import { IPlacesListProps } from './protocols'
import { staticMessages } from '~/driven/utils/constants/staticMessages';
@@ -49,7 +49,7 @@ export default function UsersListView(props: IPlacesListProps) {
],
rowId: places.id,
}
- return <TableRow rowData={rowData} selectedRowId={selectedRowId} setSelectedRowId={setSelectedRowId} />
+ return <TableRow key={rowData.rowId} rowData={rowData} selectedRowId={selectedRowId} setSelectedRowId={setSelectedRowId} />
})
}
diff --git a/src/driving/application/core/users-list/view/UsersListView.tsx b/src/driving/application/core/users-list/view/UsersListView.tsx
index d2725db..ad8bb9c 100644
--- a/src/driving/application/core/users-list/view/UsersListView.tsx
+++ b/src/driving/application/core/users-list/view/UsersListView.tsx
@@ -1,6 +1,6 @@
import React from 'react'
-import RowItem from '../../table-row/view/table-row-item/view/RowItem'
-import TableRow from '../../table-row'
+import RowItem from '../../common/table-row/view/table-row-item/view/RowItem'
+import TableRow from '../../common/table-row'
import { IUserListProps } from './protocols'
import { staticMessages } from '~/driven/utils/constants/staticMessages';
@@ -40,7 +40,7 @@ export default function UsersListView(props: IUserListProps) {
],
rowId: user.id,
}
- return <TableRow rowData={rowData} selectedRowId={selectedRowId} setSelectedRowId={setSelectedRowId} />
+ return <TableRow key={rowData.rowId} rowData={rowData} selectedRowId={selectedRowId} setSelectedRowId={setSelectedRowId} />
})
}
diff --git a/src/driving/application/support/sidebar/view/Sidebar.tsx b/src/driving/application/support/sidebar/view/Sidebar.tsx
index ad0f4b8..bba16de 100644
--- a/src/driving/application/support/sidebar/view/Sidebar.tsx
+++ b/src/driving/application/support/sidebar/view/Sidebar.tsx
@@ -1,12 +1,30 @@
import React from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { routesData } from '~/driven/utils/configs/appConfig'
import { icons } from '~/driven/utils/constants/assertUrls'
export default function Sidebar() {
+ const isCurrentPage = useLocation()
+
+ const pages = Object.keys(routesData).map(routeKey => {
+ const key = routeKey as keyof typeof routesData
+ console.log(routesData[key].title)
+ return (
+ <Link 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' : ''}`}>
+ <img src={routesData[key].icon} className='mr-2'/>
+ <div>{routesData[key].title}</div>
+ </Link>
+ )
+ })
+
return (
- <aside className='w-3/12 min-w-[10rem] [background:var(--color-gradient-primary-dark)]'>
- <div className='logo p-4'>
+ <aside className='w-[15rem] min-w-[10rem] [background:var(--color-gradient-primary-dark)] p-4 pt-6'>
+ <div className='logo'>
<img src={icons.logo} alt="logo icon" />
</div>
+ <div className='mt-14 flex flex-col items-baseline'>
+ { pages }
+ </div>
</aside>
)
}
diff --git a/src/driving/main/Router/Router.tsx b/src/driving/main/Router/Router.tsx
index 6b15b36..c2506cc 100644
--- a/src/driving/main/Router/Router.tsx
+++ b/src/driving/main/Router/Router.tsx
@@ -1,14 +1,19 @@
-import { Navigate, Outlet, Route, Routes, useLocation } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
import Home from '~/driving/main/pages';
import { routes } from '~/driven/utils/configs/appConfig';
+import CreateUser from '../pages/CreateUser';
+import MainPageLayout from '../pages/layouts/MainPageLayout';
export default function Router() {
const location = useLocation();
return (
<Routes location={location} key={location.key}>
+ <Route element={<MainPageLayout />} >
<Route index element={<Home />} />
- <Route path='*' element={<Navigate to={routes.home} replace />} />
+ <Route path={routes.createUser} element={<CreateUser />} />
+ </Route>
+ <Route path='*' element={<Navigate to={routes.usersList} replace />} />
</Routes>
);
}
diff --git a/src/driving/main/pages/CreateUser.tsx b/src/driving/main/pages/CreateUser.tsx
new file mode 100644
index 0000000..5bad26a
--- /dev/null
+++ b/src/driving/main/pages/CreateUser.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import PageTitle from '~/driven/utils/components/page-title/pageTitle'
+import { staticMessages } from '~/driven/utils/constants/staticMessages'
+
+export default function CreateUser() {
+ return (
+ <>
+ <PageTitle className='px-4 py-5' title={staticMessages.global.createUser} />
+ </>
+ )
+}
diff --git a/src/driving/main/pages/index.tsx b/src/driving/main/pages/index.tsx
index f8e0272..008ac54 100644
--- a/src/driving/main/pages/index.tsx
+++ b/src/driving/main/pages/index.tsx
@@ -8,21 +8,16 @@ import Sidebar from '~/driving/application/support/sidebar';
export default function index() {
return (
- <div className='flex flex-nowrap h-screen'>
- <Sidebar />
- <main className='dipal-panel w-full text-black bg-white h-fit'>
- <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={() => {}} />
- </div>
- <div className='md:grid-cols-2 gap-x-4 grid grid-cols-1 mx-auto'>
- <UsersList />
- <PlacesList />
- </div>
- </div>
- </main>
- </div>
-
+ <>
+ <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={() => { } } />
+ </div>
+ <div className='md:grid-cols-2 gap-x-4 grid grid-cols-1 mx-auto'>
+ <UsersList />
+ <PlacesList />
+ </div>
+ </div>
+ </>
);
}
diff --git a/src/driving/main/pages/layouts/MainPageLayout.tsx b/src/driving/main/pages/layouts/MainPageLayout.tsx
new file mode 100644
index 0000000..33fe105
--- /dev/null
+++ b/src/driving/main/pages/layouts/MainPageLayout.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Outlet } from 'react-router-dom'
+import Sidebar from '~/driving/application/support/sidebar'
+
+export default function MainPageLayout() {
+ return (
+ <div className='flex flex-nowrap h-screen'>
+ <Sidebar />
+ <main className='dipal-panel w-full text-black bg-white h-fit'>
+ <Outlet />
+ </main>
+ </div>
+ )
+}