aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNathan-SR <144961007+Nathan-SR@users.noreply.github.com>2024-06-04 14:17:50 -0400
committerNathan-SR <144961007+Nathan-SR@users.noreply.github.com>2024-06-04 14:17:50 -0400
commit22343f6ceb3175ff1794c4ff0ecda0471a7594af (patch)
tree79b8e3e987aa9fabb7fd8e8a50aab1c104964cff
parentd215534d6f0d66db9d5bf15f9fefef3fe5398024 (diff)
key search on update
-rw-r--r--src/client/views/EditableView.tsx3
-rw-r--r--src/client/views/collections/collectionSchema/CollectionSchemaView.tsx7
-rw-r--r--src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx11
3 files changed, 11 insertions, 10 deletions
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 5b691c507..c79cabd6a 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -57,6 +57,7 @@ export interface EditableProps {
showKeyNotVal?: boolean;
updateAlt?: (newAlt: string) => void;
+ updateSearch?: (value: string) => void;
}
/**
@@ -122,6 +123,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
} else if (!this._overlayDisposer) {
this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
}
+ this._props.updateSearch && this._props.updateSearch(targVal);
};
@action
@@ -183,7 +185,6 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
@action
onClick = (e: React.MouseEvent) => {
- if (this._props.GetValue() == 'None' && this._props.updateAlt) this._props.updateAlt('.');
if (this._props.editing !== false) {
e.nativeEvent.stopPropagation();
if (this._ref.current && this._props.showMenuOnLoad) {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 92cc58f54..f5422bce1 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -791,9 +791,8 @@ export class CollectionSchemaView extends CollectionSubView() {
};
@action
- updateKeySearch = (e: React.ChangeEvent<HTMLInputElement>) => {
- this._menuValue = e.target.value;
- this._menuKeys = this.documentKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase()));
+ updateKeySearch = (val: string) => {
+ this._menuKeys = this.documentKeys.filter(value => value.toLowerCase().includes(val.toLowerCase()));
};
getFieldFilters = (field: string) => StrListCast(this.Document._childFilters).filter(filter => filter.split(Doc.FilterSep)[0] === field);
@@ -920,7 +919,6 @@ export class CollectionSchemaView extends CollectionSubView() {
const x = this._columnMenuIndex! === -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
return (
<div className="schema-column-menu" style={{ left: x, minWidth: CollectionSchemaView._minColWidth }}>
- <input className="schema-key-search-input" type="text" onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
{this._makeNewField ? this.newFieldMenu : this.keysDropdown}
</div>
);
@@ -929,7 +927,6 @@ export class CollectionSchemaView extends CollectionSubView() {
get renderKeysMenu() {
return (
<div className="schema-column-menu" style={{ left: 0, minWidth: CollectionSchemaView._minColWidth }}>
- <input className="schema-key-search-input" type="text" onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
{this._makeNewField ? this.newFieldMenu : this.keysDropdown}
</div>
);
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 4f9d53d18..32abc1780 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -61,6 +61,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
@action updateAlt = (newAlt: string) => {this._altTitle = newAlt;}
+ @action updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)}
@action
sortClicked = (e: React.PointerEvent) => {
@@ -76,8 +77,10 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
};
openKeyDropdown = () => {
- this._props.schemaView.openColumnMenu(this._props.columnIndex, false)
- this._displayKeysDropdown = true;
+ if (this.isDefaultTitle(this.fieldKey)){
+ this._props.schemaView.openColumnMenu(this._props.columnIndex, false)
+ this._displayKeysDropdown = true;
+ }
}
@action
@@ -122,7 +125,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
@computed get editableView() {
const { color, fieldProps, pointerEvents } = this.renderProps(this._props);
- return <div className='schema-column-edit-wrapper' onPointerUp={() => this._props.schemaView.openColumnMenu(this._props.columnIndex, false)}
+ return <div className='schema-column-edit-wrapper' onPointerUp={() => this.openKeyDropdown()}
style={{
color,
width: '100%',
@@ -136,6 +139,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
fieldContents={fieldProps}
editing={undefined}
updateAlt={this.updateAlt} // alternate title to display
+ updateSearch={this.updateKeyDropdown}
showKeyNotVal={true} // tells the EditableView to display the fieldKey itself, and not its value
GetValue={() => {
if (this.isDefaultTitle(this.fieldKey)) return '';
@@ -149,7 +153,6 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
this._props.finishEdit?.();
return true;
} else if (enterKey) this.updateAlt(value);
-
this._props.finishEdit?.();
return true;
}, 'edit column header')}