From 7f2633f9dafad1cb66013cae616c0494637cd32a Mon Sep 17 00:00:00 2001 From: Cristiano Crolla <36827816+crolla97@users.noreply.github.com> Date: Sun, 10 Mar 2024 21:38:31 +0000 Subject: [PATCH] Add transaction sidebar (#534) * Create sidebar element and working with turbo * Add overview fields * Add columns to transations and tidy modal * permit new transaction params * Add autosubmit form controller * remove unused show code --- app/controllers/transactions_controller.rb | 2 +- app/helpers/application_helper.rb | 6 ++ .../auto_submit_form_controller.js | 33 ++++++++ app/views/shared/_sidebar_modal.html.erb | 14 ++++ app/views/transactions/_transaction.html.erb | 4 +- .../transactions/_transaction_group.html.erb | 2 +- app/views/transactions/show.html.erb | 78 ++++++++++++++++--- ...6_add_notes_and_excluded_to_transaction.rb | 6 ++ db/schema.rb | 4 +- 9 files changed, 134 insertions(+), 15 deletions(-) create mode 100644 app/javascript/controllers/auto_submit_form_controller.js create mode 100644 app/views/shared/_sidebar_modal.html.erb create mode 100644 db/migrate/20240308214956_add_notes_and_excluded_to_transaction.rb diff --git a/app/controllers/transactions_controller.rb b/app/controllers/transactions_controller.rb index eef0ca74..fb5d3e93 100644 --- a/app/controllers/transactions_controller.rb +++ b/app/controllers/transactions_controller.rb @@ -56,6 +56,6 @@ class TransactionsController < ApplicationController # Only allow a list of trusted parameters through. def transaction_params - params.require(:transaction).permit(:name, :date, :amount, :currency) + params.require(:transaction).permit(:name, :date, :amount, :currency, :notes, :excluded) end end diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index ed191035..c7051ed2 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -31,6 +31,12 @@ module ApplicationHelper render partial: "shared/currency_dropdown", locals: { f: f, options: options } end + def sidebar_modal(&block) + content = capture &block + render partial: "shared/sidebar_modal", locals: { content: content } + end + + def sidebar_link_to(name, path, options = {}) base_class_names = [ "block", "border", "border-transparent", "rounded-xl", "-ml-2", "p-2", "text-sm", "font-medium", "text-gray-500", "flex", "items-center" ] hover_class_names = [ "hover:bg-white", "hover:border-alpha-black-50", "hover:text-gray-900", "hover:shadow-xs" ] diff --git a/app/javascript/controllers/auto_submit_form_controller.js b/app/javascript/controllers/auto_submit_form_controller.js new file mode 100644 index 00000000..d1ab1c50 --- /dev/null +++ b/app/javascript/controllers/auto_submit_form_controller.js @@ -0,0 +1,33 @@ +import { Controller } from '@hotwired/stimulus'; + +export default class extends Controller { + + get cssInputSelector() { + return 'input:not(.no-auto-submit), textarea:not(.no-auto-submit)'; + } + + get inputElements() { + return this.element.querySelectorAll(this.cssInputSelector); + } + + get selectElements() { + return this.element.querySelectorAll('select:not(.no-auto-submit)'); + } + + connect() { + this.inputElements.forEach(el => el.addEventListener('change', this.handler.bind(this))); + this.selectElements.forEach(el => el.addEventListener('change', this.handler.bind(this))); + } + + disconnect() { + this.inputElements.forEach(el => el.removeEventListener('change', this.handler.bind(this))); + this.selectElements.forEach(el => el.removeEventListener('change', this.handler.bind(this))); + } + + handler(e) { + console.log(e); + this.element.requestSubmit(); + } + +} + diff --git a/app/views/shared/_sidebar_modal.html.erb b/app/views/shared/_sidebar_modal.html.erb new file mode 100644 index 00000000..52f557d2 --- /dev/null +++ b/app/views/shared/_sidebar_modal.html.erb @@ -0,0 +1,14 @@ +<%= turbo_frame_tag "modal" do %> + +
+
+
+ <%= lucide_icon("x", class: "w-5 h-5 shrink-0") %> +
+
+
+ <%= content %> +
+
+ +<% end %> \ No newline at end of file diff --git a/app/views/transactions/_transaction.html.erb b/app/views/transactions/_transaction.html.erb index 375cfb80..bc801e38 100644 --- a/app/views/transactions/_transaction.html.erb +++ b/app/views/transactions/_transaction.html.erb @@ -1,4 +1,4 @@ -
+<%= link_to transaction_path(transaction), data: { turbo_frame: "modal" }, class: "text-gray-900 flex items-center gap-6 py-4 text-sm font-medium hover:bg-gray-50 px-4", id: dom_id(transaction) do %>
<%= transaction.name[0].upcase %>

<%= transaction.name %>

@@ -9,4 +9,4 @@

"><%= number_to_currency(-transaction.amount, { precision: 2 }) %>

-
+<% end %> diff --git a/app/views/transactions/_transaction_group.html.erb b/app/views/transactions/_transaction_group.html.erb index ceddad2c..6de9d6a6 100644 --- a/app/views/transactions/_transaction_group.html.erb +++ b/app/views/transactions/_transaction_group.html.erb @@ -4,7 +4,7 @@

<%= date.strftime('%b %d, %Y') %> · <%= transactions.size %>

<%= number_to_currency(-transactions.sum(&:amount)) %>
-
+
<%= render partial: "transactions/transaction", collection: transactions %>
diff --git a/app/views/transactions/show.html.erb b/app/views/transactions/show.html.erb index 5d193dcc..af83a3be 100644 --- a/app/views/transactions/show.html.erb +++ b/app/views/transactions/show.html.erb @@ -1,10 +1,68 @@ -
-
- <%= render @transaction %> - <%= link_to "Edit this transaction", edit_transaction_path(@transaction), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %> -
- <%= button_to "Destroy this transaction", transaction_path(@transaction), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %> -
- <%= link_to "Back to transactions", transactions_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %> -
-
+<%= sidebar_modal do %> +

+ <%=format_currency @transaction.amount %> + <%= @transaction.currency %> +

+ <%= @transaction.date.strftime("%A %d %B") %> + + <%= form_with model: @transaction, html: {data: {controller: "auto-submit-form"}} do |f| %> +
+ +
+ Overview + <%= lucide_icon("chevron-down", class: "hidden group-open:block text-gray-500 w-5 h-5") %> + <%= lucide_icon("chevron-right", class: "group-open:hidden text-gray-500 w-5 h-5") %> +
+ + + <%= f.date_field :date, label: "Date" %> +
+ <%= f.collection_select :account_id, Current.family.accounts, :id, :name, { prompt: "Select an Account", label: "Account", class: "text-gray-400" }, {class: "form-field__input cursor-not-allowed text-gray-400", disabled: "disabled"} %> +
+ +
+ +
+ Description + <%= lucide_icon("chevron-down", class: "hidden group-open:block text-gray-500 w-5 h-5") %> + <%= lucide_icon("chevron-right", class: "group-open:hidden text-gray-500 w-5 h-5") %> +
+ + + <%= f.text_field :name, label: "Name" %> +
+ +
+ +
+ Settings + <%= lucide_icon("chevron-down", class: "hidden group-open:block text-gray-500 w-5 h-5") %> + <%= lucide_icon("chevron-right", class: "group-open:hidden text-gray-500 w-5 h-5") %> +
+ + + +
+ +
+ +
+ Additional + <%= lucide_icon("chevron-down", class: "hidden group-open:block text-gray-500 w-5 h-5") %> + <%= lucide_icon("chevron-right", class: "group-open:hidden text-gray-500 w-5 h-5") %> +
+ + + <%= f.text_area :notes, label: "Notes", placeholder: "Enter a note" %> +
+ + <% end %> + +<% end %> diff --git a/db/migrate/20240308214956_add_notes_and_excluded_to_transaction.rb b/db/migrate/20240308214956_add_notes_and_excluded_to_transaction.rb new file mode 100644 index 00000000..20ca22b5 --- /dev/null +++ b/db/migrate/20240308214956_add_notes_and_excluded_to_transaction.rb @@ -0,0 +1,6 @@ +class AddNotesAndExcludedToTransaction < ActiveRecord::Migration[7.2] + def change + add_column :transactions, :excluded, :boolean, default: false + add_column :transactions, :notes, :text + end +end diff --git a/db/schema.rb b/db/schema.rb index 1aec8b07..21376fb1 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -10,7 +10,7 @@ # # It's strongly recommended that you check this file into your version control system. -ActiveRecord::Schema[7.2].define(version: 2024_03_07_082827) do +ActiveRecord::Schema[7.2].define(version: 2024_03_08_214956) do # These are extensions that must be enabled in order to support this database enable_extension "pgcrypto" enable_extension "plpgsql" @@ -217,6 +217,8 @@ ActiveRecord::Schema[7.2].define(version: 2024_03_07_082827) do t.datetime "created_at", null: false t.datetime "updated_at", null: false t.uuid "category_id" + t.boolean "excluded", default: false + t.text "notes" t.index ["account_id"], name: "index_transactions_on_account_id" t.index ["category_id"], name: "index_transactions_on_category_id" end