Hello world
+ + + ); +}; + +export default AuthoringMore; diff --git a/met-web/src/components/engagement/admin/create/authoring/AuthoringNavElements.tsx b/met-web/src/components/engagement/admin/create/authoring/AuthoringNavElements.tsx new file mode 100644 index 000000000..f49485544 --- /dev/null +++ b/met-web/src/components/engagement/admin/create/authoring/AuthoringNavElements.tsx @@ -0,0 +1,78 @@ +import { USER_ROLES } from 'services/userService/constants'; +import { TenantState } from 'reduxSlices/tenantSlice'; + +export interface AuthoringRoute { + name: string; + path: string; + base: string; + authenticated: boolean; + allowedRoles: string[]; + required?: boolean; +} + +export const getAuthoringRoutes = (engagementId: number, tenant: TenantState): AuthoringRoute[] => [ + { + name: 'Engagement Home', + path: `/${tenant.id}/engagements/${engagementId}/details/authoring`, + base: `/${tenant.id}/engagements`, + authenticated: false, + allowedRoles: [USER_ROLES.EDIT_ENGAGEMENT], + required: true, + }, + { + name: 'Hero Banner', + path: `/engagements/${engagementId}/details/authoring/banner`, + base: `/engagements`, + authenticated: true, + allowedRoles: [USER_ROLES.EDIT_ENGAGEMENT], + required: true, + }, + { + name: 'Summary', + path: `/engagements/${engagementId}/details/authoring/summary`, + base: `/engagements`, + authenticated: true, + allowedRoles: [USER_ROLES.EDIT_ENGAGEMENT], + required: true, + }, + { + name: 'Details', + path: `/engagements/${engagementId}/details/authoring/details`, + base: `/engagements`, + authenticated: true, + allowedRoles: [USER_ROLES.EDIT_ENGAGEMENT], + required: true, + }, + { + name: 'Provide Feedback', + path: `/engagements/${engagementId}/details/authoring/feedback`, + base: `/engagements`, + authenticated: true, + allowedRoles: [USER_ROLES.EDIT_ENGAGEMENT], + required: true, + }, + { + name: 'View Results', + path: `/engagements/${engagementId}/details/authoring/results`, + base: `/engagements`, + authenticated: true, + allowedRoles: [USER_ROLES.EDIT_ENGAGEMENT], + required: false, + }, + { + name: 'Subscribe', + path: `/engagements/${engagementId}/details/authoring/subscribe`, + base: `/engagements`, + authenticated: true, + allowedRoles: [USER_ROLES.EDIT_ENGAGEMENT], + required: false, + }, + { + name: 'More Engagements', + path: `/engagements/${engagementId}/details/authoring/more`, + base: `/engagements`, + authenticated: true, + allowedRoles: [USER_ROLES.EDIT_ENGAGEMENT], + required: false, + }, +]; diff --git a/met-web/src/components/engagement/admin/create/authoring/AuthoringResults.tsx b/met-web/src/components/engagement/admin/create/authoring/AuthoringResults.tsx new file mode 100644 index 000000000..6a7d282e7 --- /dev/null +++ b/met-web/src/components/engagement/admin/create/authoring/AuthoringResults.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +const AuthoringResults = () => { + return ( + <> +Hello world
+ + + ); +}; + +export default AuthoringResults; diff --git a/met-web/src/components/engagement/admin/create/authoring/AuthoringSideNav.tsx b/met-web/src/components/engagement/admin/create/authoring/AuthoringSideNav.tsx new file mode 100644 index 000000000..76fc7fc85 --- /dev/null +++ b/met-web/src/components/engagement/admin/create/authoring/AuthoringSideNav.tsx @@ -0,0 +1,281 @@ +import React from 'react'; +import { + ListItemButton, + List, + ListItem, + Box, + Drawer, + Toolbar, + SwipeableDrawer, + Grid, + Avatar, + ThemeProvider, +} from '@mui/material'; +import { getAuthoringRoutes as getRoutes, AuthoringRoute as Route } from './AuthoringNavElements'; +import { DarkTheme, Palette, colors, ZIndex } from 'styles/Theme'; +import { AuthoringNavProps, DrawerBoxProps } from './types'; +import { When } from 'react-if'; +import { useAppSelector } from 'hooks'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faPencil } from '@fortawesome/pro-light-svg-icons/faPencil'; +import { Link } from 'components/common/Navigation'; +import { BodyText } from 'components/common/Typography'; +import { USER_ROLES } from 'services/userService/constants'; +import UserService from 'services/userService'; +import { faArrowRight } from '@fortawesome/free-solid-svg-icons'; +import { faArrowLeftLong } from '@fortawesome/pro-light-svg-icons'; +import { faCheck } from '@fortawesome/pro-regular-svg-icons'; +import { StatusCircle } from '../../view/AuthoringTab'; + +export const routeItemStyle = { + padding: 0, + backgroundColor: Palette.background.default, + '&:hover, &:focus': { + filter: 'brightness(96%)', + }, + '&:active': { + filter: 'brightness(92%)', + }, + borderRadius: '8px', +}; + +const DrawerBox = ({ isMediumScreenOrLarger, setOpen, engagementId }: DrawerBoxProps) => { + const permissions = useAppSelector((state) => state.user.roles); + const tenant = useAppSelector((state) => state.tenant); + + const currentRoutePath = getRoutes(Number(engagementId), tenant) + .map((route) => route.path) + .filter((route) => location.pathname.includes(route)) + .reduce((prev, curr) => (prev.length > curr.length ? prev : curr)); + + const allowedRoutes = getRoutes(Number(engagementId), tenant).filter((route) => { + return !route.authenticated || route.allowedRoles.some((role) => permissions.includes(role)); + }); + + const renderListItem = (route: Route, itemType: string, key: number, engagementId: number) => { + const navLabelTextStyles: React.CSSProperties = { + display: 'flex', + textTransform: 'uppercase', + fontWeight: 'bold', + fontSize: '0.95rem', + color: Palette.text.primary, + marginTop: '1.4rem', + marginBottom: '1rem', + }; + return ( + <> +Hello world
+ + + ); +}; + +export default AuthoringSubscribe; diff --git a/met-web/src/components/engagement/admin/create/authoring/AuthoringSummary.tsx b/met-web/src/components/engagement/admin/create/authoring/AuthoringSummary.tsx new file mode 100644 index 000000000..6f4ce5f3c --- /dev/null +++ b/met-web/src/components/engagement/admin/create/authoring/AuthoringSummary.tsx @@ -0,0 +1,216 @@ +import { Grid, MenuItem, Select, SelectChangeEvent } from '@mui/material'; +import React, { useState } from 'react'; +import { useOutletContext } from 'react-router-dom'; +import { TextField } from 'components/common/Input'; +import { AuthoringTemplateOutletContext } from './types'; +import { colors, Palette } from 'styles/Theme'; +import { EyebrowText as FormDescriptionText } from 'components/common/Typography'; +import { MetLabel, MetHeader3, MetLabel as MetBigLabel } from 'components/common'; +import { Button } from 'components/common/Input'; +import { RichTextArea } from 'components/common/Input/RichTextArea'; +import { EditorState } from 'draft-js'; + +const AuthoringBanner = () => { + const { + setValue, // Optional form control prop + watch, // Optional form control prop + control, // Optional form control prop + engagement, // Engagement for populating values + }: AuthoringTemplateOutletContext = useOutletContext(); // Access the form functions and values from the authoring template + + const [editorState, setEditorState] = useState