diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.tsx b/client/src/pages/presentationEditor/PresentationEditorPage.tsx index eca2488580037591d5a60e31672427719daae594..7b6f2eba02fad8d973bf984d83b16abaecb2b4c0 100644 --- a/client/src/pages/presentationEditor/PresentationEditorPage.tsx +++ b/client/src/pages/presentationEditor/PresentationEditorPage.tsx @@ -1,14 +1,15 @@ -import { Button, CircularProgress, Divider, Typography } from '@material-ui/core' +import { Button, CircularProgress, Divider, Menu, MenuItem, Typography } from '@material-ui/core' import AppBar from '@material-ui/core/AppBar' import CssBaseline from '@material-ui/core/CssBaseline' import Drawer from '@material-ui/core/Drawer' -import List from '@material-ui/core/List' import ListItemText from '@material-ui/core/ListItemText' import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' +import AddOutlinedIcon from '@material-ui/icons/AddOutlined' import BuildOutlinedIcon from '@material-ui/icons/BuildOutlined' import CreateOutlinedIcon from '@material-ui/icons/CreateOutlined' import DnsOutlinedIcon from '@material-ui/icons/DnsOutlined' import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined' +import axios from 'axios' import React, { useEffect } from 'react' import { Link, useParams } from 'react-router-dom' import { getCities } from '../../actions/cities' @@ -16,6 +17,7 @@ import { getEditorCompetition, setEditorSlideId } from '../../actions/editor' import { getTypes } from '../../actions/typesAction' import { useAppDispatch, useAppSelector } from '../../hooks' import { RichSlide } from '../../interfaces/ApiRichModels' +import { RemoveMenuItem } from '../admin/styledComp' import { Content } from '../views/styled' import SettingsPanel from './components/SettingsPanel' import SlideEditor from './components/SlideEditor' @@ -23,14 +25,17 @@ import { CenteredSpinnerContainer, HomeIcon, PresentationEditorContainer, + SlideList, SlideListItem, ToolBarContainer, ViewButton, ViewButtonGroup, } from './styled' -function createSlide(name: string) { - return { name } +const initialState = { + mouseX: null, + mouseY: null, + slideOrder: null, } const leftDrawerWidth = 150 @@ -92,6 +97,45 @@ const PresentationEditorPage: React.FC = () => { dispatch(setEditorSlideId(id)) } + const createNewSlide = async () => { + await axios.post(`/competitions/${id}/slides`, { title: 'new slide' }) + dispatch(getEditorCompetition(id)) + } + + const [contextState, setContextState] = React.useState<{ + mouseX: null | number + mouseY: null | number + slideOrder: null | number + }>(initialState) + + const handleRightClick = (event: React.MouseEvent<HTMLDivElement>, slideOrder: number) => { + event.preventDefault() + setContextState({ + mouseX: event.clientX - 2, + mouseY: event.clientY - 4, + slideOrder: slideOrder, + }) + } + + const handleClose = () => { + setContextState(initialState) + } + + const handleRemoveSlide = async () => { + await axios.delete(`/competitions/${id}/slides/${contextState.slideOrder}`) + dispatch(getEditorCompetition(id)) + setContextState(initialState) + } + + const handleDuplicateSlide = async () => { + const response = await axios.post(`/competitions/${id}/slides`) + const newOrder = response.data.items[response.data.total_count - 1].order + const oldSlide = competition.slides.find((slide) => slide.order === contextState.slideOrder) + await axios.put(`/competitions/${id}/slides/${newOrder}`, { timer: oldSlide?.timer, title: oldSlide?.title }) + dispatch(getEditorCompetition(id)) + setContextState(initialState) + } + const renderSlideIcon = (slide: RichSlide) => { switch (slide.questions[0].type_id) { case 0: @@ -139,21 +183,31 @@ const PresentationEditorPage: React.FC = () => { > <div className={classes.toolbar} /> <Divider /> - <List> - {competition.slides && - competition.slides.map((slide) => ( - <SlideListItem - divider - button - key={slide.id} - selected={slide.id === activeSlideId} - onClick={() => setActiveSlideId(slide.id)} - > - {renderSlideIcon(slide)} - <ListItemText primary={slide.title} /> - </SlideListItem> - ))} - </List> + <SlideList> + <div> + {competition.slides && + competition.slides.map((slide) => ( + <SlideListItem + divider + button + key={slide.id} + selected={slide.id === activeSlideId} + onClick={() => setActiveSlideId(slide.id)} + onContextMenu={(event) => handleRightClick(event, slide.order)} + > + {renderSlideIcon(slide)} + <ListItemText primary={`Sida ${slide.order + 1}`} /> + </SlideListItem> + ))} + </div> + <div> + <Divider /> + <SlideListItem divider button onClick={() => createNewSlide()}> + <ListItemText primary="Ny sida" /> + <AddOutlinedIcon /> + </SlideListItem> + </div> + </SlideList> </Drawer> <div className={classes.toolbar} /> <Drawer @@ -176,6 +230,20 @@ const PresentationEditorPage: React.FC = () => { <Content leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={rightDrawerWidth}> <SlideEditor /> </Content> + <Menu + keepMounted + open={contextState.mouseY !== null} + onClose={handleClose} + anchorReference="anchorPosition" + anchorPosition={ + contextState.mouseY !== null && contextState.mouseX !== null + ? { top: contextState.mouseY, left: contextState.mouseX } + : undefined + } + > + <MenuItem onClick={handleDuplicateSlide}>Duplicera</MenuItem> + <RemoveMenuItem onClick={handleRemoveSlide}>Ta bort</RemoveMenuItem> + </Menu> </PresentationEditorContainer> ) } diff --git a/client/src/pages/presentationEditor/components/CompetitionSettings.tsx b/client/src/pages/presentationEditor/components/CompetitionSettings.tsx index 6791ce549c9bf24c1538b35a4ac7fbe8a73dfe56..b0834e35690eea67f620d1ab60fd938c8e89ef0b 100644 --- a/client/src/pages/presentationEditor/components/CompetitionSettings.tsx +++ b/client/src/pages/presentationEditor/components/CompetitionSettings.tsx @@ -117,7 +117,7 @@ const CompetitionSettings: React.FC = () => { {/*TODO: fixa så cities laddar in i statet likt i CompetitionManager*/} <Select value={cities.find((city) => city.id === competition.city_id)?.name || ''} - label="RegionSelect" + label="Region" onChange={handleChange} > {cities.map((city) => ( diff --git a/client/src/pages/presentationEditor/styled.tsx b/client/src/pages/presentationEditor/styled.tsx index 14b173ce7f38f586f4dfd8c120ba0cbf2d183cb3..d1f05d6bf18de2eccc6b486fb6e94701acce3b5c 100644 --- a/client/src/pages/presentationEditor/styled.tsx +++ b/client/src/pages/presentationEditor/styled.tsx @@ -1,4 +1,4 @@ -import { Button, ListItem, Toolbar } from '@material-ui/core' +import { Button, List, ListItem, Toolbar } from '@material-ui/core' import styled from 'styled-components' export const ToolBarContainer = styled(Toolbar)` @@ -16,6 +16,14 @@ export const ViewButtonGroup = styled.div` flex-direction: row; ` +export const SlideList = styled(List)` + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 0px; +` + export const SlideListItem = styled(ListItem)` text-align: center; height: 60px;