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).
This commit is contained in:
gitgiggety 2021-08-26 01:41:18 +02:00 committed by GitHub
parent 177339c14e
commit 4c144db510
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 44 additions and 16 deletions

View file

@ -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")
}

View file

@ -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))

View file

@ -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>

View file

@ -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>

View file

@ -89,6 +89,10 @@ textarea.text-input {
overflow-y: scroll;
}
.table-list {
min-width: min-content;
}
.table-list a {
color: $text-color;
}

View file

@ -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 = [