Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-23 15:19:38 +02:00
Code Issues Releases Activity Actions

Fix Turbo bug with tabs (#506)

Browse source
This commit is contained in:
Zach Gollwitzer 2024-03-01 17:14:06 -05:00 • committed by GitHub
parent ccb1bab4b1
commit 89ea12e9a1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 31 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

49
app/javascript/controllers/tabs_controller.js
View file

@ -7,27 +7,38 @@ export default class extends Controller {
static values = { defaultTab: String };
connect() {
const defaultTab = this.defaultTabValue;
this.tabTargets.forEach((tab) => {
if (tab.id === defaultTab) {
tab.hidden = false;
this.btnTargets
.find((btn) => btn.dataset.id === defaultTab)
.classList.add(...this.activeClasses);
} else {
tab.hidden = true;
}
});
this.updateClasses(this.defaultTabValue);
document.addEventListener(
"turbo:load",
this.updateClasses.bind(this, this.defaultTabValue)
);
}
disconnect() {
document.removeEventListener(
"turbo:load",
this.updateClasses.bind(this, this.defaultTabValue)
);
}
select(event) {
const selectedTabId = event.currentTarget.dataset.id;
this.tabTargets.forEach((tab) => (tab.hidden = tab.id !== selectedTabId));
this.btnTargets.forEach((btn) =>
btn.classList.toggle(
...this.activeClasses,
btn.dataset.id === selectedTabId
)
);
this.updateClasses(event.target.dataset.id);
}
updateClasses(selectedId) {
this.btnTargets.forEach((btn) => btn.classList.remove(this.activeClass));
this.tabTargets.forEach((tab) => tab.classList.add("hidden"));
this.btnTargets.forEach((btn) => {
if (btn.dataset.id === selectedId) {
btn.classList.add(this.activeClass);
}
});
this.tabTargets.forEach((tab) => {
if (tab.id === selectedId) {
tab.classList.remove("hidden");
}
});
}
}

2
app/views/accounts/show.html.erb
View file

@ -70,7 +70,7 @@
<div data-tabs-target="tab" id="account-history-tab">
<%= render partial: "accounts/account_history", locals: { account: @account, valuation_series: @valuation_series } %>
</div>
<div data-tabs-target="tab" id="account-transactions-tab">
<div data-tabs-target="tab" id="account-transactions-tab" class="hidden">
<%= render partial: "accounts/transactions", locals: { transactions: @account.transactions.order(date: :desc) } %>
</div>
</div>