Add support for adding profile picture

levkk · levkk · commit 01e01d561931 · 2024-02-16T14:01:25.000-08:00
diff --git a/pgml-dashboard/src/components/navigation/navbar/web_app/mod.rs b/pgml-dashboard/src/components/navigation/navbar/web_app/mod.rs
@@ -1,4 +1,5 @@
 use crate::components::{StaticNav, StaticNavLink};
+use crate::models::User;
 use crate::utils::config;
 use pgml_components::component;
 use sailfish::TemplateOnce;
@@ -9,14 +10,16 @@ pub struct WebApp {
     pub standalone_dashboard: bool,
     pub links: Vec<StaticNavLink>,
     pub account_management_nav: StaticNav,
+    pub user: User,
 }
 
 impl WebApp {
-    pub fn new(links: Vec<StaticNavLink>, account_management_nav: StaticNav) -> WebApp {
+    pub fn new(links: Vec<StaticNavLink>, account_management_nav: StaticNav, user: User) -> WebApp {
         WebApp {
             standalone_dashboard: config::standalone_dashboard(),
             links,
             account_management_nav,
+            user,
         }
     }
 }
diff --git a/pgml-dashboard/src/components/navigation/navbar/web_app/template.html b/pgml-dashboard/src/components/navigation/navbar/web_app/template.html
@@ -21,7 +21,7 @@
   
         <!-- Button to toggle collapsed menu for less than lg screens -->
         <button class="navbar-toggler collapsed topnav-controlls" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <%+ ProfileIcon::new() %>
+          <%+ ProfileIcon::new(user.profile_picture.clone()) %>
         </button>
       </div>
 
@@ -63,7 +63,7 @@
             <li class="d-none d-lg-flex nav-item align-items-center">
               <%+
                   Dropdown::nav(account_management_nav.links.clone())
-                    .icon(ProfileIcon::new().into())
+                    .icon(ProfileIcon::new(user.profile_picture.clone()).into())
                     .expandable()
                 %>
             </li>
diff --git a/pgml-dashboard/src/components/profile_icon/mod.rs b/pgml-dashboard/src/components/profile_icon/mod.rs
@@ -3,11 +3,13 @@ use sailfish::TemplateOnce;
 
 #[derive(TemplateOnce, Default)]
 #[template(path = "profile_icon/template.html")]
-pub struct ProfileIcon;
+pub struct ProfileIcon {
+    pub profile_picture: Option<String>,
+}
 
 impl ProfileIcon {
-    pub fn new() -> ProfileIcon {
-        ProfileIcon
+    pub fn new(profile_picture: Option<String>) -> ProfileIcon {
+        ProfileIcon { profile_picture }
     }
 }
 
diff --git a/pgml-dashboard/src/components/profile_icon/template.html b/pgml-dashboard/src/components/profile_icon/template.html
@@ -1,3 +1,9 @@
+<% if let Some(profile_picture) = profile_picture { %>
+<img src="<%- profile_picture %>" width="44" height="44" class="rounded-circle">
+<% } else { %>
+
 <svg class="rounded-circle" width="44" height="44" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M5 20V19C5 16.2386 7.23858 14 10 14H14C16.7614 14 19 16.2386 19 19V20M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
+
+<% } %>
diff --git a/pgml-dashboard/src/models.rs b/pgml-dashboard/src/models.rs
@@ -961,13 +961,15 @@ impl UploadedFile {
 pub struct User {
     pub id: i64,
     pub email: String,
+    pub profile_picture: Option<String>,
 }
 
 impl Default for User {
     fn default() -> User {
         User {
             id: -1,
             email: "".to_string(),
+            profile_picture: None,
         }
     }
 }
diff --git a/pgml-dashboard/src/templates/mod.rs b/pgml-dashboard/src/templates/mod.rs
@@ -127,6 +127,7 @@ pub struct WebAppBase<'a> {
     pub upper_left_nav: StaticNav,
     pub lower_left_nav: StaticNav,
     pub body_components: Vec<Component>,
+    pub user: models::User,
 }
 
 impl<'a> WebAppBase<'a> {
@@ -139,6 +140,7 @@ impl<'a> WebAppBase<'a> {
             account_management_nav: context.account_management_nav.clone(),
             upper_left_nav: context.upper_left_nav.clone(),
             lower_left_nav: context.lower_left_nav.clone(),
+            user: context.user.clone(),
             ..Default::default()
         }
     }
diff --git a/pgml-dashboard/static/css/scss/components/_icon.scss b/pgml-dashboard/static/css/scss/components/_icon.scss
@@ -110,13 +110,13 @@
             color: #{$neon-tint-100};
         }
 
-        svg {
+        svg,img {
             border-color: #{$neon-tint-100};
         }
 
     }
 
-    svg {
+    svg,img {
         border: 2px solid #{$gray-700};
         background-color: #{$gray-500};
     }
diff --git a/pgml-dashboard/templates/content/playground.html b/pgml-dashboard/templates/content/playground.html
@@ -19,7 +19,7 @@ <h3 class="h3">icons</h3>
     <%+ GithubIcon::new() %>
   </div>
   <div class="mb-3">
-    <%+ ProfileIcon %>
+    <%+ ProfileIcon::new(None) %>
   </div>
 
   <h3 class="h3">Dropdowns</h3>
@@ -33,7 +33,7 @@ <h3 class="h3">Dropdowns</h3>
             StaticNavLink::new("Starts Active".into(), "#test".into()).active(true)
           ]
         ).collapsable()
-        .icon(ProfileIcon::new().into()) %>
+        .icon(ProfileIcon::new(None).into()) %>
       </div>
       <div class="col-6" style="min-height: 400px;">
         <%+ Dropdown::nav(
diff --git a/pgml-dashboard/templates/layout/web_app_base.html b/pgml-dashboard/templates/layout/web_app_base.html
@@ -24,14 +24,14 @@
         <main>
             <div class="container-fluid p-0 min-vh-lg-100">
                 <div class="row gx-0 min-vh-lg-100 gy-0">
-                    <%+ WebAppNavbar::new(left_nav_links, account_management_nav) %>
+                    <%+ WebAppNavbar::new(left_nav_links, account_management_nav, user) %>
 
                     <div class="d-flex">
-                        <%+ WebAppLeftNav::new( upper_left_nav, lower_left_nav, dropdown_nav ) %>
+                        <%+ WebAppLeftNav::new(upper_left_nav, lower_left_nav, dropdown_nav) %>
     
                         <div class="clear-from-under-navbar flex-grow-1 min-vw-0">
                             <div class="px-4 px-sm-5 py-3" style="position: absolute">
-                                <%- Breadcrumbs::render( breadcrumbs ) %>
+                                <%- Breadcrumbs::render(breadcrumbs) %>
                             </div>
 
                             <div class="px-xs-2 px-md-5 overflow-hidden" style="padding-top: 57px;">

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`use crate::components::{StaticNav, StaticNavLink};`
	`2`	`+use crate::models::User;`
`2`	`3`	`use crate::utils::config;`
`3`	`4`	`use pgml_components::component;`
`4`	`5`	`use sailfish::TemplateOnce;`
`@@ -9,14 +10,16 @@ pub struct WebApp {`
`9`	`10`	`pub standalone_dashboard: bool,`
`10`	`11`	`pub links: Vec<StaticNavLink>,`
`11`	`12`	`pub account_management_nav: StaticNav,`
	`13`	`+ pub user: User,`
`12`	`14`	`}`
`13`	`15`
`14`	`16`	`impl WebApp {`
`15`		`- pub fn new(links: Vec<StaticNavLink>, account_management_nav: StaticNav) -> WebApp {`
	`17`	`+ pub fn new(links: Vec<StaticNavLink>, account_management_nav: StaticNav, user: User) -> WebApp {`
`16`	`18`	`WebApp {`
`17`	`19`	`standalone_dashboard: config::standalone_dashboard(),`
`18`	`20`	`links,`
`19`	`21`	`account_management_nav,`
	`22`	`+ user,`
`20`	`23`	`}`
`21`	`24`	`}`
`22`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,11 +3,13 @@ use sailfish::TemplateOnce;`
`3`	`3`
`4`	`4`	`#[derive(TemplateOnce, Default)]`
`5`	`5`	`#[template(path = "profile_icon/template.html")]`
`6`		`-pub struct ProfileIcon;`
	`6`	`+pub struct ProfileIcon {`
	`7`	`+ pub profile_picture: Option<String>,`
	`8`	`+}`
`7`	`9`
`8`	`10`	`impl ProfileIcon {`
`9`		`- pub fn new() -> ProfileIcon {`
`10`		`- ProfileIcon`
	`11`	`+ pub fn new(profile_picture: Option<String>) -> ProfileIcon {`
	`12`	`+ ProfileIcon { profile_picture }`
`11`	`13`	`}`
`12`	`14`	`}`
`13`	`15`
Original file line number	Diff line number	Diff line change
`@@ -961,13 +961,15 @@ impl UploadedFile {`
`961`	`961`	`pub struct User {`
`962`	`962`	`pub id: i64,`
`963`	`963`	`pub email: String,`
	`964`	`+ pub profile_picture: Option<String>,`
`964`	`965`	`}`
`965`	`966`
`966`	`967`	`impl Default for User {`
`967`	`968`	`fn default() -> User {`
`968`	`969`	`User {`
`969`	`970`	`id: -1,`
`970`	`971`	`email: "".to_string(),`
	`972`	`+ profile_picture: None,`
`971`	`973`	`}`
`972`	`974`	`}`
`973`	`975`	`}`
Original file line number	Diff line number	Diff line change
`@@ -127,6 +127,7 @@ pub struct WebAppBase<'a> {`
`127`	`127`	`pub upper_left_nav: StaticNav,`
`128`	`128`	`pub lower_left_nav: StaticNav,`
`129`	`129`	`pub body_components: Vec<Component>,`
	`130`	`+ pub user: models::User,`
`130`	`131`	`}`
`131`	`132`
`132`	`133`	`impl<'a> WebAppBase<'a> {`
`@@ -139,6 +140,7 @@ impl<'a> WebAppBase<'a> {`
`139`	`140`	`account_management_nav: context.account_management_nav.clone(),`
`140`	`141`	`upper_left_nav: context.upper_left_nav.clone(),`
`141`	`142`	`lower_left_nav: context.lower_left_nav.clone(),`
	`143`	`+ user: context.user.clone(),`
`142`	`144`	`..Default::default()`
`143`	`145`	`}`
`144`	`146`	`}`
Original file line number	Diff line number	Diff line change
`@@ -110,13 +110,13 @@`
`110`	`110`	`color: #{$neon-tint-100};`
`111`	`111`	`}`
`112`	`112`
`113`		`- svg {`
	`113`	`+ svg,img {`
`114`	`114`	`border-color: #{$neon-tint-100};`
`115`	`115`	`}`
`116`	`116`
`117`	`117`	`}`
`118`	`118`
`119`		`- svg {`
	`119`	`+ svg,img {`
`120`	`120`	`border: 2px solid #{$gray-700};`
`121`	`121`	`background-color: #{$gray-500};`
`122`	`122`	`}`