Budget page: Add new transaction

[abnDK]

FROZEN TRANSACTION ROW

• date (dd/mm/yyyy)
• name
• amount
• category name

EDITABLE TRANSACTION ROW Adding a row becomes available from clicking the last row of budget, when the row wide green "+" button is shown. Clicking existing row enables edit mode for this row. Clicking outside the fields of the row also saves the row.

Adding requires input in the fields:

• day (of month)
  • number field.
  • Placeholder: previous value or "day" if new.
  • valid input: integer between 1 and 28/30/31 depending on the month. Also takes "f/F" for day 1, "l/L" for day and "dd/DD" for todays day. If input after is made later than the last day of the month, this will equal to last day of month.
• name
  • text field.
  • Placeholder: previous value or "Enter transaction name" if new.
  • valid input: a string between 2-n characters. The maximum number of characters should equal to something that can be showed in full length when row is frozen. Both numbers and letters are accepted.
• amount
  • number field (no arrows...).
  • Placeholder: previous value or "Enter amount" if new.
  • valid input: float not equal to 0.
• category name
  • a dropdown field of all leaf nodes in category tree (children nodes if available, parent if no children nodes and grandparent if no parent nodes). List should show parent and grandparent nodes in a greyed out style for context of catagories. These should also be indented in order to strengthen the grandparent-parent-child relationship between categories.
  • Placeholder: previous value or "Uncategorized" if new (Uncategorized maps to root category)
  • valid input: One of the options in the dropdown menu

TRANSACTIONS OBJECT (in memory)

• All dom rows / transactions are mapped to a transactions object in memory. This has a direct reference to the DOM element, which in turn also has a direct reference to the Transactions object. (2 way binding)
• When a row is editable, for each keyup event, the data is written to the Transaction object.
• Whenever user clicks on save, the row is written using a post request to the DB. If editing existing row, the values are updated using a put request to DB.
• Has ".rows" holding Transaction objects.
• Each Transaction has the following fields (besides the fields shown i db)
  • frozen: boolean
  • probably many many more....

ORDER OF ROWS

• by default rows are sorted by date first and name second
• by click on column name, the row should sort on the column.
• Clicking on "date" column, the sorting reverts to default.
• hovering over column name changes the cursor to a pointer (hand)
• The sorting column should be emphasised in some way. Either by underlining or making the font bold

ERRORS:

• Not filling out a required field will pass an error message that os show for a couple of seconds instead of the row, then bringing the row back to visibility. This should be validated backend and communicated to front end
• Row is not written to db before saving the row, so no data should be written/updated before all required fields are filled with valid data.

SAVE AND DELETE

• row has a save button and a delete button
• writing / updating / deleting rows only happens when save/delete button is clicked. Before this, the transaction only exist in DOM and in memory.

The row in editable format

The add row button. Should be faded when not hovered

Showing an error message generated in the backend. It should list names of the required fields.

Adding period selectors. This also effects budget page

[abnDK]

First step:

• Write out the Transactions object and the interfaces needed for this
• Do interfaces also for the class as a way to define the topography of the class attr and methods (make class diagram as well to support the proces + SE SEQUENCE DIAGRAM)

Then:

• Skitse på UI
• skrive mocha/chai testcases
• prøve at lave playwright testcases på UI skitsen

[abnDK]

How to map category_id to category_name?

Where to place the data?

Could be on transaction row object - both id and name, and only render name to dom?

[abnDK]

Fix:

• Only be able to edit one row at a time. Should be placed on transactions-rows, not the row itself to detect.
• Make add button inactive while a row is editable (look through rows and look for .frozen = true rows)

[abnDK]

Next:

• Add row to db from UI
• Post row to db from UI

DONE

[abnDK]

Update transactions when budget is saved...

[abnDK]

validation: if i manually input some long year (5 digits) it throws error on backend. Validation should take care of this.

Maybe only year between 2000 and 2050?

=> Validation done, but still lacks proper error handling/communication to user

53

[abnDK]

Month selector skal være en specifik dag. År og måned er givet ud fra den periode man har valgt (TODO implement)

TODOING:

=> mangler at gøre titel afhængig af PERIOD const'en. PERIOD burde blive sat ud fra dd, og så loades kun de transaktioner, der passer på datoen.

FIXED WITH 489d8d254ee694d2bbc09f3271be3b32d79908f6

[abnDK]

On edit, the date gets changed for some reason

Look into date parsing in renderEditable...

=> A date setting bug. When setting date in UI and sent to db, it's recorded -2 hours. Either we should set local tmz settings, or we should add 2 hours to compensate?

FIXED WITH 377d96840685a2aab63c50ac8e38aa5db6ca7914

[abnDK]

New rows now inits with current date before being posted to db (with potentially changed date)

IMPLEMENTED WITH 203e6779d717f6fc2322f81f68473105edda6486

[abnDK]

Fix:

• Only be able to edit one row at a time. Should be placed on transactions-rows, not the row itself to detect.
• Make add button inactive while a row is editable (look through rows and look for .frozen = true rows)

[abnDK]

Bug updating addTransRow button happens when we call saveRow on a row.

Somehow the event loop is what fucking things up. Somehow we need to get the order right of this:

this plays out when ever i edit a row and click save afterwards both html elements are in editable mode

FIXED

[abnDK]

BUG: Not updating when edit => save. It posts instead

51 see this

FIXED 28fb3c30d3d64972c604d42af64efd12e2fa8226

[abnDK]

Bug: Category does not get saved properly

Also, when getting a transaction object back from a post, only category_id is returned. When/how do we map this to the category names?

More specific: Default category is root, so how do we change default to the selected category?

[abnDK]

FROZEN TRANSACTION ROW

• date (dd/mm/yyyy)
• name
• amount
• category name

EDITABLE TRANSACTION ROW Adding a row becomes available from clicking the last row of budget, when the row wide green "+" button is shown. Clicking existing row enables edit mode for this row. Clicking outside the fields of the row also saves the row.

Clicking outside to save has not been implemented yet

Adding requires input in the fields:

• day (of month)

  • number field.
  • Placeholder: previous value or "day" if new.
  • valid input: integer between 1 and 28/30/31 depending on the month. Also takes "f/F" for day 1, "l/L" for day and "dd/DD" for todays day. If input after is made later than the last day of the month, this will equal to last day of month.

Did a dropdown instead - it's fine for now

• name

  • text field.
  • Placeholder: previous value or "Enter transaction name" if new.
  • valid input: a string between 2-n characters. The maximum number of characters should equal to something that can be showed in full length when row is frozen. Both numbers and letters are accepted.

• amount

  • number field (no arrows...).
  • Placeholder: previous value or "Enter amount" if new.
  • valid input: float not equal to 0.

• category name

  • a dropdown field of all leaf nodes in category tree (children nodes if available, parent if no children nodes and grandparent if no parent nodes). List should show parent and grandparent nodes in a greyed out style for context of catagories. These should also be indented in order to strengthen the grandparent-parent-child relationship between categories.

Not sure if this is a good idea At least we have to consider what happens to transactions, if their category gets a child. If they category is deleted, we change it to the parent. This is taken care of. If a category gets a child, it will often have more than 1 child. Thus it is not clear what child node a transaction should be related to. On the other hand, if the transaction is related to a parent node, and the amount of a parent node is the sum of children sums, the amount of the transaction related to the parent will most likely be overdrawing the budget. A solution to this is to either give parent nodes a buffer to handle it's transactions, or the amount of a parent should not be forced to be the sum of children. If we don't do anything now, transactions related to parent nodes will most likely be overdrawing the budget of a parent category, but it will be clear from editing the transaction, that it's category is a parent, and you can then manually change each and every one of them. I think this will be the best solution for now, as refactoring will cost quite a few ressources.

• Placeholder: previous value or "Uncategorized" if new (Uncategorized maps to root category)

Is root now, but should be "uncategorized" or something indicating, that it is not assigned to a viable category.

Done with a7b55b6bb1433ebe8f09606fdff2f7a5ff18d768

• valid input: One of the options in the dropdown menu

TRANSACTIONS OBJECT (in memory)

• All dom rows / transactions are mapped to a transactions object in memory. This has a direct reference to the DOM element, which in turn also has a direct reference to the Transactions object. (2 way binding)
• When a row is editable, for each keyup event, the data is written to the Transaction object.

Key up event has not been implemented, as the save button both saves values to element in memory and to the database.

• Whenever user clicks on save, the row is written using a post request to the DB. If editing existing row, the values are updated using a put request to DB.
• Has ".rows" holding Transaction objects.

• Each Transaction has the following fields (besides the fields shown i db)

  • frozen: boolean
  • probably many many more....

ORDER OF ROWS

• by default rows are sorted by date first and name second
• by click on column name, the row should sort on the column.
• Clicking on "date" column, the sorting reverts to default.
• hovering over column name changes the cursor to a pointer (hand)
• The sorting column should be emphasised in some way. Either by underlining or making the font bold

Sorting done with: 2ccd6aa755b631e5e2800a6973526484b412d82d

ERRORS:

• Not filling out a required field will pass an error message that os show for a couple of seconds instead of the row, then bringing the row back to visibility. This should be validated backend and communicated to front end
• Row is not written to db before saving the row, so no data should be written/updated before all required fields are filled with valid data.

Implemented with 0914cc0e35117b8691feb1889167ba01fe6623d7

SAVE AND DELETE

• row has a save button and a delete button
• writing / updating / deleting rows only happens when save/delete button is clicked. Before this, the transaction only exist in DOM and in memory.

The row in editable format

The add row button. Should be faded when not hovered

Showing an error message generated in the backend. It should list names of the required fields.

Adding period selectors. This also effects budget page

[abnDK]

sorting: in event handler we set sortby.key and the sort function uses that to determine if we was on the key before or not. What to do?

FIXED

Flow is now:

• Call sorting function from eventhandler with sorting parameter
• function sets the sortedBy config on the container (key and asc/dsc)
• function calls the renderTransactions which calls this.rows
• this.rows calls and returns a sorting function that reads the config and sorts this.rows and returns a new array, letting this.rows stay intact.

Commited with: 2ccd6aa755b631e5e2800a6973526484b412d82d

[abnDK]

Next:

ERRORS:

Not filling out a required field will pass an error message that os show for a couple of seconds instead of the row, then bringing the row back to visibility. This should be validated backend and communicated to front end Row is not written to db before saving the row, so no data should be written/updated before all required fields are filled with valid data.

[abnDK]

Error: Next: https://www.youtube.com/watch?v=xnedbgDoRkA&t=2s&ab_channel=procademy Do to all routes

[abnDK]

Error handling in the front end:

[abnDK]

error handling status:

NEXT

1. make errorhandler for front end
   • Check all front end errors is rendered
   • Check all back end errors are handled. Use globalErrorHandler here?
2. make csv of error texts (and also texts in general) that is a single source of truth regarding error messages. Make util functions that translate from csv. Structure could be something like: TRANSACTION.SAVE.UNKNOWNCATEGORYID;"Category id is unknown. Try another category and save again."
3. find out how to diff between production and development modes and what details are sent to front end

IMPLEMENTED WITH 0914cc0e35117b8691feb1889167ba01fe6623d7

[abnDK]

Error handling in the front end:

Error message should be shown as long as the row isn't saved. When row is saved and rendered frozen, the error message can be cleared. Maybe even stating "Row saved succesfully" and fading away after a few seconds.

IMPLEMENTED WITH b3442e4c090ff3fdb1538a6e1440b54a34fa586d

[abnDK]

Check if i could use globalErrorHandler on router and service files.

[abnDK]

add catch(next) to all router functions

Maybe add a controller layer for transaction, category and budget. Right now service layer both communicates with db and handles constraints etc. That, and much more, is a business aspect that should be controlled in the controller layer

[abnDK]

Notes on error handling: statuscodes:

• 404 if something cannot be found, i.e. an ID of a ressource
• 400 if query to db results in an error. Often sent with err.message and thus not specific on what kind of error it was.

Error vs CustomError:

• Principle of errorhandling says, that errors must be thrown closest to the source. This means, that the error is created and catched as close to the failing function as possible, where a CustomError will be used. Here the standard Error type will be created by the system and converted into a CustomError. I.e. an error when a service queries the db will result in an error, then we create a customerror with at least a message and a statuscode and throws this to the calling router.

Handing errors to the global errorhandler:

• I express, the globalhandler is reached by sending the error to the next() function. The next function is only available on the router and not the service (in the current implementation), and thus errors that happens in the service is throw to the router, which then in turn catches the error and passes it on to the next() function. When the error reaches the next function, it has been converted to a CustomError (either by the router or service function) and thus will have a message, statuscode, stack and the error itself as attributes. The global errorhandler then decides what to send back to the front end, depending on if we are working in 'development' mode or 'production' mode.

[abnDK]

FROZEN TRANSACTION ROW

• date (dd/mm/yyyy)
• name
• amount
• category name

EDITABLE TRANSACTION ROW Adding a row becomes available from clicking the last row of budget, when the row wide green "+" button is shown. Clicking existing row enables edit mode for this row. Clicking outside the fields of the row also saves the row.

Clicking outside to save has not been implemented yet

Adding requires input in the fields:

• day (of month)

  • number field.
  • Placeholder: previous value or "day" if new.
  • valid input: integer between 1 and 28/30/31 depending on the month. Also takes "f/F" for day 1, "l/L" for day and "dd/DD" for todays day. If input after is made later than the last day of the month, this will equal to last day of month.

Did a dropdown instead - it's fine for now

• name

  • text field.
  • Placeholder: previous value or "Enter transaction name" if new.
  • valid input: a string between 2-n characters. The maximum number of characters should equal to something that can be showed in full length when row is frozen. Both numbers and letters are accepted.

• amount

  • number field (no arrows...).
  • Placeholder: previous value or "Enter amount" if new.
  • valid input: float not equal to 0.

• category name

  • a dropdown field of all leaf nodes in category tree (children nodes if available, parent if no children nodes and grandparent if no parent nodes). List should show parent and grandparent nodes in a greyed out style for context of catagories. These should also be indented in order to strengthen the grandparent-parent-child relationship between categories.

Not sure if this is a good idea At least we have to consider what happens to transactions, if their category gets a child. If they category is deleted, we change it to the parent. This is taken care of. If a category gets a child, it will often have more than 1 child. Thus it is not clear what child node a transaction should be related to. On the other hand, if the transaction is related to a parent node, and the amount of a parent node is the sum of children sums, the amount of the transaction related to the parent will most likely be overdrawing the budget. A solution to this is to either give parent nodes a buffer to handle it's transactions, or the amount of a parent should not be forced to be the sum of children. If we don't do anything now, transactions related to parent nodes will most likely be overdrawing the budget of a parent category, but it will be clear from editing the transaction, that it's category is a parent, and you can then manually change each and every one of them. I think this will be the best solution for now, as refactoring will cost quite a few ressources.

• Placeholder: previous value or "Uncategorized" if new (Uncategorized maps to root category)

Is root now, but should be "uncategorized" or something indicating, that it is not assigned to a viable category.

Done with a7b55b6

• valid input: One of the options in the dropdown menu

TRANSACTIONS OBJECT (in memory)

• All dom rows / transactions are mapped to a transactions object in memory. This has a direct reference to the DOM element, which in turn also has a direct reference to the Transactions object. (2 way binding)
• When a row is editable, for each keyup event, the data is written to the Transaction object.

Key up event has not been implemented, as the save button both saves values to element in memory and to the database.

• Whenever user clicks on save, the row is written using a post request to the DB. If editing existing row, the values are updated using a put request to DB.
• Has ".rows" holding Transaction objects.

• Each Transaction has the following fields (besides the fields shown i db)

  • frozen: boolean
  • probably many many more....

ORDER OF ROWS

• by default rows are sorted by date first and name second
• by click on column name, the row should sort on the column.
• Clicking on "date" column, the sorting reverts to default.
• hovering over column name changes the cursor to a pointer (hand)
• The sorting column should be emphasised in some way. Either by underlining or making the font bold

Sorting done with: 2ccd6aa

ERRORS:

• Not filling out a required field will pass an error message that os show for a couple of seconds instead of the row, then bringing the row back to visibility. This should be validated backend and communicated to front end
• Row is not written to db before saving the row, so no data should be written/updated before all required fields are filled with valid data.

Implemented with 0914cc0

SAVE AND DELETE

• row has a save button and a delete button
• writing / updating / deleting rows only happens when save/delete button is clicked. Before this, the transaction only exist in DOM and in memory.

The row in editable format The add row button. Should be faded when not hovered Showing an error message generated in the backend. It should list names of the required fields. Adding period selectors. This also effects budget page

Consider this issue done with the above implemented