aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/FilterPanel.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2023-06-14 09:12:13 -0400
committerbobzel <zzzman@gmail.com>2023-06-14 09:12:13 -0400
commit376270791c7fe414c05a87f73afe11146d119c35 (patch)
treec6c788c958a5aaca4a9bbdd709d5e6f1d76dde0d /src/client/views/FilterPanel.tsx
parent2bc89733ce522527c2f27203b537d99395c9479b (diff)
parentbf16eca7a84adfdf1c5970e7e4793568ee70325d (diff)
Merge branch 'master' into advanced-trails
Diffstat (limited to 'src/client/views/FilterPanel.tsx')
-rw-r--r--src/client/views/FilterPanel.tsx70
1 files changed, 36 insertions, 34 deletions
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index d35494f26..fe42628cd 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -10,6 +10,7 @@ import { UserOptions } from '../util/GroupManager';
import './FilterPanel.scss';
import { FieldView } from './nodes/FieldView';
import { SearchBox } from './search/SearchBox';
+import { undoable } from '../util/UndoManager';
interface filterProps {
rootDoc: Doc;
@@ -31,7 +32,7 @@ export class FilterPanel extends React.Component<filterProps> {
return targetView?.ComponentView?.annotationKey ?? targetView?.ComponentView?.fieldKey ?? 'data';
}
@computed get targetDocChildren() {
- return DocListCast(this.targetDoc?.[this.targetDocChildKey] || Doc.ActiveDashboard?.data);
+ return [...DocListCast(this.targetDoc?.[this.targetDocChildKey] || Doc.ActiveDashboard?.data), ...DocListCast(this.targetDoc[Doc.LayoutFieldKey(this.targetDoc) + '_sidebar'])];
}
@computed get allDocs() {
@@ -46,22 +47,24 @@ export class FilterPanel extends React.Component<filterProps> {
@computed get _allFacets() {
// trace();
const noviceReqFields = ['author', 'tags', 'text', 'type'];
- const noviceLayoutFields: string[] = []; //["_curPage"];
+ const noviceLayoutFields: string[] = []; //["_layout_curPage"];
const noviceFields = [...noviceReqFields, ...noviceLayoutFields];
const keys = new Set<string>(noviceFields);
this.allDocs.forEach(doc => SearchBox.documentKeys(doc).filter(key => keys.add(key)));
- return Array.from(keys.keys())
+ const sortedKeys = Array.from(keys.keys())
.filter(key => key[0])
- .filter(key => key[0] === '#' || key.indexOf('lastModified') !== -1 || (key[0] === key[0].toUpperCase() && !key.startsWith('_')) || noviceFields.includes(key) || !Doc.noviceMode)
+ .filter(key => key.indexOf('modificationDate') !== -1 || (key[0] === key[0].toUpperCase() && !key.startsWith('_')) || noviceFields.includes(key) || !Doc.noviceMode)
.sort();
+ noviceFields.forEach(key => sortedKeys.splice(sortedKeys.indexOf(key), 1));
+ return [...noviceFields, ...sortedKeys];
}
/**
* The current attributes selected to filter based on
*/
@computed get activeFilters() {
- return StrListCast(this.targetDoc?._docFilters);
+ return StrListCast(this.targetDoc?._childFilters);
}
/**
@@ -86,7 +89,8 @@ export class FilterPanel extends React.Component<filterProps> {
(facetVal === true || facetVal == false) && valueSet.add(Field.toString(!facetVal));
const fieldKey = Doc.LayoutFieldKey(t);
const annos = !Field.toString(Doc.LayoutField(t) as Field).includes('CollectionView');
- DocListCast(t[annos ? fieldKey + '-annotations' : fieldKey]).forEach(newdoc => newarray.push(newdoc));
+ DocListCast(t[annos ? fieldKey + '_annotations' : fieldKey]).forEach(newdoc => newarray.push(newdoc));
+ annos && DocListCast(t[fieldKey + '_sidebar']).forEach(newdoc => newarray.push(newdoc));
});
subDocs = newarray;
}
@@ -104,8 +108,8 @@ export class FilterPanel extends React.Component<filterProps> {
@observable _chosenFacets = new ObservableMap<string, 'text' | 'checkbox' | 'slider' | 'range'>();
@computed get activeFacets() {
const facets = new Map<string, 'text' | 'checkbox' | 'slider' | 'range'>(this._chosenFacets);
- StrListCast(this.targetDoc?._docFilters).map(filter => facets.set(filter.split(':')[0], filter.split(':')[2] === 'match' ? 'text' : 'checkbox'));
- setTimeout(() => StrListCast(this.targetDoc?._docFilters).map(action(filter => this._chosenFacets.set(filter.split(':')[0], filter.split(':')[2] === 'match' ? 'text' : 'checkbox'))));
+ StrListCast(this.targetDoc?._childFilters).map(filter => facets.set(filter.split(':')[0], filter.split(':')[2] === 'match' ? 'text' : 'checkbox'));
+ setTimeout(() => StrListCast(this.targetDoc?._childFilters).map(action(filter => this._chosenFacets.set(filter.split(':')[0], filter.split(':')[2] === 'match' ? 'text' : 'checkbox'))));
return facets;
}
/**
@@ -129,7 +133,7 @@ export class FilterPanel extends React.Component<filterProps> {
maxVal = Math.max(num, maxVal);
}
});
- if (facetHeader === 'text' || (facetValues.rtFields / allCollectionDocs.length > 0.1 && facetValues.rtFields > 20)) {
+ if (facetHeader === 'text' || (facetValues.rtFields / allCollectionDocs.length > 0.1 && facetValues.strings.length > 20)) {
this._chosenFacets.set(facetHeader, 'text');
} else if (facetHeader !== 'tags' && nonNumbers / facetValues.strings.length < 0.1) {
} else {
@@ -140,11 +144,11 @@ export class FilterPanel extends React.Component<filterProps> {
facetValues = (facetHeader: string) => {
const allCollectionDocs = new Set<Doc>();
SearchBox.foreachRecursiveDoc(this.targetDocChildren, (depth: number, doc: Doc) => allCollectionDocs.add(doc));
- const set = new Set<string>();
+ const set = new Set<string>([String.fromCharCode(127) + '--undefined--']);
if (facetHeader === 'tags')
allCollectionDocs.forEach(child =>
- Field.toString(child[facetHeader] as Field)
- .split(':')
+ StrListCast(child[facetHeader])
+ .filter(h => h)
.forEach(key => set.add(key))
);
else
@@ -158,32 +162,29 @@ export class FilterPanel extends React.Component<filterProps> {
let nonNumbers = 0;
facetValues.map(val => Number.isNaN(Number(val)) && nonNumbers++);
- const facetValueDocSet = (nonNumbers / facetValues.length > 0.1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2))).map(facetValue => {
- return facetValue;
- });
- return facetValueDocSet;
+ return nonNumbers / facetValues.length > 0.1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2));
};
render() {
const options = this._allFacets.filter(facet => this.currentFacets.indexOf(facet) === -1).map(facet => ({ value: facet, label: facet }));
return (
- <div className="filterBox-treeView" style={{ position: 'relative', width: '100%' }}>
- <div className="filterBox-select-bool">
- <select className="filterBox-selection" onChange={action(e => this.targetDoc && (this.targetDoc._filterBoolean = (e.target as any).value))} defaultValue={StrCast(this.targetDoc?.filterBoolean)}>
- {['AND', 'OR'].map(bool => (
- <option value={bool} key={bool}>
- {bool}
- </option>
- ))}
- </select>
- <div className="filterBox-select-text">filters together</div>
- </div>
-
+ <div className="filterBox-treeView">
<div className="filterBox-select">
- <Select placeholder="Add a filter..." options={options} isMulti={false} onChange={val => this.facetClick((val as UserOptions).value)} onKeyDown={e => e.stopPropagation()} value={null} closeMenuOnSelect={true} />
+ <div style={{ width: '100%' }}>
+ <Select placeholder="Add a filter..." options={options} isMulti={false} onChange={val => this.facetClick((val as UserOptions).value)} onKeyDown={e => e.stopPropagation()} value={null} closeMenuOnSelect={true} />
+ </div>
+ <div className="filterBox-select-bool">
+ <select className="filterBox-selection" onChange={action(e => this.targetDoc && (this.targetDoc._childFilters_boolean = (e.target as any).value))} defaultValue={StrCast(this.targetDoc?.childFilters_boolean)}>
+ {['AND', 'OR'].map(bool => (
+ <option value={bool} key={bool}>
+ {bool}
+ </option>
+ ))}
+ </select>
+ </div>{' '}
</div>
- <div className="filterBox-tree" key="tree" style={{ overflow: 'auto' }}>
+ <div className="filterBox-tree" key="tree">
{Array.from(this.activeFacets.keys()).map(facetHeader => (
<div>
{facetHeader}
@@ -201,11 +202,12 @@ export class FilterPanel extends React.Component<filterProps> {
return (
<input
placeholder={
- StrListCast(this.targetDoc._docFilters)
+ StrListCast(this.targetDoc._childFilters)
.find(filter => filter.split(':')[0] === facetHeader)
?.split(':')[1] ?? '-empty-'
}
- onKeyDown={e => e.key === 'Enter' && Doc.setDocFilter(this.targetDoc, facetHeader, e.currentTarget.value, !e.currentTarget.value ? 'remove' : 'match')}
+ onBlur={undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, e.currentTarget.value, !e.currentTarget.value ? 'remove' : 'match'), 'set text filter')}
+ onKeyDown={e => e.key === 'Enter' && undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, e.currentTarget.value, !e.currentTarget.value ? 'remove' : 'match'), 'set text filter')(e)}
/>
);
case 'checkbox':
@@ -216,12 +218,12 @@ export class FilterPanel extends React.Component<filterProps> {
<input
style={{ width: 20, marginLeft: 20 }}
checked={
- StrListCast(this.targetDoc._docFilters)
+ StrListCast(this.targetDoc._childFilters)
.find(filter => filter.split(':')[0] === facetHeader && filter.split(':')[1] == facetValue)
?.split(':')[2] === 'check'
}
type={type}
- onChange={e => Doc.setDocFilter(this.targetDoc, facetHeader, fval, e.target.checked ? 'check' : 'remove')}
+ onChange={undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, fval, e.target.checked ? 'check' : 'remove'), 'set filter')}
/>
{facetValue}
</div>