add and remove columns (remove buggy for same named headers)

1 files changed, 18 insertions, 2 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index bcfa695f0..4d96d5f7e 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -55,8 +55,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         );
     }
 
-    @action
     @undoBatch
+    @action
     changeColumnKey = (index: number, newKey: string) => {
         let currKeys = this.columnKeys;
         currKeys[index] = newKey;
@@ -64,6 +64,22 @@ export class CollectionSchemaView extends CollectionSubView() {
         return true;
     };
 
+    @undoBatch
+    @action
+    addColumn = (index: number) => {
+        let currKeys = this.columnKeys;
+        currKeys.splice(index, 0, 'title');
+        this.layoutDoc.columnKeys = new List<string>(currKeys);
+    };
+
+    @undoBatch
+    @action
+    removeColumn = (index: number) => {
+        let currKeys = this.columnKeys;
+        currKeys.splice(index, 1);
+        this.layoutDoc.columnKeys = new List<string>(currKeys);
+    };
+
     @action
     selectRow = (e: React.PointerEvent, doc: Doc, index: number) => {
         const ctrl = e.ctrlKey || e.metaKey;
@@ -239,7 +255,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                 <div className="schema-table">
                     <div className="schema-header-row">
                         {this.columnKeys.map((key, index) => (
-                            <SchemaColumnHeader columnIndex={index} columnKeys={this.columnKeys} columnWidths={this.columnWidths} changeColumnKey={this.changeColumnKey} />
+                            <SchemaColumnHeader columnIndex={index} columnKeys={this.columnKeys} columnWidths={this.columnWidths} changeColumnKey={this.changeColumnKey} addColumn={this.addColumn} removeColumn={this.removeColumn} />
                         ))}
                     </div>
                     <div className="schema-table-content">