Create to do list page component - Vue

[blackgirlbytes]

Create Todo List page component - Vue

🚀 Goal

Create a Todo List page component in Vue that allows users to manage their tasks within our Decentralized Web App (DWA) starter, utilizing the Decentralized Web Node (DWN) for data storage and retrieval.

🤔 Background

We need to implement the Todo List page for our Vue.js DWA starter, mirroring the functionality of the existing React implementation. This page should include task management features and integrate with the TodoDwnRepository for DWN operations.

This is part of our larger project to create a Vue.js DWA starter. See our main issue here for the full context and list of all related tasks.

Important: For reference, please see the DWA React Vite starter app. While the implementation details will differ for Vue, this example provides a good overview of the structure and functionalities of a DWA.

🔑 Tasks and Acceptance Criteria

• [ ] Create a TodoListPage.vue component
• [ ] Implement a TodoList.vue component with the following features:
  • [ ] Display a list of tasks
  • [ ] Add new tasks
  • [ ] Edit existing tasks
  • [ ] Delete tasks
  • [ ] Mark tasks as completed/uncompleted
• [ ] Create a TaskItem.vue component for individual task display and actions
• [ ] Create a TaskForm.vue component for adding/editing tasks
• [ ] Implement TodoDwnRepository class for DWN operations:
  • [ ] listTasks()
  • [ ] createTask(task)
  • [ ] updateTask(task)
  • [ ] deleteTask(recordId)
  • [ ] findTaskRecord(recordId)
  • [ ] listTasksRecords()
• [ ] Integrate Web5 functionality for DWN operations
• [ ] Implement error handling and loading states
• [ ] Style the components using Tailwind CSS to match the existing design
• [ ] Ensure the layout is responsive and looks good on various screen sizes

🌟 Resources

• Vue.js Documentation
• Tailwind CSS Documentation
• Web5 JS SDK Documentation
• DWA React Vite Starter App (for reference)

Getting Started

1. Comment ".take" on this issue to get assigned
2. Fork the repository and create a new branch for this task
3. Follow the tasks outlined above
4. Submit a pull request with your changes
5. Respond to any feedback during the review process

Questions?

If you have any questions or need clarification, please comment on this issue or join our Discord community.

Happy coding! 🎉

[Johnnyevans32]

.take

[github-actions[bot]]

Thanks for taking this issue! Let us know if you have any questions!

[29deepanshutyagi]

.take

[github-actions[bot]]

The issue you are trying to assign to yourself is already assigned.

[blackgirlbytes]

@29deepanshutyagi this issue already has a PR in progress and you've been working on the vanilla javascript version of this. This particular issue is for Vue. Here's the list you want to focus on: https://github.com/TBD54566975/tbd-examples/issues/81

[29deepanshutyagi]

but i can work on this issue as well

[blackgirlbytes]

@29deepanshutyagi I see! I welcome you working on the Vue ones as well, but this particular issue is basically already complete. I'm actually about to press approve and merge in a few minutes https://github.com/TBD54566975/tbd-examples/pull/199

[taniashiba]

Hi @29deepanshutyagi - wanted to let you know not to try and take an issue that is already assigned to someone else. If you by chance submit a PR for an issue you are not assigned to, you will not receive points for this as it goes against our rules. We just want to make sure everyone has a chance to contribute, one task at a time. We have several open projects with a variety of issues, we encourage you to explore further. Thank you so much ❤️

[29deepanshutyagi]

ok