Setup Basic Playlist page with PlaylistData

src/api/mod.rs

@@ -2,3 +2,4 @@ pub mod history;
 pub mod profile;
 pub mod songs;
 pub mod album;
+pub mod playlist;

src/api/playlist.rs

@@ -1,7 +1,6 @@
 use leptos::*;
 use crate::playlistdata::PlaylistData;
 use crate::songdata::SongData;
-use log::*;
 
 use cfg_if::cfg_if;
 

src/app.rs

@@ -8,6 +8,7 @@ use crate::pages::login::*;
 use crate::pages::signup::*;
 use crate::pages::profile::*;
 use crate::pages::albumpage::*;
+use crate::pages::playlistpage::*;
 use crate::error_template::{AppError, ErrorTemplate};
 use crate::util::state::GlobalState;
 
@@ -46,6 +47,7 @@ pub fn App() -> impl IntoView {
                         <Route path="user/:id" view=Profile />
                         <Route path="user" view=Profile />
                         <Route path="album/:id" view=AlbumPage />
+                        <Route path="playlist/:id" view=PlaylistPage />
                     </Route>
                     <Route path="/login" view=Login />
                     <Route path="/signup" view=Signup />

src/lib.rs

@@ -4,6 +4,7 @@ pub mod songdata;
 pub mod albumdata;
 pub mod artistdata;
 pub mod playstatus;
+pub mod playlistdata;
 pub mod playbar;
 pub mod database;
 pub mod queue;

src/models.rs

@@ -10,6 +10,7 @@ cfg_if! {
 		use std::error::Error;
 		use crate::songdata::SongData;
 		use crate::albumdata::AlbumData;
+		use crate::playlistdata::PlaylistData;
 	}
 }
 
@@ -795,3 +796,44 @@ pub struct Playlist {
 	/// The name of the playlist
 	pub name: String,
 }
+
+impl Playlist {
+	/// Obtain a playlist from its playlistid
+	/// # Arguments
+	/// 
+	/// * `playlist_id` - The id of the playlist to select
+	/// * `conn` - A mutable reference to a database connection
+	/// 
+	/// # Returns
+	/// 
+	/// * `Result<Playlist, Box<dyn Error>>` - A result indicating success with the desired playlist, or an error
+	///
+	#[cfg(feature = "ssr")]
+	pub fn get_playlist_data(playlist_id: i32, conn: &mut PgPooledConn) -> Result<PlaylistData, Box<dyn Error>> {
+		use crate::schema::*;
+
+		let playlist: (Playlist, User) = playlists::table
+			.find(playlist_id)
+			.inner_join(users::table.on(playlists::owner_id.eq(users::id)))
+			.select((playlists::all_columns, users::all_columns))
+			.first(conn)?;
+
+		let playlistdata = PlaylistData {
+			id: playlist.0.id.unwrap(),
+			title: playlist.0.name,
+			owner: User {
+				id: playlist.1.id,
+				username: playlist.1.username,
+				email: playlist.1.email,
+				password: None,
+				created_at: playlist.1.created_at,
+				admin: playlist.1.admin,
+			},
+			created_at: playlist.0.created_at.unwrap(),
+			updated_at: playlist.0.updated_at.unwrap(),
+			image_path: "/assets/images/placeholders/MusicPlaceholder.svg".to_string(),
+		};
+
+		Ok(playlistdata)
+	}
+}

src/pages.rs

@@ -2,3 +2,4 @@ pub mod login;
 pub mod signup;
 pub mod profile;
 pub mod albumpage;
+pub mod playlistpage;

src/pages/playlistpage.rs

@@ -0,0 +1,58 @@
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_router::*;
+use crate::components::song_list::*;
+use crate::api::playlist::*;
+
+
+#[derive(Params, PartialEq)]
+struct PlaylistParams {
+    id: i32
+}
+
+#[component]
+pub fn PlaylistPage() -> impl IntoView {
+    let params = use_params::<PlaylistParams>();
+
+    let id = move || {params.with(|params| {
+            params.as_ref()
+                .map(|params| params.id)
+                .map_err(|e| e.clone())
+        })
+    };
+
+    let playlist_data = create_resource(
+        id,
+        |value| async move {
+            match value {
+                Ok(v) => {get_playlist(v).await},
+                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
+            }
+        }
+    );
+
+    view! {
+        <div class="album-page-container">
+            <div class="album-header">
+                <Suspense
+                    fallback=move || view! { <p class="loading">"Loading..."</p> }
+                >
+                    {move || {
+                        playlist_data.with( |playlist_data| {
+                            match playlist_data {
+                                Some(Ok(s)) => {
+                                    view! { <h1>{(*s).clone().title}</h1> }
+                                },
+                                Some(Err(e)) => {
+                                    view! { <div class="error">{format!("Error loading playlist : {}",e)}</div> }.into_view()
+                                },
+                                None => {view! { }.into_view()}
+                            }
+                        })
+                    }}
+                </Suspense>
+            </div>
+        </div>
+    }
+}
+

src/playlistdata.rs

@@ -1,11 +1,13 @@
-use crate::models::User;
 use crate::components::dashboard_tile::DashboardTile;
+use crate::models::User;
+use serde::{Serialize, Deserialize};
 
-use chrono::NaiveDate;
+use chrono::NaiveDateTime;
 
 /// Holds information about a playlist
 ///
 /// Intended to be used in the front-end
+#[derive(Serialize, Deserialize, Clone)]
 pub struct PlaylistData {
     /// Playlist id
     pub id: i32,
@@ -13,8 +15,10 @@ pub struct PlaylistData {
     pub title: String,
     /// Playlist owner
     pub owner: User,
-    /// Playlist creation date
-    pub creation_date: NaiveDate,
+    /// Playlist creation time
+    pub created_at: NaiveDateTime,
+    /// Playlist update time3
+    pub updated_at: NaiveDateTime,
     /// Path to playlist image, relative to the root of the web server.
     /// For example, `"/assets/images/Playlist.jpg"`
     pub image_path: String,
@@ -34,6 +38,6 @@ impl DashboardTile for PlaylistData {
     }
 
     fn description(&self) -> Option<String> {
-        Some(format!("Playlist by {}", self.owner.display_name()))
+        Some(format!("Playlist by {}", self.owner.username))
     }
 }