cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-13 11:23:50 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: update timers (#729)

Browse Source 
* refactor: remove duplication

* refactor: previous times

* refactor: event patching
This commit is contained in:
Carlos Valente
2024-01-25 13:36:45 +01:00
committed by GitHub
parent e748bff0dd
commit 74e1ae609c
32 changed files with 448 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/input/time-input/TimeInputWithButton.tsx
+11 -55
View File
@@ -1,83 +1,39 @@
import { useMemo } from 'react';
import { Button, InputGroup, InputLeftElement, Tooltip } from '@chakra-ui/react';
import { tooltipDelayFast } from '../../../../ontimeConfig';
import { cx } from '../../../utils/styleUtils';
import { TimeEntryField } from '../../../utils/timesManager';
import TimeInput from './TimeInput';
import style from './TimeInputWithButton.module.scss';
interface TimeInputProps {
id?: TimeEntryField;
name: TimeEntryField;
submitHandler: (field: TimeEntryField, value: number) => void;
interface TimeInputWithButtonProps<T extends string> {
name: T;
submitHandler: (field: T, value: string) => void;
time?: number;
delay?: number;
hasDelay?: boolean;
placeholder: string;
previousEnd?: number;
warning?: string;
}
function ButtonInitial(name: TimeEntryField) {
if (name === 'timeStart') return 'S';
if (name === 'timeEnd') return 'E';
if (name === 'durationOverride') return 'D';
if (name === 'timeWarning') return 'Wa';
if (name === 'timeDanger') return 'Da';
return '';
}
export default function TimeInputWithButton<T extends string>(props: TimeInputWithButtonProps<T>) {
const { name, submitHandler, time, hasDelay, placeholder } = props;
function ButtonTooltip(name: TimeEntryField, warning?: string) {
if (name === 'timeStart') return `Start${warning ? `: ${warning}` : ''}`;
if (name === 'timeEnd') return `End${warning ? `: ${warning}` : ''}`;
if (name === 'durationOverride') return `Duration${warning ? `: ${warning}` : ''}`;
if (name === 'timeWarning') return `Warning${warning ? `: ${warning}` : ''}`;
if (name === 'timeDanger') return `Danger${warning ? `: ${warning}` : ''}`;
return '';
}
export default function TimeInputWithButton(props: TimeInputProps) {
const { id, name, submitHandler, time = 0, delay = 0, placeholder, previousEnd = 0, warning } = props;
const isDelayed = delay !== 0;
const inputClasses = cx([style.timeInput, isDelayed ? style.delayed : null]);
const buttonClasses = cx([style.inputButton, isDelayed ? style.delayed : null, warning ? style.warn : null]);
const TooltipLabel = useMemo(() => {
return ButtonTooltip(name, warning);
}, [name, warning]);
const ButtonText = useMemo(() => {
return ButtonInitial(name);
}, [name]);
const inputClasses = cx([style.timeInput, hasDelay ? style.delayed : null]);
return (
<InputGroup size='sm' className={inputClasses}>
<InputLeftElement className={style.inputLeft}>
<Tooltip label={TooltipLabel} openDelay={tooltipDelayFast} variant='ontime-ondark'>
<Button
size='sm'
variant='ontime-subtle-white'
className={buttonClasses}
tabIndex={-1}
border={isDelayed ? '1px solid #E69056' : '1px solid transparent'}
borderRight='1px solid transparent'
borderRadius='2px 0 0 2px'
>
{ButtonText}
<Tooltip label={placeholder} openDelay={tooltipDelayFast} variant='ontime-ondark'>
<Button size='sm' variant='ontime-subtle-white' className={style.inputButton} tabIndex={-1}>
{placeholder.charAt(0)}
</Button>
</Tooltip>
</InputLeftElement>
<TimeInput
id={id}
<TimeInput<T>
name={name}
submitHandler={submitHandler}
time={time}
delay={delay}
placeholder={placeholder}
previousEnd={previousEnd}
className={style.inputField}
/>
</InputGroup>