render filter option dropdown

2 files changed, 50 insertions, 2 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 0b68fd31e..7a65b4436 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -805,18 +805,66 @@ export class CollectionSchemaView extends CollectionSubView() {
         );
     }
 
+    @computed get renderFilterOptions() {
+        const keyOptions: string[] = [];
+        const columnKey = this.columnKeys[this._filterColumnIndex!];
+        this.childDocs.forEach(doc => {
+            const key = StrCast(doc[columnKey]);
+            if (keyOptions.includes(key) === false && (key.includes(this._filterValue) || !this._filterValue) && key !== '') {
+                keyOptions.push(key);
+            }
+        });
+
+        const filters = StrListCast(this.Document._docFilters);
+        for (let i = 0; i < (filters?.length ?? 0) - 1; i++) {
+            if (filters[i] === columnKey && keyOptions.includes(filters[i].split(':')[1]) === false) {
+                keyOptions.push(filters[i + 1]);
+            }
+        }
+
+        const options = keyOptions.map(key => {
+            let bool = false;
+            if (filters !== undefined) {
+                const ind = filters.findIndex(filter => filter.split(':')[1] === key);
+                const fields = ind === -1 ? undefined : filters[ind].split(':');
+                bool = fields ? fields[2] === 'check' : false;
+            }
+            return (
+                <div key={key} className="schema-filter-option">
+                    <input
+                        type="checkbox"
+                        onPointerDown={e => e.stopPropagation()}
+                        onClick={e => e.stopPropagation()}
+                        onChange={action(e => {
+                            if (e.target.checked) {
+                                Doc.setDocFilter(this.props.Document, columnKey, key, 'check');
+                            } else {
+                                Doc.setDocFilter(this.props.Document, columnKey, key, 'remove');
+                            }
+                        })}
+                        checked={bool}
+                    />
+                    <span style={{ paddingLeft: 4 }}>{key}</span>
+                </div>
+            );
+        });
+
+        return options;
+    }
+
     @computed get renderFilterMenu() {
         const x = this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._filterColumnIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
         return (
             <div className="schema-filter-menu" style={{ left: x, minWidth: CollectionSchemaView._minColWidth }}>
                 <input className="schema-filter-input" type="text" value={this._filterValue} onKeyDown={this.onFilterKeyDown} onChange={this.updateFilterSearch} onPointerDown={e => e.stopPropagation()} />
+                {this.renderFilterOptions}
                 <div
                     className="schema-column-menu-button"
                     onPointerDown={action(e => {
                         e.stopPropagation();
                         this.closeFilterMenu();
                     })}>
-                    cancel
+                    done
                 </div>
             </div>
         );
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 91b292b28..d475c3b6f 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -49,7 +49,7 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> {
 
         return (
             <div className="schema-table-cell" style={{ width: this.props.columnWidth }}>
-                <div className="schemacell-edit-wrapper" style={{ cursor: this.props.isRowActive() ? 'text' : 'default' }}>
+                <div className="schemacell-edit-wrapper" style={this.props.isRowActive() ? { cursor: 'text', pointerEvents: 'auto' } : { cursor: 'default', pointerEvents: 'none' }}>
                     <EditableView
                         contents={<FieldView {...props} />}
                         GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)}