From 44c32a91d370d33d4caf9b9fb09897208bb3bd3d Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Fri, 14 Aug 2020 09:41:01 +1000
Subject: [PATCH] UI improvements (#726)

* Use rating stars in movie
* Make multiset button more obvious
* Hide select all/none buttons where not selectable
* Make add the default multi-set mode
---
 ui/v2.5/src/components/List/ListFilter.tsx    |  2 +-
 .../components/Movies/MovieDetails/Movie.tsx  | 19 +++++++++++--------
 .../components/Scenes/EditScenesDialog.tsx    |  4 ++--
 ui/v2.5/src/components/Scenes/SceneList.tsx   |  1 +
 ui/v2.5/src/components/Shared/MultiSet.tsx    |  2 +-
 ui/v2.5/src/hooks/ListHook.tsx                |  5 +++--
 6 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/ui/v2.5/src/components/List/ListFilter.tsx b/ui/v2.5/src/components/List/ListFilter.tsx
index f709aa0da..c6581a6e3 100644
--- a/ui/v2.5/src/components/List/ListFilter.tsx
+++ b/ui/v2.5/src/components/List/ListFilter.tsx
@@ -361,7 +361,7 @@ export const ListFilter: React.FC<IListFilterProps> = (
   }
 
   function renderMore() {
-    const options = [renderSelectAll(), renderSelectNone()];
+    const options = [renderSelectAll(), renderSelectNone()].filter((o) => o);
 
     if (props.otherOperations) {
       props.otherOperations
diff --git a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
index 116cddf06..68964ebc1 100644
--- a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
+++ b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
@@ -27,6 +27,7 @@ import {
   TextUtils,
   DurationUtils,
 } from "src/utils";
+import { RatingStars } from "src/components/Scenes/SceneDetails/RatingStars";
 import { MovieScenesPanel } from "./MovieScenesPanel";
 import { MovieScrapeDialog } from "./MovieScrapeDialog";
 
@@ -517,14 +518,16 @@ export const Movie: React.FC = () => {
               isEditing,
               onChange: setDirector,
             })}
-            {TableUtils.renderHtmlSelect({
-              title: "Rating",
-              value: rating ?? "",
-              isEditing,
-              onChange: (value: string) =>
-                setRating(Number.parseInt(value, 10)),
-              selectOptions: ["", "1", "2", "3", "4", "5"],
-            })}
+            <tr>
+              <td>Rating</td>
+              <td>
+                <RatingStars
+                  value={rating}
+                  disabled={!isEditing}
+                  onSetRating={(value) => setRating(value)}
+                />
+              </td>
+            </tr>
           </tbody>
         </Table>
 
diff --git a/ui/v2.5/src/components/Scenes/EditScenesDialog.tsx b/ui/v2.5/src/components/Scenes/EditScenesDialog.tsx
index a19e44f3d..acdfeebc8 100644
--- a/ui/v2.5/src/components/Scenes/EditScenesDialog.tsx
+++ b/ui/v2.5/src/components/Scenes/EditScenesDialog.tsx
@@ -22,10 +22,10 @@ export const EditScenesDialog: React.FC<IListOperationProps> = (
   const [studioId, setStudioId] = useState<string>();
   const [performerMode, setPerformerMode] = React.useState<
     GQL.BulkUpdateIdMode
-  >(GQL.BulkUpdateIdMode.Set);
+  >(GQL.BulkUpdateIdMode.Add);
   const [performerIds, setPerformerIds] = useState<string[]>();
   const [tagMode, setTagMode] = React.useState<GQL.BulkUpdateIdMode>(
-    GQL.BulkUpdateIdMode.Set
+    GQL.BulkUpdateIdMode.Add
   );
   const [tagIds, setTagIds] = useState<string[]>();
 
diff --git a/ui/v2.5/src/components/Scenes/SceneList.tsx b/ui/v2.5/src/components/Scenes/SceneList.tsx
index 4f544de7a..40a4fc374 100644
--- a/ui/v2.5/src/components/Scenes/SceneList.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneList.tsx
@@ -56,6 +56,7 @@ export const SceneList: React.FC<ISceneList> = ({
 
   const listData = useScenesList({
     zoomable: true,
+    selectable: true,
     otherOperations,
     renderContent,
     renderEditDialog: renderEditScenesDialog,
diff --git a/ui/v2.5/src/components/Shared/MultiSet.tsx b/ui/v2.5/src/components/Shared/MultiSet.tsx
index 713cee05c..907d43f9c 100644
--- a/ui/v2.5/src/components/Shared/MultiSet.tsx
+++ b/ui/v2.5/src/components/Shared/MultiSet.tsx
@@ -64,7 +64,7 @@ const MultiSet: React.FunctionComponent<IMultiSetProps> = (
       <InputGroup.Prepend>
         <Button
           size="sm"
-          variant="secondary"
+          variant="primary"
           onClick={() => props.onSetMode(nextMode())}
           title={getModeText()}
           disabled={props.disabled}
diff --git a/ui/v2.5/src/hooks/ListHook.tsx b/ui/v2.5/src/hooks/ListHook.tsx
index 2bf84e114..ba2ed3424 100644
--- a/ui/v2.5/src/hooks/ListHook.tsx
+++ b/ui/v2.5/src/hooks/ListHook.tsx
@@ -62,6 +62,7 @@ interface IListHookOptions<T, E> {
   subComponent?: boolean;
   filterHook?: (filter: ListFilterModel) => ListFilterModel;
   zoomable?: boolean;
+  selectable?: boolean;
   defaultZoomIndex?: number;
   otherOperations?: IListHookOperation<T>[];
   renderContent: (
@@ -426,8 +427,8 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
       <ListFilter
         subComponent={options.subComponent}
         onFilterUpdate={updateQueryParams}
-        onSelectAll={onSelectAll}
-        onSelectNone={onSelectNone}
+        onSelectAll={options.selectable ? onSelectAll : undefined}
+        onSelectNone={options.selectable ? onSelectNone : undefined}
         zoomIndex={options.zoomable ? zoomIndex : undefined}
         onChangeZoom={options.zoomable ? onChangeZoom : undefined}
         otherOperations={otherOperations}