diff --git a/client/.env b/client/.env index c086ea7a..649c09c7 100644 --- a/client/.env +++ b/client/.env @@ -1,6 +1,7 @@ VITE_API=/api VITE_APP_MATOMO_BASE_URL=https://matomo.staging.dataesr.ovh VITE_APP_NAME="Works magnet 🧲" +VITE_APP_TAG_LIMIT=3 VITE_DESCRIPTION="Retrieve the scholarly works of your institution" VITE_GIT_REPOSITORY_URL="https://github.com/dataesr/works-magnet" VITE_HEADER_TAG=dev diff --git a/client/src/components/tag-input/index.jsx b/client/src/components/tag-input/index.jsx index 2718d325..d1b9f1e7 100644 --- a/client/src/components/tag-input/index.jsx +++ b/client/src/components/tag-input/index.jsx @@ -2,9 +2,13 @@ import { Button, Col, Icon, Row, Tag, TagGroup, TextInput } from '@dataesr/react import PropTypes from 'prop-types'; import { useEffect, useState } from 'react'; +const { VITE_APP_TAG_LIMIT } = import.meta.env; + const SEE_MORE_AFTER = 5; export default function TagInput({ + deletedTags, + getRoRChildren, hint, label, message, @@ -12,16 +16,29 @@ export default function TagInput({ onInputHandler, onTagsChange, placeholder, - tags, - getRoRChildren, setGetRoRChildren, - deletedTags, + tags, }) { const [excludedValues, setExcludedValues] = useState(deletedTags); const [input, setInput] = useState(''); const [seeMore, setSeeMore] = useState(false); const [values, setValues] = useState(tags); + const getTagColor = (tag) => { + if (tag.disable) return 'beige-gris-galet'; + if (tag.source === 'ror') return 'brown-caramel'; + return 'brown-cafe-creme'; + }; + + const handleDeleteClick = (tag) => { + const deletedValues = excludedValues; + deletedValues.push(tag); + const newValues = [...values.filter((el) => el !== tag)]; + setValues(newValues); + setExcludedValues(deletedValues); + onTagsChange(newValues, deletedValues); + }; + const handleKeyDown = (e) => { if ([9, 13].includes(e.keyCode) && input) { e.preventDefault(); @@ -29,7 +46,8 @@ export default function TagInput({ setInput(''); return; } - const newValues = [...values, { label: input.trim(), source: 'user' }]; + const inputLabel = input.trim(); + const newValues = [...values, { disable: inputLabel.length < VITE_APP_TAG_LIMIT, label: inputLabel, source: 'user' }]; setValues(newValues); setInput(''); onTagsChange(newValues, excludedValues); @@ -44,18 +62,10 @@ export default function TagInput({ } }, [input, onInputHandler]); - const handleDeleteClick = (tag) => { - const deletedValues = excludedValues; - deletedValues.push(tag); - const newValues = [...values.filter((el) => el !== tag)]; - setValues(newValues); - setExcludedValues(deletedValues); - onTagsChange(newValues, deletedValues); - }; - useEffect(() => setValues(tags), [tags]); useEffect(() => setExcludedValues(deletedTags), [deletedTags]); + let hasRoR = false; let newLine = []; const structuredTags = []; @@ -72,6 +82,7 @@ export default function TagInput({ if (newLine.length) { structuredTags.push(newLine); } + return (
@@ -99,10 +110,11 @@ export default function TagInput({ {currentTags.map((tag) => ( handleDeleteClick(tag)} + size="sm" + title={`Tag ${tag.label}${tag.disable ? ' (not searched)' : ''}`} > {tag.label} @@ -111,10 +123,10 @@ export default function TagInput({ {(index === 0 && hasRoR) ? (