From 4c144db5107302cb90adf6d4dd3ad1544d335060 Mon Sep 17 00:00:00 2001
From: gitgiggety <79809426+gitgiggety@users.noreply.github.com>
Date: Thu, 26 Aug 2021 01:41:18 +0200
Subject: [PATCH] Performers listing improvements (#1671)

* Add sorting on image and gallery count to performers
* Make performer table headers translatable
* Add image and gallery count to performers table
* Make sure list table container fits the table

Make the table container minimally as wide as the table. This fixes the
table "overflowing" to the left and right and the left not being
accessible.

* Remove unnecessary truncation in tables

IMO there is no need to truncate the title in the scenes table and the
name in the performers table. This because both tables also contain an
image which means that multiple lines should be possible without really
extending the height of the row. Furthermore both tables contain other
values which might be way longer and also aren't wrapped (like tags and
performers for scenes, and aliases for performers).
---
 pkg/sqlite/performer.go                       |  6 ++++
 .../src/components/Changelog/versions/v090.md |  1 +
 .../Performers/PerformerListTable.tsx         | 33 +++++++++++++------
 .../src/components/Scenes/SceneListTable.tsx  |  8 ++---
 ui/v2.5/src/index.scss                        |  4 +++
 ui/v2.5/src/models/list-filter/performers.ts  |  8 +++++
 6 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/pkg/sqlite/performer.go b/pkg/sqlite/performer.go
index 4c7c4697a..0cba2dcfe 100644
--- a/pkg/sqlite/performer.go
+++ b/pkg/sqlite/performer.go
@@ -500,6 +500,12 @@ func (qb *performerQueryBuilder) getPerformerSort(findFilter *models.FindFilterT
 	if sort == "scenes_count" {
 		return getCountSort(performerTable, performersScenesTable, performerIDColumn, direction)
 	}
+	if sort == "images_count" {
+		return getCountSort(performerTable, performersImagesTable, performerIDColumn, direction)
+	}
+	if sort == "galleries_count" {
+		return getCountSort(performerTable, performersGalleriesTable, performerIDColumn, direction)
+	}
 
 	return getSort(sort, direction, "performers")
 }
diff --git a/ui/v2.5/src/components/Changelog/versions/v090.md b/ui/v2.5/src/components/Changelog/versions/v090.md
index 929556c08..b53c8a86b 100644
--- a/ui/v2.5/src/components/Changelog/versions/v090.md
+++ b/ui/v2.5/src/components/Changelog/versions/v090.md
@@ -1,4 +1,5 @@
 ### ✨ New Features
+* Added sort by options for image and gallery count for performers. ([#1671](https://github.com/stashapp/stash/pull/1671))
 * Added sort by options for date, duration and rating for movies. ([#1663](https://github.com/stashapp/stash/pull/1663))
 * Allow saving query page zoom level in saved and default filters. ([#1636](https://github.com/stashapp/stash/pull/1636))
 * Support custom page sizes in the query page size dropdown. ([#1636](https://github.com/stashapp/stash/pull/1636))
diff --git a/ui/v2.5/src/components/Performers/PerformerListTable.tsx b/ui/v2.5/src/components/Performers/PerformerListTable.tsx
index c746b1e9d..c96e4ce1b 100644
--- a/ui/v2.5/src/components/Performers/PerformerListTable.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerListTable.tsx
@@ -1,10 +1,11 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 
 import React from "react";
+import { useIntl } from "react-intl";
 import { Button, Table } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
-import { Icon, TruncatedText } from "src/components/Shared";
+import { Icon } from "src/components/Shared";
 import { NavUtils } from "src/utils";
 
 interface IPerformerListTableProps {
@@ -14,6 +15,8 @@ interface IPerformerListTableProps {
 export const PerformerListTable: React.FC<IPerformerListTableProps> = (
   props: IPerformerListTableProps
 ) => {
+  const intl = useIntl();
+
   const renderPerformerRow = (performer: GQL.PerformerDataFragment) => (
     <tr key={performer.id}>
       <td>
@@ -27,9 +30,7 @@ export const PerformerListTable: React.FC<IPerformerListTableProps> = (
       </td>
       <td className="text-left">
         <Link to={`/performers/${performer.id}`}>
-          <h5>
-            <TruncatedText text={performer.name} />
-          </h5>
+          <h5>{performer.name}</h5>
         </Link>
       </td>
       <td>{performer.aliases ? performer.aliases : ""}</td>
@@ -45,6 +46,16 @@ export const PerformerListTable: React.FC<IPerformerListTableProps> = (
           <h6>{performer.scene_count}</h6>
         </Link>
       </td>
+      <td>
+        <Link to={NavUtils.makePerformerImagesUrl(performer)}>
+          <h6>{performer.image_count}</h6>
+        </Link>
+      </td>
+      <td>
+        <Link to={NavUtils.makePerformerGalleriesUrl(performer)}>
+          <h6>{performer.gallery_count}</h6>
+        </Link>
+      </td>
       <td>{performer.birthdate}</td>
       <td>{performer.height}</td>
     </tr>
@@ -56,12 +67,14 @@ export const PerformerListTable: React.FC<IPerformerListTableProps> = (
         <thead>
           <tr>
             <th />
-            <th>Name</th>
-            <th>Aliases</th>
-            <th>Favourite</th>
-            <th>Scene Count</th>
-            <th>Birthdate</th>
-            <th>Height</th>
+            <th>{intl.formatMessage({ id: "name" })}</th>
+            <th>{intl.formatMessage({ id: "aliases" })}</th>
+            <th>{intl.formatMessage({ id: "favourite" })}</th>
+            <th>{intl.formatMessage({ id: "scene_count" })}</th>
+            <th>{intl.formatMessage({ id: "image_count" })}</th>
+            <th>{intl.formatMessage({ id: "gallery_count" })}</th>
+            <th>{intl.formatMessage({ id: "birthdate" })}</th>
+            <th>{intl.formatMessage({ id: "height" })}</th>
           </tr>
         </thead>
         <tbody>{props.performers.map(renderPerformerRow)}</tbody>
diff --git a/ui/v2.5/src/components/Scenes/SceneListTable.tsx b/ui/v2.5/src/components/Scenes/SceneListTable.tsx
index c6b20c382..d5b8f8f02 100644
--- a/ui/v2.5/src/components/Scenes/SceneListTable.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneListTable.tsx
@@ -5,7 +5,7 @@ import { Table, Button, Form } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
 import { NavUtils, TextUtils } from "src/utils";
-import { Icon, TruncatedText } from "src/components/Shared";
+import { Icon } from "src/components/Shared";
 import { FormattedMessage } from "react-intl";
 
 interface ISceneListTableProps {
@@ -80,11 +80,7 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
         </td>
         <td className="text-left">
           <Link to={sceneLink}>
-            <h5>
-              <TruncatedText
-                text={scene.title ?? TextUtils.fileNameFromPath(scene.path)}
-              />
-            </h5>
+            <h5>{scene.title ?? TextUtils.fileNameFromPath(scene.path)}</h5>
           </Link>
         </td>
         <td>{scene.rating ? scene.rating : ""}</td>
diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss
index 06b563582..c290aaeeb 100755
--- a/ui/v2.5/src/index.scss
+++ b/ui/v2.5/src/index.scss
@@ -89,6 +89,10 @@ textarea.text-input {
   overflow-y: scroll;
 }
 
+.table-list {
+  min-width: min-content;
+}
+
 .table-list a {
   color: $text-color;
 }
diff --git a/ui/v2.5/src/models/list-filter/performers.ts b/ui/v2.5/src/models/list-filter/performers.ts
index 6fc10e5bf..4cc5eb045 100644
--- a/ui/v2.5/src/models/list-filter/performers.ts
+++ b/ui/v2.5/src/models/list-filter/performers.ts
@@ -27,6 +27,14 @@ const sortByOptions = [
       messageID: "scene_count",
       value: "scenes_count",
     },
+    {
+      messageID: "image_count",
+      value: "images_count",
+    },
+    {
+      messageID: "gallery_count",
+      value: "galleries_count",
+    },
   ]);
 
 const displayModeOptions = [