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) ? (