Skip to content

Commit 9173726

Browse files
simonwhatleysimonwhatley
committed
2 parents 5a16989 + 525c0cb commit 9173726

File tree

5 files changed

+135
-61
lines changed

5 files changed

+135
-61
lines changed

‎app/filters.js

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
const moment = require('moment');
21

32
module.exports = function (env) {
43
/**
@@ -9,58 +8,6 @@ module.exports = function (env) {
98
*/
109
let filters = {}
1110

12-
/* ------------------------------------------------------------------
13-
date filter for use in Nunjucks
14-
example: {{ params.date | date("DD/MM/YYYY") }}
15-
outputs: 01/01/1970
16-
------------------------------------------------------------------ */
17-
filters.date = function(timestamp, format) {
18-
return moment(timestamp).format(format);
19-
}
20-
21-
/* ------------------------------------------------------------------
22-
utility functions for use in mojDate function/filter
23-
------------------------------------------------------------------ */
24-
function govDate(timestamp) {
25-
return moment(timestamp).format('D MMMM YYYY');
26-
}
27-
28-
function govShortDate(timestamp) {
29-
return moment(timestamp).format('D MMM YYYY');
30-
}
31-
32-
function govTime(timestamp) {
33-
let t = moment(timestamp);
34-
if(t.minutes() > 0) {
35-
return t.format('h:mma');
36-
} else {
37-
return t.format('ha');
38-
}
39-
}
40-
41-
/* ------------------------------------------------------------------
42-
standard dates for use in Nunjucks,
43-
example: {{ params.date | mojDate("datetime") }}
44-
outputs: 1 Jan 1970 at 1:32pm
45-
------------------------------------------------------------------ */
46-
filters.mojDate = function(timestamp, type) {
47-
48-
switch(type) {
49-
case "datetime":
50-
return govDate(timestamp) + " at " + govTime(timestamp);
51-
case "shortdatetime":
52-
return govShortDate(timestamp) + " at " + govTime(timestamp);
53-
case "date":
54-
return govDate(timestamp);
55-
case "shortdate":
56-
return govShortDate(timestamp);
57-
case "time":
58-
return govTime(timestamp);
59-
default:
60-
return timestamp;
61-
}
62-
63-
}
6411

6512
/* ------------------------------------------------------------------
6613
keep the following line to return your filters to the app

‎package/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,8 @@
2828
"license": "MIT",
2929
"publishConfig": {
3030
"access": "public"
31+
},
32+
"dependencies": {
33+
"moment": "^2.22.2"
3134
}
3235
}

‎server.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,16 @@ const nunjucksEnvironment = nunjucks.configure(appViews, {
103103
watch: true
104104
});
105105

106-
// Add Nunjucks filters
106+
// Add Nunjucks filters for application
107107
utils.addNunjucksFilters(nunjucksEnvironment);
108108

109+
// Add filters from MOJ Frontend
110+
let mojFilters = require('./src/filters/all')();
111+
mojFilters = Object.assign(mojFilters);
112+
Object.keys(mojFilters).forEach(function (filterName) {
113+
nunjucksEnvironment.addFilter(filterName, mojFilters[filterName])
114+
});
115+
109116
// Set view engine
110117
app.set('view engine', 'html');
111118

‎src/components/moj-timeline/README.md

Lines changed: 55 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,21 @@
33
- [Guidance](https://mojdt-design-system.herokuapp.com/components/timeline)
44
- [Preview](https://mojdt-frontend.herokuapp.com/components/timeline)
55

6+
### Installation
7+
8+
You will need to install the following code at the bottom of `server.js`, just above `module.exports = app;`
9+
10+
```
11+
// Add filters from MOJ Frontend
12+
let mojFilters = require('./src/filters/all')();
13+
mojFilters = Object.assign(mojFilters);
14+
Object.keys(mojFilters).forEach(function (filterName) {
15+
nunjucksEnvironment.addFilter(filterName, mojFilters[filterName])
16+
});
17+
```
18+
619
## Example
20+
Below is a typical example of the timeline component in use.
721

822
```
923
{{ mojTimeline({
@@ -13,7 +27,10 @@
1327
text: "Application requires confirmation"
1428
},
1529
html: confirmationHtml,
16-
timestamp: "Friday, 14 June 2019 at 2:01 PM",
30+
datetime: {
31+
timestamp: "2019-06-14T14:01:00.000Z",
32+
type: "datetime"
33+
},
1734
byline: {
1835
text: "Joe Bloggs"
1936
}
@@ -23,7 +40,10 @@
2340
text: "Application review in progress"
2441
},
2542
text: "Your application is being reviewed by one of our case workers.",
26-
timestamp: "Friday, 7 June 2019 at 12:32 PM",
43+
datetime: {
44+
timestamp: "2019-06-07T12:32:00.000Z",
45+
type: "datetime"
46+
},
2747
byline: {
2848
text: "Caseworker 1"
2949
}
@@ -33,7 +53,10 @@
3353
text: "Application received"
3454
},
3555
text: "Your application has been received – reference MOJ-1234-5678",
36-
timestamp: "Thursday, 6 June 2019 at 9:12 AM",
56+
datetime: {
57+
timestamp: "2019-06-06T09:12:00.000Z",
58+
type: "datetime"
59+
},
3760
byline: {
3861
text: "Caseworker 1"
3962
}
@@ -43,7 +66,23 @@
4366
text: "Application submitted"
4467
},
4568
html: detailsHtml,
46-
timestamp: "Tuesday, 28 May 2019 at 10:45 AM",
69+
datetime: {
70+
timestamp: "2019-05-28T10:45:00.000Z",
71+
type: "datetime"
72+
},
73+
byline: {
74+
text: "Joe Bloggs"
75+
}
76+
},
77+
{
78+
label: {
79+
text: "Documents uploaded"
80+
},
81+
html: documentsHtml,
82+
datetime: {
83+
timestamp: "2019-05-28T10:15:00.000Z",
84+
type: "datetime"
85+
},
4786
byline: {
4887
text: "Joe Bloggs"
4988
}
@@ -53,7 +92,10 @@
5392
text: "Application started"
5493
},
5594
html: listHtml,
56-
timestamp: "Tuesday, 21 May 2019 at 2:15 PM",
95+
datetime: {
96+
timestamp: "2019-05-21T13:15:00.000Z",
97+
type: "datetime"
98+
},
5799
byline: {
58100
text: "Joe Bloggs"
59101
}
@@ -80,19 +122,25 @@ This component accepts the following arguments.
80122
|label|object|Yes|See [item label](#itemlabel).|
81123
|text|string|Yes|If `html` is set, this is not required. Text to use within the item. If `html` is provided, the `text` argument will be ignored.|
82124
|html|string|Yes|If `text` is set, this is not required. HTML to use within the item. If `html` is provided, the `text` argument will be ignored.|
125+
|datetime|object|No|See [item date and time](#itemdatetime).|
83126
|byline|object|No|See [item byline](#itembyline).|
84-
|timestamp|string|No|The timestamp for the item.|
85127
|classes|string|No|Classes to add to the timeline's items container.|
86128
|attributes|object|No|HTML attributes (for example data attributes) to add to the timeline's items container.|
87129

88-
89130
#### Item label
90131

91132
|Name|Type|Required|Description|
92133
|---|---|---|---|
93134
|text|string|Yes|If `html` is set, this is not required. Text to use within the item label. If `html` is provided, the `text` argument will be ignored.|
94135
|html|string|Yes|If `text` is set, this is not required. HTML to use within the item label. If `html` is provided, the `text` argument will be ignored.|
95136

137+
#### Item datetime
138+
139+
|Name|Type|Required|Description|
140+
|---|---|---|---|
141+
|timestamp|string|Yes|A valid datetime string to be formatted. For example: `1970-01-01T11:59:59.000Z`|
142+
|type|string|Yes|If `format` is set, this is not required. The standard date format to use within the item. If `type` is provided, the `format` argument will be ignored. Values include: `datetime`, `shortdatetime`, `date`, `shortdate` and `time`|
143+
|format|string|Yes|If `type` is set, this is not required. The user-defined date format to use within the item. If `type` is provided, the `format` argument will be ignored. See the [Moment.js document on display formats](https://momentjs.com/docs/).|
96144

97145
#### Item byline
98146

‎src/filters/all.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
const moment = require('moment');
2+
3+
module.exports = function () {
4+
/**
5+
* Instantiate object used to store the methods registered as a
6+
* 'filter' (of the same name) within nunjucks. You can override
7+
* gov.uk core filters by creating filter methods of the same name.
8+
* @type {Object}
9+
*/
10+
let filters = {}
11+
12+
/* ------------------------------------------------------------------
13+
date filter for use in Nunjucks
14+
example: {{ params.date | date("DD/MM/YYYY") }}
15+
outputs: 01/01/1970
16+
------------------------------------------------------------------ */
17+
filters.date = function(timestamp, format) {
18+
return moment(timestamp).format(format);
19+
}
20+
21+
/* ------------------------------------------------------------------
22+
utility functions for use in mojDate function/filter
23+
------------------------------------------------------------------ */
24+
function govDate(timestamp) {
25+
return moment(timestamp).format('D MMMM YYYY');
26+
}
27+
28+
function govShortDate(timestamp) {
29+
return moment(timestamp).format('D MMM YYYY');
30+
}
31+
32+
function govTime(timestamp) {
33+
let t = moment(timestamp);
34+
if(t.minutes() > 0) {
35+
return t.format('h:mma');
36+
} else {
37+
return t.format('ha');
38+
}
39+
}
40+
41+
/* ------------------------------------------------------------------
42+
standard dates for use in Nunjucks,
43+
example: {{ params.date | mojDate("datetime") }}
44+
outputs: 1 Jan 1970 at 1:32pm
45+
------------------------------------------------------------------ */
46+
filters.mojDate = function(timestamp, type) {
47+
48+
switch(type) {
49+
case "datetime":
50+
return govDate(timestamp) + " at " + govTime(timestamp);
51+
case "shortdatetime":
52+
return govShortDate(timestamp) + " at " + govTime(timestamp);
53+
case "date":
54+
return govDate(timestamp);
55+
case "shortdate":
56+
return govShortDate(timestamp);
57+
case "time":
58+
return govTime(timestamp);
59+
default:
60+
return timestamp;
61+
}
62+
63+
}
64+
65+
/* ------------------------------------------------------------------
66+
keep the following line to return your filters to the app
67+
------------------------------------------------------------------ */
68+
return filters;
69+
}

0 commit comments

Comments
 (0)