feat(index): add pinned filters

frontend/src/App.vue

@@ -256,8 +256,8 @@ export default {
         });
       }
       this.showSnackbar({
-        color: "info",
         message: "Se ha restablecido el almacenamiento local y la caché",
+        timeout: 3000,
       });
     },
   },

frontend/src/components/common/ItemIndex.vue

@@ -47,6 +47,12 @@
             <v-subheader class="ml-2">Filtros rápidos</v-subheader>
             <v-list-item v-for="filter in quickFilters" :key="filter.label" @click="applyQuickFilter(filter)">
               <v-list-item-title>{{ filter.label }}</v-list-item-title>
+              <v-list-item-action class="my-0">
+                <v-btn icon @click.stop="pinQuickFilter(filter)">
+                  <v-icon v-if="pinnedQuickFilter === filter.key" color="primary">mdi-pin</v-icon>
+                  <v-icon v-else>mdi-pin-outline</v-icon>
+                </v-btn>
+              </v-list-item-action>
             </v-list-item>
             <v-list-item v-for="filter in customQuickFilters" :key="filter.label" @click="applyQuickFilter(filter)">
               <v-list-item-title>{{ filter.label }}</v-list-item-title>
@@ -202,7 +208,7 @@
 
 <script>
 import { mapActions, mapGetters, mapState } from "vuex";
-import { isObject, omit, sortBy } from "lodash";
+import { get, isObject, omit } from "lodash";
 
 import { defaultTableOptions } from "@/utils/constants";
 
@@ -283,6 +289,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    defaultQuickFilter: {
+      type: String,
+      default: undefined,
+    },
     reactiveFilters: {
       type: Boolean,
       default: false,
@@ -309,6 +319,7 @@ export default {
       tableHeaders: null,
       tableOptions: null,
       filters: {},
+      pinnedQuickFilter: get(localStorage, `${this.localStorageKey}PinnedQuickFilter`, this.defaultQuickFilter),
       customQuickFilters: [],
       dialogFilterCount: 0,
       selectedItems: [],
@@ -317,10 +328,6 @@ export default {
   computed: {
     ...mapState(["loggedUser"]),
     ...mapGetters(["loading"]),
-    defaultFilters() {
-      const defaultFilter = this.quickFilters.find((filter) => filter.default);
-      return defaultFilter ? defaultFilter.filters : {};
-    },
   },
   watch: {
     tableHeaders: {
@@ -345,54 +352,35 @@ export default {
       },
       deep: true,
     },
-    customQuickFilters: {
+    pinnedQuickFilter: {
       handler(newValue) {
-        localStorage[`${this.localStorageKey}QuickFilters`] = JSON.stringify(newValue);
+        localStorage[`${this.localStorageKey}PinnedQuickFilter`] = newValue;
       },
-      deep: true,
     },
-    defaultFilters: {
+    customQuickFilters: {
       handler(newValue) {
-        this.filters = newValue;
+        localStorage[`${this.localStorageKey}QuickFilters`] = JSON.stringify(newValue);
       },
       deep: true,
-      immediate: true,
     },
   },
   created() {
     this.loadOptionsFromLocalStorage();
     this.loadHeadersFromLocalStorage();
     this.loadQuickFiltersFromLocalStorage();
+    this.filters = this.getDefaultFilters();
   },
   methods: {
     ...mapActions(["showSnackbar"]),
-    sortBy,
     fetchTableItems(resetPagination = false) {
       this.$refs.itemTable.fetchItems(resetPagination);
     },
-    async openFormDialog(item) {
-      if (!item) {
-        this.$refs.formDialog.open(this.defaultItem);
-      } else {
-        const response = await this.service.retrieve(item.id);
-        this.$refs.formDialog.open(response.data);
+    getDefaultFilters() {
+      if (!this.pinnedQuickFilter) {
+        return {};
       }
-    },
-    onFormSubmit(item) {
-      this.fetchTableItems();
-      this.$emit("submit:form", item);
-    },
-    openDeleteDialog(item) {
-      this.$refs.deleteDialog.open(item);
-    },
-    async deleteItem(item) {
-      await this.service.delete(item.id);
-      this.fetchTableItems();
-      this.$emit("delete:item", item);
-      this.showSnackbar({
-        color: "success",
-        message: "Elemento eliminado correctamente",
-      });
+      const defaultFilter = this.quickFilters.find((filter) => filter.key === this.pinnedQuickFilter);
+      return defaultFilter ? defaultFilter.filters : {};
     },
     openFiltersDialog() {
       this.$refs.filterComponent.openFiltersDialog();
@@ -431,13 +419,41 @@ export default {
     applyQuickFilter(filter) {
       this.setFiltersAndFetch(filter.filters);
     },
+    pinQuickFilter(filter) {
+      this.pinnedQuickFilter = filter.key;
+      this.showSnackbar({ message: `Se ha fijado el filtro "${filter.label}"` });
+    },
     deleteQuickFilter(filter) {
       this.customQuickFilters = this.customQuickFilters.filter((item) => item.label !== filter.label);
       this.showSnackbar({
         color: "success",
         message: "Filtro eliminado correctamente",
       });
     },
+    async openFormDialog(item) {
+      if (!item) {
+        this.$refs.formDialog.open(this.defaultItem);
+      } else {
+        const response = await this.service.retrieve(item.id);
+        this.$refs.formDialog.open(response.data);
+      }
+    },
+    onFormSubmit(item) {
+      this.fetchTableItems();
+      this.$emit("submit:form", item);
+    },
+    openDeleteDialog(item) {
+      this.$refs.deleteDialog.open(item);
+    },
+    async deleteItem(item) {
+      await this.service.delete(item.id);
+      this.fetchTableItems();
+      this.$emit("delete:item", item);
+      this.showSnackbar({
+        color: "success",
+        message: "Elemento eliminado correctamente",
+      });
+    },
     loadHeadersFromLocalStorage() {
       const lsTableHeaders = localStorage[`${this.localStorageKey}TableHeaders`];
       if (lsTableHeaders) {

frontend/src/views/calendar/Events.vue

@@ -13,6 +13,7 @@
           :filter-component="filterComponent"
           :system-filters="systemFilters"
           :quick-filters="quickFilters"
+          default-quick-filter="next-events"
           :service="service"
           custom-headers
           advanced-filters
@@ -152,9 +153,9 @@ export default {
     quickFilters() {
       return [
         {
+          key: "next-events",
           label: "Próximos eventos",
           filters: { start_datetime__date__gte: DateTime.local().toISODate() },
-          default: true,
         },
       ];
     },

frontend/src/views/scrum/Effort.vue

@@ -13,6 +13,7 @@
           :filter-component="filterComponent"
           :system-filters="systemFilters"
           :quick-filters="quickFilters"
+          default-quick-filter="last-week"
           :service="service"
           :form-component="formComponent"
           :can-create="() => false"
@@ -154,14 +155,14 @@ export default {
     quickFilters() {
       return [
         {
+          key: "last-week",
           label: "Última semana",
           filters: {
             date__gte: DateTime.local()
               .minus({ weeks: 1 })
               .toISODate(),
             date__lte: DateTime.local().toISODate(),
           },
-          default: true,
         },
       ];
     },

frontend/src/views/scrum/Epics.vue

@@ -11,6 +11,7 @@
           :table-initial-options="tableOptions"
           :filter-component="filterComponent"
           :quick-filters="quickFilters"
+          default-quick-filter="ongoing"
           :service="service"
           :form-component="formComponent"
           :default-item="defaultItem"
@@ -103,7 +104,7 @@ export default {
       },
       service: EpicService,
       filterComponent: EpicFilters,
-      quickFilters: [{ label: "En curso", filters: { finished: false }, default: true }],
+      quickFilters: [{ key: "ongoing", label: "En curso", filters: { finished: false } }],
       formComponent: EpicForm,
       defaultItem: {
         id: null,

frontend/src/views/scrum/sprints/Sprints.vue

@@ -11,6 +11,7 @@
           :table-initial-options="tableOptions"
           :filter-component="filterComponent"
           :quick-filters="quickFilters"
+          default-quick-filter="ongoing"
           :service="service"
           :form-component="formComponent"
           :default-item="defaultItem"
@@ -154,7 +155,7 @@ export default {
       },
       service: SprintService,
       filterComponent: SprintFilters,
-      quickFilters: [{ label: "En curso", filters: { ongoing: true }, default: true }],
+      quickFilters: [{ key: "ongoing", label: "En curso", filters: { ongoing: true } }],
       formComponent: SprintForm,
     };
   },

frontend/src/views/scrum/user-stories/UserStories.vue

@@ -13,6 +13,7 @@
           :filter-component="filterComponent"
           :system-filters="systemFilters"
           :quick-filters="quickFilters"
+          :default-quick-filter="defaultQuickFilter"
           :service="service"
           :can-edit="() => false"
           custom-headers
@@ -227,28 +228,30 @@ export default {
     quickFilters() {
       return [
         {
+          key: "ongoing",
           label: "Historias en curso",
           filters: {
             status__in: "1,2,3",
           },
-          default: !this.hasContext && this.loggedUser.is_superuser,
         },
         {
+          key: "my-stories",
           label: "Mis historias en curso",
           filters: {
             status__in: "1,2,3",
             any_role_user__in: String(this.loggedUser.id),
           },
-          default: !this.hasContext && !this.loggedUser.is_superuser,
         },
         {
+          key: "my-pending-developments",
           label: "Mis desarrollos pendientes",
           filters: {
             status__in: "1,2",
             development_user_id__in: String(this.loggedUser.id),
           },
         },
         {
+          key: "my-`pending-validations",
           label: "Mis validaciones pendientes",
           filters: {
             status__in: "3",
@@ -257,6 +260,13 @@ export default {
         },
       ];
     },
+    defaultQuickFilter() {
+      if (this.hasContext) {
+        return null;
+      } else {
+        return this.loggedUser.is_superuser ? "ongoing" : "my-stories";
+      }
+    },
   },
   watch: {
     tableHeaders(newValue) {

frontend/src/views/work-organization/GreenWorkingDays.vue

@@ -11,6 +11,7 @@
           :table-available-headers="tableHeaders"
           :table-initial-options="tableOptions"
           :quick-filters="quickFilters"
+          default-quick-filter="current-year"
           :service="service"
           :form-component="formComponent"
           custom-headers
@@ -147,7 +148,7 @@ export default {
         mustSort: true,
       },
       service: GreenService,
-      quickFilters: [{ label: "Año en curso", filters: { date__year: DateTime.local().year }, default: true }],
+      quickFilters: [{ key: "current-year", label: "Año en curso", filters: { date__year: DateTime.local().year } }],
       formComponent: GreenWorkingDayForm,
       bulkFormComponent: GreenWorkingDayBulkForm,
     };

frontend/src/views/work-organization/Support.vue

@@ -12,6 +12,7 @@
           :table-initial-options="tableOptions"
           :filter-component="filterComponent"
           :quick-filters="quickFilters"
+          default-quick-filter="next-days"
           :service="service"
           :form-component="formComponent"
         >
@@ -102,8 +103,9 @@ export default {
     },
     quickFilters() {
       return [
-        { label: "Próximas jornadas", filters: { date__gte: DateTime.local().toISODate() }, default: true },
+        { key: "next-days", label: "Próximas jornadas", filters: { date__gte: DateTime.local().toISODate() } },
         {
+          key: "my-next-days",
           label: "Mis próximas jornadas",
           filters: { date__gte: DateTime.local().toISODate(), user_id: this.loggedUser.id },
         },