Add Card Header Menu

.gitignore

@@ -33,3 +33,5 @@ npm-debug.log
 # this depending on your deployment strategy.
 /priv/static/
 /priv/cldr/
+
+.DS_Store

.misc/docker/dev/docker-compose.yml

@@ -1,19 +1,6 @@
 version: '3.8'
 
 services:
-  health_board:
-    image: pydemic/health_board:dev
-    container_name: health_board
-    volumes:
-      - ../../..:/app
-    ports:
-      - 4000:4000
-      - 4001:4001
-    networks:
-      - network
-    depends_on:
-      - postgres
-
   postgres:
     image: postgres:13.0
     command: >
@@ -27,15 +14,10 @@ services:
       POSTGRES_USER: health_board
       POSTGRES_PASSWORD: health_board
     volumes:
+      - ../../data:/Users/laercios/Projects/OPAS/health_board/.misc/data/
       - postgres:/var/lib/postgresql/data
     ports:
       - 5432:5432
-    networks:
-      - network
-
-networks:
-  network:
-    name: health_board
 
 volumes:
   postgres:

assets/css/app.scss

@@ -17,14 +17,24 @@ $disabled: #777;
     border-bottom-width: 3px;
   }
 
-  &.hb-border-success { border-color: $success; }
-  &.hb-border-warning { border-color: $warning; }
-  &.hb-border-danger { border-color: $danger; }
-  &.hb-border-disabled { border-color: $disabled; }
+  &.hb-border-success {
+    border-color: $success;
+  }
+  &.hb-border-warning {
+    border-color: $warning;
+  }
+  &.hb-border-danger {
+    border-color: $danger;
+  }
+  &.hb-border-disabled {
+    border-color: $disabled;
+  }
 }
 
-.hb-title-link, .hb-title-link:link, .hb-title-link:hover {
-  color:inherit;
+.hb-title-link,
+.hb-title-link:link,
+.hb-title-link:hover {
+  color: inherit;
 }
 
 .hb-map {
@@ -48,7 +58,7 @@ i.hb-right {
 }
 
 .hb-root-navbar {
-  background-color: #1D3A87;
+  background-color: #1d3a87;
 }
 
 .hb-page-navbar {
@@ -75,8 +85,8 @@ i.hb-right {
 .hb-map-info {
   padding: 6px 8px;
   background: white;
-  background: rgba(255,255,255,0.8);
-  box-shadow: 0 0 15px rgba(0,0,0,0.2);
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
 
   &.h5 {
@@ -158,3 +168,11 @@ i.hb-right {
 .hb-table-quartile-4 {
   background-color: #e47f7f;
 }
+
+.show-when-not-hover {
+  display: block;
+}
+
+.show-when-not-hover-container:hover .show-when-not-hover {
+  display: none;
+}

assets/js/app.js

@@ -44,3 +44,4 @@ window.addEventListener("phx:page-loading-stop", info => NProgress.done())
 liveSocket.connect()
 
 window.liveSocket = liveSocket
+

assets/yarn.lock

@@ -3680,11 +3680,6 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-mathjax@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/mathjax/-/mathjax-3.1.2.tgz#95c0d45ce2330ef7b6a815cebe7d61ecc26bbabd"
-  integrity sha512-BojKspBv4nNWzO1wC6VEI+g9gHDOhkaGHGgLxXkasdU4pwjdO5AXD5M/wcLPkXYPjZ/N+6sU8rjQTlyvN2cWiQ==
-
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -4380,13 +4375,13 @@ performance-now@^2.1.0:
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
 "phoenix@file:../deps/phoenix":
-  version "1.5.6"
+  version "1.5.7"
 
 "phoenix_html@file:../deps/phoenix_html":
   version "2.14.2"
 
 "phoenix_live_view@file:../deps/phoenix_live_view":
-  version "0.14.7"
+  version "0.15.0"
 
 picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
   version "2.2.2"

lib/health_board/contexts/managers/info/dashboards.ex

@@ -28,7 +28,7 @@ defmodule HealthBoard.Contexts.Info.Dashboards do
               card: [
                 indicator: [
                   [children: :child],
-                  :sources
+                  [sources: :source]
                 ]
               ]
             ],

lib/health_board_web/live/components/card/card_header_menu.ex

@@ -0,0 +1,32 @@
+defmodule HealthBoardWeb.LiveComponents.CardHeaderMenu do
+  use Surface.Component, slot: "header"
+
+  alias Phoenix.LiveView
+
+  alias HealthBoardWeb.LiveComponents.Modal
+
+  @doc "The card title"
+  prop title, :string
+
+  @doc "A link"
+  prop link, :string
+
+  @doc "The card header border color"
+  prop border_color, :atom, values: [:success, :warning, :danger, :disabled]
+
+  @spec render(map()) :: LiveView.Rendered.t()
+  def render(assigns) do
+    ~H"""
+    <div class={{ "uk-card-header", "uk-visible-toggle", "show-when-not-hover-container", "uk-transition-toggle", "hb-border": @border_color, "hb-border-bottom": @border_color, "hb-border-#{@border_color}": @border_color }}>
+      <h3 class={{"uk-card-title"}}>
+        <a :if={{ @link }} class={{ "hb-title-link", "show-when-not-hover" }} href={{ @link}}>{{ @title }}</a>
+        <span :if={{ is_nil(@link) }}>{{ @title }}</span>
+      </h3>
+      <div class={{ "uk-hidden-hover", "uk-transition-slide-top" }}>
+        <p>Menu</p>
+        <a href="#offcanvas" uk-toggle>Open</a>
+      </div>
+    </div>
+    """
+  end
+end

lib/health_board_web/live/components/offcanvas.ex

@@ -0,0 +1,22 @@
+defmodule HealthBoardWeb.LiveComponents.Offcanvas do
+  use Surface.Component
+
+  alias Phoenix.LiveView
+
+  @spec render(map()) :: LiveView.Rendered.t()
+  def render(assigns) do
+    ~H"""
+    <div id={{"offcanvas"}} uk-offcanvas>
+    <div class={{"uk-offcanvas-bar"}}>
+
+        <button class={{"uk-offcanvas-close"}} type="button"> X </button>
+
+        <h3>Title</h3>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+      </div>
+    </div>
+    """
+  end
+end

lib/health_board_web/live/live_views/dashboard_live.ex

@@ -3,6 +3,8 @@ defmodule HealthBoardWeb.DashboardLive do
 
   alias HealthBoard.Contexts.Info
 
+  alias HealthBoardWeb.LiveComponents.Offcanvas
+
   alias HealthBoardWeb.DashboardLive.Fragments.{
     AnalyticDashboard,
     DemographicDashboard,

lib/health_board_web/live/live_views/dashboard_live.sface

@@ -14,3 +14,6 @@
 />
 
 <NoDashboard :if={{ not Map.has_key?(assigns, :dashboard) }} />
+
+
+<Offcanvas :if={{ Map.has_key?(assigns, :modal_id) or true }}/>

lib/health_board_web/live/live_views/dashboard_live/fragments/analytic_dashboard/incidence_card.ex

@@ -1,7 +1,7 @@
 defmodule HealthBoardWeb.DashboardLive.Fragments.AnalyticDashboard.IncidenceCard do
   use Surface.Component
 
-  alias HealthBoardWeb.LiveComponents.Card
+  alias HealthBoardWeb.LiveComponents.{Card, CardHeaderMenu, CardHeaderTitle}
   alias Phoenix.LiveView
 
   alias HealthBoardWeb.Helpers.Humanize
@@ -11,7 +11,10 @@ defmodule HealthBoardWeb.DashboardLive.Fragments.AnalyticDashboard.IncidenceCard
   @spec render(map()) :: LiveView.Rendered.t()
   def render(assigns) do
     ~H"""
-    <Card :if={{ Enum.any?(@card.data) }} title={{ @card.name }} link={{ @card.link }} border_color={{ @card.data[:color] }}>
+    <Card :if={{ Enum.any?(@card.data) }} border_color={{ @card.data[:color] }}>
+      <template slot="header">
+        <CardHeaderMenu title={{ @card.name }} link={{ @card.link }} border_color={{ @card.data[:color] }}/>
+      </template>
       <template slot="body">
         <div class="uk-card-body">
           <h2>{{ Humanize.number @card.data.morbidity.total }}</h2>

lib/health_board_web/live/live_views/dashboard_live/fragments/analytic_dashboard/summary.ex

@@ -12,7 +12,6 @@ defmodule HealthBoardWeb.DashboardLive.Fragments.AnalyticDashboard.Summary do
     ~H"""
     <Section>
       <SubSectionHeader title={{ @section.name }} description={{ @section.description }} />
-
       <Grid>
         <IncidenceCard
           :for={{ card <- Enum.sort(Map.values(@section.cards), &(&1.name <= &2.name)) }}