From dad03e3be5b0a7c1159e0207cce11540ca830359 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Mon, 3 Jan 2022 17:21:18 +0100 Subject: feat(filter): add option to filter by subdirectory (#190) --- components/Tweaks/Filter/FilterPanel.tsx | 245 +++++++++++++++++++++++++++++ components/Tweaks/Filter/TagColorPanel.tsx | 139 ++++++++++++++++ 2 files changed, 384 insertions(+) create mode 100644 components/Tweaks/Filter/FilterPanel.tsx create mode 100644 components/Tweaks/Filter/TagColorPanel.tsx (limited to 'components/Tweaks/Filter') diff --git a/components/Tweaks/Filter/FilterPanel.tsx b/components/Tweaks/Filter/FilterPanel.tsx new file mode 100644 index 0000000..55ff3e5 --- /dev/null +++ b/components/Tweaks/Filter/FilterPanel.tsx @@ -0,0 +1,245 @@ +import { ChevronDownIcon } from '@chakra-ui/icons' +import { + Text, + Box, + Button, + Flex, + Menu, + MenuButton, + StackDivider, + VStack, + Portal, + MenuList, + MenuItem, + Switch, + Accordion, + AccordionItem, + AccordionButton, + AccordionIcon, + AccordionPanel, +} from '@chakra-ui/react' +import React, { useContext } from 'react' +import { OptionPanel } from '../OptionPanel' +import { initialFilter, initialLocal, TagColors } from '../../config' +import { TagColorPanel } from './TagColorPanel' +import { SliderWithInfo } from '../SliderWithInfo' +import { VariablesContext } from '../../../util/variablesContext' + +export interface FilterPanelProps { + filter: typeof initialFilter + setFilter: any + tagColors: TagColors + setTagColors: any + highlightColor: string + colorList: string[] + tags: string[] + local: typeof initialLocal + setLocal: any +} + +const FilterPanel = (props: FilterPanelProps) => { + const { + filter, + setFilter, + local, + setLocal, + tagColors, + setTagColors, + highlightColor, + colorList, + tags, + } = props + const { roamDir, subDirs } = useContext(VariablesContext) + return ( + + } + align="stretch" + paddingLeft={7} + color="gray.800" + > + + Link children to + + } + colorScheme="" + color="black" + size="sm" + > + {(() => { + switch (filter.parent) { + case 'parent': + return File + case 'heading': + return Heading + default: + return Nothing + } + })()} + + + + + setFilter((curr: typeof initialFilter) => ({ ...curr, parent: '' })) + } + > + Nothing + + + setFilter((curr: typeof initialFilter) => ({ + ...curr, + parent: 'parent', + })) + } + > + Parent file node + + + setFilter((curr: typeof initialFilter) => ({ + ...curr, + parent: 'heading', + })) + } + > + Next highest heading node + + + + + + + Orphans + { + setFilter((curr: typeof initialFilter) => { + return { ...curr, orphans: !curr.orphans } + }) + }} + isChecked={filter.orphans} + > + + + Dailies + { + setFilter((curr: typeof initialFilter) => { + return { ...curr, dailies: !curr.dailies } + }) + }} + isChecked={filter.dailies} + > + + + Org-noter pages + { + setFilter((curr: typeof initialFilter) => { + return { ...curr, noter: !curr.noter } + }) + }} + isChecked={filter.noter} + > + + + Citations without note files + { + setFilter({ ...filter, filelessCites: !filter.filelessCites }) + }} + isChecked={filter.filelessCites} + > + + + Non-existent nodes + { + setTagColors({ ...tagColors, bad: 'white' }) + setFilter({ ...filter, bad: !filter.bad }) + }} + isChecked={filter.bad} + > + + setLocal({ ...local, neighbors: v })} + min={1} + max={5} + step={1} + /> + + + + + Directory filters + + + + + + + + + + Tag filters + + + + + + + + + + Tag colors + + + + + + + + + ) +} + +export default FilterPanel diff --git a/components/Tweaks/Filter/TagColorPanel.tsx b/components/Tweaks/Filter/TagColorPanel.tsx new file mode 100644 index 0000000..eb458dc --- /dev/null +++ b/components/Tweaks/Filter/TagColorPanel.tsx @@ -0,0 +1,139 @@ +import { DeleteIcon } from '@chakra-ui/icons' +import { + Text, + Box, + Flex, + IconButton, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, + StackDivider, + VStack, + Button, +} from '@chakra-ui/react' +import { CUIAutoComplete } from 'chakra-ui-autocomplete' +import React, { useState } from 'react' +import { TagColors } from '../../config' + +export interface TagColorPanelProps { + tags: string[] + highlightColor: string + colorList: string[] + tagColors: TagColors + setTagColors: any +} +export const TagColorPanel = (props: TagColorPanelProps) => { + const { colorList, tagColors, setTagColors, highlightColor, tags } = props + const tagArray = tags.map((tag) => { + return { value: tag, label: tag } + }) + + const [selectedItems, setSelectedItems] = useState( + Object.keys(tagColors).map((tag) => { + return { value: tag, label: tag } + }), + ) + + return ( + + { + if (changes.selectedItems) { + setSelectedItems(Array.from(new Set(changes.selectedItems))) + setTagColors( + Object.fromEntries( + Array.from(new Set(changes.selectedItems)).map((item) => { + return [item.label, tagColors[item.label] ?? 'gray.600'] + }), + ), + ) + } + }} + listItemStyleProps={{ overflow: 'hidden' }} + highlightItemBg="gray.400" + toggleButtonStyleProps={{ variant: 'outline' }} + inputStyleProps={{ + height: 8, + focusBorderColor: highlightColor, + color: 'gray.800', + borderColor: 'gray.500', + }} + tagStyleProps={{ + display: 'none', + rounded: 'full', + bg: highlightColor, + height: 8, + paddingLeft: 4, + fontWeight: 'bold', + }} + hideToggleButton + itemRenderer={(selected) => selected.label} + /> + } + align="stretch" + color="gray.800" + > + {Object.keys(tagColors).map((tag) => { + return ( + + + {tag} + + + + {} + + + + {colorList.map((color: string) => ( + + setTagColors({ + ...tagColors, + [tag]: color, + }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + + + ))} + + + + } + onClick={() => { + setTagColors( + Object.fromEntries( + Array.from(new Set(selectedItems)).map((item) => { + return [item.label, tagColors[item.label] ?? 'gray.600'] + }), + ), + ) + setSelectedItems(selectedItems.filter((item) => item.value !== tag)) + }} + /> + + ) + })} + + + ) +} -- cgit v1.2.3