From 1c54b94e6f8bf4bcb1d233257fee99ce2900271c Mon Sep 17 00:00:00 2001 From: Arnei Date: Thu, 21 Mar 2024 18:09:29 +0100 Subject: [PATCH 001/115] Port Tobira integration - Appearance The old admin ui had an integration for tobira in the series details and new series modal. This starts porting the integration by laying out some basic DOM structure and adding CSS and translations. I.e. it should already look similar to the old admin ui, but there is no actual functionality yet. --- .../ModalTabsAndPages/NewTobiraPage.tsx | 235 ++++++++++++++++++ .../SeriesDetailsTobiraTab.tsx | 119 +++++++++ .../events/partials/modals/SeriesDetails.tsx | 20 +- .../partials/wizards/NewSeriesWizard.tsx | 13 + .../adminui/languages/lang-de_DE.json | 34 ++- .../adminui/languages/lang-en_US.json | 35 ++- app/src/styles/components/_breadcrumbs.scss | 11 +- .../styles/views/modals/_event-series.scss | 20 ++ .../views/modals/_new-event-series.scss | 8 + 9 files changed, 488 insertions(+), 7 deletions(-) create mode 100644 app/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx create mode 100644 app/src/components/events/partials/ModalTabsAndPages/SeriesDetailsTobiraTab.tsx diff --git a/app/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx b/app/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx new file mode 100644 index 0000000000..f7d7ed3945 --- /dev/null +++ b/app/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx @@ -0,0 +1,235 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons"; +import { FormikProps } from "formik"; + +/** + * This component renders the theme page for new series in the new series wizard. + */ +const NewTobiraPage = ({ + formik, + nextPage, + previousPage, +}: { + formik: FormikProps, + nextPage: (values: T) => void, + previousPage: any //(values: T) => void, +}) => { + const { t } = useTranslation(); + + const error = false; + const isValid = true; + const editing = false; + const selectedPage = ""; + + const breadcrumbs = [{ + segment: "", + title: "Eins title" + }] + + const targetPages = [{ + title: "Hello", + path: "Hello but cursive", + subpages: "Link", + new: true, + blocks: [], + segment: "", + }, { + title: "Bye", + path: "Buh-Bye", + subpages: "Lonk", + new: false, + blocks: [], + segment: "", + }] + + const back = (index: number) => { + + } + + const select = (page: any) => { + + } + + const updatePath = (page: any) => { + + } + + const goto = (page: any) => { + + } + + const addChild = () => { + + } + + return ( + <> +
+
+
+
+
+ {t("EVENTS.SERIES.NEW.TOBIRA.CAPTION")} +
+
+
    +
  • +

    {t("EVENTS.SERIES.NEW.TOBIRA.DESCRIPTION")}

    + { !error && ( + <> +
    +
    + {t("EVENTS.SERIES.NEW.TOBIRA.SELECT_PAGE")} +
    +
    + {!!breadcrumbs && breadcrumbs.map((breadcrumb, key) => ( + + ))} +
    + + + + + + + + + + {!!targetPages && + targetPages.map((page, key) => ( + + + + + { editing && + + } + + ))} + { !editing && + + + + } + +
    + { + t( + "EVENTS.SERIES.NEW.TOBIRA.PAGE_TITLE" + ) /* Title */ + } + + { + t( + "EVENTS.SERIES.NEW.TOBIRA.PATH_SEGMENT" + ) /* Path segment */ + } + + { + t( + "EVENTS.SERIES.NEW.TOBIRA.SUBPAGES" + ) /* Subpages */ + } +
    + {!!page.new ? ( + + + ) : ( + + )} + + + {!!page.new ? ( + updatePath(page)} + > + ) : ( + {page.segment} + )} + + + {(!page.new || isValid && page.title) && + + } + + { page.new && + + } +
    + +
    +
    + +
    + { (!!selectedPage && isValid) && ( +

    + {t('EVENTS.SERIES.NEW.TOBIRA.SELECTED_PAGE')}: + + wizard.step.ud.selectedPage.path + +

    + )} + { true && ( +

    + {t("EVENTS.SERIES.NEW.TOBIRA.NO_PAGE_SELECTED")} +

    + )} + +
    + + )} +
    • +
+
+
+
+
+
+ + {/* Button for navigation to next page and previous page */} + + + ); +}; + +export default NewTobiraPage; diff --git a/app/src/components/events/partials/ModalTabsAndPages/SeriesDetailsTobiraTab.tsx b/app/src/components/events/partials/ModalTabsAndPages/SeriesDetailsTobiraTab.tsx new file mode 100644 index 0000000000..dca44b619b --- /dev/null +++ b/app/src/components/events/partials/ModalTabsAndPages/SeriesDetailsTobiraTab.tsx @@ -0,0 +1,119 @@ +import { useTranslation } from "react-i18next"; + +/** + * This component renders the theme page for new series in the new series wizard. + */ +const SeriesDetailsTobiraTab = ({ + +}: { + +}) => { + const { t } = useTranslation(); + + const tobiraData = { + error: false, + baseURL: "abc.de", + hostPages: [{ + title: "Uno title", + path: "le path", + ancestors: [{ + title: "One title" + }] + }], + }; + const directTobiraLink = ""; + + const copyTobiraDirectLink = () => { + + } + + console.log(!tobiraData.hostPages) + console.log(tobiraData.hostPages.length === 0) + + return ( +
+
+
+
+
+ {t("EVENTS.SERIES.DETAILS.TABS.TOBIRA")} +
+ { !tobiraData.error && + <> +
+ + {t("EVENTS.SERIES.DETAILS.TOBIRA.DIRECT_LINK")} + +