Kanban card creation revamp #7169

ehconitin · 2024-09-20T05:08:52Z

ehconitin · 2024-09-20T05:15:40Z

@Bonapara work is still in progress but let me know your thoughts from product perspective.
Thanks

2024-09-20.10-43-09.mp4

Bonapara · 2024-09-20T07:16:50Z

Hi @ehconitin, thanks! Could you use the floating input instead of placing the input within the card?

ehconitin · 2024-09-20T09:17:53Z

@Bonapara will do!
@Bonapara Question -
we do not have to set name for opportunity kanban right? it will still take the company/relations name?
@lucasbordeau could you let me know if this approach is correct?

2024-09-20.14-43-36.mp4

Bonapara · 2024-09-20T09:41:40Z

@ehconitin you're right. When creating an opportunity, the card name should be the company name. This only applies to cards on other kanbans where users must set a record name manually.

ehconitin · 2024-09-20T14:15:54Z

2024-09-20.19-44-03.mp4

Bonapara · 2024-09-20T15:58:58Z

Hi @ehconitin, thanks! Could you use the floating input instead of placing the input within the card?

Great! Can you apply this design? I was also wondering if we can make the stage appear on the card before the title is set and the record saved.

ehconitin · 2024-09-20T16:05:13Z

@Bonapara
could u reshare the image, it seems to be broken on my side. refresh isnt helping

Ah nvm got it.

ehconitin · 2024-09-20T16:06:58Z

Hi @ehconitin, thanks! Could you use the floating input instead of placing the input within the card?

Great! Can you apply this design? I was also wondering if we can make the stage appear on the card before the title is set and the record saved.

Yup, on it!

ehconitin · 2024-09-20T18:05:33Z

@Bonapara
I think having stage appear before creating a card will have many challenges, but let me ask @lucasbordeau if he could think of an easier way!
Floating input is done btw!

2024-09-20.23-29-41.mp4

ehconitin · 2024-09-21T17:14:38Z

Should I address #7002 in this PR in a similar manner, or handle it separately? Let me know what works best!

greptile-apps

PR Summary

This pull request implements a new feature for creating records directly on the Kanban board, addressing issue #6957. Here's a summary of the key changes:

Added a new text input for creating records in the RecordBoardCard component
Updated RecordBoardColumnCardsContainer, RecordBoardColumnHeader, and RecordBoardColumnNewButton to support the new card creation functionality
Introduced new state management with recordBoardNewRecordByColumnIdComponentFamilyState and recordBoardNewRecordByColumnIdSelector
Modified the useAddNewCard hook to handle creating a new card with a title and position
Updated RecordIndexPageKanbanAddButton to support creating a record directly on the Kanban board without navigating to the record detail page

These changes align with the desired behavior described in the issue, allowing users to set a record name when creating a new card on the Kanban board, similar to the table view functionality.

_{8 file(s) reviewed, 8 comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps · 2024-09-21T17:11:24Z

...ront/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx

+  const handleCreate = (text: string) => {
+    if (text.trim() !== '' && position !== undefined) {
+      handleAddNewCardClick(text.trim(), position);
+      setNewRecordName('');
+      onCreateSuccess?.();
+    }
+  };


logic: Add error handling for failed card creation

...enty-front/src/modules/object-record/record-board/record-board-column/hooks/useAddNewCard.ts

...ules/object-record/record-board/states/recordBoardNewRecordByColumnIdComponentFamilyState.ts

...y-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx

packages/twenty-front/src/modules/ui/input/components/TextInput.tsx

ehconitin · 2024-09-24T11:35:25Z

Label identifier issue fixed!

2024-09-24.17-03-50.mp4

...y-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx

Bonapara · 2024-09-24T14:18:55Z

There is not floating input yet @ehconitin right?

ehconitin · 2024-09-25T05:14:20Z

@Bonapara there was a floating input already but styles like box shadow were missing, fixed it!

ehconitin · 2024-09-25T07:49:59Z

@Bonapara
#7163

All inline field heights should be 24px, as they are on record pages.

There should be a 2px gap between inline field rows.

bosiraphael · 2024-09-25T14:07:42Z

...les/object-record/record-board/record-board-column/components/RecordBoardColumnNewButton.tsx

+  const { visibleFieldDefinitionsState } = useRecordBoardStates();
+
+  const visibleFieldDefinitions = useRecoilValue(
+    visibleFieldDefinitionsState(),
+  );
+  const labelIdentifierField = visibleFieldDefinitions.find(
+    (field) => field.isLabelIdentifier,
+  );
+
+  const newRecord = useRecoilValue(
+    recordBoardNewRecordByColumnIdSelector({
+      familyKey: columnId,
+      scopeId: columnId,
+    }),
+  );
+
+  const { handleAddNewCardClick, handleCreateSuccess } = useAddNewCard();
+
+  const handleNewButtonClick = () => {
+    handleAddNewCardClick(
+      labelIdentifierField?.label ?? '',
+      '',
+      'last',
+      columnId,
+    );
+  };
+
+  if (newRecord.isCreating && newRecord.position === 'last') {
+    return (
+      <RecordBoardCard
+        isCreating={true}
+        onCreateSuccess={() => handleCreateSuccess('last')}
+        position="last"
+      />
+    );
+  }
+


Seems like duplicate code with packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx

I will refactor them!

@bosiraphael Done! I had to create a new hook due to a scoping issue, as it couldn't be kept within useAddNewCard

bosiraphael

LGTM :)

github-actions · 2024-09-25T16:31:40Z

Thanks @ehconitin for your contribution!
This marks your 36th PR on the repo. You're top 1% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter

initial card creation for non opportunity boards

9833a8d

new atom and selector for card creation

1ad3178

refactor and position specific rendering

df66082

lint

fe3820b

floating input

8d87d1c

ehconitin marked this pull request as ready for review September 21, 2024 17:10

greptile-apps bot reviewed Sep 21, 2024

View reviewed changes

ehconitin and others added 2 commits September 23, 2024 13:29

Merge branch 'twentyhq:main' into KanbanCardCreation

2fe3378

some corrections and refactor

5e19e68

ehconitin commented Sep 23, 2024

View reviewed changes

packages/twenty-front/src/modules/ui/input/components/TextInput.tsx Show resolved Hide resolved

ehconitin and others added 2 commits September 24, 2024 15:36

Merge branch 'twentyhq:main' into KanbanCardCreation

f908565

some refactors and labelIdentifier issue

7f859a1

bosiraphael self-assigned this Sep 24, 2024

bosiraphael reviewed Sep 24, 2024

View reviewed changes

...y-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx Outdated Show resolved Hide resolved

styles and some corrections

d5d9f4c

ehconitin and others added 2 commits September 25, 2024 12:48

Merge branch 'twentyhq:main' into KanbanCardCreation

62f0d10

twentyhq#7163 styles corrections

021c9ff

bosiraphael reviewed Sep 25, 2024

View reviewed changes

refactor actions - new hook because cant use useAddNewCrd, out of scope

71aa634

ehconitin requested a review from bosiraphael September 25, 2024 15:47

bosiraphael approved these changes Sep 25, 2024

View reviewed changes

bosiraphael merged commit 7752510 into twentyhq:main Sep 25, 2024
5 of 11 checks passed

ehconitin mentioned this pull request Sep 25, 2024

Kanban card inline field design improvements #7163

Closed

ehconitin deleted the KanbanCardCreation branch October 10, 2024 10:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Kanban card creation revamp #7169

Kanban card creation revamp #7169

ehconitin commented Sep 20, 2024 •

edited

Loading

ehconitin commented Sep 20, 2024

Bonapara commented Sep 20, 2024

ehconitin commented Sep 20, 2024

Bonapara commented Sep 20, 2024

ehconitin commented Sep 20, 2024

Bonapara commented Sep 20, 2024

ehconitin commented Sep 20, 2024 •

edited

Loading

ehconitin commented Sep 20, 2024

ehconitin commented Sep 20, 2024 •

edited

Loading

ehconitin commented Sep 21, 2024

greptile-apps bot left a comment

greptile-apps bot Sep 21, 2024

ehconitin commented Sep 24, 2024

Bonapara commented Sep 24, 2024

ehconitin commented Sep 25, 2024

ehconitin commented Sep 25, 2024

bosiraphael Sep 25, 2024

ehconitin Sep 25, 2024

ehconitin Sep 25, 2024

bosiraphael left a comment

github-actions bot commented Sep 25, 2024

Kanban card creation revamp #7169

Kanban card creation revamp #7169

Conversation

ehconitin commented Sep 20, 2024 • edited Loading

ehconitin commented Sep 20, 2024

Bonapara commented Sep 20, 2024

ehconitin commented Sep 20, 2024

Bonapara commented Sep 20, 2024

ehconitin commented Sep 20, 2024

Bonapara commented Sep 20, 2024

ehconitin commented Sep 20, 2024 • edited Loading

ehconitin commented Sep 20, 2024

ehconitin commented Sep 20, 2024 • edited Loading

ehconitin commented Sep 21, 2024

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Sep 21, 2024

Choose a reason for hiding this comment

ehconitin commented Sep 24, 2024

Bonapara commented Sep 24, 2024

ehconitin commented Sep 25, 2024

ehconitin commented Sep 25, 2024

bosiraphael Sep 25, 2024

Choose a reason for hiding this comment

ehconitin Sep 25, 2024

Choose a reason for hiding this comment

ehconitin Sep 25, 2024

Choose a reason for hiding this comment

bosiraphael left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 25, 2024

ehconitin commented Sep 20, 2024 •

edited

Loading

ehconitin commented Sep 20, 2024 •

edited

Loading

ehconitin commented Sep 20, 2024 •

edited

Loading