diff --git a/demo/admin/src/Routes.tsx b/demo/admin/src/Routes.tsx index 3876a5ec..ea37dec1 100644 --- a/demo/admin/src/Routes.tsx +++ b/demo/admin/src/Routes.tsx @@ -2,8 +2,10 @@ import { MasterLayout, RouteWithErrorBoundary } from "@comet/admin"; import { Domain } from "@comet/admin-icons"; import { createBrevoContactsPage } from "@comet/brevo-admin"; import { ContentScopeIndicator, createRedirectsPage, DamPage, PagesPage, PublisherPage, SitePreview } from "@comet/cms-admin"; +import { getBrevoContactConfig } from "@src/common/brevoModuleConfig/brevoContactsPageAttributesConfig"; import { pageTreeCategories, urlParamToCategory } from "@src/pageTree/pageTreeCategories"; import * as React from "react"; +import { useIntl } from "react-intl"; import { RouteComponentProps } from "react-router"; import { Redirect, Route, Switch } from "react-router-dom"; @@ -17,9 +19,17 @@ import { Page } from "./documents/pages/Page"; import { ProductsPage } from "./products/ProductsPage"; const RedirectsPage = createRedirectsPage(); -const BrevoContactsPage = createBrevoContactsPage({ scopeParts: ["domain", "language"] }); export const Routes: React.FC = () => { + const intl = useIntl(); + const brevoContactConfig = getBrevoContactConfig(intl); + + const BrevoContactsPage = createBrevoContactsPage({ + scopeParts: ["domain", "language"], + additionalAttributesFragment: brevoContactConfig.additionalAttributesFragment, + additionalGridFields: brevoContactConfig.additionalGridFields, + }); + return ( {({ match }) => ( diff --git a/demo/admin/src/common/brevoModuleConfig/brevoContactsPageAttributesConfig.ts b/demo/admin/src/common/brevoModuleConfig/brevoContactsPageAttributesConfig.ts new file mode 100644 index 00000000..59edabbc --- /dev/null +++ b/demo/admin/src/common/brevoModuleConfig/brevoContactsPageAttributesConfig.ts @@ -0,0 +1,50 @@ +import { GridColDef } from "@mui/x-data-grid"; +import { DocumentNode } from "graphql"; +import gql from "graphql-tag"; +import { IntlShape } from "react-intl"; + +import { GQLBrevoContactAttributesFragmentFragment } from "./brevoContactsPageAttributesConfig.generated"; + +const attributesFragment = gql` + fragment BrevoContactAttributesFragment on BrevoContact { + attributes { + LASTNAME + FIRSTNAME + } + } +`; + +export const getBrevoContactConfig = ( + intl: IntlShape, +): { + additionalGridFields: GridColDef[]; + additionalAttributesFragment: { + fragment: DocumentNode; + name: string; + }; +} => { + return { + additionalGridFields: [ + { + field: "attributes.firstName", + headerName: intl.formatMessage({ id: "brevoContact.firstName", defaultMessage: "First name" }), + filterable: false, + sortable: false, + width: 150, + renderCell: ({ row }) => row.attributes?.FIRSTNAME, + }, + { + field: "attributes.lastName", + headerName: intl.formatMessage({ id: "brevoContact.lastName", defaultMessage: "Last name" }), + filterable: false, + sortable: false, + width: 150, + renderCell: ({ row }) => row.attributes?.LASTNAME, + }, + ], + additionalAttributesFragment: { + fragment: attributesFragment, + name: "BrevoContactAttributesFragment", + }, + }; +}; diff --git a/packages/admin/src/brevoContacts/BrevoContactsGrid.tsx b/packages/admin/src/brevoContacts/BrevoContactsGrid.tsx index 7ab7f0da..df8fe670 100644 --- a/packages/admin/src/brevoContacts/BrevoContactsGrid.tsx +++ b/packages/admin/src/brevoContacts/BrevoContactsGrid.tsx @@ -1,4 +1,4 @@ -import { gql, useApolloClient, useQuery } from "@apollo/client"; +import { DocumentNode, gql, useApolloClient, useQuery } from "@apollo/client"; import { MainContent, messages, @@ -39,18 +39,6 @@ const brevoContactsFragment = gql` } `; -const brevoContactsQuery = gql` - query BrevoContactsGrid($offset: Int, $limit: Int, $email: String, $scope: EmailCampaignContentScopeInput!) { - brevoContacts(offset: $offset, limit: $limit, email: $email, scope: $scope) { - nodes { - ...BrevoContactsList - } - totalCount - } - } - ${brevoContactsFragment} -`; - const deleteBrevoContactMutation = gql` mutation DeleteBrevoContact($id: Int!) { deleteBrevoContact(id: $id) @@ -81,7 +69,28 @@ function BrevoContactsGridToolbar({ intl }: { intl: IntlShape }) { ); } -export function BrevoContactsGrid({ scope }: { scope: ContentScopeInterface }): React.ReactElement { +export function BrevoContactsGrid({ + scope, + additionalAttributesFragment, + additionalGridFields = [], +}: { + scope: ContentScopeInterface; + additionalAttributesFragment?: { name: string; fragment: DocumentNode }; + additionalGridFields?: GridColDef[]; +}): React.ReactElement { + const brevoContactsQuery = gql` + query BrevoContactsGrid($offset: Int, $limit: Int, $email: String, $scope: EmailCampaignContentScopeInput!) { + brevoContacts(offset: $offset, limit: $limit, email: $email, scope: $scope) { + nodes { + ...BrevoContactsList + ${additionalAttributesFragment ? "...".concat(additionalAttributesFragment?.name) : ""} + } + totalCount + } + } + ${brevoContactsFragment} + ${additionalAttributesFragment?.fragment ?? ""} + `; const client = useApolloClient(); const intl = useIntl(); const dataGridProps = { ...useDataGridRemote(), ...usePersistentColumnState("BrevoContactsGrid") }; @@ -119,7 +128,7 @@ export function BrevoContactsGrid({ scope }: { scope: ContentScopeInterface }): sortable: false, width: 150, }, - // TODO: add configurable contact attributes + ...additionalGridFields, { field: "actions", headerName: "", diff --git a/packages/admin/src/brevoContacts/BrevoContactsPage.tsx b/packages/admin/src/brevoContacts/BrevoContactsPage.tsx index 5c34e4b6..6c7eed13 100644 --- a/packages/admin/src/brevoContacts/BrevoContactsPage.tsx +++ b/packages/admin/src/brevoContacts/BrevoContactsPage.tsx @@ -1,13 +1,17 @@ import { useContentScope } from "@comet/cms-admin"; +import { GridColDef } from "@mui/x-data-grid"; +import { DocumentNode } from "graphql"; import * as React from "react"; import { BrevoContactsGrid } from "./BrevoContactsGrid"; interface CreateContactsPageOptions { scopeParts: string[]; + additionalAttributesFragment?: { name: string; fragment: DocumentNode }; + additionalGridFields?: GridColDef[]; } -function createBrevoContactsPage({ scopeParts }: CreateContactsPageOptions) { +function createBrevoContactsPage({ scopeParts, additionalAttributesFragment, additionalGridFields }: CreateContactsPageOptions) { function BrevoContactsPage(): JSX.Element { const { scope: completeScope } = useContentScope(); @@ -16,7 +20,13 @@ function createBrevoContactsPage({ scopeParts }: CreateContactsPageOptions) { return acc; }, {} as { [key: string]: unknown }); - return ; + return ( + + ); } return BrevoContactsPage;