From f8a6f9cdca570e33f6396e102f5c2e76967699ad Mon Sep 17 00:00:00 2001 From: prajwalism Date: Wed, 26 Jun 2024 17:37:28 +0545 Subject: [PATCH 1/6] feat: create form components for userprofile section --- .../FormContents/BasicDetails/index.tsx | 34 +++++++++++++++++++ .../OrganizationDetails/index.tsx | 29 ++++++++++++++++ .../FormContents/Password/index.tsx | 19 +++++++++++ .../UserProfile/FormContents/index.tsx | 5 +++ 4 files changed, 87 insertions(+) create mode 100644 src/frontend/src/components/UserProfile/FormContents/BasicDetails/index.tsx create mode 100644 src/frontend/src/components/UserProfile/FormContents/OrganizationDetails/index.tsx create mode 100644 src/frontend/src/components/UserProfile/FormContents/Password/index.tsx create mode 100644 src/frontend/src/components/UserProfile/FormContents/index.tsx diff --git a/src/frontend/src/components/UserProfile/FormContents/BasicDetails/index.tsx b/src/frontend/src/components/UserProfile/FormContents/BasicDetails/index.tsx new file mode 100644 index 00000000..c9696062 --- /dev/null +++ b/src/frontend/src/components/UserProfile/FormContents/BasicDetails/index.tsx @@ -0,0 +1,34 @@ +import { Flex, FlexColumn } from '@Components/common/Layouts'; +import { FormControl, Input, Label, Select } from '@Components/common/FormUI'; + +export default function BasicDetails() { + return ( +
+ + +

SK

+ + + + + + + + + + +
+ ); +} diff --git a/src/frontend/src/components/UserProfile/FormContents/OrganizationDetails/index.tsx b/src/frontend/src/components/UserProfile/FormContents/OrganizationDetails/index.tsx new file mode 100644 index 00000000..e8d9074b --- /dev/null +++ b/src/frontend/src/components/UserProfile/FormContents/OrganizationDetails/index.tsx @@ -0,0 +1,29 @@ +import { FormControl, Input, Label } from '@Components/common/FormUI'; +import { FlexColumn } from '@Components/common/Layouts'; + +export default function OrganizationDetails() { + return ( +
+ + + + + + + + + + + + + + +
+ ); +} diff --git a/src/frontend/src/components/UserProfile/FormContents/Password/index.tsx b/src/frontend/src/components/UserProfile/FormContents/Password/index.tsx new file mode 100644 index 00000000..4a1ca5ef --- /dev/null +++ b/src/frontend/src/components/UserProfile/FormContents/Password/index.tsx @@ -0,0 +1,19 @@ +import { FormControl, Input, Label } from '@Components/common/FormUI'; +import { FlexColumn } from '@Components/common/Layouts'; + +export default function PasswordSection() { + return ( +
+ + + + + + + + + + +
+ ); +} diff --git a/src/frontend/src/components/UserProfile/FormContents/index.tsx b/src/frontend/src/components/UserProfile/FormContents/index.tsx new file mode 100644 index 00000000..8695bbca --- /dev/null +++ b/src/frontend/src/components/UserProfile/FormContents/index.tsx @@ -0,0 +1,5 @@ +import BasicDetails from './BasicDetails'; +import OrganizationDetails from './OrganizationDetails'; +import PasswordSection from './Password'; + +export { BasicDetails, OrganizationDetails, PasswordSection }; From c7410c6843188c5820f005587b72c251884445cd Mon Sep 17 00:00:00 2001 From: prajwalism Date: Wed, 26 Jun 2024 17:37:58 +0545 Subject: [PATCH 2/6] feat: add custom component Tabs for userprofile section --- .../UserProfile/UserProfileTabs/index.tsx | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 src/frontend/src/views/UserProfile/UserProfileTabs/index.tsx diff --git a/src/frontend/src/views/UserProfile/UserProfileTabs/index.tsx b/src/frontend/src/views/UserProfile/UserProfileTabs/index.tsx new file mode 100644 index 00000000..50125b3b --- /dev/null +++ b/src/frontend/src/views/UserProfile/UserProfileTabs/index.tsx @@ -0,0 +1,51 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +import React, { useState, useEffect, act } from 'react'; + +interface ITabOptions { + id: number; + label: string; + value: number; +} + +interface TabProps { + tabOptions: ITabOptions[]; + onTabChange: (index: number) => void; + activeTab?: number; +} + +const Tab: React.FC = ({ tabOptions, onTabChange, activeTab }) => { + const [activeTabx, setActiveTab] = useState(activeTab); + + useEffect(() => { + setActiveTab(activeTab); + }, [activeTab]); + + const handleTabClick = (index: number) => { + setActiveTab(index); + onTabChange(index); + }; + + return ( +
+ {tabOptions.map(tab => ( +
handleTabClick(tab.id)} + > +

+ {tab.label} +

+
+ ))} +
+ ); +}; + +export default Tab; From 0b5b74ac474e44a1512559acbde60debbc8a0f53 Mon Sep 17 00:00:00 2001 From: prajwalism Date: Wed, 26 Jun 2024 17:38:33 +0545 Subject: [PATCH 3/6] feat: add tabOptions for userprofile section in constants --- src/frontend/src/constants/index.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/frontend/src/constants/index.ts b/src/frontend/src/constants/index.ts index d7b1dda5..5890e130 100644 --- a/src/frontend/src/constants/index.ts +++ b/src/frontend/src/constants/index.ts @@ -11,3 +11,21 @@ export const navLinks = [ linkName: 'Dashboard', }, ]; + +export const tabOptions = [ + { + id: 1, + label: 'Basic Details', + value: 1, + }, + { + id: 2, + label: 'Other Details', + value: 2, + }, + { + id: 3, + label: 'Password', + value: 3, + }, +]; From 6eabd0ee57b235f2035e1f3bbaa7f114ce9971c1 Mon Sep 17 00:00:00 2001 From: prajwalism Date: Wed, 26 Jun 2024 17:39:12 +0545 Subject: [PATCH 4/6] feat: add userprofile view --- src/frontend/src/views/UserProfile/index.tsx | 60 ++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/src/frontend/src/views/UserProfile/index.tsx b/src/frontend/src/views/UserProfile/index.tsx index 683887f3..a2d86e16 100644 --- a/src/frontend/src/views/UserProfile/index.tsx +++ b/src/frontend/src/views/UserProfile/index.tsx @@ -1,9 +1,69 @@ +import { useTypedDispatch, useTypedSelector } from '@Store/hooks'; import { UserProfileHeader } from '@Components/UserProfile'; +import { tabOptions } from '@Constants/index'; +import { setCommonState } from '@Store/actions/common'; +import { Button } from '@Components/RadixComponents/Button'; +import { + BasicDetails, + OrganizationDetails, + PasswordSection, +} from '@Components/UserProfile/FormContents'; +import Tab from './UserProfileTabs'; + +const getActiveFormContent = (activeTab: number) => { + switch (activeTab) { + case 1: + return ; + case 2: + return ; + case 3: + return ; + default: + return <>; + } +}; export default function UserProfile() { + const dispatch = useTypedDispatch(); + const userProfileActiveTab = useTypedSelector( + state => state.common.userProfileActiveTab, + ); + + const onNextBtnClick = () => { + if (userProfileActiveTab === 3) return; + dispatch( + setCommonState({ userProfileActiveTab: userProfileActiveTab + 1 }), + ); + }; + return (
+
+
+
+ { + dispatch(setCommonState({ userProfileActiveTab: info })); + }} + tabOptions={tabOptions} + activeTab={userProfileActiveTab} + /> +
+
+ {getActiveFormContent(userProfileActiveTab)} + +
+
+
); } From dd7f34afbe596139462db8a4459e28c3722ca337 Mon Sep 17 00:00:00 2001 From: prajwalism Date: Wed, 26 Jun 2024 17:39:38 +0545 Subject: [PATCH 5/6] feat: add global state for userprofile tabs section --- src/frontend/src/store/slices/common.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/frontend/src/store/slices/common.ts b/src/frontend/src/store/slices/common.ts index 79c5ece9..d77ee79e 100644 --- a/src/frontend/src/store/slices/common.ts +++ b/src/frontend/src/store/slices/common.ts @@ -12,6 +12,7 @@ export interface CommonState { showPromptDialog: boolean; promptDialogContent: PromptDialogContentsType; showMap: boolean; + userProfileActiveTab: number; } const initialState: CommonState = { @@ -20,6 +21,7 @@ const initialState: CommonState = { showPromptDialog: false, promptDialogContent: null, showMap: false, + userProfileActiveTab: 1, }; const setCommonState: CaseReducer< From 276df7a89464b85772dafb53180e344fdca2bbab Mon Sep 17 00:00:00 2001 From: prajwalism Date: Wed, 26 Jun 2024 17:41:32 +0545 Subject: [PATCH 6/6] refactor: change `select` component according to design --- .../components/common/FormUI/Select/index.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/frontend/src/components/common/FormUI/Select/index.tsx b/src/frontend/src/components/common/FormUI/Select/index.tsx index f22f5a83..fe377c4e 100644 --- a/src/frontend/src/components/common/FormUI/Select/index.tsx +++ b/src/frontend/src/components/common/FormUI/Select/index.tsx @@ -109,9 +109,9 @@ export default function Select({
@@ -121,7 +121,7 @@ export default function Select({ placeholder={getPlaceholderText()} className={`naxatw-w-full naxatw-border-none ${inputTagClassname} ${ selected ? 'placeholder:naxatw-text-grey-800' : '' - } focus:placeholder:naxatw-text-grey-400 `} + } focus:placeholder:naxatw-text-grey-400`} value={searchText} onClick={e => { setIsOpen(true); @@ -143,8 +143,8 @@ export default function Select({ {showClearIcon ? ( setSearchText('')} /> ) : ( @@ -153,7 +153,7 @@ export default function Select({ // eslint-disable-next-line no-nested-ternary !isOpen ? 'expand_more' : withSearch ? 'search' : 'expand_less' } - className="naxatw-absolute naxatw-right-1 naxatw-items-center group-hover:naxatw-text-primary-400" + className="group-hover:naxatw-text-primary-400 naxatw-absolute naxatw-right-1 naxatw-items-center" /> )}
@@ -167,8 +167,8 @@ export default function Select({ {options && filterOptions.length > 0 ? ( filterOptions.map(option => (
  • handleOptionClick(option[valueKey])} >