REDMINE_ISSUE-19722 | Créer des filtres pour les attributs projet sur l'accueil de l'application

add project attributes filters, with default value & adapted to request query

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>