Skip to content

Commit 5c41cfe

Browse files
stafakstafak
authored
Merge pull request #38 from GredorTools/feature/filter-noter
Gör det möjligt att filtrera noter
2 parents b679a3d + d4749ad commit 5c41cfe

File tree

3 files changed

+195
-58
lines changed

3 files changed

+195
-58
lines changed

‎cypress/e2e/editing.cy.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -738,6 +738,34 @@ it("can create and edit manually", function () {
738738
);
739739

740740
cy.get("#editor li:nth-child(5) .nav-link").click();
741+
742+
cy.get(
743+
'[data-testid="accordion-item-noter-accordion-se-gen-base:RedovisningsVarderingsprinciper"]',
744+
).should("exist");
745+
cy.get(
746+
'[data-testid="accordion-item-noter-accordion-se-gen-base:NotOvrigaRorelsekostnader"]',
747+
).should("exist");
748+
cy.get(
749+
'[data-testid="accordion-item-noter-accordion-se-gen-base:NotAndraOvrigaUpplysningar"]',
750+
).should("exist");
751+
cy.get(
752+
'[data-testid="accordion-item-noter-accordion-se-gen-base:NotMedelantaletAnstallda"]',
753+
).should("exist");
754+
cy.get('[name="edit-noter-filter"]').click();
755+
cy.get('[name="edit-noter-filter"]').type("anställ");
756+
cy.get(
757+
'[data-testid="accordion-item-noter-accordion-se-gen-base:RedovisningsVarderingsprinciper"]',
758+
).should("not.exist");
759+
cy.get(
760+
'[data-testid="accordion-item-noter-accordion-se-gen-base:NotOvrigaRorelsekostnader"]',
761+
).should("not.exist");
762+
cy.get(
763+
'[data-testid="accordion-item-noter-accordion-se-gen-base:NotAndraOvrigaUpplysningar"]',
764+
).should("not.exist");
765+
cy.get(
766+
'[data-testid="accordion-item-noter-accordion-se-gen-base:NotMedelantaletAnstallda"]',
767+
).should("exist");
768+
741769
cy.get(
742770
'[data-testid="accordion-item-noter-accordion-se-gen-base:NotMedelantaletAnstallda"]',
743771
).click();
@@ -775,6 +803,20 @@ it("can create and edit manually", function () {
775803
'#arsredovisning-for-export td:nth-child(3) [name="se-gen-base:MedelantaletAnstallda"]',
776804
).should("have.text", "0");
777805

806+
cy.get("#editor .filter-contents .bi.bi-x-lg").click();
807+
cy.get(
808+
'[data-testid="accordion-item-noter-accordion-se-gen-base:RedovisningsVarderingsprinciper"]',
809+
).should("exist");
810+
cy.get(
811+
'[data-testid="accordion-item-noter-accordion-se-gen-base:NotOvrigaRorelsekostnader"]',
812+
).should("exist");
813+
cy.get(
814+
'[data-testid="accordion-item-noter-accordion-se-gen-base:NotAndraOvrigaUpplysningar"]',
815+
).should("exist");
816+
cy.get(
817+
'[data-testid="accordion-item-noter-accordion-se-gen-base:NotMedelantaletAnstallda"]',
818+
).should("exist");
819+
778820
// Fixar till grunduppgifter
779821
cy.get("#editor li:nth-child(2) .nav-link").click();
780822
cy.get(

‎src/components/common/CommonClearableInput.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script lang="ts" setup>
2+
/**
3+
* Ett inmatningsfält med en "x"-knapp som rensar inmatningen när den klickas.
4+
*/
5+
6+
import type { InputHTMLAttributes } from "vue";
7+
defineProps</* @vue-ignore */ InputHTMLAttributes>();
8+
9+
const input = defineModel<string>();
10+
</script>
11+
12+
<template>
13+
<input v-model="input" v-bind="$attrs" />
14+
<i v-show="input" class="bi bi-x-lg" v-bind="{}" @click="input = ''"></i>
15+
</template>
16+
17+
<style lang="scss" scoped>
18+
.bi.bi-x-lg {
19+
position: absolute;
20+
right: 10px;
21+
cursor: pointer;
22+
z-index: 100;
23+
}
24+
</style>

‎src/components/edit/sections/EditNoter.vue‎

Lines changed: 129 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import { TaxonomyRootName } from "@/model/taxonomy/TaxonomyItem.ts";
1414
import BaseEditBeloppradTitle from "@/components/edit/blocks/belopprad/BaseEditBeloppradTitle.vue";
1515
import CommonAccordion from "@/components/common/CommonAccordion.vue";
1616
import CommonAccordionItem from "@/components/common/CommonAccordionItem.vue";
17+
import { computed, ref } from "vue";
18+
import CommonClearableInput from "@/components/common/CommonClearableInput.vue";
1719
1820
// TaxonomyManager och rader
1921
const taxonomyManager = await getTaxonomyManager(TaxonomyRootName.NOTER);
@@ -40,72 +42,141 @@ const groups = availableTaxonomyItems.children[0].children.flatMap(
4042
(c) => c.children,
4143
);
4244
const groupedBelopprader = groupPrepopulatedSection(belopprader, groups);
45+
46+
const filter = ref<string>("");
47+
const visibleGroups = computed(() => {
48+
if (!filter.value) {
49+
return groups;
50+
}
51+
52+
return groups.filter((g) =>
53+
g.additionalData.displayLabel
54+
?.toLowerCase()
55+
?.includes(filter.value.toLowerCase()),
56+
);
57+
});
4358
</script>
4459

4560
<template>
46-
<div class="d-flex flex-column gap-4">
47-
<div v-for="groupOfGroups in groupsOfGroups" :key="groupOfGroups.xmlName">
48-
<div class="mb-2">
49-
<BaseEditBeloppradTitle
50-
:belopprad="createBelopprad(groupOfGroups)"
51-
:taxonomy-manager="taxonomyManager"
52-
/>
61+
<div class="d-flex flex-column">
62+
<div class="filter-container sticky-top">
63+
<div class="filter-contents">
64+
<div class="d-flex flex-col align-items-center gap-2">
65+
<label for="edit-noter-filter">Filtrera noter:</label>
66+
<CommonClearableInput
67+
id="edit-noter-filter"
68+
v-model="filter"
69+
class="form-control"
70+
name="edit-noter-filter"
71+
placeholder='T.ex. "medelantalet anställda"…'
72+
/>
73+
</div>
74+
75+
<hr />
5376
</div>
77+
</div>
5478

55-
<CommonAccordion>
56-
<CommonAccordionItem
57-
v-for="[groupIndex, group] in [...groups.entries()].filter(([, g]) =>
58-
groupOfGroups.children.includes(g),
59-
)"
60-
:id="`noter-accordion-${group.xmlName}`"
61-
:key="group.xmlName"
62-
:title="group.additionalData.displayLabel"
63-
>
64-
<table>
65-
<thead v-if="groupedBelopprader[groupIndex].length > 1">
66-
<tr>
67-
<th scope="col">{{ group.additionalData.displayLabel }}</th>
68-
<component
69-
:is="
70-
getValueColumnHeaderCell(
71-
group,
72-
arsredovisning.noter,
73-
arsredovisning.verksamhetsarNuvarande,
74-
)
75-
"
76-
/>
77-
<component
78-
:is="
79-
getValueColumnHeaderCell(
80-
group,
81-
arsredovisning.noter,
82-
arsredovisning.verksamhetsarTidigare[0],
83-
)
79+
<div v-if="visibleGroups.length < 1" class="mt-4">
80+
Inga noter matchade filtreringen.
81+
</div>
82+
83+
<div class="d-flex flex-column gap-4 mt-4">
84+
<div
85+
v-for="groupOfGroups in groupsOfGroups.filter((gg) =>
86+
gg.children.some((g) => visibleGroups.includes(g)),
87+
)"
88+
:key="groupOfGroups.xmlName"
89+
>
90+
<div class="mb-2">
91+
<BaseEditBeloppradTitle
92+
:belopprad="createBelopprad(groupOfGroups)"
93+
:taxonomy-manager="taxonomyManager"
94+
/>
95+
</div>
96+
97+
<CommonAccordion>
98+
<CommonAccordionItem
99+
v-for="[groupIndex, group] in [...groups.entries()].filter(
100+
([, g]) =>
101+
groupOfGroups.children.includes(g) && visibleGroups.includes(g),
102+
)"
103+
:id="`noter-accordion-${group.xmlName}`"
104+
:key="group.xmlName"
105+
:title="group.additionalData.displayLabel"
106+
>
107+
<table>
108+
<thead v-if="groupedBelopprader[groupIndex].length > 1">
109+
<tr>
110+
<th scope="col">{{ group.additionalData.displayLabel }}</th>
111+
<component
112+
:is="
113+
getValueColumnHeaderCell(
114+
group,
115+
arsredovisning.noter,
116+
arsredovisning.verksamhetsarNuvarande,
117+
)
118+
"
119+
/>
120+
<component
121+
:is="
122+
getValueColumnHeaderCell(
123+
group,
124+
arsredovisning.noter,
125+
arsredovisning.verksamhetsarTidigare[0],
126+
)
127+
"
128+
v-if="arsredovisning.verksamhetsarTidigare.length > 0"
129+
/>
130+
</tr>
131+
</thead>
132+
<tbody>
133+
<EditBelopprad
134+
v-for="(belopprad, index) in groupedBelopprader[groupIndex]"
135+
:key="belopprad.taxonomyItemName"
136+
v-model:belopprad="groupedBelopprader[groupIndex][index]"
137+
v-model:belopprader="groupedBelopprader[groupIndex]"
138+
:comparable-num-previous-years="
139+
Math.min(arsredovisning.verksamhetsarTidigare.length, 1)
84140
"
85-
v-if="arsredovisning.verksamhetsarTidigare.length > 0"
141+
:string-minimum-level="1"
142+
:taxonomy-manager="taxonomyManager"
143+
monetary-show-balance-sign
144+
string-multiline
86145
/>
87-
</tr>
88-
</thead>
89-
<tbody>
90-
<EditBelopprad
91-
v-for="(belopprad, index) in groupedBelopprader[groupIndex]"
92-
:key="belopprad.taxonomyItemName"
93-
v-model:belopprad="groupedBelopprader[groupIndex][index]"
94-
v-model:belopprader="groupedBelopprader[groupIndex]"
95-
:comparable-num-previous-years="
96-
Math.min(arsredovisning.verksamhetsarTidigare.length, 1)
97-
"
98-
:string-minimum-level="1"
99-
:taxonomy-manager="taxonomyManager"
100-
monetary-show-balance-sign
101-
string-multiline
102-
/>
103-
</tbody>
104-
</table>
105-
</CommonAccordionItem>
106-
</CommonAccordion>
146+
</tbody>
147+
</table>
148+
</CommonAccordionItem>
149+
</CommonAccordion>
150+
</div>
107151
</div>
108152
</div>
109153
</template>
110154

111-
<style lang="scss" scoped></style>
155+
<style lang="scss" scoped>
156+
@import "@/assets/_variables.scss";
157+
158+
// Det här är ganska fult...
159+
.filter-container {
160+
top: $spacing-md;
161+
162+
.filter-contents {
163+
background: $background-light;
164+
165+
margin-top: -$spacing-xl;
166+
margin-left: -$spacing-md;
167+
width: calc(100% + 2 * #{$spacing-md});
168+
padding-left: $spacing-md;
169+
padding-right: $spacing-md;
170+
padding-top: $spacing-xl;
171+
}
172+
173+
hr {
174+
margin-top: $spacing-lg;
175+
margin-bottom: 0;
176+
}
177+
178+
:deep(input) {
179+
flex: 1;
180+
}
181+
}
182+
</style>

0 commit comments

Comments
 (0)