Merge pull request #3171 from threefoldtech/development_contracts_sort

Support sorting from GridProxy in Contracts List page
threefoldtech · Jul 29, 2024 · ac03039 · ac03039
2 parents e5f3c45 + a3be963
commit ac03039
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 30 deletions.
diff --git a/packages/gridproxy_client/src/builders/contracts.ts b/packages/gridproxy_client/src/builders/contracts.ts
@@ -1,5 +1,6 @@
 import { assertBoolean, assertId, assertIn, assertNatural, assertString } from "../utils";
 import { AbstractBuilder, BuilderMapper, BuilderMethods, BuilderValidator } from "./abstract_builder";
+import { SortOrder } from "./nodes";
 
 export enum ContractType {
   Node = "node",
@@ -13,6 +14,14 @@ export enum ContractState {
   Deleted = "Deleted",
 }
 
+export enum SortByContracts {
+  CreatedAt = "created_at",
+  TwinId = "twin_id",
+  ContractId = "contract_id",
+  Type = "type",
+  State = "state",
+}
+
 export interface ContractsQuery {
   page: number;
   size: number;
@@ -26,6 +35,8 @@ export interface ContractsQuery {
   deploymentData: string;
   deploymentHash: string;
   numberOfPublicIps: number;
+  sortBy: SortByContracts;
+  sortOrder: SortOrder;
 }
 
 const CONTRACTS_MAPPER: BuilderMapper<ContractsQuery> = {
@@ -41,6 +52,8 @@ const CONTRACTS_MAPPER: BuilderMapper<ContractsQuery> = {
   deploymentData: "deployment_data",
   deploymentHash: "deployment_hash",
   numberOfPublicIps: "number_of_public_ips",
+  sortBy: "sort_by",
+  sortOrder: "sort_order",
 };
 
 const CONTRACTS_VALIDATOR: BuilderValidator<ContractsQuery> = {
@@ -67,6 +80,14 @@ const CONTRACTS_VALIDATOR: BuilderValidator<ContractsQuery> = {
   deploymentData: assertString,
   deploymentHash: assertString,
   numberOfPublicIps: assertNatural,
+  sortBy(value) {
+    assertString(value);
+    assertIn(value, Object.values(SortByContracts));
+  },
+  sortOrder(value) {
+    assertString(value);
+    assertIn(value, Object.values(SortOrder));
+  },
 };
 
 export class ContractsBuilder extends AbstractBuilder<ContractsQuery> {

diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -203,7 +203,7 @@
 
 <script lang="ts" setup>
 import type { GridClient, LockContracts } from "@threefold/grid_client";
-import { type Contract, ContractState, NodeStatus } from "@threefold/gridproxy_client";
+import { type Contract, ContractState, NodeStatus, SortByContracts, SortOrder } from "@threefold/gridproxy_client";
 import { Decimal } from "decimal.js";
 import { computed, defineComponent, onMounted, type Ref, ref } from "vue";
 
@@ -298,15 +298,12 @@ async function loadContractsByType(
       page: table.page.value,
       type: contractType,
       retCount: true,
+      sortBy: options && options.sort.length ? (options?.sort[0].key as SortByContracts) : undefined,
+      sortOrder: options && options.sort.length ? (options?.sort[0].order as SortOrder) : undefined,
     });
 
     table.count.value = response.count ?? 0;
     const normalizedContracts = await _normalizeContracts(response.data, contractType);
-
-    if (options && options.sort.length) {
-      contractsRef.value = sortContracts(normalizedContracts, options.sort);
-    }
-
     contractsRef.value = normalizedContracts;
   } catch (error: any) {
     loadingErrorMessage.value = `Error while listing ${contractType} contracts: ${error.message}`;
@@ -316,21 +313,6 @@ async function loadContractsByType(
   }
 }
 
-function sortContracts(
-  contracts: NormalizedContract[],
-  sort: { key: string; order: "asc" | "desc" }[],
-): NormalizedContract[] {
-  const sortKey = sort[0].key;
-  const sortOrder = sort[0].order;
-
-  contracts = contracts.sort((a, b) => {
-    const aValue = Reflect.get(a, sortKey) ?? Reflect.get(a.details, sortKey);
-    const bValue = Reflect.get(b, sortKey) ?? Reflect.get(b.details, sortKey);
-    return sortOrder === "desc" ? bValue - aValue : aValue - bValue;
-  });
-  return contracts;
-}
-
 async function loadContracts(type?: ContractType, options?: { sort: { key: string; order: "asc" | "desc" }[] }) {
   totalCost.value = undefined;
   totalCostUSD.value = undefined;
@@ -463,10 +445,10 @@ async function getContractsLockDetails() {
 // Define base table headers for contracts tables
 const baseTableHeaders: VDataTableHeader = [
   { title: "PLACEHOLDER", key: "data-table-select" },
-  { title: "ID", key: "contract_id" },
+  { title: "ID", key: "contract_id", sortable: true },
   { title: "State", key: "state", sortable: false },
-  { title: "Billing Rate", key: "consumption" },
-  { title: "Created At", key: "created_at" },
+  { title: "Billing Rate", key: "consumption", sortable: false },
+  { title: "Created At", key: "created_at", sortable: true },
 ];
 
 // Define specific table headers for each contract type
@@ -482,14 +464,14 @@ const nodeTableHeaders: VDataTableHeader = [
     ],
   },
   { title: "Type", key: "deploymentType", sortable: false },
-  { title: "Expiration", key: "expiration" },
-  { title: "Farm ID", key: "farm_id" },
+  { title: "Expiration", key: "expiration", sortable: false },
+  { title: "Farm ID", key: "farm_id", sortable: false },
   {
     title: "Node",
     key: "node",
     sortable: false,
     children: [
-      { title: "ID", key: "nodeId" },
+      { title: "ID", key: "nodeId", sortable: false },
       { title: "Status", key: "nodeStatus", sortable: false },
     ],
   },
@@ -499,19 +481,19 @@ const nodeTableHeaders: VDataTableHeader = [
 const nameTableHeaders: VDataTableHeader = [
   ...baseTableHeaders,
   { title: "Solution Name", key: "solutionName", sortable: false },
-  { title: "Expiration", key: "expiration" },
+  { title: "Expiration", key: "expiration", sortable: false },
   { title: "Details", key: "actions", sortable: false },
 ];
 
 const RentTableHeaders: VDataTableHeader = [
   ...baseTableHeaders,
-  { title: "Farm ID", key: "farm_id" },
+  { title: "Farm ID", key: "farm_id", sortable: false },
   {
     title: "Node",
     key: "node",
     sortable: false,
     children: [
-      { title: "ID", key: "nodeId" },
+      { title: "ID", key: "nodeId", sortable: false },
       { title: "Status", key: "nodeStatus", sortable: false },
     ],
   },