From cd713e7252f4e2be4c40def6eb654c75ee75f4ac Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Wed, 17 Jul 2024 17:41:40 +0300
Subject: [PATCH] New: Sort by tags on movie index

---
 .../src/Movie/Index/Menus/MovieIndexSortMenu.tsx  |  9 +++++++++
 .../src/Movie/Index/Posters/MovieIndexPoster.tsx  |  4 +++-
 .../Movie/Index/Posters/MovieIndexPosterInfo.css  |  8 ++++++++
 .../Index/Posters/MovieIndexPosterInfo.css.d.ts   |  2 ++
 .../Movie/Index/Posters/MovieIndexPosterInfo.tsx  | 15 +++++++++++++++
 .../src/Movie/Index/Posters/MovieIndexPosters.tsx |  5 +++++
 6 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Movie/Index/Menus/MovieIndexSortMenu.tsx b/frontend/src/Movie/Index/Menus/MovieIndexSortMenu.tsx
index 98d85dceb..4d115e619 100644
--- a/frontend/src/Movie/Index/Menus/MovieIndexSortMenu.tsx
+++ b/frontend/src/Movie/Index/Menus/MovieIndexSortMenu.tsx
@@ -189,6 +189,15 @@ function MovieIndexSortMenu(props: MovieIndexSortMenuProps) {
         >
           {translate('OriginalLanguage')}
         </SortMenuItem>
+
+        <SortMenuItem
+          name="tags"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Tags')}
+        </SortMenuItem>
       </MenuContent>
     </SortMenu>
   );
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
index 997293352..bc320e22a 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
+++ b/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
@@ -82,7 +82,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     certification,
     originalTitle,
     originalLanguage,
-    tags,
+    tags = [],
   } = movie;
 
   const { sizeOnDisk = 0 } = statistics;
@@ -317,9 +317,11 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         certification={certification}
         originalTitle={originalTitle}
         originalLanguage={originalLanguage}
+        tags={tags}
         showTmdbRating={showTmdbRating}
         showImdbRating={showImdbRating}
         showRottenTomatoesRating={showRottenTomatoesRating}
+        showTags={showTags}
       />
 
       <EditMovieModalConnector
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css b/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css
index 0781524b5..d0db478b1 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css
+++ b/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css
@@ -9,3 +9,11 @@
 
   composes: info;
 }
+
+.tags {
+  composes: tags from '~./MovieIndexPoster.css';
+}
+
+.tagsList {
+  composes: tagsList from '~./MovieIndexPoster.css';
+}
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css.d.ts b/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css.d.ts
index 46d3af07f..34843cb93 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css.d.ts
+++ b/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css.d.ts
@@ -2,6 +2,8 @@
 // Please do not change this file!
 interface CssExports {
   'info': string;
+  'tags': string;
+  'tagsList': string;
   'title': string;
 }
 export const cssExports: CssExports;
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx
index 61936dfa7..2e8f3e4c5 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx
+++ b/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Icon from 'Components/Icon';
 import ImdbRating from 'Components/ImdbRating';
 import RottenTomatoRating from 'Components/RottenTomatoRating';
+import TagListConnector from 'Components/TagListConnector';
 import TmdbRating from 'Components/TmdbRating';
 import { icons } from 'Helpers/Props';
 import Language from 'Language/Language';
@@ -28,6 +29,7 @@ interface MovieIndexPosterInfoProps {
   originalTitle: string;
   originalLanguage: Language;
   sizeOnDisk?: number;
+  tags: number[];
   sortKey: string;
   showRelativeDates: boolean;
   showCinemaRelease: boolean;
@@ -38,6 +40,7 @@ interface MovieIndexPosterInfoProps {
   showTmdbRating: boolean;
   showImdbRating: boolean;
   showRottenTomatoesRating: boolean;
+  showTags: boolean;
 }
 
 function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
@@ -56,6 +59,7 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     originalTitle,
     originalLanguage,
     sizeOnDisk,
+    tags = [],
     sortKey,
     showRelativeDates,
     showCinemaRelease,
@@ -66,6 +70,7 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     showTmdbRating,
     showImdbRating,
     showRottenTomatoesRating,
+    showTags,
   } = props;
 
   if (sortKey === 'studio' && studio) {
@@ -199,6 +204,16 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
   }
 
+  if (!showTags && sortKey === 'tags' && tags.length) {
+    return (
+      <div className={styles.tags}>
+        <div className={styles.tagsList}>
+          <TagListConnector tags={tags} />
+        </div>
+      </div>
+    );
+  }
+
   if (sortKey === 'path') {
     return (
       <div className={styles.info} title={translate('Path')}>
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx
index 97710003c..ac14a8bfa 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx
+++ b/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx
@@ -237,6 +237,11 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
           heights.push(19);
         }
         break;
+      case 'tags':
+        if (!showTags) {
+          heights.push(21);
+        }
+        break;
       default:
       // No need to add a height of 0
     }