Skip to content

Commit c06c996

Browse files
author
Maximilian
committed
Applied the refactring of search button and side filters to every list
1 parent 4de52c1 commit c06c996

13 files changed

Lines changed: 771 additions & 1155 deletions

File tree

‎opensilex-front/front/src/components/common/filters/SearchFiltersSidebar.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
quaternary
88
circle
99
@click="filtersCollapsed = !filtersCollapsed"
10-
:title="t('searchfilter.label')"
10+
:title="t(searchButtonLabelTranslationKey)"
1111
:class="{ greenThemeColor: filtersCollapsed }"
1212
class="globalFiltersSearchButton"
1313
>
@@ -68,10 +68,14 @@ const filtersCollapsed = defineModel<boolean>("filtersCollapsed");
6868
6969
//Applied Filter quantity depends on parent filter object so we just pass as a prop
7070
interface Props{
71-
activeFiltersCount: number
71+
activeFiltersCount: number,
72+
searchButtonLabelTranslationKey?: string
7273
}
7374
74-
const props = defineProps<Props>();
75+
const props = withDefaults(
76+
defineProps<Props>(),
77+
{searchButtonLabelTranslationKey: "searchfilter.label"}
78+
);
7579
7680
//Refresh should trigger a re-search with the current filter values, and reset should reset all the filters, handled in caller of this component
7781
const emit = defineEmits(['refresh', 'reset']);

‎opensilex-front/front/src/components/data/DataFilesView.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<n-layout has-sider class="datafiles-layout">
1414
<SearchFiltersSidebar
1515
:activeFiltersCount="activeFiltersCount"
16+
:filtersCollapsed="filtersCollapsed"
1617
@refresh="refresh"
1718
@reset="reset"
1819
>
@@ -181,12 +182,9 @@ import { useI18n } from 'vue-i18n'
181182
import { useStore } from 'vuex'
182183
import {
183184
NLayout,
184-
NLayoutSider,
185185
NLayoutContent,
186-
NForm,
187186
NFormItem,
188187
NInput,
189-
NButton,
190188
NSpace,
191189
NSwitch,
192190
} from 'naive-ui'

‎opensilex-front/front/src/components/data/ProvenanceList.vue‎

Lines changed: 70 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -69,118 +69,76 @@
6969
</n-space>
7070

7171
<n-layout has-sider class="provenance-layout">
72-
<!-- Bouton loupe -->
73-
<n-space class="mb-2 me-1" align="top">
74-
<n-button
75-
quaternary
76-
circle
77-
@click="filtersCollapsed = !filtersCollapsed"
78-
:title="t('ProvenanceList.label-filter')"
79-
:class="{ greenThemeColor: filtersCollapsed }"
80-
class="globalFiltersSearchButton"
81-
>
82-
<i class="bi bi-search filtersGlobalSearchIcon"></i>
83-
84-
<div
85-
v-show="filtersCollapsed && activeFiltersCount > 0"
86-
class="filters-count-badge"
87-
>
88-
( {{ activeFiltersCount }} )
89-
</div>
90-
</n-button>
91-
</n-space>
92-
93-
<!-- Sidebar / Filtres -->
94-
<n-layout-sider
95-
v-model:collapsed="filtersCollapsed"
96-
:collapsed-width="0"
97-
:width="360"
98-
collapse-mode="width"
99-
show-trigger
100-
bordered
101-
class="provenance-sider"
72+
<!-- Sidebar / Filters -->
73+
<SearchFiltersSidebar
74+
:activeFiltersCount="activeFiltersCount"
75+
:filtersCollapsed="filtersCollapsed"
76+
searchButtonLabelTranslationKey="component.provenance.search-provenances"
77+
@refresh="applyFilters"
78+
@reset="resetFilters"
10279
>
103-
<n-space class="p-3" vertical>
104-
<n-form label-placement="top" size="small" @submit.prevent.stop="applyFilters">
105-
<!-- Name -->
106-
<n-form-item :label="t('ProvenanceList.name')" class="compact-form-item">
107-
<n-input
108-
v-model:value="filter.name"
109-
clearable
110-
:placeholder="t('ProvenanceList.name-placeholder')"
111-
@keydown.enter.prevent.stop="applyFilters"
112-
/>
113-
</n-form-item>
114-
115-
<!-- Activity type -->
116-
<n-form-item class="compact-form-item">
117-
<opensilex-TypeForm
118-
v-model:type="filter.activity_type"
119-
:baseType="Prov.ACTIVITY_TYPE_URI"
120-
:label="t('ProvenanceList.activity_type')"
121-
:placeholder="t('ProvenanceList.activity_type-placeholder')"
122-
class="searchFilter"
123-
@handlingEnterKey="applyFilters"
124-
/>
125-
</n-form-item>
126-
127-
<!-- Agent type -->
128-
<n-form-item class="compact-form-item">
129-
<opensilex-AgentTypeSelector
130-
v-model:selected="filter.agent_type"
131-
:multiple="false"
132-
:key="lang"
133-
class="searchFilter"
134-
@clear="clearAgents"
135-
@select="clearAgents"
136-
@handlingEnterKey="applyFilters"
137-
/>
138-
</n-form-item>
139-
140-
<!-- Agents -->
141-
<n-form-item
142-
v-if="filter.agent_type === 'vocabulary:Operator'"
143-
label='Agent'
144-
>
145-
<PersonSelector
146-
v-model:persons="filter.agents"
147-
:multiple="true"
148-
class="searchFilter"
149-
@handlingEnterKey="applyFilters"
150-
/>
151-
</n-form-item>
152-
153-
<n-form-item
154-
v-else-if="filter.agent_type"
155-
label='Agent'
156-
>
157-
<DeviceSelector
158-
ref="deviceSelector"
159-
v-model:value="filter.agents"
160-
:multiple="true"
161-
:type="filter.agent_type"
162-
class="searchFilter"
163-
@handlingEnterKey="applyFilters"
164-
/>
165-
</n-form-item>
166-
167-
<n-space justify="end" class="mt-2">
168-
<Button
169-
class="resetButton"
170-
:label="t('component.common.search.clear-button')"
171-
icon="bi-x-lg"
172-
@click="resetFilters"
173-
/>
174-
<Button
175-
class="greenThemeColor"
176-
:label="t('component.common.search.search-button')"
177-
icon="bi-search"
178-
@click="applyFilters"
179-
/>
180-
</n-space>
181-
</n-form>
182-
</n-space>
183-
</n-layout-sider>
80+
<!-- Name -->
81+
<n-form-item :label="t('ProvenanceList.name')" class="compact-form-item">
82+
<n-input
83+
v-model:value="filter.name"
84+
clearable
85+
:placeholder="t('ProvenanceList.name-placeholder')"
86+
@keydown.enter.prevent.stop="applyFilters"
87+
/>
88+
</n-form-item>
89+
90+
<!-- Activity type -->
91+
<n-form-item class="compact-form-item">
92+
<opensilex-TypeForm
93+
v-model:type="filter.activity_type"
94+
:baseType="Prov.ACTIVITY_TYPE_URI"
95+
:label="t('ProvenanceList.activity_type')"
96+
:placeholder="t('ProvenanceList.activity_type-placeholder')"
97+
class="searchFilter"
98+
@handlingEnterKey="applyFilters"
99+
/>
100+
</n-form-item>
101+
102+
<!-- Agent type -->
103+
<n-form-item class="compact-form-item">
104+
<opensilex-AgentTypeSelector
105+
v-model:selected="filter.agent_type"
106+
:multiple="false"
107+
:key="lang"
108+
class="searchFilter"
109+
@clear="clearAgents"
110+
@select="clearAgents"
111+
@handlingEnterKey="applyFilters"
112+
/>
113+
</n-form-item>
114+
115+
<!-- Agents -->
116+
<n-form-item
117+
v-if="filter.agent_type === 'vocabulary:Operator'"
118+
label='Agent'
119+
>
120+
<PersonSelector
121+
v-model:persons="filter.agents"
122+
:multiple="true"
123+
class="searchFilter"
124+
@handlingEnterKey="applyFilters"
125+
/>
126+
</n-form-item>
127+
128+
<n-form-item
129+
v-else-if="filter.agent_type"
130+
label='Agent'
131+
>
132+
<DeviceSelector
133+
ref="deviceSelector"
134+
v-model:value="filter.agents"
135+
:multiple="true"
136+
:type="filter.agent_type"
137+
class="searchFilter"
138+
@handlingEnterKey="applyFilters"
139+
/>
140+
</n-form-item>
141+
</SearchFiltersSidebar>
184142

185143
<!-- Contenu Liste -->
186144
<n-layout-content class="provenance-content">
@@ -275,9 +233,7 @@ import { useRoute } from 'vue-router'
275233
import { useStore } from 'vuex'
276234
import {
277235
NLayout,
278-
NLayoutSider,
279236
NLayoutContent,
280-
NForm,
281237
NFormItem,
282238
NInput,
283239
NButton,
@@ -297,6 +253,7 @@ import DeleteButton from "@/components/common/buttons/DeleteButton.vue";
297253
import EditButton from "@/components/common/buttons/EditButton.vue";
298254
import DocumentForm from "@/components/documents/DocumentForm.vue";
299255
import {TableField} from "@/components/common/views/TableField";
256+
import SearchFiltersSidebar from "@/components/common/filters/SearchFiltersSidebar.vue";
300257
301258
const emit = defineEmits<{
302259
(e: 'onEdit', uri: string): void

0 commit comments

Comments
 (0)