<template>
<div id="filters-container">
<div
class="ui styled accordion"
@click="displayFilters = !displayFilters"
>
<div
id="filters"
class="title collapsible-filters"
>
FILTRES
<i
:class="['ui icon customcaret', { 'collapsed': !displayFilters }]"
aria-hidden="true"
/>
</div>
</div>
<!-- TODO: FIX TRANSITION -->
<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>
</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 displayedAttributeFilters"
: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]"
:default-filter="attribute.default_filter_enabled ? attribute.default_filter_value : null"
@filter="updateAttributeFilter"
@remove="removeAttributeFilter"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import DropdownMenuItem from '@/components/Projects/DropdownMenuItem.vue';
import SearchProjects from '@/components/Projects/SearchProjects.vue';
export default {
name: 'ProjectsMenu',
components: {
DropdownMenuItem,
SearchProjects,
},
data() {
return {
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'
},
{
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: 'Super contributeur',
filter: 'user_access_level',
value: '3'
},
{
label: 'Modérateur',
filter: 'user_access_level',
value: '4'
},
{
label: 'Administrateur projet',
filter: 'user_access_level',
value: '5'
},
],
attributesFilter: {},
};
},
computed: {
...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.
*/
displayedAttributeFilters() {
// 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'
]),
/**
* 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();
},
}
};
</script>
<style lang="less" scoped>
.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;
.accordion {
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;
border: none;
box-shadow: none;
.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%;
}
.item::before {
width: 0;
}
#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;
}
}
}
@media screen and (max-width: 700px) {
#filters-container {
.filters {
display: flex;
flex-direction: column;
max-height: 275px;
.transition-properties(all 0.2s ease-out;);
.item {
width: 100%;
padding-right: 0;
padding-left: 0;
}
}
}
}
</style>