mirror of
https://github.com/stashapp/stash.git
synced 2025-12-06 16:34:02 +01:00
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:
parent
177339c14e
commit
4c144db510
6 changed files with 44 additions and 16 deletions
|
|
@ -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")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -89,6 +89,10 @@ textarea.text-input {
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.table-list {
|
||||
min-width: min-content;
|
||||
}
|
||||
|
||||
.table-list a {
|
||||
color: $text-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
|
|
|
|||
Loading…
Reference in a new issue