Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Genesys Website
Commits
3430ebe4
Commit
3430ebe4
authored
Feb 20, 2019
by
Matija Obreza
Browse files
Pretty DescriptorCard
- List terms - Display scale - Display UoM
parent
cec603e1
Changes
6
Hide whitespace changes
Inline
Side-by-side
src/descriptors/ui/DisplayPage.tsx
View file @
3430ebe4
...
...
@@ -9,7 +9,6 @@ import { fixDate } from 'utilities';
import
{
loadDescriptor
,
publishDescriptor
,
deleteDescriptor
,
approveDescriptor
,
rejectDescriptor
}
from
'
descriptors/actions/editor
'
;
import
Descriptor
,
{
DataType
as
DescriptorDataType
}
from
'
model/catalog/Descriptor
'
;
import
VocabularyTerm
from
'
model/vocabulary/VocabularyTerm
'
;
import
{
PublishState
}
from
'
model/common.model
'
;
import
confirm
from
'
utilities/confirmAlert
'
;
...
...
@@ -21,7 +20,6 @@ import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import
PrettyDate
from
'
ui/common/time/PrettyDate
'
;
import
{
ScrollToTopOnMount
}
from
'
ui/common/page/scrollers
'
;
import
{
PartnerLink
,
CropLink
,
DescriptorListLink
,
DatasetLink
}
from
'
ui/catalog/Links
'
;
import
{
Table
,
TableRow
,
TableCell
}
from
'
ui/common/tables
'
;
import
{
Properties
,
PropertiesItem
}
from
'
ui/common/Properties
'
;
import
VocabularyCard
from
'
vocabulary/ui/c/VocabularyCard
'
;
import
DescriptorScale
from
'
descriptors/ui/c/DescriptorScale
'
;
...
...
@@ -36,6 +34,7 @@ import Button from '@material-ui/core/Button';
import
List
from
'
@material-ui/core/List
'
;
import
ListItem
from
'
@material-ui/core/ListItem
'
;
import
ListItemText
from
'
@material-ui/core/ListItemText
'
;
import
DescriptorTerms
from
'
./c/DescriptorTerms
'
;
interface
IDisplayPageProps
extends
React
.
ClassAttributes
<
any
>
{
classes
:
any
;
...
...
@@ -225,21 +224,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
{
descriptor
.
dataType
===
DescriptorDataType
.
CODED
&&
descriptor
.
terms
&&
descriptor
.
terms
.
length
>
0
&&
(
<
Grid
item
xs
=
{
12
}
className
=
"p-10"
>
<
Section
title
=
{
t
(
'
descriptors.public.p.display.codingTable
'
)
}
>
<
Table
widths
=
{
[
'
10%
'
,
'
20%
'
,
null
]
}
headers
=
{
(
<
TableRow
>
<
TableCell
>
{
t
(
'
descriptors.public.p.display.code
'
)
}
</
TableCell
>
<
TableCell
>
{
t
(
'
descriptors.public.p.display.term
'
)
}
</
TableCell
>
<
TableCell
>
{
t
(
'
descriptors.public.p.display.description
'
)
}
</
TableCell
>
</
TableRow
>
)
}
>
{
descriptor
.
terms
.
map
((
term
:
VocabularyTerm
)
=>
(
<
TableRow
key
=
{
term
.
code
}
>
<
TableCell
className
=
"font-bold"
>
{
term
.
code
}
</
TableCell
>
<
TableCell
>
{
term
.
title
}
</
TableCell
>
<
TableCell
>
{
term
.
description
}
</
TableCell
>
</
TableRow
>
))
}
</
Table
>
<
DescriptorTerms
terms
=
{
descriptor
.
terms
}
/>
</
Section
>
</
Grid
>
)
}
...
...
src/descriptors/ui/c/DescriptorCard.tsx
View file @
3430ebe4
...
...
@@ -8,9 +8,10 @@ import { translate } from 'react-i18next';
import
{
Properties
,
PropertiesItem
}
from
'
ui/common/Properties
'
;
import
Descriptor
from
'
model/catalog/Descriptor
'
;
import
VocabularyTerm
from
'
model/vocabulary/VocabularyTerm
'
;
import
Descriptor
,
{
DataType
as
DescriptorDataType
}
from
'
model/catalog/Descriptor
'
;
import
{
DescriptorLink
,
PartnerLink
,
CropLink
}
from
'
ui/catalog/Links
'
;
import
DescriptorTerms
from
'
./DescriptorTerms
'
;
import
DescriptorScale
from
'
./DescriptorScale
'
;
interface
ICardProps
{
complete
?:
boolean
;
...
...
@@ -194,16 +195,21 @@ const DescriptorCard = ({ complete = true, compact, descriptor, classes, classNa
{
t
(
`descriptors.common.dataType.
${
descriptor
.
dataType
.
toLowerCase
()}
`
)
}
</
PropertiesItem
>
)
}
{
displayPref
.
dataType
&&
descriptor
.
dataType
===
DescriptorDataType
.
NUMERIC
&&
(
<
PropertiesItem
title
=
{
t
(
'
descriptors.sort.uom
'
)
}
>
{
descriptor
.
uom
}
</
PropertiesItem
>
)
}
</
Properties
>
</
Grid
>
{
(
displayPref
.
vocabulary
&&
descriptor
.
terms
)
&&
(
{
(
displayPref
.
vocabulary
&&
descriptor
.
terms
&&
descriptor
.
terms
.
length
>
0
)
&&
(
<
Grid
item
xs
=
{
12
}
>
{
descriptor
.
terms
.
map
((
term
:
VocabularyTerm
)
=>
(
<
div
key
=
{
term
.
code
}
>
{
term
.
code
}
→
<
b
>
{
term
.
title
}
</
b
>
{
term
.
description
}
</
div
>
))
}
{
descriptor
.
dataType
===
DescriptorDataType
.
CODED
&&
<
DescriptorTerms
terms
=
{
descriptor
.
terms
}
/>
}
{
descriptor
.
dataType
===
DescriptorDataType
.
SCALE
&&
<
DescriptorScale
className
=
"mt-20"
min
=
{
descriptor
.
minValue
}
max
=
{
descriptor
.
maxValue
}
decimal
=
{
!
descriptor
.
integerOnly
}
labels
=
{
descriptor
.
terms
}
/>
}
</
Grid
>
)
}
{
errorMessage
&&
<
div
className
=
{
classes
.
errorMessage
}
>
{
errorMessage
}
</
div
>
}
...
...
src/descriptors/ui/c/DescriptorScale.tsx
View file @
3430ebe4
...
...
@@ -59,7 +59,7 @@ const styles = (theme) => ({
/* tslint:enable */
});
const
DescriptorScale
=
({
classes
,
decimal
,
min
,
max
,
labels
,
className
=
''
}:
{
classes
:
any
,
decimal
?:
boolean
,
min
:
number
,
max
:
number
,
labels
:
VocabularyTerm
[],
className
:
string
})
=>
{
const
DescriptorScale
=
({
classes
,
decimal
,
min
,
max
,
labels
,
className
=
''
}:
{
classes
:
any
,
decimal
?:
boolean
,
min
:
number
,
max
:
number
,
labels
:
VocabularyTerm
[],
className
?
:
string
})
=>
{
// Test if labels are provided
const
bits
:
number
[]
=
labels
!==
null
?
labels
.
map
((
l
)
=>
+
l
.
code
)
:
[];
...
...
src/descriptors/ui/c/DescriptorTerms.tsx
0 → 100644
View file @
3430ebe4
import
*
as
React
from
'
react
'
;
import
{
translate
}
from
'
react-i18next
'
;
import
VocabularyTerm
from
'
model/vocabulary/VocabularyTerm
'
;
import
{
Table
,
TableRow
,
TableCell
}
from
'
ui/common/tables
'
;
const
DescriptorTerms
=
({
terms
,
t
}:
{
terms
:
VocabularyTerm
[],
t
:
any
})
=>
{
if
(
!
terms
)
{
return
null
;
}
// console.log(terms);
return
(
<
Table
widths
=
{
[
'
10%
'
,
'
20%
'
,
null
]
}
headers
=
{
(
<
TableRow
>
<
TableCell
>
{
t
(
'
descriptors.public.p.display.code
'
)
}
</
TableCell
>
<
TableCell
>
{
t
(
'
descriptors.public.p.display.term
'
)
}
</
TableCell
>
<
TableCell
>
{
t
(
'
descriptors.public.p.display.description
'
)
}
</
TableCell
>
</
TableRow
>
)
}
>
{
terms
.
map
((
term
:
VocabularyTerm
)
=>
(
<
TableRow
key
=
{
term
.
code
}
>
<
TableCell
className
=
"font-bold"
>
{
term
.
code
}
</
TableCell
>
<
TableCell
>
{
term
.
title
}
</
TableCell
>
<
TableCell
>
{
term
.
description
}
</
TableCell
>
</
TableRow
>
))
}
</
Table
>
);
};
export
default
translate
()(
DescriptorTerms
);
src/ui/common/tables/index.tsx
View file @
3430ebe4
...
...
@@ -5,7 +5,7 @@ import * as React from 'react';
import
MuiTable
from
'
@material-ui/core/Table
'
;
import
MuiTableBody
from
'
@material-ui/core/TableBody
'
;
import
MuiTableCell
from
'
@material-ui/core/TableCell
'
;
import
MuiTableFooter
from
'
@material-ui/core/TableFooter
'
;
//
import MuiTableFooter from '@material-ui/core/TableFooter';
import
MuiTableHead
from
'
@material-ui/core/TableHead
'
;
import
MuiTableRow
from
'
@material-ui/core/TableRow
'
;
...
...
@@ -39,9 +39,6 @@ function Table({ headers, children, widths = [], maxHeight }: ITableProps) {
<
MuiTableBody
>
{
children
}
</
MuiTableBody
>
<
MuiTableFooter
>
<
MuiTableRow
style
=
{
{
height
:
'
2rem
'
}
}
/>
</
MuiTableFooter
>
</
MuiTable
>
);
}
...
...
styles/app.styles.scss
View file @
3430ebe4
...
...
@@ -496,14 +496,14 @@ table.genesys-table {
}
}
// This adds the "margins" to the left and right of the table
tr
>
td
,
tr
>
th
{
&
:first-child
{
border-left
:
solid
1rem
White
;
}
&
:last-child
{
border-right
:
solid
1rem
White
;
}
}
//
tr > td, tr > th {
//
&:first-child {
//
border-left: solid 1rem White;
//
}
//
&:last-child {
//
border-right: solid 1rem White;
//
}
//
}
tbody
{
>
tr
{
...
...
Write
Preview
Supports
Markdown
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