Style updates, add more TODOs

docs/styles.md

@@ -38,4 +38,9 @@ The kanbn board has a default style which is based on the current vscode theme,
 
 ### Task editor
 
-- `// TODO add task editor classes`
+- `div.kanbn-task-editor`
+  - `h1.kanbn-task-editor-title`
+  - `div.kanbn-task-editor-form`
+    - `div.kanbn-task-editor-column-left`
+    - `div.kanbn-task-editor-column-right`
+    - `// TODO finish class structure docs...`

ext-src/KanbnTaskPanel.ts

@@ -146,6 +146,7 @@ export default class KanbnTaskPanel {
         // Delete a task
         case 'kanbn.delete':
           // TODO delete task
+          // TODO add yes/no confirmation buttons to information message, then delete task and close task panel
           vscode.window.showInformationMessage('delete task');
           return;
       }

src/TaskEditor.tsx

@@ -28,6 +28,19 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, vscode }
     });
   };
 
+  // Called when the delete task button is clicked
+  const handleRemoveTask = () => {
+    vscode.postMessage({
+      command: 'kanbn.delete',
+      taskId: task!.id
+    });
+  };
+
+  // TODO progress bar below progress input
+  // TODO auto-colour tags while typing
+  // TODO comments
+  // TODO make sure all buttons have title attributes, maybe remove labels from array delete buttons?
+
   return (
     <div className="kanbn-task-editor">
       <h1 className="kanbn-task-editor-title">{editing ? 'Update task' : 'Create new task'}</h1>
@@ -50,6 +63,10 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, vscode }
         }}
         validate={values => {
           const errors: { name?: string } = {};
+
+          // TODO validation
+
+          // Task name cannot be empty
           if (!values.name) {
             errors.name = 'Task name is required.';
           }
@@ -80,7 +97,7 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, vscode }
           isSubmitting
         }) => (
           <Form>
-            <div style={{ display: "flex" }}>
+            <div className="kanbn-task-editor-form">
               <div className="kanbn-task-editor-column-left">
                 <div className="kanbn-task-editor-field kanbn-task-editor-field-name">
                   <label className="kanbn-task-editor-field-label">
@@ -236,6 +253,7 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, vscode }
                     type="button"
                     className="kanbn-task-editor-button kanbn-task-editor-button-delete"
                     title="Delete"
+                    onClick={handleRemoveTask}
                   >
                     <i className="codicon codicon-trash"></i>Delete
                   </button>}
@@ -313,6 +331,53 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, vscode }
                     name="progress"
                   />
                 </div>
+                <div className="kanbn-task-editor-field kanbn-task-editor-field-tags">
+                  <label className="kanbn-task-editor-field-label">
+                    <p>Tags</p>
+                  </label>
+                  <FieldArray name="metadata.tags">
+                    {({ insert, remove, push }) => (
+                      <div>
+                        {(
+                          'tags' in values.metadata &&
+                          values.metadata.tags!.length > 0
+                        ) && values.metadata.tags!.map((tag, index) => (
+                          <div className="kanbn-task-editor-row kanbn-task-editor-row-tag" key={index}>
+                            <div className="kanbn-task-editor-column kanbn-task-editor-field-tag">
+                              <Field
+                                className="kanbn-task-editor-field-input"
+                                name={`metadata.tags.${index}`}
+                              />
+                              <ErrorMessage
+                                className="kanbn-task-editor-field-errors"
+                                component="div"
+                                name={`metadata.tags.${index}`}
+                              />
+                            </div>
+                            <div className="kanbn-task-editor-column kanbn-task-editor-column-buttons">
+                              <button
+                                type="button"
+                                className="kanbn-task-editor-button kanbn-task-editor-button-delete"
+                                onClick={() => remove(index)}
+                              >
+                                <i className="codicon codicon-trash"></i>Delete
+                              </button>
+                            </div>
+                          </div>
+                        ))}
+                        <div className="kanbn-task-editor-buttons">
+                          <button
+                            type="button"
+                            className="kanbn-task-editor-button kanbn-task-editor-button-add"
+                            onClick={() => push('')}
+                          >
+                            <i className="codicon codicon-plus"></i>Add tag
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                  </FieldArray>
+                </div>
               </div>
             </div>
           </Form>

src/index.css

@@ -174,32 +174,32 @@ body {
     border-radius: 4px;
 }
 
-.kanbn-task-tag-Nothing {
+.kanbn-task-tag-nothing {
     background-color: #6bf;
     color: #333;
 }
 
-.kanbn-task-tag-Tiny {
+.kanbn-task-tag-tiny {
     background-color: #36d;
     color: #333;
 }
 
-.kanbn-task-tag-Small {
+.kanbn-task-tag-small {
     background-color: #194;
     color: #333;
 }
 
-.kanbn-task-tag-Medium {
+.kanbn-task-tag-medium {
     background-color: #eb1;
     color: #333;
 }
 
-.kanbn-task-tag-Large {
+.kanbn-task-tag-large {
     background-color: #e83;
     color: #333;
 }
 
-.kanbn-task-tag-Huge {
+.kanbn-task-tag-huge {
     background-color: #f42;
     color: #333;
 }
@@ -220,6 +220,10 @@ body {
     border-bottom: 1px var(--vscode-activityBar-inactiveForeground) solid;
 }
 
+.kanbn-task-editor-form {
+    display: flex;
+}
+
 .kanbn-task-editor-field .kanbn-task-editor-title {
     font-size: 1.1em;
     padding: 0.5em 0;