Merge pull request #260 from habralab/feat/manage-project-teams

feat/manage-project-teams

common/client/entrypoints/renderer/locales/ru.json

@@ -66,6 +66,17 @@
   "profile.user_profile": "Профиль пользователя",
   "profile.watch_all": "Смотреть все",
   "profile.you_do_not_have_teams": "У вас еще нет команд",
+  "project_teams.accept_application": "Принять заявку",
+  "project_teams.filter_by_skills": "Фильтр по навыкам:",
+  "project_teams.my_teams": "Мои команды",
+  "project_teams.new_applications": "Новые заявки",
+  "project_teams.no_teams": "Нет команд",
+  "project_teams.participants": "Участников",
+  "project_teams.projects": "Проектов",
+  "project_teams.reject": "Отклонить",
+  "project_teams.show_more": "Показать еще",
+  "project_teams.teams": "Команды",
+  "project_teams.you_do_not_have_teams": "У проекта еще нет команд",
   "project.enter_tag_name_description": "Введите тег, название или описание",
   "project.find_project": "Поиск проекта",
   "project.projects_found": "Найдено проектов",
@@ -111,6 +122,7 @@
   "shared_ui.modal.edit_project": "Редактирование проекта",
   "shared_ui.modal.edit_team": "Редактирование команды",
   "shared_ui.modal.invitations": "Приглашения",
+  "shared_ui.modal.invite_to_project": "Пригласить в проект",
   "shared_ui.modal.invite_to_team": "Пригласить в команду",
   "shared_ui.modal.invite": "Пригласить",
   "shared_ui.modal.make_owner": "Сделать владельцем",

common/client/entrypoints/renderer/package.json

@@ -18,6 +18,7 @@
     "@app/profile-page": "workspace:0.0.1",
     "@app/project-page": "workspace:0.0.1",
     "@app/project-profile-page": "workspace:0.0.1",
+    "@app/project-teams-page": "workspace:0.0.1",
     "@app/team-invite-page": "workspace:0.0.1",
     "@app/team-page": "workspace:0.0.1",
     "@app/team-profile-page": "workspace:0.0.1",

common/client/entrypoints/renderer/src/pages/projects/[id]/teams/index.tsx

@@ -0,0 +1 @@
+export { default } from '@app/project-teams-page'

common/client/fragments/onboarding-fragment/src/hooks/use-submit-avatar.hook.ts

@@ -9,7 +9,7 @@ export const useSubmitAvatar = () => {
         await uploadUserAvatar({ variables: { file: blob } })
       }
     } catch (error) {
-      /** @todo error notification */
+      if (process.env.NODE_ENV !== 'production') throw error
     }
   }
 

common/client/fragments/onboarding-fragment/src/hooks/use-submit-description.hook.ts

@@ -9,7 +9,7 @@ export const useSubmitDescription = () => {
         await updateUserDescription({ variables: { description: value } })
       }
     } catch (error) {
-      /** @todo error notification */
+      if (process.env.NODE_ENV !== 'production') throw error
     }
   }
 

common/client/fragments/onboarding-fragment/src/hooks/use-submit-skills.hook.ts

@@ -9,7 +9,7 @@ export const useSubmitSkills = () => {
         await updateUserTags({ variables: { tags: value } })
       }
     } catch (error) {
-      /** @todo error notification */
+      if (process.env.NODE_ENV !== 'production') throw error
     }
   }
 

common/client/fragments/project-profile-fragment/src/button-invite/button-invite.component.tsx

@@ -0,0 +1,31 @@
+import React                    from 'react'
+import { FC }                   from 'react'
+import { FormattedMessage }     from 'react-intl'
+import { useState }             from 'react'
+
+import { ModalInviteToProject } from '@shared/modals-fragment'
+import { Button }               from '@ui/button'
+import { Text }                 from '@ui/text'
+
+import { ButtonInviteProps }    from './button-invite.interfaces'
+
+export const ButtonInvite: FC<ButtonInviteProps> = ({ project }) => {
+  const [modalOpen, setModalOpen] = useState(false)
+
+  const toggleModalOpen = () => setModalOpen(!modalOpen)
+
+  return (
+    <>
+      <Button variant='primary' size='normal' onClick={toggleModalOpen}>
+        <Text fontSize='medium' color='currentColor'>
+          <FormattedMessage id='profile.send_request' />
+        </Text>
+      </Button>
+      <ModalInviteToProject
+        modalOpen={modalOpen}
+        onClose={toggleModalOpen}
+        invitedProjectId={project?.id}
+      />
+    </>
+  )
+}

common/client/fragments/project-profile-fragment/src/button-invite/button-invite.interfaces.ts

@@ -0,0 +1,5 @@
+import { Project } from '@shared/data'
+
+export interface ButtonInviteProps {
+  project?: Project
+}

common/client/fragments/project-profile-fragment/src/button-invite/index.ts

@@ -0,0 +1,2 @@
+export * from './button-invite.component'
+export * from './button-invite.interfaces'

common/client/fragments/project-profile-fragment/src/profile-teams/profile-teams.component.tsx

@@ -17,7 +17,12 @@ import { routes }            from '@shared/routes'
 import { ButtonCreateTeam }  from './button-create-team'
 import { ProfileTeamsProps } from './profile-teams.interfaces'
 
-export const ProfileTeams: FC<ProfileTeamsProps> = ({ teams, isMyProject, ownerUser }) => (
+export const ProfileTeams: FC<ProfileTeamsProps> = ({
+  teams,
+  isMyProject,
+  ownerUser,
+  projectId,
+}) => (
   <Column fill>
     <Row justifyContent='space-between' alignItems='center'>
       <Text fontSize='regular' fontWeight='bold' color='text.secondary'>
@@ -26,11 +31,13 @@ export const ProfileTeams: FC<ProfileTeamsProps> = ({ teams, isMyProject, ownerU
       </Text>
       <Condition match={isMyProject && teams.length > 0}>
         <Box alignItems='center'>
-          <Button variant='link' size='micro'>
-            <Text fontSize='medium' color='currentColor'>
-              <FormattedMessage id='profile.manage' />
-            </Text>
-          </Button>
+          <NextLink path={routes.projectsTeams(projectId)}>
+            <Button variant='link' size='micro'>
+              <Text fontSize='medium' color='currentColor'>
+                <FormattedMessage id='profile.manage' />
+              </Text>
+            </Button>
+          </NextLink>
           <Layout width={64} />
           <ButtonCreateTeam user={ownerUser} />
         </Box>

common/client/fragments/project-profile-fragment/src/profile-teams/profile-teams.interfaces.ts

@@ -5,4 +5,5 @@ export interface ProfileTeamsProps {
   ownerUser?: User
   teams: Team[]
   isMyProject: boolean
+  projectId: string
 }

common/client/fragments/project-profile-fragment/src/project-profile.component.tsx

@@ -13,6 +13,7 @@ import { Title }              from '@ui/title'
 import { WrapperWhite }       from '@ui/wrapper'
 
 import { ButtonEditProject }  from './button-edit-project'
+import { ButtonInvite }       from './button-invite'
 import { ProfileAvatar }      from './profile-avatar'
 import { ProfileDescription } from './profile-description'
 import { ProfileTeams }       from './profile-teams'
@@ -39,10 +40,12 @@ export const ProjectProfile: FC = () => {
             <ProfileAvatar project={project} ownerUser={ownerUser} />
             <Layout flexBasis={32} />
             <ProfileDescription project={project} />
-            <Box position='absolute' bottom={32} right={32}>
+            <Box position='absolute' bottom={32} right={32} alignItems='center'>
               <Condition match={isMyProject}>
                 <ButtonEditProject project={project} onEditProject={handleEditProject} />
+                <Layout width={64} />
               </Condition>
+              <ButtonInvite project={project} />
             </Box>
           </Condition>
           <Condition match={!project}>
@@ -59,9 +62,12 @@ export const ProjectProfile: FC = () => {
       <Condition match={Boolean(project)}>
         <Layout flexBasis={32} flexShrink={0} />
         <WrapperWhite>
-          <Column>
-            <ProfileTeams ownerUser={ownerUser} teams={projectTeams} isMyProject={isMyProject} />
-          </Column>
+          <ProfileTeams
+            ownerUser={ownerUser}
+            teams={projectTeams}
+            isMyProject={isMyProject}
+            projectId={project?.id || ''}
+          />
         </WrapperWhite>
       </Condition>
     </Column>

common/client/fragments/project-teams-fragment/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@app/project-teams-fragment",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "dependencies": {
+    "@shared/data": "workspace:0.0.1",
+    "@shared/routes": "workspace:0.0.1",
+    "@shared/utils": "workspace:0.0.1",
+    "@ui/avatar": "workspace:0.0.1",
+    "@ui/button": "workspace:0.0.1",
+    "@ui/card": "workspace:0.0.1",
+    "@ui/condition": "workspace:0.0.1",
+    "@ui/layout": "workspace:0.0.1",
+    "@ui/tag": "workspace:0.0.1",
+    "@ui/text": "workspace:0.0.1",
+    "@ui/title": "workspace:0.0.1",
+    "@ui/wrapper": "workspace:0.0.1"
+  },
+  "devDependencies": {
+    "@apollo/client": "3.8.7",
+    "@stores/session": "workspace:0.0.1",
+    "@types/react": "18.2.28",
+    "@types/react-dom": "18.2.15",
+    "next": "12.3.4",
+    "react-intl": "6.0.8"
+  },
+  "peerDependencies": {
+    "@emotion/css": "*",
+    "@emotion/react": "*",
+    "@emotion/styled": "*",
+    "@stores/session": "workspace:*",
+    "framer-motion": "*",
+    "graphql": "*",
+    "next": "*",
+    "react": "*",
+    "react-dom": "*",
+    "react-intl": "*",
+    "styled-system": "*",
+    "styled-tools": "*"
+  }
+}

common/client/fragments/project-teams-fragment/src/data/decide-project-team-join-request/decide-project-team-join-request.mutation.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client'
+
+export const DECIDE_PROJECT_TEAM_JOIN_REQUEST = gql`
+  mutation ProjectTeamJoinRequestDecide($id: String!, $approve: Boolean!) {
+    projectTeamJoinRequestDecide(input: { projectTeamJoinRequestId: $id, isApproved: $approve }) {
+      id
+      teamId
+      teamName
+      projectId
+    }
+  }
+`

common/client/fragments/project-teams-fragment/src/data/decide-project-team-join-request/index.ts

@@ -0,0 +1 @@
+export * from './use-decide-project-team-join-request.hook'

common/client/fragments/project-teams-fragment/src/data/decide-project-team-join-request/use-decide-project-team-join-request.hook.ts

@@ -0,0 +1,26 @@
+import { useMutation }                      from '@apollo/client'
+
+import { JoinRequest }                      from '@shared/data'
+
+import { DECIDE_PROJECT_TEAM_JOIN_REQUEST } from './decide-project-team-join-request.mutation'
+
+export interface DecideProjectTeamJoinRequestResponse {
+  id?: string
+  teamId?: string
+  teamName?: string
+  projectId?: string
+}
+
+export interface DecideProjectTeamJoinRequestInput {
+  id: JoinRequest['id']
+  approve: boolean
+}
+
+export const useDecideProjectTeamJoinRequest = () => {
+  const [decideProjectTeamJoinRequest, { data, loading }] = useMutation<
+    DecideProjectTeamJoinRequestResponse,
+    DecideProjectTeamJoinRequestInput
+  >(DECIDE_PROJECT_TEAM_JOIN_REQUEST)
+
+  return { decideProjectTeamJoinRequest, data, loading }
+}

common/client/fragments/project-teams-fragment/src/data/get-join-requests/get-join-requests.query.ts

@@ -0,0 +1,18 @@
+import { gql } from '@apollo/client'
+
+export const GET_JOIN_REQUESTS = gql`
+  query ProjectTeamJoinRequestsByProjectId($id: String!) {
+    projectTeamJoinRequestsByProjectId(input: { projectId: $id }) {
+      projectTeamJoinRequest {
+        id
+        projectId
+        teamId
+        teamName
+        teamDescription
+        teamAvatarUrl
+        projectCount
+        teamUserParticipants
+      }
+    }
+  }
+`

common/client/fragments/project-teams-fragment/src/data/get-join-requests/index.ts

@@ -0,0 +1 @@
+export * from './use-get-join-requests.hook'

common/client/fragments/project-teams-fragment/src/data/get-join-requests/use-get-join-requests.hook.ts

@@ -0,0 +1,36 @@
+import { useQuery }          from '@apollo/client'
+
+import { Project }           from '@shared/data'
+
+import { GET_JOIN_REQUESTS } from './get-join-requests.query'
+
+export interface JoinRequest {
+  id?: string
+  projectId?: string
+  teamId?: string
+  teamName?: string
+  teamDescription?: string
+  teamAvatarUrl?: string
+  projectCount?: number
+  teamUserParticipants?: number
+}
+
+export interface GetJoinRequestsResponse {
+  projectTeamJoinRequest: JoinRequest[]
+}
+
+export interface GetJoinRequestsInput {
+  id: Project['id']
+}
+
+export const useGetJoinRequests = (props: GetJoinRequestsInput) => {
+  const { data, refetch } = useQuery<GetJoinRequestsResponse, GetJoinRequestsInput>(
+    GET_JOIN_REQUESTS,
+    { variables: props }
+  )
+
+  return {
+    joinRequests: data?.projectTeamJoinRequest || [],
+    refetch,
+  }
+}

common/client/fragments/project-teams-fragment/src/data/get-project/get-project.query.ts

@@ -0,0 +1,19 @@
+import { gql } from '@apollo/client'
+
+export const GET_PROJECT = gql`
+  query ProjectGet($id: String!) {
+    projectGet(projectId: $id) {
+      id
+      projectName
+      description
+      avatarUrl
+      tags
+      ownerUserId
+    }
+    projectTeamParticipantsFilter(input: { projectId: $id }) {
+      projectTeamParticipant {
+        id
+      }
+    }
+  }
+`

common/client/fragments/project-teams-fragment/src/data/get-project/index.ts

@@ -0,0 +1 @@
+export * from './use-get-project.hook'

common/client/fragments/project-teams-fragment/src/data/get-project/use-get-project.hook.ts

@@ -0,0 +1,29 @@
+import { useQuery }    from '@apollo/client'
+
+import { Team }        from '@shared/data'
+import { Project }     from '@shared/data'
+
+import { GET_PROJECT } from './get-project.query'
+
+export interface GetProjectResponse {
+  projectGet: Project
+  projectTeamParticipantsFilter: {
+    projectTeamParticipant: Team[]
+  }
+}
+
+export interface GetProjectInput {
+  id: Project['id']
+}
+
+export const useGetProject = (props: GetProjectInput) => {
+  const { data, refetch } = useQuery<GetProjectResponse, GetProjectInput>(GET_PROJECT, {
+    variables: props,
+  })
+
+  return {
+    project: data?.projectGet,
+    projectTeams: data?.projectTeamParticipantsFilter.projectTeamParticipant || [],
+    refetch,
+  }
+}

common/client/fragments/project-teams-fragment/src/data/index.ts

@@ -0,0 +1,3 @@
+export * from './decide-project-team-join-request'
+export * from './get-join-requests'
+export * from './get-project'

common/client/fragments/project-teams-fragment/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-project-state.hook'