From 8ec36e54546c70213a7580cb6d1821d5f10a3833 Mon Sep 17 00:00:00 2001
From: behnamrhp <behnamrahimpour74@gmail.com>
Date: Fri, 19 May 2023 14:17:08 +0300
Subject: [PATCH] [FEAT]: add create user UI
---
.../boundaries/http-boundary/httpBoundary.ts | 2 +-
.../inputs/simple-input/SimpleInput.tsx | 16 ++++++++++++++++
src/driven/utils/constants/staticMessages.ts | 3 ++-
.../utils/protocols/serviceProtocols.ts | 8 ++++++++
.../application/core/create-user/index.tsx | 3 +++
.../core/create-user/infra/CreateUser.tsx | 6 ++++++
.../core/create-user/view/CreateUserView.tsx | 19 +++++++++++++++++++
.../support/sidebar/view/Sidebar.tsx | 1 -
src/driving/main/pages/CreateUser.tsx | 4 +++-
src/driving/main/style/App.css | 1 +
tailwind.config.cjs | 5 ++++-
11 files changed, 63 insertions(+), 5 deletions(-)
create mode 100644 src/driven/utils/components/inputs/simple-input/SimpleInput.tsx
create mode 100644 src/driving/application/core/create-user/index.tsx
create mode 100644 src/driving/application/core/create-user/infra/CreateUser.tsx
create mode 100644 src/driving/application/core/create-user/view/CreateUserView.tsx
diff --git a/src/driven/boundaries/http-boundary/httpBoundary.ts b/src/driven/boundaries/http-boundary/httpBoundary.ts
index b14b43e..f5f5ef5 100644
--- a/src/driven/boundaries/http-boundary/httpBoundary.ts
+++ b/src/driven/boundaries/http-boundary/httpBoundary.ts
@@ -1,5 +1,5 @@
import axios, { AxiosRequestConfig } from 'axios';
-import { staticMessages } from '~/driven/utils/configs/staticMessages';
+import { staticMessages } from '~/driven/utils/constants/staticMessages';
export class HTTPBoundary {
async request<R>(options: AxiosRequestConfig) {
diff --git a/src/driven/utils/components/inputs/simple-input/SimpleInput.tsx b/src/driven/utils/components/inputs/simple-input/SimpleInput.tsx
new file mode 100644
index 0000000..4fd7158
--- /dev/null
+++ b/src/driven/utils/components/inputs/simple-input/SimpleInput.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface ISimpleInput {
+ title: string;
+ className?: string;
+}
+
+export default function SimpleInput(props: ISimpleInput) {
+ const { title, className } = props;
+ return (
+ <div className={`flex flex-col ${className}`}>
+ <label className='mb-1 text-txt-second text-xs' htmlFor={title}>{ title }</label>
+ <input className='bg-bg-gray h-11 rounded-lg focus:outline-0 px-2 text-txt-medium' id={title} />
+ </div>
+ )
+}
diff --git a/src/driven/utils/constants/staticMessages.ts b/src/driven/utils/constants/staticMessages.ts
index 94562fd..4641f23 100644
--- a/src/driven/utils/constants/staticMessages.ts
+++ b/src/driven/utils/constants/staticMessages.ts
@@ -12,7 +12,8 @@ export const staticMessages = {
status: 'Status',
address: 'Address',
qrCode: 'qrCode',
- createUser: 'Create user'
+ createUser: 'Create user',
+ phoneNumber: 'Phone Number'
},
service: {
errors: {
diff --git a/src/driven/utils/protocols/serviceProtocols.ts b/src/driven/utils/protocols/serviceProtocols.ts
index 25ab9c6..3e7fd0b 100644
--- a/src/driven/utils/protocols/serviceProtocols.ts
+++ b/src/driven/utils/protocols/serviceProtocols.ts
@@ -1 +1,9 @@
export type RequestMethods = 'get' | 'post' | 'put' | 'delete';
+
+export type apiGlobalResponseObject<DataType> = {
+ type: 'Success' | 'client Error' | string;
+ status: 200 | 400 | 401 | 500 | number;
+ message: string;
+ description: string;
+ data: DataType;
+}
\ No newline at end of file
diff --git a/src/driving/application/core/create-user/index.tsx b/src/driving/application/core/create-user/index.tsx
new file mode 100644
index 0000000..1f35bc6
--- /dev/null
+++ b/src/driving/application/core/create-user/index.tsx
@@ -0,0 +1,3 @@
+import CreateUser from "./infra/CreateUser";
+
+export default CreateUser;
\ No newline at end of file
diff --git a/src/driving/application/core/create-user/infra/CreateUser.tsx b/src/driving/application/core/create-user/infra/CreateUser.tsx
new file mode 100644
index 0000000..efb07df
--- /dev/null
+++ b/src/driving/application/core/create-user/infra/CreateUser.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import CreateUserView from '../view/CreateUserView'
+
+export default function CreateUser() {
+ return <CreateUserView />
+}
diff --git a/src/driving/application/core/create-user/view/CreateUserView.tsx b/src/driving/application/core/create-user/view/CreateUserView.tsx
new file mode 100644
index 0000000..c80ba27
--- /dev/null
+++ b/src/driving/application/core/create-user/view/CreateUserView.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import PrimaryButton from '~/driven/utils/components/buttons/primary-button/PrimaryButton'
+import SimpleInput from '~/driven/utils/components/inputs/simple-input/SimpleInput'
+import { staticMessages } from '~/driven/utils/constants/staticMessages'
+
+export default function CreateUserView() {
+ return (
+ <div className='px-4 my-8'>
+ <div className='flex flex-wrap w-full gap-4'>
+ <SimpleInput title={staticMessages.global.fistname} className='mb-4 w-[48%]' />
+ <SimpleInput title={staticMessages.global.lastname} className='mb-4 w-[48%]'/>
+ <SimpleInput title={staticMessages.global.phoneNumber} className='mb-4 w-[48%]'/>
+ </div>
+ <div className='flex'>
+ <PrimaryButton onClick={() => {}} title={staticMessages.global.submit} />
+ </div>
+ </div>
+ )
+}
diff --git a/src/driving/application/support/sidebar/view/Sidebar.tsx b/src/driving/application/support/sidebar/view/Sidebar.tsx
index bba16de..0af298d 100644
--- a/src/driving/application/support/sidebar/view/Sidebar.tsx
+++ b/src/driving/application/support/sidebar/view/Sidebar.tsx
@@ -8,7 +8,6 @@ export default function Sidebar() {
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'/>
diff --git a/src/driving/main/pages/CreateUser.tsx b/src/driving/main/pages/CreateUser.tsx
index 5bad26a..62fcc0a 100644
--- a/src/driving/main/pages/CreateUser.tsx
+++ b/src/driving/main/pages/CreateUser.tsx
@@ -1,11 +1,13 @@
import React from 'react'
import PageTitle from '~/driven/utils/components/page-title/pageTitle'
import { staticMessages } from '~/driven/utils/constants/staticMessages'
+import CreateUser from '~/driving/application/core/create-user'
-export default function CreateUser() {
+export default function CreateUserPage() {
return (
<>
<PageTitle className='px-4 py-5' title={staticMessages.global.createUser} />
+ <CreateUser />
</>
)
}
diff --git a/src/driving/main/style/App.css b/src/driving/main/style/App.css
index f088622..3e72895 100644
--- a/src/driving/main/style/App.css
+++ b/src/driving/main/style/App.css
@@ -19,6 +19,7 @@ html,body {
--color-primary-100: #C7E4F4;
--color-primary-300: #0461B8;
--color-primary-200: #80C8EF;
+ --color-separated-border: #D4D4D4;
}
th,
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 3a93ff3..a979fbd 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -27,7 +27,10 @@ module.exports = {
},
gradient: {
primary: 'var(--color-gradient-primary-dark)',
- }
+ },
+ separated: {
+ border: 'var(--color-separated-border)'
+ },
}
},
},