Fix edit user settings (#3079)
* Prepare mutation for change password nad user first nad last name * User mutations * User and staff mutation hooks * Split mution for user and staff specific * Ad props types and refetch after user mutations * Add save button status for user mutation * Get rid of maybe * Improve hooks naming * useProfileOperations
This commit is contained in:
parent
34cdd75b60
commit
c8bb645ae8
9 changed files with 348 additions and 153 deletions
|
@ -42,12 +42,8 @@ export function useAuthProvider({
|
|||
notify,
|
||||
apolloClient,
|
||||
}: UseAuthProviderOpts): UserContext {
|
||||
const {
|
||||
login,
|
||||
getExternalAuthUrl,
|
||||
getExternalAccessToken,
|
||||
logout,
|
||||
} = useAuth();
|
||||
const { login, getExternalAuthUrl, getExternalAccessToken, logout } =
|
||||
useAuth();
|
||||
const navigate = useNavigator();
|
||||
const { authenticated, authenticating, user } = useAuthState();
|
||||
const [requestedExternalPluginId] = useLocalStorage(
|
||||
|
|
|
@ -14865,6 +14865,77 @@ export function useStaffMemberUpdateMutation(baseOptions?: ApolloReactHooks.Muta
|
|||
export type StaffMemberUpdateMutationHookResult = ReturnType<typeof useStaffMemberUpdateMutation>;
|
||||
export type StaffMemberUpdateMutationResult = Apollo.MutationResult<Types.StaffMemberUpdateMutation>;
|
||||
export type StaffMemberUpdateMutationOptions = Apollo.BaseMutationOptions<Types.StaffMemberUpdateMutation, Types.StaffMemberUpdateMutationVariables>;
|
||||
export const UserPassowrdChangeDocument = gql`
|
||||
mutation UserPassowrdChange($newPassword: String!, $oldPassword: String!) {
|
||||
passwordChange(newPassword: $newPassword, oldPassword: $oldPassword) {
|
||||
errors {
|
||||
...AccountError
|
||||
}
|
||||
}
|
||||
}
|
||||
${AccountErrorFragmentDoc}`;
|
||||
export type UserPassowrdChangeMutationFn = Apollo.MutationFunction<Types.UserPassowrdChangeMutation, Types.UserPassowrdChangeMutationVariables>;
|
||||
|
||||
/**
|
||||
* __useUserPassowrdChangeMutation__
|
||||
*
|
||||
* To run a mutation, you first call `useUserPassowrdChangeMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useUserPassowrdChangeMutation` returns a tuple that includes:
|
||||
* - A mutate function that you can call at any time to execute the mutation
|
||||
* - An object with fields that represent the current status of the mutation's execution
|
||||
*
|
||||
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||
*
|
||||
* @example
|
||||
* const [userPassowrdChangeMutation, { data, loading, error }] = useUserPassowrdChangeMutation({
|
||||
* variables: {
|
||||
* newPassword: // value for 'newPassword'
|
||||
* oldPassword: // value for 'oldPassword'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useUserPassowrdChangeMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.UserPassowrdChangeMutation, Types.UserPassowrdChangeMutationVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return ApolloReactHooks.useMutation<Types.UserPassowrdChangeMutation, Types.UserPassowrdChangeMutationVariables>(UserPassowrdChangeDocument, options);
|
||||
}
|
||||
export type UserPassowrdChangeMutationHookResult = ReturnType<typeof useUserPassowrdChangeMutation>;
|
||||
export type UserPassowrdChangeMutationResult = Apollo.MutationResult<Types.UserPassowrdChangeMutation>;
|
||||
export type UserPassowrdChangeMutationOptions = Apollo.BaseMutationOptions<Types.UserPassowrdChangeMutation, Types.UserPassowrdChangeMutationVariables>;
|
||||
export const UserAccountUpdateDocument = gql`
|
||||
mutation UserAccountUpdate($input: AccountInput!) {
|
||||
accountUpdate(input: $input) {
|
||||
errors {
|
||||
...AccountError
|
||||
}
|
||||
}
|
||||
}
|
||||
${AccountErrorFragmentDoc}`;
|
||||
export type UserAccountUpdateMutationFn = Apollo.MutationFunction<Types.UserAccountUpdateMutation, Types.UserAccountUpdateMutationVariables>;
|
||||
|
||||
/**
|
||||
* __useUserAccountUpdateMutation__
|
||||
*
|
||||
* To run a mutation, you first call `useUserAccountUpdateMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useUserAccountUpdateMutation` returns a tuple that includes:
|
||||
* - A mutate function that you can call at any time to execute the mutation
|
||||
* - An object with fields that represent the current status of the mutation's execution
|
||||
*
|
||||
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||
*
|
||||
* @example
|
||||
* const [userAccountUpdateMutation, { data, loading, error }] = useUserAccountUpdateMutation({
|
||||
* variables: {
|
||||
* input: // value for 'input'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useUserAccountUpdateMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.UserAccountUpdateMutation, Types.UserAccountUpdateMutationVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return ApolloReactHooks.useMutation<Types.UserAccountUpdateMutation, Types.UserAccountUpdateMutationVariables>(UserAccountUpdateDocument, options);
|
||||
}
|
||||
export type UserAccountUpdateMutationHookResult = ReturnType<typeof useUserAccountUpdateMutation>;
|
||||
export type UserAccountUpdateMutationResult = Apollo.MutationResult<Types.UserAccountUpdateMutation>;
|
||||
export type UserAccountUpdateMutationOptions = Apollo.BaseMutationOptions<Types.UserAccountUpdateMutation, Types.UserAccountUpdateMutationVariables>;
|
||||
export const StaffMemberDeleteDocument = gql`
|
||||
mutation StaffMemberDelete($id: ID!) {
|
||||
staffDelete(id: $id) {
|
||||
|
@ -14900,8 +14971,8 @@ export function useStaffMemberDeleteMutation(baseOptions?: ApolloReactHooks.Muta
|
|||
export type StaffMemberDeleteMutationHookResult = ReturnType<typeof useStaffMemberDeleteMutation>;
|
||||
export type StaffMemberDeleteMutationResult = Apollo.MutationResult<Types.StaffMemberDeleteMutation>;
|
||||
export type StaffMemberDeleteMutationOptions = Apollo.BaseMutationOptions<Types.StaffMemberDeleteMutation, Types.StaffMemberDeleteMutationVariables>;
|
||||
export const StaffAvatarUpdateDocument = gql`
|
||||
mutation StaffAvatarUpdate($image: Upload!) {
|
||||
export const UserAvatarUpdateDocument = gql`
|
||||
mutation UserAvatarUpdate($image: Upload!) {
|
||||
userAvatarUpdate(image: $image) {
|
||||
errors {
|
||||
...AccountError
|
||||
|
@ -14915,34 +14986,34 @@ export const StaffAvatarUpdateDocument = gql`
|
|||
}
|
||||
}
|
||||
${AccountErrorFragmentDoc}`;
|
||||
export type StaffAvatarUpdateMutationFn = Apollo.MutationFunction<Types.StaffAvatarUpdateMutation, Types.StaffAvatarUpdateMutationVariables>;
|
||||
export type UserAvatarUpdateMutationFn = Apollo.MutationFunction<Types.UserAvatarUpdateMutation, Types.UserAvatarUpdateMutationVariables>;
|
||||
|
||||
/**
|
||||
* __useStaffAvatarUpdateMutation__
|
||||
* __useUserAvatarUpdateMutation__
|
||||
*
|
||||
* To run a mutation, you first call `useStaffAvatarUpdateMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useStaffAvatarUpdateMutation` returns a tuple that includes:
|
||||
* To run a mutation, you first call `useUserAvatarUpdateMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useUserAvatarUpdateMutation` returns a tuple that includes:
|
||||
* - A mutate function that you can call at any time to execute the mutation
|
||||
* - An object with fields that represent the current status of the mutation's execution
|
||||
*
|
||||
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||
*
|
||||
* @example
|
||||
* const [staffAvatarUpdateMutation, { data, loading, error }] = useStaffAvatarUpdateMutation({
|
||||
* const [userAvatarUpdateMutation, { data, loading, error }] = useUserAvatarUpdateMutation({
|
||||
* variables: {
|
||||
* image: // value for 'image'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useStaffAvatarUpdateMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.StaffAvatarUpdateMutation, Types.StaffAvatarUpdateMutationVariables>) {
|
||||
export function useUserAvatarUpdateMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.UserAvatarUpdateMutation, Types.UserAvatarUpdateMutationVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return ApolloReactHooks.useMutation<Types.StaffAvatarUpdateMutation, Types.StaffAvatarUpdateMutationVariables>(StaffAvatarUpdateDocument, options);
|
||||
return ApolloReactHooks.useMutation<Types.UserAvatarUpdateMutation, Types.UserAvatarUpdateMutationVariables>(UserAvatarUpdateDocument, options);
|
||||
}
|
||||
export type StaffAvatarUpdateMutationHookResult = ReturnType<typeof useStaffAvatarUpdateMutation>;
|
||||
export type StaffAvatarUpdateMutationResult = Apollo.MutationResult<Types.StaffAvatarUpdateMutation>;
|
||||
export type StaffAvatarUpdateMutationOptions = Apollo.BaseMutationOptions<Types.StaffAvatarUpdateMutation, Types.StaffAvatarUpdateMutationVariables>;
|
||||
export const StaffAvatarDeleteDocument = gql`
|
||||
mutation StaffAvatarDelete {
|
||||
export type UserAvatarUpdateMutationHookResult = ReturnType<typeof useUserAvatarUpdateMutation>;
|
||||
export type UserAvatarUpdateMutationResult = Apollo.MutationResult<Types.UserAvatarUpdateMutation>;
|
||||
export type UserAvatarUpdateMutationOptions = Apollo.BaseMutationOptions<Types.UserAvatarUpdateMutation, Types.UserAvatarUpdateMutationVariables>;
|
||||
export const UserAvatarDeleteDocument = gql`
|
||||
mutation UserAvatarDelete {
|
||||
userAvatarDelete {
|
||||
errors {
|
||||
...AccountError
|
||||
|
@ -14956,33 +15027,33 @@ export const StaffAvatarDeleteDocument = gql`
|
|||
}
|
||||
}
|
||||
${AccountErrorFragmentDoc}`;
|
||||
export type StaffAvatarDeleteMutationFn = Apollo.MutationFunction<Types.StaffAvatarDeleteMutation, Types.StaffAvatarDeleteMutationVariables>;
|
||||
export type UserAvatarDeleteMutationFn = Apollo.MutationFunction<Types.UserAvatarDeleteMutation, Types.UserAvatarDeleteMutationVariables>;
|
||||
|
||||
/**
|
||||
* __useStaffAvatarDeleteMutation__
|
||||
* __useUserAvatarDeleteMutation__
|
||||
*
|
||||
* To run a mutation, you first call `useStaffAvatarDeleteMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useStaffAvatarDeleteMutation` returns a tuple that includes:
|
||||
* To run a mutation, you first call `useUserAvatarDeleteMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useUserAvatarDeleteMutation` returns a tuple that includes:
|
||||
* - A mutate function that you can call at any time to execute the mutation
|
||||
* - An object with fields that represent the current status of the mutation's execution
|
||||
*
|
||||
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||
*
|
||||
* @example
|
||||
* const [staffAvatarDeleteMutation, { data, loading, error }] = useStaffAvatarDeleteMutation({
|
||||
* const [userAvatarDeleteMutation, { data, loading, error }] = useUserAvatarDeleteMutation({
|
||||
* variables: {
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useStaffAvatarDeleteMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.StaffAvatarDeleteMutation, Types.StaffAvatarDeleteMutationVariables>) {
|
||||
export function useUserAvatarDeleteMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.UserAvatarDeleteMutation, Types.UserAvatarDeleteMutationVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return ApolloReactHooks.useMutation<Types.StaffAvatarDeleteMutation, Types.StaffAvatarDeleteMutationVariables>(StaffAvatarDeleteDocument, options);
|
||||
return ApolloReactHooks.useMutation<Types.UserAvatarDeleteMutation, Types.UserAvatarDeleteMutationVariables>(UserAvatarDeleteDocument, options);
|
||||
}
|
||||
export type StaffAvatarDeleteMutationHookResult = ReturnType<typeof useStaffAvatarDeleteMutation>;
|
||||
export type StaffAvatarDeleteMutationResult = Apollo.MutationResult<Types.StaffAvatarDeleteMutation>;
|
||||
export type StaffAvatarDeleteMutationOptions = Apollo.BaseMutationOptions<Types.StaffAvatarDeleteMutation, Types.StaffAvatarDeleteMutationVariables>;
|
||||
export const ChangeStaffPasswordDocument = gql`
|
||||
mutation ChangeStaffPassword($newPassword: String!, $oldPassword: String!) {
|
||||
export type UserAvatarDeleteMutationHookResult = ReturnType<typeof useUserAvatarDeleteMutation>;
|
||||
export type UserAvatarDeleteMutationResult = Apollo.MutationResult<Types.UserAvatarDeleteMutation>;
|
||||
export type UserAvatarDeleteMutationOptions = Apollo.BaseMutationOptions<Types.UserAvatarDeleteMutation, Types.UserAvatarDeleteMutationVariables>;
|
||||
export const ChangeUserPasswordDocument = gql`
|
||||
mutation ChangeUserPassword($newPassword: String!, $oldPassword: String!) {
|
||||
passwordChange(newPassword: $newPassword, oldPassword: $oldPassword) {
|
||||
errors {
|
||||
...AccountError
|
||||
|
@ -14990,33 +15061,33 @@ export const ChangeStaffPasswordDocument = gql`
|
|||
}
|
||||
}
|
||||
${AccountErrorFragmentDoc}`;
|
||||
export type ChangeStaffPasswordMutationFn = Apollo.MutationFunction<Types.ChangeStaffPasswordMutation, Types.ChangeStaffPasswordMutationVariables>;
|
||||
export type ChangeUserPasswordMutationFn = Apollo.MutationFunction<Types.ChangeUserPasswordMutation, Types.ChangeUserPasswordMutationVariables>;
|
||||
|
||||
/**
|
||||
* __useChangeStaffPasswordMutation__
|
||||
* __useChangeUserPasswordMutation__
|
||||
*
|
||||
* To run a mutation, you first call `useChangeStaffPasswordMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useChangeStaffPasswordMutation` returns a tuple that includes:
|
||||
* To run a mutation, you first call `useChangeUserPasswordMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useChangeUserPasswordMutation` returns a tuple that includes:
|
||||
* - A mutate function that you can call at any time to execute the mutation
|
||||
* - An object with fields that represent the current status of the mutation's execution
|
||||
*
|
||||
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||
*
|
||||
* @example
|
||||
* const [changeStaffPasswordMutation, { data, loading, error }] = useChangeStaffPasswordMutation({
|
||||
* const [changeUserPasswordMutation, { data, loading, error }] = useChangeUserPasswordMutation({
|
||||
* variables: {
|
||||
* newPassword: // value for 'newPassword'
|
||||
* oldPassword: // value for 'oldPassword'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useChangeStaffPasswordMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.ChangeStaffPasswordMutation, Types.ChangeStaffPasswordMutationVariables>) {
|
||||
export function useChangeUserPasswordMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.ChangeUserPasswordMutation, Types.ChangeUserPasswordMutationVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return ApolloReactHooks.useMutation<Types.ChangeStaffPasswordMutation, Types.ChangeStaffPasswordMutationVariables>(ChangeStaffPasswordDocument, options);
|
||||
return ApolloReactHooks.useMutation<Types.ChangeUserPasswordMutation, Types.ChangeUserPasswordMutationVariables>(ChangeUserPasswordDocument, options);
|
||||
}
|
||||
export type ChangeStaffPasswordMutationHookResult = ReturnType<typeof useChangeStaffPasswordMutation>;
|
||||
export type ChangeStaffPasswordMutationResult = Apollo.MutationResult<Types.ChangeStaffPasswordMutation>;
|
||||
export type ChangeStaffPasswordMutationOptions = Apollo.BaseMutationOptions<Types.ChangeStaffPasswordMutation, Types.ChangeStaffPasswordMutationVariables>;
|
||||
export type ChangeUserPasswordMutationHookResult = ReturnType<typeof useChangeUserPasswordMutation>;
|
||||
export type ChangeUserPasswordMutationResult = Apollo.MutationResult<Types.ChangeUserPasswordMutation>;
|
||||
export type ChangeUserPasswordMutationOptions = Apollo.BaseMutationOptions<Types.ChangeUserPasswordMutation, Types.ChangeUserPasswordMutationVariables>;
|
||||
export const StaffListDocument = gql`
|
||||
query StaffList($first: Int, $after: String, $last: Int, $before: String, $filter: StaffUserInput, $sort: UserSortingInput) {
|
||||
staffUsers(
|
||||
|
|
|
@ -9144,6 +9144,21 @@ export type StaffMemberUpdateMutationVariables = Exact<{
|
|||
|
||||
export type StaffMemberUpdateMutation = { __typename: 'Mutation', staffUpdate: { __typename: 'StaffUpdate', errors: Array<{ __typename: 'StaffError', code: AccountErrorCode, field: string | null, message: string | null }>, user: { __typename: 'User', id: string, email: string, firstName: string, isActive: boolean, lastName: string, permissionGroups: Array<{ __typename: 'Group', id: string, name: string, userCanManage: boolean }> | null, userPermissions: Array<{ __typename: 'UserPermission', code: PermissionEnum, name: string }> | null, avatar: { __typename: 'Image', url: string } | null } | null } | null };
|
||||
|
||||
export type UserPassowrdChangeMutationVariables = Exact<{
|
||||
newPassword: Scalars['String'];
|
||||
oldPassword: Scalars['String'];
|
||||
}>;
|
||||
|
||||
|
||||
export type UserPassowrdChangeMutation = { __typename: 'Mutation', passwordChange: { __typename: 'PasswordChange', errors: Array<{ __typename: 'AccountError', code: AccountErrorCode, field: string | null, addressType: AddressTypeEnum | null, message: string | null }> } | null };
|
||||
|
||||
export type UserAccountUpdateMutationVariables = Exact<{
|
||||
input: AccountInput;
|
||||
}>;
|
||||
|
||||
|
||||
export type UserAccountUpdateMutation = { __typename: 'Mutation', accountUpdate: { __typename: 'AccountUpdate', errors: Array<{ __typename: 'AccountError', code: AccountErrorCode, field: string | null, addressType: AddressTypeEnum | null, message: string | null }> } | null };
|
||||
|
||||
export type StaffMemberDeleteMutationVariables = Exact<{
|
||||
id: Scalars['ID'];
|
||||
}>;
|
||||
|
@ -9151,25 +9166,25 @@ export type StaffMemberDeleteMutationVariables = Exact<{
|
|||
|
||||
export type StaffMemberDeleteMutation = { __typename: 'Mutation', staffDelete: { __typename: 'StaffDelete', errors: Array<{ __typename: 'StaffError', code: AccountErrorCode, field: string | null, message: string | null }> } | null };
|
||||
|
||||
export type StaffAvatarUpdateMutationVariables = Exact<{
|
||||
export type UserAvatarUpdateMutationVariables = Exact<{
|
||||
image: Scalars['Upload'];
|
||||
}>;
|
||||
|
||||
|
||||
export type StaffAvatarUpdateMutation = { __typename: 'Mutation', userAvatarUpdate: { __typename: 'UserAvatarUpdate', errors: Array<{ __typename: 'AccountError', code: AccountErrorCode, field: string | null, addressType: AddressTypeEnum | null, message: string | null }>, user: { __typename: 'User', id: string, avatar: { __typename: 'Image', url: string } | null } | null } | null };
|
||||
export type UserAvatarUpdateMutation = { __typename: 'Mutation', userAvatarUpdate: { __typename: 'UserAvatarUpdate', errors: Array<{ __typename: 'AccountError', code: AccountErrorCode, field: string | null, addressType: AddressTypeEnum | null, message: string | null }>, user: { __typename: 'User', id: string, avatar: { __typename: 'Image', url: string } | null } | null } | null };
|
||||
|
||||
export type StaffAvatarDeleteMutationVariables = Exact<{ [key: string]: never; }>;
|
||||
export type UserAvatarDeleteMutationVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
export type StaffAvatarDeleteMutation = { __typename: 'Mutation', userAvatarDelete: { __typename: 'UserAvatarDelete', errors: Array<{ __typename: 'AccountError', code: AccountErrorCode, field: string | null, addressType: AddressTypeEnum | null, message: string | null }>, user: { __typename: 'User', id: string, avatar: { __typename: 'Image', url: string } | null } | null } | null };
|
||||
export type UserAvatarDeleteMutation = { __typename: 'Mutation', userAvatarDelete: { __typename: 'UserAvatarDelete', errors: Array<{ __typename: 'AccountError', code: AccountErrorCode, field: string | null, addressType: AddressTypeEnum | null, message: string | null }>, user: { __typename: 'User', id: string, avatar: { __typename: 'Image', url: string } | null } | null } | null };
|
||||
|
||||
export type ChangeStaffPasswordMutationVariables = Exact<{
|
||||
export type ChangeUserPasswordMutationVariables = Exact<{
|
||||
newPassword: Scalars['String'];
|
||||
oldPassword: Scalars['String'];
|
||||
}>;
|
||||
|
||||
|
||||
export type ChangeStaffPasswordMutation = { __typename: 'Mutation', passwordChange: { __typename: 'PasswordChange', errors: Array<{ __typename: 'AccountError', code: AccountErrorCode, field: string | null, addressType: AddressTypeEnum | null, message: string | null }> } | null };
|
||||
export type ChangeUserPasswordMutation = { __typename: 'Mutation', passwordChange: { __typename: 'PasswordChange', errors: Array<{ __typename: 'AccountError', code: AccountErrorCode, field: string | null, addressType: AddressTypeEnum | null, message: string | null }> } | null };
|
||||
|
||||
export type StaffListQueryVariables = Exact<{
|
||||
first?: InputMaybe<Scalars['Int']>;
|
||||
|
|
|
@ -93,16 +93,14 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
|
|||
const isActive = isMemberActive(staffMember);
|
||||
const permissionGroups = getMemberPermissionGroups(staffMember);
|
||||
|
||||
const [
|
||||
permissionGroupsDisplayValues,
|
||||
setPermissionGroupsDisplayValues,
|
||||
] = useStateFromProps<MultiAutocompleteChoiceType[]>(
|
||||
permissionGroups.map(group => ({
|
||||
disabled: !group.userCanManage,
|
||||
label: group.name,
|
||||
value: group.id,
|
||||
})) || [],
|
||||
);
|
||||
const [permissionGroupsDisplayValues, setPermissionGroupsDisplayValues] =
|
||||
useStateFromProps<MultiAutocompleteChoiceType[]>(
|
||||
permissionGroups.map(group => ({
|
||||
disabled: !group.userCanManage,
|
||||
label: group.name,
|
||||
value: group.id,
|
||||
})) || [],
|
||||
);
|
||||
|
||||
const initialForm: StaffDetailsFormData = {
|
||||
email: staffMember?.email || "",
|
||||
|
|
2
src/staff/hooks/index.ts
Normal file
2
src/staff/hooks/index.ts
Normal file
|
@ -0,0 +1,2 @@
|
|||
export * from "./useStaffUserOperations";
|
||||
export * from "./useProfileOperations";
|
95
src/staff/hooks/useProfileOperations.ts
Normal file
95
src/staff/hooks/useProfileOperations.ts
Normal file
|
@ -0,0 +1,95 @@
|
|||
import {
|
||||
useChangeUserPasswordMutation,
|
||||
useUserAccountUpdateMutation,
|
||||
useUserAvatarDeleteMutation,
|
||||
useUserAvatarUpdateMutation,
|
||||
} from "@dashboard/graphql";
|
||||
import useNavigator from "@dashboard/hooks/useNavigator";
|
||||
import useNotifier from "@dashboard/hooks/useNotifier";
|
||||
import { commonMessages, errorMessages } from "@dashboard/intl";
|
||||
import { useIntl } from "react-intl";
|
||||
|
||||
import { staffMemberDetailsUrl } from "../urls";
|
||||
|
||||
interface UseUserMutationProps {
|
||||
refetch: () => void;
|
||||
id: string;
|
||||
closeModal: () => void;
|
||||
}
|
||||
|
||||
export const useProfileOperations = ({
|
||||
refetch,
|
||||
id,
|
||||
closeModal,
|
||||
}: UseUserMutationProps) => {
|
||||
const notify = useNotifier();
|
||||
const intl = useIntl();
|
||||
const navigate = useNavigator();
|
||||
|
||||
const [updateUserAccount, updateUserAccountOpts] =
|
||||
useUserAccountUpdateMutation({
|
||||
onCompleted: data => {
|
||||
if (!data.accountUpdate?.errors.length) {
|
||||
refetch();
|
||||
notify({
|
||||
status: "success",
|
||||
text: intl.formatMessage(commonMessages.savedChanges),
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [updateUserAvatar] = useUserAvatarUpdateMutation({
|
||||
onCompleted: data => {
|
||||
if (!data.userAvatarUpdate?.errors.length) {
|
||||
notify({
|
||||
status: "success",
|
||||
text: intl.formatMessage(commonMessages.savedChanges),
|
||||
});
|
||||
refetch();
|
||||
navigate(staffMemberDetailsUrl(id));
|
||||
} else {
|
||||
notify({
|
||||
status: "error",
|
||||
title: intl.formatMessage(errorMessages.imgageUploadErrorTitle),
|
||||
text: intl.formatMessage(errorMessages.imageUploadErrorText),
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [deleteUserAvatar, deleteAvatarResult] = useUserAvatarDeleteMutation({
|
||||
onCompleted: data => {
|
||||
if (!data.userAvatarDelete?.errors.length) {
|
||||
notify({
|
||||
status: "success",
|
||||
text: intl.formatMessage(commonMessages.savedChanges),
|
||||
});
|
||||
refetch();
|
||||
navigate(staffMemberDetailsUrl(id));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [changePassword, changePasswordOpts] = useChangeUserPasswordMutation({
|
||||
onCompleted: data => {
|
||||
if (!data.passwordChange?.errors.length) {
|
||||
notify({
|
||||
status: "success",
|
||||
text: intl.formatMessage(commonMessages.savedChanges),
|
||||
});
|
||||
closeModal();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
updateUserAccount,
|
||||
deleteAvatarResult,
|
||||
deleteUserAvatar,
|
||||
updateUserAvatar,
|
||||
changePassword,
|
||||
changePasswordOpts,
|
||||
updateUserAccountOpts,
|
||||
};
|
||||
};
|
47
src/staff/hooks/useStaffUserOperations.ts
Normal file
47
src/staff/hooks/useStaffUserOperations.ts
Normal file
|
@ -0,0 +1,47 @@
|
|||
import {
|
||||
useStaffMemberDeleteMutation,
|
||||
useStaffMemberUpdateMutation,
|
||||
} from "@dashboard/graphql";
|
||||
import useNavigator from "@dashboard/hooks/useNavigator";
|
||||
import useNotifier from "@dashboard/hooks/useNotifier";
|
||||
import { commonMessages } from "@dashboard/intl";
|
||||
import { useIntl } from "react-intl";
|
||||
|
||||
import { staffListUrl } from "../urls";
|
||||
|
||||
export const useStaffUserOperations = () => {
|
||||
const notify = useNotifier();
|
||||
const intl = useIntl();
|
||||
const navigate = useNavigator();
|
||||
|
||||
const [updateStaffMember, updateStaffMemberOpts] =
|
||||
useStaffMemberUpdateMutation({
|
||||
onCompleted: data => {
|
||||
if (!data.staffUpdate?.errors.length) {
|
||||
notify({
|
||||
status: "success",
|
||||
text: intl.formatMessage(commonMessages.savedChanges),
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [deleteStaffMember, deleteResult] = useStaffMemberDeleteMutation({
|
||||
onCompleted: data => {
|
||||
if (!data.staffDelete?.errors.length) {
|
||||
notify({
|
||||
status: "success",
|
||||
text: intl.formatMessage(commonMessages.savedChanges),
|
||||
});
|
||||
navigate(staffListUrl());
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
updateStaffMember,
|
||||
updateStaffMemberOpts,
|
||||
deleteStaffMember,
|
||||
deleteResult,
|
||||
};
|
||||
};
|
|
@ -26,6 +26,26 @@ export const staffMemberUpdateMutation = gql`
|
|||
}
|
||||
`;
|
||||
|
||||
export const userPassowrdChangeMutation = gql`
|
||||
mutation UserPassowrdChange($newPassword: String!, $oldPassword: String!) {
|
||||
passwordChange(newPassword: $newPassword, oldPassword: $oldPassword) {
|
||||
errors {
|
||||
...AccountError
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const userAccountUpdateMutation = gql`
|
||||
mutation UserAccountUpdate($input: AccountInput!) {
|
||||
accountUpdate(input: $input) {
|
||||
errors {
|
||||
...AccountError
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const staffMemberDeleteMutation = gql`
|
||||
mutation StaffMemberDelete($id: ID!) {
|
||||
staffDelete(id: $id) {
|
||||
|
@ -36,8 +56,8 @@ export const staffMemberDeleteMutation = gql`
|
|||
}
|
||||
`;
|
||||
|
||||
export const staffAvatarUpdateMutation = gql`
|
||||
mutation StaffAvatarUpdate($image: Upload!) {
|
||||
export const userAvatarUpdateMutation = gql`
|
||||
mutation UserAvatarUpdate($image: Upload!) {
|
||||
userAvatarUpdate(image: $image) {
|
||||
errors {
|
||||
...AccountError
|
||||
|
@ -52,8 +72,8 @@ export const staffAvatarUpdateMutation = gql`
|
|||
}
|
||||
`;
|
||||
|
||||
export const staffAvatarDeleteMutation = gql`
|
||||
mutation StaffAvatarDelete {
|
||||
export const userAvatarDeleteMutation = gql`
|
||||
mutation UserAvatarDelete {
|
||||
userAvatarDelete {
|
||||
errors {
|
||||
...AccountError
|
||||
|
@ -68,8 +88,8 @@ export const staffAvatarDeleteMutation = gql`
|
|||
}
|
||||
`;
|
||||
|
||||
export const changeStaffPassword = gql`
|
||||
mutation ChangeStaffPassword($newPassword: String!, $oldPassword: String!) {
|
||||
export const changeUserPassword = gql`
|
||||
mutation ChangeUserPassword($newPassword: String!, $oldPassword: String!) {
|
||||
passwordChange(newPassword: $newPassword, oldPassword: $oldPassword) {
|
||||
errors {
|
||||
...AccountError
|
||||
|
|
|
@ -4,23 +4,9 @@ import NotFoundPage from "@dashboard/components/NotFoundPage";
|
|||
import { hasPermissions } from "@dashboard/components/RequirePermissions";
|
||||
import { WindowTitle } from "@dashboard/components/WindowTitle";
|
||||
import { DEFAULT_INITIAL_SEARCH_DATA } from "@dashboard/config";
|
||||
import {
|
||||
PermissionEnum,
|
||||
useChangeStaffPasswordMutation,
|
||||
useStaffAvatarDeleteMutation,
|
||||
useStaffAvatarUpdateMutation,
|
||||
useStaffMemberDeleteMutation,
|
||||
useStaffMemberDetailsQuery,
|
||||
useStaffMemberUpdateMutation,
|
||||
} from "@dashboard/graphql";
|
||||
import { PermissionEnum, useStaffMemberDetailsQuery } from "@dashboard/graphql";
|
||||
import useNavigator from "@dashboard/hooks/useNavigator";
|
||||
import useNotifier from "@dashboard/hooks/useNotifier";
|
||||
import { commonMessages, errorMessages } from "@dashboard/intl";
|
||||
import {
|
||||
extractMutationErrors,
|
||||
getStringOrPlaceholder,
|
||||
maybe,
|
||||
} from "@dashboard/misc";
|
||||
import { extractMutationErrors, getStringOrPlaceholder } from "@dashboard/misc";
|
||||
import usePermissionGroupSearch from "@dashboard/searches/usePermissionGroupSearch";
|
||||
import { mapEdgesToItems } from "@dashboard/utils/maps";
|
||||
import { DialogContentText } from "@material-ui/core";
|
||||
|
@ -31,6 +17,7 @@ import StaffDetailsPage, {
|
|||
StaffDetailsFormData,
|
||||
} from "../components/StaffDetailsPage/StaffDetailsPage";
|
||||
import StaffPasswordResetDialog from "../components/StaffPasswordResetDialog";
|
||||
import { useProfileOperations, useStaffUserOperations } from "../hooks";
|
||||
import {
|
||||
staffListUrl,
|
||||
staffMemberDetailsUrl,
|
||||
|
@ -45,7 +32,6 @@ interface OrderListProps {
|
|||
|
||||
export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
|
||||
const navigate = useNavigator();
|
||||
const notify = useNotifier();
|
||||
const user = useUser();
|
||||
const intl = useIntl();
|
||||
|
||||
|
@ -64,24 +50,28 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
|
|||
variables: { id },
|
||||
skip: isUserSameAsViewer,
|
||||
});
|
||||
const {
|
||||
deleteResult,
|
||||
deleteStaffMember,
|
||||
updateStaffMember,
|
||||
updateStaffMemberOpts,
|
||||
} = useStaffUserOperations();
|
||||
|
||||
const {
|
||||
updateUserAccount,
|
||||
updateUserAccountOpts,
|
||||
changePassword,
|
||||
changePasswordOpts,
|
||||
deleteAvatarResult,
|
||||
deleteUserAvatar,
|
||||
updateUserAvatar,
|
||||
} = useProfileOperations({ closeModal, id, refetch });
|
||||
|
||||
const staffMember = isUserSameAsViewer ? user.user : data?.user;
|
||||
const hasManageStaffPermission = hasPermissions(user.user.userPermissions, [
|
||||
PermissionEnum.MANAGE_STAFF,
|
||||
]);
|
||||
|
||||
const [changePassword, changePasswordOpts] = useChangeStaffPasswordMutation({
|
||||
onCompleted: data => {
|
||||
if (data.passwordChange.errors.length === 0) {
|
||||
notify({
|
||||
status: "success",
|
||||
text: intl.formatMessage(commonMessages.savedChanges),
|
||||
});
|
||||
closeModal();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
loadMore: loadMorePermissionGroups,
|
||||
search: searchPermissionGroups,
|
||||
|
@ -91,66 +81,11 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
|
|||
skip: !hasManageStaffPermission,
|
||||
});
|
||||
|
||||
const [updateStaffMember, updateStaffMemberOpts] =
|
||||
useStaffMemberUpdateMutation({
|
||||
onCompleted: data => {
|
||||
if (!maybe(() => data.staffUpdate.errors.length !== 0)) {
|
||||
notify({
|
||||
status: "success",
|
||||
text: intl.formatMessage(commonMessages.savedChanges),
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [deleteStaffMember, deleteResult] = useStaffMemberDeleteMutation({
|
||||
onCompleted: data => {
|
||||
if (!maybe(() => data.staffDelete.errors.length !== 0)) {
|
||||
notify({
|
||||
status: "success",
|
||||
text: intl.formatMessage(commonMessages.savedChanges),
|
||||
});
|
||||
navigate(staffListUrl());
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [updateStaffAvatar] = useStaffAvatarUpdateMutation({
|
||||
onCompleted: data => {
|
||||
if (!maybe(() => data.userAvatarUpdate.errors.length !== 0)) {
|
||||
notify({
|
||||
status: "success",
|
||||
text: intl.formatMessage(commonMessages.savedChanges),
|
||||
});
|
||||
refetch();
|
||||
} else {
|
||||
notify({
|
||||
status: "error",
|
||||
title: intl.formatMessage(errorMessages.imgageUploadErrorTitle),
|
||||
text: intl.formatMessage(errorMessages.imageUploadErrorText),
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [deleteStaffAvatar, deleteAvatarResult] = useStaffAvatarDeleteMutation({
|
||||
onCompleted: data => {
|
||||
if (!maybe(() => data.userAvatarDelete.errors.length !== 0)) {
|
||||
notify({
|
||||
status: "success",
|
||||
text: intl.formatMessage(commonMessages.savedChanges),
|
||||
});
|
||||
navigate(staffMemberDetailsUrl(id));
|
||||
refetch();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
if (staffMember === null) {
|
||||
return <NotFoundPage backHref={staffListUrl()} />;
|
||||
}
|
||||
|
||||
const handleUpdate = (formData: StaffDetailsFormData) =>
|
||||
const handleStaffUpdate = (formData: StaffDetailsFormData) =>
|
||||
extractMutationErrors(
|
||||
updateStaffMember({
|
||||
variables: {
|
||||
|
@ -168,6 +103,18 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
|
|||
}),
|
||||
);
|
||||
|
||||
const handleUserUpdate = (formData: StaffDetailsFormData) =>
|
||||
extractMutationErrors(
|
||||
updateUserAccount({
|
||||
variables: {
|
||||
input: {
|
||||
firstName: formData.firstName,
|
||||
lastName: formData.lastName,
|
||||
},
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<WindowTitle title={getStringOrPlaceholder(staffMember?.email)} />
|
||||
|
@ -193,9 +140,9 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
|
|||
}),
|
||||
)
|
||||
}
|
||||
onSubmit={handleUpdate}
|
||||
onSubmit={isUserSameAsViewer ? handleUserUpdate : handleStaffUpdate}
|
||||
onImageUpload={file =>
|
||||
updateStaffAvatar({
|
||||
updateUserAvatar({
|
||||
variables: {
|
||||
image: file,
|
||||
},
|
||||
|
@ -212,7 +159,11 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
|
|||
searchPermissionGroupsOpts?.data?.search,
|
||||
)}
|
||||
staffMember={staffMember}
|
||||
saveButtonBarState={updateStaffMemberOpts.status}
|
||||
saveButtonBarState={
|
||||
isUserSameAsViewer
|
||||
? updateUserAccountOpts.status
|
||||
: updateStaffMemberOpts.status
|
||||
}
|
||||
fetchMorePermissionGroups={{
|
||||
hasMore:
|
||||
searchPermissionGroupsOpts.data?.search?.pageInfo.hasNextPage,
|
||||
|
@ -257,7 +208,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
|
|||
confirmButtonState={deleteAvatarResult.status}
|
||||
variant="delete"
|
||||
onClose={closeModal}
|
||||
onConfirm={deleteStaffAvatar}
|
||||
onConfirm={deleteUserAvatar}
|
||||
>
|
||||
<DialogContentText>
|
||||
<FormattedMessage
|
||||
|
|
Loading…
Reference in a new issue