nskins / todo Goto Github PK

Whenever we call the function put_flash/3, it renders an awkward little section above the content of the page (see picture below). It would be better for the flash content to render within the page content somehow. I'm not entirely convinced what the best solution would be, so this issue requires a bit of creativity.

Also, we can start with non-LiveView pages here. The layout for those pages is in a file called app.html.heex. If it's easy enough to do for LiveView pages too, you can do so, but it's not necessary for this issue.

The scope of this issue is to add Tailwind to the project and verify that it's correctly setup as a dependency. We will have separate issues for updating the templates at a later date. Here's the recommended setup process.

When you have the app open on two devices and you add an item on the first device, the second device does not add the to-do item in the correct position. On a real-time event like this, the items should still maintain the order defined in the function list_items_by_user/1.

When I try to add a new to-do item, the app suggests previous descriptions that I've used in the past. Some would consider this a good feature, but it's currently dropping down over the keyboard on my phone. I have to re-click the description input to get it to move out of the way. I just want to turn autocomplete off for the time being.

Here's a reference to a possible fix: https://www.w3schools.com/tags/att_input_autocomplete.asp

The CI workflow is failing with the following error:

Tried to map a target OS from env. variable 'ImageOS' (got ubuntu22), but failed. If you're using a self-hosted runner, you should set 'env': 'ImageOS': ... to one of the following: ['ubuntu16', 'ubuntu18', 'ubuntu20', 'win16', 'win19']

Here is a possible fix:

https://github.com/actions/starter-workflows/pull/2033/files

We have a feature that highlights due dates in orange (for items that are due today) or red (for items that are past due). There is a minor bug in this feature since it only compares dates based on the time in UTC. In practice, this means the highlighting will be applied incorrectly at certain times of the day (for instance, at 9pm for users in California). We can fix this by adding an optional timezone field to the users table. A user should be able to go into their settings page and set their local timezone, and then we'll use that timezone to accurately perform the date comparison. If the user has not specified a timezone, we won't apply any orange/red styling to the due date.

We need to add a Status field to the Item table. For starters, I'd just like to make it really simple and consist of two possibilities: "Not Done" and "Done." An Item would be created in the "Not Done" status by default. We should then display the status for each item in the /items route as well as the show route for the Item (/items/4 for example). Of course, there also needs to be a way to update the status of an Item via the edit routes (/items/4/edit and /items/4/show/edit).

• Create a migration to add a required field called Status to the Item table
• Update the form for a new Item to set the Status to "Not Done."
• Add a column for the Status in the /items route
• Add the Status to the show route for the Item
• Allow Status to be updated in both of the edit routes for the Item
• Update test cases to use Status wherever necessary

We need to add a field due_date to the items table so that users can prioritize their to-do items.

• Create Ecto migration to add the due_date column to the items table.
• Update schema to indicate that the Item struct should have a due_date.
• On the /items page, display the due date below each item's description.
• Update TodoWeb.ItemLive.FormComponent to allow user's to edit the due date (check here for a suitable component).
• Set the default due date in the new item form to be the current date.
• Update test cases as appropriate.

This is relatively straightforward. We have a layout called auth_form.html.heex that is being used for the login and user registration pages already. We just need to use that layout for the "Forgot Your Password?" page. We can follow the example of either the login or registration page to see what other minor details need to change to make everything look good.

We should add some color to highlight the importance of particular to-do items on the /items route.

• For any item due on the current day, the due date should appear orange and bold.
• For any item past due, the due date should appear red and bold.

This does not have to handle the case where the clock turns to 12am and then the colors update in real-time. Just make it so that the colors appear correctly on the initial page load. However, if I add or update an item so that it should appear orange or red, the correct color should appear immediately after submission.

For an app like this, it isn't really necessary to have a whole page dedicated to showing a single item.

• Remove the routes /items/:id and /items/:id/show/edit from the router.
• Delete the HEEx template for the :show items action.
• Remove the link from the /items route that links to /items/:id.
• Update test cases. We can probably just remove the ones that reference those parts of the code.

Use Tailwind CSS to make the user registration page look good.

I want to add the following information to the README:

• Introduction (what is the purpose of this project?)
• How to build (along with additional information on dependencies)
• Testing (what kind of tests do we use?)
• CI/CD (how it works and future plans)
• Database (some basic info about how Ecto and Postgres work)
• Deployment (what's the plan?)
• Architecture (high-level overview)

The /items page is where the user spends most of their time viewing, adding, and updating to-do items. It is finally time to update this page with some Tailwind CSS and make the page look nice.

Let's setup a GitHub Actions workflow to automatically build the project and then run the test suite. This should happen on any pull request to main and any push to main. We'll need to include an instance of Postgres in the CI environment since there are some tests that require database interactions.

The following warning prints anytime we run a Mix task:

warning: the :gettext compiler is no longer required in your mix.exs.

Please find the following line in your mix.exs and remove the :gettext entry:

    compilers: [..., :gettext, ...] ++ Mix.compilers(),

Let's do as it says to get rid of the warning.

If I add, update, or delete an item on the /items page, it should update other browser instances (with the /items page open) in real-time. The other browser instance should reflect the change that was made.

The following video explains how to do this: https://www.youtube.com/watch?v=MZvmYaFkNJI

Update the login page with Tailwind CSS. Reorganize the DOM as necessary.

Now that we removed the starter CSS in favor of Tailwind, it's time to give the index page a facelift.