feat: keep natural date collapsible state

app/templates/monthly_overview/fragments/list.html

@@ -11,20 +11,28 @@
           end
         end">
   {% for x in transactions_by_date %}
-    <div x-data="{ isOpen: $persist(true).as('{{ x.grouper|slugify }}-state').using(sessionStorage) }" id="#{{ x.grouper|slugify }}">
+    <div id="{{ x.grouper|slugify }}"
+         _="on htmx:afterSettle from #transactions if sessionStorage.getItem(my id) is null then sessionStorage.setItem(my id, 'true')">
       <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 }}-collapse"
+           data-bs-target="#c-{{ x.grouper|slugify }}-collapse"
-           id="#{{ x.grouper|slugify }}-collapsible"
+           id="c-{{ x.grouper|slugify }}-collapsible"
-           :aria-expanded="isOpen"
+           aria-expanded="false"
-           @click="isOpen = !isOpen"
+           aria-controls="c-{{ x.grouper|slugify }}-collapse">
-           aria-controls="collapseExample">
         {{ x.grouper }}
         </a>
       </div>
-      <div class="collapse" id="{{ x.grouper|slugify }}-collapse" :class="{ 'show': isOpen }">
+      <div class="collapse" id="c-{{ x.grouper|slugify }}-collapse"
+           _="on shown.bs.collapse sessionStorage.setItem(the closest parent @id, 'true')
+              on hidden.bs.collapse sessionStorage.setItem(the closest parent @id, 'false')
+              on htmx:afterSettle from #transactions
+                set state to sessionStorage.getItem(the closest parent @id)
+                if state is 'true' or state is null
+                  add .show to me
+                  set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to true
+                end">
         <div class="d-flex flex-column">
         {% for transaction in x.list %}
           <c-transaction.item

app/templates/monthly_overview/pages/overview.html

@@ -131,8 +131,7 @@
       <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" hx-ext="alpine-morph" hx-swap="morph" hx-target="#transactions-list">
+           hx-trigger="load, updated from:window" hx-include="#filter, #order">
-          <div id="transactions-list"></div>
       </div>
     </div>
   </div>

app/templates/transactions/fragments/list_all.html

@@ -12,19 +12,28 @@
           end
         end">
   {% for x in transactions_by_date %}
-    <div>
+    <div id="{{ x.grouper|slugify }}"
+         _="on htmx:afterSettle from #transactions if sessionStorage.getItem(my id) is null then sessionStorage.setItem(my id, 'true')">
       <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="#c-{{ x.grouper|slugify }}-collapse"
-           id="#{{ x.grouper|slugify }}-collapsible"
+           id="c-{{ x.grouper|slugify }}-collapsible"
            aria-expanded="true"
-           aria-controls="collapseExample">
+           aria-controls="c-{{ x.grouper|slugify }}-collapse">
         {{ x.grouper }}
         </a>
       </div>
-      <div class="collapse show" id="{{ x.grouper|slugify }}">
+      <div class="collapse" id="c-{{ x.grouper|slugify }}-collapse"
+           _="on shown.bs.collapse sessionStorage.setItem(the closest parent @id, 'true')
+              on hidden.bs.collapse sessionStorage.setItem(the closest parent @id, 'false')
+              on htmx:afterSettle from #transactions
+                set state to sessionStorage.getItem(the closest parent @id)
+                if state is 'true' or state is null
+                  add .show to me
+                  set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to true
+                end">
         <div class="d-flex flex-column">
         {% for transaction in x.list %}
           <c-transaction.item :transaction="transaction"></c-transaction.item>

frontend/package-lock.json

@@ -10,7 +10,6 @@
       "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",
@@ -32,7 +31,6 @@
         "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",
@@ -74,11 +72,6 @@
       "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",
@@ -5132,11 +5125,6 @@
         "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",

frontend/package.json

@@ -23,7 +23,6 @@
   },
   "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",
@@ -45,7 +44,6 @@
     "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",

frontend/src/application/htmx.js

@@ -1,14 +1,11 @@
 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.Alpine = Alpine;
 
 Alpine.plugin(mask);
-Alpine.plugin(morph);
 Alpine.start();
 _hyperscript.browserInit();