Add created date to series selection dropdown (#1373)

This should help a little with choosing the right series when uploading
a video or adding a series block.

Improves #1098

Author: LukasKalbertodt

backend/src/api/model/search/series.rs

@@ -1,5 +1,6 @@
 use std::collections::HashMap;
 
+use chrono::{DateTime, Utc};
 use juniper::GraphQLObject;
 use meilisearch_sdk::search::MatchRange;
 
@@ -21,6 +22,7 @@ pub(crate) struct SearchSeries {
     host_realms: Vec<SearchRealm>,
     thumbnails: Vec<ThumbnailInfo>,
     matches: SearchSeriesMatches,
+    created: Option<DateTime<Utc>>,
 }
 
 
@@ -52,6 +54,7 @@ impl SearchSeries {
             opencast_id: src.opencast_id,
             title: src.title,
             description: src.description,
+            created: src.created,
             host_realms: src.host_realms.into_iter()
                 .map(|r| SearchRealm::without_matches(r))
                 .collect(),

frontend/src/schema.graphql

@@ -785,6 +785,7 @@ type SearchSeries implements Node {
   hostRealms: [SearchRealm!]!
   thumbnails: [ThumbnailInfo!]!
   matches: SearchSeriesMatches!
+  created: DateTime
 }
 
 type SearchSeriesMatches {

frontend/src/ui/SearchableSelect.tsx

@@ -16,6 +16,7 @@ import {
 import {
     SearchableSelectSeriesQuery,
 } from "./__generated__/SearchableSelectSeriesQuery.graphql";
+import { LuCalendar } from "react-icons/lu";
 
 
 type DerivedProps<T> = Omit<Parameters<typeof AsyncSelect<T>>[0],
@@ -132,6 +133,7 @@ export type VideoListOption = {
     readonly opencastId: string;
     readonly title: string;
     readonly description?: string | null;
+    readonly created?: string | null;
 };
 
 export const VideoListSelector: React.FC<VideoListSelectorProps> = ({
@@ -149,6 +151,7 @@ export const VideoListSelector: React.FC<VideoListSelectorProps> = ({
                         opencastId
                         title
                         description
+                        created
                     }
                 }
             }
@@ -206,7 +209,28 @@ export const VideoListSelector: React.FC<VideoListSelectorProps> = ({
 
 const formatVideoListOption = (videoList: VideoListOption, _: TFunction) => (
     <div>
-        <div>{videoList.title}</div>
+        <div css={{ display: "flex", gap: 8 }}>
+            {videoList.title}
+            {videoList.created && <DateWithIcon dateString={videoList.created} />}
+        </div>
         <SmallDescription css={{ margin: 0 }} lines={1} text={videoList.description} />
     </div>
 );
+
+const DateWithIcon: React.FC<{ dateString: string }> = ({ dateString }) => {
+    const { i18n } = useTranslation();
+    const date = new Date(dateString);
+
+    return <div css={{
+        display: "flex",
+        gap: 4,
+        fontSize: 10,
+        color: COLORS.neutral60,
+        alignItems: "center",
+    }}>
+        <LuCalendar />
+        <time dateTime={date.toISOString()}>
+            {date.toLocaleDateString(i18n.language)}
+        </time>
+    </div>;
+};