From 0d29aa7d1f2b1870423d31e18ac840dc1bda0239 Mon Sep 17 00:00:00 2001
From: Lee Peuker <lee.peuker@protonmail.com>
Date: Thu, 6 Jul 2023 22:00:37 +0200
Subject: [PATCH 1/2] Playing around

---
 src/Domain/Movie/MovieRepository.php    |  4 +-
 src/HttpController/PersonController.php | 28 ++++++--
 src/ValueObject/Date.php                | 35 ++++++----
 templates/page/person.html.twig         | 92 ++++++++++++++-----------
 4 files changed, 93 insertions(+), 66 deletions(-)

diff --git a/src/Domain/Movie/MovieRepository.php b/src/Domain/Movie/MovieRepository.php
index f1e82b04..feaa1195 100644
--- a/src/Domain/Movie/MovieRepository.php
+++ b/src/Domain/Movie/MovieRepository.php
@@ -682,14 +682,14 @@ public function fetchWithActor(int $personId, int $userId) : array
     {
         return $this->dbConnection->fetchAllAssociative(
             <<<SQL
-            SELECT DISTINCT m.*, mur.rating as userRating
+            SELECT DISTINCT m.*, mur.rating as userRating, mc.character_name
             FROM movie m
             JOIN movie_cast mc ON m.id = mc.movie_id
             JOIN person p ON mc.person_id = p.id
             JOIN movie_user_watch_dates muwd ON m.id = muwd.movie_id
             LEFT JOIN movie_user_rating mur ON muwd.movie_id = mur.movie_id and mur.user_id = ?
             WHERE p.id = ? AND m.id IN (SELECT DISTINCT movie_id FROM movie_user_watch_dates mh) AND muwd.user_id = ?
-            ORDER BY m.title
+            ORDER BY m.release_date DESC
             SQL,
             [$userId, $personId, $userId],
         );
diff --git a/src/HttpController/PersonController.php b/src/HttpController/PersonController.php
index 132c3566..1b70f728 100644
--- a/src/HttpController/PersonController.php
+++ b/src/HttpController/PersonController.php
@@ -15,15 +15,16 @@
 class PersonController
 {
     public function __construct(
-        private readonly Person\PersonApi $personApi,
-        private readonly MovieApi $movieApi,
-        private readonly Environment $twig,
+        private readonly Person\PersonApi             $personApi,
+        private readonly MovieApi                     $movieApi,
+        private readonly Environment                  $twig,
         private readonly UserPageAuthorizationChecker $userPageAuthorizationChecker,
-        private readonly UrlGenerator $urlGenerator,
-    ) {
+        private readonly UrlGenerator                 $urlGenerator,
+    )
+    {
     }
 
-    public function renderPage(Request $request) : Response
+    public function renderPage(Request $request): Response
     {
         $userId = $this->userPageAuthorizationChecker->findUserIdIfCurrentVisitorIsAllowedToSeeUser((string)$request->getRouteParameters()['username']);
         if ($userId === null) {
@@ -50,6 +51,19 @@ public function renderPage(Request $request) : Response
             }
         }
 
+        $actorMovies = $this->movieApi->fetchWithActor($personId, $userId);
+
+        $actorMoviesGroupedByReleaseYear = [];
+        foreach ($actorMovies as $actorMovie) {
+            $year = Date::createFromString($actorMovie['release_date'])->getYear();
+
+            if (isset($actorMoviesGroupedByReleaseYear[(string)$year]) === false) {
+                $actorMoviesGroupedByReleaseYear[(string)$year] = [];
+            }
+
+            $actorMoviesGroupedByReleaseYear[(string)$year][] = $actorMovie;
+        }
+
         return Response::create(
             StatusCode::createOk(),
             $this->twig->render('page/person.html.twig', [
@@ -66,7 +80,7 @@ public function renderPage(Request $request) : Response
                     'placeOfBirth' => $person->getPlaceOfBirth(),
                     'tmdbId' => $person->getTmdbId()
                 ],
-                'moviesAsActor' => $this->movieApi->fetchWithActor($personId, $userId),
+                'moviesAsActor' => $actorMoviesGroupedByReleaseYear,
                 'moviesAsDirector' => $this->movieApi->fetchWithDirector($personId, $userId),
             ]),
         );
diff --git a/src/ValueObject/Date.php b/src/ValueObject/Date.php
index d975ac18..e83cf49c 100644
--- a/src/ValueObject/Date.php
+++ b/src/ValueObject/Date.php
@@ -13,22 +13,22 @@ private function __construct(private readonly string $date)
     {
     }
 
-    public static function create() : self
+    public static function create(): self
     {
         return new self ((new \DateTime())->format(self::FORMAT));
     }
 
-    public static function createFromDateTime(DateTime $dateTime) : self
+    public function format(string $format): string
     {
-        return new self ((new \DateTime((string)$dateTime))->format(self::FORMAT));
+        return (new \DateTime($this->date))->format($format);
     }
 
-    public static function createFromString(string $dateString) : self
+    public static function createFromDateTime(DateTime $dateTime): self
     {
-        return new self ((new \DateTime($dateString))->format(self::FORMAT));
+        return new self ((new \DateTime((string)$dateTime))->format(self::FORMAT));
     }
 
-    public static function createFromStringAndFormat(string $dateString, string $dateFormat) : self
+    public static function createFromStringAndFormat(string $dateString, string $dateFormat): self
     {
         $dateTime = \DateTime::createFromFormat($dateFormat, $dateString);
 
@@ -39,17 +39,12 @@ public static function createFromStringAndFormat(string $dateString, string $dat
         return new self ($dateTime->format(self::FORMAT));
     }
 
-    public function __toString() : string
+    public function __toString(): string
     {
         return $this->date;
     }
 
-    public function format(string $format) : string
-    {
-        return (new \DateTime($this->date))->format($format);
-    }
-
-    public function getDifferenceInDays(Date $date) : int
+    public function getDifferenceInDays(Date $date): int
     {
         $daysSince = (new \DateTime($this->date))->diff((new \DateTime($date->date)))->days;
 
@@ -60,13 +55,23 @@ public function getDifferenceInDays(Date $date) : int
         return $daysSince;
     }
 
-    public function getDifferenceInYears(Date $date) : int
+    public function getDifferenceInYears(Date $date): int
     {
         return (new \DateTime($this->date))->diff((new \DateTime($date->date)))->y;
     }
 
-    public function jsonSerialize() : string
+    public function jsonSerialize(): string
     {
         return $this->date;
     }
+
+    public function getYear(): Year
+    {
+        return Year::createFromString($this->format('Y'));
+    }
+
+    public static function createFromString(string $dateString): self
+    {
+        return new self ((new \DateTime($dateString))->format(self::FORMAT));
+    }
 }
diff --git a/templates/page/person.html.twig b/templates/page/person.html.twig
index f76025c7..151fb73f 100644
--- a/templates/page/person.html.twig
+++ b/templates/page/person.html.twig
@@ -10,14 +10,14 @@
 {% endblock %}
 
 {% block body %}
-<style>
-.truncated {
-  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
-  mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
-  max-height: 20vh;
-  overflow-y: hidden; 
-}
-</style>
+    <style>
+        .truncated {
+            -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
+            mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
+            max-height: 20vh;
+            overflow-y: hidden;
+        }
+    </style>
     <main role="main" class="container">
         {{ include('component/navbar.html.twig') }}
         {{ include('component/user-select.html.twig') }}
@@ -25,9 +25,9 @@
 
         <div class="d-flex flex-row flex-wrap">
 
-            <div style="margin-bottom: 1rem; padding-left: 1rem;" class="col-xxl-3 col-xl-4 col-lg-5 col-md-6 col-xs-8">
-                <div>
-                    <img src="{{ person.posterPath }}" style="width: 100%; height: 100%; align-self: start;">
+            <div style="margin-bottom: 1rem;" class="col-xxl-2 col-xl-2 col-lg-2 col-md-4 col-xs-2">
+                <div style="padding-bottom: 1rem">
+                    <img src="{{ person.posterPath }}" style="width: 100%; height: 100%; align-self: start;" alt="">
                 </div>
                 <div>
                     <h2 class="d-md-none d-sm-flex">{{ person.name }}</h2>
@@ -37,7 +37,9 @@
                     <p style="margin-bottom: 0.4rem">{{ person.gender == '0' ? '-' }}{{ person.gender == '1' ? 'Female' }}{{ person.gender == '2' ? 'Male' }}{{ person.gender == '3' ? 'Non-Binary' }}</p>
                     {% if person.birthDate is not null %}
                         <h6 style="margin-bottom: 0.1rem; font-weight: bold;">Birth date</h6>
-                        <p style="margin-bottom: 0.4rem">{{ person.birthDate }} ({{ person.age }} {% if person.deathDate is not null %}&#10013;{% else %}years old{% endif %})</p>
+                        <p style="margin-bottom: 0.4rem">{{ person.birthDate }}
+                            ({{ person.age }} {% if person.deathDate is not null %}&#10013;{% else %}years old{% endif %}
+                            )</p>
                     {% endif %}
                     {% if person.deathDate is not null %}
                         <h6 style="margin-bottom: 0.1rem; font-weight: bold;">Death date</h6>
@@ -50,19 +52,22 @@
                 </div>
             </div>
 
-            <div style="padding-right: 1rem; margin-bottom: 0.4rem; padding-left: 1rem;" class="col-xxl-9 col-xl-8 col-lg-7 col-md-6 col-xs-12">
+            <div style="padding-right: 1rem; margin-bottom: 0.4rem; padding-left: 1rem;"
+                 class="col-xxl-10 col-xl-10 col-lg-10 col-md-8 col-xs-12">
                 <h2 class="d-none d-md-block">{{ person.name }}</h2>
-                <h6 style="margin-bottom: 0.1rem; font-weight: bold;">Biography</h6>
+                <h6 style="margin-bottom: 0.1rem; font-weight: bold; padding-top: .5rem">Biography</h6>
                 {% if person.biography is not null %}
                     <p style="margin-bottom: 0;" id="biographyParagraph">{{ person.biography|nl2br }}</p>
                     <div style="cursor: pointer; top: 0;" class="d-none" id="expandContainer">
-                        <span style="border: 2px solid; padding: 3px; border-radius: 50%; float: right;" onclick="toggleBiography()"><i class="bi bi-chevron-down"></i></span>
-                        <span style="float: right; margin-right: 0.5em;" onclick="toggleBiography()">Show more&#8230;</span>
+                        <span style="border: 2px solid; padding: 3px; border-radius: 50%; float: right;"
+                              onclick="toggleBiography()"><i class="bi bi-chevron-down"></i></span>
+                        <span style="float: right; margin-right: 0.5em;"
+                              onclick="toggleBiography()">Show more&#8230;</span>
                     </div>
                 {% else %}
                     <p>No biography available.</p>
                 {% endif %}
-                <ul class="nav nav-tabs" role="tablist">
+                <ul class="nav nav-tabs" role="tablist" style="padding-top: 12rem">
                     <li class="nav-item" role="presentation">
                         <button class="nav-link {% if moviesAsActor is empty %}disabled{% elseif person.knownForDepartment == 'Acting' or moviesAsDirector is empty %}active{% endif %}"
                                 id="home-tab"
@@ -81,42 +86,45 @@
                     </li>
                 </ul>
 
-                <div class="tab-content">
+                <div class="tab-content" style="padding-top: 1rem;padding-left: .5rem">
                     <div class="tab-pane fade show {% if person.knownForDepartment == 'Acting' or (moviesAsDirector is empty and moviesAsActor is not empty) %}active{% endif %}"
-                        id="acting" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
+                         id="acting" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                         {% if moviesAsActor is not empty %}
-                            <div class="row row-cols-3 row-cols-md-3 row-cols-lg-6" style="text-align: center;margin-top: 1rem">
-                                {% for movieAsActor in moviesAsActor %}
-                                    <div class="col position-relative" style="padding-bottom: 1rem;">
-                                        <div class="card h-100 position-relative" style="cursor: pointer" onclick="window.location='/users/{{ routeUsername }}/movies/{{ movieAsActor.id }}'">
-                                            <div class="position-relative">
-                                                <img src="{{ movieAsActor.poster_path }}" class="card-img-top card-img-bottom" alt="{{ movieAsActor.title }} Poster">
-                                            </div>
-
-                                            {% if movieAsActor.userRating is not null %}
-                                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark" style="font-size: 0.8rem">
-                                                    {{ movieAsActor.userRating }}
-                                                </span>
-                                            {% endif %}
-                                        </div>
-                                    </div>
-                                {% endfor %}
-                            </div>
+                            {% for year, movies in moviesAsActor %}
+                                {{ year }}
+                                <hr style="margin-top: .3rem;">
+                                <ul style="padding-left: 1.3rem">
+                                    {% for index, movie in movies %}
+                                        <li style="{% if loop.first != true %}padding-top: .3rem;{% endif %}">
+                                            <span class="fw-bold"><a style="text-decoration: none;"
+                                                                     href="www.google.de">{{ movie.title }}</a></span>
+                                            <br> <span class="fw-lighter" style="padding-left: .5rem">as  <span
+                                                        class="fw-light">{{ movie.character_name }}</span></span>
+                                        </li>
+                                    {% endfor %}
+                                </ul>
+                            {% endfor %}
                         {% endif %}
                     </div>
+
                     <div class="tab-pane fade show {% if person.knownForDepartment == 'Directing' or (moviesAsActor is empty and moviesAsDirector is not empty) %}active{% endif %}"
-                        id="director" role="tabpanel" aria-labelledby="profile-tab"
-                        tabindex="0">
-                        <div class="row row-cols-3 row-cols-md-3 row-cols-lg-6" style="text-align: center;margin-top: 1rem">
+                         id="director" role="tabpanel" aria-labelledby="profile-tab"
+                         tabindex="0">
+                        <div class="row row-cols-3 row-cols-md-3 row-cols-lg-6"
+                             style="text-align: center;margin-top: 1rem">
                             {% for movieAsDirector in moviesAsDirector %}
                                 <div class="col position-relative" style="padding-bottom: 1rem">
-                                    <div class="card h-100 position-relative" style="cursor: pointer" onclick="window.location='/users/{{ routeUsername }}/movies/{{ movieAsDirector.id }}'">
+                                    <div class="card h-100 position-relative" style="cursor: pointer"
+                                         onclick="window.location='/users/{{ routeUsername }}/movies/{{ movieAsDirector.id }}'">
                                         <div class="position-relative">
-                                            <img src="{{ movieAsDirector.poster_path }}" class="card-img-top card-img-bottom" alt="{{ movieAsDirector.title }} Poster">
+                                            <img src="{{ movieAsDirector.poster_path }}"
+                                                 class="card-img-top card-img-bottom"
+                                                 alt="{{ movieAsDirector.title }} Poster">
 
                                         </div>
                                         {% if movieAsDirector.userRating is not null %}
-                                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark" style="font-size: 0.8rem">
+                                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark"
+                                                  style="font-size: 0.8rem">
                                                 {{ movieAsDirector.userRating }}
                                             </span>
                                         {% endif %}

From 479bfdf4327999bda6bf0032aefdb243d0759ed0 Mon Sep 17 00:00:00 2001
From: Lee Peuker <lee.peuker@protonmail.com>
Date: Fri, 7 Jul 2023 07:52:05 +0200
Subject: [PATCH 2/2] Remove padding

---
 templates/page/person.html.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/page/person.html.twig b/templates/page/person.html.twig
index 151fb73f..71c066ec 100644
--- a/templates/page/person.html.twig
+++ b/templates/page/person.html.twig
@@ -67,7 +67,7 @@
                 {% else %}
                     <p>No biography available.</p>
                 {% endif %}
-                <ul class="nav nav-tabs" role="tablist" style="padding-top: 12rem">
+                <ul class="nav nav-tabs" role="tablist">
                     <li class="nav-item" role="presentation">
                         <button class="nav-link {% if moviesAsActor is empty %}disabled{% elseif person.knownForDepartment == 'Acting' or moviesAsDirector is empty %}active{% endif %}"
                                 id="home-tab"