starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-03-21 08:59:14 +01:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

feat: keep collapsible state on montlhly overview

Browse Source
This commit is contained in:
Herculino Trotta
2024-10-30 16:07:32 -03:00
parent 43c429406d
commit 0726350b45
9 changed files with 34 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/templates/cotton/transaction/item.html
View File

@@ -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"

3
app/templates/includes/scripts.html
View File

@@ -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;

11
app/templates/monthly_overview/fragments/list.html
View File

@@ -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

4
app/templates/monthly_overview/pages/overview.html
View File

@@ -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>

12
frontend/package-lock.json generated
View File

@@ -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",

2
frontend/package.json
View File

@@ -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",

2
frontend/src/application/_htmx.js Normal file
View File

@@ -0,0 +1,2 @@
import htmx from "htmx.org";
window.htmx = htmx;

6
frontend/src/application/htmx.js
View File

@@ -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();

1
frontend/webpack/webpack.common.js
View File

@@ -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 = () => {