Improvements for template tables (#12155)

* Enable in-column filtering for model type

* Enable sorting by label size

* Enable backend ordering

* Improve filtering for report template table

* Update API version

src/frontend/lib/types/Tables.tsx

@@ -70,6 +70,11 @@ export type TableState = {
   idAccessor?: string;
 };
 
+export type TableColumnFilterType =
+  | string
+  | string[]
+  | (({ close }: { close: () => void }) => ReactNode);
+
 /**
  * Table column properties
  *
@@ -109,10 +114,7 @@ export type TableColumnProps<T = any> = {
   editable?: boolean;
   definition?: ApiFormFieldType;
   render?: (record: T, index?: number) => any;
-  filter?:
-    | string
-    | string[]
-    | (({ close }: { close: () => void }) => ReactNode);
+  filter?: TableColumnFilterType;
   filtering?: boolean;
   width?: number;
   minWidth?: string | number;

src/frontend/src/pages/Index/Settings/AdminCenter/LabelTemplatePanel.tsx

@@ -10,8 +10,12 @@ function LabelTemplateTable() {
         templateEndpoint: ApiEndpoints.label_list,
         printingEndpoint: ApiEndpoints.label_print,
         additionalFormFields: {
-          width: {},
-          height: {}
+          width: {
+            sortable: true
+          },
+          height: {
+            sortable: true
+          }
         }
       }}
     />

src/frontend/src/pages/Index/Settings/AdminCenter/ReportTemplatePanel.tsx

@@ -17,24 +17,44 @@ function ReportTemplateTable() {
         modelType: ModelType.reporttemplate,
         templateEndpoint: ApiEndpoints.report_list,
         printingEndpoint: ApiEndpoints.report_print,
+        additionalFilters: [
+          {
+            name: 'landscape',
+            label: t`Landscape`,
+            type: 'boolean'
+          },
+          {
+            name: 'merge',
+            label: t`Merge`,
+            type: 'boolean'
+          },
+          {
+            name: 'attach_to_model',
+            label: t`Attach to Model`,
+            type: 'boolean'
+          }
+        ],
         additionalFormFields: {
           page_size: {
             label: t`Page Size`
           },
           landscape: {
             label: t`Landscape`,
+            filter: 'landscape',
             modelRenderer: (instance: any) => (
               <YesNoButton value={instance.landscape} />
             )
           },
           merge: {
             label: t`Merge`,
+            filter: 'merge',
             modelRenderer: (instance: any) => (
               <YesNoButton value={instance.merge} />
             )
           },
           attach_to_model: {
             label: t`Attach to Model`,
+            filter: 'attach_to_model',
             modelRenderer: (instance: any) => (
               <YesNoButton value={instance.attach_to_model} />
             )

src/frontend/src/tables/settings/TemplateTable.tsx

@@ -18,8 +18,8 @@ import { apiUrl } from '@lib/functions/Api';
 import { identifierString } from '@lib/functions/Conversion';
 import useTable from '@lib/hooks/UseTable';
 import type { TableFilter } from '@lib/types/Filters';
-import type { ApiFormFieldSet } from '@lib/types/Forms';
-import type { TableColumn } from '@lib/types/Tables';
+import type { ApiFormFieldSet, ApiFormFieldType } from '@lib/types/Forms';
+import type { TableColumn, TableColumnFilterType } from '@lib/types/Tables';
 import {
   CodeEditor,
   PdfPreview,
@@ -68,11 +68,21 @@ export type TemplateI = {
   template: string;
 };
 
+// Additional field props to control the column behaviour in the template table
+interface TemplateFormFieldType extends ApiFormFieldType {
+  sortable?: boolean;
+  switchable?: boolean;
+  filter?: TableColumnFilterType;
+}
+
+type TemplateFormFieldSet = Record<string, TemplateFormFieldType>;
+
 export interface TemplateProps {
   modelType: ModelType.labeltemplate | ModelType.reporttemplate;
   templateEndpoint: ApiEndpoints;
   printingEndpoint: ApiEndpoints;
-  additionalFormFields?: ApiFormFieldSet;
+  additionalFilters?: TableFilter[];
+  additionalFormFields?: TemplateFormFieldSet;
 }
 
 export function TemplateDrawer({
@@ -233,6 +243,7 @@ export function TemplateTable({
       },
       {
         accessor: 'model_type',
+        filter: 'model_type',
         sortable: true,
         switchable: false
       },
@@ -276,10 +287,10 @@ export function TemplateTable({
       },
       ...Object.entries(additionalFormFields || {}).map(([key, field]) => ({
         accessor: key,
-        ...field,
-        title: field.label,
         sortable: false,
         switchable: true,
+        title: field.label,
+        ...field,
         render: field.modelRenderer
       })),
       BooleanColumn({ accessor: 'enabled', title: t`Enabled` })
@@ -391,6 +402,7 @@ export function TemplateTable({
 
   const tableFilters: TableFilter[] = useMemo(() => {
     return [
+      ...(templateProps.additionalFilters || []),
       {
         name: 'enabled',
         label: t`Enabled`,
@@ -404,7 +416,7 @@ export function TemplateTable({
         choices: modelTypeFilters.choices
       }
     ];
-  }, [modelTypeFilters.choices]);
+  }, [templateProps.additionalFilters, modelTypeFilters.choices]);
 
   return (
     <>