Update generalpart and usermenu

greenbone · Oct 16, 2024 · 0b99ae9 · 0b99ae9
1 parent 34a6530
commit 0b99ae9
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 4 deletions.
diff --git a/src/web/components/menu/usermenu.jsx b/src/web/components/menu/usermenu.jsx
@@ -10,7 +10,7 @@ import {useNavigate} from 'react-router-dom';
 import styled, {keyframes} from 'styled-components';
 
 import _ from 'gmp/locale';
-import {dateTimeWithTimeZone} from 'gmp/locale/date';
+import {formattedUserSettingDateTimeWithTimeZone} from 'web/utils/userSettingTimeDateFormatters';
 
 import LogoutIcon from 'web/components/icon/logouticon';
 import MySettingsIcon from 'web/components/icon/mysettingsicon';
@@ -151,7 +151,10 @@ const UserMenuContainer = () => {
               <ScheduleIcon />
               <span>
                 {_('Session timeout: {{date}}', {
-                  date: dateTimeWithTimeZone(sessionTimeout, userTimezone),
+                  date: formattedUserSettingDateTimeWithTimeZone(
+                    sessionTimeout,
+                    userTimezone,
+                  ),
                 })}
               </span>
               <RefreshIcon

diff --git a/src/web/pages/usersettings/generalpart.jsx b/src/web/pages/usersettings/generalpart.jsx
@@ -86,11 +86,97 @@ const GeneralPart = ({
   errors,
   onChange,
 }) => {
+  const [prevUserInterfaceTimeFormat, setPrevUserInterfaceTimeFormat] =
+    useState(undefined);
+  const [prevUserInterfaceDateFormat, setPrevUserInterfaceDateFormat] =
+    useState(undefined);
+
+  const getSelectItems = category => {
+    return Object.entries(dateTimeFormatOptions[category].options).map(
+      ([value, {label}]) => ({
+        value: isNaN(value) ? value : Number(value),
+        label: _(label),
+      }),
+    );
+  };
+
+  const handleSysDefaultChange = event => {
+    const isSystemDefault = parseYesNo(event);
+
+    const defaultTimeFormat = 24;
+    const defaultDateFormat = 'wdmy';
+
+    const currentUserInterfaceTimeFormat =
+      userInterfaceTimeFormat || defaultTimeFormat;
+    const currentUserInterfaceDateFormat =
+      userInterfaceDateFormat || defaultDateFormat;
+
+    if (!isSystemDefault) {
+      onChange(
+        prevUserInterfaceTimeFormat || defaultTimeFormat,
+        'userInterfaceTimeFormat',
+      );
+      onChange(
+        prevUserInterfaceDateFormat || defaultDateFormat,
+        'userInterfaceDateFormat',
+      );
+    } else {
+      setPrevUserInterfaceTimeFormat(currentUserInterfaceTimeFormat);
+      setPrevUserInterfaceDateFormat(currentUserInterfaceDateFormat);
+
+      onChange(SYSTEM_DEFAULT, 'userInterfaceTimeFormat');
+      onChange(SYSTEM_DEFAULT, 'userInterfaceDateFormat');
+    }
+
+    onChange(isSystemDefault, 'isUserInterfaceTimeDateDefault');
+  };
   return (
-    <React.Fragment>
+    <>
       <FormGroup title={_('Timezone')} titleSize="3">
         <TimeZoneSelect name="timezone" value={timezone} onChange={onChange} />
       </FormGroup>
+      <FormGroup
+        title={_('Use System Default for Time and Date Format')}
+        titleSize="3"
+      >
+        <Checkbox
+          name="isUserInterfaceTimeDateDefault"
+          checked={parseYesNo(isUserInterfaceTimeDateDefault) === YES_VALUE}
+          checkedValue={YES_VALUE}
+          unCheckedValue={NO_VALUE}
+          onChange={handleSysDefaultChange}
+        />
+      </FormGroup>
+
+      <FormGroup title={_('Time Format')} titleSize="3">
+        <Select
+          label={_('Time Format')}
+          name="userInterfaceTimeFormat"
+          value={
+            userInterfaceTimeFormat === 'system_default'
+              ? ''
+              : userInterfaceTimeFormat
+          }
+          items={getSelectItems('time')}
+          onChange={onChange}
+          disabled={isUserInterfaceTimeDateDefault}
+        />
+      </FormGroup>
+      <FormGroup title={_('Date Format')} titleSize="3">
+        <Select
+          label={_('Date Format')}
+          name="userInterfaceDateFormat"
+          value={
+            userInterfaceDateFormat === 'system_default'
+              ? ''
+              : userInterfaceDateFormat
+          }
+          items={getSelectItems('longDate')}
+          onChange={onChange}
+          disabled={isUserInterfaceTimeDateDefault}
+        />
+      </FormGroup>
+
       <FormGroup title={_('Change Password')} titleSize="3">
         <Divider flex="column">
           <FormGroup title={_('Old')}>
@@ -185,7 +271,7 @@ const GeneralPart = ({
           onChange={onChange}
         />
       </FormGroup>
-    </React.Fragment>
+    </>
   );
 };