Client: Added material column in spool table

client/public/locales/en/common.json

@@ -53,6 +53,7 @@
       "id": "Id",
       "filament_name": "Filament",
       "filament": "Filament",
+      "material": "Material",
       "used_weight": "Used Weight",
       "remaining_weight": "Remaining Weight",
       "used_length": "Used Length",

client/public/locales/sv/common.json

@@ -53,6 +53,7 @@
       "id": "Id",
       "filament_name": "Filament",
       "filament": "Filament",
+      "material": "Material",
       "used_weight": "Använd vikt",
       "remaining_weight": "Återstående vikt",
       "used_length": "Använd längd",

client/src/pages/spools/list.tsx

@@ -35,6 +35,7 @@ dayjs.extend(utc);
 
 interface ISpoolCollapsed extends ISpool {
   filament_name: string;
+  material?: string;
 }
 
 export const SpoolList: React.FC<IResourceComponentsProps> = () => {
@@ -75,6 +76,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   const allColumns: (keyof ISpoolCollapsed & string)[] = [
     "id",
     "filament_name",
+    "material",
     "used_weight",
     "remaining_weight",
     "used_length",
@@ -120,7 +122,11 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           filament_name =
             element.filament.name ?? element.filament.id.toString();
         }
-        return { ...element, filament_name };
+        return {
+          ...element,
+          filament_name,
+          material: element.filament.material,
+        };
       }),
     [tableProps.dataSource]
   );
@@ -200,6 +206,12 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataSource,
           tableState,
         })}
+        {FilteredColumn({
+          id: "material",
+          i18ncat: "spool",
+          dataSource,
+          tableState,
+        })}
         {NumberColumn({
           id: "used_weight",
           i18ncat: "spool",