postgresml · levkk · Feb 16, 2024
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;">