-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #29 from vivid-planet/add-target-group-basic-admin
COM-271: Add target group basic admin files
- Loading branch information
Showing
15 changed files
with
597 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export { createBrevoContactsPage } from "./brevoContacts/BrevoContactsPage"; | ||
| export { createTargetGroupsPage } from "./targetGroups/TargetGroupsPage"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { gql } from "@apollo/client"; | ||
|
|
||
| export const targetGroupFormFragment = gql` | ||
| fragment TargetGroupForm on TargetGroup { | ||
| title | ||
| } | ||
| `; | ||
|
|
||
| export const targetGroupFormQuery = gql` | ||
| query TargetGroupForm($id: ID!) { | ||
| targetGroup(id: $id) { | ||
| id | ||
| updatedAt | ||
| ...TargetGroupForm | ||
| } | ||
| } | ||
| ${targetGroupFormFragment} | ||
| `; | ||
|
|
||
| export const targetGroupFormCheckForChangesQuery = gql` | ||
| query TargetGroupFormCheckForChanges($id: ID!) { | ||
| targetGroup(id: $id) { | ||
| updatedAt | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| export const createTargetGroupMutation = gql` | ||
| mutation CreateTargetGroup($scope: EmailCampaignContentScopeInput!, $input: TargetGroupInput!) { | ||
| createTargetGroup(scope: $scope, input: $input) { | ||
| id | ||
| updatedAt | ||
| ...TargetGroupForm | ||
| } | ||
| } | ||
| ${targetGroupFormFragment} | ||
| `; | ||
|
|
||
| export const updateTargetGroupMutation = gql` | ||
| mutation UpdateTargetGroup($id: ID!, $input: TargetGroupUpdateInput!, $lastUpdatedAt: DateTime) { | ||
| updateTargetGroup(id: $id, input: $input, lastUpdatedAt: $lastUpdatedAt) { | ||
| id | ||
| updatedAt | ||
| ...TargetGroupForm | ||
| } | ||
| } | ||
| ${targetGroupFormFragment} | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| import { useApolloClient, useQuery } from "@apollo/client"; | ||
| import { | ||
| Field, | ||
| FinalForm, | ||
| FinalFormInput, | ||
| FinalFormSaveSplitButton, | ||
| FinalFormSubmitEvent, | ||
| Loading, | ||
| MainContent, | ||
| Toolbar, | ||
| ToolbarActions, | ||
| ToolbarFillSpace, | ||
| ToolbarItem, | ||
| ToolbarTitleItem, | ||
| useFormApiRef, | ||
| useStackApi, | ||
| useStackSwitchApi, | ||
| } from "@comet/admin"; | ||
| import { ArrowLeft } from "@comet/admin-icons"; | ||
| import { ContentScopeInterface, EditPageLayout, queryUpdatedAt, resolveHasSaveConflict, useFormSaveConflict } from "@comet/cms-admin"; | ||
| import { IconButton } from "@mui/material"; | ||
| import { FormApi } from "final-form"; | ||
| import React from "react"; | ||
| import { FormattedMessage } from "react-intl"; | ||
|
|
||
| import { createTargetGroupMutation, targetGroupFormQuery, updateTargetGroupMutation } from "./TargetGroupForm.gql"; | ||
| import { | ||
| GQLCreateTargetGroupMutation, | ||
| GQLCreateTargetGroupMutationVariables, | ||
| GQLTargetGroupFormFragment, | ||
| GQLTargetGroupFormQuery, | ||
| GQLTargetGroupFormQueryVariables, | ||
| GQLUpdateTargetGroupMutation, | ||
| GQLUpdateTargetGroupMutationVariables, | ||
| } from "./TargetGroupForm.gql.generated"; | ||
|
|
||
| type FormValues = GQLTargetGroupFormFragment; | ||
|
|
||
| interface FormProps { | ||
| id?: string; | ||
| scope: ContentScopeInterface; | ||
| } | ||
|
|
||
| export function TargetGroupForm({ id, scope }: FormProps): React.ReactElement { | ||
| const stackApi = useStackApi(); | ||
| const client = useApolloClient(); | ||
| const mode = id ? "edit" : "add"; | ||
| const formApiRef = useFormApiRef<FormValues>(); | ||
| const stackSwitchApi = useStackSwitchApi(); | ||
|
|
||
| const { data, error, loading, refetch } = useQuery<GQLTargetGroupFormQuery, GQLTargetGroupFormQueryVariables>( | ||
| targetGroupFormQuery, | ||
| id ? { variables: { id } } : { skip: true }, | ||
| ); | ||
|
|
||
| const initialValues = React.useMemo<Partial<FormValues>>( | ||
| () => | ||
| data?.targetGroup | ||
| ? { | ||
| title: data.targetGroup.title, | ||
| } | ||
| : {}, | ||
| [data], | ||
| ); | ||
|
|
||
| const saveConflict = useFormSaveConflict({ | ||
| checkConflict: async () => { | ||
| const updatedAt = await queryUpdatedAt(client, "targetGroup", id); | ||
| return resolveHasSaveConflict(data?.targetGroup.updatedAt, updatedAt); | ||
| }, | ||
| formApiRef, | ||
| loadLatestVersion: async () => { | ||
| await refetch(); | ||
| }, | ||
| }); | ||
|
|
||
| const handleSubmit = async (state: FormValues, form: FormApi<FormValues>, event: FinalFormSubmitEvent) => { | ||
| if (await saveConflict.checkForConflicts()) { | ||
| throw new Error("Conflicts detected"); | ||
| } | ||
|
|
||
| const output = { | ||
| ...state, | ||
| }; | ||
|
|
||
| if (mode === "edit") { | ||
| if (!id) { | ||
| throw new Error("Missing id in edit mode"); | ||
| } | ||
| await client.mutate<GQLUpdateTargetGroupMutation, GQLUpdateTargetGroupMutationVariables>({ | ||
| mutation: updateTargetGroupMutation, | ||
| variables: { id, input: output, lastUpdatedAt: data?.targetGroup?.updatedAt }, | ||
| }); | ||
| } else { | ||
| const { data: mutationResponse } = await client.mutate<GQLCreateTargetGroupMutation, GQLCreateTargetGroupMutationVariables>({ | ||
| mutation: createTargetGroupMutation, | ||
| variables: { scope, input: output }, | ||
| }); | ||
| if (!event.navigatingBack) { | ||
| const id = mutationResponse?.createTargetGroup.id; | ||
| if (id) { | ||
| setTimeout(() => { | ||
| stackSwitchApi.activatePage("edit", id); | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| if (error) throw error; | ||
|
|
||
| if (loading) { | ||
| return <Loading behavior="fillPageHeight" />; | ||
| } | ||
|
|
||
| return ( | ||
| <FinalForm<FormValues> | ||
| apiRef={formApiRef} | ||
| onSubmit={handleSubmit} | ||
| mode={mode} | ||
| initialValues={initialValues} | ||
| onAfterSubmit={(values, form) => { | ||
| //don't go back automatically | ||
| }} | ||
| > | ||
| {({ values }) => ( | ||
| <EditPageLayout> | ||
| {saveConflict.dialogs} | ||
| <Toolbar> | ||
| <ToolbarItem> | ||
| <IconButton onClick={stackApi?.goBack}> | ||
| <ArrowLeft /> | ||
| </IconButton> | ||
| </ToolbarItem> | ||
| <ToolbarTitleItem> | ||
| <FormattedMessage id="cometBrevoModule.targetGroups.TargetGroup" defaultMessage="Target group" /> | ||
| </ToolbarTitleItem> | ||
| <ToolbarFillSpace /> | ||
| <ToolbarActions> | ||
| <FinalFormSaveSplitButton hasConflict={saveConflict.hasConflict} /> | ||
| </ToolbarActions> | ||
| </Toolbar> | ||
| <MainContent> | ||
| <Field | ||
| required | ||
| fullWidth | ||
| name="title" | ||
| component={FinalFormInput} | ||
| label={<FormattedMessage id="cometBrevoModule.targetGroup.title" defaultMessage="Title" />} | ||
| /> | ||
| </MainContent> | ||
| </EditPageLayout> | ||
| )} | ||
| </FinalForm> | ||
| ); | ||
| } |
Oops, something went wrong.