1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-13 13:48:59 +02:00

Add simple placeholder for locale setting format

This commit is contained in:
Thomas Heartman 2025-07-30 15:55:38 +02:00
parent 1d3aea47dc
commit bd8c0414f0
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
2 changed files with 45 additions and 29 deletions

View File

@ -1,4 +1,4 @@
import { useEffect, useState } from 'react'; import { useEffect, useId, useState } from 'react';
import { import {
Box, Box,
FormControl, FormControl,
@ -15,12 +15,13 @@ import { useProfile } from 'hooks/api/getters/useProfile/useProfile';
import { useLocationSettings } from 'hooks/useLocationSettings'; import { useLocationSettings } from 'hooks/useLocationSettings';
import type { IUser } from 'interfaces/user'; import type { IUser } from 'interfaces/user';
import TopicOutlinedIcon from '@mui/icons-material/TopicOutlined'; import TopicOutlinedIcon from '@mui/icons-material/TopicOutlined';
import { Link, useNavigate } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PageContent } from 'component/common/PageContent/PageContent'; import { PageContent } from 'component/common/PageContent/PageContent';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { RoleBadge } from 'component/common/RoleBadge/RoleBadge'; import { RoleBadge } from 'component/common/RoleBadge/RoleBadge';
import { useUiFlag } from 'hooks/useUiFlag'; import { useUiFlag } from 'hooks/useUiFlag';
import { ProductivityEmailSubscription } from './ProductivityEmailSubscription.tsx'; import { ProductivityEmailSubscription } from './ProductivityEmailSubscription.tsx';
import { formatDateYMDHM } from 'utils/formatDate.ts';
const StyledHeader = styled('div')(({ theme }) => ({ const StyledHeader = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
@ -79,7 +80,6 @@ const StyledDivider = styled('div')(({ theme }) => ({
})); }));
const StyledFormControl = styled(FormControl)(({ theme }) => ({ const StyledFormControl = styled(FormControl)(({ theme }) => ({
marginTop: theme.spacing(1.5),
width: theme.spacing(30), width: theme.spacing(30),
})); }));
@ -99,11 +99,21 @@ const ProjectList = styled('ul')(({ theme }) => ({
gap: theme.spacing(1), gap: theme.spacing(1),
})); }));
const exampleDate = new Date('2014-09-29T14:50:46');
const LocaleSelector = styled('div')(({ theme }) => ({
marginTop: theme.spacing(1.5),
display: 'flex',
flexFlow: 'row wrap',
gap: theme.spacing(1),
alignItems: 'center',
}));
export const ProfileTab = ({ user }: IProfileTabProps) => { export const ProfileTab = ({ user }: IProfileTabProps) => {
const { profile, refetchProfile } = useProfile(); const { profile, refetchProfile } = useProfile();
const navigate = useNavigate();
const { locationSettings, setLocationSettings } = useLocationSettings(); const { locationSettings, setLocationSettings } = useLocationSettings();
const [currentLocale, setCurrentLocale] = useState<string>(); const [currentLocale, setCurrentLocale] = useState<string>();
const exampleDateId = useId();
const [possibleLocales, setPossibleLocales] = useState([ const [possibleLocales, setPossibleLocales] = useState([
'en-US', 'en-US',
@ -215,30 +225,36 @@ export const ProfileTab = ({ user }: IProfileTabProps) => {
<Typography variant='body2'> <Typography variant='body2'>
This is the format used across the system for time and date This is the format used across the system for time and date
</Typography> </Typography>
<StyledFormControl variant='outlined' size='small'> <LocaleSelector>
<StyledInputLabel htmlFor='locale-select'> <StyledFormControl variant='outlined' size='small'>
Date/Time formatting <StyledInputLabel htmlFor='locale-select'>
</StyledInputLabel> Date/Time formatting
<Select </StyledInputLabel>
id='locale-select' <Select
value={currentLocale || ''} aria-details={exampleDateId}
native id='locale-select'
onChange={changeLocale} value={currentLocale || ''}
MenuProps={{ native
style: { onChange={changeLocale}
zIndex: 9999, MenuProps={{
}, style: {
}} zIndex: 9999,
> },
{possibleLocales.map((locale) => { }}
return ( >
<option key={locale} value={locale}> {possibleLocales.map((locale) => {
{locale} return (
</option> <option key={locale} value={locale}>
); {locale}
})} </option>
</Select> );
</StyledFormControl> })}
</Select>
</StyledFormControl>
<span id={exampleDateId}>
Example: {formatDateYMDHM(exampleDate, currentLocale)}
</span>
</LocaleSelector>
{productivityReportEmailEnabled ? ( {productivityReportEmailEnabled ? (
<> <>
<StyledDivider /> <StyledDivider />

View File

@ -14,7 +14,7 @@ export const formatDateYMDHMS = (
export const formatDateYMDHM = ( export const formatDateYMDHM = (
date: number | string | Date, date: number | string | Date,
locale: string, locale?: string,
timeZone?: string, timeZone?: string,
): string => { ): string => {
return new Date(date).toLocaleString(locale, { return new Date(date).toLocaleString(locale, {