Sessions: only show columns if relevant values are present (#8586)

This commit is contained in:
Michael Geers 2023-06-23 14:14:50 +02:00 • committed by GitHub
parent cc587dc2ce
commit f577724c52
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 67 additions and 10 deletions

View file

@ -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;
},

View file

@ -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");

View file

@ -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);
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);