feat: wc: table: add sort by weight

packages/wc/src/wc/div-table/div-table.ts

@@ -218,6 +218,11 @@ export class DivTableElement extends BaseElement {
 				</th>
 				<th>
 					<span class="column-name"> Weight </span>
+					<wc-order-triangle
+						?active=${this.column === 'weight'}
+						order=${this.column === 'weight' ? this.order : 'unordered'}
+						@click=${() => this.#onOrderTriangleClicked('weight')}
+					></wc-order-triangle>
 				</th>
 			</tr>
 		</thead>`;

packages/wc/src/wc/div-table/toOrderedBy.ts

@@ -33,6 +33,14 @@ export const byName = (order: Order, cards: readonly DivinationCardRecord[]) =>
 	});
 };
 
+export const byWeight = (order: Order, cards: readonly DivinationCardRecord[]) => {
+	return Array.from(cards).sort((a, b) => {
+		if (order === 'asc') return (a.weight ?? 0) - (b.weight ?? 0);
+		if (order === 'desc') return (b.weight ?? 0) - (a.weight ?? 0);
+		throw new Error('invalid order');
+	});
+};
+
 export const toOrderedBy = (
 	cards: readonly DivinationCardRecord[],
 	column: Column,
@@ -48,6 +56,8 @@ export const toOrderedBy = (
 			return byAmount(order, cards);
 		case 'sum':
 			return bySum(order, cards);
+		case 'weight':
+			return byWeight(order, cards);
 		default:
 			throw new Error('Invalid column name');
 	}

packages/wc/src/wc/div-table/types.ts

@@ -1,6 +1,6 @@
 import { Order } from '@divicards/shared/types';
 
-export type Column = 'price' | 'amount' | 'sum' | 'name';
+export type Column = 'price' | 'amount' | 'sum' | 'name' | 'weight';
 export type SortState = {
 	[col in Column]: Order;
 };

packages/wc/tsconfig.node.json

@@ -1,9 +1,9 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
+	"compilerOptions": {
+		"composite": true,
+		"module": "ESNext",
+		"moduleResolution": "Node",
+		"allowSyntheticDefaultImports": true
+	},
+	"include": ["vite.config.ts"]
 }

packages/wc/vite.config.ts

@@ -0,0 +1 @@
+export default {};