From 0726350b45d983063640cc4bf7ebe70356d3a1cc Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Wed, 30 Oct 2024 16:07:32 -0300
Subject: [PATCH] feat: keep collapsible state on montlhly overview

---
 app/templates/cotton/transaction/item.html         |  2 +-
 app/templates/includes/scripts.html                |  3 +++
 app/templates/monthly_overview/fragments/list.html | 11 ++++++-----
 app/templates/monthly_overview/pages/overview.html |  4 +++-
 frontend/package-lock.json                         | 12 ++++++++++++
 frontend/package.json                              |  2 ++
 frontend/src/application/_htmx.js                  |  2 ++
 frontend/src/application/htmx.js                   |  6 ++++--
 frontend/webpack/webpack.common.js                 |  1 +
 9 files changed, 34 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/application/_htmx.js

diff --git a/app/templates/cotton/transaction/item.html b/app/templates/cotton/transaction/item.html
index 6a8a21c..6e99e74 100644
--- a/app/templates/cotton/transaction/item.html
+++ b/app/templates/cotton/transaction/item.html
@@ -94,7 +94,7 @@
                 data-bs-toggle="tooltip"
                 data-bs-title="{% translate "Edit" %}"
                 hx-get="{% url 'transaction_edit' transaction_id=transaction.id %}"
-                hx-target="#generic-offcanvas">
+                hx-target="#generic-offcanvas" hx-swap="innerHTML">
           <i class="fa-solid fa-pencil fa-fw"></i></a>
           <a class="btn btn-secondary btn-sm transaction-action"
                   role="button"
diff --git a/app/templates/includes/scripts.html b/app/templates/includes/scripts.html
index d9f65ba..c156627 100644
--- a/app/templates/includes/scripts.html
+++ b/app/templates/includes/scripts.html
@@ -10,9 +10,12 @@
 {% include 'includes/scripts/hyperscript/htmx_error_handler.html' %}
 {% include 'includes/scripts/hyperscript/sounds.html' %}
 {% include 'includes/scripts/hyperscript/swal.html' %}
+<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
 
 {% javascript_pack 'htmx' attrs="defer" %}
 {% javascript_pack 'charts' %}
+{#<script src="https://unpkg.com/htmx-ext-alpine-morph@2.0.0/alpine-morph.js"></script>#}
+
 
 <script>
 let tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
diff --git a/app/templates/monthly_overview/fragments/list.html b/app/templates/monthly_overview/fragments/list.html
index 2e1084f..9c82e44 100644
--- a/app/templates/monthly_overview/fragments/list.html
+++ b/app/templates/monthly_overview/fragments/list.html
@@ -3,7 +3,7 @@
 {% regroup transactions by date|customnaturaldate as transactions_by_date %}
 
 <div id="transactions-list"
-     _="on change or click
+     _="on change or click or htmx:afterSettle
           if no <input[type='checkbox']:checked/> in me
             add .tw-hidden to #actions-bar
           else
@@ -11,19 +11,20 @@
           end
         end">
   {% for x in transactions_by_date %}
-    <div>
+    <div x-data="{ isOpen: $persist(true).as('{{ x.grouper|slugify }}-state').using(sessionStorage) }" id="#{{ x.grouper|slugify }}">
       <div class="mt-3 mb-1 w-100 tw-text-base border-bottom bg-body">
         <a class="text-decoration-none d-inline-block w-100"
            role="button"
            data-bs-toggle="collapse"
-           data-bs-target="#{{ x.grouper|slugify }}"
+           data-bs-target="#{{ x.grouper|slugify }}-collapse"
            id="#{{ x.grouper|slugify }}-collapsible"
-           aria-expanded="true"
+           :aria-expanded="isOpen"
+           @click="isOpen = !isOpen"
            aria-controls="collapseExample">
         {{ x.grouper }}
         </a>
       </div>
-      <div class="collapse show" id="{{ x.grouper|slugify }}">
+      <div class="collapse" id="{{ x.grouper|slugify }}-collapse" :class="{ 'show': isOpen }">
         <div class="d-flex flex-column">
         {% for transaction in x.list %}
           <c-transaction.item
diff --git a/app/templates/monthly_overview/pages/overview.html b/app/templates/monthly_overview/pages/overview.html
index 6fcedaf..df46060 100644
--- a/app/templates/monthly_overview/pages/overview.html
+++ b/app/templates/monthly_overview/pages/overview.html
@@ -131,7 +131,9 @@
       <div id="transactions"
            class="show-loading"
            hx-get="{% url 'monthly_transactions_list' month=month year=year %}"
-           hx-trigger="load, updated from:window" hx-include="#filter, #order"></div>
+           hx-trigger="load, updated from:window" hx-include="#filter, #order" hx-ext="alpine-morph" hx-swap="morph" hx-target="#transactions-list">
+          <div id="transactions-list"></div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 345d243..d04ea26 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@alpinejs/mask": "^3.14.1",
+        "@alpinejs/morph": "^3.14.3",
         "@babel/core": "^7.16.7",
         "@babel/eslint-parser": "^7.16.5",
         "@babel/plugin-proposal-class-properties": "^7.16.7",
@@ -31,6 +32,7 @@
         "daisyui": "^4.12.13",
         "eslint": "^8.7.0",
         "eslint-webpack-plugin": "^3.1.1",
+        "htmx-ext-alpine-morph": "^2.0.0",
         "htmx.org": "^2.0.1",
         "hyperscript.org": "^0.9.12",
         "jquery": "^3.7.1",
@@ -72,6 +74,11 @@
       "resolved": "https://registry.npmjs.org/@alpinejs/mask/-/mask-3.14.1.tgz",
       "integrity": "sha512-xW5uyn9lFMpvdzA4RfSE3lj+HjA7BjtEk+QJXU7jB5Wxpe0Jk5qFOrCydTDl+bFkRwOk/fMe2PG7IWeWEnn4BA=="
     },
+    "node_modules/@alpinejs/morph": {
+      "version": "3.14.3",
+      "resolved": "https://registry.npmjs.org/@alpinejs/morph/-/morph-3.14.3.tgz",
+      "integrity": "sha512-qzazcvQZeVJAjxxHD41PdNoBOxVaPjA7TYyYkqNSYtlIdpVBPvxcCBV/41xD5EMYmR82wwfVqJOeJJgU6/M3Bg=="
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -5125,6 +5132,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/htmx-ext-alpine-morph": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/htmx-ext-alpine-morph/-/htmx-ext-alpine-morph-2.0.0.tgz",
+      "integrity": "sha512-eG2ki+VxnkQj+XF3125CCYbreI8uHRnYo3q7WbAVICXpwFQICGxoPJhSLLsoAWhjzpKln4shHmysXGNrYqOzDg=="
+    },
     "node_modules/htmx.org": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f530de9..4594dc0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@alpinejs/mask": "^3.14.1",
+    "@alpinejs/morph": "^3.14.3",
     "@babel/core": "^7.16.7",
     "@babel/eslint-parser": "^7.16.5",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
@@ -44,6 +45,7 @@
     "daisyui": "^4.12.13",
     "eslint": "^8.7.0",
     "eslint-webpack-plugin": "^3.1.1",
+    "htmx-ext-alpine-morph": "^2.0.0",
     "htmx.org": "^2.0.1",
     "hyperscript.org": "^0.9.12",
     "jquery": "^3.7.1",
diff --git a/frontend/src/application/_htmx.js b/frontend/src/application/_htmx.js
new file mode 100644
index 0000000..2cd43d0
--- /dev/null
+++ b/frontend/src/application/_htmx.js
@@ -0,0 +1,2 @@
+import htmx from "htmx.org";
+window.htmx = htmx;
diff --git a/frontend/src/application/htmx.js b/frontend/src/application/htmx.js
index b73d735..2ec7693 100644
--- a/frontend/src/application/htmx.js
+++ b/frontend/src/application/htmx.js
@@ -1,12 +1,14 @@
-import htmx from "htmx.org";
 import _hyperscript from 'hyperscript.org/dist/_hyperscript.min';
+import './_htmx.js';
+import 'htmx-ext-alpine-morph/alpine-morph';
 import Alpine from "alpinejs";
 import mask from '@alpinejs/mask';
+import morph from '@alpinejs/morph';
 
-window.htmx = htmx;
 window.Alpine = Alpine;
 
 Alpine.plugin(mask);
+Alpine.plugin(morph);
 Alpine.start();
 _hyperscript.browserInit();
 
diff --git a/frontend/webpack/webpack.common.js b/frontend/webpack/webpack.common.js
index 4fb37c6..8dafd9e 100644
--- a/frontend/webpack/webpack.common.js
+++ b/frontend/webpack/webpack.common.js
@@ -3,6 +3,7 @@ const Path = require("path");
 const {CleanWebpackPlugin} = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const WebpackAssetsManifest = require("webpack-assets-manifest");
+// eslint-disable-next-line no-unused-vars
 const webpack = require("webpack");
 
 const getEntryObject = () => {