From 3ab5b620e462a35d0dc23f67014fc5aa9ef4803c Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Thu, 22 Aug 2024 03:03:03 -0400 Subject: liberty --- src/client/views/FilterPanel.tsx | 352 +++++++++++++++++++-------------------- 1 file changed, 176 insertions(+), 176 deletions(-) (limited to 'src/client/views/FilterPanel.tsx') 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 { 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(['hi hi', 'supppp']) + const currHotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles) - Doc.UserDoc()['hi hi'] = 'heart' - Doc.UserDoc()['supppp'] = 'star' + Doc.UserDoc().myFilterHotKeyTitles = new List(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(['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(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([...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) => ( - //
{ - - // // 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}`}} - - - // > - {/* } - 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)} - /> */} - <> - - Click to customize this hotkey's icon
}> - - - - - + Click to customize this hotkey's icon}> + + )); - + return buttons; } @@ -465,7 +383,7 @@ export class FilterPanel extends ObservableReactComponent {
- +
@@ -590,28 +508,87 @@ interface HotKeyButtonProps { const HotKeyIconButton: React.FC = 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(null); + const inputRef = useRef(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(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(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 = 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) => ( - - )); + + )); -
{ + 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 ( +
{ + e.stopPropagation(); + state.startEditing(); + setTimeout(() => inputRef.current?.focus(), 0); + }} + > +
+ Click to customize this hotkey's icon
}> + + + {state.isActive && ( +
+ {iconPanel} +
+ )} +
+ {state.isEditing ? ( + state.setHotKey(e.target.value)} + onBlur={() => { + state.stopEditing(); + updateFromInput() }} + onKeyDown={(e) => { + if (e.key === 'Enter') { + state.stopEditing(); + updateFromInput() - > - - - - {state.isActive && ( -
- {iconPanel} -
+ } + }} + className='hotkey-title-input' + /> + ) : ( +

{hotKey.toUpperCase()}

)} - - -
- -

{hotKey.toUpperCase()}

- - - - + - - - - - ); -}); - - +}) -- cgit v1.2.3-70-g09d2