Bug 24866 - Display budget hierarchy in the budget dropdown menu used when placing a new order
Summary: Display budget hierarchy in the budget dropdown menu used when placing a new ...
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Acquisitions (show other bugs)
Version: master
Hardware: All All
: P5 - low trivial (vote)
Assignee: Florian
QA Contact: Testopia
URL:
Keywords:
Depends on: 16123
Blocks:
  Show dependency treegraph
 
Reported: 2020-03-13 16:27 UTC by Didier Gautheron
Modified: 2022-02-15 04:05 UTC (History)
11 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
This improves the display for selecting a fund when placing a new order in acquisitions. It now displays as a hierarchy instead of a list without any indentation, for example: Budget 2021 -- Book -- -- Adult fiction
Version(s) released in:
22.05.00,21.11.02,v21.05.09


Attachments
Bug 24866 - Display budget hierarchy in the budget dropdown menu used when placing a new order (3.52 KB, patch)
2020-03-13 16:44 UTC, Didier Gautheron
Details | Diff | Splinter Review
Bug 24886: Reindent reports template (135.99 KB, patch)
2020-03-24 16:43 UTC, Bernardo Gonzalez Kriegel
Details | Diff | Splinter Review
Bug 24886: (follow-up) Add markup comments (14.84 KB, patch)
2020-03-24 16:43 UTC, Bernardo Gonzalez Kriegel
Details | Diff | Splinter Review
Bug 24866: Display budget hierarchy in the budget dropdown menu used when placing a new order (3.54 KB, patch)
2020-04-02 08:43 UTC, Didier Gautheron
Details | Diff | Splinter Review
Bug 24866: Display budget hierarchy in the budget dropdown menu used when placing a new order (3.58 KB, patch)
2020-04-04 19:50 UTC, David Nind
Details | Diff | Splinter Review
Bug 24866: Display budget hierarchy in the budget dropdown menu used when placing a new order (3.61 KB, patch)
2020-04-06 14:45 UTC, Didier Gautheron
Details | Diff | Splinter Review
Bug 24866: (follow-up) Replaced tabulations by dashes (2.12 KB, patch)
2021-11-09 14:02 UTC, Florian
Details | Diff | Splinter Review
Bug_24866: Changed $raw for html for extra safety (1.32 KB, patch)
2021-11-25 09:04 UTC, Florian
Details | Diff | Splinter Review
Bug 24866: Display budget hierarchy in the budget dropdown menu used when placing a new order (3.64 KB, patch)
2021-11-29 21:20 UTC, David Nind
Details | Diff | Splinter Review
Bug 24866: (follow-up) Replaced tabulations by dashes (2.17 KB, patch)
2021-11-29 21:20 UTC, David Nind
Details | Diff | Splinter Review
Bug_24866: Changed $raw for html for extra safety (1.36 KB, patch)
2021-11-29 21:20 UTC, David Nind
Details | Diff | Splinter Review
Bug 24866: Display budget hierarchy in the budget dropdown menu used when placing a new order (3.71 KB, patch)
2022-01-13 05:30 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 24866: (follow-up) Replaced tabulations by dashes (2.24 KB, patch)
2022-01-13 05:30 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug_24866: Changed $raw for html for extra safety (1.44 KB, patch)
2022-01-13 05:30 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 24866: Changed $raw for html for extra safety (1.44 KB, patch)
2022-01-13 05:31 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Didier Gautheron 2020-03-13 16:27:49 UTC
The rendering of SELECT elements is up to the browser but Bug 16123 CSS code 'style="padding-left: xx' doesn't work on modern browsers (firefox, chrome).

This patch replace CSS style attribute with   html entity.

On supported platforms
TEST PLAN :

1. Go to the Administration module
2. Add a new budget (ie : Budget 2020)
3. Add a fund to this budget (ie : Book)
4. Add a child fund (ie : Adult fiction)

You will have this hierarchy :

Budget 2020
 |____ Book
         |_____ Adult fiction

5. Go to the Acquisition module
6. Select a vendor and create a new basket
7. Place an order
8. Check the budget dropdown menu

BEFORE PATCH
Book
Adult fiction

OR

Book
   Adult fiction


AFTER PATCH
Book
   Adult fiction
Comment 1 Didier Gautheron 2020-03-13 16:44:42 UTC Comment hidden (obsolete)
Comment 2 Bernardo Gonzalez Kriegel 2020-03-24 16:43:21 UTC Comment hidden (obsolete)
Comment 3 Bernardo Gonzalez Kriegel 2020-03-24 16:43:24 UTC Comment hidden (obsolete)
Comment 4 Bernardo Gonzalez Kriegel 2020-03-24 16:44:04 UTC Comment hidden (obsolete)
Comment 5 Bernardo Gonzalez Kriegel 2020-03-24 16:44:48 UTC Comment hidden (obsolete)
Comment 6 Didier Gautheron 2020-04-02 08:43:32 UTC
Created attachment 102274 [details] [review]
Bug 24866: Display budget hierarchy in the budget dropdown menu used when placing a new order

The rendering of SELECT elements is up to the browser.
But Bug 16123 CSS code 'style="padding-left: xx' doesn't work on modern browsers.

This patch replace CSS style attribute with   html entity.

On supported platforms
TEST PLAN :

1. Go to the Administration module
2. Add a new budget (ie : Budget 2020)
3. Add a fund to this budget (ie : Book)
4. Add a child fund (ie : Adult fiction)

You will have this hierarchy :

Budget 2020
 |____ Book
         |_____ Adult fiction

5. Go to the Acquisition module
6. Select a vendor and create a new basket
7. Place an order
8. Check the budget dropdown menu

BEFORE PATCH
Book
Adult fiction

OR

Book
   Adult fiction

AFTER PATCH
Book
   Adult fiction
Comment 7 David Nind 2020-04-04 19:50:09 UTC
Created attachment 102399 [details] [review]
Bug 24866: Display budget hierarchy in the budget dropdown menu used when placing a new order

The rendering of SELECT elements is up to the browser.
But Bug 16123 CSS code 'style="padding-left: xx' doesn't work on modern browsers.

This patch replace CSS style attribute with   html entity.

On supported platforms
TEST PLAN :

1. Go to the Administration module
2. Add a new budget (ie : Budget 2020)
3. Add a fund to this budget (ie : Book)
4. Add a child fund (ie : Adult fiction)

You will have this hierarchy :

Budget 2020
 |____ Book
         |_____ Adult fiction

5. Go to the Acquisition module
6. Select a vendor and create a new basket
7. Place an order
8. Check the budget dropdown menu

BEFORE PATCH
Book
Adult fiction

OR

Book
   Adult fiction

AFTER PATCH
Book
   Adult fiction

Signed-off-by: David Nind <david@davidnind.com>
Comment 8 Devinim 2020-04-04 20:49:35 UTC
This patch did not work for us when we applied it, in vagrant environment with Firefox 74 .
Comment 9 Didier Gautheron 2020-04-06 14:45:07 UTC
Created attachment 102453 [details] [review]
Bug 24866: Display budget hierarchy in the budget dropdown menu used when placing a new order

The rendering of SELECT elements is up to the browser.
But Bug 16123 CSS code 'style="padding-left: xx' doesn't work on modern browsers.

This patch replace CSS style attribute with &emsp; html entity.

On supported platforms
TEST PLAN :

1. Go to the Administration module
2. Add a new budget (ie : Budget 2020)
3. Add a fund to this budget (ie : Book)
4. Add a sub-fund to fund Book (ie : Adult fiction)

You will have this hierarchy :

Budget 2020
 |____ Book
         |_____ Adult fiction

5. Go to the Acquisition module
6. Select a vendor and create a new basket
7. Place an order
8. Check the budget dropdown menu

BEFORE PATCH
Book
Adult fiction

OR

Book
   Adult fiction

AFTER PATCH
Book
   Adult fiction

Signed-off-by: David Nind <david@davidnind.com>
Comment 10 Didier Gautheron 2020-04-06 14:54:53 UTC
(In reply to Devinim from comment #8)
> This patch did not work for us when we applied it, in vagrant environment
> with Firefox 74 .

Hi Windows/Mac Firefox or Linux?
I retested with linux firefox 74.0.1, 2020-04-06 kodadevbox and it works for me.

One point, do you remember if you could collapse the fund tree in 
/cgi-bin/koha/admin/aqbudgets.pl
? 

I modified the test plan, replaced 
 Add a child fund to fund Book
With what is in the option:
Book fund Actions: Edit, Delete, Add sub fund
 Add a sub-fund to fund Book
Comment 11 Devinim 2020-04-07 18:47:18 UTC
(In reply to didier from comment #10)
> (In reply to Devinim from comment #8)
> > This patch did not work for us when we applied it, in vagrant environment
> > with Firefox 74 .
> 
> Hi Windows/Mac Firefox or Linux?
> I retested with linux firefox 74.0.1, 2020-04-06 kodadevbox and it works for
> me.
> 
> One point, do you remember if you could collapse the fund tree in 
> /cgi-bin/koha/admin/aqbudgets.pl
> ? 
> 
> I modified the test plan, replaced 
>  Add a child fund to fund Book
> With what is in the option:
> Book fund Actions: Edit, Delete, Add sub fund
>  Add a sub-fund to fund Book

Hi Didier,

We catched the problem. 
If the size of the name of subfund is larger than the fund's name, it doesn't show indentation correctly.
Comment 12 Didier Gautheron 2020-04-07 20:11:13 UTC
(In reply to Devinim from comment #11)
>
> We catched the problem. 
> If the size of the name of subfund is larger than the fund's name, it
> doesn't show indentation correctly.
Hi,

Good catch.

Browser can do whatever they want for rendering dropdown menus.
I'm not so sure it's worth going further. It looks more and more like a wack-a-mole game :(

Regards
Didier
Comment 13 Jon Knight 2020-05-18 14:53:00 UTC
So does this bug still need signing off, or is it being abandoned?
Comment 14 Didier Gautheron 2020-05-19 10:35:54 UTC
(In reply to Jon Knight from comment #13)
> So does this bug still need signing off, or is it being abandoned?

I'm closing it, it's too unreliable. I'll try to find another way.
Comment 15 Florian 2021-11-09 14:02:51 UTC
Created attachment 127487 [details] [review]
Bug 24866: (follow-up) Replaced tabulations by dashes

The rendering of SELECT elements is up to the browser.
But Bug 16123 CSS code 'style="padding-left: xx' doesn't work on modern browsers.

Based on the previous contribution, this fix replaces CSS style attribute with dashes, creating a leveled structure that should work with most browsers.

Tested on Linux Ubuntu with Firefox 94.0, Chromium 95.0.4 and Opera 81.0.1
TEST PLAN :

1. Go to the Administration module
2. Add a new budget (ie : Budget 2022)
3. Add a fund to this budget (ie : Book)
4. Add a sub-fund to fund Book (ie : Fiction)
5. Add another sub-fund, this time to sub-fund Book (ie : Adult fiction)
You will have this hierarchy :

Budget 2022
 |____ Book
         |_____ Fiction
                |_____ Adult fiction

6. Go to the Acquisition module
7. Select a vendor and create a new basket
8. Place an order
9. Check the budget dropdown menu

BEFORE PATCH
Book
Fiction
Adult fiction

OR

Book
   Fiction
         Adult fiction

AFTER PATCH
Book
 -- Fiction
 -- -- Adult fiction

 Co-authored-by: Didier Gautheron <didier.gautheron@biblibre.com>
Comment 16 Florian 2021-11-09 14:04:03 UTC
If that new patch could be signed-off by people using Mac/windows, that'd be great.
Comment 17 Martin Renvoize 2021-11-11 14:42:04 UTC
I'm wondering whether we should convert the select to a select2 input?  Then we can go back to using CSS ;)

https://stackoverflow.com/questions/30820215/selectable-optgroups-in-select2#30948247
Comment 18 Fridolin Somers 2021-11-24 21:45:36 UTC
(In reply to Martin Renvoize from comment #17)
> I'm wondering whether we should convert the select to a select2 input?  Then
> we can go back to using CSS ;)
> 
> https://stackoverflow.com/questions/30820215/selectable-optgroups-in-
> select2#30948247

We could.
But dashes is better for accessibility right ?
Comment 19 Fridolin Somers 2021-11-24 21:46:53 UTC
Great job Florian :D

I suggest you replace :
  [% level_indent | $raw %]
with :
  [% level_indent | html %]
Iven if dashed does not need it.
It is more secure.
Comment 20 Florian 2021-11-25 09:04:03 UTC
Created attachment 127997 [details] [review]
Bug_24866: Changed $raw for html for extra safety

Same test plan as before
Comment 21 David Nind 2021-11-29 21:20:02 UTC
Created attachment 128091 [details] [review]
Bug 24866: Display budget hierarchy in the budget dropdown menu used when placing a new order

The rendering of SELECT elements is up to the browser.
But Bug 16123 CSS code 'style="padding-left: xx' doesn't work on modern browsers.

This patch replace CSS style attribute with &emsp; html entity.

On supported platforms
TEST PLAN :

1. Go to the Administration module
2. Add a new budget (ie : Budget 2020)
3. Add a fund to this budget (ie : Book)
4. Add a sub-fund to fund Book (ie : Adult fiction)

You will have this hierarchy :

Budget 2020
 |____ Book
         |_____ Adult fiction

5. Go to the Acquisition module
6. Select a vendor and create a new basket
7. Place an order
8. Check the budget dropdown menu

BEFORE PATCH
Book
Adult fiction

OR

Book
   Adult fiction

AFTER PATCH
Book
   Adult fiction

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: David Nind <david@davidnind.com>
Comment 22 David Nind 2021-11-29 21:20:07 UTC
Created attachment 128092 [details] [review]
Bug 24866: (follow-up) Replaced tabulations by dashes

The rendering of SELECT elements is up to the browser.
But Bug 16123 CSS code 'style="padding-left: xx' doesn't work on modern browsers.

Based on the previous contribution, this fix replaces CSS style attribute with dashes, creating a leveled structure that should work with most browsers.

Tested on Linux Ubuntu with Firefox 94.0, Chromium 95.0.4 and Opera 81.0.1
TEST PLAN :

1. Go to the Administration module
2. Add a new budget (ie : Budget 2022)
3. Add a fund to this budget (ie : Book)
4. Add a sub-fund to fund Book (ie : Fiction)
5. Add another sub-fund, this time to sub-fund Book (ie : Adult fiction)
You will have this hierarchy :

Budget 2022
 |____ Book
         |_____ Fiction
                |_____ Adult fiction

6. Go to the Acquisition module
7. Select a vendor and create a new basket
8. Place an order
9. Check the budget dropdown menu

BEFORE PATCH
Book
Fiction
Adult fiction

OR

Book
   Fiction
         Adult fiction

AFTER PATCH
Book
 -- Fiction
 -- -- Adult fiction

 Co-authored-by: Didier Gautheron <didier.gautheron@biblibre.com>

Signed-off-by: David Nind <david@davidnind.com>
Comment 23 David Nind 2021-11-29 21:20:12 UTC
Created attachment 128093 [details] [review]
Bug_24866: Changed $raw for html for extra safety

Same test plan as before

Signed-off-by: David Nind <david@davidnind.com>
Comment 24 Jonathan Druart 2022-01-13 05:29:54 UTC
Next time please provide a change for the different occurrences. We are modifying only 1 dropdown when we have several in the codebase.
Comment 25 Jonathan Druart 2022-01-13 05:30:25 UTC
Created attachment 129366 [details] [review]
Bug 24866: Display budget hierarchy in the budget dropdown menu used when placing a new order

The rendering of SELECT elements is up to the browser.
But Bug 16123 CSS code 'style="padding-left: xx' doesn't work on modern browsers.

This patch replace CSS style attribute with &emsp; html entity.

On supported platforms
TEST PLAN :

1. Go to the Administration module
2. Add a new budget (ie : Budget 2020)
3. Add a fund to this budget (ie : Book)
4. Add a sub-fund to fund Book (ie : Adult fiction)

You will have this hierarchy :

Budget 2020
 |____ Book
         |_____ Adult fiction

5. Go to the Acquisition module
6. Select a vendor and create a new basket
7. Place an order
8. Check the budget dropdown menu

BEFORE PATCH
Book
Adult fiction

OR

Book
   Adult fiction

AFTER PATCH
Book
   Adult fiction

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 26 Jonathan Druart 2022-01-13 05:30:30 UTC
Created attachment 129367 [details] [review]
Bug 24866: (follow-up) Replaced tabulations by dashes

The rendering of SELECT elements is up to the browser.
But Bug 16123 CSS code 'style="padding-left: xx' doesn't work on modern browsers.

Based on the previous contribution, this fix replaces CSS style attribute with dashes, creating a leveled structure that should work with most browsers.

Tested on Linux Ubuntu with Firefox 94.0, Chromium 95.0.4 and Opera 81.0.1
TEST PLAN :

1. Go to the Administration module
2. Add a new budget (ie : Budget 2022)
3. Add a fund to this budget (ie : Book)
4. Add a sub-fund to fund Book (ie : Fiction)
5. Add another sub-fund, this time to sub-fund Book (ie : Adult fiction)
You will have this hierarchy :

Budget 2022
 |____ Book
         |_____ Fiction
                |_____ Adult fiction

6. Go to the Acquisition module
7. Select a vendor and create a new basket
8. Place an order
9. Check the budget dropdown menu

BEFORE PATCH
Book
Fiction
Adult fiction

OR

Book
   Fiction
         Adult fiction

AFTER PATCH
Book
 -- Fiction
 -- -- Adult fiction

 Co-authored-by: Didier Gautheron <didier.gautheron@biblibre.com>

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 27 Jonathan Druart 2022-01-13 05:30:37 UTC
Created attachment 129368 [details] [review]
Bug_24866: Changed $raw for html for extra safety

Same test plan as before

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 28 Jonathan Druart 2022-01-13 05:31:22 UTC
Created attachment 129369 [details] [review]
Bug 24866: Changed $raw for html for extra safety

Same test plan as before

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 29 Fridolin Somers 2022-01-13 07:27:11 UTC
Pushed to master for 22.05, thanks to everybody involved 🦄
Comment 30 Kyle M Hall 2022-01-14 14:20:11 UTC
Pushed to 21.11.x for 21.11.02
Comment 31 Victor Grousset/tuxayo 2022-02-07 18:58:29 UTC
I see that it was pushed to 21.05.x for v21.05.08
Comment 32 Victor Grousset/tuxayo 2022-02-07 18:58:39 UTC
Not backported to oldoldstable (20.11.x). Feel free to ask if it's needed.
Comment 33 wainuiwitikapark 2022-02-15 04:05:52 UTC
Not backported to 19.11.x