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

1 files changed, 20 insertions, 0 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index b9dbf4f57..f93a3d13d 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -3,12 +3,15 @@ import { computed } from 'mobx';
 import { observer } from 'mobx-react';
 import { EditableView } from '../../EditableView';
 import './CollectionSchemaView.scss';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export interface SchemaColumnHeaderProps {
     columnKeys: string[];
     columnWidths: number[];
     columnIndex: number;
     changeColumnKey: (index: number, newKey: string) => boolean;
+    addColumn: (index: number) => void;
+    removeColumn: (index: number) => void;
 }
 
 @observer
@@ -21,6 +24,23 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
         return (
             <div className="schema-column-header" style={{ width: this.props.columnWidths[this.props.columnIndex] }}>
                 <EditableView SetValue={(newKey: string) => this.props.changeColumnKey(this.props.columnIndex, newKey)} GetValue={() => this.fieldKey} contents={this.fieldKey} />
+
+                <div className="schema-header-menu">
+                    <div
+                        className="schema-header-button"
+                        onPointerDown={e => {
+                            this.props.addColumn(this.props.columnIndex + 1);
+                        }}>
+                        <FontAwesomeIcon icon="plus" />
+                    </div>
+                    <div
+                        className="schema-header-button"
+                        onPointerDown={e => {
+                            this.props.removeColumn(this.props.columnIndex);
+                        }}>
+                        <FontAwesomeIcon icon="trash" />
+                    </div>
+                </div>
             </div>
         );
     }