diff --git a/app/changelogs/CHANGELOG-unreleased.md b/app/changelogs/CHANGELOG-unreleased.md
index 27f81a04b7608890cbb7927fe32b17d420dfde00..f39bbeb5b63c6487d485ca64475a0aefd07009fb 100644
--- a/app/changelogs/CHANGELOG-unreleased.md
+++ b/app/changelogs/CHANGELOG-unreleased.md
@@ -32,6 +32,7 @@
- transect proposal: move sections into table and remove card content
- transect proposal: respect style guide for section details content
- transect proposal: new style for section habitats
+- transect inspection- summary: change layout and structure of summary
### Fixed
diff --git a/app/src/components/TransectInspectionSummary.ts b/app/src/components/TransectInspectionSummary.ts
index c16b38d12b888d3a020cc5b73ad34c2485b5d27a..614158333e14295361fba61f849a06f4df46d60a 100644
--- a/app/src/components/TransectInspectionSummary.ts
+++ b/app/src/components/TransectInspectionSummary.ts
@@ -172,7 +172,7 @@ export default class TransectInspectionSummary extends Vue {
private get observersUserNames(): string {
if (this.inspectionHeaderData.observers) {
const observersUserNameList = this.inspectionHeaderData.observers.map((observer) => observer.username);
- return observersUserNameList.join(",");
+ return observersUserNameList.join(", ");
} else {
return "";
}
diff --git a/app/src/components/TransectInspectionSummary.vue b/app/src/components/TransectInspectionSummary.vue
index f4e51647af4ff4e87eb8780d5272d53b4f770a6b..ca746770bb4fe4d13131c22e6fa886877b1e841d 100644
--- a/app/src/components/TransectInspectionSummary.vue
+++ b/app/src/components/TransectInspectionSummary.vue
@@ -1,178 +1,209 @@
<template>
- <v-list shaped>
- <v-list-group>
- <template v-slot:activator>
- <v-list-item-content data-testid="transectSummaryHeader">
- <v-list-item-title>{{ $t("transectInspection.headerData.title") }}</v-list-item-title>
- </v-list-item-content>
- </template>
+ <v-card>
+ <v-container>
+ <v-row>
+ <v-col cols="12" lg="6" class="my-5">
+ <v-card-title class="font-weight-bold">
+ {{ $t("transectInspection.summary.inspectionStart") }}
+ </v-card-title>
+ <v-row>
+ <v-col cols="6" class="my-5">
+ {{ $t("transectInspection.headerData.transect") }}
+ <v-text-field
+ readonly
+ :value="inspectionHeaderData.transect.codeAndName"
+ class="ufz--transect-inspection-summary--transect-start" />
+ <span v-if="inspectionHeaderData.observers[0] !== undefined"
+ >{{ $t("transectInspection.headerData.observer") }}
+ <v-text-field
+ class="ufz--transect-inspection-summary--observers-start"
+ readonly
+ style="border-style: none !important"
+ :value="observersUserNames" />
+ </span>
+ </v-col>
+ <v-col cols="6" class="my-5"
+ >{{ $t("transectInspection.headerData.startDate") }}
+ <v-text-field
+ readonly
+ append-icon="mdi-calendar-blank-outline"
+ class="ufz--transect-inspection-summary--start-date"
+ :value="formatDBToUIDate(inspectionHeaderData.startDate)" />
+ {{ $t("transectInspection.headerData.startTime") }}
+ <v-text-field
+ readonly
+ append-icon="mdi-clock-time-three-outline"
+ class="ufz--transect-inspection-summary--start-time"
+ :value="inspectionHeaderData.startTime" />
+ </v-col>
+ </v-row>
+ <v-card-title class="font-weight-bold">
+ {{ $t("transectInspection.summary.weatherInformationStart") }}
+ </v-card-title>
+ <v-row>
+ <v-col cols="6" class="my-5">
+ {{ $t("transectInspection.headerData.windForce") }}
+ <v-text-field
+ readonly
+ suffix="Bft"
+ class="ufz--transect-inspection-summary--wind-force-start"
+ :value="inspectionHeaderData.windForceStart" />
+ {{ $t("transectInspection.headerData.temperature") }}
+ <v-text-field
+ readonly
+ suffix="°C"
+ class="ufz--transect-inspection-summary--temperature-start"
+ :value="inspectionHeaderData.temperatureStart" />
+ </v-col>
+ <v-col cols="6" class="my-5">
+ {{ $t("transectInspection.headerData.cloudCover") }}
+ <v-text-field
+ readonly
+ suffix="%"
+ class="ufz--transect-inspection-summary--cloud-cover-start"
+ :value="inspectionHeaderData.cloudsStart" />
+ </v-col>
+ </v-row>
+ </v-col>
+ <v-col lg="6" cols="12" class="my-5">
+ <v-card-title class="font-weight-bold">
+ {{ $t("transectInspection.summary.inspectionEnd") }}</v-card-title
+ >
+ <v-row>
+ <v-col cols="6" class="my-5">
+ {{ $t("transectInspection.headerData.transect") }}
+ <v-text-field
+ readonly
+ class="ufz--transect-inspection-summary--transect-end"
+ :value="inspectionHeaderData.transect.codeAndName" />
+ <span v-if="inspectionHeaderData.observers[0] !== undefined"
+ >{{ $t("transectInspection.headerData.observer") }}
+ <v-text-field
+ readonly
+ class="ufz--transect-inspection-summary--observers-end"
+ :value="observersUserNames" />
+ </span>
+ </v-col>
+ <v-col cols="6" class="my-5">
+ {{ $t("transectInspection.headerData.startDate") }}
+ <v-text-field
+ readonly
+ append-icon="mdi-calendar-blank-outline"
+ class="ufz--transect-inspection-summary--end-date"
+ :value="formatDBToUIDate(inspectionFooterData.endDate)" />
+ {{ $t("transectInspection.headerData.startTime") }}
+ <v-text-field
+ readonly
+ append-icon="mdi-clock-time-three-outline"
+ class="ufz--transect-inspection-summary--end-time"
+ :value="inspectionFooterData.endTime" />
+ </v-col>
+ </v-row>
+ <v-card-title class="font-weight-bold">
+ {{ $t("transectInspection.summary.weatherInformationEnd") }}</v-card-title
+ >
+ <v-row>
+ <v-col cols="6" class="my-5">
+ {{ $t("transectInspection.headerData.windForce") }}
+ <v-text-field
+ readonly
+ suffix="Bft"
+ class="ufz--transect-inspection-summary--wind-force-end"
+ :value="inspectionFooterData.windForceEnd" />
+ {{ $t("transectInspection.headerData.temperature") }}
+ <v-text-field
+ readonly
+ suffix="°C"
+ class="ufz--transect-inspection-summary--temperature-end"
+ :value="inspectionFooterData.temperatureEnd" />
+ </v-col>
+ <v-col cols="6" class="my-5">
+ {{ $t("transectInspection.headerData.cloudCover") }}
+ <v-text-field
+ readonly
+ suffix="%"
+ class="ufz--transect-inspection-summary--cloud-cover-end"
+ :value="inspectionFooterData.cloudsEnd" />
+ </v-col>
+ </v-row>
+ </v-col>
+ </v-row>
+ </v-container>
+ <v-list shaped>
+ <v-list-group group no-action>
+ <template v-slot:activator>
+ <v-list-item-title class="ufz--transect-inspection-summary--transect-summary-main"
+ >{{ $t("transectInspection.mainData.title") }}
+ </v-list-item-title>
+ </template>
- <v-divider />
- <v-list-item dense>
- <v-list-item-title
- v-if="inspectionHeaderData.transect"
- data-testid="transectSummaryHeaderTransect"
- v-text="
- $t('transectInspection.headerData.transect') + ': ' + inspectionHeaderData.transect.codeAndName
- "></v-list-item-title>
- </v-list-item>
- <v-list-item v-if="inspectionHeaderData.observers[0] !== undefined" dense>
- <v-list-item-title
- data-testid="transectSummaryHeaderObserver"
- v-text="
- $t('transectInspection.headerData.observer') + ': ' + observersUserNames
- "></v-list-item-title>
- </v-list-item>
- <v-list-item dense>
- <v-list-item-title
- data-testid="transectSummaryHeaderWind"
- v-text="
- $t('transectInspection.headerData.windForce') + ': ' + inspectionHeaderData.windForceStart
- "></v-list-item-title>
- </v-list-item>
- <v-list-item dense>
- <v-list-item-title
- data-testid="transectSummaryHeaderClouds"
- v-text="
- $t('transectInspection.headerData.cloudCover') + ': ' + inspectionHeaderData.cloudsStart
- "></v-list-item-title>
- </v-list-item>
- <v-list-item dense>
- <v-list-item-title
- data-testid="transectSummaryHeaderTemperature"
- v-text="
- $t('transectInspection.headerData.temperature') + ': ' + inspectionHeaderData.temperatureStart
- "></v-list-item-title>
- </v-list-item>
- <v-list-item dense>
- <v-list-item-title
- data-testid="transectSummaryHeaderDate"
- v-text="
- $t('transectInspection.headerData.startDate') +
- ': ' +
- formatDBToUIDate(inspectionHeaderData.startDate)
- " />
- </v-list-item>
- <v-list-item dense>
- <v-list-item-title
- data-testid="transectSummaryHeaderTime"
- v-text="
- $t('transectInspection.headerData.startTime') + ': ' + inspectionHeaderData.startTime
- "></v-list-item-title>
- </v-list-item>
- </v-list-group>
-
- <v-divider />
-
- <v-list-group group no-action>
- <template v-slot:activator>
- <v-list-item-title data-testid="transectSummaryMain"
- >{{ $t("transectInspection.mainData.title") }}
- </v-list-item-title>
- </template>
-
- <v-expansion-panels focusable popout>
- <v-expansion-panel
- v-for="(section, i) in inspectionMainData.sections"
- :key="i"
- data-testid="transectSummaryMainExpansion">
- <v-expansion-panel-header v-if="isDataExist(section)" ripple>
- {{ $t("transectInspection.mainData.section") }} {{ section.sequenceNumber }}
- </v-expansion-panel-header>
- <v-expansion-panel-content>
- <v-container>
- <v-row>
- <v-col cols="6">{{ section.label }} - {{ section.name }}</v-col>
- <v-col cols="6">
- <v-row justify="end">
- <div
- v-if="
- section.sectionEvent.imageRefs && section.sectionEvent.imageRefs.length
- ">
- {{ $t("transectInspection.mainData.addedPicture") }}
- <v-icon data-testid="transectSummaryMainCamera" medium>mdi-camera</v-icon>
- </div>
- </v-row>
- </v-col>
- </v-row>
- </v-container>
- <v-textarea
- v-model="section.sectionEvent.comment"
- :disabled="true"
- :label="$t('transectInspection.mainData.comment')"
- auto-grow
- data-testid="transectSummaryMainComment"
- outlined
- row-height="15"
- rows="1" />
- <TransectInspectionTableSummary
- :key="updateSummaryTable"
- :disabled="disabled"
- :options="options"
- :section="section"
- @inputOptions="changeOptionValues" />
- </v-expansion-panel-content>
- </v-expansion-panel>
- </v-expansion-panels>
- </v-list-group>
-
- <v-divider />
-
- <v-list-group>
- <template v-slot:activator>
- <v-list-item-content data-testid="transectSummaryFooter">
- <v-list-item-title>{{ $t("transectInspection.footerData.title") }}</v-list-item-title>
- </v-list-item-content>
- </template>
-
- <v-divider />
-
- <v-list-item dense>
- <v-list-item-title
- data-testid="transectSummaryFooterComment"
- v-text="
- $t('transectInspection.footerData.comment') + ': ' + inspectionFooterData.comment
- "></v-list-item-title>
- </v-list-item>
- <v-list-item dense>
- <v-list-item-title
- data-testid="transectSummaryFooterWind"
- v-text="
- $t('transectInspection.footerData.windForce') + ': ' + inspectionFooterData.windForceEnd
- "></v-list-item-title>
- </v-list-item>
- <v-list-item dense>
- <v-list-item-title
- data-testid="transectSummaryFooterClouds"
- v-text="
- $t('transectInspection.footerData.clouds') + ': ' + inspectionFooterData.cloudsEnd
- "></v-list-item-title>
- </v-list-item>
- <v-list-item dense>
- <v-list-item-title
- data-testid="transectSummaryFooterTemperature"
- v-text="
- $t('transectInspection.footerData.temperature') + ': ' + inspectionFooterData.temperatureEnd
- "></v-list-item-title>
- </v-list-item>
- <v-list-item dense>
- <v-list-item-title
- data-testid="transectSummaryFooterDate"
- v-text="
- $t('transectInspection.footerData.endDate') +
- ': ' +
- formatDBToUIDate(inspectionFooterData.endDate)
- " />
- </v-list-item>
- <v-list-item dense>
- <v-list-item-title
- data-testid="transectSummaryFooterTime"
- v-text="
- $t('transectInspection.footerData.endTime') + ': ' + inspectionFooterData.endTime
- "></v-list-item-title>
- </v-list-item>
- </v-list-group>
- </v-list>
+ <v-expansion-panels focusable popout>
+ <v-expansion-panel
+ v-for="(section, i) in inspectionMainData.sections"
+ :key="i"
+ class="ufz--transect-inspection-summary--transect-summary-main-expansion">
+ <v-expansion-panel-header v-if="isDataExist(section)" ripple>
+ {{ $t("transectInspection.mainData.section") }} {{ section.sequenceNumber }}
+ </v-expansion-panel-header>
+ <v-expansion-panel-content>
+ <v-container>
+ <v-row>
+ <v-col cols="6">{{ section.label }} - {{ section.name }}</v-col>
+ <v-col cols="6">
+ <v-row justify="end">
+ <div
+ v-if="
+ section.sectionEvent.imageRefs &&
+ section.sectionEvent.imageRefs.length
+ ">
+ {{ $t("transectInspection.mainData.addedPicture") }}
+ <v-icon data-testid="transectSummaryMainCamera" medium
+ >mdi-camera</v-icon
+ >
+ </div>
+ </v-row>
+ </v-col>
+ </v-row>
+ </v-container>
+ <v-textarea
+ v-model="section.sectionEvent.comment"
+ :disabled="true"
+ :label="$t('transectInspection.mainData.comment')"
+ auto-grow
+ class="ufz--transect-inspection-summary--main-content"
+ outlined
+ row-height="15"
+ rows="1" />
+ <TransectInspectionTableSummary
+ :key="updateSummaryTable"
+ :disabled="disabled"
+ :options="options"
+ :section="section"
+ @inputOptions="changeOptionValues" />
+ </v-expansion-panel-content>
+ </v-expansion-panel>
+ </v-expansion-panels>
+ </v-list-group>
+ </v-list>
+ </v-card>
</template>
<script lang="ts" src="./TransectInspectionSummary.ts" />
+<style lang="scss" scoped>
+.container {
+ ::v-deep .v-input__slot {
+ background-color: #f4f8fb;
+ }
+ ::v-deep .v-input__slot::before {
+ border-style: none !important;
+ }
+ ::v-deep .v-text-field__suffix {
+ padding-right: 10px !important;
+ }
+ ::v-deep .v-icon {
+ background-color: #f4f8fb;
+ padding-right: 2px;
+ padding-bottom: 5px;
+ }
+}
+</style>
diff --git a/app/src/i18n/de.json b/app/src/i18n/de.json
index 22e600764cc472cb617ac838d7f5da84aced2ed8..26b19db7d7e478fb28636cb534d4bb34a21acc20 100644
--- a/app/src/i18n/de.json
+++ b/app/src/i18n/de.json
@@ -181,6 +181,12 @@
"invalidEndDate": "Das Enddatum liegt vor dem Startdatum.",
"invalidEndTime": "Die Endzeit muß nach der Startzeit liegen."
},
+ "summary": {
+ "inspectionStart": "Begehung Start",
+ "inspectionEnd": "Begehung Ende",
+ "weatherInformationStart": "Wetterinformationen Start",
+ "weatherInformationEnd": "Wetterinformationen Ende"
+ },
"alerts": {
"successPersist": "Transektdaten erfolgreich persistiert",
"emptyInspection": "Es handelt sich um eine Begehung ohne Funde",
diff --git a/app/src/i18n/en.json b/app/src/i18n/en.json
index 2f926e170d058a394dae0080baab1ee110ab42ea..037442e3fe31ed81cfa1f26ab01c264fe8241764 100644
--- a/app/src/i18n/en.json
+++ b/app/src/i18n/en.json
@@ -181,6 +181,12 @@
"invalidEndDate": "The End date is before the start date.",
"invalidEndTime": "The End time must be after the start time."
},
+ "summary": {
+ "inspectionStart": "Inspection start",
+ "inspectionEnd": "Inspection end",
+ "weatherInformationStart": "Weather information start",
+ "weatherInformationEnd": "Weather information end"
+ },
"alerts": {
"successPersist": "Transect data successfully persisted",
"emptyInspection": "This is an Inspection without any findings",
diff --git a/app/tests/unit/TransectInspectionSummary.spec.ts b/app/tests/unit/TransectInspectionSummary.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d90366ce74c2e5057437b6f5f2d5d97f79c9825a
--- /dev/null
+++ b/app/tests/unit/TransectInspectionSummary.spec.ts
@@ -0,0 +1,103 @@
+import TransectInspectionSummary from "@/components/TransectInspectionSummary.vue";
+import { expect } from "chai";
+import { createLocalVue, mount } from "@vue/test-utils";
+import vuetify from "@/plugins/vuetify";
+import { setupI18n } from "@/plugins/i18n";
+import { Locales } from "@/i18n/locales";
+import VueRouter from "vue-router";
+
+declare const global: any;
+global.requestAnimationFrame = (cb: any) => cb();
+
+describe("TransectInspectionSummary.vue", () => {
+ let wrapper;
+
+ beforeEach(() => {
+ const localVue = createLocalVue();
+ localVue.use(VueRouter);
+ const router = new VueRouter();
+ const i18n = setupI18n(localVue);
+ i18n.locale = Locales.DE;
+
+ const MockObservers = [
+ { id: "/mock/id/1", username: "MockUser1" },
+ { id: "/mock/id/2", username: "MockUser2" },
+ ];
+ const $auth = {
+ isAuthenticated: true,
+ };
+
+ wrapper = mount(TransectInspectionSummary, {
+ i18n,
+ localVue,
+ router,
+ vuetify,
+ mocks: { $auth },
+ propsData: {
+ inspectionHeaderData: {
+ transect: {
+ id: "TransectID/1",
+ name: "TransectNameC",
+ codeAndName: "TransectCodeC (TransectNameC)",
+ },
+ observers: MockObservers,
+ windForceStart: "3",
+ cloudsStart: "3",
+ temperatureStart: "3",
+ startDate: "2022-10-19",
+ startTime: "02:00",
+ startDateTime: "",
+ },
+ inspectionFooterData: {
+ windForceEnd: "1",
+ cloudsEnd: "1",
+ temperatureEnd: "1",
+ endDate: "2026-12-15",
+ endTime: "12:00",
+ endDateTime: "",
+ comment: "comment",
+ },
+ },
+ });
+ });
+ afterEach(() => {
+ wrapper = null;
+ });
+
+ it("Input fields are displayed with the correct information", () => {
+ expect(wrapper.find(".ufz--transect-inspection-summary--transect-start").isVisible()).to.equal(true);
+ expect(wrapper.vm.$props.inspectionHeaderData.transect.codeAndName).to.equal("TransectCodeC (TransectNameC)");
+ expect(wrapper.find(".ufz--transect-inspection-summary--observers-start").isVisible()).to.equal(true);
+ expect(wrapper.vm.$props.inspectionHeaderData.observers).to.have.length(2);
+ expect(wrapper.find(".ufz--transect-inspection-summary--start-date").isVisible()).to.equal(true);
+ expect(wrapper.vm.$props.inspectionHeaderData.startDate).to.equal("2022-10-19");
+ expect(wrapper.find(".ufz--transect-inspection-summary--start-time").isVisible()).to.equal(true);
+ expect(wrapper.vm.$props.inspectionHeaderData.startTime).to.equal("02:00");
+ expect(wrapper.find(".ufz--transect-inspection-summary--wind-force-start").isVisible()).to.equal(true);
+ expect(wrapper.vm.$props.inspectionHeaderData.windForceStart).to.equal("3");
+ expect(wrapper.find(".ufz--transect-inspection-summary--temperature-start").isVisible()).to.equal(true);
+ expect(wrapper.vm.$props.inspectionHeaderData.temperatureStart).to.equal("3");
+ expect(wrapper.find(".ufz--transect-inspection-summary--cloud-cover-start").isVisible()).to.equal(true);
+ expect(wrapper.vm.$props.inspectionHeaderData.cloudsStart).to.equal("3");
+ expect(wrapper.find(".ufz--transect-inspection-summary--transect-end").isVisible()).to.equal(true);
+ expect(wrapper.vm.$props.inspectionHeaderData.transect.codeAndName).to.equal("TransectCodeC (TransectNameC)");
+ expect(wrapper.find(".ufz--transect-inspection-summary--observers-end").isVisible()).to.equal(true);
+ expect(wrapper.vm.$props.inspectionHeaderData.observers).to.have.length(2);
+ expect(wrapper.find(".ufz--transect-inspection-summary--end-date").isVisible()).to.equal(true);
+ expect(wrapper.vm.$props.inspectionFooterData.endDate).to.equal("2026-12-15");
+ expect(wrapper.find(".ufz--transect-inspection-summary--end-time").isVisible()).to.equal(true);
+ expect(wrapper.vm.$props.inspectionFooterData.endTime).to.equal("12:00");
+ expect(wrapper.find(".ufz--transect-inspection-summary--wind-force-end").isVisible()).to.equal(true);
+ expect(wrapper.vm.$props.inspectionFooterData.windForceEnd).to.equal("1");
+ expect(wrapper.find(".ufz--transect-inspection-summary--temperature-end").isVisible()).to.equal(true);
+ expect(wrapper.vm.$props.inspectionFooterData.temperatureEnd).to.equal("1");
+ expect(wrapper.find(".ufz--transect-inspection-summary--cloud-cover-end").isVisible()).to.equal(true);
+ expect(wrapper.vm.$props.inspectionFooterData.cloudsEnd).to.equal("1");
+ });
+ it("Date is displayed correctly", () => {
+ expect(wrapper.vm.formatDBToUIDate(wrapper.vm.$props.inspectionHeaderData.startDate)).to.equal("19.10.2022");
+ });
+ it("Observer names are displayed correctly", () => {
+ expect(wrapper.vm.observersUserNames).to.equal("MockUser1, MockUser2");
+ });
+});