add table icons

cartridge-gg · Apr 2, 2024 · cac50f3 · cac50f3
1 parent 9273e15
commit cac50f3
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/web/src/components/pages/admin/DrugTable.tsx b/web/src/components/pages/admin/DrugTable.tsx
@@ -8,6 +8,7 @@ import { shortString } from "starknet";
 import { editComponents } from "./tables";
 
 const columns = [
+  { key: "icon",  width: 80  },
   { key: "drug", title: "drug", dataType: DataType.String },
   { key: "drug_id", title: "drug_id", dataType: DataType.Number },
   { key: "name", title: "name", dataType: DataType.String },

diff --git a/web/src/components/pages/admin/HustlerItemBaseTable.tsx b/web/src/components/pages/admin/HustlerItemBaseTable.tsx
@@ -2,9 +2,11 @@ import { useDojoContext } from "@/dojo/hooks";
 import { observer } from "mobx-react-lite";
 
 import { Table } from "ka-table";
-import { DataType, EditingMode, SortingMode } from "ka-table/enums";
+import { DataType, EditingMode } from "ka-table/enums";
+import { editComponents } from "./tables";
 
 const columns = [
+  { key: "icon", width: 80 },
   { key: "slot", title: "slot", dataType: DataType.String },
   { key: "id", title: "id", dataType: DataType.Number },
   { key: "slot_id", title: "slot_id", dataType: DataType.Number },
@@ -24,7 +26,7 @@ export const HustlerItemBaseTable = observer(() => {
       data={config?.items || []}
       rowKeyField={"id"}
       editingMode={EditingMode.None}
-      sortingMode={SortingMode.Single}
+      childComponents={editComponents}
     />
   );
 });

diff --git a/web/src/components/pages/admin/tables.tsx b/web/src/components/pages/admin/tables.tsx
@@ -43,6 +43,9 @@ export const editComponents = {
           </ChildrenOrConnect>
         );
       }
+      if (props.column.key === "icon") {
+        return <>{props.rowData.icon && props.rowData.icon({ width: "36px", height: "36px" })}</>;
+      }
     },
   },
   cellEditor: {
@@ -54,6 +57,21 @@ export const editComponents = {
           </ChildrenOrConnect>
         );
       }
+      if (props.column.key === "icon") {
+        return <>{props.rowData.icon && props.rowData.icon({ width: "36px", height: "36px" })}</>;
+      }
+    },
+  },
+};
+
+
+export const iconComponents = {
+  cellText: {
+    content: (props: any) => {
+      if (props.column.key === "icon") {
+        return props.rowData.icon()
+       // return <>{props.rowData.icon && props.rowData.icon({ width: "36px", height: "36px" })}</>;
+      }
     },
   },
 };
diff --git a/web/src/dojo/stores/config.tsx b/web/src/dojo/stores/config.tsx
@@ -53,6 +53,10 @@ export type HustlerItemConfigFull = HustlerItemConfig & {
   upgradeName: string;
 };
 
+export type HustlerItemBaseConfigFull = HustlerItemBaseConfig & {
+  icon: React.FC;
+};
+
 export type HustlerConfig = {
   hustler_id: number;
   weapon: HustlerItemConfig;
@@ -75,7 +79,7 @@ export type Config = {
   ryoAddress: RyoAddress;
   drug: DrugConfigFull[];
   location: LocationConfigFull[];
-  items: HustlerItemBaseConfig[];
+  items: HustlerItemBaseConfigFull[];
   tiers: HustlerItemTiersConfig[];
   config: GetConfig;
 };
@@ -147,7 +151,8 @@ export class ConfigStoreClass {
       return {
         ...i.node,
         name: shortString.decodeShortString(i.node?.name),
-      } as HustlerItemBaseConfig;
+        icon: itemIcons[shortString.decodeShortString(i.node?.name) as itemsIconsKeys]
+      } as HustlerItemBaseConfigFull;
     });
 
     //