PR: Lists

BUILDIT.md

@@ -825,7 +825,7 @@ defmodule App.TimerTest do
       {:ok, timer} =
         Timer.start(%{item_id: item.id, person_id: 1, start: seven_seconds_ago})
 
-      # stop the timer based on it's item_id
+      # stop the timer based on it's item_id
       Timer.stop_timer_for_item_id(item.id)
 
       stopped_timer = Timer.get_timer!(timer.id)
@@ -3165,10 +3165,10 @@ everytime `Start/Resume` or `Stop` is called.
     person_id = get_person_id(socket.assigns)
     items = Item.items_with_timers(person_id)
 
-    isEditingItem = socket.assigns.editing
+    is_editing_item = socket.assigns.editing
 
     # If the item is being edited, we update the timer list of the item being edited.
-    if isEditingItem do
+    if is_editing_item do
       case payload do
         {:start, item_id} ->
           timers_list_changeset = Timer.list_timers_changesets(item_id)
@@ -5469,13 +5469,13 @@ to the `LiveView` server during the mounting phase.
 
 Open `assets/js/app.js`
 and locate the 
-`let liveSocket = new LiveSocket()` variable.
+`let live_socket = new LiveSocket()` variable.
 We are going to be changing the `params` attribute.
 Change it to the following:
 
 ```js
 params: {
-  _csrf_token: csrfToken,
+  _csrf_token: csrf_token,
   hours_offset_fromUTC: -new Date().getTimezoneOffset()/60
 }
 ```
@@ -5927,4 +5927,4 @@ please let us know by starring the repo on GitHub! ⭐
 
 <br />
 
-[![HitCount](https://hits.dwyl.com/dwyl/app-mvp-build.svg)](https://hits.dwyl.com/dwyl/app-mvp)
+[![HitCount](https://hits.dwyl.com/dwyl/app-mvp-build.svg)](https://hits.dwyl.com/dwyl/app-mvp)

assets/js/app.js

@@ -14,13 +14,13 @@ window.addEventListener("phx:page-loading-stop", info => topbar.hide())
 window.addEventListener("phx:highlight", (e) => {
   document.querySelectorAll("[data-highlight]").forEach(el => {
     if(el.id == e.detail.id) {
-        liveSocket.execJS(el, el.getAttribute("data-highlight"))
+        live_socket.execJS(el, el.getAttribute("data-highlight"))
     }
   })
 })
 
-// Item id of the destination in the DOM
-let itemId_to;
+// Item ID of the destination during drag over in the DOM
+let item_id_destination;
 
 let Hooks = {}
 Hooks.Items = {
@@ -33,31 +33,31 @@ Hooks.Items = {
     })
 
     this.el.addEventListener("remove-highlight", e => {
-      hook.pushEventTo("#items", "removeHighlight", {id: e.detail.id})
+      hook.pushEventTo("#items", "remove_highlight", {id: e.detail.id})
       // console.log('remove-highlight', e.detail.id)
     })
 
-    this.el.addEventListener("dragoverItem", e => {
-      // console.log("dragoverItem", e.detail)
-      const currentItemId = e.detail.currentItem.id
-      const selectedItemId = e.detail.selectedItemId
-      if( currentItemId != selectedItemId) {
-        hook.pushEventTo("#items", "dragoverItem", {currentItemId: currentItemId, selectedItemId: selectedItemId})
-        itemId_to = e.detail.currentItem.dataset.id
+    this.el.addEventListener("dragover_item", e => {
+      // console.log("dragover_item", e.detail)
+      const current_item_id = e.detail.current_item.id
+      const selected_item_id = e.detail.selected_item_id
+      if( current_item_id != selected_item_id) {
+        hook.pushEventTo("#items", "dragover_item", {current_item_id: current_item_id, selected_item_id: selected_item_id})
+        item_id_destination = e.detail.current_item.dataset.id
       }
     })
 
-    this.el.addEventListener("update-indexes", e => {
+    this.el.addEventListener("update_indexes", e => {
       const item_id = e.detail.fromItemId 
       const list_ids = get_list_item_cids()
-      console.log("update-indexes", e.detail, "list: ", list_ids)
+      console.log("update_indexes", e.detail, "list: ", list_ids)
       // Check if both "from" and "to" are defined
-      if(item_id && itemId_to && item_id != itemId_to) {
+      if(item_id && item_id_destination && item_id != item_id_destination) {
         hook.pushEventTo("#items", "update_list_seq", 
           {seq: list_ids})
       }
 
-      itemId_to = null;
+      item_id_destination = null;
     })
   }
 }
@@ -78,33 +78,33 @@ function get_list_item_cids() {
 window.addEventListener("phx:remove-highlight", (e) => {
   document.querySelectorAll("[data-highlight]").forEach(el => {
     if(el.id == e.detail.id) {
-        liveSocket.execJS(el, el.getAttribute("data-remove-highlight"))
+        live_socket.execJS(el, el.getAttribute("data-remove-highlight"))
     }
   })
 })
 
 window.addEventListener("phx:dragover-item", (e) => {
   console.log("phx:dragover-item", e.detail)
-  const selectedItem = document.querySelector(`#${e.detail.selected_item_id}`)
-  const currentItem = document.querySelector(`#${e.detail.current_item_id}`)
+  const selected_item = document.querySelector(`#${e.detail.selected_item_id}`)
+  const current_item = document.querySelector(`#${e.detail.current_item_id}`)
 
   const items = document.querySelector('#items')
-  const listItems = [...document.querySelectorAll('.item')]
+  const list_items = [...document.querySelectorAll('.item')]
 
-  if(listItems.indexOf(selectedItem) < listItems.indexOf(currentItem)){
-    items.insertBefore(selectedItem, currentItem.nextSibling)
+  if(list_items.indexOf(selected_item) < list_items.indexOf(current_item)){
+    items.insertBefore(selected_item, current_item.nextSibling)
   }
 
-  if(listItems.indexOf(selectedItem) > listItems.indexOf(currentItem)){
-    items.insertBefore(selectedItem, currentItem)
+  if(list_items.indexOf(selected_item) > list_items.indexOf(current_item)){
+    items.insertBefore(selected_item, current_item)
   }
 })
 
-// liveSocket related setup:
+// live_socket related setup:
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let csrf_token = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 
-let liveSocket = new LiveSocket("/live", Socket, {
+let live_socket = new LiveSocket("/live", Socket, {
   hooks: Hooks,
   dom:{
         onBeforeElUpdated(from, to) {
@@ -114,17 +114,17 @@ let liveSocket = new LiveSocket("/live", Socket, {
         }
   },
   params: {
-    _csrf_token: csrfToken,
+    _csrf_token: csrf_token,
     hours_offset_fromUTC: -new Date().getTimezoneOffset()/60
   }
 })
 
 // connect if there are any LiveViews on the page
-liveSocket.connect()
+live_socket.connect()
 
-// expose liveSocket on window for web console debug logs and latency simulation:
-// >> liveSocket.enableDebug()
-// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
-// >> liveSocket.disableLatencySim()
-window.liveSocket = liveSocket
+// expose live_socket on window for web console debug logs and latency simulation:
+// >> live_socket.enableDebug()
+// >> live_socket.enableLatencySim(1000)  // enabled for duration of browser session
+// >> live_socket.disableLatencySim()
+window.live_socket = live_socket
 

lib/app/item.ex

@@ -38,7 +38,13 @@ defmodule App.Item do
     item
     |> cast(attrs, [:person_id, :status, :text])
     |> validate_required([:person_id])
-    |> App.Cid.put_cid()
+  end
+
+  # Update an item without changing the cid ref: #418
+  def changeset_update(item, attrs) do
+    item
+    |> cast(attrs, [:cid, :person_id, :status, :text])
+    |> validate_required([:cid, :text, :person_id])
   end
 
   @doc """
@@ -137,13 +143,13 @@ defmodule App.Item do
       [%Item{}, ...]
 
   """
-  def list_items do
+  def get_items do
     Item
     |> where([i], is_nil(i.status) or i.status != 6)
     |> Repo.all()
   end
 
-  def list_person_items(person_id) do
+  def get_person_items(person_id) do
     Item
     |> where(person_id: ^person_id)
     |> Repo.all()
@@ -164,7 +170,7 @@ defmodule App.Item do
   """
   def update_item(%Item{} = item, attrs) do
     item
-    |> Item.changeset(attrs)
+    |> Item.changeset_update(attrs)
     |> PaperTrail.update(originator: %{id: Map.get(attrs, :person_id, 0)})
   end
 
@@ -186,7 +192,7 @@ defmodule App.Item do
 
   def delete_item(id) do
     get_item!(id)
-    |> Item.changeset(%{status: 6})
+    |> Item.changeset_update(%{status: 6})
     |> Repo.update()
   end
 
@@ -201,21 +207,28 @@ defmodule App.Item do
   #  👩‍💻   Feedback/Pairing/Refactoring Welcome!  🙏
 
   @doc """
-  `items_with_timers/1` Returns a List of items with the latest associated timers.
-  This list is ordered with the position that is detailed inside the Items schema.
+  `items_with_timers/2` Returns a List of items with the latest associated timers.
+  The result set is ordered by the `list.seq`.
+  Accepts an optional second parameter `list_cid` which is the unique ID of the `list`
+  to retrieve `items` for.
 
   ## Examples
 
   iex> items_with_timers()
   [
-    %{text: "hello", person_id: 1, status: 2, start: 2022-07-14 09:35:18},
-    %{text: "world", person_id: 2, status: 7, start: 2022-07-15 04:20:42}
+    %{text: "hello", person_id: 0, status: 2, start: 2022-07-14 09:35:18},
+    %{text: "world", person_id: 0, status: 7, start: 2022-07-15 04:20:42}
   ]
   """
-  #
-  def items_with_timers(person_id \\ 0) do
-    all_list = App.List.get_all_list_for_person(person_id)
-    seq = App.List.get_list_seq(all_list)
+  def items_with_timers(person_id \\ 0, list_cid \\ nil) do
+    seq =
+      if is_nil(list_cid) do
+        App.List.get_all_list_for_person(person_id)
+        |> App.List.get_list_seq()
+      else
+        App.List.get_list_by_cid!(list_cid)
+        |> App.List.get_list_seq()
+      end
 
     sql = """
     SELECT i.id, i.cid, i.text, i.status, i.person_id, i.updated_at,
@@ -233,7 +246,7 @@ defmodule App.Item do
       |> map_columns_to_values()
 
     items_tags =
-      list_person_items(person_id)
+      get_person_items(person_id)
       |> Enum.reduce(%{}, fn i, acc -> Map.put(acc, i.id, i) end)
 
     accumulate_item_timers(values, seq)
@@ -378,7 +391,7 @@ defmodule App.Item do
   This will not be needed once all records are transitioned.
   """
   def update_all_items_cid do
-    items = list_items()
+    items = get_items()
 
     Enum.each(items, fn i ->
       # coveralls-ignore-start