From 1c6f26f14491b16114e12025640c5723905d00bf Mon Sep 17 00:00:00 2001
From: Anu Viswan <anu.viswan@gmail.com>
Date: Sat, 28 Jun 2025 07:32:50 +0530
Subject: [PATCH] added recent movies in dashboard

---
 .../nt/src/apiService/MovieApiService.ts      | 25 ++++++-
 .../private/movie/MovieMiniCard.vue           | 67 +++++++++++++++++++
 .../nt/src/pages/private/DashboardPage.vue    | 67 ++++++++++++++++++-
 .../types/apirequestresponsetypes/Movie.ts    |  4 ++
 4 files changed, 157 insertions(+), 6 deletions(-)
 create mode 100644 client/nt.webclient/vue3withtypescript/nt/src/components/private/movie/MovieMiniCard.vue

diff --git a/client/nt.webclient/vue3withtypescript/nt/src/apiService/MovieApiService.ts b/client/nt.webclient/vue3withtypescript/nt/src/apiService/MovieApiService.ts
index 0ebb74e8..b2436488 100644
--- a/client/nt.webclient/vue3withtypescript/nt/src/apiService/MovieApiService.ts
+++ b/client/nt.webclient/vue3withtypescript/nt/src/apiService/MovieApiService.ts
@@ -1,5 +1,5 @@
 import { ApiServiceBase } from './ApiServiceBase';
-import { ISearchMoviesResponse,MovieResponse } from '@/types/apirequestresponsetypes/Movie';
+import { IRecentMoviesResponse, ISearchMoviesResponse,MovieResponse } from '@/types/apirequestresponsetypes/Movie';
 import { Movie } from "@/types/MovieTypes"
 import { DocumentNode, gql } from '@apollo/client/core';
 
@@ -8,7 +8,6 @@ class MovieApiService extends ApiServiceBase {
     searchTerm: string
   ): Promise<Movie[]> {
 
-    console.log('ready - create query')
     const search_movie: DocumentNode = gql`
     query findMovieQuery($searchTerm:String!) {
     findMovie(searchTerm: $searchTerm) {
@@ -26,13 +25,33 @@ class MovieApiService extends ApiServiceBase {
         }
     }
   }
-    `
+    `;
 
     console.log('ready to search for movies')
     const response = await this.queryGraphQl<ISearchMoviesResponse>(search_movie,{ searchTerm})
     const movies = response.findMovie.map(movieResponse => (ConvertToMovieDto(movieResponse)));
     return movies;
   }
+
+  public async GetRecentMovies(count:number):Promise<Movie[]>{
+
+    const recent_movie: DocumentNode = gql`
+      query recentMovieQuery($count:Int){
+        recentMovies(count: $count){
+          title,
+          movieLanguage,
+          releaseDate
+          cast{
+            name
+          }
+        }
+      }
+    `;
+
+    const response = await this.queryGraphQl<IRecentMoviesResponse>(recent_movie,{count});
+    const movies = response.recentMovies.map(movieResponse => (ConvertToMovieDto(movieResponse)));
+    return movies;
+  }
 }
 
 function ConvertToMovieDto(movieResponse:MovieResponse):Movie{
diff --git a/client/nt.webclient/vue3withtypescript/nt/src/components/private/movie/MovieMiniCard.vue b/client/nt.webclient/vue3withtypescript/nt/src/components/private/movie/MovieMiniCard.vue
new file mode 100644
index 00000000..ddcbb331
--- /dev/null
+++ b/client/nt.webclient/vue3withtypescript/nt/src/components/private/movie/MovieMiniCard.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+  import { Movie, Person } from '@/types/MovieTypes';
+  import CrewCard from './CrewCard.vue';
+
+  interface Props {
+    movie: Movie;
+  }
+  const props = defineProps<Props>();
+
+
+  function findCrewMembers(currentMovie:Movie,key:string):Person[]|undefined{
+    if(currentMovie.crew)
+  {
+    return currentMovie.crew.find(crewMember => crewMember.key === key)?.value;
+  }
+  else
+  return undefined;
+  }
+
+function formatDate(date: string | Date): string {
+  const parsedDate = typeof date === 'string' ? new Date(date) : date;
+
+  return parsedDate.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+}
+
+</script>
+<template>
+ <div class="card p-3 shadow">
+  <div class="d-flex align-items-center">
+    <div class="ml-3 w-100">
+      <h4 class="mb-0 mt-0">{{ movie.title }}</h4>
+      <p class="small">({{ movie.movieLanguage }})</p>
+      <p class="small">Released on : {{ formatDate(movie.releaseDate) }}</p>
+    </div>
+  </div>
+
+  <!-- Director Section Below Language -->
+  <div class="row mt-3">
+    <div class="col">
+      <div class="row" v-if="findCrewMembers(movie, 'Director')">
+        <div class="col">
+          <CrewCard crew-title="Director" :crew-members="findCrewMembers(movie, 'Director')"/>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+</div>
+
+</template>
+
+<style scoped>
+  .small {
+    font-size: 12px;
+    font-style: italic;
+  }
+  .card {
+    width: 300px;
+    border: 10;
+    border-radius: 10px;
+    background-color: #fff;
+  }
+</style>
diff --git a/client/nt.webclient/vue3withtypescript/nt/src/pages/private/DashboardPage.vue b/client/nt.webclient/vue3withtypescript/nt/src/pages/private/DashboardPage.vue
index 9acebb43..9ac54df5 100644
--- a/client/nt.webclient/vue3withtypescript/nt/src/pages/private/DashboardPage.vue
+++ b/client/nt.webclient/vue3withtypescript/nt/src/pages/private/DashboardPage.vue
@@ -1,7 +1,68 @@
 <template>
-  <div>Updated Dashboard</div>
+<div class="container">
+    <div class="row justify-content-end">
+        <div class="col-4">
+            <div class="bg-light border p-2">
+              <div v-if="recentMovies && recentMovies.length > 0">
+                <ul class="movie-flex list-unstyled">
+                  <li
+                    v-for="(movie, index) in recentMovies"
+                    :key="index"
+                  >
+                    <MovieCardMini :movie="movie" />
+                  </li>
+                </ul>
+              </div>
+              <div v-else>
+                <i>No movies found !</i>
+              </div>
+            </div>
+        </div>
+    </div>
+</div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import { Movie } from '@/types/MovieTypes';
+  import MovieCardMini from "@/components/private/movie/MovieMiniCard.vue"
+  import { movieApiService } from '@/apiService/MovieApiService';
 
-<style></style>
+  const recentMovies = ref<Movie[]>([
+    {
+      title: 'Source Code',
+      movieLanguage: 'English',
+      releaseDate: new Date('2024-12-05'),
+      cast: [],
+      crew: [],
+    },
+  ]);
+
+  onMounted(async ()=>{
+    await LoadRecentMovies();
+  });
+
+  const LoadRecentMovies = async () =>{
+    const movies = await movieApiService.GetRecentMovies(10);
+    recentMovies.value = movies;
+  }
+
+  
+</script>
+
+<style scoped>
+.movie-flex {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 16px;
+  justify-content: flex-start;
+}
+
+.user-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  flex: 0 1 250px; /* Each card can shrink or grow but has a base width */
+}
+</style>
diff --git a/client/nt.webclient/vue3withtypescript/nt/src/types/apirequestresponsetypes/Movie.ts b/client/nt.webclient/vue3withtypescript/nt/src/types/apirequestresponsetypes/Movie.ts
index 55e722e1..1b44db26 100644
--- a/client/nt.webclient/vue3withtypescript/nt/src/types/apirequestresponsetypes/Movie.ts
+++ b/client/nt.webclient/vue3withtypescript/nt/src/types/apirequestresponsetypes/Movie.ts
@@ -5,6 +5,10 @@ export interface ISearchMoviesResponse extends IGraphQlResponseBase {
   
 }
 
+export interface IRecentMoviesResponse extends IGraphQlResponseBase{
+  recentMovies : MovieResponse[]
+}
+
 export interface MovieResponse {
   title: string;
   movieLanguage: string;