partial for memo

clarksonator · Nov 26, 2024 · dc00dda · dc00dda
1 parent 3354c8f
commit dc00dda
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 40 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -56,6 +56,12 @@
    margin-right: 0;
  }
 
+ .left {
+   display: block;
+   margin-right: auto;
+   margin-left: 0;
+ }
+
  .icon {
    color: var(--ctp-frappe-flamingo);
  }

diff --git a/app/controllers/memos_controller.rb b/app/controllers/memos_controller.rb
@@ -36,6 +36,15 @@ def destroy
     redirect_to root_path, status: :see_other
   end
 
+  def update
+      @memo = Memo.find params[:id]
+      @memo.update memo_params
+      respond_to do |format|
+        format.js { render partial: "layouts/memo", object: @memo }
+        format.html { render partial: "layouts/memo", object: @memo }
+      end
+  end
+
   private
 
   def memo_params

diff --git a/app/views/layouts/_memo.html.erb b/app/views/layouts/_memo.html.erb
@@ -0,0 +1,39 @@
+<div class="card" >
+        <div class="card-content viewMemo">
+          <div class="content">
+            <%= raw renderMarkdown(memo.body) %>
+            <% if memo.attachment != nil && memo.attachment != 0 %>
+                <div id="modal1" class="modal">
+                  <div class="modal-background"></div>
+                      <div class="modal-content">
+                          <p class="image is-1by1">
+                            <img src="data:image/png;base64,<%= memo.attachment %>" style="width:auto;height:auto" />
+                          </p> 
+                      </div>
+                  <button class="modal-close is-large" aria-label="close" />
+                </div>
+                <img src="data:image/png;base64,<%= memo.attachment %>" style="width:200px" onclick="openModal();" />
+            <% end %>
+          </div>
+        </div>
+        <div class="card-content updateMemo" data-url="<%= memo_path(memo.id) %>" >
+          <div class="content">
+            <input type="hidden"><textarea id="editMemoTA" class="textarea"><%= memo.body %></textarea></input>
+            <% if memo.attachment != nil && memo.attachment != 0 %>
+                <img src="data:image/png;base64,<%= memo.attachment %>" style="width:200px" onclick="openModal();" />
+            <% end %>
+          </div>
+        </div>
+        <footer class="card-footer">
+          <div class="card-footer-item left">
+            <button id="editMemo" class="button left" style="background-color:var(--ctp-frappe-peach);color:black;" ><i class="fa-regular fa-pen-to-square"></i></button>
+            <button id="saveMemo" class="button left" style="background-color:var(--ctp-frappe-blue);color:black;" ><i class="fa-regular fa-floppy-disk"></i></button>
+            <button id="cancelEdit" class="button left" style="background-color:var(--ctp-frappe-maroon);color:black;" ><i class="fa-solid fa-ban"></i></button>
+          </div>
+          <div class="card-footer-item right">
+            <%= button_to memo_path(memo), :action => "destroy", :method => :delete, :class => "button right is-danger", data: { turbo_confirm: "Are you sure you want to delete?" } do %>
+              <i class="fa-regular fa-trash-can"></i>
+            <% end %>
+          </div>
+        </footer>
+      </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -16,7 +16,7 @@
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
     <%= favicon_link_tag 'favicon.png' %>
-    <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
   </head>
 
   <body>

diff --git a/app/views/memos/index.html.erb b/app/views/memos/index.html.erb
@@ -1,4 +1,5 @@
 <% if user_signed_in? %>
+<%= csrf_meta_tag %>
 <script>
         function openModal() {
             document.getElementById("modal1")
@@ -13,45 +14,7 @@
 <div style="margin: 0 auto;width: 800px; height: 100%">
 <%= render "layouts/new" %>
   <% current_user.memos.each do |memo| %>
-      <div class="card" >
-        <div class="card-content viewMemo">
-          <div class="content">
-            <%= raw renderMarkdown(memo.body) %>
-            <% if memo.attachment != nil && memo.attachment != 0 %>
-                <div id="modal1" class="modal">
-                  <div class="modal-background"></div>
-                      <div class="modal-content">
-                          <p class="image is-1by1">
-                            <img src="data:image/png;base64,<%= memo.attachment %>" style="width:auto;height:auto" />
-                          </p> 
-                      </div>
-                  <button class="modal-close is-large" aria-label="close" />
-                </div>
-                <img src="data:image/png;base64,<%= memo.attachment %>" style="width:200px" onclick="openModal();" />
-            <% end %>
-          </div>
-        </div>
-        <div class="card-content updateMemo">
-          <div class="content">
-            <input type="hidden"><textarea class="textarea"><%= memo.body %></textarea></input>
-            <% if memo.attachment != nil && memo.attachment != 0 %>
-                <img src="data:image/png;base64,<%= memo.attachment %>" style="width:200px" onclick="openModal();" />
-            <% end %>
-          </div>
-        </div>
-        <footer class="card-footer">
-          <div class="card-footer-item left">
-            <button id="editMemo" class="button left" style="background-color:var(--ctp-frappe-peach);color:black;" ><i class="fa-regular fa-pen-to-square"></i></button>
-            <button id="saveMemo" class="button left" style="background-color:var(--ctp-frappe-blue);color:black;" ><i class="fa-regular fa-floppy-disk"></i></button>
-            <button id="cancelEdit" class="button left" style="background-color:var(--ctp-frappe-maroon);color:black;" ><i class="fa-solid fa-ban"></i></button>
-          </div>
-          <div class="card-footer-item right">
-            <%= button_to memo_path(memo), :action => "destroy", :method => :delete, :class => "button right is-danger", data: { turbo_confirm: "Are you sure you want to delete?" } do %>
-              <i class="fa-regular fa-trash-can"></i>
-            <% end %>
-          </div>
-        </footer>
-      </div>
+      <%= render :partial => "layouts/memo", :object => memo %>
   <% end %>
 </div>
 <script>
@@ -73,5 +36,19 @@
     card.children(".viewMemo").show();
     card.children(".updateMemo").hide();
   });
+  $("#saveMemo").on("click", function() {
+    var card = $(this).parent().parent().parent();
+    var url = card.children(".updateMemo").data('url');
+    var body = card.find("#editMemoTA").val();
+    $.ajax({
+    url: url,
+    beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
+    data: "memo%5Bbody%5D="+encodeURIComponent(body),
+    type: 'PUT',
+    success: function(result) {
+      console.log(result);
+    }
+});
+  });
 </script>
 <% end %>