feat(frontend): add filters dropdown menu to the standard index compo…

…nent
pablolmedorado · Nov 13, 2020 · c725f35 · c725f35
1 parent 0673618
commit c725f35
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 35 deletions.
diff --git a/frontend/src/components/common/ItemIndex.vue b/frontend/src/components/common/ItemIndex.vue
@@ -9,26 +9,42 @@
         </v-toolbar-title>
         <v-spacer></v-spacer>
         <slot name="toolbar" v-bind="{ selectedItems, filters }"></slot>
-        <template v-if="advancedFilters">
-          <v-tooltip bottom>
-            <template #activator="{ attrs, on }">
-              <v-btn icon v-bind="attrs" v-on="on" @click="resetFilters">
-                <v-icon>mdi-filter-remove-outline</v-icon>
-              </v-btn>
-            </template>
-            <span>Limpiar filtros</span>
-          </v-tooltip>
-          <v-tooltip bottom>
-            <template #activator="{ attrs, on }">
-              <v-btn icon v-bind="attrs" v-on="on" @click.stop="openFiltersDialog">
+        <v-menu v-if="filterComponent" bottom left offset-y>
+          <template #activator="{ on: menu }">
+            <v-tooltip bottom>
+              <template #activator="{ on: tooltip }">
+                <v-btn icon :disabled="loading" v-on="{ ...tooltip, ...menu }">
+                  <v-badge :value="dialogFilterCount" color="primary" dot overlap>
+                    <v-icon>mdi-filter-menu</v-icon>
+                  </v-badge>
+                </v-btn>
+              </template>
+              <span>Filtros</span>
+            </v-tooltip>
+          </template>
+          <v-list>
+            <v-list-item v-if="advancedFilters" @click.stop="openFiltersDialog">
+              <v-list-item-icon>
                 <v-badge :value="dialogFilterCount" color="primary" :content="dialogFilterCount" overlap>
-                  <v-icon>mdi-filter</v-icon>
+                  <v-icon>mdi-filter-plus</v-icon>
                 </v-badge>
-              </v-btn>
-            </template>
-            <span>Filtros avanzados</span>
-          </v-tooltip>
-        </template>
+              </v-list-item-icon>
+              <v-list-item-title>Avanzado</v-list-item-title>
+            </v-list-item>
+            <v-list-item v-if="Boolean(Object.keys(defaultFilters))" @click="resetFilters">
+              <v-list-item-icon>
+                <v-icon>mdi-restore</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>Restablecer</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="clearFilters">
+              <v-list-item-icon>
+                <v-icon>mdi-eraser</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>Limpiar</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
         <v-tooltip bottom>
           <template #activator="{ attrs, on }">
             <v-btn
@@ -352,14 +368,20 @@ export default {
     addFilter(filter) {
       this.filters = { ...this.filters, ...filter };
     },
-    resetFilters() {
-      this.filters = this.defaultFilters;
+    setFiltersAndFetch(filters) {
+      this.filters = filters;
       if (!this.reactiveFilters) {
         this.$nextTick(() => {
           this.fetchTableItems(true);
         });
       }
     },
+    resetFilters() {
+      this.setFiltersAndFetch(this.defaultFilters);
+    },
+    clearFilters() {
+      this.setFiltersAndFetch({});
+    },
     loadHeadersFromLocalStorage() {
       const lsTableHeaders = localStorage[`${this.localStorageKey}TableHeaders`];
       if (lsTableHeaders) {

diff --git a/frontend/src/components/scrum/filters/UserStoryFilters.vue b/frontend/src/components/scrum/filters/UserStoryFilters.vue
@@ -94,28 +94,26 @@
                   ></v-select>
                 </v-col>
               </v-row>
-              <v-row>
+              <v-row v-if="!context.sprint">
                 <v-col>
                   <AsyncAutocomplete
                     :value="filters.sprint_id"
                     :service="sprintService"
                     search-field="name"
                     search-lookup="icontains"
-                    :disabled="disableSprintFilter"
                     label="Sprint"
                     prepend-icon="mdi-run-fast"
                     @input="updateFilters({ sprint_id: $event })"
                   />
                 </v-col>
               </v-row>
-              <v-row>
+              <v-row v-if="!context.epic">
                 <v-col>
                   <AsyncAutocomplete
                     :value="filters.epic_id"
                     :service="epicService"
                     search-field="name"
                     search-lookup="icontains"
-                    :disabled="disableEpicFilter"
                     label="Épica"
                     prepend-icon="mdi-sword-cross"
                     @input="updateFilters({ epic_id: $event })"
@@ -382,12 +380,13 @@ import SprintService from "@/services/scrum/sprint-service";
 export default {
   name: "UserStoryFilters",
   mixins: [FilterMixin],
+  inject: {
+    context: { default: {} },
+  },
   data() {
     return {
       epicService: EpicService,
       sprintService: SprintService,
-      disableSprintFilter: Boolean(this.filters.sprint_id),
-      disableEpicFilter: Boolean(this.filters.epic_id),
       tab: "general",
       priorityOptions: range(1, 11),
       basicFilters: ["search", "status__in", "any_role_user__in"],

diff --git a/frontend/src/mixins/filter-mixin.js b/frontend/src/mixins/filter-mixin.js
@@ -20,10 +20,12 @@ export default {
   watch: {
     filters: {
       handler(newValue) {
-        const advancedFilterCount = Object.entries(newValue).filter(
-          (filter) => filter[1] && !this.basicFilters.includes(filter[0])
-        ).length;
-        this.$emit("change:advanced-filters-count", advancedFilterCount);
+        if (this.basicFilters.length) {
+          const advancedFilterCount = Object.entries(newValue).filter(
+            (filter) => filter[1] && !this.basicFilters.includes(filter[0])
+          ).length;
+          this.$emit("change:advanced-filters-count", advancedFilterCount);
+        }
       },
       deep: true,
       immediate: true,

diff --git a/frontend/src/mixins/scrum/breadcrumbs-context-mixin.js b/frontend/src/mixins/scrum/breadcrumbs-context-mixin.js
@@ -28,6 +28,11 @@ export default {
       return { sprint: this.sprintId, epic: this.epicId };
     },
   },
+  provide() {
+    return {
+      context: this.context,
+    };
+  },
   watch: {
     context: {
       handler() {

diff --git a/frontend/src/views/scrum/user-stories/UserStories.vue b/frontend/src/views/scrum/user-stories/UserStories.vue
@@ -11,6 +11,7 @@
           :table-available-headers="tableHeaders"
           :table-initial-options="tableOptions"
           :filter-component="filterComponent"
+          :system-filters="systemFilters"
           :default-filters="defaultFilters"
           :service="service"
           :can-edit="() => false"
@@ -172,12 +173,11 @@ export default {
       },
       service: UserStoryService,
       filterComponent: UserStoryFilters,
-      defaultFilters: {
+      systemFilters: {
         sprint_id: this.sprintId,
         epic_id: this.epicId,
-        status__in: this.sprintId || this.epicId ? "" : "1,2,3",
-        any_role_user__in: null,
       },
+      defaultFilters: {},
       effortFormComponent: EffortForm,
       showTaskDialog: false,
     };
@@ -233,8 +233,11 @@ export default {
     },
   },
   created() {
-    if (!this.hasContext && !this.loggedUser.is_staff) {
-      this.defaultFilters.any_role_user__in = String(this.loggedUser.id);
+    if (!this.hasContext) {
+      this.defaultFilters.status__in = "1,2,3";
+      if (!this.loggedUser.is_staff) {
+        this.defaultFilters.any_role_user__in = String(this.loggedUser.id);
+      }
     }
   },
   methods: {