applications/calendar/src/app/components/drawer/CalendarQuickSettings.tsx

   1 import { c } from 'ttag';
   2
   3 import { useCalendarUserSettings } from '@proton/calendar/calendarUserSettings/hooks';
   4 import {
   5     DefaultQuickSettings,
   6     DrawerAllSettingsView,
   7     DrawerAppHeadline,
   8     DrawerAppScrollContainer,
   9     DrawerAppSection,
  10     DrawerDownloadApps,
  11     Info,
  12     Loader,
  13     PrimaryTimezoneSelector,
  14     QuickSettingsButtonSection,
  15     QuickSettingsSectionRow,
  16     SecondaryTimezoneSelector,
  17     ShowSecondaryTimezoneToggle,
  18     Toggle,
  19     ViewPreferenceSelector,
  20     WeekStartSelector,
  21     useApi,
  22     useConfirmActionModal,
  23     useEventManager,
  24     useNotifications,
  25 } from '@proton/components';
  26 import { useLoading } from '@proton/hooks';
  27 import { updateCalendarUserSettings } from '@proton/shared/lib/api/calendars';
  28 import { DEFAULT_CALENDAR_USER_SETTINGS } from '@proton/shared/lib/calendar/calendar';
  29 import type { CalendarUserSettings } from '@proton/shared/lib/interfaces/calendar';
  30
  31 import NukeSearchIndexButton from '../../containers/calendar/confirmationModals/NukeSearchIndexButton';
  32
  33 interface Props {
  34     onBackFromSearch: () => void;
  35 }
  36
  37 const CalendarQuickSettings = ({ onBackFromSearch }: Props) => {
  38     const api = useApi();
  39     const { call } = useEventManager();
  40     const { createNotification } = useNotifications();
  41
  42     const [calendarUserSettings = DEFAULT_CALENDAR_USER_SETTINGS, loadingCalendarUserSettings] =
  43         useCalendarUserSettings();
  44
  45     const [loadingWeekNumberDisplay, withLoadingWeekNumberDisplay] = useLoading();
  46     const [loadingView, withLoadingView] = useLoading();
  47
  48     const [confirmModal, showConfirmModal] = useConfirmActionModal();
  49
  50     const handleChange = async (data: Partial<CalendarUserSettings>) => {
  51         await api(updateCalendarUserSettings(data));
  52         await call();
  53         createNotification({ text: c('Success').t`Preference saved` });
  54     };
  55
  56     const handleChangeShowWeekNumbers = async (show: number) => {
  57         await api(updateCalendarUserSettings({ DisplayWeekNumber: show }));
  58         await call();
  59         createNotification({ text: c('Success').t`Preference saved` });
  60     };
  61
  62     if (loadingCalendarUserSettings) {
  63         return <Loader />;
  64     }
  65
  66     return (
  67         <DrawerAppScrollContainer>
  68             <DrawerAllSettingsView />
  69             <DrawerDownloadApps />
  70
  71             <DrawerAppSection>
  72                 <QuickSettingsSectionRow
  73                     label={c('Label').t`Default view`}
  74                     labelInfo={<Info title={c('Info').t`Week and month views only apply to desktop.`} />}
  75                     action={
  76                         <ViewPreferenceSelector
  77                             id="view-select"
  78                             view={calendarUserSettings.ViewPreference}
  79                             loading={loadingView}
  80                             onChange={(ViewPreference) => withLoadingView(handleChange({ ViewPreference }))}
  81                             className="quickSettingsSectionRow-select w-auto"
  82                             unstyledSelect
  83                         />
  84                     }
  85                 />
  86
  87                 <QuickSettingsSectionRow
  88                     label={c('Label').t`Week start`}
  89                     action={
  90                         <WeekStartSelector className="quickSettingsSectionRow-select w-auto" unstyledSelect shortText />
  91                     }
  92                 />
  93
  94                 <QuickSettingsSectionRow
  95                     label={c('Label').t`Show week numbers`}
  96                     action={
  97                         <Toggle
  98                             id="week-numbers-display"
  99                             aria-describedby="week-numbers-display"
 100                             checked={!!calendarUserSettings.DisplayWeekNumber}
 101                             loading={loadingWeekNumberDisplay}
 102                             onChange={({ target: { checked } }) =>
 103                                 withLoadingWeekNumberDisplay(handleChangeShowWeekNumbers(+checked))
 104                             }
 105                         />
 106                     }
 107                 />
 108             </DrawerAppSection>
 109
 110             <DrawerAppSection>
 111                 <DrawerAppHeadline>{c('Label').t`Time zone`}</DrawerAppHeadline>
 112
 113                 <QuickSettingsSectionRow
 114                     // translator: As in Primary time zone
 115                     label={c('Label').t`Primary`}
 116                     action={
 117                         <PrimaryTimezoneSelector
 118                             id="primary-timezone"
 119                             calendarUserSettings={calendarUserSettings}
 120                             className="w-auto"
 121                             abbreviatedTimezone="city"
 122                             unstyledSelect
 123                             selectMaxHeight="20rem"
 124                             data-testid="quick-settings/primary-time-zone:dropdown"
 125                             tooltip
 126                         />
 127                     }
 128                 />
 129
 130                 <QuickSettingsSectionRow
 131                     // translator: As in "Show secondary time zone"
 132                     label={c('Label').t`Secondary time zone`}
 133                     action={<ShowSecondaryTimezoneToggle calendarUserSettings={calendarUserSettings} />}
 134                 />
 135
 136                 {!!calendarUserSettings.DisplaySecondaryTimezone && (
 137                     <QuickSettingsSectionRow
 138                         // translator: As in secondary time zone
 139                         label={c('Label').t`Secondary`}
 140                         action={
 141                             <SecondaryTimezoneSelector
 142                                 id="secondary-timezone"
 143                                 calendarUserSettings={calendarUserSettings}
 144                                 className="w-auto"
 145                                 abbreviatedTimezone="city"
 146                                 unstyledSelect
 147                                 selectMaxHeight="20rem"
 148                                 data-testid="quick-settings/secondary-time-zone:dropdown"
 149                                 tooltip
 150                             />
 151                         }
 152                     />
 153                 )}
 154             </DrawerAppSection>
 155             <DefaultQuickSettings />
 156             <QuickSettingsButtonSection>
 157                 <NukeSearchIndexButton showConfirmModal={showConfirmModal} onBackFromSearch={onBackFromSearch} />
 158             </QuickSettingsButtonSection>
 159             {confirmModal}
 160         </DrawerAppScrollContainer>
 161     );
 162 };
 163
 164 export default CalendarQuickSettings;