#633 - show chart button: enable on prefill if chart is selected

src/main/resources/static/js/charts.js

@@ -76,18 +76,18 @@ $(document).ready(function()
     {
         toggleChartTypeButtons('button-display-type', this);
         hideGroupTypeButtonsIfOnlyOneDistinctGroup();
-        filterChartPreviews(-1);
+        filterChartPreviews('');
     });
 
     $('.button-group-type').click(function()
     {
         toggleChartTypeButtons('button-group-type', this);
-        filterChartPreviews(-1);
+        filterChartPreviews('');
     });
 
     $('.chart-preview-column').click(function()
     {
-        unsetActiveChartPreview();
+        unsetActiveChartPreview('');
 
         this.querySelector('.chart-preview').classList.toggle('active', true);
         document.getElementsByName('displayType')[0].value = this.dataset.displayType;
@@ -114,11 +114,13 @@ $(document).ready(function()
     {
         document.getElementsByName('NewChartSettings')[0].classList.toggle('hidden', false);
         document.getElementById('buttonShowChartSettings').classList.toggle('hidden', true);
+
+        checkShowChartButton();
     });
 
     if($(".chart-preview-column").length)
     {
-        filterChartPreviews(selectChartID);
+        filterChartPreviews(document.getElementsByName('chartID')[0].value);
 
         let showEditSettingsButton = document.getElementsByName('NewChartSettings')[0].classList.contains('hidden');
         document.getElementById('buttonShowChartSettings').classList.toggle('hidden', !showEditSettingsButton);
@@ -328,7 +330,7 @@ function unsetActiveChartPreview(initiallySelectedChartID)
         column.querySelector('.chart-preview').classList.toggle('active', column.dataset.id === initiallySelectedChartID);
     }
 
-    document.getElementsByName('chartID')[0].value = '';
+    document.getElementsByName('chartID')[0].value = initiallySelectedChartID;
     checkShowChartButton();
 }
 

src/main/resources/templates/charts/charts.ftl

@@ -66,11 +66,7 @@
                                 </div>
                             </div>
                         </div>
-                        <input type="hidden" name="chartID" value="">
-
-                        <script>
-                            selectChartID="${chartSettings.getChartID()!-1}";
-                        </script>
+                        <input type="hidden" name="chartID" value="${chartSettings.getChartID()!''}">
 
                         <@dateSelect/>
 

src/test/java/de/deadlocker8/budgetmaster/integration/selenium/ChartTest.java

@@ -78,7 +78,7 @@ class ChartTest extends SeleniumTestBase
 		assertThat(displayedChartPreviews)
 				.hasSize(3);
 		assertThat(displayedChartPreviews.get(0).findElement(By.cssSelector(".card-action span")).getText())
-				.isEqualTo("Incomes/Expenditures per month");
+				.isEqualTo("Incomes/Expenditures");
 
 		// filter
 		assertThat(driver.findElement(By.id("filterActiveBadge")).isDisplayed()).isFalse();
@@ -111,7 +111,7 @@ class ChartTest extends SeleniumTestBase
 		assertThat(displayedChartPreviews)
 				.hasSize(1);
 		assertThat(displayedChartPreviews.get(0).findElement(By.cssSelector(".card-action span")).getText())
-				.isEqualTo("Incomes/Expenditures per month");
+				.isEqualTo("Incomes/Expenditures");
 
 		// filter
 		assertThat(driver.findElement(By.id("filterActiveBadge")).isDisplayed()).isFalse();
@@ -188,7 +188,7 @@ class ChartTest extends SeleniumTestBase
 		assertThat(displayedChartPreviews)
 				.hasSize(1);
 		assertThat(displayedChartPreviews.get(0).findElement(By.cssSelector(".card-action span")).getText())
-				.isEqualTo("Incomes/Expenditures per year");
+				.isEqualTo("Incomes/Expenditures");
 
 		// filter
 		assertThat(driver.findElement(By.id("filterActiveBadge")).isDisplayed()).isFalse();
@@ -213,7 +213,7 @@ class ChartTest extends SeleniumTestBase
 		assertThat(activeChartPreviews)
 				.hasSize(1);
 		assertThat(activeChartPreviews.get(0).findElement(By.cssSelector(".card-action span")).getText())
-				.isEqualTo("Incomes/Expenditures per month by categories");
+				.isEqualTo("Incomes/Expenditures by categories");
 
 		// button
 		assertThat(driver.findElement(By.name("buttonSave")).isEnabled()).isTrue();
@@ -317,6 +317,30 @@ class ChartTest extends SeleniumTestBase
 		assertThat(driver.findElements(By.cssSelector(".chart-canvas .plot-container"))).hasSize(1);
 	}
 
+	@Test
+	void test_EnabledButtonAfterShowChart()
+	{
+		driver.get(helper.getUrl() + "/charts");
+
+		final String chartPreviewSelector = ".chart-preview-column[data-id='6']";
+		driver.findElement(By.cssSelector(chartPreviewSelector)).click();
+
+		WebDriverWait wait = new WebDriverWait(driver, 5);
+		wait.until(ExpectedConditions.attributeContains(By.cssSelector(chartPreviewSelector + " .chart-preview"), "class", "active"));
+
+		driver.findElement(By.name("buttonSave")).click();
+
+		wait = new WebDriverWait(driver, 5);
+		wait.until(ExpectedConditions.visibilityOfElementLocated(By.className("chart-canvas")));
+
+		driver.findElement(By.id("buttonShowChartSettings")).click();
+
+		wait = new WebDriverWait(driver, 5);
+		wait.until(ExpectedConditions.attributeContains(By.cssSelector(chartPreviewSelector + " .chart-preview"), "class", "active"));
+
+		assertThat(driver.findElement(By.name("buttonSave")).isEnabled()).isTrue();
+	}
+
 	private String getSelectedType(String selector)
 	{
 		final List<WebElement> activeTypeButtons = driver.findElements(By.cssSelector(selector));