Skip to content
Snippets Groups Projects
Commit e3f40632 authored by Lars Kollmann's avatar Lars Kollmann
Browse files

Merge branch 'feature/360-add-a-propose-status-button' into 'develop' 

Resolve ""QS-Status vorschlagen"-Buttons hinzufügen"

Closes #360

See merge request rdm/biome/frontend!338
parents ea2a4d89 0d8c0c62
No related branches found
No related tags found
2 merge requests!377merge develop in to master,!338Resolve ""QS-Status vorschlagen"-Buttons hinzufügen"
Pipeline #421457 passed
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
app/src/components/shared/sharedFilter/SharedTable.ts
+ 7
− 0
View file @ e3f40632
......@@ -58,6 +58,7 @@ export default class SharedTable extends Vue {
private headers: Array<{}> = [];
private items: Array<{}> = [];
private selectedItems: Array<{id: string}> = [];
private selectedPictureItems: Array<{imageIndex: number}> = [];
private inspectionType = false;
private findingType = false;
private dataButton = false;
......@@ -72,6 +73,7 @@ export default class SharedTable extends Vue {
private imageDialog = false;
private isDownloadBtnDisabled = true;
private showQsStateDialog = false;
private isDisabledQSStatusProposalBtn = true;
private applyFilterHistory = false;
private applyFilterButtonColor = "secondary";
......@@ -140,6 +142,11 @@ export default class SharedTable extends Vue {
this.isDownloadBtnDisabled = this.selectedItems.length === 0;
}
@Watch("selectedPictureItems")
private selectedPictureItemsWatcher() {
this.isDisabledQSStatusProposalBtn = this.selectedPictureItems.length === 0;
}
private getFilterCriteriaStringType(): string {
return FilterHelperClass.getInstance().getFilterCriteriaStringType(this.filterCriteriaType);
}
......
app/src/components/shared/sharedFilter/SharedTable.vue
+ 109
− 115
View file @ e3f40632
......@@ -52,9 +52,20 @@
<v-col cols="2"></v-col>
</v-row>
<div v-if="dataButton" data-testid="dataView">
<v-row>
<v-col cols="auto" sm="1" md="9"></v-col>
<v-col cols="auto" sm="5" md="1" class="pr-md-9 text-center">
<v-row justify="end">
<v-col cols="auto" class="px-1" v-if="showObservationDownloadBtn">
<v-menu>
<template v-slot:activator="{ on, attrs }">
<v-btn
:disabled="isDownloadBtnDisabled"
data-testId="dataViewProposeQSStatus"
v-bind="attrs"
v-on="on">{{ $t('sharedTable.proposeQSStatus') }}
</v-btn>
</template>
</v-menu>
</v-col>
<v-col cols="auto" class="px-1">
<v-tooltip bottom v-if="showObservationDownloadBtn">
<template v-slot:activator="{ on, attrs }">
<v-btn
......@@ -78,7 +89,7 @@
<span>{{ $t('sharedTable.downloadInspection') }}</span>
</v-tooltip>
</v-col>
<v-col cols="auto" sm="5" md="2" class="pl-md-9 text-center">
<v-col cols="auto" class="px-1 mr-2" >
<v-menu offset-y
data-testid="ChangeColumnsMenu"
:close-on-click="true"
......@@ -144,43 +155,24 @@
</v-card>
</v-dialog>
</template>
<!-- <template v-slot:footer>-->
<!-- <v-row>-->
<!-- <v-col cols="8"/>-->
<!-- <v-col cols="1" class="text-end">-->
<!-- <v-text-field-->
<!-- :label="$t('sharedTable.totalItems')"-->
<!-- :value="options.totalCount"-->
<!-- readonly-->
<!-- disabled-->
<!-- outlined-->
<!-- />-->
<!-- </v-col>-->
<!-- <v-col cols="1" class="text-end">-->
<!-- <v-select-->
<!-- class="shrink"-->
<!-- outlined-->
<!-- v-model="options.itemsPerPage"-->
<!-- :items="itemsPerPagePossibilities"-->
<!-- :label="$t('sharedTable.itemsPerPage')"-->
<!-- @input="selectInput"/>-->
<!-- </v-col>-->
<!-- <v-col cols="2" class="text-end">-->
<!-- <v-pagination-->
<!-- v-model="options.page"-->
<!-- :page="options.page"-->
<!-- :length="options.pageCount"-->
<!-- @next="clickNextPage"-->
<!-- @previous="clickPrevPage"-->
<!-- @input="clickInput"/>-->
<!-- </v-col>-->
<!-- </v-row>-->
<!-- </template>-->
</v-data-table>
</v-card>
</div>
<div v-if="imageButton" data-testid="imageView">
<v-row justify="end">
<v-col cols="auto" class="px-1" v-if="showObservationDownloadBtn">
<v-menu>
<template v-slot:activator="{ on, attrs }">
<v-btn
:disabled="isDisabledQSStatusProposalBtn"
data-testId="ImageViewProposeQSStatus"
v-bind="attrs"
v-on="on">{{ $t('sharedTable.proposeQSStatus') }}
</v-btn>
</template>
</v-menu>
</v-col>
</v-row>
<template v-if="isTableLoading">
<div class="text-center mt-2 mb-2">
<v-progress-circular indeterminate color="primary"/>
......@@ -264,90 +256,92 @@
</v-list>
</v-card>
<v-row v-if="observationImageRefs.length !== 0 && findingType">
<v-col v-for="(item, imageIndex) in observationImageRefs" :key="imageIndex" cols="4">
<v-col v-for="(item, imageIndex) in observationImageRefs" :key="imageIndex" md="4" sm="6" >
<v-card elevation="2" shaped class="mx-auto mb-2">
<v-card-text>
<v-list>
<v-list-group>
<template v-slot:activator>
<v-list-item-content class="pa-0">
<v-list-item-action class="flex-row">
<v-checkbox class="mr-2" color="primary"
:label="`${item.date} ${item.transect}`"></v-checkbox>
<v-btn color="black" elevation="0" @click="editItem(item.inspectionId)" icon>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item-content>
</template>
<div class="black--text text-sm-body-2 ml-6 mb-2">
{{ item.sectionLabel }}- {{ item.sectionName }}
</div>
<v-divider></v-divider>
<v-card-text>
<v-row>
<v-col>
<v-expansion-panels flat>
<v-expansion-panel>
<v-row>
<v-col
v-for="(image, index) in item.imageUrl"
:key="index"
class="d-flex child-flex"
:cols="item.imageUrl.length >= 3 ? 4 : 6"
>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-img
:src="image.thumbnailRefUrl"
contain
v-on="on"
@click="showImageDialog(item, image)"
>
<v-checkbox class="ml-4" color="primary"
v-on:click.stop></v-checkbox>
<template v-slot:placeholder>
<v-row
class="fill-height ma-0"
align="center"
justify="center"
>
<v-progress-circular
indeterminate
color="grey lighten-5"
></v-progress-circular>
</v-row>
</template>
</v-img>
</template>
<span v-if="item.comment">{{ item.comment }}</span>
<span v-else>{{ $t('sharedTable.noComment') }}</span>
</v-tooltip>
<v-col cols="1">
<v-checkbox class="ml-4" color="primary" v-model="selectedPictureItems" :value=imageIndex data-testid="PictureItemCheckbox"></v-checkbox>
</v-col>
<v-col cols="11">
<v-expansion-panel-header>
<h4>{{item.date}} - {{item.transect}}</h4>
<div class="text-end"> <!-- is only needed because without, the hover circle of v-btn becomes an oval-->
<v-btn @click="editItem(item.inspectionId)" icon>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</div>
</v-expansion-panel-header>
</v-col>
</v-row>
<v-row>
<div class="black--text text-sm-body-2 ml-6 mb-2">
{{ $t('sharedTable.species') }}: {{ item.speciesFullName }}
</div>
</v-row>
<v-row>
<div class="black--text text-sm-body-2 ml-6 mb-2">
{{ $t('sharedTable.gender') }}: {{ item.gender }}
</div>
</v-row>
<v-row>
<div class="black--text text-sm-body-2 ml-6 mb-2">
{{ $t('sharedTable.state') }}: {{ item.isDead }}
</div>
</v-row>
<v-row>
<v-expansion-panel-content>
<div class="black--text text-sm-body-2 ml-6 mb-2">
{{ $t('sharedTable.outOfMethod') }}: {{ item.outOfMethod }}
{{ item.sectionLabel }} - {{ item.sectionName }}
</div>
</v-row>
</v-card-text>
</v-list-group>
</v-list>
</v-card-text>
<v-divider></v-divider>
<v-row>
<v-col
v-for="(image, index) in item.imageUrl"
:key="index"
:cols="item.imageUrl.length >= 3 ? 4 : 6">
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-img
:src="image.thumbnailRefUrl"
contain
v-on="on"
@click="showImageDialog(item, image)"
>
<v-checkbox class="ml-4" color="primary"
v-on:click.stop></v-checkbox>
<template v-slot:placeholder>
<v-row
class="fill-height ma-0"
align="center"
justify="center"
>
<v-progress-circular
indeterminate
color="grey lighten-5"
></v-progress-circular>
</v-row>
</template>
</v-img>
</template>
<span v-if="item.comment">{{ item.comment }}</span>
<span v-else>{{ $t('sharedTable.noComment') }}</span>
</v-tooltip>
</v-col>
</v-row>
<v-row>
<div class="black--text text-sm-body-2 ml-6 mb-2">
{{ $t('sharedTable.species') }}: {{ item.speciesFullName }}
</div>
</v-row>
<v-row>
<div class="black--text text-sm-body-2 ml-6 mb-2">
{{ $t('sharedTable.gender') }}: {{ item.gender }}
</div>
</v-row>
<v-row>
<div class="black--text text-sm-body-2 ml-6 mb-2">
{{ $t('sharedTable.state') }}: {{ item.isDead }}
</div>
</v-row>
<v-row>
<div class="black--text text-sm-body-2 ml-6 mb-2">
{{ $t('sharedTable.outOfMethod') }}: {{ item.outOfMethod }}
</div>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
......
app/src/i18n/deutsch.json
+ 1
− 0
View file @ e3f40632
......@@ -312,6 +312,7 @@
"changeColumns": "Spalten ändern",
"downloadObservation": "Download von Funddaten in CSV-Datei",
"downloadInspection": "Download von Begehungsdaten in CSV-Datei",
"proposeQSStatus": "QS-Status vorschlagen",
"downloadBtn": "Download",
"itemsPerPage": "Einträge pro Seite",
"totalItems": "Gesamte Einträge",
......
app/src/i18n/english.json
+ 1
− 0
View file @ e3f40632
......@@ -312,6 +312,7 @@
"changeColumns": "Change columns",
"downloadObservation": "Download of findings as CSV-File",
"downloadInspection": "Download of inspections as CSV-File",
"proposeQSStatus": "Propose QS-Status",
"downloadBtn": "Download",
"itemsPerPage": "Items per page",
"totalItems": "Total items",
......
app/tests/unit/SharedTable.spec.ts
+ 94
− 0
View file @ e3f40632
......@@ -109,6 +109,47 @@ describe("SharedTable.vue", () => {
sortBy: ["createdAt_order"],
sortDesc: [false],
},
observationImageRefs: [
{
inspectionId: "21",
transect: "TransectNameC",
comment: "test commentary",
date: "2021-10-04",
time: "2021-10-04",
sectionName: "Some Section Name",
sectionLabel: "Section CA",
gender: "female",
speciesFullName: "Adscita mannii",
isDead: "Nein",
outOfMethod: "Nein",
imageUrl: [
{
imageRefUrl: "#",
thumbnailRefUrl: "#",
},
],
},
{
inspectionId: "21",
transect: "TransectNameC",
comment: null, date: "2021-10-04",
time: "2021-10-04",
sectionName: "Some Section Name",
sectionLabel: "Section CA",
gender: "imago",
speciesFullName: "Zygaena ephialtes",
isDead: "Nein",
outOfMethod: "Ja",
imageUrl: [
{
imageRefUrl: "#",
thumbnailRefUrl: "#",
},
],
},
],
selectedItems: [],
selectedPictureItems: [],
};
},
propsData: {
......@@ -309,4 +350,57 @@ describe("SharedTable.vue", () => {
wrapperFindings.vm.$nextTick();
expect(wrapperFindings.find('[data-testid="qsStateDialog"]').exists()).to.equal(true);
});
it("SharedTable dataView has QS-Status-proposal button disabled/active dependent on items selected", async () => {
await wrapperFindings.vm.activeDataView();
const qsStatusButtonDataView = wrapperFindings.find('[data-testId="dataViewProposeQSStatus"]');
expect(qsStatusButtonDataView.attributes().class).contain("v-btn--disabled");
await wrapperFindings.setData(
{
selectedItems: [{
id: "9",
species: "Adscita mannii",
date: "2021-10-04",
state: false,
gender: "female",
stage: "imago",
quantity: 3,
hasImages: false,
sectionEvent: [
{
inspectionId: "21",
transect: "TestTransectNameC",
comment: "Whatever test comment it is",
date: "2021-10-04",
time: "2021-10-04",
sectionName: "Some Test Section Name",
sectionLabel: "Test Section CA",
gender: "female",
speciesFullName: "Adscita mannii",
isDead: "Nein",
outOfMethod: "Nein",
imageUrl: [{
imageRefUrl: "#",
thumbnailRefUrl: "#"}],
},
],
inspectionId: "21",
section: "Some Section Test Name",
transect: "TestTransectNameC",
}],
},
);
expect(qsStatusButtonDataView.attributes().class).not.contain("v-btn--disabled");
});
it("SharedTable imageView has QS-Status-proposal button disabled/active dependent on PictureItems selected", async () => {
await wrapperFindings.vm.activeImageView();
const pictureItemCheckbox = wrapperFindings.find('[data-testId="PictureItemCheckbox"]');
const qsStatusButtonImageView = wrapperFindings.find('[data-testId="ImageViewProposeQSStatus"]');
expect(qsStatusButtonImageView.attributes().class).contain("v-btn--disabled");
expect(pictureItemCheckbox.attributes()["aria-checked"]).to.equal("false");
await pictureItemCheckbox.trigger("click");
expect(qsStatusButtonImageView.attributes().class).not.contain("v-btn--disabled");
expect(pictureItemCheckbox.attributes()["aria-checked"]).to.equal("true");
});
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

A HIFIS Service | Privacy | Imprint | Support | Documentation | Changelog