Enable column edition, and fix ordering (#683)

* Enable column edition, and fix ordering * Move queries to services * Add total amounts for board columns * Refactor totals selector as a family * Fix 0-index issue * Lint * Rename selector * Remove useless header * Address PR comments * Optimistically update board column names
2023-07-15 19:32:16 -07:00
parent be21392737
commit 91c8068db1
43 changed files with 299 additions and 88 deletions
@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+
+import { useScopedHotkeys } from '@/lib/hotkeys/hooks/useScopedHotkeys';
+import { useSetHotkeyScope } from '@/lib/hotkeys/hooks/useSetHotkeyScope';
+
+import { ColumnHotkeyScope } from './ColumnHotkeyScope';
+
+const StyledEditTitleInput = styled.input`
+  background-color: transparent;
+  border: none;
+  &::placeholder,
+  &::-webkit-input-placeholder {
+    color: ${({ theme }) => theme.font.color.light};
+    font-family: ${({ theme }) => theme.font.family};
+    font-weight: ${({ theme }) => theme.font.weight.medium};
+  }
+  color: ${({ color }) => color};
+  &:focus {
+    color: ${({ color }) => color};
+    font-weight: ${({ theme }) => theme.font.weight.medium};
+    line-height: ${({ theme }) => theme.text.lineHeight};
+  }
+  margin: 0;
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  outline: none;
+`;
+
+export function EditColumnTitleInput({
+  color,
+  value,
+  onChange,
+  toggleEditMode,
+}: {
+  color?: string;
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  toggleEditMode: () => void;
+}) {
+  const setHotkeyScope = useSetHotkeyScope();
+  setHotkeyScope(ColumnHotkeyScope.EditColumnName, { goto: false });
+
+  useScopedHotkeys('enter', toggleEditMode, ColumnHotkeyScope.EditColumnName);
+  useScopedHotkeys('esc', toggleEditMode, ColumnHotkeyScope.EditColumnName);
+  return (
+    <StyledEditTitleInput
+      placeholder={'Enter column name'}
+      color={color}
+      autoFocus
+      value={value}
+      onChange={onChange}
+    />
+  );
+}