From 424a67a13084c385c9ac006f6f17b9bcb5c7954e Mon Sep 17 00:00:00 2001 From: DecafDev <40307803+decaf-dev@users.noreply.github.com> Date: Tue, 6 Aug 2024 17:24:49 -0600 Subject: [PATCH] Add collapse filters (#299) * refactor: remove unused code * refactor: don't export values * fix: add correct types to migrations * feat: add collapse filters button --- manifest.json | 2 +- package.json | 2 +- src/constants.ts | 1 + src/event/types.ts | 1 + src/migrations/index.ts | 6 + src/migrations/migrate_1_38_0.ts | 5 +- src/migrations/migrate_1_39_0.ts | 15 +- src/migrations/migrate_1_40_0.ts | 15 + src/obsidian/vault-explorer-view.ts | 8 + src/svelte/app/index.svelte | 255 ++++++++------ src/svelte/custom-filter-app/index.svelte | 36 -- src/types/index.guard.ts | 1 + src/types/index.ts | 1 + src/types/types-0.3.3.ts | 21 +- src/types/types-0.5.5.ts | 76 ++-- src/types/types-1.0.1.ts | 67 ++-- src/types/types-1.21.2.ts | 80 ++--- src/types/types-1.24.2.ts | 82 ++--- src/types/types-1.25.2.ts | 84 ++--- src/types/types-1.29.0.ts | 86 ++--- src/types/types-1.30.5.ts | 91 +++-- src/types/types-1.39.0.ts | 327 ++++++++++++++++++ .../plugins/vault-explorer/data.json | 21 +- tests/integration/preform-migration.test.ts | 176 ++++++---- versions.json | 3 +- 25 files changed, 946 insertions(+), 516 deletions(-) create mode 100644 src/migrations/migrate_1_40_0.ts create mode 100644 src/types/types-1.39.0.ts diff --git a/manifest.json b/manifest.json index b1cb2b6..660b997 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "vault-explorer", "name": "Vault Explorer", - "version": "1.39.0", + "version": "1.40.0", "minAppVersion": "1.4.13", "description": "Explore your vault in visual format", "author": "DecafDev", diff --git a/package.json b/package.json index f2085eb..be48ab0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "obsidian-vault-explorer", - "version": "1.39.0", + "version": "1.40.0", "description": "Explore your vault in visual format", "main": "main.js", "scripts": { diff --git a/src/constants.ts b/src/constants.ts index 28eb9f2..2363a46 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -94,6 +94,7 @@ export const DEFAULT_SETTINGS: VaultExplorerPluginSettings = { loadBodyTags: true, filterGroupsWidth: "300px", shouldWrapFilterGroups: false, + shouldCollapseFilters: false, pageSize: 25, viewOrder: [ TExplorerView.GRID, diff --git a/src/event/types.ts b/src/event/types.ts index 6e01c3b..bf66264 100644 --- a/src/event/types.ts +++ b/src/event/types.ts @@ -3,6 +3,7 @@ export enum PluginEvent { FILE_CREATE = "file-create", FILE_DELETE = "file-delete", FILE_MODIFY = "file-modify", + COLLAPSE_FILTERS_CHANGE = "collapse-filters-change", METADATA_CHANGE = "metadata-change", PROPERTIES_FILTER_UPDATE = "properties-filter-update", FOLDER_RENAME = "folder-rename", diff --git a/src/migrations/index.ts b/src/migrations/index.ts index 1ee1161..f86694f 100644 --- a/src/migrations/index.ts +++ b/src/migrations/index.ts @@ -29,6 +29,7 @@ import Migrate_1_33_0 from "./migrate_1_33_0"; import Migrate_1_37_0 from "./migrate_1_37_0"; import Migrate_1_38_0 from "./migrate_1_38_0"; import Migrate_1_39_0 from "./migrate_1_39_0"; +import Migrate_1_40_0 from "./migrate_1_40_0"; const migrations: TMigration[] = [ { @@ -171,6 +172,11 @@ const migrations: TMigration[] = [ to: "1.39.0", migrate: Migrate_1_39_0, }, + { + from: "1.39.0", + to: "1.40.0", + migrate: Migrate_1_40_0, + }, ]; export const preformMigrations = ( diff --git a/src/migrations/migrate_1_38_0.ts b/src/migrations/migrate_1_38_0.ts index 32b0340..aded8fe 100644 --- a/src/migrations/migrate_1_38_0.ts +++ b/src/migrations/migrate_1_38_0.ts @@ -1,12 +1,11 @@ import { VaultExplorerPluginSettings_1_37_2 } from "src/types/types-1-37-0"; import MigrationInterface from "./migration_interface"; -import { VaultExplorerPluginSettings } from "src/types"; import { VaultExplorerPluginSettings_1_38_0 } from "src/types/types-1.38.0"; export default class Migrate_1_38_0 implements MigrationInterface { migrate(data: Record) { - const typedData = data as unknown as VaultExplorerPluginSettings_1_38_0; - const newData: VaultExplorerPluginSettings = { + const typedData = data as unknown as VaultExplorerPluginSettings_1_37_2; + const newData: VaultExplorerPluginSettings_1_38_0 = { ...typedData, loadBodyTags: true, }; diff --git a/src/migrations/migrate_1_39_0.ts b/src/migrations/migrate_1_39_0.ts index dd74e1d..63b76e1 100644 --- a/src/migrations/migrate_1_39_0.ts +++ b/src/migrations/migrate_1_39_0.ts @@ -1,17 +1,20 @@ import MigrationInterface from "./migration_interface"; -import { TExplorerView, VaultExplorerPluginSettings } from "src/types"; import { VaultExplorerPluginSettings_1_38_0 } from "src/types/types-1.38.0"; +import { + TExplorerView_1_39_0, + VaultExplorerPluginSettings_1_39_0, +} from "src/types/types-1.39.0"; export default class Migrate_1_39_0 implements MigrationInterface { migrate(data: Record) { const typedData = data as unknown as VaultExplorerPluginSettings_1_38_0; - const newData: VaultExplorerPluginSettings = { + const newData: VaultExplorerPluginSettings_1_39_0 = { ...typedData, viewOrder: [ - TExplorerView.GRID, - TExplorerView.LIST, - TExplorerView.TABLE, - TExplorerView.FEED, + TExplorerView_1_39_0.GRID, + TExplorerView_1_39_0.LIST, + TExplorerView_1_39_0.TABLE, + TExplorerView_1_39_0.FEED, ], views: { ...typedData.views, diff --git a/src/migrations/migrate_1_40_0.ts b/src/migrations/migrate_1_40_0.ts new file mode 100644 index 0000000..32bd5fe --- /dev/null +++ b/src/migrations/migrate_1_40_0.ts @@ -0,0 +1,15 @@ +import MigrationInterface from "./migration_interface"; +import { VaultExplorerPluginSettings_1_39_0 } from "src/types/types-1.39.0"; +import { VaultExplorerPluginSettings } from "src/types"; + +export default class Migrate_1_40_0 implements MigrationInterface { + migrate(data: Record) { + const typedData = data as unknown as VaultExplorerPluginSettings_1_39_0; + const newData: VaultExplorerPluginSettings = { + ...typedData, + shouldCollapseFilters: false, + }; + + return newData as unknown as Record; + } +} diff --git a/src/obsidian/vault-explorer-view.ts b/src/obsidian/vault-explorer-view.ts index e76ea00..b6c1fee 100644 --- a/src/obsidian/vault-explorer-view.ts +++ b/src/obsidian/vault-explorer-view.ts @@ -3,6 +3,8 @@ import { ItemView, WorkspaceLeaf } from "obsidian"; import { VAULT_EXPLORER_VIEW } from "src/constants"; import VaultExplorerApp from "../svelte/app/index.svelte"; import VaultExplorerPlugin from "src/main"; +import EventManager from "src/event/event-manager"; +import { PluginEvent } from "src/event/types"; export default class VaultExplorerView extends ItemView { component: VaultExplorerApp | null; @@ -32,6 +34,12 @@ export default class VaultExplorerView extends ItemView { (app as any).setting.openTabById(this.plugin.manifest.id); }); + this.addAction("chevrons-down-up", "Collapse filters", () => { + EventManager.getInstance().emit( + PluginEvent.COLLAPSE_FILTERS_CHANGE + ); + }); + const containerEl = this.containerEl.children[1]; this.component = new VaultExplorerApp({ diff --git a/src/svelte/app/index.svelte b/src/svelte/app/index.svelte index 1bbc38c..f526728 100644 --- a/src/svelte/app/index.svelte +++ b/src/svelte/app/index.svelte @@ -61,6 +61,7 @@ TFavoritesCache, } from "./services/favorites-store"; import TableView from "./components/table-view.svelte"; + import Spacer from "../shared/components/spacer.svelte"; // ============================================ // Variables @@ -71,6 +72,8 @@ let startOfThisWeekMillis: number; let startOfLastWeekMillis: number; + let shouldCollapseFilters: boolean = false; + let pageSize: number = 0; let searchFilter: TSearchFilter = { isEnabled: true, @@ -133,6 +136,7 @@ plugin = p; const { app, settings } = plugin; + shouldCollapseFilters = settings.shouldCollapseFilters; pageSize = settings.pageSize; searchFilter = settings.filters.search; favoritesFilter = settings.filters.favorites; @@ -214,6 +218,23 @@ }; }); + onMount(() => { + function handleToggleFiltersChange() { + shouldCollapseFilters = !shouldCollapseFilters; + } + + EventManager.getInstance().on( + PluginEvent.COLLAPSE_FILTERS_CHANGE, + handleToggleFiltersChange, + ); + return () => { + EventManager.getInstance().off( + PluginEvent.COLLAPSE_FILTERS_CHANGE, + handleToggleFiltersChange, + ); + }; + }); + onMount(() => { function handlePropertiesFilterUpdate() { Logger.trace({ @@ -544,6 +565,7 @@ plugin.settings.currentView = currentView; plugin.settings.filters.custom = customFilter; plugin.settings.viewOrder = viewOrder; + plugin.settings.shouldCollapseFilters = shouldCollapseFilters; await plugin.saveSettings(); } @@ -850,6 +872,7 @@ currentView, customFilter, viewOrder, + shouldCollapseFilters, saveSettings(); $: totalItems = renderData.length; @@ -868,120 +891,133 @@
-
- {#if searchFilter.isEnabled} - (searchFilter.value = "")} - /> - {/if} - - - - {#if favoritesFilter.isEnabled} - - {/if} - - {#if timestampFilter.isEnabled} - - {/if} - {#if sortFilter.isEnabled} - - {/if} - {#if sortFilter.value == "random"} - + + {#if searchFilter.isEnabled} + (searchFilter.value = "")} + /> + {/if} + + + + {#if favoritesFilter.isEnabled} + + {/if} + + {#if timestampFilter.isEnabled} + + {/if} + {#if sortFilter.isEnabled} + + {/if} + {#if sortFilter.value == "random"} + + {/if} + + + + + + {#if customFilter.isEnabled} + {/if} - - {#if customFilter.isEnabled} - - {/if} - - -
- view === currentView, - )} - > - {#each viewOrder as view} - (currentView = view)} - on:dragstart={(e) => handleViewDragStart(e, view)} - on:dragover={handleViewDragOver} - on:drop={(e) => handleViewDrop(e, view)} - >{getDisplayNameForView(view)} - {/each} - -
- -
- {#if currentView === "grid"} - - {:else if currentView === "list"} - - {:else if currentView === "table"} - - {:else if currentView === "feed"} - - {/if} -
+ + +
+ {/if} + +
+ view === currentView, + )} + > + {#each viewOrder as view} + (currentView = view)} + on:dragstart={(e) => handleViewDragStart(e, view)} + on:dragover={handleViewDragOver} + on:drop={(e) => handleViewDrop(e, view)} + >{getDisplayNameForView(view)} + {/each} + +
+ +
+ + {#if currentView === "grid"} + + {:else if currentView === "list"} + + {:else if currentView === "table"} + + {:else if currentView === "feed"} + + {/if}