feat(a11y-table): Define a standalone table component #1634

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

Add table to the app component.

shadowbas · 2024-12-05T15:06:51Z

src/app/app.component.scss

+canvastablecontainer {
+    opacity: 0;
+}
+


Would be better to instead get rid of anything canvas related in the code.

Remove this.canv and the canvas element from canvastable

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

src/app/app.component.scss

@@ -68,3 +72,10 @@
    width: 150px;
 }

+.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.

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?

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

src/app/xapian/searchmessagedisplay.ts

    } catch (e) {
      // 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 [email protected]) - 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 ...

Add table to the app component. Add support for th and td templating Finalize drag and drop Fix height diff between rows Fix reactive model of table fixup! Fix reactive model of table fixup! fixup! Fix reactive model of table fixup! fixup! fixup! Fix reactive model of table fixup! fixup! fixup! fixup! Fix reactive model of table fixup! fixup! fixup! fixup! fixup! Fix reactive model of table fixup! fixup! fixup! fixup! fixup! fixup! Fix reactive model of table Fix the ctrl shift and meta key issue fixup! Fix the ctrl shift and meta key issue Resize idea and mapOverIndexes craziness fixup! Resize idea and mapOverIndexes craziness fixup! fixup! Resize idea and mapOverIndexes craziness Add flagged column Use BehaviorSubject to update firstRowHeight This removes the error where it complains about a property change after render. Enrich rows also when rows change Use SelectionModel and remove checkbox select logic from table Prevent checkbox toggle after checked is set Fix smaller screen layout Do not deselect for certain actions. Fix bulk action when no item is checked Revert the directive resizer changes Add resizable columns - Setup a sane default for column widths. - Convert absolute columns widths to relative ones. https://codepen.io/Neizan/pen/ExajoJe fixup! Add resizable columns fixup! fixup! Add resizable columns fixup! fixup! fixup! Add resizable columns fixup! fixup! fixup! fixup! Add resizable columns Add some sane column width defaults Enable ordering of columns on th click Reset column width on dblclick fixup! Reset column width on dblclick Show skeleton when scrolling fast fixup! Show skeleton when scrolling fast Fix issue where last selected is set to first item on scroll Figure out how to reset column widths on switching routes fixup! Figure out how to reset column widths on switching routes Recompute column width on window resize Fix issues that caused build to fail Fix freezing caused by too many row height checks fixup! fixup! Figure out how to reset column widths on switching routes Small typing changes in app.component.ts helpers WIP: Fix memory issue and use message display abstraction Fix date and from columns values Make row deselect when selected row clicked Fix the damn scroll issue finally with trackBy Improve resize button style Add answered and folder column and fixed message data fn Disable canvastable dopaint fixup! Disable canvastable dopaint fixup! fixup! Disable canvastable dopaint fixup! fixup! fixup! Disable canvastable dopaint fixup! fixup! fixup! fixup! Disable canvastable dopaint fixup! fixup! fixup! fixup! fixup! Disable canvastable dopaint fixup! fixup! fixup! fixup! fixup! fixup! Disable canvastable dopaint fixup! fixup! fixup! fixup! fixup! fixup! fixup! Disable canvastable dopaint fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! Disable canvastable dopaint fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! Disable canvastable dopaint Fix build issue fixup! Fix build issue fixup! fixup! Fix build issue fixup! fixup! fixup! Fix build issue Scroll selected message into view This solves the issue where the bottom drawer overlaps selected message. Set column px width on user column resize Fix multi action buttons Remove no direction from sort button cycle Prevent mat-icon from increasing tbody height Have messages underneath mail viewer and on scroll down or on window resize Reduce font size of table Get threaded view working similar to production Rename accessible table to virtual scroll table Remove event listener and binding from skeleton version of message row Move common human bytes logic to own module and reuse Remove resize listener from resize button The reason being that the resize button is not aware of the larger window that resizes. fixup! Remove resize listener from resize button fixup! fixup! Remove resize listener from resize button Add horizontalResize event to resize observer directive Use this event instead to reset column widths.

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.

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

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

fix(workflow): Update deprecated dependencies

36c5e72

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(a11y-table): Define a standalone table component #1634

feat(a11y-table): Define a standalone table component #1634

shadowbas commented Nov 29, 2024 •

edited

Loading

shadowbas Dec 5, 2024

shadowbas Jan 29, 2025

shadowbas Dec 5, 2024

castaway commented Dec 9, 2024

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

shadowbas Jan 29, 2025

shadowbas Jan 29, 2025 •

edited

Loading

shadowbas Jan 29, 2025

shadowbas Jan 29, 2025

shadowbas Jan 29, 2025

shadowbas Jan 29, 2025

shadowbas Jan 29, 2025

shadowbas Jan 29, 2025 •

edited

Loading

shadowbas Jan 29, 2025

castaway commented Feb 4, 2025 •

edited

Loading

castaway commented Feb 4, 2025

castaway commented Feb 5, 2025

castaway commented Mar 19, 2025 •

edited

Loading

shadowbas commented Mar 31, 2025

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

feat(a11y-table): Define a standalone table component #1634

Are you sure you want to change the base?

feat(a11y-table): Define a standalone table component #1634

Conversation

shadowbas commented Nov 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

castaway commented Dec 9, 2024

shadowbas Jan 6, 2025 • edited Loading

Choose a reason for hiding this comment

shadowbas Jan 29, 2025 • edited Loading

Choose a reason for hiding this comment

shadowbas Jan 29, 2025 • edited Loading

Choose a reason for hiding this comment

shadowbas Jan 29, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shadowbas Jan 29, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shadowbas Jan 29, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

castaway commented Feb 4, 2025 • edited Loading

castaway commented Feb 4, 2025

castaway commented Feb 5, 2025

castaway commented Mar 19, 2025 • edited Loading

shadowbas commented Mar 31, 2025

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