From 795854a27abccace4d54586ff70303fad16f4be4 Mon Sep 17 00:00:00 2001 From: Giacomo Baggio Date: Mon, 9 Aug 2021 09:07:52 +0200 Subject: [PATCH 1/2] Create multi feature block model --- backend/api/pages/models/pages.settings.json | 5 +- .../blocks/feature-description.json | 14 + .../blocks/multi-feature-block.json | 35 ++ frontend/@types/index.d.ts | 7 + .../pageBlocks/CardListSectionBlock.tsx | 2 +- .../pageBlocks/FeatureListSectionBlock.tsx | 4 +- .../pageBlocks/MultiFeatureSectionBlock.tsx | 12 + frontend/features/pageBlocks/index.ts | 1 - frontend/features/pageBlocks/types.ts | 7 - frontend/features/sectionBlocks/CardBlock.tsx | 3 +- .../features/sectionBlocks/FeatureBlock.tsx | 2 +- .../sectionBlocks/MultiFeatureContainer.tsx | 51 +++ .../MultiFeatureDescritpionBlock.tsx | 40 ++ frontend/features/sectionBlocks/index.ts | 1 - frontend/features/sectionBlocks/types.ts | 7 - frontend/graphql.schema.json | 387 +++++++++++++++++- frontend/graphql/GetPages.graphql | 17 +- frontend/graphql/generated.ts | 95 ++++- frontend/pages/[[...slug]].tsx | 4 +- frontend/tsconfig.json | 3 +- 20 files changed, 645 insertions(+), 52 deletions(-) create mode 100644 backend/components/blocks/feature-description.json create mode 100644 backend/components/blocks/multi-feature-block.json create mode 100644 frontend/features/pageBlocks/MultiFeatureSectionBlock.tsx delete mode 100644 frontend/features/pageBlocks/types.ts create mode 100644 frontend/features/sectionBlocks/MultiFeatureContainer.tsx create mode 100644 frontend/features/sectionBlocks/MultiFeatureDescritpionBlock.tsx delete mode 100644 frontend/features/sectionBlocks/types.ts diff --git a/backend/api/pages/models/pages.settings.json b/backend/api/pages/models/pages.settings.json index cda14565..69366fb9 100644 --- a/backend/api/pages/models/pages.settings.json +++ b/backend/api/pages/models/pages.settings.json @@ -16,7 +16,7 @@ } }, "attributes": { - "pageName": { + "title": { "type": "string", "required": true, "unique": true, @@ -45,7 +45,8 @@ "components": [ "section.card-section", "section.hero-section", - "section.single-feature-section" + "section.single-feature-section", + "blocks.multi-feature-block" ] } } diff --git a/backend/components/blocks/feature-description.json b/backend/components/blocks/feature-description.json new file mode 100644 index 00000000..b4e47386 --- /dev/null +++ b/backend/components/blocks/feature-description.json @@ -0,0 +1,14 @@ +{ + "collectionName": "components_blocks_feature_descriptions", + "info": { + "name": "featureDescription", + "icon": "angle-double-right", + "description": "" + }, + "options": {}, + "attributes": { + "descritpion": { + "type": "string" + } + } +} diff --git a/backend/components/blocks/multi-feature-block.json b/backend/components/blocks/multi-feature-block.json new file mode 100644 index 00000000..dc3fbd13 --- /dev/null +++ b/backend/components/blocks/multi-feature-block.json @@ -0,0 +1,35 @@ +{ + "collectionName": "components_blocks_multi_feature_blocks", + "info": { + "name": "multiFeatureBlock", + "icon": "arrow-left", + "description": "" + }, + "options": {}, + "attributes": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "image": { + "model": "file", + "via": "related", + "allowedTypes": [ + "images" + ], + "plugin": "upload", + "required": false, + "pluginOptions": {} + }, + "imageColor": { + "type": "string" + }, + "blocks": { + "type": "component", + "repeatable": true, + "component": "blocks.feature-description" + } + } +} diff --git a/frontend/@types/index.d.ts b/frontend/@types/index.d.ts index 91824b35..e6ef8d9f 100644 --- a/frontend/@types/index.d.ts +++ b/frontend/@types/index.d.ts @@ -1 +1,8 @@ declare type Nullable = T | null; +export type BlockTemplateData = { + _template: TemplateName; +} & Type; + +export interface BlockItemProps { + isPreview: boolean; +} diff --git a/frontend/features/pageBlocks/CardListSectionBlock.tsx b/frontend/features/pageBlocks/CardListSectionBlock.tsx index ce327e3d..ed1e920c 100644 --- a/frontend/features/pageBlocks/CardListSectionBlock.tsx +++ b/frontend/features/pageBlocks/CardListSectionBlock.tsx @@ -10,7 +10,7 @@ import { InlineTextarea, } from "react-tinacms-inline"; import { useCMS } from "tinacms"; -import { BlockTemplateData } from "./types"; +import { BlockTemplateData, Nullable } from "@types"; export type CardSectionBlockData = BlockTemplateData< "cardSection", diff --git a/frontend/features/pageBlocks/FeatureListSectionBlock.tsx b/frontend/features/pageBlocks/FeatureListSectionBlock.tsx index 0d35acba..ef11f3ca 100644 --- a/frontend/features/pageBlocks/FeatureListSectionBlock.tsx +++ b/frontend/features/pageBlocks/FeatureListSectionBlock.tsx @@ -1,6 +1,7 @@ import { Box, chakra, Flex } from "@chakra-ui/react"; -import { BlockItemProps, FEATURE_BLOCK } from "@features/sectionBlocks"; +import { FEATURE_BLOCK } from "@features/sectionBlocks"; import { FeatureBlockData } from "@features/sectionBlocks/FeatureBlock"; +import { BlockItemProps, BlockTemplateData, Nullable } from "@types"; import React from "react"; import { Block, @@ -9,7 +10,6 @@ import { InlineBlocks, InlineTextarea, } from "react-tinacms-inline"; -import { BlockTemplateData } from "./types"; export type FeatureListSectionBlockData = BlockTemplateData< "featureSection", diff --git a/frontend/features/pageBlocks/MultiFeatureSectionBlock.tsx b/frontend/features/pageBlocks/MultiFeatureSectionBlock.tsx new file mode 100644 index 00000000..ca6d56af --- /dev/null +++ b/frontend/features/pageBlocks/MultiFeatureSectionBlock.tsx @@ -0,0 +1,12 @@ +import { BlockTemplateData, Nullable } from "@types"; + +export type MultiFeatureSectionBlockData = BlockTemplateData< + "multifeaturesection", + { + id: string; + sectionTitle: Nullable; + title: Nullable; + subTitle: Nullable; + areBubblesActive: Nullable; + } +>; diff --git a/frontend/features/pageBlocks/index.ts b/frontend/features/pageBlocks/index.ts index 68904829..5e4bce84 100644 --- a/frontend/features/pageBlocks/index.ts +++ b/frontend/features/pageBlocks/index.ts @@ -1,4 +1,3 @@ -export * from "./types"; import { heroSectionBlock, HeroSectionBlockData } from "./HeroSectionBlock"; import { featureSectionBlock, diff --git a/frontend/features/pageBlocks/types.ts b/frontend/features/pageBlocks/types.ts deleted file mode 100644 index 86026ec9..00000000 --- a/frontend/features/pageBlocks/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type BlockTemplateData = { - _template: TemplateName; -} & Type; - -export interface BlockItemProps { - isPreview: boolean; -} diff --git a/frontend/features/sectionBlocks/CardBlock.tsx b/frontend/features/sectionBlocks/CardBlock.tsx index d78ea1fc..df522eb4 100644 --- a/frontend/features/sectionBlocks/CardBlock.tsx +++ b/frontend/features/sectionBlocks/CardBlock.tsx @@ -1,5 +1,6 @@ import { Box, chakra, Flex, Img } from "@chakra-ui/react"; import { STRAPI_URL } from "@config/env"; +import { Nullable } from "@types"; import React from "react"; import { Block, @@ -9,7 +10,7 @@ import { InlineTextarea, } from "react-tinacms-inline"; import { useCMS } from "tinacms"; -import { BlockTemplateData } from "./types"; +import { BlockTemplateData } from "@types"; export type CardBlockData = BlockTemplateData< "ComponentBlocksCard", diff --git a/frontend/features/sectionBlocks/FeatureBlock.tsx b/frontend/features/sectionBlocks/FeatureBlock.tsx index 538e7df7..960316ab 100644 --- a/frontend/features/sectionBlocks/FeatureBlock.tsx +++ b/frontend/features/sectionBlocks/FeatureBlock.tsx @@ -10,7 +10,7 @@ import { InlineTextarea, } from "react-tinacms-inline"; import { useCMS } from "tinacms"; -import { BlockTemplateData } from "./types"; +import { BlockTemplateData, Nullable } from "@types"; export type FeatureBlockData = BlockTemplateData< "ComponentBlocksSingleFeature", diff --git a/frontend/features/sectionBlocks/MultiFeatureContainer.tsx b/frontend/features/sectionBlocks/MultiFeatureContainer.tsx new file mode 100644 index 00000000..f96755af --- /dev/null +++ b/frontend/features/sectionBlocks/MultiFeatureContainer.tsx @@ -0,0 +1,51 @@ +import { Box } from "@chakra-ui/react"; +import { BlockTemplateData, Nullable } from "@types"; +import React from "react"; +import { + Block, + BlockComponentProps, + BlocksControls, +} from "react-tinacms-inline"; +import { MultiFeatureDescriptionBlockData } from "./MultiFeatureDescritpionBlock"; + +export type MultiFeatureContainerBlockData = BlockTemplateData< + "featureSection", + { + id: string; + title: Nullable; + description: Nullable; + image: { + id: string; + url: Nullable; + alternativeText: Nullable; + }; + blocks: MultiFeatureDescriptionBlockData[]; + } +>; + +export function MultiFeatureContainerBlock() { + return ; +} + +function BlockComponent({ index, data }: BlockComponentProps) { + return ( + + + + ); +} + +export const multiFeatureContainerBlock: Block = { + Component: BlockComponent, + template: { + label: "Multi-feature container", + defaultItem: { + title: "Default title", + description: "Default description", + image: { + id: "51", + }, + }, + fields: [], + }, +}; diff --git a/frontend/features/sectionBlocks/MultiFeatureDescritpionBlock.tsx b/frontend/features/sectionBlocks/MultiFeatureDescritpionBlock.tsx new file mode 100644 index 00000000..56690ed6 --- /dev/null +++ b/frontend/features/sectionBlocks/MultiFeatureDescritpionBlock.tsx @@ -0,0 +1,40 @@ +import { Box } from "@chakra-ui/react"; +import { BlockTemplateData, Nullable } from "@types"; +import React from "react"; +import { + BlockComponentProps, + BlocksControls, + Block, +} from "react-tinacms-inline"; + +export type MultiFeatureDescriptionBlockData = BlockTemplateData< + "multifeaturedescription", + { + id: string; + description: Nullable; + imageColor: Nullable; + } +>; + +export function MultiFeatureDescriptionBlock() { + return ; +} + +function BlockComponent({ index, data }: BlockComponentProps) { + return ( + + + + ); +} + +export const multiFeatureDescriptionBlock: Block = { + Component: BlockComponent, + template: { + label: "Feature description", + defaultItem: { + description: "Default description", + }, + fields: [], + }, +}; diff --git a/frontend/features/sectionBlocks/index.ts b/frontend/features/sectionBlocks/index.ts index 3717d2b5..a3dbc1d2 100644 --- a/frontend/features/sectionBlocks/index.ts +++ b/frontend/features/sectionBlocks/index.ts @@ -1,4 +1,3 @@ -export * from "./types"; import { cardBlock, CardBlockData } from "./CardBlock"; import { featureBlock, FeatureBlockData } from "./FeatureBlock"; diff --git a/frontend/features/sectionBlocks/types.ts b/frontend/features/sectionBlocks/types.ts deleted file mode 100644 index 86026ec9..00000000 --- a/frontend/features/sectionBlocks/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type BlockTemplateData = { - _template: TemplateName; -} & Type; - -export interface BlockItemProps { - isPreview: boolean; -} diff --git a/frontend/graphql.schema.json b/frontend/graphql.schema.json index 988f1686..a35a31e6 100644 --- a/frontend/graphql.schema.json +++ b/frontend/graphql.schema.json @@ -249,6 +249,234 @@ "enumValues": null, "possibleTypes": null }, + { + "kind": "OBJECT", + "name": "ComponentBlocksFeatureDescription", + "description": null, + "fields": [ + { + "name": "id", + "description": null, + "args": [], + "type": { + "kind": "NON_NULL", + "name": null, + "ofType": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + } + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "descritpion", + "description": null, + "args": [], + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + } + ], + "inputFields": null, + "interfaces": [], + "enumValues": null, + "possibleTypes": null + }, + { + "kind": "INPUT_OBJECT", + "name": "ComponentBlocksFeatureDescriptionInput", + "description": null, + "fields": null, + "inputFields": [ + { + "name": "descritpion", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + } + ], + "interfaces": null, + "enumValues": null, + "possibleTypes": null + }, + { + "kind": "OBJECT", + "name": "ComponentBlocksMultiFeatureBlock", + "description": null, + "fields": [ + { + "name": "id", + "description": null, + "args": [], + "type": { + "kind": "NON_NULL", + "name": null, + "ofType": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + } + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "title", + "description": null, + "args": [], + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "description", + "description": null, + "args": [], + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "image", + "description": null, + "args": [], + "type": { + "kind": "OBJECT", + "name": "UploadFile", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "imageColor", + "description": null, + "args": [], + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "blocks", + "description": null, + "args": [], + "type": { + "kind": "LIST", + "name": null, + "ofType": { + "kind": "OBJECT", + "name": "ComponentBlocksFeatureDescription", + "ofType": null + } + }, + "isDeprecated": false, + "deprecationReason": null + } + ], + "inputFields": null, + "interfaces": [], + "enumValues": null, + "possibleTypes": null + }, + { + "kind": "INPUT_OBJECT", + "name": "ComponentBlocksMultiFeatureBlockInput", + "description": null, + "fields": null, + "inputFields": [ + { + "name": "title", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "description", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "image", + "description": null, + "type": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "imageColor", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "blocks", + "description": null, + "type": { + "kind": "LIST", + "name": null, + "ofType": { + "kind": "INPUT_OBJECT", + "name": "ComponentBlocksFeatureDescriptionInput", + "ofType": null + } + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + } + ], + "interfaces": null, + "enumValues": null, + "possibleTypes": null + }, { "kind": "OBJECT", "name": "ComponentBlocksSingleFeature", @@ -1542,7 +1770,7 @@ }, { "kind": "OBJECT", - "name": "PagesConnectionPageName", + "name": "PagesConnectionTitle", "ofType": null }, { @@ -1855,6 +2083,16 @@ "name": "ComponentBlocksCard", "ofType": null }, + { + "kind": "OBJECT", + "name": "ComponentBlocksFeatureDescription", + "ofType": null + }, + { + "kind": "OBJECT", + "name": "ComponentBlocksMultiFeatureBlock", + "ofType": null + }, { "kind": "OBJECT", "name": "ComponentBlocksSingleFeature", @@ -2604,7 +2842,7 @@ "fields": null, "inputFields": [ { - "name": "pageName", + "name": "title", "description": null, "type": { "kind": "NON_NULL", @@ -2778,7 +3016,7 @@ "deprecationReason": null }, { - "name": "pageName", + "name": "title", "description": null, "args": [], "type": { @@ -3113,7 +3351,7 @@ }, { "kind": "OBJECT", - "name": "PagesConnectionPageName", + "name": "PagesConnectionPath", "description": null, "fields": [ { @@ -3148,7 +3386,7 @@ }, { "kind": "OBJECT", - "name": "PagesConnectionPath", + "name": "PagesConnectionPublished_at", "description": null, "fields": [ { @@ -3157,7 +3395,7 @@ "args": [], "type": { "kind": "SCALAR", - "name": "String", + "name": "DateTime", "ofType": null }, "isDeprecated": false, @@ -3183,7 +3421,7 @@ }, { "kind": "OBJECT", - "name": "PagesConnectionPublished_at", + "name": "PagesConnectionTitle", "description": null, "fields": [ { @@ -3192,7 +3430,7 @@ "args": [], "type": { "kind": "SCALAR", - "name": "DateTime", + "name": "String", "ofType": null }, "isDeprecated": false, @@ -3305,7 +3543,7 @@ "deprecationReason": null }, { - "name": "pageName", + "name": "title", "description": null, "args": [], "type": { @@ -3313,7 +3551,7 @@ "name": null, "ofType": { "kind": "OBJECT", - "name": "PagesConnectionPageName", + "name": "PagesConnectionTitle", "ofType": null } }, @@ -3397,6 +3635,11 @@ "kind": "OBJECT", "name": "ComponentSectionSingleFeatureSection", "ofType": null + }, + { + "kind": "OBJECT", + "name": "ComponentBlocksMultiFeatureBlock", + "ofType": null } ] }, @@ -8002,6 +8245,128 @@ "enumValues": null, "possibleTypes": null }, + { + "kind": "INPUT_OBJECT", + "name": "editComponentBlocksFeatureDescriptionInput", + "description": null, + "fields": null, + "inputFields": [ + { + "name": "id", + "description": null, + "type": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "descritpion", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + } + ], + "interfaces": null, + "enumValues": null, + "possibleTypes": null + }, + { + "kind": "INPUT_OBJECT", + "name": "editComponentBlocksMultiFeatureBlockInput", + "description": null, + "fields": null, + "inputFields": [ + { + "name": "id", + "description": null, + "type": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "title", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "description", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "image", + "description": null, + "type": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "imageColor", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "blocks", + "description": null, + "type": { + "kind": "LIST", + "name": null, + "ofType": { + "kind": "INPUT_OBJECT", + "name": "editComponentBlocksFeatureDescriptionInput", + "ofType": null + } + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + } + ], + "interfaces": null, + "enumValues": null, + "possibleTypes": null + }, { "kind": "INPUT_OBJECT", "name": "editComponentBlocksSingleFeatureInput", @@ -8649,7 +9014,7 @@ "fields": null, "inputFields": [ { - "name": "pageName", + "name": "title", "description": null, "type": { "kind": "SCALAR", diff --git a/frontend/graphql/GetPages.graphql b/frontend/graphql/GetPages.graphql index f8400ec9..1ae2852f 100644 --- a/frontend/graphql/GetPages.graphql +++ b/frontend/graphql/GetPages.graphql @@ -2,7 +2,7 @@ query GetPages($where: JSON, $locale: String) { pages(where: $where, locale: $locale) { id path - pageName + title locale __typename sections { @@ -53,6 +53,21 @@ query GetPages($where: JSON, $locale: String) { url } } + ... on ComponentBlocksMultiFeatureBlock { + id + title + description + image { + id + url + alternativeText + } + imageColor + blocks { + id + descritpion + } + } } } } diff --git a/frontend/graphql/generated.ts b/frontend/graphql/generated.ts index 03b39896..39c1d9dc 100644 --- a/frontend/graphql/generated.ts +++ b/frontend/graphql/generated.ts @@ -49,6 +49,34 @@ export type ComponentBlocksCardInput = { url?: Maybe; }; +export type ComponentBlocksFeatureDescription = { + __typename?: 'ComponentBlocksFeatureDescription'; + id: Scalars['ID']; + descritpion?: Maybe; +}; + +export type ComponentBlocksFeatureDescriptionInput = { + descritpion?: Maybe; +}; + +export type ComponentBlocksMultiFeatureBlock = { + __typename?: 'ComponentBlocksMultiFeatureBlock'; + id: Scalars['ID']; + title?: Maybe; + description?: Maybe; + image?: Maybe; + imageColor?: Maybe; + blocks?: Maybe>>; +}; + +export type ComponentBlocksMultiFeatureBlockInput = { + title?: Maybe; + description?: Maybe; + image?: Maybe; + imageColor?: Maybe; + blocks?: Maybe>>; +}; + export type ComponentBlocksSingleFeature = { __typename?: 'ComponentBlocksSingleFeature'; id: Scalars['ID']; @@ -183,7 +211,7 @@ export type LocaleInput = { }; -export type Morph = UsersPermissionsMe | UsersPermissionsMeRole | UsersPermissionsLoginPayload | UserPermissionsPasswordPayload | Pages | PagesConnection | PagesAggregator | PagesGroupBy | PagesConnectionId | PagesConnectionCreated_At | PagesConnectionUpdated_At | PagesConnectionPageName | PagesConnectionPath | PagesConnectionLocale | PagesConnectionPublished_At | CreatePagePayload | UpdatePagePayload | DeletePagePayload | I18NLocale | UploadFile | UploadFileConnection | UploadFileAggregator | UploadFileAggregatorSum | UploadFileAggregatorAvg | UploadFileAggregatorMin | UploadFileAggregatorMax | UploadFileGroupBy | UploadFileConnectionId | UploadFileConnectionCreated_At | UploadFileConnectionUpdated_At | UploadFileConnectionName | UploadFileConnectionAlternativeText | UploadFileConnectionCaption | UploadFileConnectionWidth | UploadFileConnectionHeight | UploadFileConnectionFormats | UploadFileConnectionHash | UploadFileConnectionExt | UploadFileConnectionMime | UploadFileConnectionSize | UploadFileConnectionUrl | UploadFileConnectionPreviewUrl | UploadFileConnectionProvider | UploadFileConnectionProvider_Metadata | DeleteFilePayload | UsersPermissionsPermission | UsersPermissionsRole | UsersPermissionsRoleConnection | UsersPermissionsRoleAggregator | UsersPermissionsRoleGroupBy | UsersPermissionsRoleConnectionId | UsersPermissionsRoleConnectionName | UsersPermissionsRoleConnectionDescription | UsersPermissionsRoleConnectionType | CreateRolePayload | UpdateRolePayload | DeleteRolePayload | UsersPermissionsUser | UsersPermissionsUserConnection | UsersPermissionsUserAggregator | UsersPermissionsUserGroupBy | UsersPermissionsUserConnectionId | UsersPermissionsUserConnectionCreated_At | UsersPermissionsUserConnectionUpdated_At | UsersPermissionsUserConnectionUsername | UsersPermissionsUserConnectionEmail | UsersPermissionsUserConnectionProvider | UsersPermissionsUserConnectionConfirmed | UsersPermissionsUserConnectionBlocked | UsersPermissionsUserConnectionRole | CreateUserPayload | UpdateUserPayload | DeleteUserPayload | ComponentBlocksCard | ComponentBlocksSingleFeature | ComponentMenuLink | ComponentMenuPageLink | ComponentSectionCardSection | ComponentSectionHeroSection | ComponentSectionSingleFeatureSection; +export type Morph = UsersPermissionsMe | UsersPermissionsMeRole | UsersPermissionsLoginPayload | UserPermissionsPasswordPayload | Pages | PagesConnection | PagesAggregator | PagesGroupBy | PagesConnectionId | PagesConnectionCreated_At | PagesConnectionUpdated_At | PagesConnectionTitle | PagesConnectionPath | PagesConnectionLocale | PagesConnectionPublished_At | CreatePagePayload | UpdatePagePayload | DeletePagePayload | I18NLocale | UploadFile | UploadFileConnection | UploadFileAggregator | UploadFileAggregatorSum | UploadFileAggregatorAvg | UploadFileAggregatorMin | UploadFileAggregatorMax | UploadFileGroupBy | UploadFileConnectionId | UploadFileConnectionCreated_At | UploadFileConnectionUpdated_At | UploadFileConnectionName | UploadFileConnectionAlternativeText | UploadFileConnectionCaption | UploadFileConnectionWidth | UploadFileConnectionHeight | UploadFileConnectionFormats | UploadFileConnectionHash | UploadFileConnectionExt | UploadFileConnectionMime | UploadFileConnectionSize | UploadFileConnectionUrl | UploadFileConnectionPreviewUrl | UploadFileConnectionProvider | UploadFileConnectionProvider_Metadata | DeleteFilePayload | UsersPermissionsPermission | UsersPermissionsRole | UsersPermissionsRoleConnection | UsersPermissionsRoleAggregator | UsersPermissionsRoleGroupBy | UsersPermissionsRoleConnectionId | UsersPermissionsRoleConnectionName | UsersPermissionsRoleConnectionDescription | UsersPermissionsRoleConnectionType | CreateRolePayload | UpdateRolePayload | DeleteRolePayload | UsersPermissionsUser | UsersPermissionsUserConnection | UsersPermissionsUserAggregator | UsersPermissionsUserGroupBy | UsersPermissionsUserConnectionId | UsersPermissionsUserConnectionCreated_At | UsersPermissionsUserConnectionUpdated_At | UsersPermissionsUserConnectionUsername | UsersPermissionsUserConnectionEmail | UsersPermissionsUserConnectionProvider | UsersPermissionsUserConnectionConfirmed | UsersPermissionsUserConnectionBlocked | UsersPermissionsUserConnectionRole | CreateUserPayload | UpdateUserPayload | DeleteUserPayload | ComponentBlocksCard | ComponentBlocksFeatureDescription | ComponentBlocksMultiFeatureBlock | ComponentBlocksSingleFeature | ComponentMenuLink | ComponentMenuPageLink | ComponentSectionCardSection | ComponentSectionHeroSection | ComponentSectionSingleFeatureSection; export type Mutation = { __typename?: 'Mutation'; @@ -323,7 +351,7 @@ export type MutationEmailConfirmationArgs = { }; export type PageInput = { - pageName: Scalars['String']; + title: Scalars['String']; path: Scalars['String']; sections?: Maybe>; localizations?: Maybe>>; @@ -338,7 +366,7 @@ export type Pages = { id: Scalars['ID']; created_at: Scalars['DateTime']; updated_at: Scalars['DateTime']; - pageName: Scalars['String']; + title: Scalars['String']; path: Scalars['String']; sections?: Maybe>>; locale?: Maybe; @@ -385,12 +413,6 @@ export type PagesConnectionLocale = { connection?: Maybe; }; -export type PagesConnectionPageName = { - __typename?: 'PagesConnectionPageName'; - key?: Maybe; - connection?: Maybe; -}; - export type PagesConnectionPath = { __typename?: 'PagesConnectionPath'; key?: Maybe; @@ -403,6 +425,12 @@ export type PagesConnectionPublished_At = { connection?: Maybe; }; +export type PagesConnectionTitle = { + __typename?: 'PagesConnectionTitle'; + key?: Maybe; + connection?: Maybe; +}; + export type PagesConnectionUpdated_At = { __typename?: 'PagesConnectionUpdated_at'; key?: Maybe; @@ -414,13 +442,13 @@ export type PagesGroupBy = { id?: Maybe>>; created_at?: Maybe>>; updated_at?: Maybe>>; - pageName?: Maybe>>; + title?: Maybe>>; path?: Maybe>>; locale?: Maybe>>; published_at?: Maybe>>; }; -export type PagesSectionsDynamicZone = ComponentSectionCardSection | ComponentSectionHeroSection | ComponentSectionSingleFeatureSection; +export type PagesSectionsDynamicZone = ComponentSectionCardSection | ComponentSectionHeroSection | ComponentSectionSingleFeatureSection | ComponentBlocksMultiFeatureBlock; export enum PublicationState { @@ -1044,6 +1072,20 @@ export type EditComponentBlocksCardInput = { url?: Maybe; }; +export type EditComponentBlocksFeatureDescriptionInput = { + id?: Maybe; + descritpion?: Maybe; +}; + +export type EditComponentBlocksMultiFeatureBlockInput = { + id?: Maybe; + title?: Maybe; + description?: Maybe; + image?: Maybe; + imageColor?: Maybe; + blocks?: Maybe>>; +}; + export type EditComponentBlocksSingleFeatureInput = { id?: Maybe; description?: Maybe; @@ -1114,7 +1156,7 @@ export type EditLocaleInput = { }; export type EditPageInput = { - pageName?: Maybe; + title?: Maybe; path?: Maybe; sections?: Maybe>; localizations?: Maybe>>; @@ -1188,7 +1230,7 @@ export type GetPagesQuery = ( { __typename?: 'Query' } & { pages?: Maybe + & Pick & { sections?: Maybe @@ -1214,6 +1256,16 @@ export type GetPagesQuery = ( & Pick )> } )>>> } + ) | ( + { __typename?: 'ComponentBlocksMultiFeatureBlock' } + & Pick + & { image?: Maybe<( + { __typename?: 'UploadFile' } + & Pick + )>, blocks?: Maybe + )>>> } )>>> } )>>> } ); @@ -1256,7 +1308,7 @@ export const GetPages = ` pages(where: $where, locale: $locale) { id path - pageName + title locale __typename sections { @@ -1306,6 +1358,21 @@ export const GetPages = ` url } } + ... on ComponentBlocksMultiFeatureBlock { + id + title + description + image { + id + url + alternativeText + } + imageColor + blocks { + id + descritpion + } + } } } } diff --git a/frontend/pages/[[...slug]].tsx b/frontend/pages/[[...slug]].tsx index 52738538..4d2423e6 100644 --- a/frontend/pages/[[...slug]].tsx +++ b/frontend/pages/[[...slug]].tsx @@ -11,13 +11,13 @@ import { PageData, usePagePlugin } from "@features/plugins/usePagePlugin"; import { DefaultLayout } from "@layouts/defaultLayout"; import { chakra, useColorMode } from "@chakra-ui/react"; import { - BlockItemProps, PageSectionBlockData, PAGE_SECTION_BLOCKS, } from "@features/pageBlocks"; import { assertNever, filterListNullableItems } from "utils"; import { FeatureBlockData } from "@features/sectionBlocks/FeatureBlock"; import { CardBlockData } from "@features/sectionBlocks/CardBlock"; +import { BlockItemProps } from "@types"; interface DynamicPageProps { path: string[]; @@ -249,7 +249,7 @@ function getPageData( return { id: page.id, - title: page.pageName, + title: page.title, sections: sections, path: page.path || undefined, }; diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 4c4b461b..e564e89d 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -28,7 +28,8 @@ "@features/*": ["features/*"], "@assets/*": ["assets/*"], "@theme": ["theme"], - "@utils": ["utils"] + "@utils": ["utils"], + "@types": ["@types"] } }, "exclude": ["node_modules"], From c297e1d8868f3e989953232ff4a5db33efaac36e Mon Sep 17 00:00:00 2001 From: Giacomo Baggio Date: Mon, 9 Aug 2021 14:33:39 +0200 Subject: [PATCH 2/2] Add multi feature blocks --- .../blocks/feature-description.json | 2 +- .../blocks/multi-feature-block.json | 11 +- frontend/components/CheckIcon.tsx | 20 + frontend/features/page/index.ts | 8 +- .../blocks/MultiFeatureBlock.tsx | 233 ++++++++++ .../blocks/MultiFeatureContainer.tsx | 51 --- .../blocks/MultiFeatureDescritpionBlock.tsx | 48 ++- frontend/features/page/sections/index.ts | 14 +- .../pageBlocks/MultiFeatureSectionBlock.tsx | 12 - frontend/graphql.schema.json | 401 ++++++++++++++++++ frontend/graphql/GetPages.graphql | 23 +- frontend/graphql/generated.ts | 76 +++- frontend/pages/[[...slug]].tsx | 34 ++ frontend/plugins/usePagePlugin.ts | 30 +- 14 files changed, 872 insertions(+), 91 deletions(-) create mode 100644 frontend/components/CheckIcon.tsx create mode 100644 frontend/features/page/sections/CardListSection/blocks/MultiFeatureBlock.tsx delete mode 100644 frontend/features/page/sections/CardListSection/blocks/MultiFeatureContainer.tsx delete mode 100644 frontend/features/pageBlocks/MultiFeatureSectionBlock.tsx diff --git a/backend/components/blocks/feature-description.json b/backend/components/blocks/feature-description.json index b4e47386..d00cff60 100644 --- a/backend/components/blocks/feature-description.json +++ b/backend/components/blocks/feature-description.json @@ -7,7 +7,7 @@ }, "options": {}, "attributes": { - "descritpion": { + "description": { "type": "string" } } diff --git a/backend/components/blocks/multi-feature-block.json b/backend/components/blocks/multi-feature-block.json index dc3fbd13..b1ab7378 100644 --- a/backend/components/blocks/multi-feature-block.json +++ b/backend/components/blocks/multi-feature-block.json @@ -10,9 +10,6 @@ "title": { "type": "string" }, - "description": { - "type": "string" - }, "image": { "model": "file", "via": "related", @@ -23,13 +20,19 @@ "required": false, "pluginOptions": {} }, - "imageColor": { + "bubbleColor": { "type": "string" }, "blocks": { "type": "component", "repeatable": true, "component": "blocks.feature-description" + }, + "description": { + "type": "richtext" + }, + "checkColor": { + "type": "string" } } } diff --git a/frontend/components/CheckIcon.tsx b/frontend/components/CheckIcon.tsx new file mode 100644 index 00000000..738512d0 --- /dev/null +++ b/frontend/components/CheckIcon.tsx @@ -0,0 +1,20 @@ +import { Icon, IconProps } from "@chakra-ui/react"; +import React from "react"; + +export default function CheckIcon({ color, ...otherProps }: IconProps) { + return ( + + + + ); +} diff --git a/frontend/features/page/index.ts b/frontend/features/page/index.ts index e64a73a9..cec66d6b 100644 --- a/frontend/features/page/index.ts +++ b/frontend/features/page/index.ts @@ -14,16 +14,22 @@ import { SimpleSectionBlockData, simpleSectionBlock, } from "./sections/SimpleSection/blocks/SimpleSectionBlock"; +import { + multiFeatureBlock, + MultiFeatureBlockData, +} from "./sections/CardListSection/blocks/MultiFeatureBlock"; export const SECTION_PAGE_BLOCKS = { heroSection: heroSectionBlock, featureListSection: featureSectionBlock, cardListSection: cardSectionBlock, simpleSection: simpleSectionBlock, + multiFeatureBlock: multiFeatureBlock, }; export type SectionBlockData = | HeroSectionBlockData | FeatureListSectionBlockData | CardSectionBlockData - | SimpleSectionBlockData; + | SimpleSectionBlockData + | MultiFeatureBlockData; diff --git a/frontend/features/page/sections/CardListSection/blocks/MultiFeatureBlock.tsx b/frontend/features/page/sections/CardListSection/blocks/MultiFeatureBlock.tsx new file mode 100644 index 00000000..d3377b61 --- /dev/null +++ b/frontend/features/page/sections/CardListSection/blocks/MultiFeatureBlock.tsx @@ -0,0 +1,233 @@ +import { Box, Flex, Img } from "@chakra-ui/react"; +import Bubble from "@components/Bubble"; +import { STRAPI_URL } from "@config/env"; +import React from "react"; +import { + Block, + BlockComponentProps, + BlocksControls, + InlineBlocks, + InlineImage, + InlineTextarea, +} from "react-tinacms-inline"; +import { useCMS } from "tinacms"; +import { MULTI_FEATURE_BLOCK } from "@features/page/sections"; +import { MultiFeatureDescriptionBlockData } from "./MultiFeatureDescritpionBlock"; +import { InlineWysiwyg } from "react-tinacms-editor"; + +export type MultiFeatureBlockData = BlockTemplateData< + "multiFeatureBlock", + { + id: string; + title: Nullable; + description: Nullable; + bubbleColor: Nullable; + checkColor: Nullable; + image: Nullable; + blocks: MultiFeatureDescriptionBlockData[]; + } +>; + +type MultiFeatureImageType = { + id: string; + url: Nullable; + alternativeText: Nullable; +}; + +interface MultiFeatureBlockProps { + bubbleColor: string; + image: Nullable; + index: number; + description: string; +} + +interface ImageRenderProps { + src: { + url?: string; + previewSrc?: string; + }; +} + +export function MultiFeatureBlock({ + bubbleColor, + image, + description, + index, +}: MultiFeatureBlockProps) { + const cms = useCMS(); + return ( + + + + + {cms.enabled ? ( + + "/"} + previewSrc={(imageSrc) => { + if (imageSrc === "") { + return "/images/default-image.png"; + } + + return imageSrc; + }} + parse={(media) => { + return media as any; + }}> + {(imageProps: any) => { + const { src } = imageProps as ImageRenderProps; + let imageSrc: string = src.previewSrc || src.url || ""; + if (imageSrc === "") { + imageSrc = "/images/default-image.png"; + } else if (!imageSrc.startsWith("http")) { + imageSrc = `${STRAPI_URL}${imageSrc}`; + } + return ( + + Cover image + + ); + }} + + + ) : ( + + + + )} + + + + + + + + {description} + + + + + + + + ); +} + +function BlockComponent({ index, data }: BlockComponentProps) { + return ( + + + + ); +} + +export const multiFeatureBlock: Block = { + Component: BlockComponent, + template: { + label: "Multi feature block", + defaultItem: { + title: "Default title", + description: "Default description", + blocks: [ + { + _template: "multiFeature", + description: "Default description", + }, + { + _template: "multiFeature", + description: "Default description", + }, + { + _template: "multiFeature", + description: "Default description", + }, + ], + }, + + fields: [ + { + name: "bubbleColor", + component: "color", + label: "Bubble color", + }, + { + name: "checkColor", + component: "color", + label: "Check icon color", + }, + ], + }, +}; diff --git a/frontend/features/page/sections/CardListSection/blocks/MultiFeatureContainer.tsx b/frontend/features/page/sections/CardListSection/blocks/MultiFeatureContainer.tsx deleted file mode 100644 index f96755af..00000000 --- a/frontend/features/page/sections/CardListSection/blocks/MultiFeatureContainer.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { Box } from "@chakra-ui/react"; -import { BlockTemplateData, Nullable } from "@types"; -import React from "react"; -import { - Block, - BlockComponentProps, - BlocksControls, -} from "react-tinacms-inline"; -import { MultiFeatureDescriptionBlockData } from "./MultiFeatureDescritpionBlock"; - -export type MultiFeatureContainerBlockData = BlockTemplateData< - "featureSection", - { - id: string; - title: Nullable; - description: Nullable; - image: { - id: string; - url: Nullable; - alternativeText: Nullable; - }; - blocks: MultiFeatureDescriptionBlockData[]; - } ->; - -export function MultiFeatureContainerBlock() { - return ; -} - -function BlockComponent({ index, data }: BlockComponentProps) { - return ( - - - - ); -} - -export const multiFeatureContainerBlock: Block = { - Component: BlockComponent, - template: { - label: "Multi-feature container", - defaultItem: { - title: "Default title", - description: "Default description", - image: { - id: "51", - }, - }, - fields: [], - }, -}; diff --git a/frontend/features/page/sections/CardListSection/blocks/MultiFeatureDescritpionBlock.tsx b/frontend/features/page/sections/CardListSection/blocks/MultiFeatureDescritpionBlock.tsx index 56690ed6..2c170fef 100644 --- a/frontend/features/page/sections/CardListSection/blocks/MultiFeatureDescritpionBlock.tsx +++ b/frontend/features/page/sections/CardListSection/blocks/MultiFeatureDescritpionBlock.tsx @@ -1,23 +1,59 @@ -import { Box } from "@chakra-ui/react"; -import { BlockTemplateData, Nullable } from "@types"; +import { Box, chakra, Flex } from "@chakra-ui/react"; +import CheckIcon from "@components/CheckIcon"; import React from "react"; import { BlockComponentProps, BlocksControls, Block, + InlineTextarea, } from "react-tinacms-inline"; export type MultiFeatureDescriptionBlockData = BlockTemplateData< - "multifeaturedescription", + "multiFeature", { id: string; description: Nullable; - imageColor: Nullable; + bubbleColor: Nullable; + checkColor: Nullable; } >; -export function MultiFeatureDescriptionBlock() { - return ; +interface MultiFeatureDescriptionBlockProps { + bubbleColor: string; + checkColor: string; +} + +const StyledInlineTextarea = chakra(InlineTextarea); + +export function MultiFeatureDescriptionBlock({ + bubbleColor, + checkColor, +}: MultiFeatureDescriptionBlockProps) { + return ( + + + + + + + + + ); } function BlockComponent({ index, data }: BlockComponentProps) { diff --git a/frontend/features/page/sections/index.ts b/frontend/features/page/sections/index.ts index 0ef064ff..f8e8e4e7 100644 --- a/frontend/features/page/sections/index.ts +++ b/frontend/features/page/sections/index.ts @@ -1,4 +1,9 @@ import { cardBlock, CardBlockData } from "./CardListSection/blocks/CardBlock"; + +import { + multiFeatureDescriptionBlock, + MultiFeatureDescriptionBlockData, +} from "./CardListSection/blocks/MultiFeatureDescritpionBlock"; import { featureBlock, FeatureBlockData, @@ -12,4 +17,11 @@ export const CARD_BLOCK = { card: cardBlock, }; -export type BlockData = CardBlockData | FeatureBlockData; +export const MULTI_FEATURE_BLOCK = { + multiFeature: multiFeatureDescriptionBlock, +}; + +export type BlockData = + | CardBlockData + | FeatureBlockData + | MultiFeatureDescriptionBlockData; diff --git a/frontend/features/pageBlocks/MultiFeatureSectionBlock.tsx b/frontend/features/pageBlocks/MultiFeatureSectionBlock.tsx deleted file mode 100644 index ca6d56af..00000000 --- a/frontend/features/pageBlocks/MultiFeatureSectionBlock.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { BlockTemplateData, Nullable } from "@types"; - -export type MultiFeatureSectionBlockData = BlockTemplateData< - "multifeaturesection", - { - id: string; - sectionTitle: Nullable; - title: Nullable; - subTitle: Nullable; - areBubblesActive: Nullable; - } ->; diff --git a/frontend/graphql.schema.json b/frontend/graphql.schema.json index 7aba0da8..38384b20 100644 --- a/frontend/graphql.schema.json +++ b/frontend/graphql.schema.json @@ -289,6 +289,258 @@ "enumValues": null, "possibleTypes": null }, + { + "kind": "OBJECT", + "name": "ComponentBlocksFeatureDescription", + "description": null, + "fields": [ + { + "name": "id", + "description": null, + "args": [], + "type": { + "kind": "NON_NULL", + "name": null, + "ofType": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + } + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "description", + "description": null, + "args": [], + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + } + ], + "inputFields": null, + "interfaces": [], + "enumValues": null, + "possibleTypes": null + }, + { + "kind": "INPUT_OBJECT", + "name": "ComponentBlocksFeatureDescriptionInput", + "description": null, + "fields": null, + "inputFields": [ + { + "name": "description", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + } + ], + "interfaces": null, + "enumValues": null, + "possibleTypes": null + }, + { + "kind": "OBJECT", + "name": "ComponentBlocksMultiFeatureBlock", + "description": null, + "fields": [ + { + "name": "id", + "description": null, + "args": [], + "type": { + "kind": "NON_NULL", + "name": null, + "ofType": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + } + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "title", + "description": null, + "args": [], + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "image", + "description": null, + "args": [], + "type": { + "kind": "OBJECT", + "name": "UploadFile", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "bubbleColor", + "description": null, + "args": [], + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "blocks", + "description": null, + "args": [], + "type": { + "kind": "LIST", + "name": null, + "ofType": { + "kind": "OBJECT", + "name": "ComponentBlocksFeatureDescription", + "ofType": null + } + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "description", + "description": null, + "args": [], + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "checkColor", + "description": null, + "args": [], + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + } + ], + "inputFields": null, + "interfaces": [], + "enumValues": null, + "possibleTypes": null + }, + { + "kind": "INPUT_OBJECT", + "name": "ComponentBlocksMultiFeatureBlockInput", + "description": null, + "fields": null, + "inputFields": [ + { + "name": "title", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "image", + "description": null, + "type": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "bubbleColor", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "blocks", + "description": null, + "type": { + "kind": "LIST", + "name": null, + "ofType": { + "kind": "INPUT_OBJECT", + "name": "ComponentBlocksFeatureDescriptionInput", + "ofType": null + } + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "description", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "checkColor", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + } + ], + "interfaces": null, + "enumValues": null, + "possibleTypes": null + }, { "kind": "OBJECT", "name": "ComponentBlocksNavigationBlock", @@ -3087,6 +3339,16 @@ "name": "ComponentBlocksCard", "ofType": null }, + { + "kind": "OBJECT", + "name": "ComponentBlocksFeatureDescription", + "ofType": null + }, + { + "kind": "OBJECT", + "name": "ComponentBlocksMultiFeatureBlock", + "ofType": null + }, { "kind": "OBJECT", "name": "ComponentBlocksNavigationBlock", @@ -4811,6 +5073,11 @@ "name": "ComponentSectionSingleFeatureSection", "ofType": null }, + { + "kind": "OBJECT", + "name": "ComponentBlocksMultiFeatureBlock", + "ofType": null + }, { "kind": "OBJECT", "name": "ComponentSectionSimpleSection", @@ -9753,6 +10020,140 @@ "enumValues": null, "possibleTypes": null }, + { + "kind": "INPUT_OBJECT", + "name": "editComponentBlocksFeatureDescriptionInput", + "description": null, + "fields": null, + "inputFields": [ + { + "name": "id", + "description": null, + "type": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "description", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + } + ], + "interfaces": null, + "enumValues": null, + "possibleTypes": null + }, + { + "kind": "INPUT_OBJECT", + "name": "editComponentBlocksMultiFeatureBlockInput", + "description": null, + "fields": null, + "inputFields": [ + { + "name": "id", + "description": null, + "type": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "title", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "image", + "description": null, + "type": { + "kind": "SCALAR", + "name": "ID", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "bubbleColor", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "blocks", + "description": null, + "type": { + "kind": "LIST", + "name": null, + "ofType": { + "kind": "INPUT_OBJECT", + "name": "editComponentBlocksFeatureDescriptionInput", + "ofType": null + } + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "description", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "checkColor", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + } + ], + "interfaces": null, + "enumValues": null, + "possibleTypes": null + }, { "kind": "INPUT_OBJECT", "name": "editComponentBlocksNavigationBlockInput", diff --git a/frontend/graphql/GetPages.graphql b/frontend/graphql/GetPages.graphql index 276bccfc..d1ebe2cb 100644 --- a/frontend/graphql/GetPages.graphql +++ b/frontend/graphql/GetPages.graphql @@ -62,6 +62,7 @@ query GetPages($where: JSON, $locale: String) { } } ... on ComponentBlocksMultiFeatureBlock { + __typename id title description @@ -70,21 +71,21 @@ query GetPages($where: JSON, $locale: String) { url alternativeText } - imageColor + bubbleColor + checkColor blocks { id - descritpion - } - ... on ComponentSectionSimpleSection { - __typename - id - sectionTitle - sectionTitleColor - title - subtitle + description } } + ... on ComponentSectionSimpleSection { + __typename + id + sectionTitle + sectionTitleColor + title + subtitle + } } - } } diff --git a/frontend/graphql/generated.ts b/frontend/graphql/generated.ts index 51482cb8..4a210108 100644 --- a/frontend/graphql/generated.ts +++ b/frontend/graphql/generated.ts @@ -51,6 +51,36 @@ export type ComponentBlocksCardInput = { label: Scalars['String']; }; +export type ComponentBlocksFeatureDescription = { + __typename?: 'ComponentBlocksFeatureDescription'; + id: Scalars['ID']; + description?: Maybe; +}; + +export type ComponentBlocksFeatureDescriptionInput = { + description?: Maybe; +}; + +export type ComponentBlocksMultiFeatureBlock = { + __typename?: 'ComponentBlocksMultiFeatureBlock'; + id: Scalars['ID']; + title?: Maybe; + image?: Maybe; + bubbleColor?: Maybe; + blocks?: Maybe>>; + description?: Maybe; + checkColor?: Maybe; +}; + +export type ComponentBlocksMultiFeatureBlockInput = { + title?: Maybe; + image?: Maybe; + bubbleColor?: Maybe; + blocks?: Maybe>>; + description?: Maybe; + checkColor?: Maybe; +}; + export type ComponentBlocksNavigationBlock = { __typename?: 'ComponentBlocksNavigationBlock'; id: Scalars['ID']; @@ -324,7 +354,7 @@ export type MenuInput = { updated_by?: Maybe; }; -export type Morph = UsersPermissionsMe | UsersPermissionsMeRole | UsersPermissionsLoginPayload | UserPermissionsPasswordPayload | Global | UpdateGlobalPayload | DeleteGlobalPayload | Menu | MenuConnection | MenuAggregator | MenuGroupBy | MenuConnectionId | MenuConnectionCreated_At | MenuConnectionUpdated_At | MenuConnectionTitle | MenuConnectionPublished_At | CreateMenuPayload | UpdateMenuPayload | DeleteMenuPayload | Pages | PagesConnection | PagesAggregator | PagesGroupBy | PagesConnectionId | PagesConnectionCreated_At | PagesConnectionUpdated_At | PagesConnectionTitle | PagesConnectionPath | PagesConnectionLocale | PagesConnectionPublished_At | CreatePagePayload | UpdatePagePayload | DeletePagePayload | I18NLocale | UploadFile | UploadFileConnection | UploadFileAggregator | UploadFileAggregatorSum | UploadFileAggregatorAvg | UploadFileAggregatorMin | UploadFileAggregatorMax | UploadFileGroupBy | UploadFileConnectionId | UploadFileConnectionCreated_At | UploadFileConnectionUpdated_At | UploadFileConnectionName | UploadFileConnectionAlternativeText | UploadFileConnectionCaption | UploadFileConnectionWidth | UploadFileConnectionHeight | UploadFileConnectionFormats | UploadFileConnectionHash | UploadFileConnectionExt | UploadFileConnectionMime | UploadFileConnectionSize | UploadFileConnectionUrl | UploadFileConnectionPreviewUrl | UploadFileConnectionProvider | UploadFileConnectionProvider_Metadata | DeleteFilePayload | UsersPermissionsPermission | UsersPermissionsRole | UsersPermissionsRoleConnection | UsersPermissionsRoleAggregator | UsersPermissionsRoleGroupBy | UsersPermissionsRoleConnectionId | UsersPermissionsRoleConnectionName | UsersPermissionsRoleConnectionDescription | UsersPermissionsRoleConnectionType | CreateRolePayload | UpdateRolePayload | DeleteRolePayload | UsersPermissionsUser | UsersPermissionsUserConnection | UsersPermissionsUserAggregator | UsersPermissionsUserGroupBy | UsersPermissionsUserConnectionId | UsersPermissionsUserConnectionCreated_At | UsersPermissionsUserConnectionUpdated_At | UsersPermissionsUserConnectionUsername | UsersPermissionsUserConnectionEmail | UsersPermissionsUserConnectionProvider | UsersPermissionsUserConnectionConfirmed | UsersPermissionsUserConnectionBlocked | UsersPermissionsUserConnectionRole | CreateUserPayload | UpdateUserPayload | DeleteUserPayload | ComponentBlocksCard | ComponentBlocksNavigationBlock | ComponentBlocksSingleFeature | ComponentGlobalTopbar | ComponentMenuPageLink | ComponentSectionCardSection | ComponentSectionFooterSection | ComponentSectionHeroSection | ComponentSectionSimpleSection | ComponentSectionSingleFeatureSection; +export type Morph = UsersPermissionsMe | UsersPermissionsMeRole | UsersPermissionsLoginPayload | UserPermissionsPasswordPayload | Global | UpdateGlobalPayload | DeleteGlobalPayload | Menu | MenuConnection | MenuAggregator | MenuGroupBy | MenuConnectionId | MenuConnectionCreated_At | MenuConnectionUpdated_At | MenuConnectionTitle | MenuConnectionPublished_At | CreateMenuPayload | UpdateMenuPayload | DeleteMenuPayload | Pages | PagesConnection | PagesAggregator | PagesGroupBy | PagesConnectionId | PagesConnectionCreated_At | PagesConnectionUpdated_At | PagesConnectionTitle | PagesConnectionPath | PagesConnectionLocale | PagesConnectionPublished_At | CreatePagePayload | UpdatePagePayload | DeletePagePayload | I18NLocale | UploadFile | UploadFileConnection | UploadFileAggregator | UploadFileAggregatorSum | UploadFileAggregatorAvg | UploadFileAggregatorMin | UploadFileAggregatorMax | UploadFileGroupBy | UploadFileConnectionId | UploadFileConnectionCreated_At | UploadFileConnectionUpdated_At | UploadFileConnectionName | UploadFileConnectionAlternativeText | UploadFileConnectionCaption | UploadFileConnectionWidth | UploadFileConnectionHeight | UploadFileConnectionFormats | UploadFileConnectionHash | UploadFileConnectionExt | UploadFileConnectionMime | UploadFileConnectionSize | UploadFileConnectionUrl | UploadFileConnectionPreviewUrl | UploadFileConnectionProvider | UploadFileConnectionProvider_Metadata | DeleteFilePayload | UsersPermissionsPermission | UsersPermissionsRole | UsersPermissionsRoleConnection | UsersPermissionsRoleAggregator | UsersPermissionsRoleGroupBy | UsersPermissionsRoleConnectionId | UsersPermissionsRoleConnectionName | UsersPermissionsRoleConnectionDescription | UsersPermissionsRoleConnectionType | CreateRolePayload | UpdateRolePayload | DeleteRolePayload | UsersPermissionsUser | UsersPermissionsUserConnection | UsersPermissionsUserAggregator | UsersPermissionsUserGroupBy | UsersPermissionsUserConnectionId | UsersPermissionsUserConnectionCreated_At | UsersPermissionsUserConnectionUpdated_At | UsersPermissionsUserConnectionUsername | UsersPermissionsUserConnectionEmail | UsersPermissionsUserConnectionProvider | UsersPermissionsUserConnectionConfirmed | UsersPermissionsUserConnectionBlocked | UsersPermissionsUserConnectionRole | CreateUserPayload | UpdateUserPayload | DeleteUserPayload | ComponentBlocksCard | ComponentBlocksFeatureDescription | ComponentBlocksMultiFeatureBlock | ComponentBlocksNavigationBlock | ComponentBlocksSingleFeature | ComponentGlobalTopbar | ComponentMenuPageLink | ComponentSectionCardSection | ComponentSectionFooterSection | ComponentSectionHeroSection | ComponentSectionSimpleSection | ComponentSectionSingleFeatureSection; export type Mutation = { __typename?: 'Mutation'; @@ -598,7 +628,7 @@ export type PagesGroupBy = { published_at?: Maybe>>; }; -export type PagesSectionsDynamicZone = ComponentSectionCardSection | ComponentSectionHeroSection | ComponentSectionSingleFeatureSection | ComponentSectionSimpleSection; +export type PagesSectionsDynamicZone = ComponentSectionCardSection | ComponentSectionHeroSection | ComponentSectionSingleFeatureSection | ComponentBlocksMultiFeatureBlock | ComponentSectionSimpleSection; export enum PublicationState { @@ -1279,6 +1309,21 @@ export type EditComponentBlocksCardInput = { label?: Maybe; }; +export type EditComponentBlocksFeatureDescriptionInput = { + id?: Maybe; + description?: Maybe; +}; + +export type EditComponentBlocksMultiFeatureBlockInput = { + id?: Maybe; + title?: Maybe; + image?: Maybe; + bubbleColor?: Maybe; + blocks?: Maybe>>; + description?: Maybe; + checkColor?: Maybe; +}; + export type EditComponentBlocksNavigationBlockInput = { id?: Maybe; label?: Maybe; @@ -1508,6 +1553,16 @@ export type GetPagesQuery = ( & Pick )> } )>>> } + ) | ( + { __typename: 'ComponentBlocksMultiFeatureBlock' } + & Pick + & { image?: Maybe<( + { __typename?: 'UploadFile' } + & Pick + )>, blocks?: Maybe + )>>> } ) | ( { __typename: 'ComponentSectionSimpleSection' } & Pick @@ -1658,6 +1713,23 @@ export const GetPages = ` label } } + ... on ComponentBlocksMultiFeatureBlock { + __typename + id + title + description + image { + id + url + alternativeText + } + bubbleColor + checkColor + blocks { + id + description + } + } ... on ComponentSectionSimpleSection { __typename id diff --git a/frontend/pages/[[...slug]].tsx b/frontend/pages/[[...slug]].tsx index 7f8b195e..9d999e43 100644 --- a/frontend/pages/[[...slug]].tsx +++ b/frontend/pages/[[...slug]].tsx @@ -41,6 +41,7 @@ import { LocaleMenuList, LocaleMenuLink, } from "@components/LocaleMenu"; +import { MultiFeatureDescriptionBlockData } from "@features/page/sections/CardListSection/blocks/MultiFeatureDescritpionBlock"; interface DynamicPageProps { path: string[]; @@ -377,6 +378,39 @@ function getPageData( sectionTitleColor: section.sectionTitleColor || null, }; } + + case "ComponentBlocksMultiFeatureBlock": { + return { + _template: "multiFeatureBlock", + id: section.id, + title: section.title || null, + description: section.description || null, + image: section.image + ? { + id: section.image.id, + url: section.image.url, + alternativeText: section.image.alternativeText || null, + } + : null, + bubbleColor: section.bubbleColor || null, + checkColor: section.checkColor || null, + + blocks: section.blocks + ? filterListNullableItems( + section.blocks + ).map((feature) => { + return { + _template: "multiFeature", + id: feature.id, + description: feature.description || null, + bubbleColor: section.bubbleColor || null, + checkColor: section.checkColor || null, + }; + }) + : [], + }; + } + default: return assertNever(section); } diff --git a/frontend/plugins/usePagePlugin.ts b/frontend/plugins/usePagePlugin.ts index e1f2ec83..2db5c47d 100644 --- a/frontend/plugins/usePagePlugin.ts +++ b/frontend/plugins/usePagePlugin.ts @@ -17,6 +17,7 @@ import { usePlugin, } from "tinacms"; import { assertNever } from "@utils"; +import { MultiFeatureDescriptionBlockData } from "@features/page/sections/CardListSection/blocks/MultiFeatureDescritpionBlock"; export interface PageData { id: string; @@ -75,8 +76,6 @@ export function usePagePlugin(data: Data): [Data, Form] { menuInput, }); - console.log("response", JSON.stringify(response, null, " ")); - if (response.errors != null) { cms.alerts.error("Error while saving data", 10000); } else { @@ -187,6 +186,33 @@ function getPageInput(data: PageData): UpdatePageInput { subtitle: section.subtitle, }; } + case "multiFeatureBlock": { + return { + __typename: "ComponentBlocksMultiFeatureBlock", + id: section.id, + title: section.title || null, + description: section.description || null, + image: section.image + ? { + id: section.image.id, + url: section.image.url, + alternativeText: section.image.alternativeText || null, + } + : null, + bubbleColor: section.bubbleColor || null, + blocks: section.blocks.map( + (feature) => { + return { + _template: "multiFeature", + id: feature.id, + description: feature.description || null, + bubbleColor: section.bubbleColor || null, + checkColor: section.checkColor || null, + }; + } + ), + }; + } default: return assertNever(section); }