feat: edit groups

apps/client/src/common/components/input/input/Input.module.scss

@@ -9,12 +9,13 @@
   border: 1px solid transparent;
 
   padding-inline: 0.5em;
+  outline: none;
 
   &:hover:not(:disabled) {
     background-color: $gray-1100;
   }
 
-  &:focus {
+  &:focus:not(:read-only) {
     background-color: $gray-1000;
     border: 1px solid $blue-500;
   }
@@ -26,6 +27,7 @@
 
   &::placeholder {
     color: $gray-500;
+    letter-spacing: 0;
   }
 }
 
@@ -36,3 +38,7 @@
 .large {
   height: 2.5rem;
 }
+
+.fluid {
+  width: 100%;
+}

apps/client/src/common/components/input/input/Input.tsx

@@ -4,20 +4,23 @@ import { cx } from '../../../utils/styleUtils';
 
 import style from './Input.module.scss';
 
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   variant?: 'subtle';
   height?: 'medium' | 'large';
+  fluid?: boolean;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { className, variant = 'subtle', height = 'medium', ...inputProps },
+  { className, variant = 'subtle', height = 'medium', fluid, ...inputProps },
   ref,
 ) {
   return (
     <input
       ref={ref}
       type='text'
-      className={cx([style.input, style[variant], style[height], className])}
+      autoCorrect='off'
+      autoComplete='off'
+      className={cx([style.input, style[variant], style[height], fluid && style.fluid, className])}
       {...inputProps}
     />
   );

apps/client/src/common/components/input/time-input/NullableTimeInput.tsx

@@ -0,0 +1,135 @@
+import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { millisToString, parseUserTime } from 'ontime-utils';
+
+import { cx } from '../../../utils/styleUtils';
+import Input from '../input/Input';
+
+import style from './TimeInput.module.scss';
+
+interface NullableTimeInputProps<T extends string> {
+  id?: T;
+  name: T;
+  submitHandler: (field: T, value: string) => void;
+  time?: number | null;
+  emptyDisplay: string;
+  placeholder?: string;
+  disabled?: boolean;
+  align?: 'left' | 'center';
+  className?: string;
+}
+
+export default function NullableTimeInput<T extends string>(props: NullableTimeInputProps<T>) {
+  const { id, name, submitHandler, time, emptyDisplay, placeholder, disabled, align = 'center', className } = props;
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [value, setValue] = useState<string>('');
+  const ignoreChange = useRef(false);
+
+  /**
+   * @description Resets input value to given
+   */
+  const resetValue = useCallback(() => {
+    if (typeof time !== 'number' || isNaN(time)) {
+      setValue(emptyDisplay);
+    } else {
+      setValue(millisToString(time));
+    }
+  }, [emptyDisplay, time]);
+
+  /**
+   * @description Selects input text on focus
+   */
+  const handleFocus = useCallback(() => {
+    inputRef.current?.select();
+  }, []);
+
+  /**
+   * @description Submit handler
+   * @param {string} newValue
+   */
+  const handleSubmit = useCallback(
+    (newValue: string) => {
+      // skip if user deleted and time is already null
+      if (newValue === '' && time === null) {
+        return false;
+      }
+
+      // skip if the value evaluates to the same thing
+      const valueInMillis = parseUserTime(newValue);
+      if (valueInMillis === time) {
+        return false;
+      }
+
+      submitHandler(name, newValue);
+      return true;
+    },
+    [name, submitHandler, time],
+  );
+
+  /**
+   * @description Prepare time fields
+   * @param {string} value string to be parsed
+   */
+  const validateAndSubmit = useCallback(
+    (newValue: string) => {
+      const success = handleSubmit(newValue);
+      if (!success) {
+        resetValue();
+      }
+    },
+    [handleSubmit, resetValue],
+  );
+
+  /**
+   * @description Handles common keys for submit and cancel
+   * @param {KeyboardEvent} event
+   */
+  const onKeyDownHandler = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        inputRef.current?.blur();
+      }
+      if (event.key === 'Escape') {
+        ignoreChange.current = true;
+        inputRef.current?.blur();
+        resetValue();
+      }
+    },
+    [resetValue],
+  );
+
+  const onBlurHandler = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      if (ignoreChange.current) {
+        ignoreChange.current = false;
+        return;
+      }
+      validateAndSubmit((event.target as HTMLInputElement).value);
+    },
+    [validateAndSubmit],
+  );
+
+  useEffect(() => {
+    resetValue();
+  }, [resetValue]);
+
+  return (
+    <Input
+      id={id}
+      disabled={disabled}
+      ref={inputRef}
+      data-testid={`time-input-${name}`}
+      className={cx([style.timeInput, className])}
+      placeholder={placeholder}
+      onFocus={handleFocus}
+      onChange={(event) => setValue(event.target.value)}
+      onBlur={onBlurHandler}
+      onKeyDown={onKeyDownHandler}
+      value={value}
+      maxLength={8}
+      autoComplete='off'
+      style={{
+        textAlign: align,
+      }}
+    />
+  );
+}

apps/client/src/common/components/input/time-input/TimeInput.module.scss

@@ -2,6 +2,5 @@
   width: 100%;
   max-width: 7.5em;
   letter-spacing: 1px;
-  font-size: 1rem;
   font-variant-numeric: tabular-nums;
 }

apps/client/src/common/components/input/time-input/TimeInput.tsx

@@ -1,7 +1,6 @@
 import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { millisToString, parseUserTime } from 'ontime-utils';
 
-import { useEmitLog } from '../../../stores/logger';
 import { cx } from '../../../utils/styleUtils';
 import Input from '../input/Input';
 
@@ -19,8 +18,7 @@ interface TimeInputProps<T extends string> {
 }
 
 export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
-  const { id, name, submitHandler, time = 0, placeholder, disabled, align = 'center', className } = props;
-  const { emitError } = useEmitLog();
+  const { id, name, submitHandler, time, placeholder, disabled, align = 'center', className } = props;
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
   const ignoreChange = useRef(false);
@@ -29,16 +27,12 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
    * @description Resets input value to given
    */
   const resetValue = useCallback(() => {
-    try {
-      if (typeof time !== 'number' || isNaN(time)) {
-        throw new Error(`Invalid time value: ${time}`);
-      }
+    if (typeof time !== 'number' || isNaN(time)) {
+      setValue('00:00:00');
+    } else {
       setValue(millisToString(time));
-    } catch (error) {
-      setValue(millisToString(0));
-      emitError(`Unable to parse time ${time}: ${error}`);
     }
-  }, [emitError, time]);
+  }, [time]);
 
   /**
    * @description Selects input text on focus
@@ -119,9 +113,8 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
   );
 
   useEffect(() => {
-    if (time == null) return;
     resetValue();
-  }, [resetValue, time]);
+  }, [resetValue]);
 
   return (
     <Input

apps/client/src/common/components/select/Select.module.scss

@@ -92,17 +92,15 @@
 }
 
 .scrollArrow {
+  background-color: $gray-1000;
+  color: $ui-white;
+
   width: 100%;
-  background: canvas;
   z-index: 1;
-  text-align: center;
-  cursor: default;
-  border-radius: 0.375rem;
   height: 1rem;
-  font-size: 0.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  font-size: 0.5rem;
+  display: grid;
+  place-content: center;
 
   &::before {
     content: '';
@@ -113,6 +111,7 @@
   }
 
   &[data-direction='up'] {
+    border-radius: 3px 3px 0 0;
     &::before {
       top: -100%;
     }
@@ -120,6 +119,7 @@
 
   &[data-direction='down'] {
     bottom: 0;
+    border-radius: 0 0 3px 3px;
 
     &::before {
       bottom: -100%;

apps/client/src/common/components/select/Select.tsx

@@ -9,6 +9,7 @@ interface SelectProps<T extends string | null = string> {
   options: {
     value: NonNullable<T>;
     label: string;
+    disabled?: boolean; // exposed to allow creating a non-selectable option
   }[];
   placeholder?: string;
   value?: T;

apps/client/src/common/components/switch/Switch.module.scss

@@ -0,0 +1,52 @@
+.switch {
+  position: relative;
+  display: flex;
+  align-items: center;
+  
+  /* Reset and base styles */
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 99px;
+  background-color: $gray-1100;
+  
+  /* Transitions */
+  transition: background-color 125ms cubic-bezier(0.26, 0.75, 0.38, 0.45);
+
+  /* States */
+  &[data-checked] {
+    background-color: $blue-700;
+    box-shadow: none;
+  }
+
+  &:focus {
+    border-color: $blue-500;
+  }
+}
+
+.medium {
+  padding: 2px;
+  --width: calc(2.5rem + 4px);
+  --height: 1.5rem;
+  width: var(--width);
+  height: var(--height);
+}
+
+.large {
+  padding: 3px;
+  --width: calc(2.75rem + 6px);
+  --height: 1.75rem;
+  width: var(--width);
+  height: var(--height);
+}
+
+.thumb {
+  aspect-ratio: 1 / 1;
+  height: 100%;
+  border-radius: 99px;
+  background-color: $ui-white;
+  transition: translate 150ms ease;
+
+  &[data-checked] {
+    translate: calc(var(--width) - var(--height)) 0;
+  }
+}

apps/client/src/common/components/switch/Switch.tsx

@@ -0,0 +1,17 @@
+import { Switch as BaseSwitch } from '@base-ui-components/react/switch';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './Switch.module.scss';
+
+interface SwitchProps extends BaseSwitch.Root.Props {
+  size?: 'medium' | 'large';
+}
+
+export default function Switch({ size = 'medium', ...switchProps }: SwitchProps) {
+  return (
+    <BaseSwitch.Root className={cx([style.switch, style[size]])} {...switchProps}>
+      <BaseSwitch.Thumb className={style.thumb} />
+    </BaseSwitch.Root>
+  );
+}

apps/client/src/common/hooks/useEntryAction.ts

@@ -790,7 +790,7 @@ function optimisticDeleteEntries(entryIds: EntryId[], rundown: Rundown) {
       order = order.filter((id) => id !== entry.id);
     } else {
       const parent = entries[entry.parent] as OntimeBlock;
-      parent.events = parent.events.filter((event) => event !== entry.id);
+      parent.entries = parent.entries.filter((parentEntry) => parentEntry !== entry.id);
     }
 
     delete entries[entry.id];