From 51cad21a358e17c1f8e609d1d3f077960922fc38 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 26 Oct 2023 11:31:15 -0400
Subject: enabled different title colors per doc, not just per user. added
 support for screen space doc titles, and for proper title clipping when
 borderRadius is set.  added dropdown for setting title field to display and
 tweaked editableView to enable ellipsis for overfow

---
 src/client/views/FilterPanel.tsx | 110 ++++++++++++++++++---------------------
 1 file changed, 50 insertions(+), 60 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 0df88f970..cb5c9b085 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -7,7 +7,7 @@ import { CiCircleRemove } from 'react-icons/ci';
 import Select from 'react-select';
 import { Doc, DocListCast, Field, LinkedTo, StrListCast } from '../../fields/Doc';
 import { RichTextField } from '../../fields/RichTextField';
-import { DocumentOptions, FInfo } from '../documents/Documents';
+import { DocOptions, DocumentOptions, FInfo } from '../documents/Documents';
 import { DocumentManager } from '../util/DocumentManager';
 import { UserOptions } from '../util/GroupManager';
 import { SearchUtil } from '../util/SearchUtil';
@@ -18,6 +18,7 @@ import { Handle, Tick, TooltipRail, Track } from './nodes/SliderBox-components';
 import { SettingsManager } from '../util/SettingsManager';
 import { Id } from '../../fields/FieldSymbols';
 import { List } from '../../fields/List';
+import { emptyFunction } from '../../Utils';
 
 interface filterProps {
     rootDoc: Doc;
@@ -25,8 +26,6 @@ interface filterProps {
 
 @observer
 export class FilterPanel extends React.Component<filterProps> {
-    private _documentOptions: DocumentOptions = new DocumentOptions();
-
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(FilterPanel, fieldKey);
     }
@@ -51,12 +50,10 @@ export class FilterPanel extends React.Component<filterProps> {
         if (targetDoc) {
             SearchUtil.foreachRecursiveDoc([this.targetDoc], (depth, doc) => allDocs.add(doc));
         }
-        console.log('this is all Docs' + Array.from(allDocs));
         return Array.from(allDocs);
     }
 
     @computed get _allFacets() {
-        // trace();
         const noviceReqFields = ['author', 'tags', 'text', 'type', LinkedTo];
         const noviceLayoutFields: string[] = []; //["_layout_curPage"];
         const noviceFields = [...noviceReqFields, ...noviceLayoutFields];
@@ -68,11 +65,8 @@ export class FilterPanel extends React.Component<filterProps> {
             .filter(key => key.indexOf('modificationDate') !== -1 || (key[0] === key[0].toUpperCase() && !key.startsWith('_')) || noviceFields.includes(key) || !Doc.noviceMode)
             .sort();
 
-        // console.log('THIS IS HERE ' + Doc.UserDoc().color + 'space ' + Doc.UserDoc().color);
         noviceFields.forEach(key => sortedKeys.splice(sortedKeys.indexOf(key), 1));
 
-        console.log('this is novice fields ' + noviceFields + 'and this is sorted Keys ' + sortedKeys);
-
         return [...noviceFields, ...sortedKeys];
     }
 
@@ -206,13 +200,7 @@ export class FilterPanel extends React.Component<filterProps> {
      */
 
     @action
-    facetClick = (facetHeader: string) => {
-        // just when someone chooses a facet
-
-        this._selectedFacetHeaders.add(facetHeader);
-
-        return;
-    };
+    facetClick = (facetHeader: string) => this._selectedFacetHeaders.add(facetHeader);
 
     @action
     sortingCurrentFacetValues = (facetHeader: string) => {
@@ -260,57 +248,59 @@ export class FilterPanel extends React.Component<filterProps> {
         return nonNumbers / facetValues.length > 0.1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2));
     };
 
-    render() {
-        let filteredOptions: string[] = ['author', 'tags', 'text', 'acl-Guest', ...this._allFacets.filter(facet => facet[0] === facet.charAt(0).toUpperCase())];
+    @computed get fieldsDropdown() {
+        const filteredOptions = ['author', 'tags', 'text', 'acl-Guest', ...this._allFacets.filter(facet => facet[0] === facet.charAt(0).toUpperCase())];
 
-        Object.entries(this._documentOptions).forEach((pair: [string, FInfo]) => {
-            if (pair[1].filterable) {
-                filteredOptions.push(pair[0]);
-            }
-        });
+        Object.entries(DocOptions)
+            .filter(opts => opts[1].filterable)
+            .forEach((pair: [string, FInfo]) => filteredOptions.push(pair[0]));
+        const options = filteredOptions.map(facet => ({ value: facet, label: facet }));
 
-        let options = filteredOptions.map(facet => ({ value: facet, label: facet }));
+        return (
+            <Select
+                styles={{
+                    control: (baseStyles, state) => ({
+                        ...baseStyles,
+                        color: SettingsManager.userColor,
+                        background: SettingsManager.userBackgroundColor,
+                    }),
+                    placeholder: (baseStyles, state) => ({
+                        ...baseStyles,
+                        color: SettingsManager.userColor,
+                        background: SettingsManager.userBackgroundColor,
+                    }),
+                    input: (baseStyles, state) => ({
+                        ...baseStyles,
+                        color: SettingsManager.userColor,
+                        background: SettingsManager.userBackgroundColor,
+                    }),
+                    option: (baseStyles, state) => ({
+                        ...baseStyles,
+                        color: SettingsManager.userColor,
+                        background: !state.isFocused ? SettingsManager.userBackgroundColor : SettingsManager.userVariantColor,
+                    }),
+                    menuList: (baseStyles, state) => ({
+                        ...baseStyles,
+                        backgroundColor: SettingsManager.userBackgroundColor,
+                    }),
+                }}
+                placeholder={'add a filter'}
+                options={options}
+                isMulti={false}
+                onChange={val => this.facetClick((val as UserOptions).value)}
+                onKeyDown={e => e.stopPropagation()}
+                //onMenuClose={onClose}
+                value={null}
+                closeMenuOnSelect={true}
+            />
+        );
+    }
 
+    render() {
         return (
             <div className="filterBox-treeView">
                 <div className="filterBox-select">
-                    <div style={{ width: '100%' }}>
-                        <Select
-                            styles={{
-                                control: (baseStyles, state) => ({
-                                    ...baseStyles,
-                                    color: SettingsManager.userColor,
-                                    background: SettingsManager.userBackgroundColor,
-                                }),
-                                placeholder: (baseStyles, state) => ({
-                                    ...baseStyles,
-                                    color: SettingsManager.userColor,
-                                    background: SettingsManager.userBackgroundColor,
-                                }),
-                                input: (baseStyles, state) => ({
-                                    ...baseStyles,
-                                    color: SettingsManager.userColor,
-                                    background: SettingsManager.userBackgroundColor,
-                                }),
-                                option: (baseStyles, state) => ({
-                                    ...baseStyles,
-                                    color: SettingsManager.userColor,
-                                    background: !state.isFocused ? SettingsManager.userBackgroundColor : SettingsManager.userVariantColor,
-                                }),
-                                menuList: (baseStyles, state) => ({
-                                    ...baseStyles,
-                                    backgroundColor: SettingsManager.userBackgroundColor,
-                                }),
-                            }}
-                            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 style={{ width: '100%' }}>{this.fieldsDropdown}</div>
                     {/* THE FOLLOWING CODE SHOULD BE DEVELOPER FOR BOOLEAN EXPRESSION (AND / OR) */}
                     {/* <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)}>
-- 
cgit v1.2.3-70-g09d2

