From 4548ec81efc434c8ee5d89b896b2088e4e61d7a0 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 28 Feb 2024 22:22:20 -0500
Subject: extracted field dropdown menu to a components and then cleaned up
 collectionTimeView, Documentview titles, and FilterPanel to share it

---
 src/client/views/nodes/DocumentView.tsx | 67 +++++++++++++--------------------
 1 file changed, 26 insertions(+), 41 deletions(-)

(limited to 'src/client/views/nodes/DocumentView.tsx')

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index abb1aa59f..b0e8cf6ff 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -48,6 +48,7 @@ import { KeyValueBox } from './KeyValueBox';
 import { LinkAnchorBox } from './LinkAnchorBox';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
 import { PresEffect, PresEffectDirection } from './trails';
+import { FieldsDropdown } from '../FieldsDropdown';
 interface Window {
     MediaRecorder: MediaRecorder;
 }
@@ -784,28 +785,25 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
     }
 
     captionStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => this._props?.styleProvider?.(doc, props, property + ':caption');
-    fieldsDropdown = (reqdFields: string[], dropdownWidth: number, placeholder: string, onChange: (val: string | number) => void, onClose: () => void) => {
-        const filteredFields = Object.entries(DocOptions).reduce((set, [field, opts]) => (opts.filterable ? set.add(field) : set), new Set(reqdFields));
+    fieldsDropdown = (placeholder: string) => {
         return (
-            <div style={{ width: dropdownWidth }}>
-                <div
-                    ref={action((r: any) => r && (this._titleDropDownInnerWidth = Number(getComputedStyle(r).width.replace('px', ''))))}
-                    onPointerDown={action(e => (this._changingTitleField = true))}
-                    style={{ width: 'max-content', transformOrigin: 'left', transform: `scale(${this.titleHeight / 30 /* height of Dropdown */})` }}>
-                    <Dropdown
-                        activeChanged={action(isOpen => !isOpen && (this._changingTitleField = false))}
-                        selectedVal={placeholder}
-                        setSelectedVal={onChange}
-                        color={SettingsManager.userColor}
-                        background={SettingsManager.userVariantColor}
-                        type={Type.TERT}
-                        closeOnSelect={true}
-                        dropdownType={DropdownType.SELECT}
-                        items={Array.from(filteredFields).map(facet => ({ val: facet, text: facet }))}
-                        width={100}
-                        fillWidth
-                    />
-                </div>
+            <div
+                ref={action((r: any) => r && (this._titleDropDownInnerWidth = Number(getComputedStyle(r).width.replace('px', ''))))}
+                onPointerDown={action(e => (this._changingTitleField = true))}
+                style={{ width: 'max-content', background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor, transformOrigin: 'left', transform: `scale(${this.titleHeight / 30 /* height of Dropdown */})` }}>
+                <FieldsDropdown
+                    Document={this.Document}
+                    placeholder={placeholder}
+                    selectFunc={action((field: string | number) => {
+                        if (this.layoutDoc.layout_showTitle) {
+                            this.layoutDoc._layout_showTitle = field;
+                        } else if (!this._props.layout_showTitle) {
+                            Doc.UserDoc().layout_showTitle = field;
+                        }
+                        this._changingTitleField = false;
+                    })}
+                    menuClose={action(() => (this._changingTitleField = false))}
+                />
             </div>
         );
     };
@@ -839,22 +837,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                     background,
                     pointerEvents: (!this.disableClickScriptFunc && this.onClickHandler) || this.Document.ignoreClick ? 'none' : this.isContentActive() || this._props.isDocumentActive?.() ? 'all' : undefined,
                 }}>
-                {!dropdownWidth
-                    ? null
-                    : this.fieldsDropdown(
-                          [StrCast(this.layoutDoc.layout_showTitle)],
-                          dropdownWidth,
-                          StrCast(this.layoutDoc.layout_showTitle).split(':')[0],
-                          action((field: string | number) => {
-                              if (this.layoutDoc.layout_showTitle) {
-                                  this.layoutDoc._layout_showTitle = field;
-                              } else if (!this._props.layout_showTitle) {
-                                  Doc.UserDoc().layout_showTitle = field;
-                              }
-                              this._changingTitleField = false;
-                          }),
-                          action(() => (this._changingTitleField = false))
-                      )}
+                {!dropdownWidth ? null : <div style={{ width: dropdownWidth }}>{this.fieldsDropdown(showTitle)}</div>}
                 <div
                     style={{
                         width: `calc(100% - ${dropdownWidth}px)`,
@@ -864,10 +847,12 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                     }}>
                     <EditableView
                         ref={this._titleRef}
-                        contents={showTitle
-                            .split(';')
-                            .map(field => targetDoc[field.trim()]?.toString())
-                            .join(' \\ ')}
+                        contents={
+                            showTitle
+                                .split(';')
+                                .map(field => targetDoc[field.trim()]?.toString())
+                                .join(' \\ ') || '-unset-'
+                        }
                         display="block"
                         oneLine={true}
                         fontSize={(this.titleHeight / 15) * 10}
-- 
cgit v1.2.3-70-g09d2