Fixes

fantasycalendar · Apr 11, 2023 · ceac545 · ceac545
1 parent 8a6e4b1
commit ceac545
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 165 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,5 +1,9 @@
 # Item Piles Changelog
 
+## Version 2.6.4
+
+- Fixes to merchants not scrolling properly when the item list is long enough, unfortunately lost some initial opening speed with lots of items
+
 ## Version 2.6.3
 
 - Minor fix to the quantity for price attribute setting

diff --git a/src/applications/merchant-app/MerchantItemEntry.svelte b/src/applications/merchant-app/MerchantItemEntry.svelte
@@ -1,11 +1,9 @@
 <script>
   import { fade } from 'svelte/transition';
 
-  export let data;
-
-  let item = data.item;
-  let index = data.index;
-  let columns = data.columns;
+  export let item;
+  export let index;
+  export let columns;
 
   const itemName = item.name;
   const itemImage = item.img;
@@ -32,7 +30,8 @@
 		 class:item-piles-child-even-color={index%2===0}
 		 class:item-piles-child-odd-color={index%2===1}
 		 class:merchant-item-hidden={itemFlagData.hidden}
-		 style="flex: 1 0 auto;">
+		 style="flex: 1 0 auto;"
+		 transition:fade|local={{duration: 250}}>
 
 	{#each columns as column}
 		{#if column?.data}
@@ -47,6 +46,15 @@
 
 <style lang="scss">
 
+
+  .item-piles-item-row:global(.item-piles-child-even-color > *) {
+    background-color: var(--item-piles-even-color);
+  }
+
+  .item-piles-item-row:global(.item-piles-child-odd-color > *) {
+    background-color: var(--item-piles-odd-color);
+  }
+
   .item-piles-item-row {
     margin: 0;
     overflow: visible;

diff --git a/src/applications/merchant-app/MerchantItemListHeader.svelte b/src/applications/merchant-app/MerchantItemListHeader.svelte
diff --git a/src/applications/merchant-app/MerchantItemTab.svelte b/src/applications/merchant-app/MerchantItemTab.svelte
@@ -3,9 +3,7 @@
   import { localize } from "@typhonjs-fvtt/runtime/svelte/helper";
   import MerchantItemEntry from "./MerchantItemEntry.svelte";
   import CategoryHeader from "./CategoryHeader.svelte";
-  import { get, writable } from "svelte/store";
-  import { VirtualScroll } from "svelte-virtual-scroll-list";
-  import MerchantItemListHeader from "./MerchantItemListHeader.svelte";
+  import { get } from "svelte/store";
 
   export let store;
   export let noItemsLabel = "ITEM-PILES.Merchant.NoItemsForSale";
@@ -28,8 +26,8 @@
 
   $: categoryDropDown = $itemCategoriesStore.filter(category => category.service === services);
   $: categories = $categoryStore.filter(category => category.service === services);
-  $: items = $itemsStore.filter(item => Boolean(get(item.itemFlagData)?.isService) === services)
-  $: visibleItems = $visibleItemsStore.filter(item => Boolean(get(item.itemFlagData)?.isService) === services)
+	$: items = $itemsStore.filter(item => Boolean(get(item.itemFlagData)?.isService) === services)
+	$: visibleItems = $visibleItemsStore.filter(item => Boolean(get(item.itemFlagData)?.isService) === services)
 
   let columns = [];
   $: {
@@ -42,61 +40,7 @@
     ]
   }
 
-  let itemListStore = writable([])
-  let header = false;
-  $: {
-    $sortTypeStore;
-    $editPrices;
-    itemListStore.update(itemList => {
-      itemList = [];
-      header = false;
-      if ($sortTypeStore === 0 || $editPrices) {
-        let first = true;
-        for (const category of categories) {
-          itemList.push({
-            id: category.type,
-            component: MerchantItemListHeader,
-            category,
-            columns,
-            store,
-            first
-          })
-          first = false;
-          $itemsPerCategoryStore[category.type].items.forEach((item, index) => {
-            itemList.push({
-              id: item.id,
-              component: MerchantItemEntry,
-              item,
-              index,
-              columns: $itemColumns
-            })
-          });
-        }
-      } else {
-        header = {
-          id: randomID(),
-          component: MerchantItemListHeader,
-          category: false,
-          columns,
-          store,
-          first: true,
-        }
-        items.forEach((item, index) => {
-          itemList.push({
-            id: item.id,
-            component: MerchantItemEntry,
-            item,
-            index,
-            columns: $itemColumns
-          })
-        });
-      }
-      return itemList;
-    })
-  }
-
 </script>
-
 <div class="item-piles-flexrow">
 	<input bind:value={$searchStore} placeholder="Type to search..." type="text">
 	{#if categoryDropDown.length > 1}
@@ -114,20 +58,67 @@
 	</select>
 </div>
 
-<div class="item-piles-items-list" style="--grid-template-columns: auto repeat({columns.length-1}, max-content);">
-
-	<VirtualScroll
-		data={$itemListStore}
-		key="id"
-		let:data
-	>
-		<div slot="header" class="item-piles-list-header">
-			{#if header}
-				<svelte:component data={header} this={header.component}/>
-			{/if}
+<div class="item-piles-items-list" style="grid-template-columns: auto repeat({columns.length-1}, max-content);">
+
+	{#if $sortTypeStore === 0 || $editPrices}
+
+		{#each categories as category, index (category.type)}
+
+			<div class="item-piles-item-list-header">
+				{#each columns as column, columnIndex}
+					{#if columnIndex === 0}
+						<CategoryHeader {store} {category}/>
+					{:else if column.label && columnIndex > 0 && index === 0 && !$editPrices}
+						<div class="item-piles-small-text">
+							<a on:click={() => {
+              $inverseSortStore = $sortTypeStore === columnIndex+1 ? !$inverseSortStore : false;
+              $sortTypeStore = columnIndex+1;
+						}}>
+								{column.label}
+								<i class="fas"
+									 class:fa-chevron-down={!$inverseSortStore && $sortTypeStore === columnIndex+1}
+									 class:fa-chevron-up={$inverseSortStore && $sortTypeStore === columnIndex+1}
+								></i>
+							</a>
+						</div>
+					{:else if !$editPrices}
+						<div></div>
+					{/if}
+				{/each}
+			</div>
+			{#each $itemsPerCategoryStore[category.type].items as item, itemIndex (item.id)}
+				<MerchantItemEntry {item} index={itemIndex} columns={$itemColumns}/>
+			{/each}
+
+		{/each}
+
+	{:else}
+
+		<div class="item-piles-item-list-header">
+			{#each columns as column, columnIndex}
+				{#if column.label}
+					<div class="item-piles-small-text" class:item-piles-merchant-first-label={!columnIndex}>
+						<a on:click={() => {
+              $inverseSortStore = $sortTypeStore === columnIndex + 1 ? !$inverseSortStore : false;
+              $sortTypeStore = columnIndex + 1;
+						}}>
+							{column.label}
+							<i class="fas"
+								 class:fa-chevron-down={!$inverseSortStore && $sortTypeStore === columnIndex+1}
+								 class:fa-chevron-up={$inverseSortStore && $sortTypeStore === columnIndex+1}
+							></i>
+						</a>
+					</div>
+				{:else}
+					<div></div>
+				{/if}
+			{/each}
 		</div>
-		<svelte:component {data} this={data.component}/>
-	</VirtualScroll>
+		{#each items as item, itemIndex (item.id)}
+			<MerchantItemEntry {item} index={itemIndex} columns={$itemColumns}/>
+		{/each}
+
+	{/if}
 
 </div>
 
@@ -151,38 +142,26 @@
 
   .item-piles-items-list {
     overflow-y: scroll;
-    padding-right: 10px;
+    padding-right: 5px;
     display: grid;
     align-items: center;
     max-height: calc(100% - 31px);
-    margin-top: 5px;
-  }
-
-  :global(.item-piles-items-list > div) {
-    display: grid !important;
-    grid-template-columns: var(--grid-template-columns);
-  }
-
-  :global(.item-piles-items-list > div > div) {
-    display: contents;
+		margin-top: 5px;
   }
 
-  .item-piles-items-list :global(.virtual-scroll-item), .item-piles-list-header {
+  .item-piles-item-list-header {
     display: contents;
-  }
-
-  :global(.virtual-scroll-item) {
-    padding: 2px;
-    margin-right: 5px;
-    border-radius: 4px;
-  }
-
-  :global(.item-piles-items-list .virtual-scroll-item:nth-child(even) .item-piles-flexrow > div) {
-    background-color: var(--item-piles-even-color);
-  }
 
-  :global(.item-piles-items-list .virtual-scroll-item:nth-child(odd) .item-piles-flexrow > div) {
-    background-color: var(--item-piles-odd-color);
+    & > * {
+      height: 1.5rem;
+      margin-top: 10px;
+      margin-bottom: 5px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+      padding: 0 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
   .item-piles-merchant-first-label {

diff --git a/src/stores/merchant-store.js b/src/stores/merchant-store.js
@@ -361,7 +361,6 @@ class PileMerchantItem extends PileItem {
     });
     this.refreshDisplayQuantity();
     setup = true;
-    console.log("Setup " + this.item.name)
   }
 
   refreshDisplayQuantity() {

diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -431,6 +431,7 @@
       }
 
       span {
+        width: 100%;
         margin: 2px 5px 0 5px;
         flex: 1 0 auto;
       }
-Original file line number
+Diff line change
@@ Expand Up / @@ -431,6 +431,7 @@ @@
           }
           span {
+            width: 100%;
             margin: 2px 5px 0 5px;
             flex: 1 0 auto;
           }
@@ Expand Down @@