Ability to inline edit a table component

andrewtpham commented 4 years ago

We would like to create a custom Inline edit component that can be used in an h-input, h-select, and h-table components

Acceptance Criteria As a user switches from View to Edit mode using the switch at the top-right corner:

View Mode:

View records already added
No ability to add new records

Edit Mode:

View records already added
Ability to add new records on the last row
When hover on a cell, a user will see a light grey box around the cell:

AND when they click a cell, it will highlight and be editable:

This is an example of a text field inline edit:

NICE TO HAVE - With the confirm and cancel buttons:

This is an example of a single or multi select dropdown:

When they hover:

When they click:

This is an example of Date field:

When they hover:

When they click:

Figma link: https://www.figma.com/file/2bizWQnCDp0r5RZzrM25jX/Dots?node-id=6199%3A52923

Examples Some examples of Inline edit can be found here:

https://github.com/PanJiaChen/vue-element-admin
- Inline edit table
Atlassian has an inline edit component. This can be helpful when there is multiple cells to edit in a row: https://www.atlassian.design/patterns/inline-edit

andrewtpham commented 4 years ago

@hvitis If you have time, this one would be helpful addition to our Tables components. We will introduce the inline edit and export for the Tables module after the initial PoC.

hvitis commented 4 years ago

Hello @andrewtpham

The exporting from excel that's on the admin dashboard uses mock data to display in the table. I will add mock server or extract the data from admin dashboard. Anyway I'm on it. Will finish before Friday's meeting.

andrewtpham commented 4 years ago

Hey @hvitis thanks for this! How did implementing the edit inline go? Any issues? This one we will use almost immediately in the Dots FE so would be good to see how we can get this working for our needs. For example, can we hover over a cell and edit inline or does it have to be controlled from a button like in the example? Thanks!

andrewtpham commented 2 years ago

We would like to explore options to enhancement our h-table component to be able to edit a row inline when a button or action is triggered, see example: https://codesandbox.io/s/mrqqz43yx

AND

we would like to explore how to make an entire table editable: https://codesandbox.io/s/2pv1o4wxxr

andrewtpham commented 2 years ago

@ninetteadhikari @amosnjoroge @michaelbukachi What do you think about having a View/Edit switch that lets a user enter a view mode or edit mode where users can edit more of the cells in the table:

In View mode:

In Edit mode (note: all rows will be editable, see the last row):

michaelbukachi commented 2 years ago

@andrewtpham I think the toggle at the top is to be implemented on dots/metrics, not in hakawati. But we could add a property that allows us to toggle the behaviour in the table.

andrewtpham commented 2 years ago

@andrewtpham I think the toggle at the top is to be implemented on dots/metrics, not in hakawati. But we could add a property that allows us to toggle the behaviour in the table.

Ok that sounds good. I'll keep working around on the screens and update the tickets in dots-fe. Thanks for your input!

ninetteadhikari commented 2 years ago

Example: https://codesandbox.io/s/2pv1o4wxxr Example: https://codesandbox.io/s/mrqqz43yx

michaelbukachi commented 2 years ago

@ninetteadhikari @andrewtpham Here's the preview for the inline edit: https://vue-ui-components-git-h-table-editable-hikaya.vercel.app/?path=/story/table--h-table-edit-enabled

That date and tag columns have custom components loaded to demonstrate different components

andrewtpham commented 2 years ago

Additional fixes (could be more):

On edit, the dropdown is still highlighted
For empty cells, when you hover over the cell, place a min-height on the hover of the cell.
Add a transparent padding in the view mode so that the columns dont change when a user goes to edit mode.
Add a emit when a value changes.

michaelbukachi commented 2 years ago

@andrewtpham I've made the fixes. Here's the preview: https://vue-ui-components-no3let6r2-hikaya.vercel.app/?path=/story/table--h-table-edit-enabled

amosnjoroge commented 2 years ago

Hi @michaelbukachi Please look into the following issue I have observed with inline edit:

When you edit a cell (say in the first row) and then sort the table so that the firs row now has different data, when you then edit the same cell (in the first row) the cell still contains the previously edited data and a different cell is edited.

https://user-images.githubusercontent.com/16039248/148046565-c96db0c7-13c8-421b-89e4-2df78838488b.mp4

michaelbukachi commented 2 years ago

@amosnjoroge I see. I had definitely not considered this flow. Let me see if I can correct it.

hikaya-io / hakawati