From 313b3d3e67689b175cdc85426ff6af809d476622 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Tue, 17 Sep 2024 12:55:38 -0400 Subject: done with comments-- pull request --- src/client/views/FilterPanel.tsx | 145 ++++++++++++++------------------------- 1 file changed, 51 insertions(+), 94 deletions(-) (limited to 'src/client/views/FilterPanel.tsx') diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx index e15285007..e73d9c2c9 100644 --- a/src/client/views/FilterPanel.tsx +++ b/src/client/views/FilterPanel.tsx @@ -11,7 +11,7 @@ import { List } from '../../fields/List'; import { RichTextField } from '../../fields/RichTextField'; import { SearchUtil } from '../util/SearchUtil'; import { SnappingManager } from '../util/SnappingManager'; -import { undoable } from '../util/UndoManager'; +import { undoable, undoBatch } from '../util/UndoManager'; import { FieldsDropdown } from './FieldsDropdown'; import './FilterPanel.scss'; import { DocumentView } from './nodes/DocumentView'; @@ -20,26 +20,14 @@ import { ObservableReactComponent } from './ObservableReactComponent'; import { Button } from '../util/CurrentUserUtils'; import { ButtonType } from './nodes/FontIconBox/FontIconBox'; import { DocCast } from '../../fields/Types'; -// import { Docs } from '../../documents/Documents'; -import { Docs } from '../documents/Documents'; import { CurrentUserUtils } from '../util/CurrentUserUtils'; -import { DocumentOptions } from '../documents/Documents'; -import { DocUtils } from '../documents/DocUtils'; -import { dropActionType } from '../util/DropActionTypes'; -import { Toggle } from 'browndash-components'; -import { SettingsManager } from '../util/SettingsManager'; import { StrCast } from '../../fields/Types'; -import { ToggleType } from 'browndash-components'; -import { MultiToggle } from 'browndash-components'; -import { Type } from 'browndash-components'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { DocData } from '../../fields/DocSymbols'; -import { DocumentType } from '../documents/DocumentTypes'; import { Tooltip } from '@mui/material'; import { useLocalObservable } from 'mobx-react'; import { useRef } from 'react'; import { useEffect } from 'react'; -import { useState } from 'react'; interface filterProps { @@ -242,12 +230,14 @@ export class FilterPanel extends ObservableReactComponent { return nonNumbers / facetValues.length > 0.1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2)); }; - addHotkey(hotKey: string) { + /** + * Allows users to add a filter hotkey to the properties panel. Will also update the multitoggle at the top menu and the + * icontags tht are displayed on the documents themselves + * @param hotKey tite of the new hotkey + */ + addHotkey = (hotKey: string) => { const buttons = DocCast(Doc.UserDoc().myContextMenuBtns); const filter = DocCast(buttons.Filter); - const filter2 = DocCast(filter); - const but2 = Doc.UserDoc().myContextMenuBtns; - const newKey: Button = { title: hotKey, @@ -260,15 +250,11 @@ export class FilterPanel extends ObservableReactComponent { scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}' }, }; - // const heyy = [...hi, newKey] - const currHotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles) Doc.UserDoc().myFilterHotKeyTitles = new List(currHotKeys.concat(hotKey)) Doc.UserDoc()[hotKey] = 'bolt' - // Doc.UserDoc()['supppp'] = 'star' - const newBtn = CurrentUserUtils.setupContextMenuBtn(newKey, filter); newBtn.isSystem = newBtn[DocData].isSystem = undefined; @@ -276,32 +262,16 @@ export class FilterPanel extends ObservableReactComponent { const subDocs = DocListCast(filter.data) const opts = subDocs[subDocs.length-1] Doc.AddDocToList(filter, 'data', newBtn, opts, true); - - - - // console.log(filter[DocData].data + 'ok') - // // console.log(filter[DocData][0] + 'help') - // console.log(filter[DocData] + 'good grief') - - // console.log(DocCast(DocCast(filter.data))[0]) - // this.removeHotKey() - - // console.log(DocCast(filter.data) + 'HI') - // console.log(DocListCast(filter.data) + 'WOOOOO') - // console.log(DocCast(filter.data)[0] + 'hm :(') - } - - hotKeyButtons() { + /** + * Renders the newly formed hotkey icon buttons + * @returns the buttons to be rendered + */ + hotKeyButtons = () => { const selected = DocumentView.SelectedDocs().lastElement(); - - // console.log(StrListCast(Doc.UserDoc().myFilterHotKeyTitles) + "hiii") - const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles); - - // 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) => ( @@ -506,6 +476,10 @@ interface HotKeyButtonProps { selected?: Doc } +/** + * Renders the buttons that correspond to each icon tag in the properties view. Allows users to change the icon, + * title, and delete. + */ const HotKeyIconButton: React.FC = observer(({ hotKey, selected}) => { const state = useLocalObservable(() => ({ isActive: false, @@ -534,36 +508,34 @@ const HotKeyIconButton: React.FC = observer(({ hotKey, select const handleClick = () => { state.toggleActive(); - // console.log(state.isActive + "hmmm") }; const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles) + const buttons = DocCast(Doc.UserDoc().myContextMenuBtns); + const filter = DocCast(buttons.Filter); + /** + * The doc of the button in the context menu that corresponds to the current hotkey + * @returns + */ 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] } + /** + * Removes a hotkey from list + */ 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 :(') - } + + /** + * Deselects if the user clicks outside the button + * @param event + */ const handleClickOutside = (event: MouseEvent) => { if (panelRef.current && !panelRef.current.contains(event.target as Node)) { state.deactivate(); @@ -571,23 +543,22 @@ const HotKeyIconButton: React.FC = observer(({ hotKey, select 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() + /** + * Updates the list of hotkeys based on the users input. replaces the old title with the new one and then assigns this new + * hotkey with the current icon + */ + const updateFromInput = undoable (() => { + const myDoc = 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` - } + Doc.UserDoc()[hotKey] = '' + myDoc.title = state.myHotKey + myDoc.toolTip = `Click to toggle the ${state.myHotKey}'s group's visibility` + }, '') useEffect(() => { @@ -599,31 +570,25 @@ const HotKeyIconButton: React.FC = observer(({ hotKey, select const iconOpts = ['star', 'heart', 'bolt', 'satellite', 'palette', 'robot', 'lightbulb', 'highlighter', 'book', 'chalkboard' ]; + /** + * Panel of icons the user can choose from to represent their tag + */ 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; - } - } - + /** + * Actually renders the buttons + */ return ( -
{ e.stopPropagation(); state.startEditing(); @@ -673,20 +638,12 @@ const HotKeyIconButton: React.FC = observer(({ hotKey, select )}
); -}) +}) \ No newline at end of file -- cgit v1.2.3-70-g09d2