Skip to content

Commit

Permalink
fix: fix tags
Browse files Browse the repository at this point in the history
  • Loading branch information
@sophiazlin
sophiazlin committed Feb 7, 2024
1 parent 4adbbfc commit e5f2b4a
Show file tree
Hide file tree
Showing 3 changed files with 301 additions and 37 deletions.
55 changes: 35 additions & 20 deletions src/components/Modals/CardModal/CardModal.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
import { AddIcon, CloseIcon } from "@chakra-ui/icons";
import {
Box,
Button,
Circle,
Flex,
FormControl,
FormErrorMessage,
Heading,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalHeader,
ModalOverlay,
Tag,
Text,
useBreakpointValue,
useDisclosure,
Box,
Button,
Circle,
Flex,
FormControl,
FormErrorMessage,
Heading,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalHeader,
ModalOverlay,
Tag,
TagCloseButton,
Text,
useBreakpointValue,
useDisclosure,
} from "@chakra-ui/react";
import urls from "lib/utils/urls";
import { useEffect, useState } from "react";
Expand Down Expand Up @@ -449,7 +450,7 @@ const CardModal = ({
flexWrap={editing ? "wrap" : "nowrap"}
>
{form.values?.tags
? form.values.tags.toSorted((a, b) => {
? [...form.values.tags].sort((a, b) => {
if (filteredTags) {
if (filteredTags.includes(a) && filteredTags.includes(b)) {
return a.localeCompare(b)
Expand Down Expand Up @@ -479,8 +480,22 @@ const CardModal = ({
color="#515254"
>
{tag}
{editing ? (
<TagCloseButton
color="#000000"
onClick={() => {
const existingTags = JSON.parse(
JSON.stringify(form.values.tags)
);
existingTags.splice(index, 1);
setValue("tags", existingTags);
}}
/>
) : (
<></>
)}
</Tag>
{editing ? (
{/* {editing ? (
<Button
position="absolute"
mt="0.6rem"
Expand All @@ -503,7 +518,7 @@ const CardModal = ({
</Button>
) : (
<></>
)}
)} */}
</Box>
))
: ""}
Expand Down
149 changes: 140 additions & 9 deletions src/components/StandardCard/StandardCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
import {
Box,
Button,
Flex,
Heading,
HStack,
Image,
Text,
useDisclosure
Box,
Button,
Flex,
HStack,
Heading,
Image,
Popover,
PopoverBody,
PopoverContent,
PopoverTrigger,
Portal,
Tag,
TagLabel,
Text,
VStack,
useDisclosure
} from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import urls from "src/lib/utils/urls";
Expand All @@ -23,6 +31,11 @@ const StandardCard = ({ card, cards, setCards, filteredTags, ...props }) => {
onOpen: onOpenCardModal,
onClose: onCloseCardModal,
} = useDisclosure();
const {
isOpen: isOpenTagModal,
onOpen: onOpenTagModal,
onClose: onCloseTagModal,
} = useDisclosure();
const { trigger, data, isMutating } = useSWRMutation(
urls.api.user.standards.update,
(route, { arg }) => {
Expand Down Expand Up @@ -144,7 +157,125 @@ const StandardCard = ({ card, cards, setCards, filteredTags, ...props }) => {
width="100%"
align="stretch"
>
<div/>
<Flex overflowY="none" flexShrink={0} width="65%">
{[...card.tags].sort((a, b) => {
if (filteredTags) {
if (filteredTags.includes(a) && filteredTags.includes(b)) {
return a.localeCompare(b)
} else if (filteredTags.includes(a)) {
return -1
} else if (filteredTags.includes(b)) {
return 1
}
}
return a.localeCompare(b)
}).map((tag, index) => {
if (index < 2 || (index == 2 && card.tags.length == 3)) {
return (
<Tag
key={index}
bgColor="#E2E3E5"
borderRadius="30px"
textTransform="capitalize"
fontSize="0.75rem"
px="0.75rem"
fontFamily="'Inter', sans-serif"
color="#515254"
marginRight="0.25rem"
width="fit-content"
>
<TagLabel
textOverflow="ellipsis"
maxWidth="10ch"
minWidth="15px"
width="fit-content"
>{tag}</TagLabel>
</Tag>
);
} else if (index == 2) {
return (
<Popover
isOpen={isOpenTagModal}
onClose={onCloseTagModal}
placement="top"
>
<PopoverTrigger>
<Tag
key={index}
bgColor="#E2E3E5"
borderRadius="30px"
textTransform="capitalize"
fontSize="0.75rem"
px="0.25rem"
fontFamily="'Inter', sans-serif"
color="#515254"
>
<TagLabel
textOverflow="ellipsis"
maxWidth="8ch"
minWidth="15px"
onClick={(e)=> {
onOpenTagModal()
e.stopPropagation()
}}
>+{card.tags.length-2}</TagLabel>
</Tag>
</PopoverTrigger>
<Portal>
<PopoverContent
border="0px"
background="none"
>
<PopoverBody>
<VStack
borderColor="#E2E3E5"
borderWidth="2px"
borderRadius="10px"
background="#FFFFFF"
padding="10px"
alignItems="left"
width="fit-content"
>
{[...card.tags].sort((a, b) => {
if (filteredTags) {
if (filteredTags.includes(a) && filteredTags.includes(b)) {
return a.localeCompare(b)
} else if (filteredTags.includes(a)) {
return -1
} else if (filteredTags.includes(b)) {
return 1
}
}
return a.localeCompare(b)
}).map((tag, index) =>
<Tag
key={index}
bgColor="#E2E3E5"
borderRadius="30px"
textTransform="capitalize"
fontSize="0.75rem"
px="0.75rem"
fontFamily="'Inter', sans-serif"
color="#515254"
margin="0.1rem"
width="fit-content"
>
<TagLabel
width="fit-content"
>{tag}</TagLabel>
</Tag>
)}
</VStack>
</PopoverBody>
</PopoverContent>
</Portal>
</Popover>
);
} else {
return null;
}
})}
</Flex>
{user?.isLoggedIn && (
<Button
variant={selected ? "Grey" : "Blue-outlined"}
Expand Down
134 changes: 126 additions & 8 deletions src/components/StandardCard/StandardCardSmall.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import {
Button,
Flex,
Heading,
HStack,
Image,
Text,
useDisclosure
Button,
Flex,
Heading,
HStack,
Image,
Text,
useDisclosure
} from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import urls from "src/lib/utils/urls";
Expand Down Expand Up @@ -123,7 +123,125 @@ const StandardCard = ({ card, cards, setCards, filteredTags, ...props }) => {
width="100%"
alignContent="center"
>
<div/>
<Flex overflowY="none" flexShrink={0} width="65%">
{[...card.tags].sort((a, b) => {
if (filteredTags) {
if (filteredTags.includes(a) && filteredTags.includes(b)) {
return a.localeCompare(b)
} else if (filteredTags.includes(a)) {
return -1
} else if (filteredTags.includes(b)) {
return 1
}
}
return a.localeCompare(b)
}).map((tag, index) => {
if (index < 2 || (index == 2 && card.tags.length == 3)) {
return (
<Tag
key={index}
bgColor="#E2E3E5"
borderRadius="30px"
textTransform="capitalize"
fontSize="0.75rem"
px="0.75rem"
fontFamily="'Inter', sans-serif"
color="#515254"
marginRight="0.25rem"
width="fit-content"
>
<TagLabel
textOverflow="ellipsis"
maxWidth="10ch"
minWidth="15px"
width="fit-content"
>{tag}</TagLabel>
</Tag>
);
} else if (index == 2) {
return (
<Popover
isOpen={isOpenTagModal}
onClose={onCloseTagModal}
placement="top"
>
<PopoverTrigger>
<Tag
key={index}
bgColor="#E2E3E5"
borderRadius="30px"
textTransform="capitalize"
fontSize="0.75rem"
px="0.25rem"
fontFamily="'Inter', sans-serif"
color="#515254"
>
<TagLabel
textOverflow="ellipsis"
maxWidth="8ch"
minWidth="15px"
onClick={(e)=> {
onOpenTagModal()
e.stopPropagation()
}}
>+{card.tags.length-2}</TagLabel>
</Tag>
</PopoverTrigger>
<Portal>
<PopoverContent
border="0px"
background="none"
>
<PopoverBody>
<VStack
borderColor="#E2E3E5"
borderWidth="2px"
borderRadius="10px"
background="#FFFFFF"
padding="10px"
alignItems="left"
width="fit-content"
>
{[...card.tags].sort((a, b) => {
if (filteredTags) {
if (filteredTags.includes(a) && filteredTags.includes(b)) {
return a.localeCompare(b)
} else if (filteredTags.includes(a)) {
return -1
} else if (filteredTags.includes(b)) {
return 1
}
}
return a.localeCompare(b)
}).map((tag, index) =>
<Tag
key={index}
bgColor="#E2E3E5"
borderRadius="30px"
textTransform="capitalize"
fontSize="0.75rem"
px="0.75rem"
fontFamily="'Inter', sans-serif"
color="#515254"
margin="0.1rem"
width="fit-content"
>
<TagLabel
width="fit-content"
>{tag}</TagLabel>
</Tag>
)}
</VStack>
</PopoverBody>
</PopoverContent>
</Portal>
</Popover>
);
} else {
return null;
}
})}
</Flex>
{/* <ReportButton /> */}
{user?.isLoggedIn && (
<Button
Expand Down

0 comments on commit e5f2b4a

Please sign in to comment.