Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DO NOT MERGE Auto data storage #157

Closed
wants to merge 20 commits into from
Closed

DO NOT MERGE Auto data storage #157

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
ed8905b
store all data in session, send to all views
joelanman Feb 18, 2016
9ba0c15
redirect POST to GET
joelanman Feb 18, 2016
08b21a7
use 'data' namespace
joelanman Feb 19, 2016
83fe52b
set required session options
joelanman Feb 19, 2016
51001ec
add clear data link
joelanman Feb 19, 2016
751b528
refactor functions into lib/utils
joelanman Feb 19, 2016
278b944
add radios and checkboxes
joelanman Feb 19, 2016
2aea8c4
use config for autodata, ignore _
joelanman Mar 3, 2016
c4a6a8e
un-namespace
joelanman Mar 3, 2016
a951713
use prototype-admin path for clear session
joelanman Mar 3, 2016
1e8724f
updated guidance
joelanman Mar 3, 2016
e602fc3
remove unneeded css
joelanman Mar 4, 2016
974d835
remove autoroute refactor
joelanman Mar 4, 2016
f90c847
remove trailing whitespace
joelanman Mar 4, 2016
35baeb3
explain underscore behaviour
joelanman Mar 4, 2016
4ee4889
unrefactor commonData
joelanman Mar 4, 2016
ec2accc
add help text to check answers
joelanman Mar 4, 2016
f4adfd7
move function comment above function
joelanman Mar 4, 2016
2dbfed0
add link - return to examples
joelanman Mar 4, 2016
ee80ecb
move pass-data to folder
joelanman Mar 9, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/assets/sass/examples.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,4 @@ main.area {
.header-proposition {
clear: none;
min-height: 6em;
}
}
3 changes: 3 additions & 0 deletions app/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ module.exports = {
// Enable or disable password protection on production
useAuth: 'true',

// Enable or disable automatic storing of data and passing it to views
useAutoStoreData: 'true',

// Cookie warning - update link to service's cookie page.
cookieText: 'GOV.UK uses cookies to make the site simpler. <a href="#" title="Find out more about cookies">Find out more about cookies</a>'

Expand Down
7 changes: 6 additions & 1 deletion app/views/examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,12 @@ <h2 class="heading-medium">Template features</h2>
<ul class="list list-bullet">
<li>
<a href="/examples/template-data">
Passing data into a template
Showing data in a page
</a>
</li>
<li>
<a href="/examples/pass-data">
Passing data from page to page
</a>
</li>
<li>
Expand Down
68 changes: 68 additions & 0 deletions app/views/examples/pass-data.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Passing data
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<h1 class="heading-xlarge">
Passing data
</h1>

<p>
You may want to use or display data a user has entered over a few screens. The kit automatically stores all data entered, so you can show it later.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you could have more detail here, or in a later paragraph. 'The kit automatically stores all data entered in to form fields, using the name field' etc

You could then include a code snippet showing this with the named field.

</p>

<p>
To clear the data (for example at the end of a user research session) click the "Clear data" link in the footer.
</p>

<p>
You can see the code for this example here:
</p>

<pre>
<div class="code">
/app/views/examples/pass-data.html
/app/views/examples/vehicle-type.html
/app/views/examples/vehicle-features.html
/app/views/examples/vehicle-check-answers.html

</div>
</pre>

<form action="/examples/vehicle-type" method="post" class="form">

<div class="form-group">
<fieldset>

<legend class="visuallyhidden">
What is your vehicle registration number?
</legend>

<label for="vehicleRegistration" class="form-label">
What is your vehicle registration number?
</label>

<input class="form-control" type="text" name="vehicleRegistration">

</fieldset>
</div>

<div class="form-group">
<input type="submit" class="button" value="Continue">
</div>

</form>

</div>
</div>
</main>
{% endblock %}
105 changes: 105 additions & 0 deletions app/views/examples/vehicle-check-answers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
{% extends "layout.html" %}

{% block page_title %}
Check your answers
{% endblock %}

{% block content %}

<main id="content" role="main">

<div class="grid-row">
<div class="column-two-thirds">
<h1 class="heading-large">
Check your answers before sending your application
</h1>

<p>
When a user has entered data on pages, show it by using code like this:
</p>

<pre>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The markup for this section should be <pre><code>...</code></pre> we should also use the styles from .code for pre and code elements

<div class="code">{% raw %}
&lt;tr&gt;
&lt;td&gt;
Vehicle type:
&lt;/td&gt;
&lt;td&gt;
{{vehicleType}}
&lt;/td&gt;
&lt;/tr&gt;
{% endraw %}</div></pre>
</div>
</div>

<div class="form-group">

<table class="check-your-answers">

<thead>
<tr>
<th colspan="2">
<h2 class="heading-medium">
Vehicle details
</h2>
</th>
<th>
</th>
</tr>
</thead>

<tbody>
<tr>
<td>
Registration number
</td>
<td>
{{vehicleRegistration}}
</td>
<td class="change-answer">
<a href="/examples/pass-data">
Change <span class="visuallyhidden">registration number</span>
</a>
</td>
</tr>
<tr>
<td>
Vehicle type
</td>
<td>
{{vehicleType}}
</td>
<td class="change-answer">
<a href="/examples/vehicle-type">
Change <span class="visuallyhidden">vehicle type</span>
</a>
</td>
</tr>
<tr>
<td>
Vehicle features
</td>
<td>
{{vehicleFeature}}
</td>
<td class="change-answer">
<a href="/examples/vehicle-type">
Change <span class="visuallyhidden">vehicle features</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>

<div class="form-group">
<p>
<a href="/examples">
Return to prototype kit examples
</a>
</p>
</div>

</main>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It feels like this page could have some kind of 'summary' paragraph describing how you then use the data - eg an example of the markup to use in the page.

Would also be good to have a link back to the main examples - so users have a return path.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeh good idea - adding


{% endblock %}
55 changes: 55 additions & 0 deletions app/views/examples/vehicle-features.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Passing data
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<form action="/examples/vehicle-check-answers" method="post" class="form">

<div class="form-group">
<fieldset>

<legend class="visuallyhidden">
Which of these applies to your vehicle? (Select all that apply)
</legend>

<p class="heading-medium">
Which of these applies to your vehicle? (Select all that apply)
</p>

<label class="block-label">
<input type="checkbox" name="vehicleFeature" value="Heated seats">
Heated seats
</label>

<label class="block-label">
<input type="checkbox" name="vehicleFeature" value="Radio">
Radio
</label>

<label class="block-label">
<input type="checkbox" name="vehicleFeature" value="Suspension">
Suspension
</label>

</fieldset>
</div>

<div class="form-group">
<input type="submit" class="button" value="Continue">
</div>

</form>

</div>
</div>
</main>
{% endblock %}
55 changes: 55 additions & 0 deletions app/views/examples/vehicle-type.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Passing data
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<form action="/examples/vehicle-features" method="post" class="form">

<div class="form-group">
<fieldset>

<legend class="visuallyhidden">
What type of vehicle do you have?
</legend>

<p class="heading-medium">
What type of vehicle do you have?
</p>

<label for="vehicleTypeCar" class="block-label">
<input type="radio" id="vehicleTypeCar" name="vehicleType" value="Car">
Car
</label>

<label for="vehicleTypeLorry" class="block-label">
<input type="radio" id="vehicleTypeLorry" name="vehicleType" value="Lorry">
Lorry
</label>

<label for="vehicleTypeIceCream" class="block-label">
<input type="radio" id="vehicleTypeIceCream" name="vehicleType" value="Ice-cream van">
Ice-cream van
</label>

</fieldset>
</div>

<div class="form-group">
<input type="submit" class="button" value="Continue">
</div>

</form>

</div>
</div>
</main>
{% endblock %}
8 changes: 8 additions & 0 deletions app/views/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,11 @@
{% include "includes/scripts.html" %}
<!-- GOV.UK Prototype kit {{releaseVersion}} -->
{% endblock %}

{% block footer_support_links %}
<ul>
<li>
<a href="/prototype-admin/clear-data">Clear data</a>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should probably only display if data storage is turned on.

</li>
</ul>
{% endblock %}
27 changes: 27 additions & 0 deletions lib/prototype-admin/clear-data.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{% extends "layout.html" %}

{% block page_title %}
Clear data
{% endblock %}

{% block content %}

<main id="content" role="main">

<h1 class="heading-medium">
Data cleared
</h1>

<p>
The session data has been cleared.
</p>

<p>
<a href="/">
Prototype home page
</a>
</p>

</main>

{% endblock %}
26 changes: 26 additions & 0 deletions lib/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,3 +95,29 @@ exports.findAvailablePort = function(app){
});

}

// Middleware - store any data sent in session, and pass it to all views

exports.autoStoreData = function (req, res, next) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add a description for what this function does?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the next line is:

// Middleware - store any data sent in session

is that ok, or you want to add to that?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it should come before the function, and be a bit more descriptive - my preference would be that a user could get a full idea of the function and how to use it from the comment - not having to read the code.



if (!req.session.data){
req.session.data = {};
}

for (var i in req.body){
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add some kind of comment indicating what this is doing? Ie document that if you don't want data saved, add an underscore to the name.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

// any input where the name starts with _ is ignored
if (i.indexOf("_") != 0){
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be !==

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

indexOf is built-in and can only return an integer, so you dont need to check for strict equals

req.session.data[i] = req.body[i];
}
}

// send session data to all views

for (var i in req.session.data){
res.locals[i] = req.session.data[i];
}

next();

}
Loading