feat(a11y-table): Define a standalone table component by shadowbas · Pull Request #1634 · runbox/runbox7

shadowbas · 2024-11-29T12:52:56Z

Add table to the app component.

src/app/app.component.scss

shadowbas · 2024-12-05T15:07:50Z

src/app/app.component.scss

 }

+.text-primary {
+    color: #01579b;


Move to a css property

castaway · 2024-12-09T11:45:09Z

Initial thoughts

I'd like to keep the abstraction for the messagedisplay and column lists - for column lists especially we have a plan to allow users to rearrange them, so they should ideally not be defined in the template - canvastable is the only place messagedisplay is used, so it can be improved if needed for this feature
messagedisplay for example already has the ability to return selectedMessageIds for each possible type of display, so I don't think it makes sense to redo that (confusingly ;)
there's still a fair amount of this.canvastable.rows references in app.component.ts that presumably still need changing

shadowbas · 2025-01-06T15:16:35Z

src/app/app.component.ts

+  async enrichRows() {
+    const { start, end } = this.renderedRange
+
+    this.rows = await Promise.all(mapOverIndexes(async (value) => {


This might cause a race condition. When renderedRange changes twice; it might happen that the first range change resolves later than the second range change.

Find a way to merge resolved arrays in a way that will keep the latest and not overwrite fetched rows

shadowbas · 2025-01-29T11:24:29Z

src/app/accessible-table/accessible-table.component.html

@@ -0,0 +1,13 @@
+<cdk-virtual-scroll-viewport [itemSize]="firstRowHeight" class="email-viewport">


Rename to virtual-scroll-table.component

shadowbas · 2025-01-29T11:26:11Z

src/app/accessible-table/accessible-table.component.ts

+import { debounceTime } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-accessible-table',


Rename to app-virtual-scroll-table

shadowbas · 2025-01-29T11:28:07Z

src/app/app.component.html

+                      <td class="checkbox-cell">
+                        <mat-checkbox
+                          (click)="onCheckboxClick($event, item, index)"
+                          [checked]="rowsSelectionModel.isSelected(item)"


Remove event listener from the skeleton version of a row.

shadowbas · 2025-01-29T11:34:09Z

src/app/app.component.html

+              (sortToggled)="updateSearch(true)">
+            </canvastablecontainer>
+
+            <app-accessible-table


@castaway , at some point I think it makes sense to move this table definition into its own component.

I believe that time to be when we want to re-use this table in other places either because we want to have better routing for folders or for some other reason that requires re-use.

Its that sizable that I'd suggest earlier rather than later (since app.component.html is chunky already)

shadowbas · 2025-01-29T11:34:50Z

src/app/app.component.scss

+
+}
+
+.skeleton-bone {


Move skeleton styles to global styles.

shadowbas · 2025-01-29T11:40:39Z

src/app/human-bytes.pipe.ts

+
+    const result = (value / Math.pow(base, exponent)).toFixed(decimalPlaces);
+    return `${parseFloat(result)} ${suffixes[exponent]}`;
+  }


It appears we have a function in src/app/messagetable/messagetablerow.ts. The converting of a number that represents the amount of bytes to a human readable format is not specific to messagetable.

Make a human-readable utility module and use that here and in the messagetablerow.ts.

shadowbas · 2025-01-29T11:43:58Z

src/app/models/bindable-selection-model.ts

+    const selection = (this.selectionModel.isMultipleSelection() ? items : [items]) as T[];
+    this.selectionModel.setSelection(...selection)
+  }
+}


Angular allows for two way binding in the template. Here we wrap the angular Selection model and add the selected property to be used for binding.

shadowbas · 2025-01-29T11:55:54Z

src/app/models/filter-selection-model.ts

+      }
+    });
+  }
+}


A SelectionModel that takes a predicate which is used to filter items selected using the .select(...items) method. This is handy to prevent selecting items that have not been loaded yet. This is relevant when doing a range select which contains items that have not been loaded into array yet.

shadowbas · 2025-01-29T11:57:55Z

src/app/resizable-button/resizable-button.component.ts

+  @HostListener('window:resize')
+  onWindowResize() {
+    this.resetWidth();
+  }


Should this be here? When do we want to reset the widths?

shadowbas · 2025-01-29T12:00:40Z

src/app/websocketsearch/websocketsearchmaillist.ts

+        size: this.getRow(rowIndex).size,
+      };
+    }
+


@castaway , could you please help with how to test the websocketsearchmaillist?

websocketsearch is used when:

The index sync is turned off

A search is made (this hits an API which returns search results from the index on the server)

shadowbas · 2025-01-29T15:57:32Z

src/app/xapian/searchmessagedisplay.ts

      // This shouldnt happen, it means something changed the stored
      // data without updating the messagedisplay rows.
-      console.log('Tried to lookup ' + index + ' in searchIndex, isnt there! ' + e);
+      console.error('Tried to lookup ' + index + ' in searchIndex, isnt there! ' + e);


Change + e to , e for more useful log in console

shadowbas · 2025-01-29T15:58:50Z

src/app/xapian/searchmessagedisplay.ts

+      seen: this.searchService.getDocData(this.getRowId(index)).seen,
+    };
+
+    if (app.viewmode === 'conversations') {


Add the conversation count also to the accessible table as it was in canvastable.

shadowbas · 2025-01-29T15:59:38Z

src/app/xapian/searchservice.ts

            // console.log(`${f}`);
            // console.log(FS.stat(`${this.partitionsdir}/${f}`));
-          });
+          // });


Removed the look as it does nothing but block the thread. Easy performance win

castaway · 2025-02-04T11:52:50Z

Notes while testing/poking around - mostly comparing to existing prod (since we didnt write a spec..)
1.

Clicking on the Arrow seems to do nothing other than make the arrow disappear (does not redisplay sorted date in reverse) - ah! the arrow is just a display of the current direction? It looks like its actionable.. clicking on the arrow is how the current one sorts.

(new change on prod) - the icons for move/trash etc for selected messages - need to disappear or better grey-out when no messages are selected
Is there no "show message list and mailviewer at the same time in horizontal mode"? it seems to go full screen only and not allow me to drag it smaller - I was wrong, there is, it just somehow defaulted to full height (ignored my prefs?)
open message, full height/display mailviewer - refresh page - it looks like the "sync index" prompt appears and then is covered up by the opened message - not sure if this is an issue in prod already, dont usually view it full height
Drag messages to folder - missing the drag-image showing the messages being dragged
This one is a bit weird - I keep having to do things twice - for example I visited the Overview, viewed a list of emails, which link to the mail view (for example https://rmmstage02.runbox.com/app/#Inbox:12813748 (user test@runbox.com) - clicking on this link took me to the #Inbox page, not opening the specific message. I went back to the Overview (forward, I clicked on Overview again), re-clicked on the message link, and the 2nd time it did open the individual message in the mailview
Opened a message / mailview (from the Overview), the list jumps/scrolls to show that row (good!) , I closed the message (horizontal view), more of the message list was displayed - but it didnt fill the available space / load more messages:

.. If I scroll down from that I lose even more messagelist height:
Threaded view doesnt seem to work for me, after I chose it I got this (ongoing):

.. and this in the devtools:

TypeError: Cannot read properties of undefined (reading '1')
    at lp.getRowData (searchmessagedisplay.ts:244:29)
    at app.component.ts:1500:48
    at Generator.next (<anonymous>)```

10. After testing threading I switched it off and tried unread only, which worked.. then I turned off the index, scrolled, turned unread only off/on, and its not filtering:

![2025-02-04 13 49 33 rmmstage02 runbox com 7bc055abc18b](https://github.com/user-attachments/assets/101e1789-63f0-4e7a-aeaf-7a04eff43940)

castaway · 2025-02-04T16:09:52Z

Starting new comment since that one seems full:
11. Select-drag over checkboxes with mouse (works on prod) - doesnt here
12. No way of "select all on page" / "select all in folder" that I can see?

castaway · 2025-02-05T16:06:17Z

Another odd issue: If I navigate away from the Inbox/message list (eg to Settings), then back via clicking on the menus at the top of the app - the message list shows up empty apart from the checkboxes.. If I swap browser tabs (eg to mattermost and back) then the list reappears ...

castaway · 2025-03-19T16:25:40Z

Some testing this afternoon:

The fetch of message contents according to the current message list - this should happen in both the index-sync and index-off modes
If I click "Stop Index Synchronisation" things go a bit screwy! (hmm not always tho.. yay)

shadowbas · 2025-03-31T12:47:11Z

Some testing this afternoon:

The fetch of message contents according to the current message list - this should happen in both the index-sync and index-off modes

If I click "Stop Index Synchronisation" things go a bit screwy! (hmm not always tho.. yay)

@castaway , I am unable to reproduce this on my account. I could do a null check and drop the message when it is null.

…oll table

…ual scroll table

…nt virtual scroll table

…Implement virtual scroll table

…list): Implement virtual scroll table

…essage-list): Implement virtual scroll table

… feat(message-list): Implement virtual scroll table

… fixup! feat(message-list): Implement virtual scroll table

castaway · 2025-11-05T10:52:42Z

Copy this here so we don't lose track of it:

Testing on Thurs Oct 30th (screenshots in chat)

selected some messages in the Inbox list
marked them as Spam
checked that the backend confirmed that they should now be in the Spam folder
some of them disappeared from the Inbox message list and .. some did not
also it only fetched the contents of the message after I clicked on it to view it (which was from the inbox, after it should have been moved to Spam)

gtandersen · 2025-11-05T14:18:04Z

More test results follow:

Overall impression smooth and snappy. :)
Clicking to stop and then start index sync removes the search field while in prod you can still search using the server index while the index is being downloaded.
Couldn't see how to select all messages in Inbox (including non-visible). Actually it seems that all message rows in Trash are selected by default, but not in other folders. After turning index sync off, the default behavior seems to be selecting all messages in the folder. Could be related to the number of messages in the folder, which in Inbox is 47k.
Selecting a page full (23) messages and dragging them from Inbox to Trash or another regular folder seems to not have any effect. Turning off index sync shows the correct result of the operation.
The "Moving ..." box is very useful but its position immediately changes from the cursor position to the top left corner. In Safari the box doesn't show at all and messages can't be moved.
Selecting 5 messages and clicking Mark as Read shows a "Toggling read status" message that does not disappear but the messages are not toggled. There are no visible errors in the console. Without index sync it works as expected, except that "Toggling read status" doesn't disappear.
Minor detail: The green background color on target folders when moving messages could be changed to (light) blue,.

shadowbas requested review from castaway and gtandersen November 29, 2024 12:52

shadowbas force-pushed the shadowbas/feat-accessible-table branch from 596aec9 to 972eb6a Compare December 5, 2024 14:08

shadowbas commented Dec 5, 2024

View reviewed changes

src/app/app.component.scss Outdated Show resolved Hide resolved

shadowbas commented Dec 5, 2024

View reviewed changes

src/app/app.component.scss Outdated

}

.text-primary {

color: #01579b;

Copy link

Contributor Author

shadowbas Dec 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move to a css property

gtandersen approved these changes Dec 5, 2024

View reviewed changes

shadowbas requested a review from gtandersen December 12, 2024 12:10

shadowbas commented Jan 6, 2025

View reviewed changes

shadowbas force-pushed the shadowbas/feat-accessible-table branch from 7c02014 to 62b6d40 Compare January 14, 2025 17:42

shadowbas commented Jan 29, 2025

View reviewed changes

src/app/app.component.scss Outdated

}

.skeleton-bone {

Copy link

Contributor Author

shadowbas Jan 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move skeleton styles to global styles.

shadowbas commented Jan 29, 2025

View reviewed changes

shadowbas force-pushed the shadowbas/feat-accessible-table branch from fef59c7 to 67fd747 Compare February 4, 2025 16:34

shadowbas force-pushed the shadowbas/feat-accessible-table branch from 44e5ea1 to 92576fa Compare March 10, 2025 16:10

shadowbas added 12 commits September 3, 2025 15:44

fixup! fixup! fixup! fixup! feat(message-list): Implement virtual scr…

05c5d02

…oll table

fixup! fixup! fixup! fixup! fixup! feat(message-list): Implement virt…

8833047

…ual scroll table

fixup! fixup! fixup! fixup! fixup! fixup! feat(message-list): Impleme…

399ac92

…nt virtual scroll table

fixup! fixup! fixup! fixup! fixup! fixup! fixup! feat(message-list): …

4224f1c

…Implement virtual scroll table

fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! feat(message-…

b5f3632

…list): Implement virtual scroll table

fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! feat(m…

390069d

…essage-list): Implement virtual scroll table

fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup!…

9112bbf

… feat(message-list): Implement virtual scroll table

fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup!…

6bc39f4

… fixup! feat(message-list): Implement virtual scroll table

Some more cleanup of canvas code

47cfacc

fixup! Some more cleanup of canvas code

70673e7

fixup! fixup! Some more cleanup of canvas code

e2d62bb

Remove the canvastable components

db20725

shadowbas force-pushed the shadowbas/feat-accessible-table branch from dfe1a65 to db20725 Compare September 3, 2025 12:44

shadowbas and others added 15 commits September 3, 2025 15:46

Remove the dollar postfix for rxjs streams

c3b4e50

Do reset column no longer used

94f0325

Fix lint issues of accessible table changes

b7f451b

Fix failing build

23b040f

fixup! Fix failing build

3e0375c

fixup! fixup! Fix failing build

4122b13

fixup! fixup! fixup! Fix failing build

7af8acc

fixup! fixup! fixup! fixup! Fix failing build

3ece240

fixup! fixup! fixup! fixup! fixup! Fix failing build

1d211ba

fixup! fixup! fixup! fixup! fixup! fixup! Fix failing build

cbd1a67

Trying to fix reactive bulk action issue

956b583

Remove update message list height callback from app template

4e8542c

Fix scroll to index rename

706a346

Remove unused mutations arg

e67b007

fixup! Remove update message list height callback from app template

26207f0

		@@ -0,0 +1,13 @@
		<cdk-virtual-scroll-viewport [itemSize]="firstRowHeight" class="email-viewport">

Conversation

shadowbas commented Nov 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

castaway commented Dec 9, 2024

Uh oh!

shadowbas Jan 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shadowbas Jan 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shadowbas Jan 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shadowbas Jan 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shadowbas Jan 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shadowbas Jan 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

castaway commented Feb 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

castaway commented Feb 4, 2025

Uh oh!

castaway commented Feb 5, 2025

Uh oh!

castaway commented Mar 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shadowbas commented Mar 31, 2025

Uh oh!

castaway commented Nov 5, 2025

Uh oh!

gtandersen commented Nov 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

shadowbas commented Nov 29, 2024 •

edited

Loading

shadowbas Jan 6, 2025 •

edited

Loading

shadowbas Jan 29, 2025 •

edited

Loading

shadowbas Jan 29, 2025 •

edited

Loading

shadowbas Jan 29, 2025 •

edited

Loading

shadowbas Jan 29, 2025 •

edited

Loading

shadowbas Jan 29, 2025 •

edited

Loading

castaway commented Feb 4, 2025 •

edited

Loading

castaway commented Mar 19, 2025 •

edited

Loading