fix: regular retro column name (#1166)

xgeekshq · Feb 28, 2023 · 76551c0 · 76551c0
1 parent 3d16fb8
commit 76551c0
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 18 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -55,6 +55,7 @@
     "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.4",
     "react-hook-form": "^7.29.0",
+    "react-resize-detector": "^8.0.4",
     "react-select": "^5.7.0",
     "recoil": "^0.7.6",
     "socket.io-client": "^4.4.1",

diff --git a/frontend/src/components/Board/AddCardOrComment.tsx b/frontend/src/components/Board/AddCardOrComment.tsx
@@ -119,7 +119,8 @@ const AddCard = React.memo<AddCardProps>(
         : '$primaryBase';
 
     const disabledButton =
-      watchCardTextInput.text?.trim().length === 0 || watchCardTextInput.text === placeholder;
+      watchCardTextInput.text?.trim().length === 0 ||
+      watchCardTextInput.text.trim() === placeholder;
 
     const handleClear = () => {
       if ((isUpdate || !isCard) && cancelUpdate) {

diff --git a/frontend/src/components/Board/Column/Column.tsx b/frontend/src/components/Board/Column/Column.tsx
@@ -9,10 +9,12 @@ import { useSetRecoilState } from 'recoil';
 import { filteredColumnsState } from '@/store/board/atoms/filterColumns';
 import { countColumnCards } from '@/helper/board/countCards';
 import Icon from '@/components/Primitives/Icon';
+import Tooltip from '@/components/Primitives/Tooltip';
+import { useResizeDetector } from 'react-resize-detector';
 import AddCardOrComment from '../AddCardOrComment';
 import CardsList from './CardsList';
 import SortMenu from './partials/SortMenu';
-import { CardsContainer, Container, OuterContainer, Title } from './styles';
+import { CardsContainer, Container, OuterContainer, Title, TitleContainer } from './styles';
 import OptionsMenu from './partials/OptionsMenu';
 import UpdateColumnDialog from './partials/UpdateColumnDialog';
 import AlertDeleteColumn from './partials/AlertDeleteColumn';
@@ -26,6 +28,7 @@ type ColumMemoProps = {
   columnIndex: number;
   isSubBoard?: boolean;
   phase?: string;
+  hasMoreThanThreeColumns: boolean;
 } & ColumnBoardType;
 
 const Column = React.memo<ColumMemoProps>(
@@ -52,6 +55,7 @@ const Column = React.memo<ColumMemoProps>(
     columnIndex,
     isSubBoard,
     phase,
+    hasMoreThanThreeColumns,
   }) => {
     const [filter, setFilter] = useState<'asc' | 'desc' | undefined>();
     const setFilteredColumns = useSetRecoilState(filteredColumnsState);
@@ -61,6 +65,8 @@ const Column = React.memo<ColumMemoProps>(
       deleteCards: false,
     });
     const [dialogType, setDialogType] = useState('ColumnName');
+    const [showTooltip, setShowTooltip] = useState(false);
+    const { width, ref } = useResizeDetector({ handleWidth: true });
 
     const handleDialogNameChange = (open: boolean, type: string) => {
       setOpenDialog({ columnName: open, deleteColumn: false, deleteCards: false });
@@ -116,6 +122,14 @@ const Column = React.memo<ColumMemoProps>(
       }
     }, [columnId, filter, setFilteredColumns]);
 
+    useEffect(() => {
+      setShowTooltip(false);
+
+      if (ref.current && ref.current.offsetWidth < ref.current?.scrollWidth) {
+        setShowTooltip(true);
+      }
+    }, [ref, width]);
+
     return (
       <>
         <Draggable
@@ -130,13 +144,29 @@ const Column = React.memo<ColumMemoProps>(
                 {(provided) => (
                   <Container direction="column" elevation="2">
                     <Flex css={{ pt: '$20', px: '$20', pb: '$16' }} justify="between">
-                      <Flex>
+                      <Flex css={{ width: '100%' }}>
                         {hasAdminRole && isRegularBoard && (
                           <Flex {...providedColumn.dragHandleProps}>
                             <Icon name="arrange" size={24} />
                           </Flex>
                         )}
-                        <Title heading="4">{title}</Title>
+                        <TitleContainer
+                          css={{
+                            width: hasMoreThanThreeColumns ? '$130' : '$237',
+                          }}
+                        >
+                          {showTooltip ? (
+                            <Tooltip content={title}>
+                              <Title heading="4" ref={ref}>
+                                {title}
+                              </Title>
+                            </Tooltip>
+                          ) : (
+                            <Title heading="4" ref={ref}>
+                              {title}
+                            </Title>
+                          )}
+                        </TitleContainer>
                         <Text
                           color="primary400"
                           size="xs"
@@ -145,6 +175,7 @@ const Column = React.memo<ColumMemoProps>(
                             border: '1px solid $colors$primary100',
                             px: '$8',
                             py: '$2',
+                            ml: '$10',
                           }}
                         >
                           {countColumnCards(cards)} cards

diff --git a/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx b/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
@@ -54,7 +54,11 @@ const UpdateColumnDialog: React.FC<UpdateColumnNameProps> = ({
     mode: 'onChange',
     reValidateMode: 'onChange',
     defaultValues: {
-      title: columnTitle || '',
+      title: columnTitle,
+      text: cardText || 'Write your comment here...',
+    },
+    values: {
+      title: columnTitle,
       text: cardText || 'Write your comment here...',
     },
     resolver: joiResolver(SchemaChangeColumnName),

diff --git a/frontend/src/components/Board/Column/styles.tsx b/frontend/src/components/Board/Column/styles.tsx
@@ -43,8 +43,19 @@ const OuterContainer = styled(Flex, {
   width: '100%',
 });
 
+const TitleContainer = styled(Flex, {
+  '@media (min-width: 1750px)': { width: 'fit-content !important' },
+  '@media (max-width: 1300px)': { width: '$150 !important' },
+});
+
 const Title = styled(Text, {
   px: '$8',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  '@hover': {
+    cursor: 'default',
+  },
 });
 
-export { CardsContainer, Container, OuterContainer, Title };
+export { CardsContainer, Container, OuterContainer, TitleContainer, Title };
diff --git a/frontend/src/components/Board/DragDropArea/index.tsx b/frontend/src/components/Board/DragDropArea/index.tsx
@@ -18,7 +18,20 @@ import { boardInfoState } from '@/store/board/atoms/board.atom';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import ColumnType from '@/types/column';
 
-const Container = styled(Flex, { width: '100%', display: 'inline-flex', mb: '$32' });
+const Container = styled(Flex, {
+  boxSizing: 'border-box',
+  marginBottom: '$32',
+  overflowY: 'scroll',
+  width: '100%',
+  position: 'relative',
+  '@media (max-width: 1350px)': {
+    overflowY: 'auto',
+    minHeight: '62vh',
+  },
+  '@media (min-height: 800px)': {
+    minHeight: '75vh',
+  },
+});
 
 type Props = {
   userId: string;
@@ -181,6 +194,7 @@ const DragDropArea: React.FC<Props> = ({
   };
 
   const isMainboard = !board.isSubBoard && board.dividedBoards.length > 0;
+  const hasMoreThanThreeColumns = !!(board.columns.length > 3);
 
   const ColumnnContainer = (
     <Droppable
@@ -190,10 +204,17 @@ const DragDropArea: React.FC<Props> = ({
       isDropDisabled={isMainboard || !hasAdminRole}
     >
       {(provided) => (
-        <Container css={{ gap: '$24' }} ref={provided.innerRef} {...provided.droppableProps}>
+        <Container
+          css={{
+            gap: '$24',
+          }}
+          ref={provided.innerRef}
+          {...provided.droppableProps}
+        >
           {board.columns.map((column, index) => (
             <Column
               key={column._id}
+              hasMoreThanThreeColumns={hasMoreThanThreeColumns}
               boardId={board._id}
               cards={column.cards}
               color={column.color}

diff --git a/frontend/src/components/Board/RegularBoard/index.tsx b/frontend/src/components/Board/RegularBoard/index.tsx
@@ -119,7 +119,6 @@ const RegularBoard = ({
             </>
           )}
         </Flex>
-
         <DragDropArea
           board={board}
           socketId={socketId}

diff --git a/frontend/src/components/Board/Settings/partials/Columns/ColumnBoxAndDelete.tsx b/frontend/src/components/Board/Settings/partials/Columns/ColumnBoxAndDelete.tsx
@@ -13,7 +13,7 @@ const ColumnBoxAndDelete = ({ remove, title, index, disableDeleteColumn }: Props
   <Flex gap="20">
     <Input
       id={`formColumns.${index}.title`}
-      maxChars="30"
+      maxChars="15"
       placeholder={`Column ${index + 1}`}
       showCount
       type="text"

diff --git a/frontend/src/components/Primitives/TextArea.tsx b/frontend/src/components/Primitives/TextArea.tsx
@@ -110,6 +110,7 @@ const TextArea: React.FC<ResizableTextAreaProps> = ({ id, placeholder, disabled,
     if (!isValueEmpty) return 'valid';
 
     return 'default';
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dirtyFields[id], errors[id], id, isValueEmpty]);
 
   useEffect(() => {

diff --git a/frontend/src/schema/schemaUpdateBoardForm.ts b/frontend/src/schema/schemaUpdateBoardForm.ts
@@ -16,10 +16,10 @@ const SchemaUpdateBoard = Joi.object({
     .items(
       Joi.object()
         .keys({
-          title: Joi.string().required().trim().max(30).messages({
+          title: Joi.string().required().trim().max(15).messages({
             'any.required': 'Please enter the Column name',
             'string.empty': 'Please enter the Column name',
-            'string.max': 'Maximum of 30 characters',
+            'string.max': 'Maximum of 15 characters',
           }),
         })
         .unknown(true),

diff --git a/frontend/src/styles/pages/boards/board.styles.tsx b/frontend/src/styles/pages/boards/board.styles.tsx
@@ -3,9 +3,7 @@ import { styled } from '@/styles/stitches/stitches.config';
 import Flex from '@/components/Primitives/Flex';
 
 const Container = styled(Flex, {
-  // remove 108px from header to the 100vh
   overflow: 'hidden',
-
   alignItems: 'flex-start',
   justifyContent: 'center',
   px: '$36',