[WEB-4710]feat: added module filters to local storage (#7598)
* feat: added module filters to local storage * chore: removed debounce
This commit is contained in:
parent
cd61e8dd44
commit
fc698bd9b4
1 changed files with 68 additions and 2 deletions
|
|
@ -3,9 +3,15 @@ import { action, computed, observable, makeObservable, runInAction, reaction } f
|
||||||
import { computedFn } from "mobx-utils";
|
import { computedFn } from "mobx-utils";
|
||||||
// types
|
// types
|
||||||
import { TModuleDisplayFilters, TModuleFilters, TModuleFiltersByState } from "@plane/types";
|
import { TModuleDisplayFilters, TModuleFilters, TModuleFiltersByState } from "@plane/types";
|
||||||
|
// helpers
|
||||||
|
import { storage } from "@/lib/local-storage";
|
||||||
// store
|
// store
|
||||||
import type { CoreRootStore } from "./root.store";
|
import type { CoreRootStore } from "./root.store";
|
||||||
|
|
||||||
|
// localStorage keys
|
||||||
|
const MODULE_DISPLAY_FILTERS_KEY = "module_display_filters";
|
||||||
|
const MODULE_FILTERS_KEY = "module_filters";
|
||||||
|
|
||||||
export interface IModuleFilterStore {
|
export interface IModuleFilterStore {
|
||||||
// observables
|
// observables
|
||||||
displayFilters: Record<string, TModuleDisplayFilters>;
|
displayFilters: Record<string, TModuleDisplayFilters>;
|
||||||
|
|
@ -57,6 +63,7 @@ export class ModuleFilterStore implements IModuleFilterStore {
|
||||||
});
|
});
|
||||||
// root store
|
// root store
|
||||||
this.rootStore = _rootStore;
|
this.rootStore = _rootStore;
|
||||||
|
|
||||||
// initialize display filters of the current project
|
// initialize display filters of the current project
|
||||||
reaction(
|
reaction(
|
||||||
() => this.rootStore.router.projectId,
|
() => this.rootStore.router.projectId,
|
||||||
|
|
@ -66,8 +73,57 @@ export class ModuleFilterStore implements IModuleFilterStore {
|
||||||
this.searchQuery = "";
|
this.searchQuery = "";
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Load initial data from localStorage after reactions are set up
|
||||||
|
this.loadFromLocalStorage();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Load filters from localStorage
|
||||||
|
*/
|
||||||
|
loadFromLocalStorage = () => {
|
||||||
|
try {
|
||||||
|
const displayFiltersData = storage.get(MODULE_DISPLAY_FILTERS_KEY);
|
||||||
|
const filtersData = storage.get(MODULE_FILTERS_KEY);
|
||||||
|
|
||||||
|
runInAction(() => {
|
||||||
|
if (displayFiltersData) {
|
||||||
|
const parsed = JSON.parse(displayFiltersData);
|
||||||
|
if (typeof parsed === "object" && parsed !== null) {
|
||||||
|
this.displayFilters = parsed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (filtersData) {
|
||||||
|
const parsed = JSON.parse(filtersData);
|
||||||
|
if (typeof parsed === "object" && parsed !== null) {
|
||||||
|
this.filters = parsed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to load module filters from localStorage:", error);
|
||||||
|
// Reset to defaults on error
|
||||||
|
runInAction(() => {
|
||||||
|
this.displayFilters = {};
|
||||||
|
this.filters = {};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Save display filters to localStorage (debounced)
|
||||||
|
*/
|
||||||
|
saveDisplayFiltersToLocalStorage = () => {
|
||||||
|
storage.set(MODULE_DISPLAY_FILTERS_KEY, this.displayFilters);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Save filters to localStorage (debounced)
|
||||||
|
*/
|
||||||
|
saveFiltersToLocalStorage = () => {
|
||||||
|
storage.set(MODULE_FILTERS_KEY, this.filters);
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description get display filters of the current project
|
* @description get display filters of the current project
|
||||||
*/
|
*/
|
||||||
|
|
@ -130,6 +186,8 @@ export class ModuleFilterStore implements IModuleFilterStore {
|
||||||
archived: {},
|
archived: {},
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
this.saveDisplayFiltersToLocalStorage();
|
||||||
|
this.saveFiltersToLocalStorage();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -143,6 +201,7 @@ export class ModuleFilterStore implements IModuleFilterStore {
|
||||||
set(this.displayFilters, [projectId, key], displayFilters[key as keyof TModuleDisplayFilters]);
|
set(this.displayFilters, [projectId, key], displayFilters[key as keyof TModuleDisplayFilters]);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
this.saveDisplayFiltersToLocalStorage();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -156,19 +215,24 @@ export class ModuleFilterStore implements IModuleFilterStore {
|
||||||
set(this.filters, [projectId, state, key], filters[key as keyof TModuleFilters]);
|
set(this.filters, [projectId, state, key], filters[key as keyof TModuleFilters]);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
this.saveFiltersToLocalStorage();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description update search query
|
* @description update search query
|
||||||
* @param {string} query
|
* @param {string} query
|
||||||
*/
|
*/
|
||||||
updateSearchQuery = (query: string) => (this.searchQuery = query);
|
updateSearchQuery = (query: string) => {
|
||||||
|
this.searchQuery = query;
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description update archived search query
|
* @description update archived search query
|
||||||
* @param {string} query
|
* @param {string} query
|
||||||
*/
|
*/
|
||||||
updateArchivedModulesSearchQuery = (query: string) => (this.archivedModulesSearchQuery = query);
|
updateArchivedModulesSearchQuery = (query: string) => {
|
||||||
|
this.archivedModulesSearchQuery = query;
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description clear all filters of a project
|
* @description clear all filters of a project
|
||||||
|
|
@ -179,5 +243,7 @@ export class ModuleFilterStore implements IModuleFilterStore {
|
||||||
this.filters[projectId][state] = {};
|
this.filters[projectId][state] = {};
|
||||||
this.displayFilters[projectId].favorites = false;
|
this.displayFilters[projectId].favorites = false;
|
||||||
});
|
});
|
||||||
|
this.saveFiltersToLocalStorage();
|
||||||
|
this.saveDisplayFiltersToLocalStorage();
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue