Merge pull request #290 from Worklenz/imp/invite--improvement

Imp/invite  improvement

worklenz-frontend/src/components/AssigneeSelector.tsx

@@ -13,6 +13,8 @@ import { sortTeamMembers } from '@/utils/sort-team-members';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { setIsFromAssigner, toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';
 import { updateEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';
+import useIsProjectManager from '@/hooks/useIsProjectManager';
+import { useAuthStatus } from '@/hooks/useAuthStatus';
 
 interface AssigneeSelectorProps {
   task: IProjectTask;
@@ -42,6 +44,8 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   const currentSession = useAuthService().getCurrentSession();
   const { socket } = useSocket();
   const dispatch = useAppDispatch();
+  const { isAdmin } = useAuthStatus();
+  const isProjectManager = useIsProjectManager();
 
   const filteredMembers = useMemo(() => {
     return teamMembers?.data?.filter(member =>
@@ -64,7 +68,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) &&
-          buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
+        buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
         setIsOpen(false);
       }
     };
@@ -75,8 +79,8 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
         if (buttonRef.current) {
           const rect = buttonRef.current.getBoundingClientRect();
           const isVisible = rect.top >= 0 && rect.left >= 0 &&
-                           rect.bottom <= window.innerHeight && 
-                           rect.right <= window.innerWidth;
+            rect.bottom <= window.innerHeight &&
+            rect.right <= window.innerWidth;
 
           if (isVisible) {
             updateDropdownPosition();
@@ -302,12 +306,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                       />
                     </span>
                     {pendingChanges.has(member.id || '') && (
-                      <div className={`absolute inset-0 flex items-center justify-center ${
-                        isDarkMode ? 'bg-gray-800/50' : 'bg-white/50'
-                      }`}>
-                        <div className={`w-3 h-3 border border-t-transparent rounded-full animate-spin ${
-                          isDarkMode ? 'border-blue-400' : 'border-blue-600'
-                        }`} />
+                      <div className={`absolute inset-0 flex items-center justify-center ${isDarkMode ? 'bg-gray-800/50' : 'bg-white/50'
+                        }`}>
+                        <div className={`w-3 h-3 border border-t-transparent rounded-full animate-spin ${isDarkMode ? 'border-blue-400' : 'border-blue-600'
+                          }`} />
                       </div>
                     )}
                   </div>
@@ -340,22 +342,26 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
           </div>
 
           {/* Footer */}
-          <div className={`p-2 border-t ${isDarkMode ? 'border-gray-600' : 'border-gray-200'}`}>
-            <button
-              className={`
-                w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
-                transition-colors
-                ${isDarkMode
-                  ? 'text-blue-400 hover:bg-gray-700'
-                  : 'text-blue-600 hover:bg-blue-50'
-                }
-              `}
-              onClick={handleInviteProjectMemberDrawer}
-            >
-              <UserAddOutlined />
-              Invite member
-            </button>
-          </div>
+
+          {(isAdmin || isProjectManager) && (
+            <div className={`p-2 border-t ${isDarkMode ? 'border-gray-600' : 'border-gray-200'}`}>
+              <button
+                className={`
+                  w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
+                  transition-colors
+                  ${isDarkMode
+                    ? 'text-blue-400 hover:bg-gray-700'
+                    : 'text-blue-600 hover:bg-blue-50'
+                  }
+                `}
+                onClick={handleInviteProjectMemberDrawer}
+              >
+                <UserAddOutlined />
+                Invite member
+              </button>
+            </div>
+          )}
+
         </div>,
         document.body
       )}

worklenz-frontend/src/components/projects/project-member-invite-drawer/project-member-invite-drawer.tsx

@@ -33,6 +33,12 @@ const ProjectMemberDrawer = () => {
   const [members, setMembers] = useState<ITeamMembersViewModel>({ data: [], total: 0 });
   const [teamMembersLoading, setTeamMembersLoading] = useState(false);
 
+  // Filter out members already in the project
+  const currentProjectMemberIds = (currentMembersList || []).map(m => m.team_member_id).filter(Boolean);
+  const availableMembers = (members?.data || []).filter(
+    member => member.id && !currentProjectMemberIds.includes(member.id)
+  );
+
   const fetchProjectMembers = async () => {
     if (!projectId) return;
     dispatch(getAllProjectMembers(projectId));
@@ -226,7 +232,7 @@ const ProjectMemberDrawer = () => {
               onSearch={handleSearch}
               onChange={handleSelectChange}
               onKeyDown={handleKeyDown}
-              options={members?.data?.map(member => ({
+              options={availableMembers.map(member => ({
                 key: member.id,
                 value: member.id,
                 name: member.name,

worklenz-frontend/src/components/settings/update-member-drawer.tsx

@@ -94,7 +94,7 @@ const UpdateMemberDrawer = ({ selectedMemberId, onRoleUpdate }: UpdateMemberDraw
 
     try {
       const body: ITeamMemberCreateRequest = {
-        job_title: selectedJobTitle,
+        job_title: form.getFieldValue('jobTitle'),
         emails: [teamMember.email],
         is_admin: values.access === 'admin',
       };