extracted field dropdown menu to a components and then cleaned up collectionTimeView, Documentview titles, and FilterPanel to share it

1 files changed, 26 insertions, 41 deletions

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}