Add click-to-sort column headers to all entity list table views

pkg/sqlite/performer.go

@@ -823,6 +823,7 @@ var performerSortOptions = sortOptions{
 	"play_count",
 	"random",
 	"rating",
+	"favorite",
 	"scenes_count",
 	"scenes_duration",
 	"scenes_size",
@@ -871,6 +872,9 @@ func (qb *PerformerStore) getPerformerSort(findFilter *models.FindFilterType) (s
 		sortQuery += qb.sortByLastOAt(direction)
 	case "latest_scene":
 		sortQuery += qb.sortByLatestScene(direction)
+	case "birthdate":
+		colName := getColumn(performerTable, "birthdate")
+		sortQuery += " ORDER BY " + colName + " IS NULL, " + colName + " " + getSortDirection(direction)
 	default:
 		sortQuery += getSort(sort, direction, "performers")
 	}

pkg/sqlite/studio.go

@@ -722,6 +722,7 @@ var studioSortOptions = sortOptions{
 	"images_count",
 	"latest_scene",
 	"name",
+	"favorite",
 	"o_counter",
 	"o_counter_all",
 	"performer_count",

pkg/sqlite/tag.go

@@ -791,6 +791,7 @@ func (qb *TagStore) Query(ctx context.Context, tagFilter *models.TagFilterType,
 
 var tagSortOptions = sortOptions{
 	"created_at",
+	"favorite",
 	"galleries_count",
 	"groups_count",
 	"id",

ui/v2.5/src/components/Galleries/GalleryList.tsx

@@ -14,6 +14,7 @@ import GalleryWallCard from "./GalleryWallCard";
 import { EditGalleriesDialog } from "./EditGalleriesDialog";
 import { DeleteGalleriesDialog } from "./DeleteGalleriesDialog";
 import { ExportDialog } from "../Shared/ExportDialog";
+import { getActiveSortColumn } from "src/utils/data";
 import { GenerateDialog } from "../Dialogs/GenerateDialog";
 import { GalleryListTable } from "./GalleryListTable";
 import { GalleryCardGrid } from "./GalleryCardGrid";
@@ -56,14 +57,23 @@ import { PerformerAgeCriterionOption } from "src/models/list-filter/galleries";
 import { SidebarFolderFilter } from "../List/Filters/FolderFilter";
 import { ParentFolderCriterionOption } from "src/models/list-filter/criteria/folder";
 
+const galleryColumnSortMap: Record<string, string> = {
+  images: "images_count",
+};
+
 const GalleryList: React.FC<{
   galleries: GQL.SlimGalleryDataFragment[];
   filter: ListFilterModel;
   selectedIds: Set<string>;
   onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
+  onSort?: (value: string) => void;
 }> = PatchComponent(
   "GalleryList",
-  ({ galleries, filter, selectedIds, onSelectChange }) => {
+  ({ galleries, filter, selectedIds, onSelectChange, onSort }) => {
+    const activeSortColumn = getActiveSortColumn(
+      galleryColumnSortMap,
+      filter.sortBy
+    );
     const { configuration } = useConfigurationContext();
     const showLightbox = useGalleriesLightbox();
 
@@ -101,6 +111,9 @@ const GalleryList: React.FC<{
           galleries={galleries}
           selectedIds={selectedIds}
           onSelectChange={onSelectChange}
+          onSort={onSort}
+          sortBy={activeSortColumn}
+          sortDirection={filter.sortDirection}
         />
       );
     }
@@ -299,6 +312,20 @@ export const FilteredGalleryList = PatchComponent(
 
     const { filter, setFilter } = filterState;
 
+    const onSort = useCallback(
+      (value: string) => {
+        const backendField = galleryColumnSortMap[value] ?? value;
+        if (filter.sortBy === backendField) {
+          setFilter(filter.toggleSortDirection());
+        } else {
+          const newFilter = filter.setSortBy(backendField);
+          newFilter.sortDirection = GQL.SortDirectionEnum.Asc;
+          setFilter(newFilter);
+        }
+      },
+      [filter, setFilter]
+    );
+
     const { effectiveFilter, result, cachedResult, items, totalCount } =
       queryResult;
 
@@ -523,6 +550,7 @@ export const FilteredGalleryList = PatchComponent(
                   galleries={items}
                   selectedIds={selectedIds}
                   onSelectChange={onSelectChange}
+                  onSort={onSort}
                 />
               </LoadedContent>
 

ui/v2.5/src/components/Galleries/GalleryListTable.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
+import { SortDirectionEnum } from "src/core/generated-graphql";
 import NavUtils from "src/utils/navigation";
 import { useIntl } from "react-intl";
 import { objectTitle } from "src/core/files";
@@ -14,6 +15,9 @@ interface IGalleryListTableProps {
   galleries: GQL.SlimGalleryDataFragment[];
   selectedIds: Set<string>;
   onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
+  onSort?: (value: string) => void;
+  sortBy?: string;
+  sortDirection?: SortDirectionEnum;
 }
 
 const TABLE_NAME = "galleries";
@@ -147,6 +151,7 @@ export const GalleryListTable: React.FC<IGalleryListTableProps> = (
     label: string;
     defaultShow?: boolean;
     mandatory?: boolean;
+    sortable?: boolean;
     render?: (
       gallery: GQL.SlimGalleryDataFragment,
       index: number
@@ -158,6 +163,7 @@ export const GalleryListTable: React.FC<IGalleryListTableProps> = (
       value: "cover_image",
       label: intl.formatMessage({ id: "cover_image" }),
       defaultShow: true,
+      sortable: false,
       render: CoverImageCell,
     },
     {
@@ -182,6 +188,7 @@ export const GalleryListTable: React.FC<IGalleryListTableProps> = (
     {
       value: "code",
       label: intl.formatMessage({ id: "scene_code" }),
+      sortable: false,
       render: (s) => <>{s.code}</>,
     },
     {
@@ -194,29 +201,34 @@ export const GalleryListTable: React.FC<IGalleryListTableProps> = (
       value: "tags",
       label: intl.formatMessage({ id: "tags" }),
       defaultShow: true,
+      sortable: false,
       render: TagCell,
     },
     {
       value: "performers",
       label: intl.formatMessage({ id: "performers" }),
       defaultShow: true,
+      sortable: false,
       render: PerformersCell,
     },
     {
       value: "studio",
       label: intl.formatMessage({ id: "studio" }),
       defaultShow: true,
+      sortable: false,
       render: StudioCell,
     },
     {
       value: "scenes",
       label: intl.formatMessage({ id: "scenes" }),
       defaultShow: true,
+      sortable: false,
       render: SceneCell,
     },
     {
       value: "photographer",
       label: intl.formatMessage({ id: "photographer" }),
+      sortable: false,
       render: (s) => <>{s.photographer}</>,
     },
     {
@@ -265,6 +277,9 @@ export const GalleryListTable: React.FC<IGalleryListTableProps> = (
       selectedIds={props.selectedIds}
       onSelectChange={props.onSelectChange}
       renderCell={renderCell}
+      onSort={props.onSort}
+      sortBy={props.sortBy}
+      sortDirection={props.sortDirection}
     />
   );
 };

ui/v2.5/src/components/List/ListFilter.tsx

@@ -12,10 +12,15 @@ import { Icon } from "../Shared/Icon";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import useFocus from "src/utils/focus";
 import { useIntl } from "react-intl";
-import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCaretDown,
+  faCaretUp,
+  faCheck,
+} from "@fortawesome/free-solid-svg-icons";
 import { useDebounce } from "src/hooks/debounce";
 import { ClearableInput } from "../Shared/ClearableInput";
 import { useStopWheelScroll } from "src/utils/form";
+import { SortDirectionEnum } from "src/core/generated-graphql";
 
 export function useDebouncedSearchInput(
   filter: ListFilterModel,
@@ -209,3 +214,11 @@ export const PageSizeSelector: React.FC<{
     </div>
   );
 };
+
+export const SortByIcon: React.FC<{
+  sortDirection: SortDirectionEnum;
+}> = ({ sortDirection }) => (
+  <Icon
+    icon={sortDirection === SortDirectionEnum.Asc ? faCaretUp : faCaretDown}
+  />
+);

ui/v2.5/src/components/List/ListTable.tsx

@@ -2,11 +2,14 @@ import React, { useMemo } from "react";
 import { Table, Form } from "react-bootstrap";
 import { CheckBoxSelect } from "../Shared/Select";
 import cx from "classnames";
+import { SortDirectionEnum } from "src/core/generated-graphql";
+import { SortByIcon } from "./ListFilter";
 
 export interface IColumn {
   label: string;
   value: string;
   mandatory?: boolean;
+  sortable?: boolean;
 }
 
 export const ColumnSelector: React.FC<{
@@ -47,6 +50,9 @@ interface IListTableProps<T> {
   selectedIds: Set<string>;
   onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
   renderCell: (column: IColumn, item: T, index: number) => React.ReactNode;
+  onSort?: (value: string) => void;
+  sortBy?: string;
+  sortDirection?: SortDirectionEnum;
 }
 
 export const ListTable = <T extends { id: string }>(
@@ -61,6 +67,9 @@ export const ListTable = <T extends { id: string }>(
     selectedIds,
     onSelectChange,
     renderCell,
+    onSort,
+    sortBy,
+    sortDirection,
   } = props;
 
   const visibleColumns = useMemo(() => {
@@ -102,12 +111,33 @@ export const ListTable = <T extends { id: string }>(
   };
 
   const columnHeaders = useMemo(() => {
-    return visibleColumns.map((column) => (
-      <th key={column.value} className={`${column.value}-head`}>
-        {column.label}
-      </th>
-    ));
-  }, [visibleColumns]);
+    return visibleColumns.map((column) => {
+      const isSortable = column.sortable !== false && onSort;
+      const isActive = sortBy === column.value;
+
+      return (
+        <th
+          key={column.value}
+          className={`${column.value}-head${isSortable ? " sortable" : ""}`}
+          onClick={isSortable ? () => onSort(column.value) : undefined}
+          style={isSortable ? { cursor: "pointer" } : undefined}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+            }}
+          >
+            {column.label}
+            {isActive && sortDirection && (
+              <SortByIcon sortDirection={sortDirection} />
+            )}
+          </div>
+        </th>
+      );
+    });
+  }, [visibleColumns, onSort, sortBy, sortDirection]);
 
   return (
     <div className={cx("table-list", className)}>

ui/v2.5/src/components/List/styles.scss

@@ -444,8 +444,11 @@ input[type="range"].zoom-slider {
   margin-right: 0.25rem;
   padding: 0.25em 0.6em;
   text-align: center;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
   vertical-align: baseline;
   white-space: nowrap;
 
@@ -928,6 +931,7 @@ ul.selectable-list {
 
   .table thead th {
     border: none;
+    padding-bottom: 0;
     white-space: nowrap;
   }