Merge pull request #55 from terryli710/feature/google-calendar-api

Feature/google calendar api

manifest.json

@@ -3,9 +3,9 @@
   "description": "Task formatter with card view.",
   "id": "obsidian-taskcard",
   "isDesktopOnly": false,
-  "minAppVersion": "0.0.1",
+  "minAppVersion": "0.3.0",
   "name": "Task Card",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "authorUrl": "https://github.com/terryli710",
   "fundingUrl": "https://github.com/sponsors/terryli710"
 }

package.json

@@ -48,10 +48,13 @@
     "ts-jest": "^29.1.1"
   },
   "dependencies": {
+    "humanize-duration": "^3.30.0",
+    "humanized-duration": "^0.0.1",
     "lucide-svelte": "^0.268.0",
     "marked": "^6.0.0",
     "obsidian": "latest",
     "obsidian-dataview": "^0.5.56",
+    "parse-duration": "^1.1.0",
     "runtypes": "^6.7.0",
     "sugar": "^2.0.6",
     "svelte": "^4.1.1",

src/autoSuggestions/Suggester.ts

@@ -38,8 +38,9 @@ export class AttributeSuggester {
       // );
 
       this.inputtableAttributes = [
-        'priority',
         'due',
+        'duration',
+        'priority',
         'project',
       ]
     });
@@ -56,6 +57,9 @@ export class AttributeSuggester {
     suggestions = suggestions.concat(
       this.getDueSuggestions(lineText, cursorPos)
     );
+    suggestions = suggestions.concat(
+      this.getDurationSuggestions(lineText, cursorPos)
+    )
     suggestions = suggestions.concat(
       this.getProjectSuggestions(lineText, cursorPos)
     );
@@ -180,6 +184,51 @@ export class AttributeSuggester {
     return suggestions;
   }
 
+  getDurationSuggestions(
+    lineText: string,
+    cursorPos: number
+  ): SuggestInformation[] {
+    let suggestions: SuggestInformation[] = [];
+
+    // Modify regex to capture the due date query
+    const durationRegexText = `${escapeRegExp(this.startingNotation)}\\s?duration:(.*?)${escapeRegExp(this.endingNotation)}`;
+    const durationRegex = new RegExp(durationRegexText, 'g');
+    const durationMatch = matchByPositionAndGroup(lineText, durationRegex, cursorPos, 1);
+    if (!durationMatch) return suggestions; // No match
+
+    // Get the due date query from the captured group
+    const durationQuery = (durationMatch[1] || '').trim();
+
+    const durationStringSelections = [
+      '5 minutes',
+      '10 minutes',
+      '15 minutes',
+      '30 minutes',
+      '1 hour',
+      '2 hours',
+      '3 hours',
+    ];
+
+    // Use the dueQuery to filter the suggestions
+    const filteredDurationStrings = durationStringSelections.filter((durationString) =>
+      durationString.toLowerCase().startsWith(durationQuery.toLowerCase())
+    );
+
+    suggestions = filteredDurationStrings.map((durationString) => {
+      const replaceText = `${this.startingNotation}duration: ${durationString}${this.endingNotation} `;
+      return {
+        displayText: durationString,
+        replaceText: replaceText,
+        replaceFrom: durationMatch.index,
+        replaceTo: durationMatch.index + durationMatch[0].length,
+        cursorPosition: durationMatch.index + replaceText.length
+      };
+    });
+
+    return suggestions;
+
+  }
+
   getProjectSuggestions(
     lineText: string,
     cursorPos: number

src/components/icons/CalendarClock.svelte

@@ -0,0 +1,18 @@
+
+
+<script>
+    import LucideIcon from './LucideIcon.svelte';
+    export let width = "24";
+    export let height = "24";
+    export let ariaLabel = "chevrons-up-down";
+    const svgPath = `
+    <path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/>
+    <path d="M16 2v4"/>
+    <path d="M8 2v4"/>
+    <path d="M3 10h5"/>
+    <path d="M17.5 17.5 16 16.25V14"/>
+    <path d="M22 16a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z"/>
+    `;
+  </script>
+  <LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel={ariaLabel} class="task-card-icon" />
+

src/components/icons/ChevronsDownUp.svelte

@@ -4,10 +4,11 @@
   import LucideIcon from './LucideIcon.svelte';
   export let width = "24";
   export let height = "24";
+  export let ariaLabel = "chevrons-down-up";
   const svgPath = `
     <path d="m7 20 5-5 5 5" />
     <path d="m7 4 5 5 5-5" />
   `;
 </script>
 
-<LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel="chevrons-down-up" class="task-card-icon" />
+<LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel={ariaLabel} class="task-card-icon" />

src/components/icons/ChevronsUpDown.svelte

@@ -4,9 +4,10 @@
     import LucideIcon from './LucideIcon.svelte';
     export let width = "24";
     export let height = "24";
+    export let ariaLabel = "chevrons-up-down";
     const svgPath = `
     <path d="m7 15 5 5 5-5"/>
     <path d="m7 9 5-5 5 5"/>
     `;
   </script>
-  <LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel="chevrons-up-down" class="task-card-icon" />
+  <LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel={ariaLabel} class="task-card-icon" />

src/components/icons/History.svelte

@@ -0,0 +1,14 @@
+
+
+<script>
+    import LucideIcon from './LucideIcon.svelte';
+    export let width = "24";
+    export let height = "24";
+    export let ariaLabel = "chevrons-up-down";
+    const svgPath = `
+    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
+    <path d="M3 3v5h5"/><path d="M12 7v5l4 2"/>
+    `;
+  </script>
+  <LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel={ariaLabel} class="task-card-icon" />
+

src/components/icons/MoreVertical.svelte

@@ -4,11 +4,12 @@
     import LucideIcon from './LucideIcon.svelte';
     export let width = "24";
     export let height = "24";
+    export let ariaLabel = "more-vertical";
     const svgPath = `
         <circle cx="12" cy="12" r="1"/>
         <circle cx="12" cy="5" r="1"/>
         <circle cx="12" cy="19" r="1"/>
     `;
 </script>
 
-<LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel="more-vertical" class="task-card-icon" />
+<LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel={ariaLabel} class="task-card-icon" />

src/components/icons/Plus.svelte

@@ -4,12 +4,13 @@
     import LucideIcon from './LucideIcon.svelte';
     export let width = "24";
     export let height = "24";
+    export let ariaLabel = "plus";
     const svgPath = `
       <path d="M5 12h14"/>
       <path d="M12 5v14"/>
     `;
 
   </script>
 
-  <LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel="plus" class="task-card-icon" />
+  <LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel={ariaLabel} class="task-card-icon" />
 

src/index.ts

@@ -12,6 +12,7 @@ import { FileOperator } from './renderer/fileOperator';
 import { TaskFormatter } from './taskModule/taskFormatter';
 import { TaskMonitor } from './taskModule/taskMonitor';
 import { TaskCardCache } from './query';
+import { CreateProjectModal } from './modal/createProjectModal';
 
 
 export default class TaskCardPlugin extends Plugin {
@@ -38,7 +39,7 @@ export default class TaskCardPlugin extends Plugin {
     this.taskValidator = new TaskValidator(SettingStore);
     this.taskCardRenderManager = new TaskCardRenderManager(this);
     this.fileOperator = new FileOperator(this, this.app);
-    this.taskMonitor = new TaskMonitor(this, this.app);
+    this.taskMonitor = new TaskMonitor(this, this.app, SettingStore);
     this.staticTaskListRenderManager = new StaticTaskListRenderManager(this);
     this.cache = new TaskCardCache(this);
   }
@@ -124,7 +125,7 @@ export default class TaskCardPlugin extends Plugin {
 
     this.addCommand({
       id: 'task-card-add-task',
-      name: 'Add Task',
+      name: 'Add Task in a New Line',
       editorCallback: (editor: Editor) => {
         const editorPos: EditorPosition = editor.getCursor();
         editor.replaceRange(
@@ -134,6 +135,26 @@ export default class TaskCardPlugin extends Plugin {
         editor.setCursor(editor.getCursor().line + 1, 6)
       }
     })
+
+    this.addCommand({
+      id: 'task-card-append-indicator-tag',
+      name: 'Append Indicator Tag',
+      editorCallback: (editor: Editor) => {
+        const editorPos: EditorPosition = editor.getCursor();
+        const currentLine = editor.getLine(editorPos.line);
+        editor.replaceRange(` #${this.settings.parsingSettings.indicatorTag}`, { line: editorPos.line, ch: currentLine.length });
+      }
+    })
+
+    // a command to pop up a modal to create a new project
+    this.addCommand({
+      id: 'task-card-create-project',
+      name: 'Create a New Project',
+      callback: () => {
+        const projectCreationModel = new CreateProjectModal(this.app, this.projectModule.addProject.bind(this.projectModule));
+        projectCreationModel.open();
+      }
+    })
   }
 
   registerPostProcessors() {

src/modal/createProjectModal.ts

@@ -0,0 +1,79 @@
+import { App, Modal, Notice, Setting } from 'obsidian';
+import { Project } from '../taskModule/project';
+
+export class CreateProjectModal extends Modal {
+  result: Partial<Project> = {
+        id: '',
+        name: '',
+        color: ''
+    };
+  onSubmit: (result: Partial<Project>) => boolean;
+
+  constructor(app: App, onSubmit: (result: Partial<Project>) => boolean) {
+    super(app);
+    this.onSubmit = onSubmit;
+  }
+
+  onOpen() {
+    const { contentEl } = this;
+
+    contentEl.createEl('h1', { text: "Task Card: Create a Project" });
+
+    new Setting(contentEl)
+        .setName('Project Name')
+        .setDesc('The name of the project. Cannot be empty.')
+        .addText((text) =>
+      text.onChange((value) => {
+        this.result.name = value;
+      })
+    );
+
+    new Setting(contentEl)
+        .setName('Project Color')
+        .setDesc('The color of the project. Optional. If not provided, a random color will be assigned.')
+        .addColorPicker((colorPicker) =>
+      colorPicker.onChange((value) => {
+        this.result.color = value;
+      })
+    );
+
+    new Setting(contentEl).addButton((btn) =>
+      btn
+        .setButtonText('Submit')
+        .setCta()
+        .onClick(() => {
+          this.close();
+        })
+    );
+  }
+
+  checkValidity() {
+    // check if the project name is valid (not empty)
+    if (!this.result.name) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  onClose() {
+    // Clear content first
+    let { contentEl } = this;
+    contentEl.empty();
+
+    // Check validity
+    if (!this.checkValidity()) {
+        new Notice('[TaskCard] Project name cannot be empty.');
+        return; // Exit function early if not valid
+    }
+
+    // Handle submission
+    const result = this.onSubmit(this.result);
+    if (result === true) {
+        new Notice(`[TaskCard] Project created: ${this.result.name}`);
+    } else {
+        new Notice('[TaskCard] Project creation failed. Make sure the project name is unique.');
+    }
+}
+
+}

src/renderer/TaskCardRenderer.ts

@@ -96,7 +96,8 @@
             taskCardStatus: {
               descriptionStatus: 'done',
               projectStatus: 'done',
-              dueStatus: 'done'
+              dueStatus: 'done',
+              durationStatus: 'done'
             },
             markdownTask: null,
             taskItemEl: taskItemEl,