Add some icons

dmitry-sidorov · Jan 7, 2025 · bcbcba4 · bcbcba4
1 parent d9ce2c5
commit bcbcba4
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 9 deletions.
diff --git a/lib/budget_tracker_web.ex b/lib/budget_tracker_web.ex
@@ -97,7 +97,11 @@ defmodule BudgetTrackerWeb do
           show_modal: 1,
           show_modal: 2,
           delete_icon: 1,
-          edit_icon: 1
+          edit_icon: 1,
+          card_icon: 1,
+          money_icon: 1,
+          deposit_icon: 1,
+          savings_icon: 1
         ]
 
       import BudgetTrackerWeb.Gettext

diff --git a/lib/budget_tracker_web/components/core_components.ex b/lib/budget_tracker_web/components/core_components.ex
@@ -687,6 +687,25 @@ defmodule BudgetTrackerWeb.CoreComponents do
     for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
   end
 
+  attr :variant, :atom, required: true
+
+  def svg_icon(assigns) do
+    # case
+  end
+
+  defp svg_icon_path(variant) do
+    case variant do
+      :delete ->
+        "M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"
+
+      :edit ->
+        "M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"
+
+      :card ->
+        "M880-720v480q0 33-23.5 56.5T800-160H160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720Zm-720 80h640v-80H160v80Zm0 160v240h640v-240H160Zm0 240v-480 480Z"
+    end
+  end
+
   def delete_icon(assigns) do
     ~H"""
     <svg
@@ -714,4 +733,60 @@ defmodule BudgetTrackerWeb.CoreComponents do
     </svg>
     """
   end
+
+  def card_icon(assigns) do
+    ~H"""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="#5f6368"
+    >
+      <path d="M880-720v480q0 33-23.5 56.5T800-160H160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720Zm-720 80h640v-80H160v80Zm0 160v240h640v-240H160Zm0 240v-480 480Z" />
+    </svg>
+    """
+  end
+
+  def money_icon(assigns) do
+    ~H"""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="#5f6368"
+    >
+      <path d="M560-440q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35ZM280-320q-33 0-56.5-23.5T200-400v-320q0-33 23.5-56.5T280-800h560q33 0 56.5 23.5T920-720v320q0 33-23.5 56.5T840-320H280Zm80-80h400q0-33 23.5-56.5T840-480v-160q-33 0-56.5-23.5T760-720H360q0 33-23.5 56.5T280-640v160q33 0 56.5 23.5T360-400Zm440 240H120q-33 0-56.5-23.5T40-240v-440h80v440h680v80ZM280-400v-320 320Z" />
+    </svg>
+    """
+  end
+
+  def deposit_icon(assigns) do
+    ~H"""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="#5f6368"
+    >
+      <path d="M200-280v-280h80v280h-80Zm240 0v-280h80v280h-80ZM80-120v-80h800v80H80Zm600-160v-280h80v280h-80ZM80-640v-80l400-200 400 200v80H80Zm178-80h444-444Zm0 0h444L480-830 258-720Z" />
+    </svg>
+    """
+  end
+
+  def savings_icon(assigns) do
+    ~H"""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="#5f6368"
+    >
+      <path d="M640-520q17 0 28.5-11.5T680-560q0-17-11.5-28.5T640-600q-17 0-28.5 11.5T600-560q0 17 11.5 28.5T640-520Zm-320-80h200v-80H320v80ZM180-120q-34-114-67-227.5T80-580q0-92 64-156t156-64h200q29-38 70.5-59t89.5-21q25 0 42.5 17.5T720-820q0 6-1.5 12t-3.5 11q-4 11-7.5 22.5T702-751l91 91h87v279l-113 37-67 224H480v-80h-80v80H180Zm60-80h80v-80h240v80h80l62-206 98-33v-141h-40L620-720q0-20 2.5-38.5T630-796q-29 8-51 27.5T547-720H300q-58 0-99 41t-41 99q0 98 27 191.5T240-200Zm240-298Z" />
+    </svg>
+    """
+  end
 end
diff --git a/lib/budget_tracker_web/live/accounts_live/components/account_card.ex b/lib/budget_tracker_web/live/accounts_live/components/account_card.ex
@@ -2,6 +2,7 @@ defmodule BudgetTrackerWeb.AccountsLive.Components.AccountCard do
   @moduledoc """
     LiveComponent for Debit Account Card
   """
+  alias BudgetTracker.DebitAccounts.DebitAccount
   use BudgetTrackerWeb, :live_component
 
   alias BudgetTracker.DebitAccounts
@@ -24,6 +25,14 @@ defmodule BudgetTrackerWeb.AccountsLive.Components.AccountCard do
     {:noreply, socket}
   end
 
+  # def icon(account_type) do
+  #   case account_type do
+  #     :card -> ~H"""
+  #     <.card_icon>
+  #     """
+  #   end
+  # end
+
   def mount(socket) do
     socket =
       assign(socket,
@@ -36,16 +45,15 @@ defmodule BudgetTrackerWeb.AccountsLive.Components.AccountCard do
 
   attr :amount, :float, required: true
   attr :currency, :string, required: true
+  attr :id, :integer, required: true
   attr :title, :string, required: true
-  attr :debit_account_id, :integer, default: 999
-  attr :phx_click, :string
-  attr :on_delete_callback_name, :string, required: true
+  attr :type, :string, required: true
 
   def render(assigns) do
     ~H"""
     <div>
       <.card class="box-content flex items-center border-1 border-black h-36 w-fit rounded-xl bg-slate-200">
-        <.link patch={~p"/debit_accounts/show/#{@debit_account_id}"}>
+        <.link patch={~p"/debit_accounts/show/#{@id}"}>
           <div class="flex flex-col ml-5 min-w-36 sm:min-w-72 max-w-96 shrink">
             <span
               :for={
@@ -86,7 +94,7 @@ defmodule BudgetTrackerWeb.AccountsLive.Components.AccountCard do
               class="w-48"
               color="success"
               phx-click={JS.push(@event_names.delete) |> hide_modal(@popup_name)}
-              phx-value-id={@debit_account_id}
+              phx-value-id={@id}
             >
               Delete account
             </.button>

diff --git a/lib/budget_tracker_web/live/accounts_live/index.ex b/lib/budget_tracker_web/live/accounts_live/index.ex
@@ -1,4 +1,5 @@
 defmodule BudgetTrackerWeb.DebitAccountsLive.List do
+  alias ElixirLS.LanguageServer.Providers.Completion.Reducers.Struct
   alias BudgetTrackerWeb.AccountsLive.Components.AccountCard
   alias BudgetTracker.DebitAccounts
   use BudgetTrackerWeb, :live_view
@@ -32,9 +33,9 @@ defmodule BudgetTrackerWeb.DebitAccountsLive.List do
           module={AccountCard}
           amount={account.amount}
           currency={account.currency.title}
-          title={account.title}
-          debit_account_id={account.id}
           id={account.id}
+          title={account.title}
+          type={account.type}
         />
         <.link patch={~p"/debit_accounts/new"}>
           <.button color="primary" phx-click="add_debit_account">Add new debit account</.button>

diff --git a/lib/budget_tracker_web/live/accounts_live/show.ex b/lib/budget_tracker_web/live/accounts_live/show.ex
@@ -8,9 +8,10 @@ defmodule BudgetTrackerWeb.DebitAccountsLive.Show do
     <div class="flex flex-col items-center gap-5">
       <div class="mx-auto max-w-sm flex flex-col items-center gap-5">
         <%!-- TODO: make layout pretty --%>
-        <div>Title: {@debit_account.title}</div>
+        <div>Account Title: {@debit_account.title}</div>
         <div>Amount: {@debit_account.amount}</div>
         <div>Currency: {@debit_account.currency.title}</div>
+        <div>Type: {@debit_account.type}</div>
       </div>
     </div>
     """