Add Details, Studio Code, and Photographer to Images (#4217)

* Add Details, Code, and Photographer to Images
* Add date and details to image card
---------
Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>

ui/v2.5/src/components/Images/ImageCard.tsx

@@ -16,6 +16,7 @@ import {
   faTag,
 } from "@fortawesome/free-solid-svg-icons";
 import { objectTitle } from "src/core/files";
+import { TruncatedText } from "../Shared/TruncatedText";
 
 interface IImageCardProps {
   image: GQL.SlimImageDataFragment;
@@ -175,6 +176,16 @@ export const ImageCard: React.FC<IImageCardProps> = (
           <RatingBanner rating={props.image.rating100} />
         </>
       }
+      details={
+        <div className="image-card__details">
+          <span className="image-card__date">{props.image.date}</span>
+          <TruncatedText
+            className="image-card__description"
+            text={props.image.details}
+            lineCount={3}
+          />
+        </div>
+      }
       popovers={maybeRenderPopoverButtonGroup()}
       selected={props.selected}
       selecting={props.selecting}

ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx

@@ -21,6 +21,18 @@ export const ImageDetailPanel: React.FC<IImageDetailProps> = (props) => {
     [props.image]
   );
 
+  function renderDetails() {
+    if (!props.image.details) return;
+    return (
+      <>
+        <h6>
+          <FormattedMessage id="details" />:{" "}
+        </h6>
+        <p className="pre">{props.image.details}</p>
+      </>
+    );
+  }
+
   function renderTags() {
     if (props.image.tags.length === 0) return;
     const tags = props.image.tags.map((tag) => (
@@ -135,6 +147,16 @@ export const ImageDetailPanel: React.FC<IImageDetailProps> = (props) => {
               {TextUtils.formatDateTime(intl, props.image.updated_at)}{" "}
             </h6>
           }
+          {props.image.code && (
+            <h6>
+              <FormattedMessage id="scene_code" />: {props.image.code}{" "}
+            </h6>
+          )}
+          {props.image.photographer && (
+            <h6>
+              <FormattedMessage id="photographer" />: {props.image.photographer}{" "}
+            </h6>
+          )}
         </div>
         {props.image.studio && (
           <div className="col-3 d-xl-none">
@@ -150,6 +172,7 @@ export const ImageDetailPanel: React.FC<IImageDetailProps> = (props) => {
       </div>
       <div className="row">
         <div className="col-12">
+          {renderDetails()}
           {renderTags()}
           {renderPerformers()}
         </div>

ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx

@@ -48,8 +48,11 @@ export const ImageEditPanel: React.FC<IProps> = ({
 
   const schema = yup.object({
     title: yup.string().ensure(),
+    code: yup.string().ensure(),
     urls: yupUniqueStringList("urls"),
     date: yupDateString(intl),
+    details: yup.string().ensure(),
+    photographer: yup.string().ensure(),
     rating100: yup.number().integer().nullable().defined(),
     studio_id: yup.string().required().nullable(),
     performer_ids: yup.array(yup.string().required()).defined(),
@@ -58,8 +61,11 @@ export const ImageEditPanel: React.FC<IProps> = ({
 
   const initialValues = {
     title: image.title ?? "",
+    code: image.code ?? "",
     urls: image?.urls ?? [],
     date: image?.date ?? "",
+    details: image.details ?? "",
+    photographer: image.photographer ?? "",
     rating100: image.rating100 ?? null,
     studio_id: image.studio?.id ?? null,
     performer_ids: (image.performers ?? []).map((p) => p.id),
@@ -204,6 +210,22 @@ export const ImageEditPanel: React.FC<IProps> = ({
     return renderField("tag_ids", title, control, fullWidthProps);
   }
 
+  function renderDetailsField() {
+    const props = {
+      labelProps: {
+        column: true,
+        sm: 3,
+        lg: 12,
+      },
+      fieldProps: {
+        sm: 9,
+        lg: 12,
+      },
+    };
+
+    return renderInputField("details", "textarea", "details", props);
+  }
+
   return (
     <div id="image-edit-details">
       <Prompt
@@ -234,16 +256,21 @@ export const ImageEditPanel: React.FC<IProps> = ({
         <Row className="form-container px-3">
           <Col lg={7} xl={12}>
             {renderInputField("title")}
+            {renderInputField("code", "text", "scene_code")}
 
             {renderURLListField("urls", "validation.urls_must_be_unique")}
 
             {renderDateField("date")}
+            {renderInputField("photographer")}
             {renderRatingField("rating100", "rating")}
 
             {renderStudioField()}
             {renderPerformersField()}
             {renderTagsField()}
           </Col>
+          <Col lg={5} xl={12}>
+            {renderDetailsField()}
+          </Col>
         </Row>
       </Form>
     </div>

ui/v2.5/src/components/Images/styles.scss

@@ -131,3 +131,7 @@ $imageTabWidth: 450px;
     margin-bottom: 0;
   }
 }
+
+.col-form-label {
+  padding-right: 2px;
+}