Custom field editing

docs/styles.md

@@ -129,6 +129,9 @@ Here's an example of a task card style using some of the above features:
 - `kanbn-task-editor-field-label`
 - `kanbn-task-editor-field-label-description`
 - `kanbn-task-editor-field-input`
+- `kanbn-task-editor-custom-field`
+- `kanbn-task-editor-custom-field-{Custom field name in param-case}`
+- `kanbn-task-editor-custom-checkbox`
 - `kanbn-task-editor-id`
 - `kanbn-task-editor-description-preview`
 - `kanbn-task-editor-button-edit-description`
@@ -145,6 +148,7 @@ Here's an example of a task card style using some of the above features:
 - `kanbn-task-editor-button`
 - `kanbn-task-editor-button-delete`
 - `kanbn-task-editor-buttons`
+- `kanbn-task-editor-main-buttons`
 - `kanbn-task-editor-button-add`
 - `kanbn-task-editor-button-edit`
 - `kanbn-task-editor-field-relations`

ext-src/KanbnTaskPanel.ts

@@ -3,7 +3,10 @@ import * as vscode from "vscode";
 import getNonce from "./getNonce";
 import { v4 as uuidv4 } from "uuid";
 
-function transformTaskData(taskData: any) {
+function transformTaskData(
+  taskData: any,
+  customFields: { name: string, type: 'boolean' | 'date' | 'number' | 'string'}[]
+) {
   const result = {
     id: taskData.id,
     name: taskData.name,
@@ -50,6 +53,17 @@ function transformTaskData(taskData: any) {
     result.metadata["completed"] = new Date(Date.parse(taskData.metadata.completed));
   }
 
+  // Add custom fields
+  for (let customField of customFields) {
+    if (customField.name in taskData.metadata && taskData.metadata[customField.name] !== null) {
+      if (customField.type === 'date') {
+        result.metadata[customField.name] = new Date(Date.parse(taskData.metadata[customField.name]));
+      } else {
+        result.metadata[customField.name] = taskData.metadata[customField.name];
+      }
+    }
+  }
+
   return result;
 }
 
@@ -162,7 +176,10 @@ export default class KanbnTaskPanel {
 
           // Create a task
           case "kanbn.create":
-            await this._kanbn.createTask(transformTaskData(message.taskData), message.taskData.column);
+            await this._kanbn.createTask(
+              transformTaskData(message.taskData, message.customFields),
+              message.taskData.column
+            );
             KanbnTaskPanel.panels[message.panelUuid]._taskId = message.taskData.id;
             KanbnTaskPanel.panels[message.panelUuid]._columnName = message.taskData.column;
             KanbnTaskPanel.panels[message.panelUuid].update();
@@ -173,7 +190,11 @@ export default class KanbnTaskPanel {
 
           // Update a task
           case "kanbn.update":
-            await this._kanbn.updateTask(message.taskId, transformTaskData(message.taskData), message.taskData.column);
+            await this._kanbn.updateTask(
+              message.taskId,
+              transformTaskData(message.taskData, message.customFields),
+              message.taskData.column
+            );
             KanbnTaskPanel.panels[message.panelUuid]._taskId = message.taskData.id;
             KanbnTaskPanel.panels[message.panelUuid]._columnName = message.taskData.column;
             KanbnTaskPanel.panels[message.panelUuid].update();
@@ -258,6 +279,7 @@ export default class KanbnTaskPanel {
       index,
       task,
       tasks,
+      customFields: index.options.customFields ?? [],
       columnName: this._columnName,
       dateFormat: this._kanbn.getDateFormat(index),
       panelUuid: this._panelUuid,

src/App.tsx

@@ -66,6 +66,7 @@ function App() {
         setTasks(tasks);
         setColumnName(event.data.columnName);
         setColumnNames(Object.keys(event.data.index.columns));
+        setCustomFields(event.data.customFields);
         setPanelUuid(event.data.panelUuid);
         break;
 
@@ -118,6 +119,7 @@ function App() {
           tasks={tasks}
           columnName={columnName}
           columnNames={columnNames}
+          customFields={customFields}
           dateFormat={dateFormat}
           panelUuid={panelUuid}
           vscode={vscode}

src/TaskItem.tsx

@@ -102,7 +102,9 @@ const TaskItem = ({ task, columnName, customFields, position, dateFormat, vscode
                             <>
                               <i className="codicon codicon-json"></i>
                               <span title={customField.name}>
-                                {task.metadata[customField.name]}
+                                {customField.type === 'date'
+                                  ? formatDate(task.metadata[customField.name], dateFormat)
+                                  : task.metadata[customField.name]}
                               </span>
                             </>
                           )

src/index.css

@@ -351,10 +351,9 @@ Task editor styles
 -----------------------------------------------------------------------------*/
 
 .kanbn-task-editor-title {
+    display: inline-block;
     font-size: 1.5em;
     margin-top: 0;
-    padding-bottom: 0.5em;
-    border-bottom: 1px var(--vscode-activityBar-inactiveForeground) solid;
 }
 
 .kanbn-task-editor-dirty {
@@ -368,10 +367,12 @@ Task editor styles
     font-weight: normal;
     opacity: 0.8;
     float: right;
+    margin: 2px;
 }
 
 .kanbn-task-editor-form {
     display: flex;
+    border-top: 1px solid var(--vscode-activityBar-inactiveForeground);
 }
 
 .kanbn-task-editor-field .kanbn-task-editor-title,
@@ -439,6 +440,12 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
     text-align: right;
 }
 
+.kanbn-task-editor-main-buttons {
+    float: right;
+    position: relative;
+    top: -0.5em;
+}
+
 .kanbn-task-editor-button {
     outline: none;
     border: 1px transparent solid;
@@ -602,6 +609,14 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
     float: right;
 }
 
+.kanbn-task-editor-custom-checkbox {
+    float: left;
+    width: auto;
+    position: relative;
+    top: -.2em;
+    margin: .5em 1em .5em 0;
+}
+
 /*-----------------------------------------------------------------------------
 Burndown chart styles
 -----------------------------------------------------------------------------*/