Merge

Author: Yadro

src/base/repositories/AbstractFileRepository.ts

@@ -1,33 +1,43 @@
-import PromiseQueue from '../../helpers/PromiseQueueHellper';
-
 const fs = require('fs');
 const path = require('path');
 
 import FsHelper from '../../helpers/FsHelper';
+import PromiseQueue from '../../helpers/PromiseQueueHellper';
 
-const APP_FOLDER = 'YadroTimeTracker';
-const PROFILE_FOLDER = 'profile1';
+const APP_DIR = 'YadroTimeTracker';
 
 export default abstract class AbstractFileRepository<T = any> {
-  folderWithProfile: string = 'profile1';
+  dirWithProfileData: string = 'profile1';
   fileName: string = 'defaultFileName.json';
+  saveInRoot: boolean = false;
+
+  private logPrefix = `Repository[${this.fileName}]:`;
 
   writeFileQueue = new PromiseQueue();
 
   private static get appDataFolder() {
     return process.env.APPDATA || '';
   }
 
-  private static get profileFolder() {
-    return path.join(
-      AbstractFileRepository.appDataFolder,
-      APP_FOLDER,
-      PROFILE_FOLDER
-    );
+  private get destFolder() {
+    const pathItems = [AbstractFileRepository.appDataFolder, APP_DIR];
+    if (!this.saveInRoot) {
+      pathItems.push(this.dirWithProfileData);
+    }
+    return path.join(...pathItems);
   }
 
   private get filePath() {
-    return path.join(AbstractFileRepository.profileFolder, this.fileName);
+    return path.join(this.destFolder, this.fileName);
+  }
+
+  public setProfile(profile: string | null) {
+    if (profile) {
+      this.dirWithProfileData = profile;
+      console.log(`${this.logPrefix} set profile=${profile}`);
+    } else {
+      console.error(`${this.logPrefix} set profile=null`);
+    }
   }
 
   public restore(defaultValue: T): T {
@@ -40,7 +50,7 @@ export default abstract class AbstractFileRepository<T = any> {
   }
 
   public save(data: T) {
-    FsHelper.mkdirIfNotExists(AbstractFileRepository.profileFolder);
+    FsHelper.mkdirIfNotExists(this.destFolder);
     this.writeFileQueue.add(() =>
       FsHelper.writeFile(this.filePath, data).catch(() => {
         console.error(

src/components/Profile/Profile.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Space } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import { createUseStyles } from 'react-jss';
+
+import rootStore from '../../modules/RootStore';
+import useModal from '../../hooks/ModalHook';
+import SettingsModal from '../SettingsModal/SettingsModal';
+
+const { settingsStore } = rootStore;
+
+const Profile: React.VFC = () => {
+  const classes = useStyles();
+  const { settings } = settingsStore;
+  const { open, openModal, closeModal } = useModal();
+
+  return (
+    <Space className={classes.root}>
+      <span className={classes.white}>{settings.currentProfile}</span>
+      <SettingOutlined className={classes.white} onClick={openModal} />
+      <SettingsModal visible={open} onClose={closeModal} />
+    </Space>
+  );
+};
+
+const useStyles = createUseStyles({
+  root: {
+    marginLeft: 16,
+  },
+  white: {
+    color: 'white',
+  },
+});
+
+export default Profile;

src/components/SettingsModal/NewProfilePopover.tsx

@@ -0,0 +1,66 @@
+import React, { ChangeEvent, useCallback, useState } from 'react';
+import { createUseStyles } from 'react-jss';
+import { Button, Input, Popover, Space } from 'antd';
+import { UserAddOutlined } from '@ant-design/icons';
+import rootStore from '../../modules/RootStore';
+
+interface INewProfilePopoverProps {
+  visible: boolean;
+  setVisible: (visible: boolean) => void;
+}
+
+const { settingsStore } = rootStore;
+
+const NewProfilePopover: React.FC<INewProfilePopoverProps> = (
+  props: INewProfilePopoverProps
+) => {
+  const { visible, setVisible } = props;
+  const classes = useStyles();
+
+  const [profile, setProfile] = useState<string>('');
+  const [isValid, setIsValid] = useState<boolean>(false);
+
+  const isProfileValid = useCallback((profile: string) => {
+    if (!/^[\w\d ]{2,}$/.test(profile)) {
+      return false;
+    }
+    return !settingsStore.settings.profiles.includes(profile);
+  }, []);
+
+  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    const profile = event.target.value;
+    setProfile(profile);
+    setIsValid(isProfileValid(profile));
+  }, []);
+
+  return (
+    <Popover
+      content={
+        <Space>
+          <Input
+            placeholder="Enter a new profile name"
+            value={profile}
+            onChange={handleChange}
+          />
+          <Button type="primary" disabled={!isValid}>
+            Create
+          </Button>
+        </Space>
+      }
+      title="Create a new profile"
+      trigger="click"
+      visible={visible}
+      onVisibleChange={setVisible}
+    >
+      <Button type="primary">
+        <UserAddOutlined />
+      </Button>
+    </Popover>
+  );
+};
+
+const useStyles = createUseStyles({
+  root: {},
+});
+
+export default NewProfilePopover;

src/components/SettingsModal/SettingsModal.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Col, Form, Modal, Row, Select, Space } from 'antd';
+import { createUseStyles } from 'react-jss';
+
+import rootStore from '../../modules/RootStore';
+import IModalProps from '../../types/IModalProps';
+import NewProfilePopover from './NewProfilePopover';
+
+const { settingsStore } = rootStore;
+
+interface ISettingsModalProps extends IModalProps {}
+
+const SettingsModal: React.VFC<ISettingsModalProps> = (
+  props: ISettingsModalProps
+) => {
+  const { visible, onClose } = props;
+  const [showNewProfilePopover, setShowNewProfilePopover] = useState<boolean>(
+    false
+  );
+
+  return (
+    <Modal
+      title="Settings"
+      visible={visible}
+      // okButtonProps={{ disabled: !valid }}
+      okText="Save"
+      onOk={onClose}
+      onCancel={onClose}
+    >
+      <Row>
+        <Col span={24}>
+          <Form.Item label="Profile" labelCol={{ span: 24 }}>
+            <Space>
+              <Select>
+                {settingsStore.settings.profiles.map((profile) => (
+                  <Select.Option key={profile} value={profile}>
+                    {profile}
+                  </Select.Option>
+                ))}
+              </Select>
+              <NewProfilePopover
+                visible={showNewProfilePopover}
+                setVisible={setShowNewProfilePopover}
+              />
+            </Space>
+          </Form.Item>
+        </Col>
+      </Row>
+    </Modal>
+  );
+};
+
+const useStyles = createUseStyles({});
+
+export default SettingsModal;

src/components/TimeRangeModal/TimeRangeModal.tsx

@@ -11,6 +11,7 @@ import TaskTimeItemModel from '../../modules/tasks/models/TaskTimeItemModel';
 import { ITimeRangeModel } from '../../modules/tasks/models/TaskModel';
 import { Undefined } from '../../types/CommonTypes';
 import TimeRangeDuration from './components/TimeRangeDuration';
+import IModalProps from '../../types/IModalProps';
 
 const { tasksStore } = rootStore;
 
@@ -19,10 +20,8 @@ enum RangeField {
   end = 'end',
 }
 
-interface TimeRangeModalProps {
+interface TimeRangeModalProps extends IModalProps {
   taskTime?: TaskTimeItemModel;
-  visible: boolean;
-  onClose: () => void;
 }
 
 const TimeRangeModal = observer(

src/helpers/ClassNameHelper.ts

@@ -0,0 +1,21 @@
+import { useCallback, useState } from 'react';
+
+const useModal = () => {
+  const [open, setOpen] = useState(false);
+
+  const openModal = useCallback(() => {
+    setOpen(true);
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return {
+    open,
+    openModal,
+    closeModal,
+  };
+};
+
+export default useModal;

src/hooks/ModalHook.ts

@@ -1,12 +1,15 @@
 import TaskStore from './tasks/TaskStore';
 import ProjectStore from './projects/ProjectStore';
 import ProjectModel from './projects/models/ProjectModel';
+import SettingsStore from './settings/SettingsStore';
 
-class RootStore {
-  tasksStore = new TaskStore();
-  projectStore = new ProjectStore();
+export class RootStore {
+  settingsStore = new SettingsStore();
+  tasksStore = new TaskStore(this);
+  projectStore = new ProjectStore(this);
 
   restore() {
+    this.settingsStore.restore();
     this.tasksStore.restore();
     this.projectStore.restore();
   }

src/modules/RootStore.ts

@@ -4,15 +4,19 @@ import ProjectFactory from './ProjectFactory';
 import ProjectRepository from './ProjectRepository';
 
 export default class ProjectService implements IService<ProjectModel[]> {
-  projectFactory = new ProjectFactory();
-  projectRepository = new ProjectRepository();
+  factory = new ProjectFactory();
+  repository = new ProjectRepository();
+
+  setProfile(profile: string) {
+    this.repository.setProfile(profile);
+  }
 
   getAll(): ProjectModel[] {
-    const data = this.projectRepository.restore(DEFAULT_PROJECTS);
-    return this.projectFactory.createList(ProjectModel, data);
+    const data = this.repository.restore(DEFAULT_PROJECTS);
+    return this.factory.createList(ProjectModel, data);
   }
 
   save(data: ProjectModel[]): void {
-    this.projectRepository.save(data);
+    this.repository.save(data);
   }
 }