more keyboard shortcuts

Author: dkhalife

src/views/Modals/Inputs/DateModal.tsx

@@ -35,12 +35,16 @@ export class DateModal extends React.Component<DateModalProps, DateModalState> {
   }
 
   private onSave = () => {
-    this.setState({ isOpen: false })
+    this.setState({
+      isOpen: false,
+    })
     this.props.onClose(this.state.date)
   }
 
   private onCancel = () => {
-    this.setState({ isOpen: false })
+    this.setState({
+      isOpen: false,
+    })
     this.props.onClose(null)
   }
 
@@ -50,6 +54,14 @@ export class DateModal extends React.Component<DateModalProps, DateModalState> {
     })
   }
 
+  private onDateKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (e.key === 'Enter') {
+      this.onSave()
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  }
+
   public render(): React.ReactNode {
     const { title } = this.props
     const { isOpen } = this.state
@@ -67,6 +79,7 @@ export class DateModal extends React.Component<DateModalProps, DateModalState> {
             type='datetime-local'
             value={date}
             onChange={this.onDateChange}
+            onKeyDown={this.onDateKeyDown}
             ref={this.inputRef}
           />
           <Box

src/views/Modals/Inputs/PasswordChangeModal.tsx

@@ -47,12 +47,16 @@ export class PassowrdChangeModal extends React.Component<
   }
 
   onSave = () => {
-    this.setState({ isOpen: false })
+    this.setState({
+      isOpen: false,
+    })
     this.props.onClose(this.state.password)
   }
 
   onCancel = () => {
-    this.setState({ isOpen: false })
+    this.setState({
+      isOpen: false,
+    })
     this.props.onClose(null)
   }
 
@@ -69,25 +73,48 @@ export class PassowrdChangeModal extends React.Component<
       return
     }
 
-    if (password !== confirmPassword) {
-      this.setState({ passwordError: 'Passwords do not match' })
+    if (password === "") {
+      this.setState({
+        passwordError: 'New password is required',
+      })
+    }
+    else if (password !== confirmPassword) {
+      this.setState({
+        passwordError: 'Passwords do not match',
+      })
     } else if (password.length < 8) {
-      this.setState({ passwordError: 'Password must be at least 8 characters' })
+      this.setState({
+        passwordError: 'Password must be at least 8 characters',
+      })
     } else if (password.length > 50) {
       this.setState({
         passwordError: 'Password must be less than 50 characters',
       })
     } else {
-      this.setState({ passwordError: null })
+      this.setState({
+        passwordError: null,
+      })
     }
   }
 
   private onPasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
-    this.setState({ password: e.target.value })
+    this.setState({
+      password: e.target.value,
+    })
   }
 
   private onConfirmPasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
-    this.setState({ confirmPassword: e.target.value })
+    this.setState({
+      confirmPassword: e.target.value,
+    })
+  }
+
+  private onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && !this.state.passwordError) {
+      this.onSave()
+      e.preventDefault()
+      e.stopPropagation()
+    }
   }
 
   public render(): React.ReactNode {
@@ -122,6 +149,7 @@ export class PassowrdChangeModal extends React.Component<
               type='password'
               value={password}
               ref={this.inputRef}
+              onKeyDown={this.onKeyDown}
               onChange={this.onPasswordChange}
             />
           </FormControl>
@@ -133,6 +161,7 @@ export class PassowrdChangeModal extends React.Component<
               fullWidth
               type='password'
               value={confirmPassword}
+              onKeyDown={this.onKeyDown}
               onChange={this.onConfirmPasswordChange}
             />
 
@@ -144,7 +173,7 @@ export class PassowrdChangeModal extends React.Component<
             mt={1}
           >
             <Button
-              disabled={passwordError != null}
+              disabled={passwordError != null || password === ''}
               onClick={this.onSave}
               fullWidth
               sx={{ mr: 1 }}

src/views/Tasks/TaskEdit.tsx

@@ -286,6 +286,12 @@ export class TaskEdit extends React.Component<TaskEditProps, TaskEditState> {
     this.setState({ title: e.target.value })
   }
 
+  private onTitleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      this.HandleSaveTask()
+    }
+  }
+
   private onDueDateChange = (e: ChangeEvent<HTMLInputElement>) => {
     this.setState({
       nextDueDate: e.target.checked ? new Date() : null,
@@ -397,6 +403,7 @@ export class TaskEdit extends React.Component<TaskEditProps, TaskEditState> {
               ref={this.titleInputRef}
               value={title}
               onChange={this.onTitleChange}
+              onKeyDown={this.onTitleKeyDown}
             />
           </FormControl>
         </Box>

src/views/Tasks/TasksOverview.tsx

@@ -94,6 +94,12 @@ export class TasksOverview extends React.Component<
       moveFocusToJoyInput(this.searchInputRef)
       event.preventDefault()
     }
+
+    if (event.key === '+' && document.activeElement?.tagName.toLowerCase() !== 'input') {
+      this.onAddTask()
+      event.preventDefault()
+      event.stopPropagation()
+    }
   }
 
   private handleChangeDueDate = async (date: Date | null) => {
@@ -178,6 +184,11 @@ export class TasksOverview extends React.Component<
     navigate(NavigationPaths.TaskHistory(task.id))
   }
 
+  private onAddTask = () => {
+    const { navigate } = this.props
+    navigate(NavigationPaths.TaskCreate)
+  }
+
   private onDeleteTask = async (task: Task) => {
     this.taskBeingDeleted = task
     this.confirmationModalRef.current?.open()
@@ -257,7 +268,7 @@ export class TasksOverview extends React.Component<
             gap={2}
           >
             <Button
-              onClick={() => navigate(NavigationPaths.TaskCreate)}
+              onClick={this.onAddTask}
             >
               New Task
             </Button>