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

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 }; static values = { defaultTab: String };
connect() { connect() {
const defaultTab = this.defaultTabValue; this.updateClasses(this.defaultTabValue);
this.tabTargets.forEach((tab) => { document.addEventListener(
if (tab.id === defaultTab) { "turbo:load",
tab.hidden = false; this.updateClasses.bind(this, this.defaultTabValue)
this.btnTargets );
.find((btn) => btn.dataset.id === defaultTab) }
.classList.add(...this.activeClasses);
} else { disconnect() {
tab.hidden = true; document.removeEventListener(
} "turbo:load",
}); this.updateClasses.bind(this, this.defaultTabValue)
);
} }
select(event) { select(event) {
const selectedTabId = event.currentTarget.dataset.id; this.updateClasses(event.target.dataset.id);
this.tabTargets.forEach((tab) => (tab.hidden = tab.id !== selectedTabId)); }
this.btnTargets.forEach((btn) =>
btn.classList.toggle( updateClasses(selectedId) {
...this.activeClasses, this.btnTargets.forEach((btn) => btn.classList.remove(this.activeClass));
btn.dataset.id === selectedTabId 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"> <div data-tabs-target="tab" id="account-history-tab">
<%= render partial: "accounts/account_history", locals: { account: @account, valuation_series: @valuation_series } %> <%= render partial: "accounts/account_history", locals: { account: @account, valuation_series: @valuation_series } %>
</div> </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) } %> <%= render partial: "accounts/transactions", locals: { transactions: @account.transactions.order(date: :desc) } %>
</div> </div>
</div> </div>