Skip to content

Commit

Permalink
Add property filters (#7)
Browse files Browse the repository at this point in the history
* refactor: move properties into their own key

* feat: add properties filter data structure

* feat: add property filters app

* feat: add switch

* feat: add divider

* feat: add basic property filter modal content

* fix: resolve properties not saving

* refactor: rename to app

* refactor: move into components folder

* refactor: rename to group 1

* fix: resolve settings not updating

* fix: resolve settings being reset

* refactor: simplify code

* fix: set folder to root by default

* feat: implement property filter display

* refactor: use uppercase

* fix: remove need for redux

* refactor: remove unneeded code

* feat: add property filtering

* fix: resolve property filtering
  • Loading branch information
decaf-dev authored Apr 18, 2024
1 parent af338c5 commit 7ace9eb
Show file tree
Hide file tree
Showing 56 changed files with 1,161 additions and 188 deletions.
Binary file modified bun.lockb
Binary file not shown.
66 changes: 34 additions & 32 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,34 +1,36 @@
{
"name": "obsidian-vault-explorer",
"version": "0.0.18",
"description": "Explore your vault in visual format",
"main": "main.js",
"scripts": {
"dev": "node esbuild.config.mjs",
"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
"version": "node version-bump.mjs && git add manifest.json versions.json"
},
"keywords": [],
"author": "Trey Wallis",
"license": "MIT",
"devDependencies": {
"@types/bun": "latest",
"@types/lodash": "^4.17.0",
"@types/node": "^16.11.6",
"@types/react": "^18.2.65",
"@types/react-dom": "^18.2.21",
"@typescript-eslint/eslint-plugin": "5.29.0",
"@typescript-eslint/parser": "5.29.0",
"builtin-modules": "3.3.0",
"esbuild": "0.17.3",
"obsidian": "latest",
"tslib": "2.4.0",
"typescript": "4.7.4"
},
"dependencies": {
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-virtuoso": "^4.7.2"
}
"name": "obsidian-vault-explorer",
"version": "0.0.18",
"description": "Explore your vault in visual format",
"main": "main.js",
"scripts": {
"dev": "node esbuild.config.mjs",
"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
"version": "node version-bump.mjs && git add manifest.json versions.json"
},
"keywords": [],
"author": "Trey Wallis",
"license": "MIT",
"devDependencies": {
"@types/bun": "latest",
"@types/lodash": "^4.17.0",
"@types/node": "^16.11.6",
"@types/react": "^18.2.65",
"@types/react-dom": "^18.2.21",
"@typescript-eslint/eslint-plugin": "5.29.0",
"@typescript-eslint/parser": "5.29.0",
"builtin-modules": "3.3.0",
"esbuild": "0.17.3",
"obsidian": "latest",
"tslib": "2.4.0",
"typescript": "4.7.4"
},
"dependencies": {
"@reduxjs/toolkit": "^2.2.3",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^9.1.1",
"react-virtuoso": "^4.7.2"
}
}
32 changes: 32 additions & 0 deletions src/constants.ts
Original file line number Diff line number Diff line change
@@ -1 +1,33 @@
import { VaultExplorerPluginSettings } from "./types";

export const VAULT_EXPLORER_VIEW = "vault-explorer";

export const DEFAULT_SETTINGS: VaultExplorerPluginSettings = {
properties: {
favorite: "",
url: "",
source: "",
status: "",
},
filters: {
folder: "/",
search: "",
onlyFavorites: false,
timestamp: "all",
sort: "file-name-asc",
properties: {
selectedGroupId: "0",
groups:
[
{
id: "0",
name: "Group 1",
filters: [],
position: 0,
isEnabled: true
}
]
}
},
currentView: "grid",
}
2 changes: 1 addition & 1 deletion src/event/types.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export type PluginEvent = "rename-file" | "create-file" | "delete-file" | "modify-file" | "metadata-change";
export type PluginEvent = "rename-file" | "create-file" | "delete-file" | "modify-file" | "metadata-change" | "properties-filter-update";

export type EventCallback = (...data: unknown[]) => void;
40 changes: 14 additions & 26 deletions src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,42 +4,21 @@ import VaultExplorerView from './obsidian/vault-explorer-view';
import VaultExplorerSettingsTab from './obsidian/vault-explorer-settings-tab';

import { VaultExplorerPluginSettings } from './types';
import { VAULT_EXPLORER_VIEW } from './constants';
import { DEFAULT_SETTINGS, VAULT_EXPLORER_VIEW } from './constants';
import _ from 'lodash';
import EventManager from './event/event-manager';


const DEFAULT_SETTINGS: VaultExplorerPluginSettings = {
favoritePropertyName: "",
urlPropertyName: "",
sourcePropertyName: "",
revisionPropertyName: "",
statusPropertyName: "",
filters: {
folder: "",
search: "",
onlyFavorites: false,
timestamp: "all",
sort: "file-name-asc",
},
currentView: "grid",
}

export default class VaultExplorerPlugin extends Plugin {
settings: VaultExplorerPluginSettings;
debounceSaveSettings: () => void;

async onload() {
this.debounceSaveSettings = _.debounce(this.saveSettings, 1000);
await this.loadSettings();

const debounceSettingsChange = _.debounce(async (value: VaultExplorerPluginSettings) => {
this.settings = value;
await this.saveSettings();
//console.log("Settings saved", this.settings);
}, 1000);

this.registerView(
VAULT_EXPLORER_VIEW,
(leaf) => new VaultExplorerView(leaf, this.app, this.settings, debounceSettingsChange)
(leaf) => new VaultExplorerView(leaf, this.app, () => this.settings, this.handleSettingsChange)
);

this.addRibbonIcon("compass", "Open vault explorer", async () => {
Expand Down Expand Up @@ -102,10 +81,19 @@ export default class VaultExplorerPlugin extends Plugin {
}

async loadSettings() {
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
const data = await this.loadData();
this.settings = Object.assign({}, DEFAULT_SETTINGS, data);
//store.dispatch(setSettings(this.settings));
}

async saveSettings() {
console.log("Saving settings");
await this.saveData(this.settings);
}

private handleSettingsChange = async (value: VaultExplorerPluginSettings) => {
//store.dispatch(setSettings(value));
this.settings = value;
this.debounceSaveSettings();
}
}
53 changes: 53 additions & 0 deletions src/obsidian/properties-filter-modal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { App, Modal } from "obsidian";
import React from "react";
import { Root, createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import AppMountProvider from "src/react/components/shared/app-mount-provider";
import PropertiesFilterApp from "src/react/components/properties-filter-app";
import { store } from "src/redux/store";
import { getCurrentSettings, onSettingsChange } from "src/types";

export default class PropertiesFilterModal extends Modal {
root: Root | null;
app: App;
getCurrentSettings: getCurrentSettings;
onSettingsChange: onSettingsChange;

constructor(
app: App,
getCurrentSettings: getCurrentSettings,
onSettingsChange: onSettingsChange
) {
super(app);
this.root = null;
this.app = app;
this.getCurrentSettings = getCurrentSettings;
this.onSettingsChange = onSettingsChange;
}

onOpen(): void {
const { contentEl } = this;

const root = createRoot(contentEl);
root.render(
<React.StrictMode>
<Provider store={store}>
<AppMountProvider
app={this.app}
getCurrentSettings={this.getCurrentSettings}
onSettingsChange={this.onSettingsChange}
>
<PropertiesFilterApp />
</AppMountProvider>
</Provider>
</React.StrictMode>
);
this.root = root;
}

onClose(): void {
const { contentEl } = this;
this.root?.unmount();
contentEl.empty();
}
}
26 changes: 8 additions & 18 deletions src/obsidian/vault-explorer-settings-tab.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,49 +22,39 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab {
.setName('Favorite property name')
.setDesc('The name of the frontmatter property to use to mark a note as a favorite.')
.addDropdown(dropdown => dropdown.addOptions(getDropdownOptionsForProperties(checkboxProperties))
.setValue(this.plugin.settings.favoritePropertyName)
.setValue(this.plugin.settings.properties.favorite)
.onChange(async (value) => {
this.plugin.settings.favoritePropertyName = value;
this.plugin.settings.properties.favorite = value;
await this.plugin.saveSettings();
}));

new Setting(containerEl)
.setName('URL property name')
.setDesc('The name of the property used to store the URL of the content.')
.addDropdown(dropdown => dropdown.addOptions(getDropdownOptionsForProperties(textProperties))
.setValue(this.plugin.settings.urlPropertyName)
.setValue(this.plugin.settings.properties.url)
.onChange(async (value) => {
this.plugin.settings.urlPropertyName = value;
this.plugin.settings.properties.url = value;
await this.plugin.saveSettings();
}));

new Setting(containerEl)
.setName('Source property name')
.setDesc('The name of the property used to store the source name of the content.')
.addDropdown(dropdown => dropdown.addOptions(getDropdownOptionsForProperties(textProperties))
.setValue(this.plugin.settings.sourcePropertyName)
.setValue(this.plugin.settings.properties.source)
.onChange(async (value) => {
this.plugin.settings.sourcePropertyName = value;
this.plugin.settings.properties.source = value;
await this.plugin.saveSettings();
}));

new Setting(containerEl)
.setName('Status property name')
.setDesc('The name of the property used to store the status of the content.')
.addDropdown(dropdown => dropdown.addOptions(getDropdownOptionsForProperties(textProperties))
.setValue(this.plugin.settings.statusPropertyName)
.setValue(this.plugin.settings.properties.status)
.onChange(async (value) => {
this.plugin.settings.statusPropertyName = value;
await this.plugin.saveSettings();
}));

new Setting(containerEl)
.setName('Revision property name')
.setDesc('The name of the property used to store the revision status of the content.')
.addDropdown(dropdown => dropdown.addOptions(getDropdownOptionsForProperties(textProperties))
.setValue(this.plugin.settings.revisionPropertyName)
.onChange(async (value) => {
this.plugin.settings.revisionPropertyName = value;
this.plugin.settings.properties.status = value;
await this.plugin.saveSettings();
}));

Expand Down
31 changes: 17 additions & 14 deletions src/obsidian/vault-explorer-view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,28 @@ import React from "react";
import { createRoot, Root } from "react-dom/client";

import { VAULT_EXPLORER_VIEW } from "src/constants";
import ReactApp from "src/react/index";
import AppMountProvider from "src/react/app-mount-provider";
import { onSettingsChange, VaultExplorerPluginSettings } from "src/types";
import ReactApp from "src/react/components/app/index";
import AppMountProvider from "src/react/components/shared/app-mount-provider";
import { getCurrentSettings, onSettingsChange } from "src/types";
import { Provider } from "react-redux";
import { store } from "src/redux/store";

export default class VaultExplorerView extends ItemView {
root: Root | null;
app: App;
settings: VaultExplorerPluginSettings;
onSettingsChange: onSettingsChange;
getCurrentSettings: getCurrentSettings;

constructor(
leaf: WorkspaceLeaf,
app: App,
settings: VaultExplorerPluginSettings,
getCurrentSettings: getCurrentSettings,
onSettingsChange: onSettingsChange
) {
super(leaf);
this.root = null;
this.app = app;
this.settings = settings;
this.getCurrentSettings = getCurrentSettings;
this.onSettingsChange = onSettingsChange;
}

Expand All @@ -43,14 +45,15 @@ export default class VaultExplorerView extends ItemView {
this.root = createRoot(container);
this.root.render(
<React.StrictMode>
<AppMountProvider
app={this.app}
leaf={this.leaf}
settings={this.settings}
onSettingsChange={this.onSettingsChange}
>
<ReactApp />
</AppMountProvider>
<Provider store={store}>
<AppMountProvider
app={this.app}
getCurrentSettings={this.getCurrentSettings}
onSettingsChange={this.onSettingsChange}
>
<ReactApp />
</AppMountProvider>
</Provider>
</React.StrictMode>
);
}
Expand Down
Loading

0 comments on commit 7ace9eb

Please sign in to comment.