NewProfilePopover.tsx init

Author: Yadro

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

@@ -1,18 +1,23 @@
-import React from 'react';
-import { Col, Form, Modal, Row, Select } from 'antd';
+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 {
-  visible: boolean;
-  onClose: () => void;
-}
+interface ISettingsModalProps extends IModalProps {}
 
-const SettingsModal: React.VFC<ISettingsModalProps> = (props: ISettingsModalProps) => {
+const SettingsModal: React.VFC<ISettingsModalProps> = (
+  props: ISettingsModalProps
+) => {
   const { visible, onClose } = props;
+  const [showNewProfilePopover, setShowNewProfilePopover] = useState<boolean>(
+    false
+  );
+
   return (
     <Modal
       title="Settings"
@@ -23,15 +28,21 @@ const SettingsModal: React.VFC<ISettingsModalProps> = (props: ISettingsModalProp
       onCancel={onClose}
     >
       <Row>
-        <Col span={8}>
+        <Col span={24}>
           <Form.Item label="Profile" labelCol={{ span: 24 }}>
-            <Select>
-              {settingsStore.settings.profiles.map((profile) => (
-                <Select.Option key={profile} value={profile}>
-                  {profile}
-                </Select.Option>
-              ))}
-            </Select>
+            <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>

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

@@ -12,13 +12,12 @@ import Duration from './components/Duration';
 import TimeRangeModal from '../../../../components/TimeRangeModal/TimeRangeModal';
 import { Undefined } from '../../../../types/CommonTypes';
 import TaskTimeItemModel from '../../../../modules/tasks/models/TaskTimeItemModel';
+import IModalProps from '../../../../types/IModalProps';
 
 const { projectStore } = rootStore;
 
-interface DrawerTaskProps {
-  task: TaskModel | undefined;
-  visible: boolean;
-  onClose: () => void;
+interface DrawerTaskProps extends IModalProps {
+  task?: TaskModel;
 }
 
 export default observer(function DrawerTask({

src/screens/projects/components/DrawerTask/DrawerTask.tsx

@@ -0,0 +1,4 @@
+export default interface IModalProps {
+  visible: boolean;
+  onClose: () => void;
+}