Add vote Title and Separator type (#1639)

* Add vote item separator and title * Add tests
HugoGresse · Nov 8, 2024 · 6c9e8be · 6c9e8be
1 parent 6c6d8fa
commit 6c9e8be
Show file tree

Hide file tree

Showing 12 changed files with 116 additions and 7 deletions.
diff --git a/cypress/e2e/admin/votingForm.spec.js b/cypress/e2e/admin/votingForm.spec.js
@@ -7,6 +7,7 @@ describe('Test voting form edition', function () {
         projectName: `votingform ${stringGenerator()}`,
         talk1Name: 'Ttitle1',
         voteItem1: stringGenerator(),
+        voteItemTitle: stringGenerator(),
     }
 
     const app = new AdminApp()
@@ -28,6 +29,21 @@ describe('Test voting form edition', function () {
         app.votingForm.assertVoteItemLength(9)
         app.votingForm.addVoteItem(data.voteItem1)
         app.votingForm.assertVoteItemLength(10)
+
+        app.votingForm.addVoteItem(data.voteItemTitle)
+        app.votingForm.addVoteItem(stringGenerator())
+        app.votingForm.assertVoteItemLength(12)
+        app.votingForm.changeVoteItemType(
+            10,
+            VOTE_ITEM_TYPES.chip,
+            VOTE_ITEM_TYPES.title
+        )
+        app.votingForm.changeVoteItemType(
+            11,
+            VOTE_ITEM_TYPES.chip,
+            VOTE_ITEM_TYPES.separator
+        )
+
         app.votingForm.assertVoteItem(0, 'Fun 😃', VOTE_ITEM_TYPES.chip)
         app.votingForm.moveVoteItem(0, true)
         app.votingForm.assertVoteItem(
@@ -55,6 +71,8 @@ describe('Test voting form edition', function () {
         )
         feedback.assertVoteItem(1, 'Fun 😃', VOTE_ITEM_TYPES.chip)
         feedback.assertVoteItem(8, data.voteItem1, VOTE_ITEM_TYPES.chip)
+        feedback.assertVoteItem(9, data.voteItemTitle, VOTE_ITEM_TYPES.title)
+        feedback.assertVoteItem(10, null, VOTE_ITEM_TYPES.separator)
     })
 
     it('Reset voting form to default', function () {

diff --git a/cypress/support/AdminApp.js b/cypress/support/AdminApp.js
@@ -7,6 +7,8 @@ import { onBeforeLoadChangeNavigatorLanguages } from '../utils/onBeforeLoadChang
 export const VOTE_ITEM_TYPES = {
     chip: 'Chip',
     text: 'Text',
+    title: 'Title',
+    separator: 'Separator',
 }
 export class AdminApp {
     votingForm = new VotingForm()

diff --git a/cypress/support/FeedbackApp.js b/cypress/support/FeedbackApp.js
@@ -143,6 +143,12 @@ export class FeedbackApp {
                     case VOTE_ITEM_TYPES.chip:
                         cy.contains('span', name)
                         break
+                    case VOTE_ITEM_TYPES.title:
+                        cy.contains('h3', name)
+                        break
+                    case VOTE_ITEM_TYPES.separator:
+                        cy.get('hr').should('be.visible')
+                        break
                     default:
                         throw new Error(
                             `${type} not managed in Cypress assertVoteItem`

diff --git a/src/admin/project/settings/votingForm/VoteItem.jsx b/src/admin/project/settings/votingForm/VoteItem.jsx
@@ -10,7 +10,7 @@ import { makeStyles } from '@mui/styles'
 import Select from '@mui/material/Select'
 import MenuItem from '@mui/material/MenuItem'
 import { useTranslation } from 'react-i18next'
-import { VOTE_TYPE_BOOLEAN, VOTE_TYPE_TEXT } from '../../../../core/contants'
+import { VOTE_TYPE_BOOLEAN, VOTE_TYPE_SEPARATOR, VOTE_TYPE_TEXT, VOTE_TYPE_TITLE } from '../../../../core/contants'
 import langMap from 'langmap'
 import InputLangAdornment from './InputLangAdornment.jsx'
 
@@ -37,6 +37,14 @@ const getTypes = (t) => [
         type: VOTE_TYPE_TEXT,
         name: t('settingsVotingForm.typeText'),
     },
+    {
+        type: VOTE_TYPE_TITLE,
+        name: t('settingsVotingForm.typeTitle'),
+    },
+    {
+        type: VOTE_TYPE_SEPARATOR,
+        name: t('settingsVotingForm.typeSeparator'),
+    },
 ]
 
 const VoteItem = ({
@@ -63,6 +71,8 @@ const VoteItem = ({
         }
     }, [focusId, setFocusLangIndex, focusedLangIndex, item.id])
 
+    const isSeparator = item.type === VOTE_TYPE_SEPARATOR
+
     return (
         <OFListItem
             style={{ paddingLeft: 20, paddingRight: 20 }}
@@ -76,6 +86,7 @@ const VoteItem = ({
                         focusedLangIndex === -1 &&
                         input.focus()
                     }
+                    disabled={isSeparator}
                     autoFocus={!item.name}
                     onChange={(event) => onChange(event.target.value)}
                     onFocus={() => {
@@ -95,7 +106,7 @@ const VoteItem = ({
                         }
                     }}
                 />
-                {languages.map((langTag, index) => (
+                {!isSeparator && languages.map((langTag, index) => (
                     <OFInput
                         key={langTag}
                         value={item.languages ? item.languages[langTag] : ''}
@@ -108,6 +119,7 @@ const VoteItem = ({
                             )
                         }}
                         className={classes.inputLang}
+                        disabled={isSeparator}
                         onChange={(event) =>
                             onLanguagesChange(langTag, event.target.value)
                         }

diff --git a/src/admin/project/settings/votingForm/votingFormActions.jsx b/src/admin/project/settings/votingForm/votingFormActions.jsx
@@ -21,7 +21,7 @@ import {
     isSavingVotingFormSelector,
 } from './votingFormSelectors'
 import { newId } from '../../../../utils/stringUtils'
-import { VOTE_TYPE_BOOLEAN, VOTE_TYPE_TEXT } from '../../../../core/contants'
+import { VOTE_TYPE_BOOLEAN, VOTE_TYPE_SEPARATOR, VOTE_TYPE_TEXT } from '../../../../core/contants'
 import { filterMap } from '../../../../utils/mapUtils'
 import { addNotification } from '../../../notification/notifcationActions'
 import {
@@ -61,6 +61,11 @@ export const onVoteItemChange = (voteItem) => (dispatch, getState) => {
         editedVoteItem.id = newId()
     }
 
+    if (editedVoteItem.type === VOTE_TYPE_SEPARATOR) {
+        editedVoteItem.name = null
+        editedVoteItem.languages = {}
+    }
+
     dispatch({
         type: EDIT_VOTEITEM,
         payload: editedVoteItem,
@@ -127,7 +132,12 @@ export const saveVoteItems = (hideNotification) => (dispatch, getState) => {
 
     let tempLanguages = {}
     const cleanedVoteItems = voteItems
-        .filter((item) => item.name)
+        .filter((item) => {
+            if (item.type === VOTE_TYPE_SEPARATOR) {
+                return true
+            }
+            return item.name
+        })
         .map((item) => {
             delete item.local
 

diff --git a/src/admin/translations/languages/en.admin.json b/src/admin/translations/languages/en.admin.json
@@ -280,6 +280,8 @@
         "resetToDefaultDialogDesc": "Existing votes will no longer be displayed, dashboard will still list them.",
         "typeText": "Text",
         "typeBoolean": "Chip",
+        "typeTitle": "Title",
+        "typeSeparator": "Separator",
         "editLang": "You can edit the languages from the Event & Theme page",
         "typeChangeDialogTitle": "Vote type changed",
         "typeChangeDialogDesc": "A vote type has changed or a vote item has been deleted. If there are already votes linked to this vote item, they will not be visible.",

diff --git a/src/admin/translations/languages/fr.admin.json b/src/admin/translations/languages/fr.admin.json
@@ -280,6 +280,8 @@
         "resetToDefaultDialogDesc": "Les votes existant ne seront plus affiché, les statistiques listeront toujours ces votes.",
         "typeText": "Texte",
         "typeBoolean": "Pastille",
+        "typeTitle": "Titre",
+        "typeSeparator": "Séparateur",
         "editLang": "Vous pouvez modifier les langues depuis la page Évènement & thème.",
         "typeChangeDialogTitle": "Changement de type de vote",
         "typeChangeDialogDesc": "Le type d'un choix de vote a changé ou un choix de vote a été supprimé. Si il y a déjà des votes liés à ce choix, ils ne seront plus visible.",

diff --git a/src/core/contants.js b/src/core/contants.js
@@ -5,3 +5,5 @@ export const VOTE_STATUS_HIDDEN = 'hidden'
 export const VOTE_TYPE_BOOLEAN = 'boolean'
 export const VOTE_TYPE_TEXT = 'text'
 export const VOTE_TYPE_TEXT_PLUS = 'textPlus'
+export const VOTE_TYPE_TITLE = 'title'
+export const VOTE_TYPE_SEPARATOR = 'separator'
diff --git a/src/feedback/talk/TalkVote.jsx b/src/feedback/talk/TalkVote.jsx
@@ -1,7 +1,9 @@
 import React from 'react'
 import TalkVoteBoolean from './boolean/TalkVoteBoolean.jsx'
 import { TalkVoteText } from './text/TalkVoteText.jsx'
-import { VOTE_TYPE_BOOLEAN, VOTE_TYPE_TEXT } from '../../core/contants'
+import { VOTE_TYPE_BOOLEAN, VOTE_TYPE_SEPARATOR, VOTE_TYPE_TEXT, VOTE_TYPE_TITLE } from '../../core/contants'
+import { TalkVoteTitle } from './nonVoteItem/TalkVoteTitle.jsx'
+import { TalkVoteSeparator } from './nonVoteItem/TalkVoteSeparator.jsx'
 
 export const TalkVote = ({
     voteItem,
@@ -34,5 +36,15 @@ export const TalkVote = ({
                     chipColors={chipColors}
                 />
             )
+        case VOTE_TYPE_TITLE:
+            return (
+                <TalkVoteTitle
+                    voteItem={voteItem}
+                />
+            )
+        case VOTE_TYPE_SEPARATOR:
+            return (
+                <TalkVoteSeparator />
+            )
     }
 }
diff --git a/src/feedback/talk/nonVoteItem/TalkVoteSeparator.jsx b/src/feedback/talk/nonVoteItem/TalkVoteSeparator.jsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import Grid from '@mui/material/Grid'
+import { makeStyles } from '@mui/styles'
+
+const useStyles = makeStyles((theme) => ({
+    separator: {
+        borderColor: theme.palette.divider,
+        marginTop: theme.spacing(2),
+        marginBottom: theme.spacing(2),
+    },
+}))
+
+export const TalkVoteSeparator = () => {
+    const classes = useStyles()
+
+    return (
+        <Grid
+            item
+            xs={12}
+            data-testid="VoteItem"
+        >
+            <hr className={classes.separator} />
+        </Grid>
+    )
+}
diff --git a/src/feedback/talk/nonVoteItem/TalkVoteTitle.jsx b/src/feedback/talk/nonVoteItem/TalkVoteTitle.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+
+export const TalkVoteTitle = ({
+                                 voteItem
+                             }) => {
+
+    return (
+        <Grid
+            item
+            xs={12}
+            data-testid="VoteItem"
+        >
+            <Typography variant="h4" color="textPrimary" component="h3">
+                {voteItem.name}
+            </Typography>
+        </Grid>
+    )
+}
diff --git a/src/feedback/talk/text/TalkVoteText.jsx b/src/feedback/talk/text/TalkVoteText.jsx
@@ -130,8 +130,6 @@ export const TalkVoteText = ({
         <Grid
             item
             xs={12}
-            sm={12}
-            md={12}
             className={classes.itemContainer}
             data-testid="VoteItem"
         >
-Original file line number
+Diff line change
@@ Expand Up / @@ -130,8 +130,6 @@ export const TalkVoteText = ({ @@
             <Grid
                 item
                 xs={12}
-                sm={12}
-                md={12}
                 className={classes.itemContainer}
                 data-testid="VoteItem"
             >
@@ Expand Down @@