Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Embedded Genesys UI
Commits
6ca5d0e5
Commit
6ca5d0e5
authored
Nov 24, 2020
by
Maksym Tishchenko
Browse files
CountryName component
-used new component throughout project.
parent
dedcbef3
Changes
6
Hide whitespace changes
Inline
Side-by-side
src/accession/AccessionDetailsPage.tsx
View file @
6ca5d0e5
...
...
@@ -7,6 +7,7 @@ import AccessionDetails from '@genesys/client/model/accession/AccessionDetails';
import
{
WithTranslation
,
withTranslation
}
from
'
react-i18next
'
;
import
{
LocalStorageCart
}
from
'
utilities
'
;
import
{
WithConfig
}
from
'
config/config
'
;
import
{
CountryName
}
from
'
ui/common/CountryName
'
;
import
GrinSpecies
from
'
ui/common/GrinSpecies
'
;
import
PdciTable
from
'
ui/common/PdciTable
'
;
import
Loading
from
'
ui/common/Loading
'
;
...
...
@@ -19,7 +20,6 @@ interface IAccessionDetailsPageState {
interface
IAccessionDetailsPage
{
match
:
any
;
countryCodes
:
Record
<
string
,
string
>
;
}
class
AccessionDetailsPage
extends
React
.
Component
<
IAccessionDetailsPage
&
WithTranslation
&
WithConfig
,
IAccessionDetailsPageState
>
{
...
...
@@ -97,7 +97,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
public
render
()
{
const
{
accession
,
cartItems
}
=
this
.
state
;
const
{
t
,
appConfig
:
{
apiUrl
,
shoppingCart
},
appConfig
,
countryCodes
}
=
this
.
props
;
const
{
t
,
appConfig
:
{
apiUrl
,
shoppingCart
},
appConfig
}
=
this
.
props
;
let
propertyIndex
=
0
;
...
...
@@ -154,7 +154,9 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
<
Property
title
=
{
t
(
'
accession.sampStat
'
)
}
value
=
{
t
(
`accession.sampleStatus.
${
details
.
sampStat
}
`
)
}
index
=
{
propertyIndex
++
}
/>
}
{
details
.
countryOfOrigin
&&
<
Property
title
=
{
t
(
'
accession.countryOfOrigin
'
)
}
value
=
{
countryCodes
&&
countryCodes
[
details
.
countryOfOrigin
.
code3
]
||
details
.
countryOfOrigin
.
name
}
index
=
{
propertyIndex
++
}
/>
<
Property
title
=
{
t
(
'
accession.countryOfOrigin
'
)
}
value
=
{
<
CountryName
code3
=
{
details
.
countryOfOrigin
.
code3
}
/>
||
details
.
countryOfOrigin
.
name
}
index
=
{
propertyIndex
++
}
/>
}
{
details
.
ancest
&&
<
Property
title
=
"Ancestral information (pedigree)"
value
=
{
details
.
ancest
}
index
=
{
propertyIndex
++
}
/>
...
...
@@ -318,7 +320,6 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
const
mapStateToProps
=
(
state
)
=>
({
appConfig
:
state
.
appConfig
.
config
,
countryCodes
:
state
.
decoding
.
countryCodes
,
});
export
default
connect
(
mapStateToProps
)(
withTranslation
()(
AccessionDetailsPage
));
src/accession/AccessionListPage.tsx
View file @
6ca5d0e5
...
...
@@ -14,6 +14,7 @@ import { LocalStorageCart } from 'utilities';
import
{
WithConfig
}
from
'
config/config
'
;
import
Loading
from
'
ui/common/Loading
'
;
import
PageTitle
from
'
ui/common/PageTitle
'
;
import
{
CountryName
}
from
'
ui/common/CountryName
'
;
interface
IAccessionListPageState
{
filter
:
AccessionFilter
;
...
...
@@ -25,7 +26,6 @@ interface IAccessionListPageState {
interface
IAccessionListPageProps
{
location
:
any
;
countryCodes
:
Record
<
string
,
string
>
;
}
class
AccessionListPage
extends
React
.
Component
<
IAccessionListPageProps
&
WithTranslation
&
WithConfig
,
IAccessionListPageState
>
{
...
...
@@ -167,7 +167,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
public
render
()
{
const
{
accessions
,
selected
,
isAllSelected
}
=
this
.
state
;
const
{
t
,
appConfig
:
{
shoppingCart
}
,
countryCodes
}
=
this
.
props
;
const
{
t
,
appConfig
:
{
shoppingCart
}
}
=
this
.
props
;
const
selectedUUIDs
=
new
Set
();
selected
.
forEach
((
uuid
)
=>
selectedUUIDs
.
add
(
uuid
));
...
...
@@ -236,7 +236,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
<
td
><
Link
to
=
{
`/a/
${
a
.
uuid
}
`
}
>
{
a
.
accessionNumber
}
</
Link
></
td
>
<
td
>
{
a
.
accessionName
&&
<
b
>
{
a
.
accessionName
}
</
b
>
}
</
td
>
<
td
><
span
dangerouslySetInnerHTML
=
{
{
__html
:
a
.
taxonomy
.
taxonNameHtml
}
}
/></
td
>
<
td
>
{
a
.
countryOfOrigin
&&
(
c
ountry
Codes
&&
countryCodes
[
a
.
countryOfOrigin
.
code3
]
||
a
.
countryOfOrigin
.
name
)
}
</
td
>
<
td
>
{
a
.
countryOfOrigin
&&
(
<
C
ountry
Name
code3
=
{
a
.
countryOfOrigin
.
code3
}
/>
||
a
.
countryOfOrigin
.
name
)
}
</
td
>
<
td
>
{
a
.
sampStat
&&
t
(
`accession.sampleStatus.
${
a
.
sampStat
}
`
)
}
</
td
>
{
shoppingCart
.
enabled
&&
<
td
>
...
...
@@ -256,7 +256,6 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
const
mapStateToProps
=
(
state
)
=>
({
appConfig
:
state
.
appConfig
.
config
,
countryCodes
:
state
.
decoding
.
countryCodes
,
});
export
default
connect
(
mapStateToProps
)(
withTranslation
()(
AccessionListPage
));
src/accession/AccessionOverviewSection.tsx
View file @
6ca5d0e5
import
*
as
React
from
'
react
'
;
import
{
withTranslation
,
WithTranslation
}
from
'
react-i18next
'
;
import
{
connect
}
from
'
react-redux
'
;
// model
import
AccessionOverview
from
'
@genesys/client/model/accession/AccessionOverview
'
;
import
PropertiesCard
from
'
ui/common/PropertiesCard
'
;
import
{
connect
}
from
'
react-redux
'
;
interface
IAccessionOverviewPageProps
extends
React
.
ClassAttributes
<
any
>
{
overview
:
AccessionOverview
;
...
...
@@ -106,7 +105,7 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro
{
overviewsTerms
&&
overviewsTerms
.
get
(
'
countryOfOrigin.code3
'
)
&&
<
PropertiesCard
propertiesList
=
{
overviewsTerms
.
get
(
'
countryOfOrigin.code3
'
)
}
countyCodes
=
{
countryCodes
}
count
r
yCodes
=
{
countryCodes
}
title
=
{
t
(
'
accession.overview.countryOfOrigin code3
'
)
}
propertyItemProps
=
{
{
numeric
:
true
}
}
/>
...
...
@@ -182,7 +181,7 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro
{
overviewsTerms
&&
overviewsTerms
.
get
(
'
institute.country.code3
'
)
&&
<
PropertiesCard
propertiesList
=
{
overviewsTerms
.
get
(
'
institute.country.code3
'
)
}
countyCodes
=
{
countryCodes
}
count
r
yCodes
=
{
countryCodes
}
title
=
{
t
(
'
accession.overview.institute country code3
'
)
}
propertyItemProps
=
{
{
numeric
:
true
}
}
/>
...
...
@@ -192,6 +191,7 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro
}
}
const
mapStateToProps
=
(
state
)
=>
({
countryCodes
:
state
.
decoding
.
countryCodes
,
});
...
...
src/request/CartPage.tsx
View file @
6ca5d0e5
import
React
from
'
react
'
;
import
{
connect
}
from
'
react-redux
'
;
import
{
AccessionService
}
from
'
@genesys/client/service
'
;
import
Accession
from
'
@genesys/client/model/accession/Accession
'
;
...
...
@@ -8,6 +7,7 @@ import { LocalStorageCart } from 'utilities';
import
{
Link
,
RouteComponentProps
}
from
'
react-router-dom
'
;
import
Loading
from
'
ui/common/Loading
'
;
import
PageTitle
from
'
ui/common/PageTitle
'
;
import
{
CountryName
}
from
'
ui/common/CountryName
'
;
interface
ICartPageState
{
accessions
:
Array
<
Accession
&
Record
<
string
,
any
>>
;
...
...
@@ -16,9 +16,7 @@ interface ICartPageState {
isAllSelected
:
boolean
;
}
interface
ICartPageProps
extends
WithTranslation
,
RouteComponentProps
{
countryCodes
:
Record
<
string
,
string
>
;
}
interface
ICartPageProps
extends
WithTranslation
,
RouteComponentProps
{}
class
CartPage
extends
React
.
Component
<
ICartPageProps
,
ICartPageState
>
{
public
constructor
(
props
)
{
...
...
@@ -109,7 +107,7 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> {
public
render
()
{
const
{
accessions
,
selected
,
isEmpty
,
isAllSelected
}
=
this
.
state
;
const
{
t
,
countryCodes
}
=
this
.
props
;
const
{
t
}
=
this
.
props
;
const
selectedUUIDs
=
new
Set
();
selected
.
forEach
((
uuid
)
=>
selectedUUIDs
.
add
(
uuid
));
...
...
@@ -165,7 +163,7 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> {
<
td
><
Link
to
=
{
`/a/
${
a
.
uuid
}
`
}
>
{
a
.
accessionNumber
}
</
Link
></
td
>
<
td
>
{
a
.
accessionName
&&
<
b
>
{
a
.
accessionName
}
</
b
>
}
</
td
>
<
td
><
span
dangerouslySetInnerHTML
=
{
{
__html
:
a
.
taxonomy
.
taxonNameHtml
}
}
/></
td
>
<
td
>
{
a
.
countryOfOrigin
&&
(
c
ountry
Codes
&&
countryCodes
[
a
.
countryOfOrigin
.
code3
]
||
a
.
countryOfOrigin
.
name
)
}
</
td
>
<
td
>
{
a
.
countryOfOrigin
&&
(
<
C
ountry
Name
code3
=
{
a
.
countryOfOrigin
.
code3
}
/>
||
a
.
countryOfOrigin
.
name
)
}
</
td
>
<
td
>
{
a
.
sampStat
&&
t
(
`accession.sampleStatus.
${
a
.
sampStat
}
`
)
}
</
td
>
</
tr
>
))
}
...
...
@@ -178,8 +176,4 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> {
};
}
const
mapStateToProps
=
(
state
)
=>
({
countryCodes
:
state
.
decoding
.
countryCodes
,
});
export
default
connect
(
mapStateToProps
)(
withTranslation
()(
CartPage
));
export
default
withTranslation
()(
CartPage
);
src/ui/common/CountryName.tsx
0 → 100644
View file @
6ca5d0e5
import
React
from
'
react
'
;
import
{
connect
}
from
'
react-redux
'
;
interface
ICountryCode
extends
React
.
FunctionComponent
{
code3
:
string
;
countryCodes
:
Record
<
string
,
string
>
;
}
const
countryCode
=
(
props
:
ICountryCode
)
=>
{
return
props
.
countryCodes
&&
props
.
countryCodes
[
props
.
code3
]
||
null
;
}
const
mapStateToProps
=
(
state
)
=>
({
countryCodes
:
state
.
decoding
.
countryCodes
,
});
const
CountryName
=
connect
(
mapStateToProps
)(
countryCode
);
export
{
CountryName
};
src/ui/common/PropertiesCard.tsx
View file @
6ca5d0e5
...
...
@@ -7,17 +7,19 @@ interface IProperty extends React.ClassAttributes<any>, WithTranslation {
title
:
string
;
propertiesList
:
{
term
:
string
,
count
:
any
}[];
translationGroup
?:
string
;
countyCodes
?:
object
;
count
r
yCodes
?:
Record
<
string
,
string
>
;
t
:
any
;
propertyItemProps
?:
any
;
}
class
PropertiesCard
extends
React
.
Component
<
IProperty
,
any
>
{
private
getTitle
(
property
:
{
term
:
string
,
count
:
any
})
{
const
{
translationGroup
,
countyCodes
,
t
}
=
this
.
props
;
if
(
countyCodes
&&
countyCodes
[
property
.
term
])
{
return
countyCodes
[
property
.
term
];
const
{
translationGroup
,
count
r
yCodes
,
t
}
=
this
.
props
;
if
(
count
r
yCodes
&&
count
r
yCodes
[
property
.
term
])
{
return
count
r
yCodes
[
property
.
term
];
}
if
(
translationGroup
)
{
return
t
([
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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