From 462c352e0533ac6eb51ebce4cafcebbd61104eeb Mon Sep 17 00:00:00 2001 From: Frank <48450599+Fbasham@users.noreply.github.com> Date: Fri, 27 Oct 2023 12:33:50 -0400 Subject: [PATCH] update MSCA Dashboard Page (#907) --- graphql/queries/getMSCADashBoardPage.graphql | 463 ++++++++++++++++ pages/projects/dashboard/index.js | 545 ++++++++++++++++--- 2 files changed, 932 insertions(+), 76 deletions(-) create mode 100644 graphql/queries/getMSCADashBoardPage.graphql diff --git a/graphql/queries/getMSCADashBoardPage.graphql b/graphql/queries/getMSCADashBoardPage.graphql new file mode 100644 index 0000000000..7e775a5b0d --- /dev/null +++ b/graphql/queries/getMSCADashBoardPage.graphql @@ -0,0 +1,463 @@ +query getDashboardPage { + sclabsPageV1ByPath( + _path: "/content/dam/decd-endc/content-fragments/sclabs/pages/projects/client-hub/dashboard-overview" + ) { + item { + scId + scPageNameEn + scPageNameFr + scTitleEn + scTitleFr + scShortTitleEn + scShortTitleFr + scLabProjectStage + scLabProjectSummaryEn { + json + } + scLabProjectSummaryFr { + json + } + scDescriptionEn { + json + } + scDescriptionFr { + json + } + scLabProjectUpdates { + ... on SclabsPageV1Model { + _path + scId + scPageNameEn + scPageNameFr + scTitleEn + scTitleFr + scShortTitleEn + scShortTitleFr + scBreadcrumbParentPages { + ... on SclabsPageV1Model { + scTitleEn + scTitleFr + scPageNameEn + scPageNameFr + } + } + scSubject + scKeywordsEn + scKeywordsFr + scContentType + scOwner + scDateModifiedOverwrite + scAudience + scRegion + scSocialMediaImageEn { + ... on ImageRef { + _path + } + ... on DocumentRef { + _path + } + } + scSocialMediaImageFr { + ... on ImageRef { + _path + } + ... on DocumentRef { + _path + } + } + scSocialMediaImageAltTextEn + scSocialMediaImageAltTextFr + scNoIndex + scNoFollow + scFragments { + ... on SclabsContentV1Model { + _path + scId + scContentEn { + json + } + scContentFr { + json + } + } + ... on SclabsImageV1Model { + scId + scImageEn { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageFr { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageMobileEn { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageMobileFr { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageAltTextEn + scImageAltTextFr + scImageCaptionEn { + json + } + scImageCaptionFr { + json + } + } + ... on SclabsButtonV1Model { + scId + scTitleEn + scTitleFr + scDestinationURLEn + scDestinationURLFr + scButtonType + } + ... on SclabsFeatureV1Model { + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + scImageEn { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageFr { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scFragments { + ... on SclabsAlertV1Model { + _path + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + scAlertType + } + } + scImageAltTextEn + scImageAltTextFr + scLabsButton { + scId + scTitleEn + scTitleFr + scDestinationURLEn + scDestinationURLFr + scButtonType + } + } + ... on TooltipV1Model { + _path + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + } + } + } + } + scBreadcrumbParentPages { + ... on SclabsPageV1Model { + scTitleEn + scTitleFr + scPageNameEn + scPageNameFr + } + } + scSubject + scKeywordsEn + scKeywordsFr + scContentType + scOwner + scDateModifiedOverwrite + scAudience + scRegion + scSocialMediaImageEn { + ... on ImageRef { + _path + } + ... on DocumentRef { + _path + } + } + scSocialMediaImageFr { + ... on ImageRef { + _path + } + ... on DocumentRef { + _path + } + } + scSocialMediaImageAltTextEn + scSocialMediaImageAltTextFr + scNoIndex + scNoFollow + scFragments { + ... on SclabsContentV1Model { + _path + scId + scContentEn { + json + } + scContentFr { + json + } + scFragments { + ... on SclabsContentV1Model { + _path + scId + scContentEn { + json + } + scContentFr { + json + } + scFragments { + ... on SclabsImageV1Model { + scId + scImageEn { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageFr { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageMobileEn { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageMobileFr { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageAltTextEn + scImageAltTextFr + scImageCaptionEn { + json + } + scImageCaptionFr { + json + } + scLongDescHeadingEn + scLongDescHeadingFr + scLongDescEn { + json + } + scLongDescFr { + json + } + } + } + } + } + } + ... on SclabsImageV1Model { + scId + scImageEn { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageFr { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageMobileEn { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageMobileFr { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageAltTextEn + scImageAltTextFr + scImageCaptionEn { + json + } + scImageCaptionFr { + json + } + } + ... on SclabsButtonV1Model { + scId + scTitleEn + scTitleFr + scDestinationURLEn + scDestinationURLFr + scButtonType + } + ... on SclabsFeatureV1Model { + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + scImageEn { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageFr { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scFragments { + ... on SclabsAlertV1Model { + _path + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + scAlertType + } + } + scImageAltTextEn + scImageAltTextFr + scLabsButton { + scId + scTitleEn + scTitleFr + scDestinationURLEn + scDestinationURLFr + scButtonType + } + } + ... on TooltipV1Model { + _path + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + } + } + } + } +} diff --git a/pages/projects/dashboard/index.js b/pages/projects/dashboard/index.js index 27d09f6878..c3706d99d8 100644 --- a/pages/projects/dashboard/index.js +++ b/pages/projects/dashboard/index.js @@ -1,23 +1,24 @@ import Head from "next/head"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import { Layout } from "../../../components/organisms/Layout"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import aemServiceInstance from "../../../services/aemServiceInstance"; import { ProjectInfo } from "../../../components/atoms/ProjectInfo"; import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs"; import { Heading } from "../../../components/design-system/Heading"; +import { Collapse } from "../../../components/design-system/Collapse"; export default function MscaDashboard(props) { - const [pageData] = useState(props.pageData.item); - const [filteredDictionary] = useState( - props.dictionary.items.filter( - (item) => - item.scId === "STARTED" || - item.scId === "ENDED" || - item.scId === "PROJECT-STAGE" || - item.scId === "SUMMARY" - ) + const pageData = props.pageData?.item; + + const filteredDictionary = props.dictionary?.items?.filter( + (item) => + item.scId === "STARTED" || + item.scId === "ENDED" || + item.scId === "PROJECT-STAGE" || + item.scId === "SUMMARY" ); + const stageDictionary = { en: { "gc:custom/decd-endc/project-stage/alpha": "Alpha", @@ -29,6 +30,50 @@ export default function MscaDashboard(props) { }, }; + function generateReactElements(json) { + const elements = []; + + for (const item of json) { + if (item.nodeType === "paragraph") { + elements.push( +

{generateReactElements(item.content)}

+ ); + } else if (item.nodeType === "unordered-list") { + const listItems = item.content.map((listItem, index) => ( +
  • + {generateReactElements(listItem.content)} +
    • + )); + elements.push( + + ); + } else if (item.nodeType === "ordered-list") { + const listItems = item.content.map((listItem, index) => ( +
  • + {generateReactElements(listItem.content)} +
    • + )); + elements.push( +
      + {listItems} +
    + ); + } else if (item.nodeType === "list-item") { + elements.push( +
  • + {generateReactElements(item.content)} +
    • + ); + } else if (item.nodeType === "text") { + elements.push(item.value); + } + } + + return elements; + } + useEffect(() => { if (props.adobeAnalyticsUrl) { window.adobeDataLayer = window.adobeDataLayer || []; @@ -325,90 +370,438 @@ export default function MscaDashboard(props) { : pageData.scFragments[3].scContentFr.json[1].content[0] .value}

    -

    +

    {props.locale === "en" ? pageData.scFragments[3].scContentEn.json[2].content[0].value : pageData.scFragments[3].scContentFr.json[2].content[0] .value} -

    +

    {props.locale === "en" ? pageData.scFragments[3].scContentEn.json[3].content[0].value : pageData.scFragments[3].scContentFr.json[3].content[0] .value}

    + +

    {props.locale === "en" ? pageData.scFragments[3].scContentEn.json[4].content[0].value : pageData.scFragments[3].scContentFr.json[4].content[0] .value}

    -

    - {props.locale === "en" - ? pageData.scFragments[3].scContentEn.json[5].content[0].value - : pageData.scFragments[3].scContentFr.json[5].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[3].scContentEn.json[6].content[0].value - : pageData.scFragments[3].scContentFr.json[6].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[3].scContentEn.json[7].content[0].value - : pageData.scFragments[3].scContentFr.json[7].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[3].scContentEn.json[8].content[0].value - : pageData.scFragments[3].scContentFr.json[8].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[3].scContentEn.json[9].content[0].value - : pageData.scFragments[3].scContentFr.json[9].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[3].scContentEn.json[10].content[0] - .value - : pageData.scFragments[3].scContentFr.json[10].content[0] - .value} -

    + +
    +

    + {props.locale === "en" + ? pageData.scFragments[4].scContentEn.json[0].content[0] + .value + : pageData.scFragments[4].scContentFr.json[0].content[0] + .value} +

    +
    +
    + { +
    +
    +
    +

    + {props.locale === "en" + ? pageData.scFragments[4].scFragments[0].scContentEn + .json[0].content[0].value + : pageData.scFragments[4].scFragments[0].scContentFr + .json[0].content[0].value} +

    +

    + {props.locale === "en" + ? pageData.scFragments[4].scFragments[0].scContentEn + .json[1].content[0].value + : pageData.scFragments[4].scFragments[0].scContentFr + .json[1].content[0].value} +

    +
      +
    • + {props.locale === "en" + ? pageData.scFragments[4].scFragments[0].scContentEn + .json[2].content[0].content[0].value + : pageData.scFragments[4].scFragments[0].scContentFr + .json[2].content[0].content[0].value} +
      • +
    • + {props.locale === "en" + ? pageData.scFragments[4].scFragments[0].scContentEn + .json[2].content[1].content[0].value + : pageData.scFragments[4].scFragments[0].scContentFr + .json[2].content[1].content[0].value} +
      • +
    +
    +
    +
    + +
    +
    +
    +
    + { +
    +
    +
    +

    + {props.locale === "en" + ? pageData.scFragments[4].scFragments[1].scContentEn + .json[0].content[0].value + : pageData.scFragments[4].scFragments[1].scContentFr + .json[0].content[0].value} +

    +

    + {props.locale === "en" + ? pageData.scFragments[4].scFragments[1].scContentEn + .json[1].content[0].value + : pageData.scFragments[4].scFragments[1].scContentFr + .json[1].content[0].value} +

    +
      +
    • + {props.locale === "en" + ? pageData.scFragments[4].scFragments[1].scContentEn + .json[2].content[0].content[0].value + : pageData.scFragments[4].scFragments[1].scContentFr + .json[2].content[0].content[0].value} +
      • +
    • + {props.locale === "en" + ? pageData.scFragments[4].scFragments[1].scContentEn + .json[2].content[1].content[0].value + : pageData.scFragments[4].scFragments[1].scContentFr + .json[2].content[1].content[0].value} +
      • +
    +
    +
    +
    + +
    +
    +
    +
    + { +
    +
    +
    +

    + {props.locale === "en" + ? pageData.scFragments[4].scFragments[2].scContentEn + .json[0].content[0].value + : pageData.scFragments[4].scFragments[2].scContentFr + .json[0].content[0].value} +

    +

    + {props.locale === "en" + ? pageData.scFragments[4].scFragments[2].scContentEn + .json[1].content[0].value + : pageData.scFragments[4].scFragments[2].scContentFr + .json[1].content[0].value} +

    +
      +
    • + {props.locale === "en" + ? pageData.scFragments[4].scFragments[2].scContentEn + .json[2].content[0].content[0].value + : pageData.scFragments[4].scFragments[2].scContentFr + .json[2].content[0].content[0].value} +
      • +
    • + {props.locale === "en" + ? pageData.scFragments[4].scFragments[2].scContentEn + .json[2].content[1].content[0].value + : pageData.scFragments[4].scFragments[2].scContentFr + .json[2].content[1].content[0].value} +
      • +
    • + {props.locale === "en" + ? pageData.scFragments[4].scFragments[2].scContentEn + .json[2].content[2].content[0].value + : pageData.scFragments[4].scFragments[2].scContentFr + .json[2].content[2].content[0].value} +
      • +
    • + {props.locale === "en" + ? pageData.scFragments[4].scFragments[2].scContentEn + .json[2].content[3].content[0].value + : pageData.scFragments[4].scFragments[2].scContentFr + .json[2].content[3].content[0].value} +
      • +
    • + {props.locale === "en" + ? pageData.scFragments[4].scFragments[2].scContentEn + .json[2].content[4].content[0].value + : pageData.scFragments[4].scFragments[2].scContentFr + .json[2].content[4].content[0].value} +
      • +
    • + {props.locale === "en" + ? pageData.scFragments[4].scFragments[2].scContentEn + .json[2].content[5].content[0].value + : pageData.scFragments[4].scFragments[2].scContentFr + .json[2].content[5].content[0].value} +
      • +
    +
    +
    +
    + +
    +
    +
    +
    + { +
    +
    +
    +

    + {props.locale === "en" + ? pageData.scFragments[4].scFragments[3].scContentEn + .json[0].content[0].value + : pageData.scFragments[4].scFragments[3].scContentFr + .json[0].content[0].value} +

    +

    + {props.locale === "en" + ? pageData.scFragments[4].scFragments[3].scContentEn + .json[1].content[0].value + : pageData.scFragments[4].scFragments[3].scContentFr + .json[1].content[0].value} +

    +
      +
    • + {props.locale === "en" + ? pageData.scFragments[4].scFragments[3].scContentEn + .json[2].content[0].content[0].value + : pageData.scFragments[4].scFragments[3].scContentFr + .json[2].content[0].content[0].value} +
      • +
    • + {props.locale === "en" + ? pageData.scFragments[4].scFragments[3].scContentEn + .json[2].content[1].content[0].value + : pageData.scFragments[4].scFragments[3].scContentFr + .json[2].content[1].content[0].value} +
      • +
    • + {props.locale === "en" + ? pageData.scFragments[4].scFragments[3].scContentEn + .json[2].content[2].content[0].value + : pageData.scFragments[4].scFragments[3].scContentFr + .json[2].content[2].content[0].value} +
      • +
    • + {props.locale === "en" + ? pageData.scFragments[4].scFragments[3].scContentEn + .json[2].content[3].content[0].value + : pageData.scFragments[4].scFragments[3].scContentFr + .json[2].content[3].content[0].value} +
      • +
    +
    +
    +
    + +
    +
    +
    + +
    +

    + {props.locale === "en" + ? pageData.scFragments[5].scContentEn.json[0].content[0].value + : pageData.scFragments[5].scContentFr.json[0].content[0].value} +

    +

    + {props.locale === "en" + ? pageData.scFragments[5].scContentEn.json[1].content[0].value + : pageData.scFragments[5].scContentFr.json[1].content[0].value} +

    +

    + {props.locale === "en" + ? pageData.scFragments[5].scContentEn.json[2].content[0].value + : pageData.scFragments[5].scContentFr.json[2].content[0].value} + + {pageData.scFragments[5].scContentEn.json[2].content[1].value} + +

    +

    + {props.locale === "en" + ? pageData.scFragments[5].scContentEn.json[3].content[0].value + : pageData.scFragments[5].scContentFr.json[3].content[0].value} +

    +
    - {/* */} {props.adobeAnalyticsUrl ? ( @@ -422,7 +815,7 @@ export default function MscaDashboard(props) { export const getStaticProps = async ({ locale }) => { // get page data from AEM const { data: pageData } = await aemServiceInstance.getFragment( - "mscadPageQuery" + "getMSCADashBoardPage" ); // get dictionary const { data: dictionary } = await aemServiceInstance.getFragment(