Added css for songpage components

Reviewed-on: LibreTunes/LibreTunes#165
Reviewed-by: Ethan Girouard <ethan@girouard.com>

migrations/2024-12-10-221544_add_playlist_track/down.sql

@@ -1 +0,0 @@
-ALTER TABLE playlist_songs DROP COLUMN track;

migrations/2024-12-10-221544_add_playlist_track/up.sql

@@ -1 +0,0 @@
-ALTER TABLE playlist_songs ADD COLUMN track INTEGER DEFAULT 1 NOT NULL;

src/api/mod.rs

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

src/api/playlist.rs

@@ -1,22 +0,0 @@
-use leptos::*;
-use crate::playlistdata::PlaylistData;
-use crate::songdata::SongData;
-
-use cfg_if::cfg_if;
-
-cfg_if! {
-	if #[cfg(feature = "ssr")] {
-		use leptos::server_fn::error::NoCustomError;
-		use crate::database::get_db_conn;
-	}
-}
-
-#[server(endpoint = "playlist/get")]
-pub async fn get_playlist(id: i32) -> Result<PlaylistData, ServerFnError> {
-    use crate::models::Playlist;
-    let db_con = &mut get_db_conn();
-    let playlist = Playlist::get_playlist_data(id,db_con)
-        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting playlist: {}", e)))?;
-    Ok(playlist)
-}
-

src/app.rs

@@ -8,7 +8,6 @@ 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;
 
@@ -47,7 +46,6 @@ 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,7 +4,6 @@ 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,7 +10,6 @@ cfg_if! {
 		use std::error::Error;
 		use crate::songdata::SongData;
 		use crate::albumdata::AlbumData;
-		use crate::playlistdata::PlaylistData;
 	}
 }
 
@@ -543,24 +542,14 @@ impl Album {
 	pub fn get_album_data(album_id: i32, conn: &mut PgPooledConn) -> Result<AlbumData, Box<dyn Error>> {
 		use crate::schema::*;
 
-		let album: Vec<(Album, std::option::Option<Artist>)> = albums::table
+		let artist_list: Vec<Artist> = album_artists::table
-			.find(album_id)
+			.filter(album_artists::album_id.eq(album_id))
-			.left_join(songs::table.on(albums::id.nullable().eq(songs::album_id)))
+			.inner_join(artists::table.on(album_artists::artist_id.eq(artists::id)))
-			.left_join(song_artists::table.inner_join(artists::table).on(songs::id.eq(song_artists::song_id)))
+			.select(
-			.select((
+				artists::all_columns
-				albums::all_columns,
+			)
-				artists::all_columns.nullable()
-			))
-			.distinct()
 			.load(conn)?;
 
-		let mut artist_list: Vec<Artist> = Vec::new();
-
-		for (_, artist) in album {
-			if let Some(artist) = artist {
-				artist_list.push(artist);
-			}
-		}
 		// Get info of album
 		let albuminfo = albums::table
 			.filter(albums::id.eq(album_id))
@@ -672,7 +661,7 @@ impl Album {
 		
 		// Sort the songs by date
 		let mut songdata: Vec<SongData> = album_songs.into_values().collect();
-		songdata.sort_by(|a, b| b.track.cmp(&a.track));
+		songdata.sort_by(|a, b| a.track.cmp(&b.track));
 		Ok(songdata)
 	}
 }
@@ -796,44 +785,3 @@ 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,4 +2,3 @@ pub mod login;
 pub mod signup;
 pub mod profile;
 pub mod albumpage;
-pub mod playlistpage;

src/pages/playlistpage.rs

@@ -1,58 +0,0 @@
-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/pages/songpage.rs

@@ -0,0 +1,92 @@
+use leptos::*;
+use leptos_router::use_params_map;
+use leptos_icons::*;
+use server_fn::error::NoCustomError;
+
+use crate::components::loading::*;
+use crate::components::error::*;
+use crate::api::song::*;
+use crate::models::Song;
+use crate::songs::get_song_by_id;
+
+#[component]
+pub fn SongPage() -> impl IntoView {
+    let params = use_params_map();
+
+    view! {
+        <div class="song-container home-component">
+            {move || params.with(|params| {
+                match params.get("id").map(|id| id.parse::<i32>()) {
+                    Some(Ok(id)) => {
+                        view! { <SongDetails id /> }.into_view()
+                    },
+                    Some(Err(e)) => {
+                        view! {
+                            <Error<String>
+                                title="Invalid Song ID"
+                                error=e.to_string()
+                            />
+                        }.into_view()
+                    },
+                    None => {
+                        view! {
+                            <Error<String>
+                                title="No Song ID"
+                                message="You must specify a song ID to view its page."
+                            />
+                        }.into_view()
+                    }
+                }
+            })}
+        </div>
+    }
+}
+
+#[component]
+fn SongDetails(#[prop(into)] id: MaybeSignal<i32>) -> impl IntoView {
+    let song_info = create_resource(move || id.get(), move |id| {
+        get_song_by_id(id)
+    });
+
+    view! {
+        <Transition
+            fallback=move || view! { <LoadingPage /> }
+        >
+            {move || song_info.get().map(|song| {
+                match song {
+                    Ok(Some(song)) => {
+                        view! { <SongOverview song /> }.into_view()
+                    },
+                    Ok(None) => {
+                        view! {
+                            <Error<String>
+                                title="Song Not Found"
+                                message=format!("Song with ID {} not found", id.get())
+                            />
+                        }.into_view()
+                    },
+                    Err(error) => {
+                        view! {
+                            <ServerError<NoCustomError>
+                                title="Error Fetching Song"
+                                error
+                            />
+                        }.into_view()
+                    }
+                }
+            })}
+        </Transition>
+    }
+}
+
+#[component]
+fn SongOverview(song: Song) -> impl IntoView {
+    view! {
+        <div class="song-header">
+            <h1>{song.title}</h1>
+            <p>{format!("Artist: {}", song.artist)}</p>
+            <p>{format!("Album: {}", song.album.unwrap_or_else(|| "Unknown".to_string()))}</p>
+            <p>{format!("Duration: {}", song.duration)}</p>
+        </div>
+    }
+}

src/playlistdata.rs

@@ -1,43 +0,0 @@
-use crate::components::dashboard_tile::DashboardTile;
-use crate::models::User;
-use serde::{Serialize, Deserialize};
-
-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,
-    /// Playlist title
-    pub title: String,
-    /// Playlist owner
-    pub owner: User,
-    /// 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,
-}
-
-impl DashboardTile for PlaylistData {
-    fn image_path(&self) -> String {
-        self.image_path.clone()
-    }
-
-    fn title(&self) -> String {
-        self.title.clone()
-    }
-
-    fn link(&self) -> String {
-        format!("/playlist/{}", self.id)
-    }
-
-    fn description(&self) -> Option<String> {
-        Some(format!("Playlist by {}", self.owner.username))
-    }
-}

style/songpage.scss

@@ -0,0 +1,13 @@
+.song-container {
+    .song-header {
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 0.5rem;
+        }
+
+        p {
+            font-size: 1.2rem;
+            margin: 0.2rem 0;
+        }
+    }
+}