Feat/rename and color picker (#780)

* WIP * Add menu for rename/color select * Add stories * Remove useless code * Fix color name, add icon for selected color * Remove useless comment * Unify color vocabulary * Fix rebase * Rename story * Improve hotkeys and imports
2023-07-20 16:45:43 -07:00
parent a2087da624
commit 9c230f448e
16 changed files with 415 additions and 103 deletions
--- a/front/src/modules/ui/board/components/BoardColumn.tsx
+++ b/front/src/modules/ui/board/components/BoardColumn.tsx
@ -1,9 +1,14 @@
-import React, { ChangeEvent } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
+import { Key } from 'ts-key-enum';

-import { debounce } from '~/utils/debounce';
+import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope';
+import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
+import { Tag } from '@/ui/tag/components/Tag';

-import { EditColumnTitleInput } from './EditColumnTitleInput';
+import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
+
+import { BoardColumnMenu } from './BoardColumnMenu';

 export const StyledColumn = styled.div<{ isFirstColumn: boolean }>`
  background-color: ${({ theme }) => theme.background.primary};
@ -29,10 +34,14 @@ const StyledHeader = styled.div`
  width: 100%;
 `;

-export const StyledColumnTitle = styled.h3`
+export const StyledColumnTitle = styled.h3<{
+  colorHexCode?: string;
+  colorName?: string;
+}>`
  align-items: center;
  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ color }) => color};
+  color: ${({ colorHexCode, colorName, theme }) =>
+    colorName ? theme.tag.text[colorName] : colorHexCode};
  display: flex;
  flex-direction: row;
  font-size: ${({ theme }) => theme.font.size.md};
@ -52,49 +61,67 @@ const StyledAmount = styled.div`
 `;

 type OwnProps = {
-  colorCode?: string;
+  color?: string;
  title: string;
  pipelineStageId?: string;
  onTitleEdit: (title: string) => void;
+  onColumnColorEdit: (color: string) => void;
  totalAmount?: number;
  children: React.ReactNode;
  isFirstColumn: boolean;
 };

 export function BoardColumn({
-  colorCode,
+  color,
  title,
  onTitleEdit,
+  onColumnColorEdit,
  totalAmount,
  children,
  isFirstColumn,
 }: OwnProps) {
-  const [isEditing, setIsEditing] = React.useState(false);
-  const [internalValue, setInternalValue] = React.useState(title);
+  const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] =
+    React.useState(false);

-  const debouncedOnUpdate = debounce(onTitleEdit, 200);
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setInternalValue(event.target.value);
-    debouncedOnUpdate(event.target.value);
-  };
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+
+  useScopedHotkeys(
+    [Key.Escape, Key.Enter],
+    handleClose,
+    BoardColumnHotkeyScope.BoardColumn,
+    [],
+  );
+
+  function handleTitleClick() {
+    setIsBoardColumnMenuOpen(true);
+    setHotkeyScopeAndMemorizePreviousScope(BoardColumnHotkeyScope.BoardColumn, {
+      goto: false,
+    });
+  }
+
+  function handleClose() {
+    goBackToPreviousHotkeyScope();
+    setIsBoardColumnMenuOpen(false);
+  }

  return (
    <StyledColumn isFirstColumn={isFirstColumn}>
-      <StyledHeader onClick={() => setIsEditing(true)}>
-        <StyledColumnTitle color={colorCode}>
-          {isEditing ? (
-            <EditColumnTitleInput
-              color={colorCode}
-              onFocusLeave={() => setIsEditing(false)}
-              value={internalValue}
-              onChange={handleChange}
-            />
-          ) : (
-            <div>{title}</div>
-          )}
-        </StyledColumnTitle>
+      <StyledHeader>
+        <Tag onClick={handleTitleClick} color={color} text={title} />
        {!!totalAmount && <StyledAmount>${totalAmount}</StyledAmount>}
      </StyledHeader>
+      {isBoardColumnMenuOpen && (
+        <BoardColumnMenu
+          onClose={() => setIsBoardColumnMenuOpen(false)}
+          onTitleEdit={onTitleEdit}
+          onColumnColorEdit={onColumnColorEdit}
+          title={title}
+          color={color}
+        />
+      )}
      {children}
    </StyledColumn>
  );
--- a/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx
+++ b/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx
@ -0,0 +1,99 @@
+import { ChangeEvent, useState } from 'react';
+import styled from '@emotion/styled';
+
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
+import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
+import { textInputStyle } from '@/ui/themes/effects';
+import { debounce } from '~/utils/debounce';
+
+export const StyledEditTitleContainer = styled.div`
+  --vertical-padding: ${({ theme }) => theme.spacing(1)};
+
+  align-items: center;
+
+  display: flex;
+  flex-direction: row;
+  height: calc(36px - 2 * var(--vertical-padding));
+  padding: var(--vertical-padding) 0;
+
+  width: calc(100%);
+`;
+
+const StyledEditModeInput = styled.input`
+  font-size: ${({ theme }) => theme.font.size.sm};
+
+  ${textInputStyle}
+
+  width: 100%;
+`;
+
+type OwnProps = {
+  onClose: () => void;
+  title: string;
+  onTitleEdit: (title: string) => void;
+  onColumnColorEdit: (color: string) => void;
+  color?: string;
+};
+
+const StyledColorSample = styled.div<{ colorName: string }>`
+  background-color: ${({ theme, colorName }) =>
+    theme.tag.background[colorName]};
+  border: 1px solid ${({ theme, colorName }) => theme.color[colorName]};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  height: 12px;
+  width: 12px;
+`;
+
+const COLOR_OPTIONS = [
+  { name: 'Green', id: 'green' },
+  { name: 'Turquoise', id: 'turquoise' },
+  { name: 'Sky', id: 'sky' },
+  { name: 'Blue', id: 'blue' },
+  { name: 'Purple', id: 'purple' },
+  { name: 'Pink', id: 'pink' },
+  { name: 'Red', id: 'red' },
+  { name: 'Orange', id: 'orange' },
+  { name: 'Yellow', id: 'yellow' },
+  { name: 'Gray', id: 'gray' },
+];
+
+export function BoardColumnEditTitleMenu({
+  onClose,
+  onTitleEdit,
+  onColumnColorEdit,
+  title,
+  color,
+}: OwnProps) {
+  const [internalValue, setInternalValue] = useState(title);
+  const debouncedOnUpdate = debounce(onTitleEdit, 200);
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setInternalValue(event.target.value);
+    debouncedOnUpdate(event.target.value);
+  };
+  return (
+    <DropdownMenuItemsContainer>
+      <StyledEditTitleContainer>
+        <StyledEditModeInput
+          value={internalValue}
+          onChange={handleChange}
+          autoFocus
+        />
+      </StyledEditTitleContainer>
+      <DropdownMenuSeparator />
+      {COLOR_OPTIONS.map((colorOption) => (
+        <DropdownMenuSelectableItem
+          key={colorOption.name}
+          onClick={() => {
+            onColumnColorEdit(colorOption.id);
+            onClose();
+          }}
+          selected={colorOption.id === color}
+        >
+          <StyledColorSample colorName={colorOption.id} />
+          {colorOption.name}
+        </DropdownMenuSelectableItem>
+      ))}
+    </DropdownMenuItemsContainer>
+  );
+}
--- a/front/src/modules/ui/board/components/BoardColumnMenu.tsx
+++ b/front/src/modules/ui/board/components/BoardColumnMenu.tsx
@ -0,0 +1,68 @@
+import { useRef, useState } from 'react';
+import styled from '@emotion/styled';
+import { IconPencil } from '@tabler/icons-react';
+
+import { icon } from '@/ui//themes/icon';
+import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
+import DropdownButton from '@/ui/filter-n-sort/components/DropdownButton';
+import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
+
+import { BoardColumnEditTitleMenu } from './BoardColumnEditTitleMenu';
+
+const StyledMenuContainer = styled.div`
+  position: absolute;
+  width: 200px;
+  z-index: 1;
+`;
+
+type OwnProps = {
+  onClose: () => void;
+  title: string;
+  color?: string;
+  onTitleEdit: (title: string) => void;
+  onColumnColorEdit: (color: string) => void;
+};
+
+export function BoardColumnMenu({
+  onClose,
+  onTitleEdit,
+  onColumnColorEdit,
+  title,
+  color,
+}: OwnProps) {
+  const [openMenu, setOpenMenu] = useState('actions');
+  const boardColumnMenuRef = useRef(null);
+
+  useListenClickOutsideArrayOfRef({
+    refs: [boardColumnMenuRef],
+    callback: onClose,
+  });
+
+  return (
+    <StyledMenuContainer ref={boardColumnMenuRef}>
+      <DropdownMenu>
+        {openMenu === 'actions' && (
+          <DropdownMenuItemsContainer>
+            <DropdownMenuSelectableItem onClick={() => setOpenMenu('title')}>
+              <DropdownButton.StyledIcon>
+                <IconPencil size={icon.size.md} stroke={icon.stroke.sm} />
+              </DropdownButton.StyledIcon>
+              Rename
+            </DropdownMenuSelectableItem>
+          </DropdownMenuItemsContainer>
+        )}
+        {openMenu === 'title' && (
+          <BoardColumnEditTitleMenu
+            color={color}
+            onClose={onClose}
+            onTitleEdit={onTitleEdit}
+            onColumnColorEdit={onColumnColorEdit}
+            title={title}
+          />
+        )}
+      </DropdownMenu>
+    </StyledMenuContainer>
+  );
+}
--- a/front/src/modules/ui/board/components/EditColumnTitleInput.tsx
+++ b/front/src/modules/ui/board/components/EditColumnTitleInput.tsx
@ -1,64 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-
-import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
-import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
-
-import { ColumnHotkeyScope } from './ColumnHotkeyScope';
-
-const StyledEditTitleInput = styled.input`
-  background-color: transparent;
-  border: none;
-  color: ${({ color }) => color};
-  font-family: ${({ theme }) => theme.font.family};
-  font-size: ${({ theme }) => theme.font.size.md};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-
-  &::placeholder {
-    color: ${({ theme }) => theme.font.color.light};
-    font-family: ${({ theme }) => theme.font.family};
-    font-weight: ${({ theme }) => theme.font.weight.medium};
-  }
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-
-  margin: 0;
-  outline: none;
-  padding: 0;
-`;
-
-export function EditColumnTitleInput({
-  color,
-  value,
-  onChange,
-  onFocusLeave,
-}: {
-  color?: string;
-  value: string;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  onFocusLeave: () => void;
-}) {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-
-  useListenClickOutsideArrayOfRef({
-    refs: [inputRef],
-    callback: () => {
-      onFocusLeave();
-    },
-  });
-  const setHotkeyScope = useSetHotkeyScope();
-  setHotkeyScope(ColumnHotkeyScope.EditColumnName, { goto: false });
-
-  useScopedHotkeys('enter', onFocusLeave, ColumnHotkeyScope.EditColumnName);
-  useScopedHotkeys('esc', onFocusLeave, ColumnHotkeyScope.EditColumnName);
-  return (
-    <StyledEditTitleInput
-      ref={inputRef}
-      placeholder={'Enter column name'}
-      color={color}
-      autoFocus
-      value={value}
-      onChange={onChange}
-    />
-  );
-}
--- a/front/src/modules/ui/board/components/stories/BoardColumnEditTitleMenu.story.tsx
+++ b/front/src/modules/ui/board/components/stories/BoardColumnEditTitleMenu.story.tsx
@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { BoardColumnEditTitleMenu } from '../BoardColumnEditTitleMenu';
+
+const meta: Meta<typeof BoardColumnEditTitleMenu> = {
+  title: 'UI/Board/BoardColumnMenu',
+  component: BoardColumnEditTitleMenu,
+};
+
+export default meta;
+type Story = StoryObj<typeof BoardColumnEditTitleMenu>;
+
+export const AllTags: Story = {
+  render: getRenderWrapperForComponent(
+    <BoardColumnEditTitleMenu
+      color="green"
+      title={'Column title'}
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onClose={() => {}}
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onTitleEdit={() => {}}
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onColumnColorEdit={() => {}}
+    />,
+  ),
+};