Feat(app/web): Team Settings | Edit User Role (#3153)

* feat(web): Add Edit User Role Component

* fix(web)[user-role]: deepscan & cspell errors

* fix(web)[user-role]: deepscan & cspell errors

* [feat](app/web): update Organization Team Member

* feat: make and unmake Manager

* fix: Apply code refactoring

apps/web/app/interfaces/IUserData.ts

@@ -98,6 +98,17 @@ export interface ILanguageItemList {
 	data: any;
 }
 
+export interface IRoleList {
+	id: string;
+	createdAt: string;
+	updatedAt: string;
+	tenantId: string;
+	name: string;
+	isSystem: boolean;
+	items: [];
+	data: any;
+}
+
 //export timezone list interface
 export interface ITimezoneItemList {
 	length: number | undefined;

apps/web/lib/features/roles/role-item.tsx

@@ -0,0 +1,48 @@
+import { IRoleList } from '@app/interfaces';
+import { clsxm } from '@app/utils';
+import { DropdownItem } from 'lib/components';
+import React, { HTMLAttributes } from 'react';
+
+export type RoleItem = DropdownItem<IRoleList>;
+
+export function mapRoleItems(roles: IRoleList[]) {
+	// eslint-disable-next-line react/display-name
+	const RoleLabel = React.memo(({ selected, name }: { selected: boolean | undefined; name: string }) => (
+		<div className="flex justify-between">
+			<RoleItem title={name} className={selected ? 'font-medium' : ''} />
+		</div>
+	));
+	const items = roles.map<RoleItem>((role: IRoleList) => {
+		const name = role.name || 'Unnamed Role';
+		return {
+			key: role.id,
+			Label: ({ selected }) => <RoleLabel selected={selected} name={name} />,
+			selectedLabel: <RoleItem title={name} className="py-2 mb-0" />,
+			data: role
+		};
+	});
+
+	return items;
+}
+
+export function RoleItem({
+	title,
+	className
+}: {
+	title?: string;
+	count?: number;
+	className?: HTMLAttributes<HTMLDivElement>['className'];
+	color?: string;
+	disabled?: boolean;
+}) {
+	return (
+		<div
+			role="menuitem"
+			aria-label={title}
+			className={clsxm('flex items-center justify-start space-x-2 text-sm cursor-pointer mb-4', className)}>
+			<span className={clsxm('text-normal dark:text-white')} title={title}>
+				{title}
+			</span>
+		</div>
+	);
+}

apps/web/lib/settings/edit-role-dropdown.tsx

@@ -0,0 +1,45 @@
+import { Dropdown } from 'lib/components';
+import { clsxm } from '@app/utils';
+import {useRoles} from "@app/hooks/features/useRoles";
+import { IRole, IRoleList, OT_Member } from "@app/interfaces";
+import {useCallback, useEffect, useMemo, useState} from "react";
+import {mapRoleItems, RoleItem} from "../features/roles/role-item";
+
+
+export const EditUserRoleDropdown = ({ member, handleRoleChange }: { member: OT_Member,handleRoleChange : (newRole: IRole) => void}) => {
+	const {roles} =  useRoles()
+
+	const items = useMemo(() => mapRoleItems(roles.filter(role => ['MANAGER', 'EMPLOYEE'].includes(role.name)) as IRoleList[]), [roles]);
+
+	const [roleItem, setRoleItem] = useState<RoleItem | null>(null);
+
+	useEffect(() => {
+		setRoleItem(items.find(t => t.key === member?.roleId) || null);
+	}, [items, member?.roleId]);
+
+	const onChange = useCallback(
+		(item: RoleItem) => {
+			if (item.data) {
+				setRoleItem(item);
+			}
+			if (item.data?.id && item.data.data) {
+				handleRoleChange(item.data?.data)
+			}
+		},
+		[handleRoleChange]
+	);
+
+	return (
+		<>
+			<Dropdown
+				className="min-w-fit max-w-sm bg-[#FFFFFF] dark:bg-dark--theme-light w-1"
+				buttonClassName={clsxm(
+					'py-0 font-medium h-12 w-[12rem] text-[#282048] dark:text-white'
+				)}
+				value={roleItem}
+				onChange={onChange}
+				items={items}
+			></Dropdown>
+		</>
+	);
+};