From 278a885f83a466cc7ed03efb003288cf640262f5 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 8 Apr 2022 20:19:18 -0700 Subject: [PATCH] Edit labels menu --- .../templates/article/ArticleActionsMenu.tsx | 8 +- .../templates/article/EditLabelsModal.tsx | 333 +++++++++++++----- .../templates/article/ReaderSettingsModal.tsx | 2 +- 3 files changed, 260 insertions(+), 83 deletions(-) diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx index 01cc1d26c..1d989599c 100644 --- a/packages/web/components/templates/article/ArticleActionsMenu.tsx +++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx @@ -5,6 +5,7 @@ import { Button } from "../../elements/Button" import { Dropdown } from "../../elements/DropdownElements" import { Box, SpanBox } from "../../elements/LayoutPrimitives" import { styled, theme } from "../../tokens/stitches.config" +import { EditLabelsModal } from "./EditLabelsModal" import { ReaderSettings } from "./ReaderSettingsModal" export type ArticleActionsMenuLayout = 'horizontal' | 'vertical' @@ -54,7 +55,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element } - css={{ m: '0px', p: '0px', outlineStyle: 'solid', outlineWidth: '1px', outlineColor: theme.colors.grayLine.toString() }} + css={{ m: '0px', p: '0px' }} > @@ -63,13 +64,16 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element } - css={{ background: 'red' }} + css={{ m: '0px', p: '0px' }} > + {/* */} diff --git a/packages/web/components/templates/article/EditLabelsModal.tsx b/packages/web/components/templates/article/EditLabelsModal.tsx index d06cc6e04..1d74f4574 100644 --- a/packages/web/components/templates/article/EditLabelsModal.tsx +++ b/packages/web/components/templates/article/EditLabelsModal.tsx @@ -3,108 +3,281 @@ import { ModalOverlay, ModalRoot, } from '../../elements/ModalPrimitives' -import { HStack, VStack } from '../../elements/LayoutPrimitives' +import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' import { Button } from '../../elements/Button' import { StyledText } from '../../elements/StyledText' import { CrossIcon } from '../../elements/images/CrossIcon' -import { theme } from '../../tokens/stitches.config' +import { styled, theme } from '../../tokens/stitches.config' import { Label, useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery' -import { ChangeEvent, useCallback, useState } from 'react' +import { ChangeEvent, useCallback, useRef, useState, useMemo } from 'react' import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation' import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery' import { LabelChip } from '../../elements/LabelChip' +import { Check, Circle, Pen, PencilSimple, PencilSimpleLine, Plus, TagSimple } from 'phosphor-react' +import Link from 'next/link' type EditLabelsModalProps = { - article: ArticleAttributes - onOpenChange: (open: boolean) => void - setLabels: (labels: Label[]) => void + // labels: Label[] + // article: ArticleAttributes + // onOpenChange: (open: boolean) => void + // setLabels: (labels: Label[]) => void +} + +type HeaderProps = { + filterText: string + setFilterText: (text: string) => void +} + +const FormInput = styled('input', { + width: '100%', + fontSize: '16px', + fontFamily: 'inter', + fontWeight: 'normal', + lineHeight: '1.8', + color: '$grayTextContrast', + '&:focus': { + outline: 'none', + }, +}) + +const StyledLabel = styled('label', { + display: 'flex', + justifyContent: 'flex-start', + '&:focus-visible': { + backgroundColor: 'red', + }, +}) + +function Header(props: HeaderProps): JSX.Element { + const inputRef = useRef(null) + + return ( + + {/* */} + {/* + Apply labels to this page + */} + {/* */} + {/* */} + +
{ + // event.preventDefault() + // props.applySearchQuery(searchTerm || '') + inputRef.current?.blur() + }} + > + { + event.target.select() + //setFocused(true) + }} + onBlur={() => { + //setFocused(false) + console.log('blurred') + }} + onKeyDown={(event) => { + console.log('keydown', event.key) + }} + onChange={(event) => { + console.log('event', event) + props.setFilterText(event.target.value) + }} + css={{ + border: '1px solid $grayBorder', + borderRadius: '8px', + width: '100%', + bg: 'transparent', + fontSize: '16px', + fontFamily: 'inter', + fontWeight: 'normal', + marginBottom: '2px', + textIndent: '8px', + paddingLeft: '8px', + color: '$grayTextContrast', + '&:focus': { + outline: 'none', + boxShadow: '0px 0px 2px 2px rgba(255, 234, 159, 0.56)', + }, + }} + /> + +
+ ) +} + +type LabelsListProps = { + // pageId: string + // selectedLabels: Label[] + availableLabels: Label[] +// setSelectedLabels: (labels: Label[]) => void +} + +function LabelsList(props: LabelsListProps): JSX.Element { + const isSelected = useCallback((label: Label) => { + // return props.selectedLabels.some((other) => { + // return other.id === label.id + // }) + return false + }, []) + + return ( + + {props.availableLabels && + props.availableLabels.map((label, idx) => ( + { + // console.log('selected label', label) + // if (props.selectedLabels.includes(label)) { + // props.setSelectedLabels( + // props.selectedLabels.filter((id) => id !== label) + // ) + // } else { + // props.setSelectedLabels([...props.selectedLabels, label]) + // } + // const result = await setLabelsMutation(props.pageId, props.selectedLabels.map((l) => l.id)) + // console.log('result', result) + }} + > + + {isSelected(label) && } + + + + + + {label.name} + + + {isSelected(label) && } + + {/* + + */} + {/* */} + + ))} + ) } export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element { - const [selectedLabels, setSelectedLabels] = useState(props.labels) + const [filterText, setFilterText] = useState('') + const [selectedLabels, setSelectedLabels] = useState([]) const { labels } = useGetLabelsQuery() const saveAndExit = useCallback(async () => { - const result = await setLabelsMutation(props.article.id, selectedLabels.map((l) => l.id)) - console.log('result of setting labels', result) - props.onOpenChange(false) - props.setLabels(selectedLabels) + // const result = await setLabelsMutation(props.article.id, selectedLabels.map((l) => l.id)) + // console.log('result of setting labels', result) + // // props.onOpenChange(false) + // // props.setLabels(selectedLabels) }, [props, selectedLabels]) - const handleChange = useCallback( - (event: ChangeEvent) => { - // const label = event.target.value - // if (event.target.checked) { - // setSelectedLabels([...selectedLabels, label]) - // } else { - // setSelectedLabels(selectedLabels.filter((l) => l !== label)) - // } - }, - [selectedLabels] - ) + const filteredLabels = useMemo(() => { + if (!labels) { + return [] + } + return labels.filter((label) => { + return label.name.toLowerCase().includes(filterText.toLowerCase()) + }) + }, [labels, filterText]) return ( - - - { - event.preventDefault() - }} - css={{ overflow: 'auto', p: '0' }} - > - - - - Edit Labels - - - - {labels && - labels.map((label) => ( - { - // if (selectedLabels.includes(label.id)) { - // setSelectedLabels( - // selectedLabels.filter((id) => id !== label.id) - // ) - // } else { - // setSelectedLabels([...selectedLabels, label.id]) - // } - }} - > - - - - ))} - - + + + {`Create new label "${filterText}"`} + + )} + {/* Footer */} + + + Edit labels - - + // + // ) -} +} \ No newline at end of file diff --git a/packages/web/components/templates/article/ReaderSettingsModal.tsx b/packages/web/components/templates/article/ReaderSettingsModal.tsx index f6eccae5d..f1043837a 100644 --- a/packages/web/components/templates/article/ReaderSettingsModal.tsx +++ b/packages/web/components/templates/article/ReaderSettingsModal.tsx @@ -65,7 +65,7 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element { - {}} /> + {}} />