Newer
Older
<div id="filters-container">
<div
class="ui styled accordion"
@click="displayFilters = !displayFilters"
>
:class="['ui icon customcaret', { 'collapsed': !displayFilters }]"
<!-- TODO: FIX TRANSITION -->
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div :class="['full-width', { 'hidden': displayFilters }]">
<div class="ui menu filters">
<div class="item">
<label>
Niveau d'autorisation requis
</label>
<DropdownMenuItem
:options="accessLevelOptions"
v-on="$listeners"
/>
</div>
<div class="item">
<label>
Mon niveau d'autorisation
</label>
<DropdownMenuItem
:options="userAccessLevelOptions"
v-on="$listeners"
/>
</div>
<div class="item">
<label>
Modération
</label>
<DropdownMenuItem
:options="moderationOptions"
v-on="$listeners"
/>
</div>
<div class="item">
<label>
Recherche par nom
</label>
<search-projects
:search-function="SEARCH_PROJECTS"
v-on="$listeners"
/>
</div>
<!-- TODO: make several rows if more than 4 project attributes -->
<!-- (create a computed seperating into groups to loop over) -->
<div class="ui menu filters">
<div
v-for="attribute in displayedAttributes"
:key="attribute.id"
class="item"
>
<label>
{{ attribute.label }}
</label>
<DropdownMenuItem
:options="attribute.options"
:multiple="attribute.field_type === 'multi_choices_list'"
:current-selection="attributesFilter[attribute.id]"
@filter="updateAttributeFilter"
@remove="removeAttributeFilter"
/>
</div>
import DropdownMenuItem from '@/components/Projects/DropdownMenuItem.vue';
import SearchProjects from '@/components/Projects/SearchProjects.vue';
displayFilters: false,
moderationOptions: [
{
label: 'Tous',
filter: 'moderation',
value: null
},
{
label: 'Projet modéré',
filter: 'moderation',
value: 'true'
},
{
label: 'Projet non modéré',
filter: 'moderation',
value: 'false'
},
],
accessLevelOptions: [
{
label: 'Tous',
filter: 'access_level',
value: null
},
{
label: 'Utilisateur anonyme',
filter: 'access_level',
value: 'anonymous'
},
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
{
label: 'Utilisateur connecté',
filter: 'access_level',
value: 'logged_user'
},
{
label: 'Contributeur',
filter: 'access_level',
value: 'contributor'
},
],
userAccessLevelOptions: [
{
label: 'Tous',
filter: 'user_access_level',
value: null
},
{
label: 'Utilisateur connecté',
filter: 'user_access_level',
value: '1'
},
{
label: 'Contributeur',
filter: 'user_access_level',
value: '2'
},
{
{
label: 'Administrateur projet',
filter: 'user_access_level',
value: '5'
},
],
attributesFilter: {},
...mapState(['user', 'projectAttributes']),
/**
* Processes project attributes to prepare them for display, adjusting the options based on the attribute type.
* For boolean attributes, it creates specific options for true and false values.
* It also adds a global 'Tous' (All) option to each attribute's options for filtering purposes.
*
* @returns {Array} An array of project attributes with modified options for display.
*/
displayedAttributes() {
// Filter out attributes that should not be displayed based on `display_filter` flag
return this.projectAttributes.filter(attribute => attribute.display_filter)
.map(attribute => {
// Generate options based on the attribute's field type
const options = this.generateOptionsForAttribute(attribute);
// Add a global selector option at the beginning of the options list
options.unshift({
label: 'Tous',
filter: attribute.id,
value: null,
});
// Return the attribute with the updated options
return { ...attribute, options };
});
},
},
created() {
if (!this.user) {
this.userAccessLevelOptions.splice(1, 0, {
label: 'Utilisateur anonyme',
filter: 'user_access_level',
value: '0'
});
}
},
methods: {
...mapActions('projects', [
'SEARCH_PROJECTS'
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
/**
* Generates options for a given attribute based on its field type.
* It handles boolean attributes specially by creating explicit true/false options.
* Other attribute types use their predefined options.
*
* @param {Object} attribute - The project attribute for which to generate options.
* @returns {Array} An array of options for the given attribute.
*/
generateOptionsForAttribute(attribute) {
// Handle boolean attributes specially by creating true/false options
if (attribute.field_type === 'boolean') {
return [
{ filter: attribute.id, label: 'true', value: 'true' },
{ filter: attribute.id, label: 'false', value: 'false' },
];
}
// For other attribute types, map each option to the expected format
return attribute.options.map(option => ({
filter: attribute.id,
label: option,
value: option,
}));
},
/**
* Retrieves a project attribute by its ID.
* Returns an empty object if not found to prevent errors from undefined access.
*
* @param {Number|String} id - The ID of the attribute to find.
* @returns {Object} The found attribute or an empty object.
*/
getProjectAttribute(id) {
// Search for the attribute by ID, default to an empty object if not found
return this.projectAttributes.find(el => el.id === id) || {};
},
/**
* Emits an updated filter event with the current state of attributesFilter.
* This method serializes the attributesFilter object to a JSON string and emits it,
* allowing the parent component to update the query parameters.
*/
emitUpdatedFilter() {
// Emit an 'filter' event with the updated attributes filter as a JSON string
this.$emit('filter', { filter: 'attributes', value: JSON.stringify(this.attributesFilter) });
},
/**
* Updates or adds a new attribute value to the attributesFilter.
* Handles both single-choice and multi-choice attribute types.
* @param {Object} newFilter - The new filter to be added, containing the attribute key and value.
*/
updateAttributeFilter({ value, filter }) {
// Retrieve the attribute type information to determine how to handle the update
const attribute = this.getProjectAttribute(filter);
// Check if the attribute allows multiple selections
const isMultiChoice = attribute.field_type === 'multi_choices_list';
if (isMultiChoice) {
// For multi-choice attributes, manage the values as an array to allow multiple selections
let arrayValue = this.attributesFilter[filter] ? this.attributesFilter[filter].split(',') : [];
if (value) {
// If a value is provided, add it to the array, ensuring no duplicates and removing null corresponding to "Tous" default option
arrayValue.push(value);
arrayValue = [...new Set(arrayValue)].filter(el => el !== null);
// Convert the array back to a comma-separated string to store in the filter object
this.attributesFilter[filter] = arrayValue.join(',');
} else {
// If null value is provided "Tous" is selected, it indicates removal of the attribute filter
delete this.attributesFilter[filter];
}
} else {
// For single-choice attributes, directly set or delete the value
value ? this.attributesFilter[filter] = value : delete this.attributesFilter[filter];
}
// After updating the filter object, emit the updated filter for application-wide use
this.emitUpdatedFilter();
},
/**
* Removes a specified value from a project attribute filter.
* Particularly useful for multi-choice attributes where individual values can be deselected.
* @param {Object} removedFilter - The filter to be removed, containing the attribute key and value.
*/
removeAttributeFilter({ value, filter }) {
// Retrieve attribute information to determine if it's a multi-choice attribute
const attribute = this.getProjectAttribute(filter);
const isMultiChoice = attribute.field_type === 'multi_choices_list';
if (isMultiChoice) {
// For multi-choice attributes, convert the current filter value to an array for manipulation
let arrayValue = this.attributesFilter[filter] ? this.attributesFilter[filter].split(',') : [];
// Remove the specified value from the array
arrayValue = arrayValue.filter(val => val !== value);
// Update the attributesFilter with the new array, converted back to a string
this.attributesFilter[filter] = arrayValue.join(',');
} else {
// For single-choice attributes, directly update the filter to remove the value
delete this.attributesFilter[filter];
}
// Emit the updated filter after removal
this.emitUpdatedFilter();
},
.transition-properties(...) {
-webkit-transition: @arguments;
-moz-transition: @arguments;
-o-transition: @arguments;
transition: @arguments;
}
#filters-container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
width: fit-content;
.collapsible-filters {
font-size: 1.25em;
padding-right: 0;
.customcaret{
transition: transform .2s ease;
&.collapsed {
transform: rotate(180deg);
}
&::before{
position: relative;
right: 0;
top: 65%;
color: #999;
margin-top: 4px;
border-color: #999 transparent transparent;
border-style: solid;
border-width: 5px 5px 0;
content: "";
}
}
}
}
.filters {
width: 100%;
height:auto;
min-height: 0;
max-height:75px;
opacity: 1;
.transition-properties(all 0.2s ease-out;);
.item {
display: flex;
flex-direction: column;
align-items: flex-start !important;
padding: 0.5em;
label {
margin-bottom: 0.2em;
font-size: 0.9em;
font-weight: 600;
}
}
.item {
width: 25%;
}
#search-projects {
width: 100%;
.filters.hidden {
overflow: hidden;
opacity: 0;
max-height: 0;
@media screen and (min-width: 701px) {
.item {
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
#filters-container {
.filters {
display: flex;
flex-direction: column;
max-height: 275px;
.transition-properties(all 0.2s ease-out;);
padding-right: 0;
padding-left: 0;