Entry State Details in UI

[nathanaelrobinson]

Color Coding for Entry State

---

Executive Summary

All entries in the UI are currently color coded green with a highlighting option when hovered over. We can provide increased user functionality pretty simply by color-coding entries based on entry state which is retrieved via the API. We would also want to display the entry state in the entry detail modal. Finally it might make sense to provide additions and summaries by day/week for easier user management.

Ideal End State

• color coded entries displayed on calendar
• entry state included in detail modal
• Weekly/Daily summary of hours worked displayed on calendar

Details

The following options are available.

ENTRY_STATE_UNAFFILIATED
ENTRY_STATE_DRAFT
ENTRY_STATE_APPROVED
ENTRY_STATE_SENT
ENTRY_STATE_PAID
ENTRY_STATE_VOID

• Unaffiliated (or null) means there was an error in the entry creation, or the invoice was deleted, or there is no active project. These should be deleted!
• Draft means attached to a draft invoice
• Approved means attached to a locked but unsent invoice
• Sent means attached to a sent invoice but unpaid
• Paid means the invoice has been paid and the entry is in a "final" state
• Void means the entry or invoice was voided but we want to keep the record of the entry so it is not "deleted".

There will not need to be any golang changes necessary to accomplish this task, all the changes can be done clientside. This will mean only changes to CSS/Javascript/HTML.

There are three files that you will need to adjust to affect these changes admin.html admin.js style.css

Specifically the HTML that manages the calendar UI is on lines 107-179

The javascript exists as part of a Vue a minimalist javascript library that binds js functions that you define in the #App object to the html page allowing you to easily interact with HTML elements.

My suggestions for how to accomplish this:

1. Create a specific style for each state in the CSS file -- you can inherit the current class and then adjust it slightly with things like color or font or whatever you think makes sense
2. Use Vue binding to choose the class for each calendar block based on the entry state. You can see an example of how I did this here, just note that the :class is the vue class binding object so it uses the inline js logic to determine which css class to load for that element.
3. Add the state to the modal HTML -- should be pretty self explanatory just add a new element like a or something.

Separate instructions for how to do Daily/Weekly rollups

1. You'll see that I have a filter function to retrieve the elements for a given week. you'll want to create a function similar to this that filters to the given week/day and calculates the sum of hours in that period by iterating over the entries.
2. Once you have those sums save them to a newly created and binded variable, you'll need to add that variable in the data section at the top of the js file I'd suggest creating an object like this:

   hoursRollup : {
   monday : null,
   tuesday: null,
   ...
   fullWeek: null
   } 

3. Use the vue binding to display those variables on the UI!

[nathanaelrobinson]

Congrats on completing this issue @drshore