From 3cc02ab9ebc32026261c14f8d7b17039e8b1d70f Mon Sep 17 00:00:00 2001 From: Hugo Gresse Date: Tue, 23 Jan 2024 13:57:18 +0100 Subject: [PATCH] Add displayFullDates settings in admin and use it to display dates in taks/event --- .../core/organizationSelectors.js | 2 ++ .../OrganizationVotingFormSettings.js | 3 ++ src/admin/project/core/actions/newProject.js | 3 ++ .../project/settings/setup/SettingsForm.js | 17 +++++++++++ src/admin/project/settings/setup/Setup.js | 1 + .../translations/languages/en.admin.json | 3 +- .../translations/languages/fr.admin.json | 3 +- src/feedback/project/projectSelectors.js | 2 ++ src/feedback/talk/Talk.js | 2 +- src/feedback/talk/TalkHeader.js | 30 ++++++++++++------- src/feedback/talks/TalkDateMenuItem.js | 19 ++++++++++-- src/feedback/talks/TalksDateMenu.js | 3 ++ 12 files changed, 73 insertions(+), 15 deletions(-) diff --git a/src/admin/organization/core/organizationSelectors.js b/src/admin/organization/core/organizationSelectors.js index 72e735f31..3dbcbbb30 100644 --- a/src/admin/organization/core/organizationSelectors.js +++ b/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 diff --git a/src/admin/organization/votingForm/OrganizationVotingFormSettings.js b/src/admin/organization/votingForm/OrganizationVotingFormSettings.js index 9f3463414..bb4e330f1 100644 --- a/src/admin/organization/votingForm/OrganizationVotingFormSettings.js +++ b/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 ( @@ -33,6 +35,7 @@ export const OrganizationVotingFormSettings = () => { hideVotesUntilUserVote={hideVotesUntilUserVote} displayTitle={false} isOrganizationSettings={true} + displayFullDates={displayFullDates} /> diff --git a/src/admin/project/core/actions/newProject.js b/src/admin/project/core/actions/newProject.js index 35771f1d8..8dc8eb7d4 100644 --- a/src/admin/project/core/actions/newProject.js +++ b/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 } } diff --git a/src/admin/project/settings/setup/SettingsForm.js b/src/admin/project/settings/setup/SettingsForm.js index 887afe6f8..7b58d368f 100644 --- a/src/admin/project/settings/setup/SettingsForm.js +++ b/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} /> + + + } + /> + diff --git a/src/admin/project/settings/setup/Setup.js b/src/admin/project/settings/setup/Setup.js index 38afbc131..7c804d2f7 100644 --- a/src/admin/project/settings/setup/Setup.js +++ b/src/admin/project/settings/setup/Setup.js @@ -37,6 +37,7 @@ const Setup = () => { hideVotesUntilUserVote={ project.hideVotesUntilUserVote } + displayFullDates={project.displayFullDates} liveUserVotes={project.liveUserVotes} /> diff --git a/src/admin/translations/languages/en.admin.json b/src/admin/translations/languages/en.admin.json index d38a7c4db..9a668ac22 100644 --- a/src/admin/translations/languages/en.admin.json +++ b/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", diff --git a/src/admin/translations/languages/fr.admin.json b/src/admin/translations/languages/fr.admin.json index cb4d2f9cd..630f31d0e 100644 --- a/src/admin/translations/languages/fr.admin.json +++ b/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", diff --git a/src/feedback/project/projectSelectors.js b/src/feedback/project/projectSelectors.js index a9162863d..b4a6373ef 100644 --- a/src/feedback/project/projectSelectors.js +++ b/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 diff --git a/src/feedback/talk/Talk.js b/src/feedback/talk/Talk.js index f4544785c..b917119dd 100644 --- a/src/feedback/talk/Talk.js +++ b/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' diff --git a/src/feedback/talk/TalkHeader.js b/src/feedback/talk/TalkHeader.js index 5d288f37d..5853fcedf 100644 --- a/src/feedback/talk/TalkHeader.js +++ b/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 @@ -70,11 +82,9 @@ const TalkHeader = ({ talk, speakers }) => { color={theme.palette.textDimmed} marginBottom={2} > - {talk.startTime && formatTalkDateTime(talk)} + {talk.startTime && formatTalkDateTime(talk, displayFullDates)} ) } - -export default TalkHeader diff --git a/src/feedback/talks/TalkDateMenuItem.js b/src/feedback/talks/TalkDateMenuItem.js index a075af1d9..3e76acc94 100644 --- a/src/feedback/talks/TalkDateMenuItem.js +++ b/src/feedback/talks/TalkDateMenuItem.js @@ -40,8 +40,19 @@ 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, @@ -49,6 +60,9 @@ export const TalkDateMenuItem = ({ date, url, isSelected, noDateLabel }) => { 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 }) => { + title={t('talks.date') + label} + > {label} diff --git a/src/feedback/talks/TalksDateMenu.js b/src/feedback/talks/TalksDateMenu.js index 4d337355a..b47d452a8 100644 --- a/src/feedback/talks/TalksDateMenu.js +++ b/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} /> ) }