Bulk update scenes (#92)

* Add bulk update functionality

* Restore multiselect fixes from previous branch

* Prevent unsetting of studios/tags

* Detect when slice fields are omitted and ignore

ui/v2/src/components/scenes/SceneList.tsx

@@ -1,7 +1,7 @@
 import _ from "lodash";
 import React, { FunctionComponent } from "react";
 import { QueryHookResult } from "react-apollo-hooks";
-import { FindScenesQuery, FindScenesVariables } from "../../core/generated-graphql";
+import { FindScenesQuery, FindScenesVariables, SlimSceneDataFragment } from "../../core/generated-graphql";
 import { ListHook } from "../../hooks/ListHook";
 import { IBaseProps } from "../../models/base-props";
 import { ListFilterModel } from "../../models/list-filter/filter";
@@ -9,6 +9,7 @@ import { DisplayMode, FilterMode } from "../../models/list-filter/types";
 import { WallPanel } from "../Wall/WallPanel";
 import { SceneCard } from "./SceneCard";
 import { SceneListTable } from "./SceneListTable";
+import { SceneSelectedOptions } from "./SceneSelectedOptions";
 
 interface ISceneListProps extends IBaseProps {}
 
@@ -17,14 +18,50 @@ export const SceneList: FunctionComponent<ISceneListProps> = (props: ISceneListP
     filterMode: FilterMode.Scenes,
     props,
     renderContent,
+    renderSelectedOptions
   });
 
-  function renderContent(result: QueryHookResult<FindScenesQuery, FindScenesVariables>, filter: ListFilterModel) {
+  function renderSelectedOptions(result: QueryHookResult<FindScenesQuery, FindScenesVariables>, selectedIds: Set<string>) {
+    // find the selected items from the ids
+    if (!result.data || !result.data.findScenes) { return undefined; }
+
+    var scenes = result.data.findScenes.scenes;
+    
+    var selectedScenes : SlimSceneDataFragment[] = [];
+    selectedIds.forEach((id) => {
+      var scene = scenes.find((scene) => {
+        return scene.id === id;
+      });
+
+      if (scene) {
+        selectedScenes.push(scene);
+      }
+    });
+
+    return (
+      <>
+      <SceneSelectedOptions selected={selectedScenes} onScenesUpdated={() => { return; }}/>
+      </>
+    );
+  }
+
+  function renderSceneCard(scene : SlimSceneDataFragment, selectedIds: Set<string>) {
+    return (
+      <SceneCard 
+        key={scene.id} 
+        scene={scene} 
+        selected={selectedIds.has(scene.id)}
+        onSelectedChanged={(selected: boolean, shiftKey: boolean) => listData.onSelectChange(scene.id, selected, shiftKey)}
+      />
+    )
+  }
+
+  function renderContent(result: QueryHookResult<FindScenesQuery, FindScenesVariables>, filter: ListFilterModel, selectedIds: Set<string>) {
     if (!result.data || !result.data.findScenes) { return; }
     if (filter.displayMode === DisplayMode.Grid) {
       return (
         <div className="grid">
-          {result.data.findScenes.scenes.map((scene) => (<SceneCard key={scene.id} scene={scene} />))}
+          {result.data.findScenes.scenes.map((scene) => renderSceneCard(scene, selectedIds))}
         </div>
       );
     } else if (filter.displayMode === DisplayMode.List) {