Creation and update dates visible for images and scenes (#2145)

* Exposed created_at and updated_at dates on the detail panels for images and scenes
* Add fields to gallery page
* Internationalisation

Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>

graphql/documents/data/gallery.graphql

@@ -2,6 +2,8 @@ fragment GalleryData on Gallery {
   id
   checksum
   path
+  created_at
+  updated_at
   title
   date
   url

graphql/documents/data/image.graphql

@@ -6,6 +6,8 @@ fragment ImageData on Image {
   organized
   o_counter
   path
+  created_at
+  updated_at
 
   file {
     size

graphql/documents/data/scene.graphql

@@ -13,6 +13,8 @@ fragment SceneData on Scene {
   phash
   interactive
   interactive_speed
+  created_at
+  updated_at
 
   file {
     size

ui/v2.5/src/components/Changelog/versions/v0120.md

@@ -7,6 +7,7 @@
 * Added forward jump 10 second button to video player. ([#1973](https://github.com/stashapp/stash/pull/1973))
 
 ### 🎨 Improvements
+* Show Created/Updated dates in scene/image/gallery details pages. ([#2145](https://github.com/stashapp/stash/pull/2145))
 * Added support for setting scrapers path in the settings page. ([#2124](https://github.com/stashapp/stash/pull/2124))
 * Added keyboard shortcuts to hide scene page sidebar and scene scrubber. ([#2099](https://github.com/stashapp/stash/pull/2099))
 * Overhauled, restructured and added auto-save to the settings pages. ([#2086](https://github.com/stashapp/stash/pull/2086))

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryDetailPanel.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { FormattedDate } from "react-intl";
+import { FormattedDate, FormattedMessage, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import { TextUtils } from "src/utils";
 import { TagLink, TruncatedText } from "src/components/Shared";
@@ -15,6 +15,8 @@ interface IGalleryDetailProps {
 export const GalleryDetailPanel: React.FC<IGalleryDetailProps> = ({
   gallery,
 }) => {
+  const intl = useIntl();
+
   function renderDetails() {
     if (!gallery.details) return;
     return (
@@ -86,6 +88,14 @@ export const GalleryDetailPanel: React.FC<IGalleryDetailProps> = ({
           ) : (
             ""
           )}
+          <h6>
+            <FormattedMessage id="created_at" />:{" "}
+            {TextUtils.formatDate(intl, gallery.created_at)}{" "}
+          </h6>
+          <h6>
+            <FormattedMessage id="updated_at" />:{" "}
+            {TextUtils.formatDate(intl, gallery.updated_at)}{" "}
+          </h6>
         </div>
         {gallery.studio && (
           <div className="col-3 d-xl-none">

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

@@ -6,12 +6,15 @@ import { TagLink, TruncatedText } from "src/components/Shared";
 import { PerformerCard } from "src/components/Performers/PerformerCard";
 import { RatingStars } from "src/components/Scenes/SceneDetails/RatingStars";
 import { sortPerformers } from "src/core/performers";
+import { FormattedMessage, useIntl } from "react-intl";
 
 interface IImageDetailProps {
   image: GQL.ImageDataFragment;
 }
 
 export const ImageDetailPanel: React.FC<IImageDetailProps> = (props) => {
+  const intl = useIntl();
+
   function renderTags() {
     if (props.image.tags.length === 0) return;
     const tags = props.image.tags.map((tag) => (
@@ -91,6 +94,19 @@ export const ImageDetailPanel: React.FC<IImageDetailProps> = (props) => {
           ) : (
             ""
           )}
+          {
+            <h6>
+              {" "}
+              <FormattedMessage id="created_at" />:{" "}
+              {TextUtils.formatDate(intl, props.image.created_at)}{" "}
+            </h6>
+          }
+          {
+            <h6>
+              <FormattedMessage id="updated_at" />:{" "}
+              {TextUtils.formatDate(intl, props.image.updated_at)}{" "}
+            </h6>
+          }
         </div>
         {props.image.studio && (
           <div className="col-3 d-xl-none">

ui/v2.5/src/components/Scenes/SceneDetails/SceneDetailPanel.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { FormattedDate, FormattedMessage } from "react-intl";
+import { FormattedDate, FormattedMessage, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import { TextUtils } from "src/utils";
 import { TagLink, TruncatedText } from "src/components/Shared";
@@ -13,6 +13,8 @@ interface ISceneDetailProps {
 }
 
 export const SceneDetailPanel: React.FC<ISceneDetailProps> = (props) => {
+  const intl = useIntl();
+
   function renderDetails() {
     if (!props.scene.details || props.scene.details === "") return;
     return (
@@ -112,6 +114,14 @@ export const SceneDetailPanel: React.FC<ISceneDetailProps> = (props) => {
               )}
             </h6>
           )}
+          <h6>
+            <FormattedMessage id="created_at" />:{" "}
+            {TextUtils.formatDate(intl, props.scene.created_at)}{" "}
+          </h6>
+          <h6>
+            <FormattedMessage id="updated_at" />:{" "}
+            {TextUtils.formatDate(intl, props.scene.updated_at)}{" "}
+          </h6>
         </div>
         {props.scene.studio && (
           <div className="col-3 d-xl-none">