diff --git a/src/components/Projects/ProjectsMenu.vue b/src/components/Projects/ProjectsMenu.vue index ece71b68de5d7d37283af90a410e65280395f4a9..223f172a11ea3aed8559b917585157410076940f 100644 --- a/src/components/Projects/ProjectsMenu.vue +++ b/src/components/Projects/ProjectsMenu.vue @@ -15,42 +15,67 @@ /> </div> </div> - <div :class="['ui menu filters', { 'hidden': displayFilters }]"> - <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 :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> - <div class="item"> - <label> - Recherche par nom - </label> - <search-projects - :search-function="SEARCH_PROJECTS" - v-on="$listeners" + <div class="ui menu filters"> + <div + v-for="projectAttribute in displayedProjectAttributes" + :key="projectAttribute.id" + class="item" + > + <label> + {{ projectAttribute.label }} + </label> + <!-- <FeatureExtraForm + :options="projectAttribute.options" + v-on="$listeners" + /> --> + <FeatureExtraForm + :id="`attribute-value-for-${projectAttribute.name}`" + ref="extraForm" + name="attribute-value" + :field="{ ...projectAttribute, value: projectAttribute.default_filter_value }" + :use-value-only="true" + @update:value="updateValue($event.toString(), projectAttribute.id)" /> + </div> </div> </div> </div> @@ -61,6 +86,7 @@ import { mapState, mapActions } from 'vuex'; import DropdownMenuItem from '@/components/Projects/DropdownMenuItem.vue'; import SearchProjects from '@/components/Projects/SearchProjects.vue'; +import FeatureExtraForm from '@/components/Feature/Edit/FeatureExtraForm'; export default { name: 'ProjectsMenu', @@ -68,6 +94,7 @@ export default { components: { DropdownMenuItem, SearchProjects, + FeatureExtraForm, }, data() { @@ -143,12 +170,17 @@ export default { filter: 'user_access_level', value: '5' }, - ] + ], + projectAttributesFilter: {}, }; }, computed: { - ...mapState(['user']) + ...mapState(['user', 'projectAttributes']), + + displayedProjectAttributes() { + return this.projectAttributes.filter(el => el.display_filter); + }, }, created() { @@ -165,6 +197,12 @@ export default { ...mapActions('projects', [ 'SEARCH_PROJECTS' ]), + updateValue(value, id) { + // update the project attributes key/value object + this.projectAttributesFilter[id] = value; + // emit the new project attributes object to be set as a project filter in query + this.$emit('filter', { filter: 'attributes', value: JSON.stringify(this.projectAttributesFilter) }); + } } }; </script>