From b836ef48b0e6d6d855ff4c1293d351af05fb5a2e Mon Sep 17 00:00:00 2001 From: dbdbd9 Date: Wed, 25 Sep 2024 07:48:13 +0700 Subject: [PATCH] update ui techincal profile and split techincal tab to component in setting --- .../OrganizationSettings.tsx | 154 +++--- FRONTEND/src/pages/Profile/Profile.tsx | 489 +++++++++--------- 2 files changed, 337 insertions(+), 306 deletions(-) diff --git a/FRONTEND/src/pages/OrganizationSettings/OrganizationSettings.tsx b/FRONTEND/src/pages/OrganizationSettings/OrganizationSettings.tsx index f5eaa57..718f301 100644 --- a/FRONTEND/src/pages/OrganizationSettings/OrganizationSettings.tsx +++ b/FRONTEND/src/pages/OrganizationSettings/OrganizationSettings.tsx @@ -21,6 +21,43 @@ import { useForm } from '@mantine/form' import { Xdelete } from '@/rtk/helpers/CRUD' import moment from 'moment' +function OrganizationSettings() { + const [activeTab, setActiveTab] = useState('technical') + + return ( +
+
+

+ Admin/ + Organization Settings +

+
+ + + + + Technical Setting + Setting 2 + Setting 3 + + + + + + + + Setting 2 + + + + Setting 3 + + + +
+ ) +} + interface DataTechnical { id: number name: string @@ -29,15 +66,13 @@ interface DataTechnical { updated_at: string } -function OrganizationSettings() { - const [activeTab, setActiveTab] = useState('technical') +const TechnicalSettingTab = () => { + const [dataTechnical, setDataTechnical] = useState([]) const [isLoading, setIsLoading] = useState(false) const [addTechnicalOpen, setAddTechnicalOpen] = useState(false) const [deleteTechnicalOpen, setDeleteTechnicalOpen] = useState(false) const [selectedId, setSelectedId] = useState(0) - const [dataTechnical, setDataTechnical] = useState([]) - const form = useForm({ initialValues: { name: '', @@ -169,77 +204,48 @@ function OrganizationSettings() { } return ( -
-
-

- Admin/ - Staff Evaluation -

-
+ <> + + Note: - - - - Technical setting - Setting 2 - Setting 3 - + + + Level 1: 3-12 Month + + + Level 2: 3-5 Year + + + Level 3: 5 -8 Year + + + - - - Note: - - - - Level 1: 3-12 Month - - - Level 2: 3-5 Year - - - Level 3: 5 -8 Year - - - - - - {isLoading ? ( - - - - Loading Technical... - - - ) : ( - setAddTechnicalOpen(true)}> - + Add - - } - /> - )} - - - - - Setting 2 - - - - Setting 3 - - + + {isLoading ? ( + + + + Loading Technical... + + + ) : ( + setAddTechnicalOpen(true)}>+ Add + } + /> + )} -
+ ) } diff --git a/FRONTEND/src/pages/Profile/Profile.tsx b/FRONTEND/src/pages/Profile/Profile.tsx index 75ecf52..92a78b8 100644 --- a/FRONTEND/src/pages/Profile/Profile.tsx +++ b/FRONTEND/src/pages/Profile/Profile.tsx @@ -27,6 +27,7 @@ import { } from '@mantine/core' import { notifications } from '@mantine/notifications' import { + IconExchange, IconPasswordUser, IconUserCode, IconUserCog, @@ -39,19 +40,6 @@ import moment from 'moment' const isCompactMenu = false -interface DataTechnical { - id: number - name: string - level: number - point: number - updated_at: string -} - -interface UpdateDataTechnical { - technical_id: number | string - point: number | string -} - const Profile = () => { const user = useAppSelector((state) => state.authentication.user) const userData = getUser() @@ -70,14 +58,6 @@ const Profile = () => { const [dataProfile, setDataProfile] = useState([]) const [countSpam, setCountSpam] = useState(0) - const [dataTechnical, setDataTechnical] = useState([]) - const [loadingTechnical, setLoadingTechnical] = useState(false) - const [isUpdateTechnical, setIsUpdateTechnical] = useState(false) - - const [updatedDataTechnical, setUpdatedDataTechnical] = useState< - UpdateDataTechnical[] - >([]) - const [selectedAvatar, setSelectedAvatar] = useState(null) const navigate = useNavigate() const dispatch = useAppDispatch() @@ -221,144 +201,6 @@ const Profile = () => { dispatch(logout(navigate)) }, [dispatch, navigate]) - useEffect(() => { - const fetchData = async () => { - await getListUserTechnical() - } - fetchData() - }, []) - - const columns = [ - { - name: 'level', - size: '5%', - header: 'Level', - render: (row: any) => { - return ( - - {row?.level ? row.level : ''} - - ) - }, - }, - { - name: 'name', - size: '50%', - header: 'Name', - render: (row: any) => { - return {row?.name} - }, - }, - { - name: 'point', - size: '5%', - header: 'Point', - render: (row: any) => { - return ( - - technicalItem.technical_id === row?.id, - )?.point - } - onChange={(e) => { - setUpdatedDataTechnical((prev: any) => - prev.map((technicalItem: UpdateDataTechnical) => { - if (technicalItem.technical_id === row.id) { - return { - ...technicalItem, - point: e.target.value, - } - } - - return technicalItem - }), - ) - setIsUpdateTechnical(true) - }} - /> - ) - }, - }, - { - name: 'updated_at', - size: '40%', - header: 'Last update', - render: (row: any) => { - if (row?.updated_at) { - return ( - - {moment(row?.updated_at).format('HH:mm:ss DD/MM/YYYY')} - - ) - } - }, - }, - ] - - const getListUserTechnical = async () => { - try { - setLoadingTechnical(true) - const params = {} - const res = await get(listUserTechnical, params) - if (res.status) { - setDataTechnical(res.data) - setUpdatedDataTechnical( - res.data?.map((technicalItem: DataTechnical) => { - return { - technical_id: technicalItem.id, - point: technicalItem.point, - } - }), - ) - } - } catch (error: any) { - notifications.show({ - title: 'Error', - message: error.message ?? error, - color: 'red', - }) - } finally { - setLoadingTechnical(false) - } - - return [] - } - - const handleUpdateTechnical = async () => { - try { - const res = await post(updateUserTechnical, { - technicals: updatedDataTechnical, - }) - if (res.status === true) { - await getListUserTechnical() - - notifications.show({ - title: 'Success', - message: res.message, - color: 'green', - }) - } - } catch (error) { - console.log(error) - } - } - return (
@@ -491,79 +333,7 @@ const Profile = () => { {swapTap ? ( - - - - Level: - - - - 1: 3-12 Month - - - 2: 3-5 Year - - - 3: 5 -8 Year - - - - - - Point: - - - - 0: Unknown - - - 1: Basic - - - 2: Advanced - - - 3: Master - - - - - - -
- Technicals - - - - - {loadingTechnical ? ( - - - - Loading Technical... - - - ) : ( - - )} - + ) : ( Project Involved @@ -672,4 +442,259 @@ const Profile = () => { ) } +// User Technical +interface DataTechnical { + id: number + name: string + level: number + point: number + updated_at: string +} + +interface UpdateDataTechnical { + technical_id: number | string + point: number | string +} + +const UserTechnical = () => { + const [dataTechnical, setDataTechnical] = useState([]) + const [loadingTechnical, setLoadingTechnical] = useState(false) + const [isUpdateTechnical, setIsUpdateTechnical] = useState< + string[] | number[] + >([]) + const [updatedDataTechnical, setUpdatedDataTechnical] = useState< + UpdateDataTechnical[] + >([]) + + useEffect(() => { + const fetchData = async () => { + await getListUserTechnical() + } + fetchData() + }, []) + + const columns = [ + { + name: 'level', + size: '5%', + header: 'Level', + render: (row: any) => { + return ( + + {row?.level ? row.level : ''} + + ) + }, + }, + { + name: 'name', + size: '45%', + header: 'Name', + render: (row: any) => { + return {row?.name} + }, + }, + { + name: 'point', + size: '10%', + header: 'Point', + render: (row: any) => { + return ( + + technicalItem.technical_id === row?.id, + )?.point + } + rightSection={ + isUpdateTechnical.some( + (item: string | number) => item === row.id, + ) ? ( + + ) : ( + '' + ) + } + onChange={(e) => { + const value = e.target.value + + // Ensure the input is between 0 and 3 + if (value === '' || (Number(value) >= 0 && Number(value) <= 3)) { + setUpdatedDataTechnical((prev: any) => + prev.map((technicalItem: UpdateDataTechnical) => { + if (technicalItem.technical_id === row.id) { + return { + ...technicalItem, + point: value, + } + } + return technicalItem + }), + ) + setIsUpdateTechnical((prev) => [...prev, row?.id]) + } + }} + onFocus={(e) => e.target.select()} + /> + ) + }, + }, + { + name: 'updated_at', + size: '40%', + header: 'Last update', + render: (row: any) => { + if (row?.updated_at) { + return ( + + {moment(row?.updated_at).format('HH:mm:ss DD/MM/YYYY')} + + ) + } + }, + }, + ] + + const getListUserTechnical = async () => { + try { + setLoadingTechnical(true) + const params = {} + const res = await get(listUserTechnical, params) + if (res.status) { + setDataTechnical(res.data) + setUpdatedDataTechnical( + res.data?.map((technicalItem: DataTechnical) => { + return { + technical_id: technicalItem.id, + point: technicalItem.point, + } + }), + ) + } + } catch (error: any) { + notifications.show({ + title: 'Error', + message: error.message ?? error, + color: 'red', + }) + } finally { + setLoadingTechnical(false) + } + + return [] + } + + const handleUpdateUserTechnical = async () => { + try { + const res = await post(updateUserTechnical, { + technicals: updatedDataTechnical, + }) + if (res.status === true) { + await getListUserTechnical() + + notifications.show({ + title: 'Success', + message: res.message, + color: 'green', + }) + } + } catch (error) { + console.log(error) + } + } + + return ( + + + {/* Level */} + + Level: + + + + 1: 3-12 Month + + + 2: 3-5 Year + + + 3: 5 -8 Year + + + + + {/* Point */} + + Point: + + + + 0: Unknown + + + 1: Basic + + + 2: Advanced + + + 3: Master + + + + + + +
+ Technicals + + + + + {loadingTechnical ? ( + + + + Loading Technical... + + + ) : ( + + )} + + ) +} + export default Profile -- 2.39.2