Patch #20287

Administration: Using grids instead of tables

Added by Frederico Camara about 5 years ago. Updated about 1 month ago.

Status:NewStart date:
Priority:NormalDue date:
Assignee:-% Done:

0%

Category:Administration
Target version:-

Description

We are a brazillian government agency and we've been using Redmine to control ExpressoBr (groupware) tickets.

Some time ago, it became difficult to manage the workflow status transitions. In a complex workflow, the table becomes so large it would scroll horizontally and vertically away from the first line and column. Zooming out and filters helped somehow, mainly if the status transition would be nearer the top left. The most recently created statuses would be too far right and down for zoom to help.

This patch transforms the administration tables into grids, so the first row and first column are always visible, like in a worksheet. Also, I got rid of the button that selected the whole line or column, because it became completely useless in a large grid, but I think it is easy to put it back.

Redmine has 5 pages with tables in administration:
  • Roles and Permissions > Permission Report
  • Trackers > Summary
  • Workflow > Summary
  • Workflow > Status transitions
  • Workflow > Field permissions

The grid itself is something like a table, it has four parts: A floating first cell, a first line stuck to the top of the grid, a first row stuck to the left, a body that on scroll, repositions the first row and first line using javascript. The other javascript resizes the width of columns in the grid.

divgrid.css Magnifier - public/stylesheets/divgrid.css (752 Bytes) Frederico Camara, 2015-07-10 21:54

divgrid.js - public/javascripts/divgrid.js (1001 Bytes) Frederico Camara, 2015-07-10 21:54

divgrid - patch file to redmine 2.6.5 (28.1 KB) Frederico Camara, 2015-07-10 21:54

divgrid - patch file to redmine 2.6.6 (29.8 KB) Frederico Camara, 2015-07-12 16:00

rm20287_2.6-stable.r14424.patch Magnifier (31 KB) Mischa The Evil, 2015-07-19 08:34

issue-20287-trunk-r14507.diff Magnifier (31 KB) Toshi MARUYAMA, 2015-08-18 05:39

issue-20287-redmine-3.2.0.diff Magnifier (34.5 KB) Frederico Camara, 2015-12-28 17:55

issue-20287-redmine-3.3.0.diff Magnifier (33.9 KB) Frederico Camara, 2017-03-23 14:02

issue-20287-redmine-3.4.0.diff Magnifier (34.7 KB) Frederico Camara, 2017-07-05 12:50

0001-Implements-grid-as-in-divgrid-minimal.patch Magnifier - for Redmine 4.0 (37.6 KB) Frederico Camara, 2019-11-20 14:14

0001-Implements-grid-as-in-divgrid-minimal-4.1.1.patch Magnifier - For Redmine 4.1.1 (37.9 KB) Frederico Camara, 2020-04-08 20:44

0001-Implements-grid-as-in-divgrid-minimal-4.1.1-fix1.patch Magnifier - For Redmine 4.1.1 - patch fix, the other will fail (37.9 KB) Frederico Camara, 2020-04-15 04:44

trunk-r19977.patch Magnifier (38.5 KB) Mizuki ISHIKAWA, 2020-08-17 10:41

ScreenShot_2020-08-17_17.49.28.png (64.8 KB) Mizuki ISHIKAWA, 2020-08-17 10:50

ScreenShot_2020-08-17_17.49.08.png (113 KB) Mizuki ISHIKAWA, 2020-08-17 10:50

trunk-r19977-v2.patch Magnifier (38.1 KB) Mizuki ISHIKAWA, 2020-08-21 07:58

ScreenShot_2020-08-21_15.05.11.png - screenshot (289 KB) Mizuki ISHIKAWA, 2020-08-21 08:07

ScreenShot_2020-08-21_15.06.19.png - screenshot (240 KB) Mizuki ISHIKAWA, 2020-08-21 08:07


Related issues

Related to Redmine - Defect #17125: workflow's status-transitions' header-column & header-row... New

History

#1 Updated by Go MAEDA about 5 years ago

I tried to apply your patch but I encountered the following error.

$ patch -p1 < divgrid
patching file app/views/roles/permissions.html.erb
patching file app/views/trackers/fields.html.erb
patching file app/views/workflows/permissions.html.erb
patch: **** malformed patch at line 472: diff -ruN redmine-2.6.5/app/views/workflows/index.html.erb redmine/app/views/workflows/index.html.erb

#2 Updated by Frederico Camara about 5 years ago

#3 Updated by Frederico Camara about 5 years ago

Go MAEDA wrote:

I tried to apply your patch but I encountered the following error.

[...]

Thank you for reporting.

I made the patchfile again, against redmine 2.6.6. It is the same code as 2.6.5.

In 2.6.5, I think I removed windows line feeds from the files I was patching against and it messed up the patchfile.

2.6.6 should be ok.

#4 Updated by Mischa The Evil about 5 years ago

I've extracted a corrected patch file (see Patch), using TortoiseSVN (so it can be applied using "patch -p0 < rm20287..."), against source:/branches/2.6-stable@14424. It contains the changes included in the diff file (as posted in #20287-2) and the addition of the JS and CSS files. This way it is much easier to review the changes made.

FTR: I have not reviewed the diff in substance, but I like the general idea behind this enhancement.

#5 Updated by Toshi MARUYAMA about 5 years ago

This is rebased note-4 patch on trunk r14507.

#6 Updated by Frederico Camara over 4 years ago

This is updated to use redmine-3.2 code (stable).

- Resolves some html format bugs on previous patches.

To apply:

patch -p1 < issue-20287-redmine-3.2.0.diff

#7 Updated by Yuuki NARA almost 4 years ago

+1

#8 Updated by N O almost 4 years ago

+1

#9 Updated by Go MAEDA over 3 years ago

  • Related to Defect #17125: workflow's status-transitions' header-column & header-row pan & scroll out of view when numerous issue-statuses added

#10 Updated by Greg T over 3 years ago

I tried to apply this to Redmine 3.3, which wasn't easy with GNU patch, but it still has a javascript error: TypeError: fsClass.contains is not a function (when trying to access the Additional transitions allowed when the user is ... elements) at

if (fsClass.contains("collapsed"))

Can you please fix that?

It seems contains is an outdated version of the includes method. But even that may not be supported by browsers (e.g. IE11), so it's safer to use

if (~fsClass.indexOf("collapsed"))

#11 Updated by Frederico Camara over 3 years ago

Greg T wrote:

I tried to apply this to Redmine 3.3, which wasn't easy with GNU patch, but it still has a javascript error: TypeError: fsClass.contains is not a function (when trying to access the Additional transitions allowed when the user is ... elements) at
[...]

Can you please fix that?

It seems contains is an outdated version of the includes method. But even that may not be supported by browsers (e.g. IE11), so it's safer to use

[...]

Thank you, I fixed that and updated the patch to what I am using now in production.

To apply:

patch -p1 < issue-20287-redmine-3.3.0.diff

#12 Updated by Greg T over 3 years ago

Thank you. It works.

#13 Updated by Greg T about 3 years ago

This great patch should have been merged by now. :(
Do you have an updated patch for 3.4.0?

#14 Updated by Frederico Camara about 3 years ago

Greg T wrote:

This great patch should have been merged by now. :(
Do you have an updated patch for 3.4.0?

I updated the patch to the little changes made between 3.3.0 and 3.4.0. Did a little testing and it seems alright.

#15 Updated by Greg T about 3 years ago

Frederico Camara wrote:

I updated the patch to the little changes made between 3.3.0 and 3.4.0. Did a little testing and it seems alright.

Thank you very much.

#16 Updated by Frederico Camara 10 months ago

Updated to Redmine 4.0

#17 Updated by Greg T 6 months ago

Dear Frederico Camara,

Can you give us a patch for 4.1.1?
Thanks.

#18 Updated by Frederico Camara 6 months ago

Greg T wrote:

Dear Frederico Camara,

Can you give us a patch for 4.1.1?
Thanks.

Patch for 4.1.1 (unix)

#19 Updated by Greg T 5 months ago

Frederico Camara wrote:

Patch for 4.1.1 (unix)

Thanks. One problem still remained:
1 out of 1 hunk FAILED -- saving rejects to file app/views/workflows/_form.html.erb.rej

#20 Updated by Frederico Camara 5 months ago

Greg T wrote:

Frederico Camara wrote:

Patch for 4.1.1 (unix)

Thanks. One problem still remained:
1 out of 1 hunk FAILED -- saving rejects to file app/views/workflows/_form.html.erb.rej

How I miss git when altering patches. I may have changed the file instead of the patch by mistake.

New patch, disregard the other.

#21 Updated by Mizuki ISHIKAWA about 1 month ago

@Frederico Camara

Thank you for continuing to update the patch. This feature will be very pleasing to anyone who needs to read large tables.

The patch posted on #20287#note-20 caused a conflict when applied to the trunk(r19977), so I will attach the patch that resolved it.

To commit this patch to Redmine, it must be available on the latest Redmine in development.

#22 Updated by Mizuki ISHIKAWA about 1 month ago

I haven't read the code yet, I noticed that the layout collapses when the screen width is reduced.

#23 Updated by Frederico Camara about 1 month ago

Mizuki ISHIKAWA wrote:

I haven't read the code yet, I noticed that the layout collapses when the screen width is reduced.

It's the css and responsive. Just add 'box-sizing: content-box;' to '.g_c' is public/stylesheets/divgrid.css.

I've been trying to implement this with html tables, which I think would be faster, but html tables are hard. Anything but the trivial and you start struggling with the way it's implemented.

To give you and idea, you can stick rows and columns using position, left and top. You have to z-index the header cells left and top, using background color to hide cells underneath (doesn't hide very well). Also you have to adjust the width of row header cells, and adjust the fieldsets the way I did with the divgrid. And then, it starts looking like divgrid.

#24 Updated by Mizuki ISHIKAWA about 1 month ago

Frederico Camara wrote:

Mizuki ISHIKAWA wrote:

I haven't read the code yet, I noticed that the layout collapses when the screen width is reduced.

It's the css and responsive. Just add 'box-sizing: content-box;' to '.g_c' is public/stylesheets/divgrid.css.

I've been trying to implement this with html tables, which I think would be faster, but html tables are hard. Anything but the trivial and you start struggling with the way it's implemented.

To give you and idea, you can stick rows and columns using position, left and top. You have to z-index the header cells left and top, using background color to hide cells underneath (doesn't hide very well). Also you have to adjust the width of row header cells, and adjust the fieldsets the way I did with the divgrid. And then, it starts looking like divgrid.

Thank you for your reply.

I've attached a patch that includes the following changes:
  • Fix so that the layout does not collapse when the width is narrowed
  • Move css written in style attribute to divgrid.css
  • Add class of elements lost on change
  • and others

Also available in: Atom PDF