Make budget view

[abnDK]

Sketch for 3 layer budget.

Do use case analysis before final sketch and implementation.

Needs:

• Add/remove categories (edit budget)
• Show sum of all categories
• If children, parent is sum of children
• Create different budgets?
  • adding other categories provides possibilities to divide budget but will still sum everything up so is not best solution.

[abnDK]

Make us of grid or flex when designing this

[abnDK]

When changing / updating budget, you choose a start date

• this will be used in reports so transactions between 2 budgets start dates will use budget for the latest, previous budget.
• ie: budgets with startdate 1/1 & 1/5. Transaction on 28/2 will use budget with startdate 1/1.

[abnDK]

Budget criteria:

• UI like screenshot above
• Budget is pr. default "locked".
  • shows categories as tree with parent/child relationsship
  • categories has name and amount
  • parent nodes has the sum of children
• Budget can be "unlocked" by clicking "edit"
  • Editable budgets makes is possible to change name and amount of all categories
  • Categories can be added / deleted
  • Adding a category is done by button on parent
  • Delete a category is done by button on parent
  • Start date becomes editable. Pr. default will have 1/x-xxxx (1st of the current month)
• "locking"/saving a budget does the following
  • every category is saved. If changes are made, there will be created new categories in db
  • afterwards, a new budget is created with updated startdate. All categories will get id of this budget as their new budget_id

Later version:

• parent node has field for "margin" that can both be in % or an amount. (they are interlocked)

[abnDK]

For building the patent-child tree

https://medium.com/@lizhuohang.selina/building-a-hierarchical-tree-from-a-flat-list-an-easy-to-understand-solution-visualisation-19cb24bdfa33

[abnDK]

clean up code in "buildTree" function. Tænk over hvad formålet med funktionen er. Hvis det er at bygge træet, så er koden i virkeligheden meget simpel.

Lige pt. er implementering i budget viewet relativt simpelt, som blot skal bruge et træ. Der er derfor ikke pt. nødvendigt med dfs repræsentation af dataene.

refactor "getCategoriesAsTree" så træet ikke bygges backend og roder API koden sammen. Hent categories via /categories apien, og brug BuildTree funktionen i frontend koden. Lad det være en simpel kode, der ikke bruger dfs/bfs eller lign.

[abnDK]

make it possible to delete budget row

[abnDK]

Budget criteria:

• UI like screenshot above

• [x] Budget is pr. default "locked".

  • [x] shows categories as tree with parent/child relationsship
  • [x] categories has name and amount
  • [x] parent nodes has the sum of children

• [x] Budget can be "unlocked" by clicking "edit"

  • [x] Editable budgets makes is possible to change name and amount of all categories
  • [ ] Categories can be added / [x] deleted
  • [x] Adding a category is done by button on parent
  • Delete a category is done by button on parent => changed to delete button is on row itself
  • [ ] Start date becomes editable. Pr. default will have 1/x-xxxx (1st of the current month)

• "locking"/saving a budget does the following

  • [ ] every category is saved. If changes are made, there will be created new categories in db => reconsider this - how do we handle budget versions???
  • [ ] afterwards, a new budget is created with updated startdate. All categories will get id of this budget as their new budget_id

Later version:

• parent node has field for "margin" that can both be in % or an amount. (they are interlocked)

/**

• FLOWS:
• when click 'edit':
• • name and amount field become input fields
• • 'delete row' checkbox is shown
• • 'add row' button is shown
• when click 'save':
• • rows marked for deletion are deleted in db (HTTP DELETE REQUEST)
• • if all successful, rows are removed and sum can be calculated of the remaining rows.
• • what if not succesful: An error message is shown and all rows remain shown. User can then try again?
• • when sum is calculated, rows are "frozen" with new values (checkbox are removed, class 'editable' removed)
• when 'delete row' is checked:
• • row is greyed out and cannot be edited anymore
• EVENTS:
• Edit budget rows
• [x] Toggle edit/save for all rows
• [x] set row for deletion (mark it and when saved, it disappears. When marked it is greyed out.)
• Save budget rows
• [x] calculate sum
• [x] parent sum = children sum = grandchildren sum
• [x] save to db
• Populate budget
• [x] get data from db and create budget rows and add to .budget-rows element
• Add budget row
• [ ] Add new row on all 3 levels (parent, child, grandchild - and not grand-grandchild)
• [ ] Save row to db on save. (might already happen if we just add row like when we populate budget) */

[abnDK]

delete row almost done - refactor to use async / await before doing "add budget row" functions...

[abnDK]

consider rewrite of rendering functions to be more verbose / write innerHTML when creating function...

[abnDK]

delete row almost done - refactor to use async / await before doing "add budget row" functions...

done

[abnDK]

• Add budget row
• [ ] Add new row on all 3 levels (parent, child, grandchild - and not grand-grandchild)
• [ ] Save row to db on save. (might already happen if we just add row like when we populate budget)

TODO

[abnDK]

Fix deleterow:

• fix function, that inherit marking as deleteable to children or grandchildren rows
• fix what happens, if parent is deleted, but not child

[abnDK]

current foreign key constraint problem on constraint table:

• Problem might likely is, that before updating budget sums, which in turn sends a put request for all categories, we have changed some rows parent_id, if we delete a row, that has children/grandchildren.
• Solution: in order to respect principle of making changes in DB before in UI, when we update budgets, we send PUT request with new values (not parent_id), and use the returned category to update data-parent-id in the UI.
• Other possible problem: When we send request object to PUT category, order of attributes might be confused. In some cases, it looks like ID and AMOUNT has been mixed up?

[abnDK]

Finish function to update budget sums of category tree.

After this write render function that writes updated sums of each category in the tree to it's dom element. Make one for writing it into frozen format and editable format.

After these functions are run when we click save after editing, we can update the amounts to db, and use the returned category as source for updating parent_id in the category tree

Another potentially helpful function would be to render only rows to keep removing those that are set to be deleted upon save.

[abnDK]

We are still working on the above...

Next is to fix the function that populates the budget rows when domcontentloaded event is fired.

• It should prop be refactored using async await
• can we use the new interface categoryTree to build the tree that we extract parent, child and grandchild nodes from?

[abnDK]

Data binding

https://www.atmosera.com/blog/data-binding-pure-javascript/

[abnDK]

or https://gomakethings.com/two-way-data-binding-and-reactivity-with-15-lines-of-vanilla-javascript/

[abnDK]

Next: [] Refactor updateBudgetSums() to use makeCategory... from tree and the helper functions for calculating sums.

[abnDK]

refact deleteCategories. Make sure it deletes children before parents. Maybe lokk into dev.podcast on post ... something something... Or we could use BFS and reverse the array getting the last generation first and so forth

when re-rendering the dom with renderFrozenAll / renderEditableAll we should check if we recalculate levels also. Maybe when be synDB and get updated parent id's back from db.

[abnDK]

Refact budget structure so it hold the tree from a root node. Make the rendering where we convert from tree to array. We can also filter root out here then.

Also make recursive when calculating sums. Will then be a dfs search recursively to the leafs of the tree and then write that sum to parent

If we do this, we don't have to update parent id's before calcSum as the tre with children nodes enables us to calc sum of children

[abnDK]

BuildTree is initial function taking Category interface, and outputs CategoryRow

dfsTree runs on the CategoryRows

[abnDK]

BuildTree is done,

now refactor dfsTree and rendering function

[abnDK]

This is issue will be split into 3 seperate issues. When each of these are done, this issue can be closed as well. [ ] Toggle edit/save => https://github.com/abnDK/personal-budget-2/issues/49 [ ] Add new budget row => https://github.com/abnDK/personal-budget-2/issues/50 [ ] Edit existing budget row => https://github.com/abnDK/personal-budget-2/issues/51 [ ] Delete existing budget row => https://github.com/abnDK/personal-budget-2/issues/52