Merge pull request #13 from hotosm/feat/user-profile-form-slicing

User Profile Form Initial Slicing
hotosm · Jul 2, 2024 · bb8a028 · bb8a028
2 parents 1bd1716 + 276df7a
commit bb8a028
Show file tree

Hide file tree

Showing 9 changed files with 227 additions and 9 deletions.
diff --git a/src/frontend/src/components/UserProfile/FormContents/BasicDetails/index.tsx 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 (
+    <section className="naxatw-px-14 naxatw-py-10">
+      <FlexColumn gap={5}>
+        <Flex className="naxatw-h-14 naxatw-w-14 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-bg-grey-600">
+          <h4>SK</h4>
+        </Flex>
+        <FormControl>
+          <Label required>Name</Label>
+          <Input placeholder="Enter Full Name" className="naxatw-mt-1" />
+        </FormControl>
+        <FormControl>
+          <Label required>Country</Label>
+          <Select
+            options={[]}
+            placeholder="Choose Country"
+            className="naxatw-mt-1"
+          />
+        </FormControl>
+        <FormControl>
+          <Label required>City</Label>
+          <Select
+            options={[]}
+            placeholder="Choose City"
+            className="naxatw-mt-1"
+          />
+        </FormControl>
+      </FlexColumn>
+    </section>
+  );
+}
diff --git a/src/frontend/src/components/UserProfile/FormContents/OrganizationDetails/index.tsx 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 (
+    <section className="naxatw-px-14 naxatw-py-10">
+      <FlexColumn gap={5}>
+        <FormControl>
+          <Label required>Organization Name</Label>
+          <Input
+            placeholder="Enter Organization Name"
+            className="naxatw-mt-1"
+          />
+        </FormControl>
+        <FormControl>
+          <Label required>Organization Address</Label>
+          <Input
+            placeholder="Enter Organization Address"
+            className="naxatw-mt-1"
+          />
+        </FormControl>
+        <FormControl>
+          <Label required>Job Title</Label>
+          <Input placeholder="Enter Job Title" className="naxatw-mt-1" />
+        </FormControl>
+      </FlexColumn>
+    </section>
+  );
+}
diff --git a/src/frontend/src/components/UserProfile/FormContents/Password/index.tsx 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 (
+    <section className="naxatw-px-14 naxatw-py-10">
+      <FlexColumn gap={5}>
+        <FormControl>
+          <Label required>Password</Label>
+          <Input className="naxatw-mt-1" placeholder="Enter Password" />
+        </FormControl>
+        <FormControl>
+          <Label required>Confirm Password</Label>
+          <Input className="naxatw-mt-1" placeholder="Enter Password Again" />
+        </FormControl>
+      </FlexColumn>
+    </section>
+  );
+}
diff --git a/src/frontend/src/components/UserProfile/FormContents/index.tsx 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 };
diff --git 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({
     <div className="naxatw-relative">
       <div
         ref={dropdownRef}
-        className={`naxatw-group naxatw-relative naxatw-flex naxatw-h-11 naxatw-w-full
-        naxatw-cursor-pointer naxatw-items-center naxatw-justify-between naxatw-border-b-2
-        hover:naxatw-border-blue-400
+        className={`naxatw-group naxatw-relative naxatw-flex naxatw-h-9 naxatw-w-full naxatw-cursor-pointer
+        naxatw-items-center naxatw-justify-between naxatw-rounded-md naxatw-border naxatw-border-gray-800
+        hover:naxatw-border-red
         ${className}`}
         onClick={toggleDropdown}
       >
@@ -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 ? (
           <Icon
             name="clear"
-            className="naxatw-absolute naxatw-right-0 naxatw-items-center 
-              !naxatw-text-base hover:naxatw-text-primary-400"
+            className="hover:naxatw-text-primary-400 naxatw-absolute naxatw-right-0 
+              naxatw-items-center !naxatw-text-base"
             onClick={() => 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"
           />
         )}
       </div>
@@ -167,8 +167,8 @@ export default function Select({
           {options && filterOptions.length > 0 ? (
             filterOptions.map(option => (
               <li
-                className="naxatw-flex naxatw-cursor-pointer naxatw-list-none naxatw-items-start naxatw-px-4 naxatw-py-2.5
-                naxatw-text-sm naxatw-text-grey-800 hover:naxatw-bg-primary-50"
+                className="hover:naxatw-bg-primary-50 naxatw-flex naxatw-cursor-pointer naxatw-list-none naxatw-items-start naxatw-px-4
+                naxatw-py-2.5 naxatw-text-sm naxatw-text-grey-800"
                 key={option[valueKey]}
                 onClick={() => handleOptionClick(option[valueKey])}
               >

diff --git 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,
+  },
+];
diff --git 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<

diff --git a/src/frontend/src/views/UserProfile/UserProfileTabs/index.tsx 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<TabProps> = ({ tabOptions, onTabChange, activeTab }) => {
+  const [activeTabx, setActiveTab] = useState(activeTab);
+
+  useEffect(() => {
+    setActiveTab(activeTab);
+  }, [activeTab]);
+
+  const handleTabClick = (index: number) => {
+    setActiveTab(index);
+    onTabChange(index);
+  };
+
+  return (
+    <div>
+      {tabOptions.map(tab => (
+        <div
+          key={tab.id}
+          className={`naxatw-cursor-pointer hover:naxatw-bg-red hover:naxatw-bg-opacity-10 ${
+            activeTabx === tab.id
+              ? 'naxatw-bg-red naxatw-bg-opacity-10 naxatw-text-red'
+              : ''
+          }`}
+          onClick={() => handleTabClick(tab.id)}
+        >
+          <p className="naxatw-px-5 naxatw-py-3 naxatw-text-body-lg">
+            {tab.label}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Tab;
diff --git 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 <BasicDetails />;
+    case 2:
+      return <OrganizationDetails />;
+    case 3:
+      return <PasswordSection />;
+    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 (
     <section className="naxatw-h-screen-nav naxatw-bg-grey-50 naxatw-px-16 naxatw-pt-8">
       <UserProfileHeader />
+      <section className="naxatw-mt-5 naxatw-bg-grey-50 naxatw-px-80">
+        <div className="naxatw-grid naxatw-h-[35rem] naxatw-grid-cols-3 naxatw-gap-14 naxatw-bg-white naxatw-py-10">
+          <div className="naxatw-col-span-1">
+            <Tab
+              onTabChange={info => {
+                dispatch(setCommonState({ userProfileActiveTab: info }));
+              }}
+              tabOptions={tabOptions}
+              activeTab={userProfileActiveTab}
+            />
+          </div>
+          <div className="naxatw-relative naxatw-col-span-2">
+            {getActiveFormContent(userProfileActiveTab)}
+            <Button
+              className="naxatw-absolute naxatw-bottom-4 naxatw-right-4 naxatw-bg-red"
+              rightIcon={
+                userProfileActiveTab !== 3 ? 'chevron_right' : undefined
+              }
+              onClick={onNextBtnClick}
+            >
+              {userProfileActiveTab === 3 ? 'Complete Profile' : 'Next'}
+            </Button>
+          </div>
+        </div>
+      </section>
     </section>
   );
 }