From f577724c528e68e218a8316e2bdb1e63ee6f5bbb Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 23 Jun 2023 14:14:50 +0200
Subject: [PATCH] Sessions: only show columns if relevant values are present
 (#8586)

---
 assets/js/views/ChargingSessions.vue | 41 ++++++++++++++++++++++++----
 tests/sessions.spec.js               | 27 ++++++++++++++++++
 tests/sessions.sql                   |  9 +++---
 3 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/assets/js/views/ChargingSessions.vue b/assets/js/views/ChargingSessions.vue
index 2133a00d2..4046d39fe 100644
--- a/assets/js/views/ChargingSessions.vue
+++ b/assets/js/views/ChargingSessions.vue
@@ -49,7 +49,12 @@
 								<th scope="col" class="align-top ps-0">
 									{{ $t("sessions.date") }}
 								</th>
-								<th scope="col" class="align-top">
+								<th
+									v-if="showLoadpoints"
+									scope="col"
+									class="align-top"
+									data-testid="loadpoint"
+								>
 									{{ $t("sessions.loadpoint") }}
 									<label class="position-relative d-block">
 										<select
@@ -77,7 +82,12 @@
 										</span>
 									</label>
 								</th>
-								<th scope="col" class="align-top">
+								<th
+									v-if="showVehicles"
+									scope="col"
+									class="align-top"
+									data-testid="vehicle"
+								>
 									{{ $t("sessions.vehicle") }}
 									<label class="position-relative d-block">
 										<select
@@ -137,7 +147,12 @@
 										{{ fmtPricePerKWh(pricePerKWh, currency) }}
 									</div>
 								</th>
-								<th v-if="hasCo2" scope="col" class="align-top text-end pe-0">
+								<th
+									v-if="hasCo2"
+									scope="col"
+									class="align-top text-end pe-0"
+									data-testid="co2"
+								>
 									{{ $t("sessions.co2") }}
 									<div v-if="co2PerKWh != null" class="text-muted fw-normal">
 										{{ fmtCo2Medium(co2PerKWh) }}
@@ -154,12 +169,12 @@
 								@click="showDetails(session.id)"
 							>
 								<td class="ps-0">
-									{{ fmtFullDateTime(new Date(session.created), true) }}
+									<u>{{ fmtFullDateTime(new Date(session.created), true) }}</u>
 								</td>
-								<td>
+								<td v-if="showLoadpoints">
 									{{ session.loadpoint }}
 								</td>
-								<td>
+								<td v-if="showVehicles">
 									{{ session.vehicle }}
 								</td>
 								<td class="text-end">
@@ -314,6 +329,20 @@ export default {
 		hasCo2() {
 			return this.filteredSessions.find((s) => s.co2PerKWh != null) != null;
 		},
+		showVehicles() {
+			return this.hasMultipleVehicles || this.vehicleFilter;
+		},
+		showLoadpoints() {
+			return this.hasMultipleLoadpoints || this.loadpointFilter;
+		},
+		hasMultipleVehicles() {
+			const vehicles = this.currentSessions.map((s) => s.vehicle);
+			return new Set(vehicles).size > 1;
+		},
+		hasMultipleLoadpoints() {
+			const loadpoints = this.currentSessions.map((s) => s.loadpoint);
+			return new Set(loadpoints).size > 1;
+		},
 		pricePerKWh() {
 			return this.price / this.chargedEnergy;
 		},
diff --git a/tests/sessions.spec.js b/tests/sessions.spec.js
index 65b01fd37..a3d7c5587 100644
--- a/tests/sessions.spec.js
+++ b/tests/sessions.spec.js
@@ -132,6 +132,33 @@ test.describe("filter", async () => {
   });
 });
 
+test.describe("columns", async () => {
+  test("show vehicle column if multiple different exist", async ({ page }) => {
+    await page.goto("/#/sessions?year=2023&month=5");
+    await expect(page.getByTestId("vehicle")).toBeVisible();
+  });
+  test("hide vehicle column only one exists", async ({ page }) => {
+    await page.goto("/#/sessions?year=2023&month=3");
+    await expect(page.getByTestId("vehicle")).toHaveCount(0);
+  });
+  test("show loadpoint column if multiple different exist", async ({ page }) => {
+    await page.goto("/#/sessions?year=2023&month=5");
+    await expect(page.getByTestId("loadpoint")).toBeVisible();
+  });
+  test("hide loadpoint column only one exists", async ({ page }) => {
+    await page.goto("/#/sessions?year=2023&month=3");
+    await expect(page.getByTestId("loadpoint")).toHaveCount(0);
+  });
+  test("show co2 column it has values", async ({ page }) => {
+    await page.goto("/#/sessions?year=2023&month=3");
+    await expect(page.getByTestId("co2")).toBeVisible();
+  });
+  test("hide co2 column if it doesnt have values", async ({ page }) => {
+    await page.goto("/#/sessions?year=2023&month=5");
+    await expect(page.getByTestId("co2")).toHaveCount(0);
+  });
+});
+
 test.describe("csv export", async () => {
   test("total export", async ({ page }) => {
     await page.goto("/#/sessions?year=2023&month=5");
diff --git a/tests/sessions.sql b/tests/sessions.sql
index 632a01a5f..89f139031 100644
--- a/tests/sessions.sql
+++ b/tests/sessions.sql
@@ -17,7 +17,8 @@ CREATE TABLE `sessions` (
   PRIMARY KEY (`id`)
 );
 
-INSERT INTO `sessions` VALUES (1,'2023-05-02 08:00:00.0+02:00','2023-05-02 12:00:00.0+02:00','Carport',NULL,'blauer e-Golf',NULL,NULL,10,NULL,100,2,0.2,NULL);
-INSERT INTO `sessions` VALUES (2,'2023-05-02 08:00:00.0+02:00','2023-05-02 12:00:00.0+02:00','Carport',NULL,'blauer e-Golf',NULL,NULL,2.5,NULL,88.21,0.75,0.3,NULL);
-INSERT INTO `sessions` VALUES (3,'2023-05-03 16:00:00.0+02:00','2023-05-03 20:00:00.0+02:00','Carport',NULL,'weißes Model 3',NULL,NULL,2.5,NULL,50,0.25,0.1,NULL);
-INSERT INTO `sessions` VALUES (4,'2023-05-04 22:00:00.0+02:00','2023-05-05 06:00:00.0+02:00','Garage',NULL,'weißes Model 3',NULL,NULL,5,NULL,0,2.5,0.5,NULL);
\ No newline at end of file
+INSERT INTO `sessions` VALUES (1,'2023-03-01 08:00:00.0+02:00','2023-05-02 12:00:00.0+02:00','Carport',NULL,'blauer e-Golf',NULL,NULL,10,NULL,100,2,0.2,300);
+INSERT INTO `sessions` VALUES (2,'2023-05-02 08:00:00.0+02:00','2023-05-02 12:00:00.0+02:00','Carport',NULL,'blauer e-Golf',NULL,NULL,10,NULL,100,2,0.2,NULL);
+INSERT INTO `sessions` VALUES (3,'2023-05-02 08:00:00.0+02:00','2023-05-02 12:00:00.0+02:00','Carport',NULL,'blauer e-Golf',NULL,NULL,2.5,NULL,88.21,0.75,0.3,NULL);
+INSERT INTO `sessions` VALUES (4,'2023-05-03 16:00:00.0+02:00','2023-05-03 20:00:00.0+02:00','Carport',NULL,'weißes Model 3',NULL,NULL,2.5,NULL,50,0.25,0.1,NULL);
+INSERT INTO `sessions` VALUES (5,'2023-05-04 22:00:00.0+02:00','2023-05-05 06:00:00.0+02:00','Garage',NULL,'weißes Model 3',NULL,NULL,5,NULL,0,2.5,0.5,NULL);
\ No newline at end of file