Add displayFullDates settings in admin and use it to display dates in…

… taks/event (#1589)

src/admin/organization/core/organizationSelectors.js

@@ -27,6 +27,8 @@ export const disableSoloTalkRedirectSelector = (state) =>
     getSelectedOrganizationSelector(state).disableSoloTalkRedirect || false
 export const hideVotesUntilUserVoteSelector = (state) =>
     getSelectedOrganizationSelector(state).hideVotesUntilUserVote || false
+export const displayFullEventDatesSelector = (state) =>
+    getSelectedOrganizationSelector(state).displayFullDates || false
 
 // Memoized selectors
 

src/admin/organization/votingForm/OrganizationVotingFormSettings.js

@@ -4,6 +4,7 @@ import Box from '@material-ui/core/Box'
 import { OrgDataInfo } from '../layout/OrgDataInfo'
 import {
     disableSoloTalkRedirectSelector,
+    displayFullEventDatesSelector,
     getOrganizationLanguagesSelector,
     hideVotesUntilUserVoteSelector,
 } from '../core/organizationSelectors'
@@ -21,6 +22,7 @@ export const OrganizationVotingFormSettings = () => {
     const initialLanguages = getOrganizationLanguagesSelector(
         useStore().getState()
     )
+    const displayFullDates = useSelector(displayFullEventDatesSelector)
 
     return (
         <Box padding={2} paddingTop={0}>
@@ -33,6 +35,7 @@ export const OrganizationVotingFormSettings = () => {
                     hideVotesUntilUserVote={hideVotesUntilUserVote}
                     displayTitle={false}
                     isOrganizationSettings={true}
+                    displayFullDates={displayFullDates}
                 />
             </Suspense>
         </Box>

src/admin/project/core/actions/newProject.js

@@ -25,6 +25,7 @@ export const newProject =
         projectData.favicon = `${window.location.protocol}//${window.location.host}/favicon-32x32.png`
         projectData.logoSmall = `${window.location.protocol}//${window.location.host}/android-chrome-192x192.png`
         projectData.hideVotesUntilUserVote = false
+        projectData.displayFullDates = false
 
         if (
             organizationId !== NO_ORGANIZATION_FAKE_ID &&
@@ -42,6 +43,8 @@ export const newProject =
                     organization.disableSoloTalkRedirect
                 projectData.hideVotesUntilUserVote =
                     organization.hideVotesUntilUserVote || false
+                projectData.displayFullDates =
+                    organization.displayFullDates || false
             }
         }
 

src/admin/project/settings/setup/SettingsForm.js

@@ -24,6 +24,7 @@ const SettingsForm = ({
     displayTitle = true,
     liveUserVotes = false,
     isOrganizationSettings = false,
+    displayFullDates = false,
 }) => {
     const { t } = useTranslation()
     const [donationDialogOpen, setDonationDialogOpen] = useState(false)
@@ -36,6 +37,7 @@ const SettingsForm = ({
                     disableSoloTalkRedirect: bool(),
                     hideVotesUntilUserVote: bool(),
                     liveUserVotes: bool(),
+                    displayFullDates: bool(),
                 })}
                 initialValues={{
                     languages: initialLanguages.map((tag) => ({
@@ -45,6 +47,7 @@ const SettingsForm = ({
                     disableSoloTalkRedirect: !disableSoloTalkRedirect,
                     hideVotesUntilUserVote: hideVotesUntilUserVote,
                     liveUserVotes: liveUserVotes,
+                    displayFullDates: displayFullDates,
                 }}
             >
                 {({ values }) => (
@@ -75,6 +78,20 @@ const SettingsForm = ({
                                         component={OFAutoComplete}
                                     />
                                 </OFFormControl>
+                                <OFFormControl fieldName="displayFullDates">
+                                    <FormControlLabel
+                                        label={t(
+                                            'settingsSetup.displayFullDates'
+                                        )}
+                                        labelPlacement="start"
+                                        control={
+                                            <Field
+                                                name="displayFullDates"
+                                                component={OFSwitch}
+                                            />
+                                        }
+                                    />
+                                </OFFormControl>
                             </Grid>
                             <Grid item xs={12} sm={6}>
                                 <OFFormControl fieldName="disableSoloTalkRedirect">

src/admin/project/settings/setup/Setup.js

@@ -37,6 +37,7 @@ const Setup = () => {
                             hideVotesUntilUserVote={
                                 project.hideVotesUntilUserVote
                             }
+                            displayFullDates={project.displayFullDates}
                             liveUserVotes={project.liveUserVotes}
                         />
                     </Suspense>

src/admin/translations/languages/en.admin.json

@@ -235,7 +235,8 @@
         "languages": "Additional languages (for the voting form)",
         "disableSoloTalkRedirect": "Force redirect to the talk if only one talk listed",
         "hideVotesUntilUserVote": "Hide votes until the user vote on a talk or the vote window is open (add ?displayVotes=true to the URL to display the votes directly)",
-        "liveUserVotes": "Realtime user votes (users votes will be displayed live, without reloading the talk page)"
+        "liveUserVotes": "Realtime user votes (users votes will be displayed live, without reloading the talk page)",
+        "displayFullDates": "Show full dates (day of the week + date + month) instead of just the day of the week and date in the list of conversations."
     },
     "users": {
         "add": "Add a user",

src/admin/translations/languages/fr.admin.json

@@ -235,7 +235,8 @@
         "languages": "Langues additionnelles (pour le bulletin de votes)",
         "disableSoloTalkRedirect": "Forcer la redirection à la présentation si il n'y en a qu'une listé",
         "hideVotesUntilUserVote": "Cacher les votes des autres utilisateurs tant que l'utilisateur n'a pas voté pour la présentation ou que la période de vote est ouverte (ajoutez ?displayVotes=true à l'URL pour afficher les votes directement)",
-        "liveUserVotes": "Affichage des votes en temps réel (les votes des utilisateurs seront affichés en direct, sans recharger la page)"
+        "liveUserVotes": "Affichage des votes en temps réel (les votes des utilisateurs seront affichés en direct, sans recharger la page)",
+        "displayFullDates": "Afficher les dates complètes (jour de la semaine + numéro du jour + mois) au lieu de seulement le jour de la semaine et le numéro du jour dans la liste des présentations."
     },
     "users": {
         "add": "Ajouter un utilisateur",

src/feedback/project/projectSelectors.js

@@ -31,6 +31,8 @@ export const hideVotesUntilUserVoteSelector = (state) =>
     getProjectSelector(state).hideVotesUntilUserVote
 export const isLiveUserVotesSelector = (state) =>
     getProjectSelector(state).liveUserVotes
+export const isFullDatesDisplayedSelector = (state) =>
+    getProjectSelector(state).displayFullDates
 
 //  MEMOIZED SELECTORS HERE
 

src/feedback/talk/Talk.js

@@ -35,7 +35,7 @@ import Snackbar from '../../baseComponents/customComponent/Snackbar'
 import { SPACING } from '../../constants/constants'
 import { VOTE_TYPE_BOOLEAN, VOTE_TYPE_TEXT } from '../../core/contants'
 import { useTranslation } from 'react-i18next'
-import TalkHeader from './TalkHeader'
+import { TalkHeader } from './TalkHeader'
 import { getVoteResultSelectorSelector } from './core/getVoteResultSelectorSelector'
 import useQuery from '../../utils/useQuery'
 

src/feedback/talk/TalkHeader.js

@@ -6,15 +6,26 @@ import { useTheme } from '@material-ui/core'
 import Typography from '@material-ui/core/Typography'
 import makeStyles from '@material-ui/core/styles/makeStyles'
 import useQuery from '../../utils/useQuery'
+import { useSelector } from 'react-redux'
+import { isFullDatesDisplayedSelector } from '../project/projectSelectors'
 
-const formatTalkDateTime = (talk) => {
+const DATE_FORMAT = {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+}
+
+const DATE_FORMAT_LONG = {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+}
+
+const formatTalkDateTime = (talk, displayFullDates = false) => {
     const startDate = DateTime.fromISO(talk.startTime, {
         setZone: true,
-    }).toLocaleString({
-        weekday: 'long',
-        month: 'long',
-        day: 'numeric',
-    })
+    }).toLocaleString(displayFullDates ? DATE_FORMAT_LONG : DATE_FORMAT)
 
     const startTime = DateTime.fromISO(talk.startTime, { setZone: true })
         .setZone('local', { keepLocalTime: true })
@@ -36,10 +47,11 @@ const useStyles = makeStyles(() => ({
     },
 }))
 
-const TalkHeader = ({ talk, speakers }) => {
+export const TalkHeader = ({ talk, speakers }) => {
     const classes = useStyles()
     const theme = useTheme()
     const hideHeader = useQuery().get('hideHeader')
+    const displayFullDates = useSelector(isFullDatesDisplayedSelector)
 
     if (hideHeader && hideHeader === 'true') {
         return <Box height={2}></Box>
@@ -70,11 +82,9 @@ const TalkHeader = ({ talk, speakers }) => {
                 color={theme.palette.textDimmed}
                 marginBottom={2}
             >
-                {talk.startTime && formatTalkDateTime(talk)}
+                {talk.startTime && formatTalkDateTime(talk, displayFullDates)}
             </Box>
             <SpeakerList speakers={speakers} />
         </Box>
     )
 }
-
-export default TalkHeader

src/feedback/talks/TalkDateMenuItem.js

@@ -40,15 +40,29 @@ const DATE_FORMAT = {
     weekday: 'long',
     day: 'numeric',
 }
+const DATE_FORMAT_LONG = {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+}
 
-export const TalkDateMenuItem = ({ date, url, isSelected, noDateLabel }) => {
+export const TalkDateMenuItem = ({
+    date,
+    url,
+    isSelected,
+    noDateLabel,
+    displayFullDates,
+}) => {
     const { t } = useTranslation()
     const classes = useStyles({
         isSelected,
     })
 
     const getDateLabel = (date) => {
         if (date !== TALK_NO_DATE) {
+            if (displayFullDates) {
+                return DateTime.fromISO(date).toLocaleString(DATE_FORMAT_LONG)
+            }
             return DateTime.fromISO(date).toLocaleString(DATE_FORMAT)
         }
         return noDateLabel
@@ -61,7 +75,8 @@ export const TalkDateMenuItem = ({ date, url, isSelected, noDateLabel }) => {
             <Link
                 to={`${url}`}
                 className={classes.a}
-                title={t('talks.date') + label}>
+                title={t('talks.date') + label}
+            >
                 {label}
             </Link>
         </div>

src/feedback/talks/TalksDateMenu.js

@@ -4,6 +4,7 @@ import { getTalksDatesSelector } from '../../core/talks/talksSelectors'
 import {
     getProjectIdSelector,
     getProjectSelectedDateSelector,
+    isFullDatesDisplayedSelector,
 } from '../project/projectSelectors'
 import makeStyles from '@material-ui/core/styles/makeStyles'
 import { useTranslation } from 'react-i18next'
@@ -25,6 +26,7 @@ const TalksDateMenu = () => {
     const talksDates = useSelector(getTalksDatesSelector)
     const selectedDate = useSelector(getProjectSelectedDateSelector)
     const currentProjectId = useSelector(getProjectIdSelector)
+    const displayFullDates = useSelector(isFullDatesDisplayedSelector)
     const { items } = usePagination({
         count: talksDates.length,
         page: talksDates.indexOf(selectedDate) + 1,
@@ -62,6 +64,7 @@ const TalksDateMenu = () => {
                                 }`}
                                 noDateLabel={t('talks.menuNoDate')}
                                 isSelected={selected}
+                                displayFullDates={displayFullDates}
                             />
                         )
                     }