diff options
Diffstat (limited to 'src/client/views/FilterPanel.tsx')
| -rw-r--r-- | src/client/views/FilterPanel.tsx | 352 |
1 files changed, 176 insertions, 176 deletions
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx index e5f9fdb51..17c5cb173 100644 --- a/src/client/views/FilterPanel.tsx +++ b/src/client/views/FilterPanel.tsx @@ -41,6 +41,7 @@ import { Tooltip } from '@mui/material'; import { useLocalObservable } from 'mobx-react'; import { useRef } from 'react'; import { useEffect } from 'react'; +import { useState } from 'react'; interface filterProps { @@ -240,157 +241,74 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { return nonNumbers / facetValues.length > 0.1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2)); }; - addHotkey() { + addHotkey(hotKey: string) { const buttons = DocCast(Doc.UserDoc().myContextMenuBtns); const filter = DocCast(buttons.Filter); const filter2 = DocCast(filter); const but2 = Doc.UserDoc().myContextMenuBtns; - console.log(DocCast(filter).data); - - //[idToDoc("0bec0963-95ac-4978-8606-8af4c7b9badd"),idToDoc("f740e910-bf83-4ee3-b13a-1e63c49dd254"),idToDoc("61db82b0-025a-4cb9-937b-97b1290e8f1a"),idToDoc("1046859f-34ac-4421-bc07-ee2f2cf812e2"),idToDoc("badaff47-3c3a-4b78-a7d6-f2cbc8e45ba0")] - - // const newCol = Docs.Create.CarouselDocument(DocListCast(doc[Doc.LayoutFieldKey(doc)]), { - // _width: 250, - // _height: 200, - // _layout_fitWidth: false, - // _layout_autoHeight: true, - // }); - - // CurrentUserUtils.setupContextMenuButtons() - - // const hm = Docs.Create.FontIconDocument() - - // DocumentView.getDocumentView(filter2)?.ComponentView?.addDocument?.(hm) - - // console.log(DocumentView.getDocumentView(filter2) + "hiiiii") - - // DocumentView.getDocumentView(DocCast(buttons['Card']))?.ComponentView?.addDocument?.(hm) - - // const hi = CurrentUserUtils.contextMenuTools() const newKey: Button = { - title: 'Bob', - icon: 'cloud', - toolTip: "Click to toggle the cloud group's visibility", + title: hotKey, + icon: 'bolt', + toolTip: `Click to toggle the ${hotKey}'s group's visibility`, btnType: ButtonType.ToggleButton, expertMode: false, - toolType: 'cloud', + toolType: 'bolt', funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}' }, }; // const heyy = [...hi, newKey] - Doc.UserDoc().myFilterHotKeyTitles = new List<string>(['hi hi', 'supppp']) + const currHotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles) - Doc.UserDoc()['hi hi'] = 'heart' - Doc.UserDoc()['supppp'] = 'star' + Doc.UserDoc().myFilterHotKeyTitles = new List<string>(currHotKeys.concat(hotKey)) - // CurrentUserUtils.setupContextMenuButtons(Doc.UserDoc()); + Doc.UserDoc()[hotKey] = 'bolt' + // Doc.UserDoc()['supppp'] = 'star' - // Doc.UserDoc().hi = Docs.Create.FontIconDocument( - // { title: '', - // icon: 'map-pin', - // backgroundColor: '#ACCEF7', - // layout_hideAllLinks: true, - // _width: 15, - // _height: 15, - // _xPadding: 0, - // } - // ) + const newBtn = CurrentUserUtils.setupContextMenuBtn(newKey, filter); + newBtn.isSystem = newBtn[DocData].isSystem = undefined; - // // buttons['Filter'] + const subDocs = DocListCast(filter.data) + const opts = subDocs[subDocs.length-1] + Doc.AddDocToList(filter, 'data', newBtn, opts, true); - // const reqdCtxtOpts: DocumentOptions = { - // title: 'Filter', - // undoIgnoreFields: new List<string>(['width', 'linearView_IsOpen']), - // flexGap: 0, - // childDragAction: dropActionType.embed, - // childDontRegisterViews: true, - // linearView_IsOpen: true, - // ignoreClick: true, - // linearView_Expandable: false, - // _height: 35, - // }; - const ctxtMenuBtn = CurrentUserUtils.setupContextMenuBtn(newKey, filter); - ctxtMenuBtn.isSystem = ctxtMenuBtn[DocData].isSystem = undefined; - Doc.AddDocToList(filter, 'data', ctxtMenuBtn); - // // // DocUtils.AssignOpts(buttons, reqdCtxtOpts, ctxtMenuBtns); - - // DocUtils.AssignOpts(DocCast(buttons['Filter']), reqdCtxtOpts, [ctxtMenuBtns]); + - // newCol && dv.ComponentView?.addDocument?.(newCol); + // console.log(filter[DocData].data + 'ok') + // // console.log(filter[DocData][0] + 'help') + // console.log(filter[DocData] + 'good grief') - // console.log(but2 + "omgg") + // console.log(DocCast(DocCast(filter.data))[0]) + // this.removeHotKey() - // doc.cardSort_activeIcons = new List<string>(list.includes(icon) ? list.filter(d => d !== icon) : [...list, icon]); + // console.log(DocCast(filter.data) + 'HI') + // console.log(DocListCast(filter.data) + 'WOOOOO') + // console.log(DocCast(filter.data)[0] + 'hm :(') - // Doc.UserDoc().myContextMenuBtns = new List<Doc>([...buttons, newKey as Doc]) } + + hotKeyButtons() { const selected = DocumentView.SelectedDocs().lastElement(); - function isAttrFiltered(attr: string) { - if (selected && selected._childFilters != undefined && selected.type === DocumentType.COL) { - return StrListCast(selected._childFilters).some(filter => filter.includes(attr)); - } else { - return false; - } - // return selected._childFilters ? StrListCast(selected._childFilters).some(filter => filter.includes(attr)) : false; - } + // console.log(StrListCast(Doc.UserDoc().myFilterHotKeyTitles) + "hiii") const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles); - console.log(hotKeys + 'hiihihi'); - - const hi = ['star', 'heart', 'bolt']; - - - - - //selecting a button should make t so that the the icon on the top filter panel becomes said icon - + // hotKeys.forEach(l => console.log(l + "render")) + + // Selecting a button should make it so that the icon on the top filter panel becomes said icon const buttons = hotKeys.map((hotKey, i) => ( - // <div key={i} className={`filterHotKey-button ${isAttrFiltered(hotKey) ? 'active' : ''} ` } - - // onClick={undoable((e: React.MouseEvent) => { - - // // if (e.target === e.currentTarget){ - // isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match'); - // // } - // }, hotKey)} - - // // style = {{backgroundColor: `${isAttrFiltered(hotKey) ? '#878484' : SettingsManager.userBackgroundColor}`}} - - - // > - {/* <Toggle - toggleStatus={isAttrFiltered(hotKey)} - tooltip={'toggle filter'} - text={hotKey} - color={SettingsManager.userColor} - icon={<FontAwesomeIcon icon={Doc.UserDoc()[hotKey] as any}/>} - iconPlacement="left" - align="flex-start" - fillWidth - toggleType={ToggleType.BUTTON} - onClick={undoable(() => { - isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match'); - }, hotKey)} - /> */} - <> - - <Tooltip key={i} title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}> - <HotKeyIconButton hotKey = {hotKey} /> - - </Tooltip> - - </> + <Tooltip key={hotKey} title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}> + <HotKeyIconButton hotKey={hotKey} selected = {selected}/> + </Tooltip> )); - + return buttons; } @@ -465,7 +383,7 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { <div> <div className="filterBox-select"> <div style={{ width: '100%' }}> - <FieldsDropdown Document={this.Document} selectFunc={this.addHotkey} showPlaceholder placeholder="add a hotkey" addedFields={['acl_Guest', LinkedTo, 'Star', 'Heart', 'Bolt', 'Cloud']} /> + <FieldsDropdown Document={this.Document} selectFunc={this.addHotkey} showPlaceholder placeholder="add a hotkey" addedFields={['acl_Guest', LinkedTo]} /> </div> </div> </div> @@ -590,28 +508,87 @@ interface HotKeyButtonProps { const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, selected}) => { const state = useLocalObservable(() => ({ isActive: false, + isEditing: false, + myHotKey: hotKey, + toggleActive() { this.isActive = !this.isActive; }, deactivate() { this.isActive = false; + }, + startEditing() { + this.isEditing = true; + }, + stopEditing() { + this.isEditing = false; + }, + setHotKey(newHotKey: string) { + this.myHotKey = newHotKey; } })); const panelRef = useRef<HTMLDivElement>(null); + const inputRef = useRef<HTMLInputElement>(null); const handleClick = () => { state.toggleActive(); - - console.log(state.isActive + "hmmm") + // console.log(state.isActive + "hmmm") }; + const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles) + + const myHotKeyDoc = () => { + const buttons = DocCast(Doc.UserDoc().myContextMenuBtns); + const filter = DocCast(buttons.Filter); + const hotKeyDocs = DocListCast(filter.data) + return hotKeyDocs.filter(k => StrCast(k.title) === hotKey)[0] + + } + + const removeHotKey = () => { + const buttons = DocCast(Doc.UserDoc().myContextMenuBtns); + const filter = DocCast(buttons.Filter); + + Doc.RemoveDocFromList(filter, 'data', myHotKeyDoc()); + + + + + + // console.log((DocListCast(filter.data)[0].title) + "emmanuel") + + + // console.log(DocCast(filter.data) + 'HI') + // console.log(DocCast(filter.data)[0] + 'hm :(') + + } const handleClickOutside = (event: MouseEvent) => { if (panelRef.current && !panelRef.current.contains(event.target as Node)) { state.deactivate(); + if (state.isEditing) { + state.stopEditing(); + + updateFromInput() + + + + // Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.map(k => k === hotKey ? state.myHotKey : k)); + // Doc.UserDoc()[state.myHotKey] = StrCast(Doc.UserDoc()[hotKey]) + + } } }; + const updateFromInput = () => { + const hi = myHotKeyDoc() + Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.map(k => k === hotKey ? state.myHotKey : k)); + Doc.UserDoc()[state.myHotKey] = StrCast(Doc.UserDoc()[hotKey]) + hi.title = state.myHotKey + hi.toolTip = `Click to toggle the ${state.myHotKey}'s group's visibility` + } + + useEffect(() => { document.addEventListener('mousedown', handleClickOutside); return () => { @@ -619,73 +596,96 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, select }; }, []); - const iconOpts = ['star', 'heart', 'bolt']; + const iconOpts = ['star', 'heart', 'bolt', 'satellite', 'palette', 'robot', 'lightbulb', 'highlighter', 'book', 'chalkboard' ]; const iconPanel = iconOpts.map((icon, i) => ( - <button key={i} onClick={() => Doc.UserDoc()[hotKey] = icon}> - <FontAwesomeIcon icon={icon as any} /> - </button> - )); + <button key={i} onClick={(e: React.MouseEvent) => { + e.stopPropagation; + Doc.UserDoc()[hotKey] = icon; + const hi = myHotKeyDoc() + hi.icon = icon - const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles) - return ( - <> + + }} className='icon-panel-button'> + <FontAwesomeIcon icon={icon as any} color = {SnappingManager.userColor}/> + </button> + )); - <div className={`filterHotKey-button ${isAttrFiltered(hotKey) ? 'active' : ''} ` } - - onClick={undoable((e: React.MouseEvent) => { + function isAttrFiltered(attr: string) { + if (selected && selected._childFilters !== undefined && selected.type === DocumentType.COL) { + return StrListCast(selected._childFilters).some(filter => filter.includes(attr)); + } else { + return false; + } + } - // if (e.target === e.currentTarget){ - isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match'); - // } - }, hotKey)} - // style = {{backgroundColor: `${isAttrFiltered(hotKey) ? '#878484' : SettingsManager.userBackgroundColor}`}} - - + return ( + <div className={`filterHotKey-button ${isAttrFiltered(hotKey) ? 'active' : ''}`} + onClick={(e) => { + e.stopPropagation(); + state.startEditing(); + setTimeout(() => inputRef.current?.focus(), 0); + }} + > + <div className={`hotKey-icon-button ${state.isActive ? 'active' : ''}`} ref={panelRef}> + <Tooltip title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}> + <button + type="button" + className='hotKey-icon' + onClick={(e: React.MouseEvent) => { + e.stopPropagation(); + handleClick(); + }} > - <div className={`hotKey-icon-button ${state.isActive ? 'active' : ''}`} ref={panelRef}> - <Tooltip title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}> - <button - type="button" - onClick={(e: React.MouseEvent) => { - console.log('hiii') - e.stopPropagation(); - handleClick(); - + <FontAwesomeIcon icon={Doc.UserDoc()[hotKey] as any} size="2xl" color={SnappingManager.userColor}/> + </button> + </Tooltip> + {state.isActive && ( + <div className="icon-panel"> + {iconPanel} + </div> + )} + </div> + {state.isEditing ? ( + <input + ref={inputRef} + type="text" + value={state.myHotKey.toUpperCase()} + onChange={(e) => state.setHotKey(e.target.value)} + onBlur={() => { + state.stopEditing(); + updateFromInput() }} + onKeyDown={(e) => { + if (e.key === 'Enter') { + state.stopEditing(); + updateFromInput() - > - <FontAwesomeIcon icon={Doc.UserDoc()[hotKey] as any} size="2xl"/> - </button> - </Tooltip> - {state.isActive && ( - <div className="icon-panel" > - {iconPanel} - </div> + } + }} + className='hotkey-title-input' + /> + ) : ( + <p className='hotkey-title'>{hotKey.toUpperCase()}</p> )} - - - </div> - - <p> {hotKey.toUpperCase()} </p> - - - <button onClick={(e: React.MouseEvent) => { - e.stopPropagation(); - Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.filter(k => k !== hotKey)); - }}> - <FontAwesomeIcon icon={'x' as any} /> - </button> - + <button className='hotKey-close' onClick={(e: React.MouseEvent) => { + e.stopPropagation(); + const hi = StrListCast(Doc.UserDoc().myFilterHotKeyTitles) + // hi.forEach((str) => { + // console.log(str + "before"); + // }); + Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.filter(k => k !== hotKey)); + removeHotKey() + + // hi.forEach((str) => { + // console.log(str + "after"); + // }); + + }}> + <FontAwesomeIcon icon={'x' as any} color={SnappingManager.userColor}/> + </button> </div> - - - </> - - ); -}); - - +}) |