Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(BB-432): Show possible duplicates next to the name section #814

Merged
merged 6 commits into from
Sep 1, 2022
Merged

feat(BB-432): Show possible duplicates next to the name section #814

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5e577e2
[BB-432]:Dont change shape of name-section
the-good-boy Mar 16, 2022
45bee27
put margin-right on external div
the-good-boy Mar 16, 2022
76be9ac
optional chaining and md
the-good-boy Mar 24, 2022
1b5b4c9
Merge branch 'master' into pr/814
MonkeyDo May 25, 2022
ad1e510
Merge branch 'master' into pr/814
MonkeyDo Aug 31, 2022
56d4848
feat(duplicates): Scrollable duplicate results
MonkeyDo Aug 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 47 additions & 57 deletions src/client/entity-editor/name-section/name-section.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
*/

import {Alert, Col, ListGroup, Row} from 'react-bootstrap';
import {Alert, Button, Col, ListGroup, Row} from 'react-bootstrap';
import {
checkIfNameExists,
debouncedUpdateDisambiguationField,
Expand Down Expand Up @@ -76,7 +76,6 @@ const ImmutableLanguageField = makeImmutable(LanguageField);
* sort name is changed.
* @param {Function} props.onDisambiguationChange - A function to be called when
* the disambiguation is changed.
* @returns {ReactElement} React element containing the rendered NameSection.
*/
class NameSection extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -154,12 +153,13 @@ class NameSection extends React.Component {
}));

const warnIfExists = !_.isEmpty(exactMatches);

const languageOption = languageOptionsForDisplay.filter((el) => el.value === languageValue);
return (
<div>
<div className="margin-right-1">
<h2>{`What is the ${_.startCase(entityType)} called?`}</h2>
<Row>
<Col lg={{offset: 3, span: 6}}>
<Col md={{span: 6}}>
<NameField
defaultValue={nameValue}
empty={isAliasEmpty(
Expand All @@ -175,51 +175,6 @@ class NameSection extends React.Component {
))}
onChange={this.handleNameChange}
/>
</Col>
<Col lg={{offset: 3, span: 6}}>
{isRequiredDisambiguationEmpty(
warnIfExists,
disambiguationDefaultValue
) ?
<Alert variant="warning">
We found the following&nbsp;
{_.startCase(entityType)}{exactMatches.length > 1 ? 's' : ''} with
exactly the same name or alias:
<br/><small className="text-muted">Click on a name to open it (Ctrl/Cmd + click to open in a new tab)</small>
<ListGroup activeKey={null} className="margin-top-1 margin-bottom-1">
{exactMatches.map((match) =>
(
<ListGroup.Item
action
href={`/${_.kebabCase(entityType)}/${match.bbid}`}
key={`${match.bbid}`}
rel="noopener noreferrer" target="_blank"
variant="warning"
>
{match.defaultAlias.name} {getEntityDisambiguation(match)}
</ListGroup.Item>
))}
</ListGroup>
If you are sure your entry is different, please fill the
disambiguation field below to help us differentiate between them.
</Alert> : null
}
</Col>
</Row>
{
!warnIfExists &&
!_.isEmpty(searchResults) &&
<Row>
<Col lg={{offset: 3, span: 6}}>
If the {_.startCase(entityType)} you want to add appears in the results
below, click on it to inspect it before adding a possible duplicate.<br/>
<small>Ctrl/Cmd + click to open in a new tab</small>
<SearchResults condensed results={searchResults}/>
</Col>
</Row>
}
<Row>
<Col lg={{offset: 3, span: 6}}>
<SortNameField
defaultValue={sortNameValue}
empty={isAliasEmpty(
Expand All @@ -229,10 +184,6 @@ class NameSection extends React.Component {
storedNameValue={nameValue}
onChange={onSortNameChange}
/>
</Col>
</Row>
<Row>
<Col lg={{offset: 3, span: 6}}>
<ImmutableLanguageField
empty={isAliasEmpty(
nameValue, sortNameValue, languageValue
Expand All @@ -244,10 +195,6 @@ class NameSection extends React.Component {
value={languageOption}
onChange={onLanguageChange}
/>
</Col>
</Row>
<Row>
<Col lg={{offset: 3, span: 6}}>
<DisambiguationField
defaultValue={disambiguationDefaultValue}
error={isRequiredDisambiguationEmpty(
Expand All @@ -261,6 +208,49 @@ class NameSection extends React.Component {
onChange={onDisambiguationChange}
/>
</Col>
<Col md={{span: 6}} >
{isRequiredDisambiguationEmpty(
warnIfExists,
disambiguationDefaultValue
) ?
<div className="mt-4">
<Alert variant="warning">
We found the following&nbsp;
{_.startCase(entityType)}{exactMatches.length > 1 ? 's' : ''} with
exactly the same name or alias:
<br/><small className="text-muted">Click on a name to open it (Ctrl/Cmd + click to open in a new tab)</small>
<ListGroup activeKey={null} className="margin-top-1 margin-bottom-1">
{exactMatches.map((match) =>
(
<ListGroup.Item
action
href={`/${_.kebabCase(entityType)}/${match.bbid}`}
key={`${match.bbid}`}
rel="noopener noreferrer" target="_blank"
variant="warning"
>
{match.defaultAlias.name} {getEntityDisambiguation(match)}
</ListGroup.Item>
))}
</ListGroup>
If you are sure your entry is different, please fill the
disambiguation field below to help us differentiate between them.
</Alert>
</div> : null
}
{
!warnIfExists &&
!_.isEmpty(searchResults) &&
<div className="mt-4">
If the {_.startCase(entityType)} you want to add appears in the results
below, click on it to inspect it before adding a possible duplicate.<br/>
<small>Ctrl/Cmd + click to open in a new tab</small>
<div className="duplicate-result-scroll-window">
<SearchResults condensed results={searchResults}/>
</div>
</div>
}
</Col>
</Row>
</div>
);
Expand Down
22 changes: 21 additions & 1 deletion src/client/stylesheets/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,7 @@ a.contact-text:visited {
border: 1px solid hsl(0, 0%, 70%) !important;
box-shadow: none !important;
&:hover{
border: 1px solid hsl(0, 0%, 70%) !important;
border: 1px solid hsl(0, 0%, 70%) !important;
}
}

Expand Down Expand Up @@ -726,4 +726,24 @@ ul {
}
.series-editor-select {
margin-top: 1.7em;
}

.duplicate-result-scroll-window{
max-height: 17em;
overflow-y: scroll;
&:after {
display: block;
position: absolute;
bottom: 0;
width: 100%;
content: " ";
height: 20px;
background: -moz-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#fff));
background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
background: -o-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
background: -ms-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
background: linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
}
}