fixed duration display bug

terryli710 · Mar 12, 2024 · 03f3516 · 03f3516
1 parent 91de1b4
commit 03f3516
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 18 deletions.
diff --git a/src/ui/Duration.svelte b/src/ui/Duration.svelte
@@ -15,8 +15,10 @@
   export let params: TaskDisplayParams;
   export let displayDuration: boolean;
 
+  const interactiveMode = interactive;
+
   let duration: Duration;
-  if (interactive) {
+  if (interactiveMode) {
     duration = taskSyncManager.obsidianTask.hasDuration() ? taskSyncManager.obsidianTask.duration : undefined;
   } else {
     duration = taskItem.duration;
@@ -105,7 +107,6 @@
                 new Notice(`[TaskCard] Invalid duration format: ${durationInputString}`);
             }
         }
-
         taskSyncManager.updateObsidianTaskAttribute('duration', duration);
         origDurationInputString = durationInputString;
         
@@ -138,7 +139,7 @@ function parseDurationInput(input: string): { hours: number, minutes: number } |
   }
 
   $: {
-    if (interactive) {
+    if (interactiveMode) {
       displayDuration = taskSyncManager.obsidianTask.hasDuration() || taskSyncManager.getTaskCardStatus('durationStatus') === 'editing';
     } else {
       displayDuration = !!taskItem.duration; // The double bang '!!' converts a truthy/falsy value to a boolean true/false
@@ -162,7 +163,7 @@ function parseDurationInput(input: string): { hours: number, minutes: number } |
     <div class="task-card-duration-left-part">
       <span class="task-card-duration-prefix"><History width={"14"} height={"14"} ariaLabel="duration"/></span>
     </div>
-    {#if taskSyncManager.getTaskCardStatus('durationStatus') === 'editing'}
+    {#if interactiveMode && taskSyncManager.getTaskCardStatus('durationStatus') === 'editing'}
       <input
         type="text"
         bind:value={durationInputString}

diff --git a/src/ui/StaticTaskCard.svelte b/src/ui/StaticTaskCard.svelte
@@ -13,16 +13,14 @@
   import CircularProgressBar from '../components/CircularProgressBar.svelte';
   import SyncLogos from './SyncLogos.svelte';
   import Schedule from './Schedule.svelte';
-  // import Description from './Description.svelte';
   import Content from './Content.svelte';
   import Duration from './Duration.svelte';
   import Due from './Due.svelte';
-  
+
   var md = require('markdown-it');
   var taskLists = require('markdown-it-task-lists');
   var mdParser = md().use(taskLists);
 
-
   export let taskItem: PositionedObsidianTask;
   export let plugin: TaskCardPlugin;
 
@@ -92,7 +90,7 @@
 
     const currentWorkspaceDisplayMode =
       plugin.app.workspace.activeLeaf.view.getState();
-    console.log(currentWorkspaceDisplayMode);
+    // console.log(currentWorkspaceDisplayMode);
 
     const openViewState: OpenViewState = {
       active: true,
@@ -116,15 +114,17 @@
   const displayDue = task.hasDue();
   // const displayDescription = task.hasDescription();
 
-  const taskDescriptionHTML = transformTaskDescriptionHTML(mdParser.render(task.description));
+  const taskDescriptionHTML = transformTaskDescriptionHTML(
+    mdParser.render(task.description)
+  );
 
   /**
    * Transforms the HTML generated by the markdown parser for task descriptions to match a specified structure.
    * It specifically adjusts <ul> and <li> elements within the task descriptions to ensure they have the correct
    * classes and attributes. This includes adding 'contains-task-list' class to <ul> elements, ensuring 'task-list-item'
    * class is present on relevant <li> elements, and adjusting <input> elements inside these list items to have the
    * appropriate attributes.
-   * 
+   *
    * @param {string} taskDescriptionHTML - The HTML string generated by the markdown parser for a task description.
    * @returns {string} The transformed HTML string with the updated structure.
    */
@@ -144,8 +144,7 @@
     wrapperDiv.appendChild(ulElement);
 
     let lis = doc.body.querySelectorAll('li');
-    console.log('doc', doc);
-    // console.log("lis", lis);
+    
     lis.forEach((li, index) => {
       let newLi = document.createElement('li');
       let lineIndex = index + 1;
@@ -154,7 +153,8 @@
       newLi.setAttribute('data-line', lineIndex.toString());
       newLi.setAttribute('data-real-line', lineIndex.toString());
 
-      if (input instanceof HTMLInputElement) { // Ensure input is an HTMLInputElement
+      if (input instanceof HTMLInputElement) {
+        // Ensure input is an HTMLInputElement
         let clonedInput = input.cloneNode(true) as HTMLInputElement; // Cast the cloned node
         clonedInput.setAttribute('class', 'task-list-item-checkbox');
         clonedInput.setAttribute('data-line', lineIndex.toString());
@@ -183,7 +183,6 @@
       }
 
       ulElement.appendChild(newLi);
-
     });
 
     // Use XMLSerializer to convert the document back to a string
@@ -192,7 +191,6 @@
 
     return transformedHTML;
   }
-
 </script>
 
 {#if taskDisplayParams.mode === 'single-line'}
@@ -321,21 +319,21 @@
       <!-- Schedule/Duration/Due -->
       <Schedule
         interactive={false}
-        {displaySchedule}
+        displaySchedule={displaySchedule}
         params={{ mode: 'multi-line' }}
         taskItem={task}
       />
       <Duration
         interactive={false}
         params={{ mode: 'multi-line' }}
         taskItem={task}
-        {displayDuration}
+        displayDuration={displayDuration}
       />
       <Due
         interactive={false}
         params={{ mode: 'multi-line' }}
         taskItem={task}
-        {displayDue}
+        displayDue={displayDue}
       />
       <!-- Labels -->
       <div class="task-card-labels">