Add comparators for multilangual fields

src/management/common/MultilangualCell.tsx

@@ -0,0 +1,15 @@
+import { Multilingual } from "@/data";
+import React from "react";
+import { Chip } from "@material-ui/core";
+
+export type MultilingualCellProps = { value: Multilingual<React.ReactNode> }
+
+export const MultilingualCell = ({ value }: MultilingualCellProps) => {
+    return <>
+        { Object.keys(value).map(language => <div>
+            <Chip size="small" label={ language.toUpperCase() } style={ { marginRight: "0.5rem" } }/>
+            { value[language as keyof Multilingual<any>] }
+        </div>) }
+    </>
+}
+

src/management/common/helpers.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Column } from "material-table";
 import { Actions } from "@/components";
 import { Trans } from "react-i18next";
+import { Multilingual } from "@/data";
 
 export function actionsColumn<T extends Object>(render: (value: T) => React.ReactNode): Column<T> {
     return {
@@ -18,3 +19,17 @@ export function actionsColumn<T extends Object>(render: (value: T) => React.Reac
 export function createBoundComponent<T, TBoundProps extends keyof T>(Component: React.ComponentType<T>, bound: Pick<T, TBoundProps>) {
     return (props: Omit<T, TBoundProps>) => <Component { ...bound as any } { ...props } />;
 }
+
+export type Comparator<T> = (a: T, b: T) => number;
+export type MultilingualComparator<T> = Comparator<Multilingual<T>>;
+
+export function createMultilingualComparator<T>(comparator: Comparator<T>): MultilingualComparator<T> {
+    return (a, b) => comparator(a.pl, b.pl);
+}
+
+export const multilingualStringComparator = createMultilingualComparator<string>((a, b) => a && b ? a.localeCompare(b) : 0)
+export const multilingualNumberComparator = createMultilingualComparator<number>((a, b) => a - b)
+
+export function fieldComparator<T, K extends keyof T>(field: K, comparator: Comparator<T[K]>): Comparator<T> {
+    return (a, b) => comparator(a[field], b[field])
+}

src/management/page/list.tsx

@@ -20,8 +20,9 @@ import { Confirm } from "@/components/confirm";
 import useTheme from "@material-ui/core/styles/useTheme";
 import { BulkActions } from "@/management/common/BulkActions";
 import { MaterialTableTitle } from "@/management/common/MaterialTableTitle";
-import { actionsColumn } from "@/management/common/helpers";
+import { actionsColumn, fieldComparator, multilingualStringComparator } from "@/management/common/helpers";
 import { createDeleteAction } from "@/management/common/DeleteResourceAction";
+import { MultilingualCell } from "@/management/common/MultilangualCell";
 
 const label = (page: StaticPage) => page.title.pl;
 
@@ -93,8 +94,9 @@ export const StaticPageManagement = () => {
 
     const columns: Column<StaticPage>[] = [
         {
-            render: page => page.title.pl,
+            render: page => <MultilingualCell value={ page.title }/>,
             title: t("page.field.title"),
+            customSort: fieldComparator("title", multilingualStringComparator),
         },
         {
             field: "slug",

src/management/type/list.tsx

@@ -2,32 +2,24 @@ import { Page } from "@/pages/base";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAsyncState } from "@/hooks";
-import { InternshipType, Multilingual } from "@/data";
+import { InternshipType } from "@/data";
 import api from "@/management/api";
 import { Management } from "@/management/main";
-import { Button, Chip, Container, Tooltip, Typography } from "@material-ui/core";
+import { Button, Container, Tooltip, Typography } from "@material-ui/core";
 import { Async } from "@/components/async";
 import MaterialTable, { Column } from "material-table";
 import { MaterialTableTitle } from "@/management/common/MaterialTableTitle";
-import { actionsColumn } from "@/management/common/helpers";
+import { actionsColumn, fieldComparator, multilingualStringComparator } from "@/management/common/helpers";
 import { AccountCheck, Delete, Refresh, ShieldCheck } from "mdi-material-ui";
 import { OneOrMany } from "@/helpers";
 import { createDeleteAction } from "@/management/common/DeleteResourceAction";
 import { BulkActions } from "@/management/common/BulkActions";
 import { useSpacing } from "@/styles";
 import { Actions } from "@/components";
+import { MultilingualCell } from "@/management/common/MultilangualCell";
 
 const title = "type.index.title";
 
-const MultilingualCell = ({ value }: { value: Multilingual<React.ReactNode> }) => {
-    return <>
-        { Object.keys(value).map(language => <div>
-            <Chip size="small" label={ language.toUpperCase() } style={ { marginRight: "0.5rem" } }/>
-            { value[language as keyof Multilingual<any>] }
-        </div>) }
-    </>
-}
-
 const label = (type: InternshipType) => type?.label?.pl;
 
 export const InternshipTypeManagement = () => {
@@ -60,10 +52,12 @@ export const InternshipTypeManagement = () => {
         {
             title: t("type.field.label"),
             render: type => <MultilingualCell value={ type.label }/>,
+            customSort: fieldComparator("label", multilingualStringComparator),
         },
         {
             title: t("type.field.description"),
             render: type => type.description && <MultilingualCell value={ type.description }/>,
+            sorting: false,
         },
         {
             title: t("type.field.flags"),