Skip to content

Commit

Permalink
feat(admin-ui): improved the look of License Details page #399
Browse files Browse the repository at this point in the history
  • Loading branch information
syntrydy committed Aug 30, 2022
1 parent 3e2f435 commit a8a40e1
Show file tree
Hide file tree
Showing 2 changed files with 127 additions and 141 deletions.
6 changes: 3 additions & 3 deletions admin-ui/app/routes/Apps/Gluu/styles/applicationstyle.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ export default {
paddingLeft: '20px',
paddingRight: '30px',
color: 'white',
fontSize:'1.5em',
fontWeight: 'bold'
fontSize: '1.5em',
fontWeight: 'bold',
},
healthDown: {
background: 'rgb(241 35 32)',
Expand All @@ -33,5 +33,5 @@ export default {
minHeight: '70vh',
borderRadius: 24,
padding: 12,
}
},
}
262 changes: 124 additions & 138 deletions admin-ui/app/routes/License/LicenseDetailsPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,8 @@ import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
import GluuFormDetailRow from 'Routes/Apps/Gluu/GluuFormDetailRow'
import { LICENSE } from 'Utils/ApiResources'
import { getLicenseDetails } from 'Redux/actions/LicenseDetailsActions'
import {
Card,
CardBody,
Container,
Row,
Col,
} from 'Components'
import {
buildPayload,
} from 'Utils/PermChecker'
import { Card, CardBody, Container, Row, Col } from 'Components'
import { buildPayload } from 'Utils/PermChecker'
import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
import Alert from '@material-ui/lab/Alert'
import SetTitle from 'Utils/SetTitle'
Expand All @@ -32,146 +24,140 @@ function LicenseDetailsPage({ item, loading, dispatch }) {
}, [])

function formatDate(date) {
if(date == undefined) {
if (date == undefined) {
return ''
}
if(date.length > 10) {
if (date.length > 10) {
return date.substring(0, 10)
}
return ''

}
SetTitle(t('fields.licenseDetails'))

return (
<React.Fragment>
<GluuLoader blocking={loading}>
<Card className="mb-3" style={applicationStyle.mainCard}>
<CardBody>
<GluuLoader blocking={loading}>
{item.licenseEnabled ? (
<Container style={{ backgroundColor: '#F5F5F5', float: 'left' }}>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.productName"
value={item.productName}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="productName"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.productCode"
value={item.productCode}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="productCode"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.licenseType"
value={item.licenseType}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="licenseType"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.licenseKey"
value={item.licenseKey}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="licenseKey"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.customerEmail"
value={item.customerEmail}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="customerEmail"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.customerName"
value={
item.customerFirstName + ' ' + item.customerLastName
}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="customerName"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.companyName"
value={item.companyName}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="companyName"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.validityPeriod"
value={formatDate(item.validityPeriod)}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="validityPeriod"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.isLicenseActive"
value={item.licenseActive ? 'Yes' : 'No'}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="isLicenseActive"
doc_category={LICENSE}
/>
</Col>
</Row>
</Container>
) : (
<Alert severity="warning">
{!loading &&
'The License API is not enabled for this application.'}
</Alert>
)}
</GluuLoader>
{item.licenseEnabled ? (
<Container style={{ backgroundColor: '#F5F5F5', float: 'left' }}>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.productName"
value={item.productName}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="productName"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.productCode"
value={item.productCode}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="productCode"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.licenseType"
value={item.licenseType}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="licenseType"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.licenseKey"
value={item.licenseKey}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="licenseKey"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.customerEmail"
value={item.customerEmail}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="customerEmail"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.customerName"
value={item.customerFirstName + ' ' + item.customerLastName}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="customerName"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.companyName"
value={item.companyName}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="companyName"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.validityPeriod"
value={formatDate(item.validityPeriod)}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="validityPeriod"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.isLicenseActive"
value={item.licenseActive ? 'Yes' : 'No'}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="isLicenseActive"
doc_category={LICENSE}
/>
</Col>
</Row>
</Container>
) : (
<Alert severity="warning">
{!loading &&
'The License API is not enabled for this application.'}
</Alert>
)}
</CardBody>
</Card>
</React.Fragment>
</GluuLoader>
)
}

Expand Down

0 comments on commit a8a40e1

Please sign in to comment.