Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
G
Genesys Website
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
21
Issues
21
List
Boards
Labels
Service Desk
Milestones
Operations
Operations
Incidents
Packages & Registries
Packages & Registries
Container Registry
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Genesys PGR
Genesys Website
Commits
196fef0f
Commit
196fef0f
authored
Apr 12, 2019
by
Viacheslav Pavlov
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Suggested filters without applied filters for AutocompleteFilter
parent
51a04e94
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
38 additions
and
19 deletions
+38
-19
src/ui/common/filter/AutocompleteFilter.tsx
src/ui/common/filter/AutocompleteFilter.tsx
+38
-19
No files found.
src/ui/common/filter/AutocompleteFilter.tsx
View file @
196fef0f
...
...
@@ -9,11 +9,12 @@ import LabelValue from 'model/LabelValue';
import
AccessionFilter
from
'
model/accession/AccessionFilter
'
;
import
MaterialAutosuggest
from
'
ui/common/material-autosuggest
'
;
import
{
debounce
}
from
'
debounce
'
;
import
{
AddCircle
as
Add
,
RemoveCircle
as
Remove
,
HighlightOff
as
Clear
}
from
'
@material-ui/icons
'
;
interface
IStringListProps
extends
React
.
ClassAttributes
<
any
>
{
input
:
any
;
notInput
:
any
;
removeBy
Index
:
(
index
:
number
,
isNot
:
boolean
)
=>
void
;
removeBy
Value
:
(
index
:
number
,
isNot
:
boolean
)
=>
void
;
}
class
StringList
extends
React
.
Component
<
IStringListProps
>
{
...
...
@@ -84,19 +85,21 @@ class StringList extends React.Component<IStringListProps> {
}
public
render
()
{
const
{
removeBy
Index
}
=
this
.
props
;
const
{
removeBy
Value
}
=
this
.
props
;
const
{
renderList
}
=
this
.
state
;
return
(
<
div
>
{
renderList
.
map
((
renderItem
,
index
)
=>
(
<
div
style
=
{
{
margin
:
'
.2rem 0
'
,
padding
:
'
.2rem 1rem
'
,
backgroundColor
:
'
#e8e5e1
'
,
color
:
'
#202222
'
}
}
key
=
{
renderItem
.
value
}
>
{
renderItem
.
state
?
<
span
className
=
"font-bold float-Left mr-5"
onClick
=
{
()
=>
this
.
addToNotList
(
renderItem
,
index
)
}
>
+
</
span
>
:
<
span
className
=
"font-bold float-Left mr-5"
onClick
=
{
()
=>
this
.
removeFromNotList
(
renderItem
,
index
)
}
>
-
</
span
>
}
{
renderItem
.
value
}
<
div
className
=
"font-bold float-right"
onClick
=
{
()
=>
removeByIndex
(
index
,
!
renderItem
.
state
)
}
>
X
</
div
>
<
div
style
=
{
{
margin
:
'
.2rem 0
'
,
padding
:
'
.2rem 1rem
'
,
backgroundColor
:
'
#e8e5e1
'
,
color
:
'
#202222
'
,
display
:
'
flex
'
,
justifyContent
:
'
space-between
'
,
alignItems
:
'
center
'
}
}
key
=
{
renderItem
.
value
}
>
<
span
style
=
{
{
display
:
'
flex
'
,
alignItems
:
'
center
'
}
}
>
{
renderItem
.
state
?
<
span
className
=
"font-bold float-left mr-5"
onClick
=
{
()
=>
this
.
addToNotList
(
renderItem
,
index
)
}
><
Add
style
=
{
{
cursor
:
'
pointer
'
,
color
:
'
#6f6f6f
'
,
fontSize
:
'
18px
'
}
}
/></
span
>
:
<
span
className
=
"font-bold float-left mr-5"
onClick
=
{
()
=>
this
.
removeFromNotList
(
renderItem
,
index
)
}
><
Remove
style
=
{
{
cursor
:
'
pointer
'
,
color
:
'
#6f6f6f
'
,
fontSize
:
'
18px
'
}
}
/></
span
>
}
{
renderItem
.
value
}
</
span
>
<
div
className
=
"font-bold float-right"
onClick
=
{
()
=>
removeByValue
(
renderItem
.
value
,
!
renderItem
.
state
)
}
><
Clear
style
=
{
{
cursor
:
'
pointer
'
,
color
:
'
#6f6f6f
'
,
fontSize
:
'
20px
'
}
}
/></
div
>
</
div
>
))
}
</
div
>
...
...
@@ -126,6 +129,7 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
const
values
=
_
.
get
(
props
,
`
${
props
.
names
[
1
]}
.input.value`
);
this
.
state
=
{
excludedValues
:
null
,
values
,
notValues
,
text
:
''
,
...
...
@@ -139,6 +143,7 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
const
notValue
=
_
.
get
(
this
.
props
,
`
${
this
.
props
.
names
[
1
]}
.input.value`
);
this
.
setState
({
excludedValues
:
null
,
values
:
[
...
value
],
notValues
:
[
...
notValue
],
text
:
''
,
...
...
@@ -151,6 +156,7 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
const
notValue
=
_
.
get
(
nextProps
,
`
${
nextProps
.
names
[
1
]}
.input.value`
);
this
.
setState
({
excludedValues
:
[...
value
,
...
notValue
],
values
:
[
...
value
],
notValues
:
[...
notValue
],
text
:
''
,
...
...
@@ -159,12 +165,16 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
private
maybeAdd
=
(...
newValues
:
string
[])
=>
{
const
values
=
[
...
this
.
state
.
values
];
const
excludedValues
=
[
...
this
.
state
.
excludedValues
];
newValues
.
forEach
((
text
)
=>
{
if
(
text
&&
text
.
length
>
0
)
{
if
(
values
.
indexOf
(
text
)
<
0
)
{
values
.
push
(
text
);
}
if
(
excludedValues
.
indexOf
(
text
)
<
0
)
{
excludedValues
.
push
(
text
);
}
}
});
...
...
@@ -172,13 +182,15 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
this
.
setState
({
text
:
''
,
values
,
excludedValues
,
});
}
return
values
;
}
private
maybeRemove
=
(...
newValues
:
string
[])
=>
{
const
values
=
[
...
this
.
state
.
values
];
private
maybeRemove
=
(
isNot
?:
boolean
,
...
newValues
:
string
[])
=>
{
const
values
=
isNot
?
[
...
this
.
state
.
notValues
]
:
[
...
this
.
state
.
values
];
const
excludedValues
=
this
.
state
.
excludedValues
;
newValues
.
forEach
((
text
)
=>
{
if
(
text
&&
text
.
length
>
0
)
{
...
...
@@ -186,21 +198,28 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
if
(
index
>=
0
)
{
values
.
splice
(
index
,
1
);
}
const
indexExcluded
:
number
=
excludedValues
.
indexOf
(
text
);
if
(
indexExcluded
>=
0
)
{
excludedValues
.
splice
(
indexExcluded
,
1
);
}
}
});
if
(
!
_
.
isEqual
(
values
,
this
.
state
.
values
))
{
if
(
!
_
.
isEqual
(
values
,
isNot
?
this
.
state
.
notValues
:
this
.
state
.
values
))
{
this
.
setState
({
text
:
''
,
values
,
values
:
isNot
?
this
.
state
.
values
:
values
,
notValues
:
!
isNot
?
this
.
state
.
notValues
:
values
,
excludedValues
,
});
}
return
values
;
}
private
removeBy
Index
=
(
index
,
isNot
)
=>
{
private
removeBy
Value
=
(
value
,
isNot
)
=>
{
const
{
input
}
=
_
.
get
(
this
.
props
,
this
.
props
.
names
[
isNot
?
1
:
0
]);
const
newValues
=
this
.
maybeRemove
(
this
.
state
.
values
[
index
]);
const
newValues
=
this
.
maybeRemove
(
isNot
,
value
);
input
.
onChange
(
newValues
);
}
...
...
@@ -231,7 +250,7 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
const
{
placeholder
,
label
,
t
,
names
,
terms
,
classes
}
=
this
.
props
;
const
{
input
}
=
_
.
get
(
this
.
props
,
names
[
0
]);
const
{
input
:
notInput
}
=
_
.
get
(
this
.
props
,
names
[
1
]);
const
{
values
,
not
Values
}
=
this
.
state
;
const
{
values
,
notValues
,
excluded
Values
}
=
this
.
state
;
return
(
<
div
>
...
...
@@ -247,12 +266,12 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
className
=
"full-width"
/>
{
((
values
&&
values
.
length
>
0
)
||
(
notValues
&&
notValues
.
length
>
0
))
&&
<
StringList
input
=
{
input
}
notInput
=
{
notInput
}
removeBy
Index
=
{
this
.
removeByIndex
}
/>
<
StringList
input
=
{
input
}
notInput
=
{
notInput
}
removeBy
Value
=
{
this
.
removeByValue
}
/>
}
{
terms
&&
<
Properties
>
<
h5
className
=
"pl-10 pt-1rem mb-10"
>
{
t
(
'
common:f.suggestedFilters
'
)
}
</
h5
>
{
terms
&&
Array
.
from
(
terms
).
slice
(
0
,
10
).
map
(([
key
,
value
])
=>
(
{
terms
&&
Array
.
from
(
terms
).
slice
(
0
,
10
).
filter
(([
key
,
value
])
=>
!
excludedValues
||
!
excludedValues
.
includes
(
key
)).
map
(([
key
,
value
])
=>
(
<
PropertiesItem
key
=
{
key
}
title
=
{
key
}
onClick
=
{
()
=>
input
.
onChange
(
this
.
maybeAdd
(
key
))
}
classes
=
{
{...
classes
,
propertiesRow
:
'
cursor-pointer
'
}
}
>
<
span
className
=
"float-right"
>
<
Number
value
=
{
value
}
/>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment