diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala index 7319966..23a8c34 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala @@ -81,9 +81,15 @@ // TODO: load user profile val userProfile = Var( UserProfile( - "Tom Cook", - "tom@example.com", - "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" + "tom", + UserInfo( + "Tom Cook", + "tom@example.com", + "+420 222 866 180", + None, + "ČMI Medical", + "ředitel" + ) ) ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala index 7319966..23a8c34 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala @@ -81,9 +81,15 @@ // TODO: load user profile val userProfile = Var( UserProfile( - "Tom Cook", - "tom@example.com", - "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" + "tom", + UserInfo( + "Tom Cook", + "tom@example.com", + "+420 222 866 180", + None, + "ČMI Medical", + "ředitel" + ) ) ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/UserProfile.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/UserProfile.scala index a518d8a..b71cc5e 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/UserProfile.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/UserProfile.scala @@ -1,3 +1,12 @@ package cz.e_bs.cmi.mdr.pdb.app -case class UserProfile(name: String, email: String, img: String) +case class UserInfo( + name: String, + email: String, + phone: String, + img: Option[String], + oi: String, + mainFunction: String +) + +case class UserProfile(username: String, userInfo: UserInfo) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala index 7319966..23a8c34 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala @@ -81,9 +81,15 @@ // TODO: load user profile val userProfile = Var( UserProfile( - "Tom Cook", - "tom@example.com", - "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" + "tom", + UserInfo( + "Tom Cook", + "tom@example.com", + "+420 222 866 180", + None, + "ČMI Medical", + "ředitel" + ) ) ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/UserProfile.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/UserProfile.scala index a518d8a..b71cc5e 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/UserProfile.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/UserProfile.scala @@ -1,3 +1,12 @@ package cz.e_bs.cmi.mdr.pdb.app -case class UserProfile(name: String, email: String, img: String) +case class UserInfo( + name: String, + email: String, + phone: String, + img: Option[String], + oi: String, + mainFunction: String +) + +case class UserProfile(username: String, userInfo: UserInfo) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/Icons.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/Icons.scala index d8f27a6..3e67d0d 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/Icons.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/Icons.scala @@ -7,6 +7,8 @@ import com.raquo.laminar.keys.ReactiveSvgAttr object Icons: + val defaultSize: Int = 6 + object aria: val hidden = customSvgAttr("aria-hidden", BooleanAsTrueFalseStringCodec) @@ -57,3 +59,21 @@ d := "M6 18L18 6M6 6l12 12" ) ) + + inline def user(size: Int = Icons.defaultSize) = + svg( + cls := s"w-${size} h-${size}", + fill := "none", + stroke := "currentColor", + viewBox := "0 0 24 24", + xmlns := "http://www.w3.org/2000/svg", + path( + strokeLineCap := "round", + strokeLineJoin := "round", + strokeWidth := "2", + d := "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" + ) + ) + + end outline +end Icons diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala index 7319966..23a8c34 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/Main.scala @@ -81,9 +81,15 @@ // TODO: load user profile val userProfile = Var( UserProfile( - "Tom Cook", - "tom@example.com", - "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" + "tom", + UserInfo( + "Tom Cook", + "tom@example.com", + "+420 222 866 180", + None, + "ČMI Medical", + "ředitel" + ) ) ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/UserProfile.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/UserProfile.scala index a518d8a..b71cc5e 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/UserProfile.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/UserProfile.scala @@ -1,3 +1,12 @@ package cz.e_bs.cmi.mdr.pdb.app -case class UserProfile(name: String, email: String, img: String) +case class UserInfo( + name: String, + email: String, + phone: String, + img: Option[String], + oi: String, + mainFunction: String +) + +case class UserProfile(username: String, userInfo: UserInfo) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/Icons.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/Icons.scala index d8f27a6..3e67d0d 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/Icons.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/Icons.scala @@ -7,6 +7,8 @@ import com.raquo.laminar.keys.ReactiveSvgAttr object Icons: + val defaultSize: Int = 6 + object aria: val hidden = customSvgAttr("aria-hidden", BooleanAsTrueFalseStringCodec) @@ -57,3 +59,21 @@ d := "M6 18L18 6M6 6l12 12" ) ) + + inline def user(size: Int = Icons.defaultSize) = + svg( + cls := s"w-${size} h-${size}", + fill := "none", + stroke := "currentColor", + viewBox := "0 0 24 24", + xmlns := "http://www.w3.org/2000/svg", + path( + strokeLineCap := "round", + strokeLineJoin := "round", + strokeWidth := "2", + d := "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" + ) + ) + + end outline +end Icons diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/Navigation.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/Navigation.scala index 29b0e90..32f62a7 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/Navigation.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/Navigation.scala @@ -73,11 +73,19 @@ ) private inline def avatar(size: Int = 8) = - img( - cls := s"w-$size h-$size rounded-full", - src <-- profile.map(_.img), - alt := "" - ) + profile.map(_.userInfo.img match { + case Some(url) => + img( + cls := s"w-$size h-$size rounded-full", + src := url, + alt := "" + ) + case None => + div( + cls := s"rounded-full text-indigo-200 bg-indigo-500 h-${size} w-${size} flex items-center justify-center", + Icons.outline.user(size - 2) + ) + }) private def userProfile: HtmlElement = val menuOpen = Var(false) @@ -102,7 +110,7 @@ aria.expanded <-- menuOpen.signal, aria.hasPopup := true, span(cls := "sr-only", "Open user menu"), - avatar(), + child <-- avatar(), onClick.preventDefault.mapTo( !menuOpen.now() ) --> menuOpen.writer @@ -146,17 +154,17 @@ cls := "flex items-center px-5", div( cls := "flex-shrink-0", - avatar(10) + child <-- avatar(10) ), div( cls := "ml-3", div( cls := "text-base font-medium text-white", - child.text <-- profile.map(_.name) + child.text <-- profile.map(_.userInfo.name) ), div( cls := "text-sm font-medium text-indigo-300", - child.text <-- profile.map(_.email) + child.text <-- profile.map(_.userInfo.email) ) ), notificationButton.amend(cls := List("flex-shrink-0", "ml-auto"))