From 22acfddcccf2ef204f4b574fa9d2246038583cf2 Mon Sep 17 00:00:00 2001 From: shreeyash07 Date: Wed, 10 Jul 2024 11:34:26 +0545 Subject: [PATCH] Add graphql query for add and edit analytical framework memebership --- .../UserTable/AddUserModal/index.tsx | 192 ++++++++++++------ .../AnalyticalFramework/UserTable/index.tsx | 1 + 2 files changed, 127 insertions(+), 66 deletions(-) diff --git a/app/views/AnalyticalFramework/UserTable/AddUserModal/index.tsx b/app/views/AnalyticalFramework/UserTable/AddUserModal/index.tsx index 58c19744f8..66fd778525 100644 --- a/app/views/AnalyticalFramework/UserTable/AddUserModal/index.tsx +++ b/app/views/AnalyticalFramework/UserTable/AddUserModal/index.tsx @@ -1,5 +1,5 @@ import React, { useMemo, useCallback, useState } from 'react'; -import { isDefined } from '@togglecorp/fujs'; +import { isDefined, isNotDefined } from '@togglecorp/fujs'; import { ObjectSchema, PartialForm, @@ -15,35 +15,37 @@ import { Button, PendingMessage, } from '@the-deep/deep-ui'; -import { gql, useQuery } from '@apollo/client'; +import { gql, useMutation, useQuery } from '@apollo/client'; -import { AnalysisFrameworkRolesQuery } from '#generated/types'; +import { + AnalysisFrameworkMembersQuery, + AnalysisFrameworkRolesQuery, + AnalysisMembershipAddEditMutation, + AnalysisMembershipAddEditMutationVariables, + BulkAnalysisFrameworkMembershipInputType, +} from '#generated/types'; import NonFieldError from '#components/NonFieldError'; -import { useLazyRequest } from '#base/utils/restRequest'; -import { Membership } from '#types'; import NewUserSelectInput, { User } from '#components/selections/NewUserSelectInput'; import _ts from '#ts'; import styles from './styles.css'; -type Member = Pick; +type AnalysisFrameworkMember = NonNullable['members']>[number]; type AnalysisFrameworkRolesType = NonNullable['analysisFrameworkRoles']>[number]; -const roleKeySelector = (d: AnalysisFrameworkRolesType) => Number(d.id); +const roleKeySelector = (d: AnalysisFrameworkRolesType) => d.id; const roleLabelSelector = (d: AnalysisFrameworkRolesType) => d.title; -type FormType = { - id?: number; - member?: string; - role: number; -}; +type PartialAnalysisMemembershipForm = PartialForm< + BulkAnalysisFrameworkMembershipInputType & { frameworkId: string} +> -type FormSchema = ObjectSchema>; +type FormSchema = ObjectSchema; type FormSchemaFields = ReturnType const schema: FormSchema = { fields: (value): FormSchemaFields => { - if (isDefined(value?.id)) { + if (isDefined(value?.frameworkId)) { return ({ member: [], role: [requiredCondition], @@ -56,7 +58,25 @@ const schema: FormSchema = { }, }; -const defaultFormValue: PartialForm = {}; +const defaultFormValue: PartialAnalysisMemembershipForm = {}; + +const ANALYSIS_MEMBERSHIP_ADD_EDIT = gql` + mutation AnalysisMembershipAddEdit( + $frameworkId: ID! + $items: [BulkAnalysisFrameworkMembershipInputType!], + ){ + analysisFramework(id: $frameworkId) { + analysisFrameworkMembershipBulk( + items: $items + ) { + result { + id + } + errors + } + } + } +`; const ANALYSIS_FRAMEWORK_ROLES = gql` query AnalysisFrameworkRoles { @@ -70,18 +90,12 @@ const ANALYSIS_FRAMEWORK_ROLES = gql` } `; -interface ValueToSend { - role: number; - member?: number; - framework: number; -} - interface Props { onModalClose: () => void; - frameworkId: number; + frameworkId: string; onTableReload: () => void; isPrivateFramework: boolean; - userValue?: Member; + userValue?: AnalysisFrameworkMember; } function AddUserModal(props: Props) { @@ -93,15 +107,18 @@ function AddUserModal(props: Props) { isPrivateFramework, } = props; - const initialFormValue: PartialForm = useMemo(() => { + const initialFormValue: PartialAnalysisMemembershipForm = useMemo(() => { if (!userValue) { return defaultFormValue; } return ({ - ...userValue, - member: String(userValue.member), + frameworkId, + id: userValue.id, + role: userValue.role.id, + member: userValue.member.id, }); - }, [userValue]); + }, [userValue, frameworkId]); + const alert = useAlert(); const [ @@ -120,6 +137,57 @@ function AddUserModal(props: Props) { const error = getErrorObject(riskyError); + const [ + addEditFrameworkMembership, + { + loading: addEditFrameworkMembershipLoading, + }, + ] = useMutation( + ANALYSIS_MEMBERSHIP_ADD_EDIT, + { + onCompleted: (response) => { + if (!response.analysisFramework?.analysisFrameworkMembershipBulk?.result) { + return; + } + + const { + result, + } = response.analysisFramework.analysisFrameworkMembershipBulk; + + const ok = isDefined(result) && result?.length > 0; + + if (ok) { + if (userValue?.id) { + alert.show( + 'Successfully updated user to the analytical framework.', + { variant: 'success' }, + ); + } else { + alert.show( + 'Successfully added user to the analytical framework.', + { variant: 'success' }, + ); + } + onTableReload(); + onModalClose(); + } + }, + onError: () => { + if (userValue?.id) { + alert.show( + 'Failed to update users to analytical framework.', + { variant: 'error' }, + ); + } else { + alert.show( + 'Failed to add users to analytical framework.', + { variant: 'error' }, + ); + } + }, + }, + ); + const { data: analysisFrameworkRolesResponse, loading: analysisFrameworkRolesLoading, @@ -134,56 +202,48 @@ function AddUserModal(props: Props) { ) ), [analysisFrameworkRolesResponse, isPrivateFramework]); - const { - pending: pendingAddAction, - trigger: triggerAddFrameworkMember, - } = useLazyRequest({ - url: isDefined(userValue) - ? `server://framework-memberships/${userValue.id}/` - : 'server://framework-memberships/', - method: isDefined(userValue) - ? 'PATCH' - : 'POST', - body: (ctx) => ctx, - onSuccess: () => { - alert.show( - userValue?.id - ? 'Successfully updated user permissions.' - : 'Successfully added user to the analytical framework.', - { - variant: 'success', - }, - ); - onTableReload(); - onModalClose(); - }, - failureMessage: _ts('analyticalFramework.addUser', 'membershipPostFailed'), - }); - const handleSubmit = useCallback( () => { const submit = createSubmitHandler( validate, setError, (val) => { - const newVal = val.member ? { member: Number(val.member), ...val } : val; - triggerAddFrameworkMember({ - ...newVal, - framework: frameworkId, - } as ValueToSend); + if (isNotDefined(val.member)) { + addEditFrameworkMembership({ variables: undefined }); + } else if (userValue?.id) { + addEditFrameworkMembership({ + variables: { + frameworkId, + items: [{ + member: val.member, + role: val.role, + id: userValue.id, + }], + }, + }); + } else { + addEditFrameworkMembership({ + variables: { + frameworkId, + items: [{ + member: val.member, + role: val.role, + }], + }, + }); + } }, ); submit(); }, - [setError, validate, triggerAddFrameworkMember, frameworkId], + [setError, validate, addEditFrameworkMembership, frameworkId, userValue?.id], ); const currentUser = useMemo(() => (userValue ? [ { - id: String(userValue.member), - displayName: userValue.memberName, - // FIXME: Use graphql to fetch details for User + id: userValue.member.id, + displayName: userValue.member.displayName, firstName: '', lastName: '', emailDisplay: '', @@ -191,7 +251,7 @@ function AddUserModal(props: Props) { ] : [] ), [userValue]); - const pendingRequests = analysisFrameworkRolesLoading; + const pendingRequests = analysisFrameworkRolesLoading || addEditFrameworkMembershipLoading; return ( {_ts('analyticalFramework.addUser', 'submitLabel')} )} > - {pendingAddAction && ()} + {addEditFrameworkMembershipLoading && ()}