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

shadowbas · 2024-12-05T15:12:03Z

src/app/app.component.ts

+    return Array.from(this.selectedRows).map(x => x.id);
+  }
+
+  updateRows() {


This is where I normalize the sync messages and non-sync messages. It's a mess but the simplest I could thing of

shadowbas · 2024-12-05T15:12:42Z

src/app/app.component.ts

+    this.rows = (() => {
+      if (!this.canvastable?.rows?.rows?.length) return []
+
+      if (Array.isArray(this.canvastable.rows.rows[0]))


This is for when the rows are the arrays where the first item is the messageid.

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?

Add table to the app component.

…dopaint

…stable dopaint

…e canvastable dopaint

This solves the issue where the bottom drawer overlaps selected message.

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

…resize

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

}

.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 added 3 commits February 4, 2025 16:13

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

e2bc914

Add table to the app component.

Add support for th and td templating

dc9660a

Finalize drag and drop

0cf0898

shadowbas added 21 commits February 4, 2025 16:16

Small typing changes in app.component.ts helpers

00c86aa

WIP: Fix memory issue and use message display abstraction

d146390

Fix date and from columns values

7cf600e

Make row deselect when selected row clicked

49dc22f

Fix the damn scroll issue finally with trackBy

400973b

Improve resize button style

5012fb7

Add answered and folder column and fixed message data fn

17d6961

Disable canvastable dopaint

7a67bba

fixup! Disable canvastable dopaint

53b23f4

fixup! fixup! Disable canvastable dopaint

f42853e

fixup! fixup! fixup! Disable canvastable dopaint

bfe52c0

fixup! fixup! fixup! fixup! Disable canvastable dopaint

d8e0fe4

fixup! fixup! fixup! fixup! fixup! Disable canvastable dopaint

205a93d

fixup! fixup! fixup! fixup! fixup! fixup! Disable canvastable dopaint

2377ad2

fixup! fixup! fixup! fixup! fixup! fixup! fixup! Disable canvastable …

f1ee521

…dopaint

fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! Disable canva…

fac4243

…stable dopaint

fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! Disabl…

0b5b286

…e canvastable dopaint

Fix build issue

79609ad

fixup! Fix build issue

65d7148

fixup! fixup! Fix build issue

393d2af

fixup! fixup! fixup! Fix build issue

67fd747

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

Scroll selected message into view

7628984

This solves the issue where the bottom drawer overlaps selected message.

shadowbas added 6 commits February 6, 2025 14:32

Set column px width on user column resize

cb46f0b

Fix multi action buttons

07704a5

Remove no direction from sort button cycle

c783bb4

Prevent mat-icon from increasing tbody height

8e76526

Have messages underneath mail viewer and on scroll down or on window …

88004ca

…resize

Reduce font size of table

af77be5

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

shadowbas Dec 5, 2024

shadowbas Dec 5, 2024

castaway commented Dec 9, 2024

shadowbas Jan 6, 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

shadowbas Jan 29, 2025

shadowbas Jan 29, 2025

shadowbas Jan 29, 2025

shadowbas Jan 29, 2025

shadowbas Jan 29, 2025

shadowbas Jan 29, 2025

shadowbas Jan 29, 2025

castaway commented Feb 4, 2025 •

edited

Loading

castaway commented Feb 4, 2025

castaway commented Feb 5, 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

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

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

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

Choose a reason for hiding this comment

castaway commented Feb 4, 2025 • edited Loading

castaway commented Feb 4, 2025

castaway commented Feb 5, 2025

shadowbas commented Nov 29, 2024 •

edited

Loading

shadowbas Jan 6, 2025 •

edited

Loading

castaway commented Feb 4, 2025 •

edited

Loading