feat: added instant update and create handling in both admin and user space

Signed-off-by: Louis Vallat <louis@louis-vallat.xyz>

app/channels/count_channel.rb

@@ -1,4 +1,5 @@
 class CountChannel < ApplicationCable::Channel
+
   def subscribed
     stream_from "counts"
   end
@@ -8,7 +9,7 @@ class CountChannel < ApplicationCable::Channel
   end
 
   def plus_one(params)
-    unless current_user.nil?
+    unless current_user.nil? || params["id"].nil?
       total = Total.find(params["id"])
       unless total.nil?
         total.update(count: total.count + 1)
@@ -17,7 +18,7 @@ class CountChannel < ApplicationCable::Channel
   end
 
   def minus_one(params)
-    unless current_user.nil?
+    unless current_user.nil? || params["id"].nil?
       total = Total.find(params["id"])
       unless total.nil?
         total.update(count: total.count - 1)
@@ -25,12 +26,13 @@ class CountChannel < ApplicationCable::Channel
     end
   end
 
-  def self.create(total)
-
-  end
-
   def self.update(total)
-    ActionCable.server.broadcast("counts", {"update": total})
+    ActionCable.server.broadcast("counts", {"update": {
+      id: total.id,
+      name: total.name,
+      count: total.count,
+      edit_link: Rails.application.routes.url_helpers.edit_count_path(total)
+    }})
   end
 
   def self.destroy(total)

app/javascript/channels/count_channel.js

@@ -13,8 +13,12 @@ const count_channel = consumer.subscriptions.create("CountChannel", {
   received(data) {
     // Called when there's incoming data on the websocket for this channel
     console.log(data)
-    if (data.update !== undefined)
-      this.update(data.update)
+    if (data.update !== undefined) {
+      if ($("[data-count-id='" + data.update.id + "']").length)
+        this.update(data.update)
+      else
+        this.create(data.update)
+    }
 
     if (data.destroy !== undefined)
       this.destroy(data.destroy)
@@ -28,10 +32,41 @@ const count_channel = consumer.subscriptions.create("CountChannel", {
   destroy(data) {
     $("[data-count-id='"+ data + "']").remove()
   },
+
+  create(data) {
+    let created = $("#template").clone()
+    created.attr("data-count-id", data.id)
+    created.find(".name").text(data.name)
+    created.find(".count").text(data.count)
+    created.find(".minus").click(function () {
+      count_channel.minus_one(data.id)
+    })
+    created.find(".plus").click(function () {
+      count_channel.plus_one(data.id)
+    })
+    created.find(".edit").attr("href", data.edit_link)
+    created.removeClass("d-none")
+    $("#count-list").append(created)
+  },
+
+  minus_one(id) {
+    if (count_channel !== undefined && !count_channel.consumer.connection.disconnected) {
+      count_channel.perform("minus_one", { "id": id })
+    }
+  },
+
+  plus_one(id) {
+    if (count_channel !== undefined && !count_channel.consumer.connection.disconnected) {
+      count_channel.perform("plus_one", { "id": id })
+    }
+  },
 });
 
 $(document).on('turbo:load', function() {
-  if (count_channel !== undefined && !count_channel.consumer.connection.disconnected) {
-    $("")
-  }
+  $("[data-count-id] .minus").click(function () {
+    count_channel.minus_one($(this).parents("[data-count-id]").attr("data-count-id"))
+  });
+  $("[data-count-id] .plus").click(function () {
+    count_channel.plus_one($(this).parents("[data-count-id]").attr("data-count-id"))
+  });
 })

app/models/total.rb

@@ -16,8 +16,8 @@ class Total < ApplicationRecord
   validates_uniqueness_of :name
   validates_length_of :name, in: 1..32
 
-  after_save do
-    CountChannel.create(self)
+  after_create do
+    CountChannel.update(self)
   end
 
   after_update do

app/views/count/index.html.erb

@@ -1,4 +1,19 @@
-<div class="mt-2 row row-cols-4">
+<div class="mt-2 row row-cols-4" id="count-list">
+  <div class="col mt-1 mb-2 text-center d-none" id="template" data-count-id="">
+    <div class="row">
+      <div class="col text-end">
+        <button type="button" class="btn btn-lg btn-outline-danger fw-bold my-auto fs-3 minus">-</button>
+      </div>
+      <span class="col fw-bold fs-1 count"></span>
+      <div class="col text-start">
+        <button type="button" class="btn btn-lg btn-outline-success fw-bold my-auto fs-3 plus">+</button>
+      </div>
+    </div>
+    <div class="fw-light fs-4">
+      <span class="name"></span>
+      <span><%= link_to "", "", class: "btn btn-sm btn-primary bi-pen-fill edit" %></span>
+    </div>
+  </div>
   <% @counts.each { |c| %>
     <div class="col mt-1 mb-2 text-center" data-count-id="<%= c.id %>">
       <div class="row">
@@ -11,11 +26,11 @@
         </div>
       </div>
       <div class="fw-light fs-4">
-        <span><%= c.name %></span>
+        <span class="name"><%= c.name %></span>
         <span><%= link_to "", edit_count_path(c), class: "btn btn-sm btn-primary bi-pen-fill" %></span>
       </div>
     </div>
-  <%  } %>
+  <% } %>
 </div>
 <div class="fixed-bottom text-end m-5">
   <%= link_to "", new_count_path, class: "btn btn-lg btn-success fs-3 bi-plus-lg" %>

app/views/home/index.html.erb

@@ -1,4 +1,8 @@
-<div class="mt-2 row row-cols-4">
+<div class="mt-2 row row-cols-4" id="count-list">
+  <div class="col text-center d-none" data-count-id="" id="template">
+    <span class="fw-bold fs-1 count"></span>
+    <div class="fw-light fs-4 name"></div>
+  </div>
   <% @counts.each { |c| %>
     <div class="col text-center" data-count-id="<%= c.id %>">
       <span class="fw-bold fs-1 count"><%= c.count %></span>