handle change

rauversion · Jul 14, 2024 · 513ec7c · 513ec7c
1 parent d314b00
commit 513ec7c
Show file tree

Hide file tree

Showing 10 changed files with 132 additions and 22 deletions.
diff --git a/app/controllers/products_controller.rb b/app/controllers/products_controller.rb
@@ -39,22 +39,35 @@ def new
   def create
     @product = current_user.products.new(product_params)
 
+    if params[:changed_form]
+      render "create" and return
+    end
+
     if @product.save
       redirect_to @product, notice: 'Product was successfully created.'
     else
-      render :new, status: 422
+      render "create"
+      # render :new, status: 422
     end
   end
 
   def edit
   end
 
   def update
-    if @product.update(product_params)
+
+    @product.assign_attributes(product_params)
+
+    if params[:changed_form]
+      render "update" and return
+    end
+
+    if @product.save
       redirect_to @product, notice: 'Product was successfully updated.'
     else
       Rails.logger.error("AAA #{@product.errors.full_messages}")
-      render :edit, status: 422
+      # render :edit, status: 422
+      render "update"
     end
   end
 

diff --git a/app/javascript/controllers/simple_editor_controller.jsx b/app/javascript/controllers/simple_editor_controller.jsx
@@ -119,9 +119,12 @@ export default class extends Controller {
     this.editor.commands.toggleItalic()
   }
 
-  toggleHeading(e){
-    e.preventDefault()
-    this.editor.commands.toggleHeading({ level: parseInt(e.currentTarget.dataset.level) })
+  toggleHeading(e) {
+    // Check if the event is from a click or a specific key press on the button
+    if (e.type === 'click') { // || (e.type === 'keydown' && e.key === 'Enter' && e.target.matches('[data-action="toggleHeading"]'))) {
+      e.preventDefault();
+      this.editor.commands.toggleHeading({ level: parseInt(e.currentTarget.dataset.level) });
+    }
   }
 
   toggleOrderedList(e){

diff --git a/app/javascript/controllers/submit_on_change_controller.js b/app/javascript/controllers/submit_on_change_controller.js
@@ -1,7 +1,21 @@
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  handleChange(event) {
+  connect() {
+    console.log("SubmitOnChangeController connected");
+  }
+
+  submitForm(event) {
+    // Prevent the default behavior if needed
+    // event.preventDefault();
+
+    let hiddenInput = document.createElement("input");
+    hiddenInput.type = "hidden";
+    hiddenInput.name = "changed_form";
+    hiddenInput.value = "true";
+    this.element.appendChild(hiddenInput);
+
+    // Submit the form
     this.element.requestSubmit();
   }
 }
diff --git a/app/views/products/_form.erb b/app/views/products/_form.erb
@@ -9,14 +9,26 @@
     <% end %>
   </h3>
 
-  <%= form_with(model: product, local: true) do |form| %>
-
-    <%= form.object.errors.full_messages.join(" ") %>
+  <%= form_with(model: product, local: true, data: {
+      controller: "submit-on-change"
+    }) do |form| %>
+
+    <% if form.object.errors.any? %>
+      <div class="py-3">
+        <p class="text-danger text-red-500 text-2xl">Errors Found</p>
+        <% # form.object.errors.full_messages.join(" ") %>
+      </div>
+    <% end %>
   
     <div class="space-y-3">
 
       <div class="flex space-x-2">
-        <%= form.select :category, Product.categories.keys %>
+        <%= form.select :category, Product.categories.keys , {}, {
+           #label: false,
+            data: { action: "change->submit-on-change#submitForm" }
+          } 
+        %>
+
         <% if ['vinyl', 'cassette'].include?(product.category) %>
           <%= form.select :playlist_id, current_user.playlists.where(playlist_type: ['album', 'ep']).map{|o| 
             [o.title, o.id]

diff --git a/app/views/products/create.turbo_stream.erb b/app/views/products/create.turbo_stream.erb
@@ -0,0 +1,5 @@
+<%= turbo_stream.update("product-form") do %>
+
+  <%= render "form", product: @product %>
+
+<% end %>
diff --git a/app/views/products/edit.html.erb b/app/views/products/edit.html.erb
@@ -1 +1,3 @@
-<%= render "form", product: @product %>
+<div id="product-form">
+  <%= render "form", product: @product %>
+</div>
diff --git a/app/views/products/new.html.erb b/app/views/products/new.html.erb
@@ -1 +1,3 @@
-<%= render "form", product: @product %>
+<div id="product-form">
+  <%= render "form", product: @product %>
+</div>
diff --git a/app/views/products/update.turbo_stream.erb b/app/views/products/update.turbo_stream.erb
@@ -0,0 +1,5 @@
+<%= turbo_stream.update("product-form") do %>
+
+  <%= render "form", product: @product %>
+
+<% end %>
diff --git a/app/views/shared/_simple_editor.erb b/app/views/shared/_simple_editor.erb
@@ -3,19 +3,66 @@
   <div class="px-2 py-2 flex items-center justify-between">
     <div class="flex space-x-2 items-center">
 
-      <button class="btn btn-xs outlined" data-level="1" data-action="click->simple-editor#toggleHeading">H1</button>
-      <button class="btn btn-xs outlined" data-level="2" data-action="click->simple-editor#toggleHeading">H2</button>
+      <button class="btn btn-xs text-xs font-bold border border-subtle outlined bg-default rounded-lg p-2" type="button" data-editor-toolbar data-level="1" data-action="simple-editor#toggleHeading">
+        <span class="text-xl">H1</span>
+      </button>
+
+      <button class="btn btn-xs text-xs font-bold border border-subtle outlined bg-default rounded-lg p-2" type="button" data-level="2" data-action="simple-editor#toggleHeading">
+        <span class="text-xl">H2</span>
+      </button>
+
+      <!-- list -->
+      <button class="btn btn-xs text-xs font-bold border border-subtle outlined bg-default rounded-lg p-2" type="button" data-action="simple-editor#toggleBulletList">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="9" y1="6" x2="20" y2="6"></line>
+          <line x1="9" y1="12" x2="20" y2="12"></line>
+          <line x1="9" y1="18" x2="20" y2="18"></line>
+          <circle cx="4" cy="6" r="2"></circle>
+          <circle cx="4" cy="12" r="2"></circle>
+          <circle cx="4" cy="18" r="2"></circle>
+        </svg>
+      </button>
+
+      <!-- ordered -->
+      <button class="btn btn-xs text-xs font-bold border border-subtle outlined bg-default rounded-lg p-2" type="button" data-action="simple-editor#toggleOrderedList">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="10" y1="6" x2="21" y2="6"></line>
+          <line x1="10" y1="12" x2="21" y2="12"></line>
+          <line x1="10" y1="18" x2="21" y2="18"></line>
+          <path d="M4 6h1v4"></path>
+          <path d="M4 10h2"></path>
+          <path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"></path>
+        </svg>
+      </button>
 
-      <button class="btn btn-xs outlined" data-action="click->simple-editor#toggleBulletList">Bullet</button>
-      <button class="btn btn-xs outlined" data-action="click->simple-editor#toggleOrderedList">Ordered</button>
+      <!-- B -->
+      <button class="btn btn-xs text-xs font-bold border border-subtle outlined bg-default rounded-lg p-2" type="button" data-action="simple-editor#toggleBold">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
+          <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
+        </svg>
+      </button>
 
-      <button class="btn btn-xs outlined" data-action="click->simple-editor#toggleBold">B</button>
-      <button class="btn btn-xs outlined" data-action="click->simple-editor#toggleItalic">I</button>
-      <button class="btn btn-xs outlined" data-action="click->simple-editor#openLinkPrompt">link</button>
+      <!-- italic -->
+      <button class="btn btn-xs text-xs font-bold border border-subtle outlined bg-default rounded-lg p-2" type="button" data-action="simple-editor#toggleItalic">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="19" y1="4" x2="10" y2="4"></line>
+          <line x1="14" y1="20" x2="5" y2="20"></line>
+          <line x1="15" y1="4" x2="9" y2="20"></line>
+        </svg>
+      </button>
 
+      <!-- link -->
+      <button class="btn btn-xs text-xs font-bold border border-subtle outlined bg-default rounded-lg p-2" type="button" data-action="simple-editor#openLinkPrompt">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+        </svg>
+      </button>
+
       <div data-simple-editor-target="linkWrapper" class="hidden flex items-center">
         <input data-simple-editor-target="linkField" data-action="keydown.enter->simple-editor#setLink" type="text">
-        <button class="btn btn-xs outlined" data-action="click->simple-editor#setLink">link</button>
+        <button class="btn btn-xs text-xs font-bold outlined bg-default rounded-lg p-2" type="button" data-action="click->simple-editor#setLink">link</button>
       </div>
 
     </div>

diff --git a/app/views/shared/_user_menu.html.erb b/app/views/shared/_user_menu.html.erb
@@ -243,6 +243,13 @@
                   <% end %>
                 <% #end %>
 
+                <% if current_user&.can_sell_products? %>
+                  <%= link_to user_products_path(current_user.username),
+                    class: "block px-4 py-2 text-sm text-gray-700 dark:text-gray-300" do %>
+                    <%= t("menu.my_purchases") %>
+                  <% end %>
+                <% end %>
+
                 <%= link_to "/sales",
                   class: "block px-4 py-2 text-sm text-gray-700 dark:text-gray-300"  do %>
                   <%= t("menu.my_sales") %>