Skip to content

Commit

Permalink
feat: add application and facility info to application page
Browse files Browse the repository at this point in the history
  • Loading branch information
@matthieu-foucault
matthieu-foucault committed Mar 24, 2021
1 parent 399a936 commit d7e9c11
Show file tree
Hide file tree
Showing 8 changed files with 256 additions and 24 deletions.
41 changes: 28 additions & 13 deletions app/layouts/default-layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,17 +54,24 @@ const DefaultLayout: React.FunctionComponent<Props> = ({
{showSubheader && <Subheader />}
</Header>
<main>
{title ? (
{title || titleControls ? (
<div className="page-title">
<Container className={width}>
<Row>
<Col>
<h1>{title}</h1>
{help && (
<Help title={help.title} helpMessage={help.helpMessage} />
)}
</Col>
<Col xs="auto">{titleControls}</Col>
{title && (
<Col>
<div className="title-container">
<h1>{title}</h1>
{help && (
<Help
title={help.title}
helpMessage={help.helpMessage}
/>
)}
</div>
</Col>
)}
<Col sm="auto">{titleControls}</Col>
</Row>
</Container>
</div>
Expand All @@ -88,6 +95,18 @@ const DefaultLayout: React.FunctionComponent<Props> = ({
main {
flex-grow: 1;
}
.title-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
h1 {
font-size: 30px;
display: inline-block;
margin-bottom: 0;
}
`}
</style>
<style jsx global>
Expand All @@ -105,14 +124,10 @@ const DefaultLayout: React.FunctionComponent<Props> = ({
.footer {
flex-shrink: 0;
}
h1 {
font-size: 30px;
display: inline-block;
}
.page-title {
background: #f5f5f5;
border-bottom: 1px solid #ccc;
padding: 40px 0 20px;
padding: 30px 0 30px;
}
.page-title h1 {
font-size: 25px;
Expand Down
30 changes: 30 additions & 0 deletions app/pages/reporter/application.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,14 @@ class Application extends Component<Props> {
query {
application(id: $applicationId) {
id
rowId
latestDraftRevision {
versionNumber
legalDisclaimerAccepted
}
facilityByFacilityId {
bcghgid
}
}
session {
...defaultLayout_session
Expand Down Expand Up @@ -74,7 +78,33 @@ class Application extends Component<Props> {

return (
<DefaultLayout session={session}>
<div className="application-ids">
Application ID: {application.rowId}
<br />
{application.latestDraftRevision.versionNumber > 1 && (
<>
Version Number: {application.latestDraftRevision.versionNumber}
<br />
</>
)}
BC GHG ID: {application.facilityByFacilityId.bcghgid}
</div>
<ApplicationWizard query={query} loading={this.props.loading} />
<style jsx global>{`
.application-ids {
margin-top: -50px;
min-height: 50px;
display: flex;
justify-content: flex-end;
align-items: center;
}
@media screen and (min-width: 992px) {
.application-ids {
margin-top: -60px;
min-height: 60px;
}
}
`}</style>
<style jsx global>{`
@media print {
.nav-guide-container {
Expand Down
29 changes: 24 additions & 5 deletions app/pages/reporter/view-application.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@ class ViewApplication extends Component<Props> {
)
application(id: $applicationId) {
rowId
facilityByFacilityId {
bcghgid
}
latestDraftRevision {
versionNumber
}
Expand Down Expand Up @@ -77,19 +81,19 @@ class ViewApplication extends Component<Props> {
render() {
const {session} = this.props.query;
const {query} = this.props;
const reviewComments = query.application?.reviewCommentsByApplicationId.edges.map(
const {application} = query;
const reviewComments = application?.reviewCommentsByApplicationId.edges.map(
(result) => result.node.description
);
const status =
query?.application?.applicationRevisionStatus?.applicationRevisionStatus;
application?.applicationRevisionStatus?.applicationRevisionStatus;
const changesRequested = status === 'REQUESTED_CHANGES';
const hasBeenReviewed = status !== 'SUBMITTED' && status !== 'DRAFT';

const thisVersion = Number(this.props.router.query.version);
const latestSubmittedRevision =
query.application.latestSubmittedRevision?.versionNumber;
const latestDraftRevision =
query.application.latestDraftRevision?.versionNumber;
application.latestSubmittedRevision?.versionNumber;
const latestDraftRevision = application.latestDraftRevision?.versionNumber;

const newerSubmissionExists = latestSubmittedRevision > thisVersion;
const newerDraftExists = latestDraftRevision > latestSubmittedRevision;
Expand Down Expand Up @@ -126,11 +130,26 @@ class ViewApplication extends Component<Props> {
</>
);

const applicationInfo = (
<div>
Application ID: {application.rowId}
<br />
{thisVersion > 1 && (
<>
Version: {application.latestDraftRevision.versionNumber}
<br />
</>
)}
BC GHG ID: {application.facilityByFacilityId.bcghgid}
</div>
);

return (
<DefaultLayout
showSubheader
session={session}
title="Summary of your application"
titleControls={applicationInfo}
>
<Row>
<Col md={12}>
Expand Down
12 changes: 6 additions & 6 deletions app/tests/unit/layout/__snapshots__/default-layout.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@

exports[`The DefaultLayout component matches the last accepted Snapshot 1`] = `
<div
className="jsx-3986300452 page-wrap"
className="jsx-1441402825 page-wrap"
>
<HeaderLayout
isLoggedIn={false}
isRegistered={false}
/>
<main
className="jsx-3986300452"
className="jsx-1441402825"
>
<Container
className="content narrow"
Expand All @@ -19,14 +19,14 @@ exports[`The DefaultLayout component matches the last accepted Snapshot 1`] = `
</main>
<Footer />
<JSXStyle
id="2203946758"
id="309934731"
>
.page-wrap.jsx-3986300452{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}main.jsx-3986300452{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
.page-wrap.jsx-1441402825{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}main.jsx-1441402825{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}.title-container.jsx-1441402825{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}h1.jsx-1441402825{font-size:30px;display:inline-block;margin-bottom:0;}
</JSXStyle>
<JSXStyle
id="390132651"
id="1603055883"
>
a{color:#0053b3;}.btn-link{color:#0053b3;}.content{padding-top:50px;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}.footer{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}h1{font-size:30px;display:inline-block;}.page-title{background:#f5f5f5;border-bottom:1px solid #ccc;padding:40px 0 20px;}.page-title h1{font-size:25px;font-weight:400;}h3{margin-bottom:20px;font-weight:500;}.blue{color:#036;}p{line-height:25px;}.ciip-card{border:1px solid #036;padding:15px;border-radius:0;box-shadow:1px 8px 13px -5px #00336694;}button.full-width{width:100%;}.btn-primary{background:#036;border-color:#036;}.with-shadow{box-shadow:1px 8px 13px -5px #00336694;}.accordion .card-body{font-size:15px;}.container.wide{max-width:1600px;}@media screen and (min-width:992px){#page-content{padding-top:60px;}}.btn-outline-primary{color:#0053b3;border-color:#0053b3;}.badge-success,.btn-success{background-color:#24883e;}
a{color:#0053b3;}.btn-link{color:#0053b3;}.content{padding-top:50px;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}.footer{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.page-title{background:#f5f5f5;border-bottom:1px solid #ccc;padding:30px 0 30px;}.page-title h1{font-size:25px;font-weight:400;}h3{margin-bottom:20px;font-weight:500;}.blue{color:#036;}p{line-height:25px;}.ciip-card{border:1px solid #036;padding:15px;border-radius:0;box-shadow:1px 8px 13px -5px #00336694;}button.full-width{width:100%;}.btn-primary{background:#036;border-color:#036;}.with-shadow{box-shadow:1px 8px 13px -5px #00336694;}.accordion .card-body{font-size:15px;}.container.wide{max-width:1600px;}@media screen and (min-width:992px){#page-content{padding-top:60px;}}.btn-outline-primary{color:#0053b3;border-color:#0053b3;}.badge-success,.btn-success{background-color:#24883e;}
</JSXStyle>
</div>
`;
Loading

0 comments on commit d7e9c11

Please sign in to comment.