From 9c8b110aba58f937f142bc4df8cd4703c1d5f407 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Tue, 15 Oct 2019 20:27:39 +1100
Subject: [PATCH] Add basic scene list view

---
 ui/v2/src/components/scenes/SceneList.tsx     |   3 +-
 .../src/components/scenes/SceneListTable.tsx  | 104 ++++++++++++++++++
 2 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 ui/v2/src/components/scenes/SceneListTable.tsx

diff --git a/ui/v2/src/components/scenes/SceneList.tsx b/ui/v2/src/components/scenes/SceneList.tsx
index 4db728cf4..a46967702 100644
--- a/ui/v2/src/components/scenes/SceneList.tsx
+++ b/ui/v2/src/components/scenes/SceneList.tsx
@@ -8,6 +8,7 @@ import { ListFilterModel } from "../../models/list-filter/filter";
 import { DisplayMode, FilterMode } from "../../models/list-filter/types";
 import { WallPanel } from "../Wall/WallPanel";
 import { SceneCard } from "./SceneCard";
+import { SceneListTable } from "./SceneListTable";
 
 interface ISceneListProps extends IBaseProps {}
 
@@ -27,7 +28,7 @@ export const SceneList: FunctionComponent<ISceneListProps> = (props: ISceneListP
         </div>
       );
     } else if (filter.displayMode === DisplayMode.List) {
-      return <h1>TODO</h1>;
+      return <SceneListTable scenes={result.data.findScenes.scenes}/>;
     } else if (filter.displayMode === DisplayMode.Wall) {
       return <WallPanel scenes={result.data.findScenes.scenes} />;
     }
diff --git a/ui/v2/src/components/scenes/SceneListTable.tsx b/ui/v2/src/components/scenes/SceneListTable.tsx
new file mode 100644
index 000000000..7b7937131
--- /dev/null
+++ b/ui/v2/src/components/scenes/SceneListTable.tsx
@@ -0,0 +1,104 @@
+import {
+    H4,
+    HTMLTable,
+    H5,
+    H6,
+  } from "@blueprintjs/core";
+  import React, { FunctionComponent } from "react";
+  import { Link } from "react-router-dom";
+  import * as GQL from "../../core/generated-graphql";
+  import { TextUtils } from "../../utils/text";
+  import { TagLink } from "../Shared/TagLink";
+import { NavigationUtils } from "../../utils/navigation";
+  
+  interface ISceneListTableProps {
+    scenes: GQL.SlimSceneDataFragment[];
+  }
+  
+  export const SceneListTable: FunctionComponent<ISceneListTableProps> = (props: ISceneListTableProps) => {
+    
+    function renderDuration(scene : GQL.SlimSceneDataFragment) {
+      if (scene.file.duration === undefined) { return; }
+      return TextUtils.secondsToTimestamp(scene.file.duration);
+    }
+
+    function renderTags(tags : GQL.SlimSceneDataTags[]) {
+      return tags.map((tag) => (
+        <Link to={NavigationUtils.makeTagScenesUrl(tag)}>
+          <H6>{tag.name}</H6>
+        </Link>
+      ));
+    }
+
+    function renderPerformers(performers : GQL.SlimSceneDataPerformers[]) {
+      return performers.map((performer) => (
+        <Link to={NavigationUtils.makePerformerScenesUrl(performer)}>
+          <H6>{performer.name}</H6>
+        </Link>
+      ));
+    }
+
+    function renderStudio(studio : GQL.SlimSceneDataStudio | undefined) {
+      if (!!studio) {
+        return (
+          <Link to={NavigationUtils.makeStudioScenesUrl(studio)}>
+            <H6>{studio.name}</H6>
+          </Link>
+        );
+      }
+    }
+
+    function renderSceneRow(scene : GQL.SlimSceneDataFragment) {
+      return (
+        <>
+        <tr>
+          <td>
+            <Link to={`/scenes/${scene.id}`}>
+              <H5 style={{textOverflow: "ellipsis", overflow: "hidden"}}>
+                {!!scene.title ? scene.title : TextUtils.fileNameFromPath(scene.path)}
+              </H5>
+            </Link>
+          </td>
+          <td>
+            {scene.rating ? scene.rating : ''}
+          </td>
+          <td>
+            {renderDuration(scene)}
+          </td>
+          <td>
+            {renderTags(scene.tags)}
+          </td>
+          <td>
+            {renderPerformers(scene.performers)}
+          </td>
+          <td>
+            {renderStudio(scene.studio)}
+          </td>
+        </tr>
+        </>
+      )
+    }
+  
+    return (
+      <>
+      <div className="grid">
+        <HTMLTable>
+          <thead>
+            <tr>
+              <th>Title</th>
+              <th>Rating</th>
+              <th>Duration</th>
+              <th>Tags</th>
+              <th>Performers</th>
+              <th>Studio</th>
+            </tr>
+          </thead>
+          <tbody>
+            {props.scenes.map(renderSceneRow)}
+          </tbody>
+        </HTMLTable>
+      </div>
+      </>
+    );
+  };
+  
\ No newline at end of file