Switch torrents Table to MantineReactTable with filter/sort function #1557

InterN0te · 2023-11-07T14:26:10Z

Overview

Switch Torrents Table to MantineReactTable

Issue Number (if applicable)

Related issue: #1354 #1484 #1555

New Vars

Add dependencies "mantine-react-table": "^1.3.4"

Screenshot

…into dev-sortTorrents

InterN0te · 2023-11-08T01:01:09Z

This generally works, except that I don't understand why the ETA, upload Speed or download Speed columns are not automatically displayed in large screen with :

      columnVisibility: {
        isCompleted: false,
        dateAdded: false,
        name: true,
        totalSize: true,
        uploadSpeed: width > MIN_WIDTH_MOBILE,
        downloadSpeed: width > MIN_WIDTH_MOBILE,
        eta: width > MIN_WIDTH_MOBILE,

If I display those values in the Search field, they are OK and well compare

ajnart · 2023-11-08T01:09:48Z

I can’t really review right now but don’t you think these feature are overkill ? The screenshots seem to completely break from the simple aesthetic that homarr wants to achieve

InterN0te · 2023-11-08T08:35:51Z

I don't it's overkill but I understand your point of view

I will try to switch to the minimalist table to have something like that :

ajnart · 2023-11-08T08:38:33Z

I don't it's overkill but I understand your point of view

I will try to switch to the minimalist table to have something like that :

Yeah I think this makes a lot more sense. I don’t think anyone would need to have a highly configurable sorting for their torrent download list.
Regarding the sorting options you can save them in local storage using the mantine hook provided for that (if that’s not already saved)

InterN0te · 2023-11-09T09:56:59Z

With the minimal table, filters work great (one or two click to set order and a third click to disable sort and use default sorting (dateAdded descending)

I still have an issue with displaying columns only on big screen with :

      columnVisibility: {
        isCompleted: false,
        dateAdded: false,
        name: true,
        totalSize: true,
        uploadSpeed: width > MIN_WIDTH_MOBILE,
        downloadSpeed: width > MIN_WIDTH_MOBILE,
        eta: width > MIN_WIDTH_MOBILE,
      },

InterN0te · 2023-11-09T16:18:34Z

I think I got it !

Small screen :

Normal screen :

ajnart · 2023-11-09T19:16:02Z

Nice ! It looks so good now. I will review it later

InterN0te · 2023-11-10T17:53:50Z

I don't give up but I don't have much time now : It's seems good, but it isn't, the column size aren't good for small screen

ajnart · 2023-11-12T13:08:09Z

I want to change the other tables in the app to reflect this too, I will try to do it with Docker page, would you want to try it on your own? I thibk you talked with tag about this on discord ?

ajnart · 2023-11-12T13:08:48Z

If you are ok with us working on your PR we could (and and I) unify the look of the other tables by using mantine react table in other places in the app. IM my opinion it would make sense to unify all these

InterN0te · 2023-11-12T13:12:39Z

I'm ok with you all working on my PR, I don't really like working on UI, I prefer back-end coding

I could try for years and never be satisfied of my visual

manuel-rw · 2023-11-18T19:17:38Z

package.json

@@ -91,6 +91,10 @@
    "html-entities": "^2.3.3",
    "i18next": "^22.5.1",
    "immer": "^10.0.2",
+    "js-file-download": "^0.4.12",
+    "mantine-react-table": "^1.3.4",
+    "moment": "^2.29.4",


We already have dayjs. Do you really need moment?

I think it came with mantine-react-table because I don't remember installing it. Is it possible ?

manuel-rw · 2023-11-18T19:18:29Z

src/widgets/torrent/TorrentTile.tsx

+        dateAdded: false,
+        name: true,
+        totalSize: true,
+        // uploadSpeed: width > MIN_WIDTH_MOBILE,


What is with this commented out code?

In initialState, it doesn't correctly compare : width seems to be egal to 0 so I softly removed it to keep a track of this try

manuel-rw · 2023-11-18T19:19:04Z

src/widgets/torrent/TorrentTile.tsx

+  /* // OldTable
  return (
    <Flex direction="column" sx={{ height: '100%' }} ref={ref}>
      <ScrollArea sx={{ height: '100%', width: '100%' }} mb="xs">
        <Table striped highlightOnHover p="sm">
          <thead>
            <tr>
-              <th>{t('card.table.header.name')}</th>
-              <th>{t('card.table.header.size')}</th>
-              {width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.download')}</th>}
-              {width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.upload')}</th>}
-              {width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.estimatedTimeOfArrival')}</th>}
-              <th>{t('card.table.header.progress')}</th>
+              <th style={{cursor: "pointer"}} onClick={() => requestSort('name')}>{t('card.table.header.name')}</th>
+              <th style={{cursor: "pointer"}} onClick={() => requestSort('totalSize')}>{t('card.table.header.size')}</th>
+              {width > MIN_WIDTH_MOBILE && (
+                <th style={{cursor: "pointer"}} onClick={() => requestSort('downloadSpeed')}>
+                  {t('card.table.header.download')}
+                </th>
+              )}
+              {width > MIN_WIDTH_MOBILE && (
+                <th style={{cursor: "pointer"}} onClick={() => requestSort('uploadSpeed')}>{t('card.table.header.upload')}</th>
+              )}
+              {width > MIN_WIDTH_MOBILE && (
+                <th style={{cursor: "pointer"}} onClick={() => requestSort('eta')}>


Remove commented out code

kingp0dd · 2024-03-22T03:22:32Z

is this already available in the latest version? i can't see the new options:

InterN0te and others added 3 commits November 7, 2023 15:07

Add sort on torrents list

4c130dc

Add sort command on filteredTorrents

7ddd524

Merge branch 'dev-sortTorrents' of https://github.com/InterN0te/homarr …

7bdd486

…into dev-sortTorrents

InterN0te marked this pull request as draft November 7, 2023 14:51

InterN0te and others added 6 commits November 7, 2023 22:28

Replace HTML Table by MantineReactTable

899e3e3

Fixed yarn.lock

ee48cf6

Fixed Type

09bcfe8

Merge branch 'ajnart:dev' into dev-sortTorrents

e55a746

Set filters options

561b004

Try to hide some column on small screen

9f4dba8

InterN0te changed the title ~~Add sort function on Torrents list item~~ Switch torrents Table to MantineReactTable with filter/sort function Nov 8, 2023

InterN0te marked this pull request as ready for review November 8, 2023 00:50

Switch to minimal Table

ee503b9

manuel-rw added 2 commits November 18, 2023 19:08

🔀 Merge branch 'dev' into dev-sortTorrents

83688d7

Merge branch 'dev' into dev-sortTorrents

10f2d79

manuel-rw requested changes Nov 18, 2023

View reviewed changes

InterN0te and others added 3 commits November 18, 2023 23:06

Removing unnecessary code

25682f6

Merge branch 'ajnart:dev' into dev-sortTorrents

9a08530

Repair missing code

74ed40e

Fixing build and putting back the popover

568f864

This was referenced Nov 21, 2023

Sorting list of torrents in torrent widget? #1689

Closed

Qbittorrent sort by #1704

Closed

manuel-rw approved these changes Dec 7, 2023

View reviewed changes

manuel-rw merged commit 2170201 into ajnart:dev Dec 7, 2023
1 check passed

InterN0te deleted the dev-sortTorrents branch December 9, 2023 13:33

This was referenced Jan 1, 2024

Torrent size is NaN #1781

Closed

🐛 Nan for size in torrent widget #1782

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch torrents Table to MantineReactTable with filter/sort function #1557

Switch torrents Table to MantineReactTable with filter/sort function #1557

InterN0te commented Nov 7, 2023 •

edited

Loading

InterN0te commented Nov 8, 2023 •

edited

Loading

ajnart commented Nov 8, 2023

InterN0te commented Nov 8, 2023 •

edited

Loading

ajnart commented Nov 8, 2023

InterN0te commented Nov 9, 2023

InterN0te commented Nov 9, 2023

ajnart commented Nov 9, 2023

InterN0te commented Nov 10, 2023

ajnart commented Nov 12, 2023

ajnart commented Nov 12, 2023

InterN0te commented Nov 12, 2023

manuel-rw Nov 18, 2023

InterN0te Nov 18, 2023

manuel-rw Nov 18, 2023

InterN0te Nov 18, 2023

manuel-rw Nov 18, 2023

kingp0dd commented Mar 22, 2024

Switch torrents Table to MantineReactTable with filter/sort function #1557

Switch torrents Table to MantineReactTable with filter/sort function #1557

Conversation

InterN0te commented Nov 7, 2023 • edited Loading

Category

Overview

Issue Number (if applicable)

New Vars

Screenshot

InterN0te commented Nov 8, 2023 • edited Loading

ajnart commented Nov 8, 2023

InterN0te commented Nov 8, 2023 • edited Loading

ajnart commented Nov 8, 2023

InterN0te commented Nov 9, 2023

InterN0te commented Nov 9, 2023

ajnart commented Nov 9, 2023

InterN0te commented Nov 10, 2023

ajnart commented Nov 12, 2023

ajnart commented Nov 12, 2023

InterN0te commented Nov 12, 2023

manuel-rw Nov 18, 2023

Choose a reason for hiding this comment

InterN0te Nov 18, 2023

Choose a reason for hiding this comment

manuel-rw Nov 18, 2023

Choose a reason for hiding this comment

InterN0te Nov 18, 2023

Choose a reason for hiding this comment

manuel-rw Nov 18, 2023

Choose a reason for hiding this comment

kingp0dd commented Mar 22, 2024

InterN0te commented Nov 7, 2023 •

edited

Loading

InterN0te commented Nov 8, 2023 •

edited

Loading

InterN0te commented Nov 8, 2023 •

edited

Loading