From cff4bd23ef906635dd939568800d6ee699f12ec7 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 13 Aug 2024 20:53:37 +0200
Subject: [PATCH] update holdings page of etfs

---
 .../etf/[tickerID]/holdings/+page.svelte      | 77 ++++++++++---------
 .../stocks/[tickerID]/dividends/+page.svelte  |  2 +-
 2 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/src/routes/etf/[tickerID]/holdings/+page.svelte b/src/routes/etf/[tickerID]/holdings/+page.svelte
index b2a3b273..ddd3a57d 100644
--- a/src/routes/etf/[tickerID]/holdings/+page.svelte
+++ b/src/routes/etf/[tickerID]/holdings/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { etfTicker, cryptoTicker, numberOfUnreadNotification, displayCompanyName} from '$lib/store';
-  import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
 
   import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
   import { goto } from '$app/navigation';
@@ -11,9 +10,27 @@
   export let data;
   let notDestroyed = true;
   let rawData = data?.getETFHoldings;
-  let holdings = rawData?.slice(0,15);
+  let holdings = rawData?.slice(0,50);
 
+  let category = 'weights';
+  let order = 'highToLow';
+  function changeOrder(newCategory: string) {
+    if (newCategory === category) {
+      order = order === 'highToLow' ? 'lowToHigh' : 'highToLow';
+    } else {
+      category = newCategory;
+      order = 'highToLow';
+    }
+    holdings = sortElements(category, rawData)?.slice(0,50);
+  }
 
+  const sortElements = (category, tickerList) => {
+    return tickerList?.sort((a, b) => {
+      const aValue = category === 'weights' ? a?.weightPercentage : a?.sharesNumber;
+      const bValue = category === 'weights' ? b?.weightPercentage : b?.sharesNumber;
+      return order === 'highToLow' ? bValue - aValue : aValue - bValue;
+    });
+  }
 
 function stockSelector(symbol)
 {
@@ -36,7 +53,7 @@ async function infiniteHandler({ detail: { loaded, complete } })
     } 
     else if (notDestroyed) {
       const nextIndex = holdings?.length;
-      const newHoldings = rawData?.slice(nextIndex, nextIndex + 25);
+      const newHoldings = rawData?.slice(nextIndex, nextIndex + 50);
       holdings = [...holdings, ...newHoldings];
       loaded();
     }
@@ -51,6 +68,8 @@ $: {
 
 let charNumber = 40;
 
+
+
 $: {
   if($screenWidth < 640)
   {
@@ -119,56 +138,47 @@ $: {
       
                     {#if holdings?.length !== 0}
 
-                    <div class="flex justify-start items-center m-auto overflow-x-auto">
+                    <div class="w-full overflow-x-auto">
                                   
                                   
                       <table class="table table-pin-cols table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 overflow-x-auto">
                           <thead>
                             <tr class="">
-                              <td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-sm">No.</td>
-                              <td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-sm">Symbol</td>
-                              <td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-sm hidden sm:table-cell">Name</td>
-                              <td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-end text-sm ">Shares</td>
-                              <td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-end text-sm">% Weight</td>
+                              <td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-sm sm:text-[1rem] whitespace-nowrap">Symbol</td>
+                              <td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-sm sm:text-[1rem] whitespace-nowrap ">Name</td>
+                              <td on:click={() => changeOrder('shares')} class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-end text-sm sm:text-[1rem] whitespace-nowrap cursor-pointer">
+                                Shares
+                                <svg class="w-5 h-5 inline-block {order === 'highToLow' && category === 'shares' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                              </td>
+                              <td on:click={() => changeOrder('weights')} class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-end text-sm sm:text-[1rem] whitespace-nowrap cursor-pointer">
+                                % Weight
+                                <svg class="w-5 h-5 inline-block {order === 'highToLow' && category === 'weights' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                              </td>
                             </tr>
                           </thead>
                           <tbody>
-                            {#each (data?.user?.tier === 'Pro' ? holdings : holdings?.slice(0,3)) as item,index}
+                            {#each holdings as item}
                         <!-- row -->
                         {#if item?.asset !== null}
-                        <tr on:click={() => stockSelector(item?.asset)} class="w-full sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === holdings?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} {item?.asset?.length !== 0 ? 'cursor-pointer' : ''}">
+                        <tr on:click={() => stockSelector(item?.asset)} class="w-full sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {item?.asset?.length !== 0 ? 'cursor-pointer' : ''}">
                           
-                          <td class="text-gray-200 border-b border-[#09090B]">
-                            {index+1}
-                          </td>
-
-                          <td class="font-normal  border-b border-[#09090B]">
-                            <div class="flex flex-col items-start">
-                              <span class="text-blue-400">{item?.asset}</span>
-                              <span class="sm:hidden text-white">
-                                {item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}
-                              </span>
-                            </div>
+                          <td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B]">
+                            {item?.asset?.length !== 0 ? item?.asset : '-'}
                           </td>
                           
-                          <td class="text-gray-200 border-b border-[#09090B] w-fit hidden sm:table-cell">
+                          <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B]">
                             {item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}
                           </td>
             
           
               
-                        <td class="text-gray-200 border-b border-[#09090B] text-end ">
-                          <span class="text-white font-medium text-md ">
-                                  {new Intl.NumberFormat("en", {
-                                      minimumFractionDigits: 0,
-                                      maximumFractionDigits: 0
-                                  }).format(item?.sharesNumber)}
-                          </span>
+                        <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end">
+                          {abbreviateNumber(item?.sharesNumber)}
                         </td>
           
             
-                        <td class="text-gray-200 border-b border-[#09090B] text-end">
-                                  <span class="text-white font-medium text-md ">{item?.weightPercentage?.toFixed(2)}%</span>
+                        <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end">
+                             {item?.weightPercentage >= 0.01 ? item?.weightPercentage?.toFixed(2) : '< 0.01'}%
                         </td>
             
                     
@@ -186,11 +196,8 @@ $: {
 
                   </div>
 
-                  {#if data?.user?.tier === 'Pro'}
                   <InfiniteLoading on:infinite={infiniteHandler} />
-                {/if}
                 
-               <UpgradeToPro data={data} title="Explore all US ETF holdings for diverse investment strategies and informed decision-making."/>
 
         
         
diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte
index 5dcd604f..c035d52b 100644
--- a/src/routes/stocks/[tickerID]/dividends/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte
@@ -249,7 +249,7 @@ onMount(async() => {
                     </div>
 
 
-                    </div>
+                      </div>