Settings of hours

Author: Yadro

src/components/SettingsModal/SettingsModal.tsx

@@ -1,31 +1,43 @@
 import React, { useCallback, useState } from 'react';
-import { Col, Form, Modal, Row, Select, Space } from 'antd';
-import { createUseStyles } from 'react-jss';
+import { Form, Modal, Select, Space, TimePicker } from 'antd';
 import { observer } from 'mobx-react';
+// eslint-disable-next-line import/named
+import moment, { Moment } from 'moment';
 
 import rootStore from '../../modules/RootStore';
 import IModalProps from '../../types/IModalProps';
 import NewProfilePopover from './NewProfilePopover';
+import { timeToMs } from '../../helpers/DateTime';
+import { DEFAULT_SETTINGS } from '../../modules/settings/models/SettingsModel';
 
 const { settingsStore } = rootStore;
 
 interface ISettingsModalProps extends IModalProps {}
 
+const timeFormat = 'HH:mm';
+
 const SettingsModal: React.VFC<ISettingsModalProps> = observer(
   (props: ISettingsModalProps) => {
     const { visible, onClose } = props;
+    const { settings } = settingsStore;
 
     const [showNewProfilePopover, setShowNewProfilePopover] = useState<boolean>(
       false
     );
-    const [profile, setProfile] = useState<string>(
-      settingsStore.settings.currentProfile
+    const [profile, setProfile] = useState<string>(settings.currentProfile);
+    const [workingHours, setWorkingHours] = useState<Moment | null>(
+      moment(settings.numberOfWorkingHours).utcOffset(0)
     );
 
     const handleSave = useCallback(() => {
-      settingsStore.setActiveProfile(profile);
+      settingsStore.setSettings({
+        currentProfile: profile,
+        numberOfWorkingHours: workingHours
+          ? timeToMs(workingHours?.toDate())
+          : DEFAULT_SETTINGS.numberOfWorkingHours,
+      });
       onClose();
-    }, [profile, onClose]);
+    }, [profile, workingHours, onClose]);
 
     const handleChangeProfile = useCallback((selected: string) => {
       setProfile(selected);
@@ -50,14 +62,14 @@ const SettingsModal: React.VFC<ISettingsModalProps> = observer(
         onOk={handleSave}
         onCancel={onClose}
       >
-        <Form.Item label="Profile" labelCol={{ span: 24 }}>
+        <Form.Item label="Switch profile" labelCol={{ span: 24 }}>
           <Space>
             <Select
               value={profile}
               onChange={handleChangeProfile}
               style={{ width: 200 }}
             >
-              {settingsStore.settings.profiles.map((profile) => (
+              {settings.profiles.map((profile) => (
                 <Select.Option key={profile} value={profile}>
                   {profile}
                 </Select.Option>
@@ -69,6 +81,16 @@ const SettingsModal: React.VFC<ISettingsModalProps> = observer(
             />
           </Space>
         </Form.Item>
+        <Form.Item label="Number of working hours">
+          <TimePicker
+            value={workingHours}
+            onChange={(value) => setWorkingHours(value)}
+            format={timeFormat}
+            minuteStep={5}
+            showNow={false}
+            allowClear={false}
+          />
+        </Form.Item>
       </Modal>
     );
   }

src/helpers/DateTime.ts

@@ -45,6 +45,13 @@ export function msToTime(s: number, showSeconds: boolean = true) {
   return timeItemsToString(sign, hrs, mins, secs, showSeconds);
 }
 
+export function timeToMs(date: Date) {
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+
+  return (hours * 60 + minutes) * 60 * 1000;
+}
+
 export function calcDuration(taskTime: ITimeRangeModel[]): number {
   return taskTime.reduce((prev, timeRange) => {
     if (!timeRange.start) {

src/modules/settings/SettingsStore.ts

@@ -3,6 +3,7 @@ import { makeAutoObservable } from 'mobx';
 import SettingsModel, { DEFAULT_SETTINGS } from './models/SettingsModel';
 import SettingsService from './SettingsService';
 import { RootStore } from '../RootStore';
+import { ISettings } from './models/ISettings';
 
 export default class SettingsStore {
   settings: SettingsModel = new SettingsModel(DEFAULT_SETTINGS);
@@ -18,6 +19,13 @@ export default class SettingsStore {
     this.service.save(this.settings);
   }
 
+  setSettings(newSettings: ISettings) {
+    const { currentProfile, numberOfWorkingHours } = newSettings;
+    this.settings.numberOfWorkingHours = numberOfWorkingHours;
+    this.setActiveProfile(currentProfile);
+    this.service.save(this.settings);
+  }
+
   setActiveProfile(profile: string) {
     if (profile === this.settings.currentProfile) {
       return;

src/modules/settings/models/ISettings.ts

@@ -0,0 +1,4 @@
+export interface ISettings {
+  currentProfile: string;
+  numberOfWorkingHours: number;
+}

src/modules/settings/models/SettingsModel.ts

@@ -4,23 +4,24 @@ import { makeObservable, observable } from 'mobx';
 export const DEFAULT_SETTINGS = {
   currentProfile: 'profile1',
   profiles: ['profile1'],
-  hoursInWorkingDay: 8 * 60 * 60 * 1000,
+  numberOfWorkingHours: 8 * 60 * 60 * 1000,
   isFirstLoad: true,
 };
 
 export default class SettingsModel extends AbstractModel {
   currentProfile: string = DEFAULT_SETTINGS.currentProfile;
   profiles: string[] = DEFAULT_SETTINGS.profiles;
-  hoursInWorkingDay: number = DEFAULT_SETTINGS.hoursInWorkingDay;
+  numberOfWorkingHours: number = DEFAULT_SETTINGS.numberOfWorkingHours;
   isFirstLoad: boolean = DEFAULT_SETTINGS.isFirstLoad;
+  // TODO showNotifications
 
   constructor(data: any) {
     super();
     this.load(data);
     makeObservable(this, {
       currentProfile: observable,
       profiles: observable,
-      hoursInWorkingDay: observable,
+      numberOfWorkingHours: observable,
       isFirstLoad: observable,
     });
   }