display feedback on kanban

[Drew-Macgibbon]

We don't need a lot of functionality to start. So instead of relying on another project for the Kanban we will develop from scratch.

use Volta as design inspiration and nuxt/ui for components

What we need to start:

• Kanban Card with title/category
• Kanban Modal, opens when Card is clicked
• Kanban Columns suggestion/backlog/in progress/review

Don't spend much time on design, focus on functionality and displaying the data first.

[JapneetRajput]

• When the issue is being displayed as a card on the column : Title, Category, Assignee, Priority, Votes (Display current number of votes and if they click on it they will vote or unvote)

• When a single issue is clicked upon then more details can be shown : Title, Body, Category, Status, Assignee, Votes, github issue, status, category, Size.

• Kanban column is included in status issue : #5

[Drew-Macgibbon]

@JapneetRajput yes to all of it except assignee which might require more thought.

It's worth remembering that we're not trying to recreate GH issues, just taking the parts that we need for a good feedback system.

I'm not sure showing the assignee will add value to our users, and if it's just for our reference we have GH for that.

Feel free to change my mind!

[JapneetRajput]

@Drew-Macgibbon yeah makes sense. We can skip the assignee field.

[JapneetRajput]

I've thought of two flows for displaying the feedbacks on the kanban board :

1. We fetch all tasks (including all fields) and display them column(status) wise. If a user clicks on a card the card details modal will be displayed. As we already have the task details we can display them directly.

Pros :

• Lesser API calls.

Cons :

• All the data that will be fetch may or may not be necessary.

OR

2. We fetch all tasks (only those fields which will be displayed on card) and display them column(status) wise. If a user clicks on a card, we will hit our DB to fetch all the details of that particular task and display them.

Pros :

• We will only be fetching data that is necessary.

Cons :

• More API calls : Fetching additional details when a card is clicked results in more API requests. This may introduce slight delays when users open cards.

@Drew-Macgibbon @aayu5hgit Which one shall we go with? or any other flow that you can think of I'm also actively thinking of any more pros/cons for them and tricks to optimize them.

[Drew-Macgibbon]

@JapneetRajput 2nd option. We will have additional info such as comments fetched for the Modal, so additional calls are to be expected.

[aayu5hgit]

@Drew-Macgibbon @JapneetRajput I'm attaching a ref. image of the kanban board after the changes suggested by @Drew-Macgibbon

Will be enhancing this too, but after we fetch the dynamic data from supabase.

[aayu5hgit]

@Drew-Macgibbon @JapneetRajput I'll start working on (and probably finish too) the modal that is popped after the card is clicked.

I'll be playing with the dummy data I have created (for now); and when things will work smooth, we can integrate with the supabase data easily thereafter.

[aayu5hgit]

@Drew-Macgibbon @JapneetRajput I've started with the modal functionality and sharing the progress (attaching a ref. image) Do let me know if things are to be modified / any other suggestions

Utilized:

• UModal
• UCard
• UBadge
• UAvatar

[Drew-Macgibbon]

@aayu5hgit nice progress. Nuxt/ui is so good to work with!

A few small UI suggestions, some of which you're probably already planning.

• center the Modal
• move category, priority, avatar etc. to the UCard #header and the description to #body slots. In the future we will add comments to the #footer, I think this is a logical flow.
• we should aim to reduce the screen realestate used in the header section. Remove due date, that will be for internal use. Try to fit the rest in 2 rows, mobile first. created at can be age and use relative time like 2mo/2d/2h/2m.

[aayu5hgit]

@Drew-Macgibbon @JapneetRajput I've made the suggested changes:

• [x] center the Modal
• [x] move category, priority, avatar etc. to the UCard #header and the description to #body slots. In the future we will add comments to the #footer, I think this is a logical flow.
• [x] we should aim to reduce the screen realestate used in the header section. Remove due date, that will be for internal use. Try to fit the rest in 2 rows, mobile first. created at can be age and use relative time like 2mo/2d/2h/2m.

[Drew-Macgibbon]

@aayu5hgit nice, that will do for now. We will make continued improvements to the ui as we go.

I didn't realize the modal was already centered lol, the kanban threw me off.