Merge pull request #4 from chhoumann/kanban-support

README.md

@@ -11,6 +11,7 @@
   - Works with total task, completed task, and incomplete task counts. Mark a task as completed (from anywhere), and the file will be updated with the new count.
 - Transform properties between YAML and Dataview
 - Delete properties easily
+- Auto update properties in files linked to from Kanban boards on lane change
 
 ### Installation
 This plugin has not yet been added to the community plugin browser in Obsidian.

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "MetaEdit",
 	"name": "MetaEdit",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"minAppVersion": "0.12.0",
 	"description": "MetaEdit helps you manage your metadata.",
 	"author": "Christian B. B. Houmann",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "metaedit",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "MetaEdit helps you manage your metadata.",
   "main": "main.js",
   "scripts": {
@@ -24,5 +24,8 @@
     "svelte-check": "^1.3.0",
     "svelte-preprocess": "^4.7.0",
     "@tsconfig/svelte": "1.0.10"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.9.2"
   }
 }

src/Modals/GenericPrompt/GenericPrompt.ts

@@ -37,6 +37,11 @@ export default class GenericPrompt extends Modal {
 
     onOpen() {
         super.onOpen();
+
+        const modalPrompt: HTMLElement = document.querySelector('.metaEditPrompt');
+        const modalInput: any = modalPrompt.querySelector('.metaEditPromptInput');
+        modalInput.focus();
+        modalInput.select();
     }
 
     onClose() {

src/Modals/GenericPrompt/GenericPromptContent.svelte

@@ -20,7 +20,7 @@
     }
 </script>
 
-<div>
+<div class="metaEditPrompt">
     <h1 style="text-align: center">{header}</h1>
-    <input bind:this={inputEl} autofocus style="width: 100%;" on:keydown={submit} type="text" placeholder={placeholder} bind:value={value}>
+    <input class="metaEditPromptInput" bind:this={inputEl} autofocus style="width: 100%;" on:keydown={submit} type="text" placeholder={placeholder} bind:value={value}>
 </div>

src/Modals/KanbanHelperSetting/KanbanHelperSettingContent.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+    import {KanbanProperty} from "../../Types/kanbanProperty";
+    import {KanbanHelperSettingSuggester} from "./KanbanHelperSettingSuggester";
+    import type {App, TFile} from "obsidian";
+    import {onDestroy, onMount} from "svelte";
+
+    export let save: (kanbanProperties: KanbanProperty[]) => void;
+    export let kanbanProperties: KanbanProperty[] = [];
+    export let boards: TFile[];
+    export let app: App;
+    let suggestEl: HTMLInputElement;
+    let suggester: KanbanHelperSettingSuggester;
+    let inputValue: string;
+
+    onMount(() => {
+        suggester = new KanbanHelperSettingSuggester(app, suggestEl, boards);
+    })
+
+    function addNewProperty() {
+        const board: TFile = boards.find(board => board.basename === inputValue);
+        const exists: boolean = !!kanbanProperties.find(kp => kp.boardName === board.basename);
+        if (!board || exists) return;
+
+        kanbanProperties.push({
+            property: "",
+            boardName: board.basename
+        });
+
+        kanbanProperties = kanbanProperties; // Svelte
+        save(kanbanProperties);
+    }
+
+    function removeProperty(i: number) {
+        kanbanProperties.splice(i, 1);
+        kanbanProperties = kanbanProperties; // Svelte
+        save(kanbanProperties);
+    }
+
+    function getHeadingsInBoard(boardName: string): string {
+        const file = boards.find(board => board.basename === boardName)
+        const headings = app.metadataCache.getFileCache(file).headings;
+        if (!headings) return "";
+        return headings.map(heading => heading.heading).join(", ");
+    }
+</script>
+
+<div class="centerSettingContent">
+    <table style="width: 100%">
+        <thead>
+        <tr>
+            <th></th>
+            <th>Board</th>
+            <th>Property in link</th>
+            <th>Possible values</th>
+        </tr>
+        </thead>
+        {#each kanbanProperties as kanbanProperty, i}
+            <tr>
+                <td>
+                    <input type="button" value="❌" class="not-a-button" on:click={() => removeProperty(i)}/>
+                </td>
+                <td>
+                    {kanbanProperty.boardName}
+                </td>
+                <td>
+                    <input on:change={() => save(kanbanProperties)} type="text" placeholder="Property name" bind:value={kanbanProperty.property}>
+                </td>
+                <td>
+                        {getHeadingsInBoard(kanbanProperty.boardName)}
+                </td>
+            </tr>
+            <br>
+        {/each}
+    </table>
+
+    <input bind:this={suggestEl} bind:value={inputValue} type="text">
+    <div class="buttonContainer">
+        <button on:click={addNewProperty} class="mod-cta">Add</button>
+    </div>
+</div>
+
+<style>
+    .buttonContainer {
+        display: flex;
+        justify-content: center;
+        margin-top: 1rem;
+    }
+
+    select {
+        border-radius: 4px;
+        width: 100%;
+        height: 30px;
+        border: 1px solid #dbdbdc;
+        color: #383a42;
+        background-color: #fff;
+        padding: 3px;
+    }
+
+    button {
+        margin-left: 5px;
+        margin-right: 5px;
+        font-size: 15px;
+    }
+</style>

src/Modals/KanbanHelperSetting/KanbanHelperSettingSuggester.ts

@@ -0,0 +1,35 @@
+import {TextInputSuggest} from "../../suggest";
+import type {App} from "obsidian";
+import type {TFile} from "obsidian";
+
+export class KanbanHelperSettingSuggester extends TextInputSuggest<TFile> {
+    public app: App;
+    public inputEl: HTMLInputElement;
+    private boards: TFile[];
+
+    constructor(app: App, inputEl: HTMLInputElement, boards: TFile[]) {
+        super(app, inputEl);
+        this.app = app;
+        this.inputEl = inputEl;
+        this.boards = boards;
+    }
+
+    getSuggestions(inputStr: string): TFile[] {
+        const inputLowerCase: string = inputStr.toLowerCase();
+        return this.boards.map(board => {
+            if (board.basename.toLowerCase().contains(inputLowerCase))
+                return board;
+        });
+    }
+
+    selectSuggestion(item: TFile): void {
+        this.inputEl.value = item.basename;
+        this.inputEl.trigger("input");
+        this.close();
+    }
+
+    renderSuggestion(value: TFile, el: HTMLElement): void {
+        if (value)
+            el.setText(value.basename);
+    }
+}

src/Modals/metaEditSuggester.ts

@@ -56,13 +56,19 @@ export default class MetaEditSuggester extends FuzzySuggestModal<string> {
 
     async onChooseItem(item: string, evt: MouseEvent | KeyboardEvent): Promise<void> {
         if (item === newYaml) {
-            const {propName, propValue} = await this.controller.createNewProperty();
+            const newProperty = await this.controller.createNewProperty();
+            if (!newProperty) return null;
+
+            const {propName, propValue} = newProperty;
             await this.controller.addYamlProp(propName, propValue, this.file);
             return;
         }
 
         if (item === newDataView) {
-            const {propName, propValue} = await this.controller.createNewProperty();
+            const newProperty = await this.controller.createNewProperty();
+            if (!newProperty) return null;
+
+            const {propName, propValue} = newProperty;
             await this.controller.addDataviewField(propName, propValue, this.file);
             return;
         }

src/Settings/defaultSettings.ts

@@ -17,5 +17,9 @@ export const DEFAULT_SETTINGS: MetaEditSettings = Object.freeze({
     EditMode: {
         mode: EditMode.AllSingle,
         properties: [],
+    },
+    KanbanHelper: {
+        enabled: false,
+        boards: []
     }
 });

src/Settings/metaEditSettings.ts

@@ -1,6 +1,7 @@
 import type {EditMode} from "../Types/editMode";
 import type {ProgressProperty} from "../Types/progressProperty";
 import type {AutoProperty} from "../Types/autoProperty";
+import type {KanbanProperty} from "../Types/kanbanProperty";
 
 export interface MetaEditSettings {
     ProgressProperties: {
@@ -18,5 +19,9 @@ export interface MetaEditSettings {
     EditMode: {
         mode: EditMode,
         properties: string[],
+    },
+    KanbanHelper: {
+        enabled: boolean,
+        boards: KanbanProperty[]
     }
 }

src/Settings/metaEditSettingsTab.ts

@@ -3,10 +3,12 @@ import type MetaEdit from "../main";
 import {EditMode} from "../Types/editMode";
 import ProgressPropertiesModalContent from "../Modals/ProgressPropertiesSettingModal/ProgressPropertiesModalContent.svelte";
 import AutoPropertiesModalContent from "../Modals/AutoPropertiesSettingModal/AutoPropertiesModalContent.svelte";
+import KanbanHelperSettingContent from "../Modals/KanbanHelperSetting/KanbanHelperSettingContent.svelte";
 import SingleValueTableEditorContent
     from "../Modals/shared/SingleValueTableEditorContent.svelte";
 import type {ProgressProperty} from "../Types/progressProperty";
 import type {AutoProperty} from "../Types/autoProperty";
+import type {KanbanProperty} from "../Types/kanbanProperty";
 
 function toggleHidden(div: HTMLDivElement, hidden: boolean) {
     if (div && !hidden) {
@@ -38,7 +40,8 @@ export class MetaEditSettingsTab extends PluginSettingTab {
         this.addProgressPropertiesSetting(containerEl);
         this.addAutoPropertiesSetting(containerEl);
         this.addIgnorePropertiesSetting(containerEl);
-        this.addEditModeSettings(containerEl);
+        this.addEditModeSetting(containerEl);
+        this.addKanbanHelperSetting(containerEl);
     }
 
     private addProgressPropertiesSetting(containerEl: HTMLElement) {
@@ -54,7 +57,6 @@ export class MetaEditSettingsTab extends PluginSettingTab {
                         if (value === this.plugin.settings.ProgressProperties.enabled) return;
 
                         this.plugin.settings.ProgressProperties.enabled = value;
-                        this.plugin.toggleOnFileModifyUpdateProgressProperties(value);
 
                         await this.plugin.saveSettings();
                     });
@@ -155,7 +157,7 @@ export class MetaEditSettingsTab extends PluginSettingTab {
         }
     }
 
-    private addEditModeSettings(containerEl: HTMLElement) {
+    private addEditModeSetting(containerEl: HTMLElement) {
         let modal: any, div: HTMLDivElement, hidden: boolean = true;
         const setting = new Setting(containerEl)
             .setName("Edit Mode")
@@ -206,4 +208,44 @@ export class MetaEditSettingsTab extends PluginSettingTab {
         this.svelteElements.forEach(el => el.$destroy());
         return super.hide();
     }
+
+    private addKanbanHelperSetting(containerEl: HTMLElement) {
+        let modal: ProgressPropertiesModalContent, div: HTMLDivElement, hidden: boolean = true;
+        const setting = new Setting(containerEl)
+            .setName("Kanban Board Helper")
+            .setDesc("Update properties in links in kanban boards automatically when a card is moved to a new lane.")
+            .addToggle(toggle => {
+                toggle
+                    .setTooltip("Toggle Kanban Helepr")
+                    .setValue(this.plugin.settings.KanbanHelper.enabled)
+                    .onChange(async value => {
+                        if (value === this.plugin.settings.KanbanHelper.enabled) return;
+
+                        this.plugin.settings.KanbanHelper.enabled = value;
+
+                        await this.plugin.saveSettings();
+                    });
+            })
+            .addExtraButton(button => button.onClick(() => hidden = toggleHidden(div, hidden)))
+
+        div = setting.settingEl.createDiv();
+        setting.settingEl.style.display = "block";
+        div.style.display = "none";
+
+        modal = new KanbanHelperSettingContent({
+            target: div,
+            props: {
+                kanbanProperties: this.plugin.settings.KanbanHelper.boards,
+                boards: this.plugin.getFilesWithProperty("kanban-plugin"),
+                app: this.app,
+                save: async (kanbanProperties: KanbanProperty[]) => {
+                    this.plugin.settings.KanbanHelper.boards = kanbanProperties;
+                    console.log(this.plugin.settings.KanbanHelper.boards);
+                    await this.plugin.saveSettings();
+                }
+            },
+        });
+
+        this.svelteElements.push(modal);
+    }
 }

src/Types/kanbanProperty.ts

@@ -0,0 +1,4 @@
+export interface KanbanProperty {
+    boardName: string,
+    property: string
+}

src/constants.ts

@@ -1,3 +1,3 @@
 export const ADD_FIRST_ELEMENT: string = "cmd:addfirst";
 export const ADD_TO_BEGINNING: string = "cmd:beg";
-export const ADD_TO_END: string = "cmd:beg";
+export const ADD_TO_END: string = "cmd:end";