diff --git a/app/javascript/elements/bar_chart.js b/app/javascript/elements/bar_chart.js
index 1e482c224..25302536a 100644
--- a/app/javascript/elements/bar_chart.js
+++ b/app/javascript/elements/bar_chart.js
@@ -1,7 +1,10 @@
export default class extends HTMLElement {
- static observedAttributes = ['data-labels', 'data-datasets']
-
connectedCallback () {
+ this.id = `bar-chart-${Math.random().toString(32).split('.')[1]}`
+
+ this.chartLabels = JSON.parse(this.dataset.labels || '[]')
+ this.chartDatasets = JSON.parse(this.dataset.datasets || '[]')
+
this.initChart()
}
@@ -12,15 +15,6 @@ export default class extends HTMLElement {
}
}
- attributeChangedCallback (_, oldValue, newValue) {
- if (!this.chartInstance || oldValue === newValue) return
-
- this.chartInstance.data.labels = JSON.parse(this.dataset.labels || '[]')
- this.chartInstance.data.datasets = JSON.parse(this.dataset.datasets || '[]')
-
- this.chartInstance.update()
- }
-
async initChart () {
const { default: Chart } = await import(/* webpackChunkName: "chartjs" */ 'chart.js/auto')
@@ -31,8 +25,8 @@ export default class extends HTMLElement {
this.chartInstance = new Chart(ctx, {
type: 'bar',
data: {
- labels: JSON.parse(this.dataset.labels || '[]'),
- datasets: JSON.parse(this.dataset.datasets || '[]')
+ labels: this.chartLabels,
+ datasets: this.chartDatasets
},
options: {
responsive: true,
diff --git a/app/javascript/elements/email_editor.js b/app/javascript/elements/email_editor.js
index 030eeaa42..ad04ef8c1 100644
--- a/app/javascript/elements/email_editor.js
+++ b/app/javascript/elements/email_editor.js
@@ -39,6 +39,8 @@ export default targetable(class extends HTMLElement {
]
connectedCallback () {
+ this.id = `email-editor-${Math.random().toString(32).split('.')[1]}`
+
this.mount()
if (this.input.value) {
diff --git a/app/javascript/elements/html_editor.js b/app/javascript/elements/html_editor.js
index 0c851ee5e..a999436a7 100644
--- a/app/javascript/elements/html_editor.js
+++ b/app/javascript/elements/html_editor.js
@@ -458,6 +458,8 @@ export default actionable(targetable(class extends HTMLElement {
async connectedCallback () {
if (!this.textarea || !this.editorElement) return
+ this.id = `html-editor-${Math.random().toString(32).split('.')[1]}`
+
this.textarea.style.display = 'none'
this.adjustShortcutsForPlatform()
diff --git a/app/javascript/elements/markdown_editor.js b/app/javascript/elements/markdown_editor.js
index 9e31737cf..479be4e4f 100644
--- a/app/javascript/elements/markdown_editor.js
+++ b/app/javascript/elements/markdown_editor.js
@@ -143,6 +143,8 @@ export default actionable(targetable(class extends HTMLElement {
async connectedCallback () {
if (!this.textarea || !this.editorElement) return
+ this.id = `markdown-editor-${Math.random().toString(32).split('.')[1]}`
+
this.textarea.style.display = 'none'
this.adjustShortcutsForPlatform()
diff --git a/app/javascript/elements/masked_input.js b/app/javascript/elements/masked_input.js
index 14ee29ff0..0dde13721 100644
--- a/app/javascript/elements/masked_input.js
+++ b/app/javascript/elements/masked_input.js
@@ -1,14 +1,13 @@
export default class extends HTMLElement {
connectedCallback () {
- const maskedToken = this.input.value
-
this.input.addEventListener('focus', () => {
+ this.maskedToken = this.input.value
this.input.value = this.dataset.token
this.input.select()
})
this.input.addEventListener('focusout', () => {
- this.input.value = maskedToken
+ this.input.value = this.maskedToken
})
}
diff --git a/app/javascript/elements/menu_active.js b/app/javascript/elements/menu_active.js
index 819e92592..e71d55f30 100644
--- a/app/javascript/elements/menu_active.js
+++ b/app/javascript/elements/menu_active.js
@@ -1,5 +1,7 @@
export default class extends HTMLElement {
connectedCallback () {
+ this.id = `menu-active-${Math.random().toString(32).split('.')[1]}`
+
this.querySelectorAll('a').forEach((link) => {
if (document.location.pathname.startsWith(link.pathname) && !link.getAttribute('href').startsWith('http')) {
link.classList.add('bg-base-300')
diff --git a/app/javascript/elements/scroll_fade.js b/app/javascript/elements/scroll_fade.js
index 20c4906a5..0d34de9a4 100644
--- a/app/javascript/elements/scroll_fade.js
+++ b/app/javascript/elements/scroll_fade.js
@@ -1,5 +1,7 @@
export default class extends HTMLElement {
connectedCallback () {
+ this.id = `scroll-fade-${Math.random().toString(32).split('.')[1]}`
+
this.addEventListener('scroll', this.updateFade, { passive: true })
window.addEventListener('resize', this.updateFade)
diff --git a/app/javascript/elements/set_timezone.js b/app/javascript/elements/set_timezone.js
index ab3e16bc2..d1370e52c 100644
--- a/app/javascript/elements/set_timezone.js
+++ b/app/javascript/elements/set_timezone.js
@@ -1,5 +1,7 @@
export default class extends HTMLElement {
connectedCallback () {
+ this.id = `set-timezone-${Math.random().toString(32).split('.')[1]}`
+
if (this.dataset.inputId) {
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
diff --git a/app/views/icons/_brand_google.html.erb b/app/views/icons/_brand_google.html.erb
index 8b8e743e4..8d1a99f8a 100644
--- a/app/views/icons/_brand_google.html.erb
+++ b/app/views/icons/_brand_google.html.erb
@@ -1,14 +1,14 @@
diff --git a/app/views/setup/index.html.erb b/app/views/setup/index.html.erb
index f043513b1..60deae1da 100644
--- a/app/views/setup/index.html.erb
+++ b/app/views/setup/index.html.erb
@@ -24,8 +24,8 @@
<% end %>
<%= fields_for @account do |ff| %>
-
<%= ff.hidden_field :timezone %>
+
<%= ff.label :name, t('company_name'), class: 'label' %>
<%= ff.text_field :name, required: true, class: 'base-input' %>
diff --git a/app/views/shared/_settings_nav.html.erb b/app/views/shared/_settings_nav.html.erb
index a1a183a0b..3dd2ea2eb 100644
--- a/app/views/shared/_settings_nav.html.erb
+++ b/app/views/shared/_settings_nav.html.erb
@@ -8,9 +8,9 @@
<% end %>
-