UI V2

Squashed commits: [e74bbf9] stuff [28476de] stuff [c7efb7b] stuff [2c78f94] stuff [f79338e] stuff [a697876] stuff [85bb60e] stuff [9f108b2] stuff [d8e00c0] stuff [7787ef9] stuff [f7f10b7] stuff [aa266f7] stuff [511ba6b] stuff [7453747] stuff [db55e2d] stuff [b362623] stuff [7288c17] stuff [86638cd] stuff [879dac4] stuff [65a4996] stuff [c6fb361] stuff [d449ce7] stuff [349dffa] stuff [84206ab] stuff [0253c65] stuff [cc0992e] stuff [3289e7d] stuff [d9ab290] stuff [dcc980d] stuff [7787da8] stuff [5bcf7cd] stuff [00e9316] stuff [54c9398] stuff [72b6ee1] stuff [4b4b26c] stuff [4cbdb06] stuff [1a240b3] stuff [650ea08] stuff [37440ef] stuff [9ee66ba] stuff [b430c86] stuff [37159c3] stuff [deba837] stuff [6ac65f6] stuff [a2ca1a1] stuff [c010229] stuff [3fd7306] stuff [cbe6efc] stuff [997a8d0] stuff [d0708a2] stuff [d316aba] stuff [4fe9900] Added initial files
2025-12-18 12:54:38 +03:00 · 2019-02-15 09:15:00 -08:00
parent c4d45db30c
commit 66d2c5ca04
102 changed files with 20432 additions and 29 deletions
--- a/ui/v2/src/utils/table.tsx
+++ b/ui/v2/src/utils/table.tsx
@@ -0,0 +1,164 @@
+import { EditableText, HTMLSelect, InputGroup, IOptionProps, TextArea } from "@blueprintjs/core";
+import React from "react";
+import { FilterMultiSelect } from "../components/select/FilterMultiSelect";
+import { FilterSelect } from "../components/select/FilterSelect";
+
+export class TableUtils {
+  public static renderEditableTextTableRow(options: {
+    title: string;
+    value: string | number | undefined;
+    isEditing: boolean;
+    onChange: ((value: string) => void);
+  }) {
+    let stringValue = options.value;
+    if (typeof stringValue === "number") {
+      stringValue = stringValue.toString();
+    }
+    return (
+      <tr>
+        <td>{options.title}</td>
+        <td>
+          <EditableText
+            disabled={!options.isEditing}
+            value={stringValue}
+            placeholder={options.title}
+            multiline={true}
+            onChange={(newValue) => options.onChange(newValue)}
+          />
+        </td>
+      </tr>
+    );
+  }
+
+  public static renderTextArea(options: {
+    title: string,
+    value: string | undefined,
+    isEditing: boolean,
+    onChange: ((value: string) => void),
+  }) {
+    let element: JSX.Element;
+    if (options.isEditing) {
+      element = (
+        <TextArea
+          fill={true}
+          onChange={(newValue) => options.onChange(newValue.target.value)}
+          value={options.value}
+        />
+      );
+    } else {
+      element = <p className="pre">{options.value}</p>;
+    }
+    return (
+      <tr>
+        <td>{options.title}</td>
+        <td>
+          {element}
+        </td>
+      </tr>
+    );
+  }
+
+  public static renderInputGroup(options: {
+    title: string,
+    value: string | undefined,
+    isEditing: boolean,
+    onChange: ((value: string) => void),
+  }) {
+    let element: JSX.Element;
+    if (options.isEditing) {
+      element = (
+        <InputGroup
+          onChange={(newValue: any) => options.onChange(newValue.target.value)}
+          value={options.value}
+        />
+      );
+    } else {
+      element = <span>{options.value}</span>;
+    }
+    return (
+      <tr>
+        <td>{options.title}</td>
+        <td>
+          {element}
+        </td>
+      </tr>
+    );
+  }
+
+  public static renderHtmlSelect(options: {
+    title: string,
+    value: string | number | undefined,
+    isEditing: boolean,
+    onChange: ((value: string) => void),
+    selectOptions: Array<string | number | IOptionProps>,
+  }) {
+    let stringValue = options.value;
+    if (typeof stringValue === "number") {
+      stringValue = stringValue.toString();
+    }
+
+    let element: JSX.Element;
+    if (options.isEditing) {
+      element = (
+        <HTMLSelect
+          options={options.selectOptions}
+          onChange={(event) => options.onChange(event.target.value)}
+          value={stringValue}
+        />
+      );
+    } else {
+      element = <span>{options.value}</span>;
+    }
+    return (
+      <tr>
+        <td>{options.title}</td>
+        <td>
+          {element}
+        </td>
+      </tr>
+    );
+  }
+
+  // TODO: isediting
+  public static renderFilterSelect(options: {
+    title: string,
+    type: "performers" | "studios" | "tags",
+    initialId: string | undefined,
+    onChange: ((id: string) => void),
+  }) {
+    return (
+      <tr>
+        <td>{options.title}</td>
+        <td>
+          <FilterSelect
+            type={options.type}
+            onSelectItem={(item) => options.onChange(item.id)}
+            initialId={options.initialId}
+          />
+        </td>
+      </tr>
+    );
+  }
+
+  // TODO: isediting
+  public static renderMultiSelect(options: {
+    title: string,
+    type: "performers" | "studios" | "tags",
+    initialIds: string[] | undefined,
+    onChange: ((ids: string[]) => void),
+  }) {
+    return (
+      <tr>
+        <td>{options.title}</td>
+        <td>
+          <FilterMultiSelect
+            type={options.type}
+            onUpdate={(items) => options.onChange(items.map((i) => i.id))}
+            openOnKeyDown={true}
+            initialIds={options.initialIds}
+          />
+        </td>
+      </tr>
+    );
+  }
+}