Add show more button on fills list page

src/lib/translate/en.ts

@@ -6,9 +6,11 @@ export const enDict: Dictionary = {
   'common.select': 'Select',
   'common.available_variants': 'Available variants',
   'common.loading': 'Loading...',
+  'common.show_more': 'Show more',
   'fills.title': 'Fills',
   'fills.instrument_not_found': 'Fills for this instrument not found',
   'fills.return_to_fills': 'Return to positions list',
+  'fills.shown_count': 'Shown {count, plural, one {# fill} other {# fills}} of {total}',
   'fills.position.fills_count': '{count, plural, =0 {no fills} one {# fill} other {# fills}}',
   'instrument.groups.share': 'Shares',
   'instrument.groups.bond': 'Bonds',

src/lib/translate/ru.ts

@@ -6,9 +6,12 @@ export const ruDict: Dictionary = {
   'common.select': 'Выбрать',
   'common.available_variants': 'Доступные варианты',
   'common.loading': 'Загрузка...',
+  'common.show_more': 'Показать ещё',
   'fills.title': 'Сделки',
   'fills.instrument_not_found': 'Не удалось найти сделки по инструменту',
   'fills.return_to_fills': 'Вернуться к списку позиций',
+  'fills.shown_count':
+    'Отображено {count, plural, one {# сделка} few {# сделки} other {# сделок}} из {total}',
   'fills.position.fills_count':
     '{count, plural, =0 {нет сделок} one {# сделка} few {# сделки} other {# сделок}}',
   'instrument.groups.share': 'Акции',

src/lib/translate/types.ts

@@ -3,9 +3,11 @@ export type Messages =
   | 'common.select'
   | 'common.available_variants'
   | 'common.loading'
+  | 'common.show_more'
   | 'fills.title'
   | 'fills.instrument_not_found'
   | 'fills.return_to_fills'
+  | 'fills.shown_count'
   | 'fills.position.fills_count'
   | 'instrument.groups.share'
   | 'instrument.groups.bond'

src/lib/utils/groupBy.ts

@@ -0,0 +1,9 @@
+/** Groups items by key */
+export function groupBy<T, K extends string | number>(array: T[], selector: (item: T) => K) {
+  return array.reduce((acc, item) => {
+    const key = selector(item);
+    if (!acc[key]) acc[key] = [];
+    acc[key].push(item);
+    return acc;
+  }, {} as Record<K, T[]>);
+}

src/routes/fills/[id].svelte

@@ -8,23 +8,29 @@
   import { routes } from '$lib/store/routes';
   import { translate } from '$lib/translate';
   import { printMoney } from '$lib/utils';
-  import { derived } from 'svelte/store';
+  import { groupBy } from '$lib/utils/groupBy';
+  import { derived, writable } from 'svelte/store';
 
   const ticker = $page.params['id'];
   title.set(ticker);
 
   const figi = derived(positions, (positions) => positions.find((p) => p.ticker == ticker)?.figi);
-
-  const fills = derived([fillsByFigi, figi], ([fills, figi]) => {
+  const executedFills = derived([fillsByFigi, figi], ([fills, figi]) => {
     if (!fills || !figi) return [];
-    return fills[figi].filter((x) => x.quantityExecuted > 0).reverse();
+    return fills[figi].filter((x) => x.quantityExecuted > 0);
   });
 
-  const groups = derived(fills, (fills) => {
-    return fills
-      .map(({ date }) => new Date(date).toLocaleDateString())
-      .filter((value, index, arr) => arr.findIndex((x) => x == value) === index);
-  });
+  const limit = writable(50);
+  const showMore = () => limit.update((prev) => prev + 50);
+  const hasMore = derived([executedFills, limit], ([fills, limit]) => fills.length > limit);
+
+  const fills = derived([executedFills, limit], ([fills, limit]) =>
+    fills.reverse().slice(0, limit),
+  );
+
+  const groups = derived(fills, (fills) =>
+    groupBy(fills, ({ date }) => new Date(date).toLocaleDateString()),
+  );
 </script>
 
 <div class="container">
@@ -40,15 +46,15 @@
   {:else}
     <table>
       <tbody>
-        {#each $groups as date}
+        {#each Object.keys($groups) as date}
           <tr class="table-group-title">
             <td>{date}</td>
           </tr>
-          {#each $fills.filter((x) => new Date(x.date).toLocaleDateString() == date) as fill, index}
+          {#each $groups[date] as fill, index}
             <tr
+              class="fill-row"
               class:first-row-in-group={index == 0}
-              class:last-row-in-group={index ==
-                $fills.filter((x) => new Date(x.date).toLocaleDateString() == date).length - 1}
+              class:last-row-in-group={index == $groups[date].length - 1}
             >
               <td>
                 <div class="secondary">
@@ -78,6 +84,23 @@
             </tr>
           {/each}
         {/each}
+        <tr>
+          <td colspan="3" class="shown-count">
+            <div style="margin-bottom: 5px;">
+              {$translate('fills.shown_count', {
+                values: {
+                  count: $fills.length,
+                  total: $executedFills.length,
+                },
+              })}
+            </div>
+            {#if $hasMore}
+              <div class="show-more" on:click={showMore}>
+                {$translate('common.show_more')}
+              </div>
+            {/if}
+          </td>
+        </tr>
       </tbody>
     </table>
   {/if}
@@ -92,7 +115,7 @@
     width: 100%;
     border-collapse: collapse;
   }
-  tr:not(.table-group-title) {
+  tr.fill-row {
     background-color: var(--header-background-color);
   }
   .table-group-title {
@@ -114,7 +137,7 @@
   .last-row-in-group td:last-child {
     border-bottom-right-radius: 10px;
   }
-  tr:not(.table-group-title):not(.last-row-in-group) {
+  tr.fill-row:not(.last-row-in-group) {
     border-bottom: 1px solid var(--border-color);
   }
   td {
@@ -134,6 +157,21 @@
   .loss {
     color: var(--red-color);
   }
+  .shown-count {
+    text-align: center;
+    color: var(--secondary-text-color);
+  }
+  .show-more {
+    text-align: center;
+    color: var(--active-color);
+    cursor: pointer;
+  }
+  .show-more:hover {
+    opacity: 0.9;
+  }
+  .show-more:active {
+    opacity: 0.75;
+  }
   .center {
     padding: 20px;
     display: flex;

src/routes/fills/index.svelte

@@ -44,7 +44,9 @@
                     <PositionTitle {position} />
                     <div class="subtitle" style="margin-top: 2px;">
                       {$translate('fills.position.fills_count', {
-                        values: { count: $fills[position.figi].length },
+                        values: {
+                          count: $fills[position.figi].filter((x) => x.quantityExecuted > 0).length,
+                        },
                       })}
                     </div>
                   </div>