Columns customize (#1975)

* Columns customization

Related issue: #1471
Related issue: #1832
Related issue: #1354
Related issue: #1929

Author: hillaliy

public/locales/en/modules/torrents-status.json

@@ -29,6 +29,18 @@
       "displayRatioWithFilter": {
         "label": "Display filtered torrents list ratio",
         "info": "If disabled, only the global ratio will be display. The global ratio will still use the labels if set"
+      },
+      "columns": {
+        "label": "Select columns to display",
+        "data": {
+          "down": "Down",
+          "up": "Up",
+          "eta": "ETA",
+          "progress": "Progress"
+        }
+      },
+      "nameColumnSize": {
+        "label": "Change the name column size"
       }
     }
   },
@@ -84,10 +96,6 @@
         "text": "Unable to communicate with your Torrent clients. Please check your configuration"
       }
     },
-    "loading": {
-      "title": "Loading",
-      "description": "Establishing a connection"
-    },
     "popover": {
       "introductionPrefix": "Managed by",
       "metrics": {

src/widgets/torrent/TorrentTile.spec.ts

@@ -24,6 +24,8 @@ describe('TorrentTile', () => {
         speedLimitOfActiveTorrents: 10,
         displayStaleTorrents: false,
         displayRatioWithFilter: false,
+        columns: [],
+        nameColumnSize: 0,
       },
     };
     const torrents: NormalizedTorrent[] = [
@@ -62,6 +64,8 @@ describe('TorrentTile', () => {
         speedLimitOfActiveTorrents: 10,
         displayStaleTorrents: true,
         displayRatioWithFilter: false,
+        columns: [],
+        nameColumnSize: 0,
       },
     };
     const torrents: NormalizedTorrent[] = [
@@ -100,6 +104,8 @@ describe('TorrentTile', () => {
         speedLimitOfActiveTorrents: 10,
         displayStaleTorrents: true,
         displayRatioWithFilter: false,
+        columns: [],
+        nameColumnSize: 0,
       },
     };
     const torrents: NormalizedTorrent[] = [
@@ -138,6 +144,8 @@ describe('TorrentTile', () => {
         speedLimitOfActiveTorrents: 10,
         displayStaleTorrents: true,
         displayRatioWithFilter: false,
+        columns: [],
+        nameColumnSize: 0,
       },
     };
     const torrents: NormalizedTorrent[] = [
@@ -192,6 +200,8 @@ describe('TorrentTile', () => {
         speedLimitOfActiveTorrents: 10,
         displayStaleTorrents: true,
         displayRatioWithFilter: false,
+        columns: [],
+        nameColumnSize: 0,
       },
     };
     const torrents: NormalizedTorrent[] = [
@@ -230,6 +240,8 @@ describe('TorrentTile', () => {
         speedLimitOfActiveTorrents: 10,
         displayStaleTorrents: true,
         displayRatioWithFilter: false,
+        columns: [],
+        nameColumnSize: 0,
       },
     };
     const torrents: NormalizedTorrent[] = [
@@ -268,6 +280,8 @@ describe('TorrentTile', () => {
         speedLimitOfActiveTorrents: 10,
         displayStaleTorrents: true,
         displayRatioWithFilter: false,
+        columns: [],
+        nameColumnSize: 0,
       },
     };
     const torrents: NormalizedTorrent[] = [constructTorrent('HH', 'I am completed', true, 0, 0)];

src/widgets/torrent/TorrentTile.tsx

@@ -3,7 +3,6 @@ import {
   Center,
   Flex,
   Group,
-  Loader,
   Popover,
   Progress,
   Stack,
@@ -16,7 +15,7 @@ import { IconFileDownload } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { MRT_TableContainer, useMantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
+import { type MRT_ColumnDef, MRT_TableContainer, useMantineReactTable } from 'mantine-react-table';
 import { useTranslation } from 'next-i18next';
 import { useMemo } from 'react';
 import { MIN_WIDTH_MOBILE } from '~/constants/constants';
@@ -29,6 +28,7 @@ import {
 
 import { useGetDownloadClientsQueue } from '../download-speed/useGetNetworkSpeed';
 import { defineWidget } from '../helper';
+import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';
 import { TorrentQueuePopover } from './TorrentQueueItem';
 
@@ -69,6 +69,18 @@ const definition = defineWidget({
       defaultValue: true,
       info: true,
     },
+    columns: {
+      type: 'multi-select',
+      defaultValue: ['up', 'down', 'eta', 'progress'],
+      data: [{ value: 'up' }, { value: 'down' }, { value: 'eta' }, { value: 'progress' }],
+    },
+    nameColumnSize: {
+      type: 'slider',
+      defaultValue: 2,
+      min: 1,
+      max: 4,
+      step: 1,
+    },
   },
   gridstack: {
     minWidth: 2,
@@ -146,8 +158,7 @@ function TorrentTile({ widget }: TorrentTileProps) {
             </Popover.Dropdown>
           </Popover>
         ),
-        maxSize: 1,
-        size: 1,
+        maxSize: widget.properties.nameColumnSize,
       },
       {
         accessorKey: 'totalSelected',
@@ -184,7 +195,7 @@ function TorrentTile({ widget }: TorrentTileProps) {
         Cell: ({ cell, row }) => (
           <Flex>
             <Text className={useStyles().classes.noTextBreak}>
-              {(Number(cell.getValue()) * 100).toFixed(1)}%
+              {(Number(cell.getValue()) * 100).toPrecision(3)}%
             </Text>
             <Progress
               radius="lg"
@@ -240,9 +251,10 @@ function TorrentTile({ widget }: TorrentTileProps) {
       columnVisibility: {
         isCompleted: false,
         dateAdded: false,
-        uploadSpeed: width > MIN_WIDTH_MOBILE,
-        downloadSpeed: width > MIN_WIDTH_MOBILE,
-        eta: width > MIN_WIDTH_MOBILE,
+        uploadSpeed: widget.properties.columns.includes('up') && width > MIN_WIDTH_MOBILE,
+        downloadSpeed: widget.properties.columns.includes('down') && width > MIN_WIDTH_MOBILE,
+        eta: widget.properties.columns.includes('eta') && width > MIN_WIDTH_MOBILE,
+        progress: widget.properties.columns.includes('progress'),
       },
     },
   });
@@ -259,21 +271,7 @@ function TorrentTile({ widget }: TorrentTileProps) {
   }
 
   if (isInitialLoading || !data) {
-    return (
-      <Stack
-        align="center"
-        justify="center"
-        style={{
-          height: '100%',
-        }}
-      >
-        <Loader />
-        <Stack align="center" spacing={0}>
-          <Text>{t('card.loading.title')}</Text>
-          <Text color="dimmed">{t('card.loading.description')}</Text>
-        </Stack>
-      </Stack>
-    );
+    return <WidgetLoading />;
   }
 
   if (data.apps.length === 0) {