Merge pull request #675 from threefoldtech/development_playground_con…

…tractList playground contract list: Minor improvements
threefoldtech · Jun 26, 2023 · 3a69840 · 3a69840
2 parents 8e4eaab + 8a940d3
commit 3a69840
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/packages/playground/src/types/index.ts b/packages/playground/src/types/index.ts
@@ -83,6 +83,27 @@ export enum SolutionCode {
   wordpress = "wp",
 }
 
+export const solutionType: { [key: string]: string } = {
+  algorand: "Algorand",
+  caprover: "CapRover",
+  casperlabs: "Casperlabs",
+  discourse: "Discourse",
+  fullvm: "Full Virtual Machine",
+  funkwhale: "Funkwhale",
+  gatewayname: "Gateway Name",
+  kubernetes: "Kubernetes",
+  mattermost: "Mattermost",
+  nodepilot: "Node Pilot",
+  owncloud: "Owncloud",
+  peertube: "Peertube",
+  presearch: "Presearch",
+  subsquid: "Subsquid",
+  taiga: "Taiga",
+  umbrel: "Umbrel",
+  vm: "Micro Virtual Machine",
+  wordpress: "Wordpress",
+};
+
 export interface solutionFlavor {
   cpu: number;
   memory: number;

diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -35,15 +35,20 @@
               v-bind="props"
               :color="getStateColor(item.value.state)"
             >
-              {{ item.value.state }}
+              {{ item.value.state === ContractStates.GracePeriod ? "Grace Period" : item.value.state }}
             </v-chip>
           </template>
         </v-tooltip>
         <v-chip v-else :color="getStateColor(item.value.state)">
           {{ item.value.state }}
         </v-chip>
       </template>
-
+      <template #[`item.type`]="{ item }">
+        {{ capitalize(item.value.type) }}
+      </template>
+      <template #[`item.solutionType`]="{ item }">
+        {{ solutionType[item.value.solutionType] ?? item.value.solutionType }}
+      </template>
       <template #[`item.actions`]="{ item }">
         <v-tooltip text="Show Details">
           <template #activator="{ props }">
@@ -143,7 +148,7 @@ const headers: VDataTableHeader = [
   { title: "Solution Name", key: "solutionName" },
   { title: "Created At", key: "createdAt" },
   { title: "Expiration", key: "expiration" },
-  { title: "Actions", key: "actions", sortable: false },
+  { title: "Details", key: "actions", sortable: false },
 ];
 
 async function onMount() {
@@ -191,6 +196,9 @@ function getStateColor(state: ContractStates): string {
       return "info";
   }
 }
+function capitalize(s: string): string {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
 
 async function contractLockDetails(contractId: number) {
   contractStateDialog.value = true;
@@ -242,6 +250,7 @@ async function onDelete() {
 import type { ContractLock } from "@threefold/tfchain_client";
 
 import ListTable from "../components/list_table.vue";
+import { solutionType } from "../types/index";
 import { normalizeError } from "../utils/helpers";
 
 export default {