Skip to content

Make user experience more lively by allowing drag and drop for notes and use web-socket to make sure user instantaneously sees a change in all his devices when he changes from one device #2

@mayankpunetha007

Description

@mayankpunetha007

Currently the user has no way to make it possible to order his task list.

The idea is to provide the user with a drag and drop functionality where he can arrange is notes as he likes. And his note arrangement will persist in the database and he sees the UI like it was when he last logged in.

For this to be implemented we need to the following:

  1. Allow user to drag and drop anywhere in the note list
  2. Store and update each note position in the DB so that it persists
  3. The version for note won't be updated for position change since the content hasn't changed
  4. Update Insert notes via WebSocket
  5. Whenever a note is updated or changed broadcast to user's topic details regarding the updated/added or deleted note

I propose the following data model for drag drop

untitled diagram 2

This will let user store the position of every note in the DB

Implementation details

  1. Implement drag and drop in UI
  2. on drag complete Update the position of the note in the backend. If it fails to reset the position and tell the user it failed to update position
  3. Provide web socket end point for the user to update/add/delete a note
  4. This WebSocket broadcasts to the user topic whenever any such change happens
  5. This is a very good UX addon for when the user is logged in from multiple devices

Migrations

For old users the position will be null and current view will be displayed. But they will have the ability to drag and drop their notes. And the new positions will be updated as they use the feature

For the WebSocket technique, there won't be any issues Since all they will see is a more lively UX if they are using from multiple devices.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions