Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
simonwhatley committed Jun 26, 2019
2 parents 5a16989 + 525c0cb commit 9173726
Show file tree
Hide file tree
Showing 5 changed files with 135 additions and 61 deletions.
53 changes: 0 additions & 53 deletions app/filters.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
const moment = require('moment');

module.exports = function (env) {
/**
Expand All @@ -9,58 +8,6 @@ module.exports = function (env) {
*/
let filters = {}

/* ------------------------------------------------------------------
date filter for use in Nunjucks
example: {{ params.date | date("DD/MM/YYYY") }}
outputs: 01/01/1970
------------------------------------------------------------------ */
filters.date = function(timestamp, format) {
return moment(timestamp).format(format);
}

/* ------------------------------------------------------------------
utility functions for use in mojDate function/filter
------------------------------------------------------------------ */
function govDate(timestamp) {
return moment(timestamp).format('D MMMM YYYY');
}

function govShortDate(timestamp) {
return moment(timestamp).format('D MMM YYYY');
}

function govTime(timestamp) {
let t = moment(timestamp);
if(t.minutes() > 0) {
return t.format('h:mma');
} else {
return t.format('ha');
}
}

/* ------------------------------------------------------------------
standard dates for use in Nunjucks,
example: {{ params.date | mojDate("datetime") }}
outputs: 1 Jan 1970 at 1:32pm
------------------------------------------------------------------ */
filters.mojDate = function(timestamp, type) {

switch(type) {
case "datetime":
return govDate(timestamp) + " at " + govTime(timestamp);
case "shortdatetime":
return govShortDate(timestamp) + " at " + govTime(timestamp);
case "date":
return govDate(timestamp);
case "shortdate":
return govShortDate(timestamp);
case "time":
return govTime(timestamp);
default:
return timestamp;
}

}

/* ------------------------------------------------------------------
keep the following line to return your filters to the app
Expand Down
3 changes: 3 additions & 0 deletions package/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,8 @@
"license": "MIT",
"publishConfig": {
"access": "public"
},
"dependencies": {
"moment": "^2.22.2"
}
}
9 changes: 8 additions & 1 deletion server.js
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,16 @@ const nunjucksEnvironment = nunjucks.configure(appViews, {
watch: true
});

// Add Nunjucks filters
// Add Nunjucks filters for application
utils.addNunjucksFilters(nunjucksEnvironment);

// Add filters from MOJ Frontend
let mojFilters = require('./src/filters/all')();
mojFilters = Object.assign(mojFilters);
Object.keys(mojFilters).forEach(function (filterName) {
nunjucksEnvironment.addFilter(filterName, mojFilters[filterName])
});

// Set view engine
app.set('view engine', 'html');

Expand Down
62 changes: 55 additions & 7 deletions src/components/moj-timeline/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,21 @@
- [Guidance](https://mojdt-design-system.herokuapp.com/components/timeline)
- [Preview](https://mojdt-frontend.herokuapp.com/components/timeline)

### Installation

You will need to install the following code at the bottom of `server.js`, just above `module.exports = app;`

```
// Add filters from MOJ Frontend
let mojFilters = require('./src/filters/all')();
mojFilters = Object.assign(mojFilters);
Object.keys(mojFilters).forEach(function (filterName) {
nunjucksEnvironment.addFilter(filterName, mojFilters[filterName])
});
```

## Example
Below is a typical example of the timeline component in use.

```
{{ mojTimeline({
Expand All @@ -13,7 +27,10 @@
text: "Application requires confirmation"
},
html: confirmationHtml,
timestamp: "Friday, 14 June 2019 at 2:01 PM",
datetime: {
timestamp: "2019-06-14T14:01:00.000Z",
type: "datetime"
},
byline: {
text: "Joe Bloggs"
}
Expand All @@ -23,7 +40,10 @@
text: "Application review in progress"
},
text: "Your application is being reviewed by one of our case workers.",
timestamp: "Friday, 7 June 2019 at 12:32 PM",
datetime: {
timestamp: "2019-06-07T12:32:00.000Z",
type: "datetime"
},
byline: {
text: "Caseworker 1"
}
Expand All @@ -33,7 +53,10 @@
text: "Application received"
},
text: "Your application has been received – reference MOJ-1234-5678",
timestamp: "Thursday, 6 June 2019 at 9:12 AM",
datetime: {
timestamp: "2019-06-06T09:12:00.000Z",
type: "datetime"
},
byline: {
text: "Caseworker 1"
}
Expand All @@ -43,7 +66,23 @@
text: "Application submitted"
},
html: detailsHtml,
timestamp: "Tuesday, 28 May 2019 at 10:45 AM",
datetime: {
timestamp: "2019-05-28T10:45:00.000Z",
type: "datetime"
},
byline: {
text: "Joe Bloggs"
}
},
{
label: {
text: "Documents uploaded"
},
html: documentsHtml,
datetime: {
timestamp: "2019-05-28T10:15:00.000Z",
type: "datetime"
},
byline: {
text: "Joe Bloggs"
}
Expand All @@ -53,7 +92,10 @@
text: "Application started"
},
html: listHtml,
timestamp: "Tuesday, 21 May 2019 at 2:15 PM",
datetime: {
timestamp: "2019-05-21T13:15:00.000Z",
type: "datetime"
},
byline: {
text: "Joe Bloggs"
}
Expand All @@ -80,19 +122,25 @@ This component accepts the following arguments.
|label|object|Yes|See [item label](#itemlabel).|
|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.|
|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.|
|datetime|object|No|See [item date and time](#itemdatetime).|
|byline|object|No|See [item byline](#itembyline).|
|timestamp|string|No|The timestamp for the item.|
|classes|string|No|Classes to add to the timeline's items container.|
|attributes|object|No|HTML attributes (for example data attributes) to add to the timeline's items container.|


#### Item label

|Name|Type|Required|Description|
|---|---|---|---|
|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.|
|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.|

#### Item datetime

|Name|Type|Required|Description|
|---|---|---|---|
|timestamp|string|Yes|A valid datetime string to be formatted. For example: `1970-01-01T11:59:59.000Z`|
|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`|
|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/).|

#### Item byline

Expand Down
69 changes: 69 additions & 0 deletions src/filters/all.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
const moment = require('moment');

module.exports = function () {
/**
* Instantiate object used to store the methods registered as a
* 'filter' (of the same name) within nunjucks. You can override
* gov.uk core filters by creating filter methods of the same name.
* @type {Object}
*/
let filters = {}

/* ------------------------------------------------------------------
date filter for use in Nunjucks
example: {{ params.date | date("DD/MM/YYYY") }}
outputs: 01/01/1970
------------------------------------------------------------------ */
filters.date = function(timestamp, format) {
return moment(timestamp).format(format);
}

/* ------------------------------------------------------------------
utility functions for use in mojDate function/filter
------------------------------------------------------------------ */
function govDate(timestamp) {
return moment(timestamp).format('D MMMM YYYY');
}

function govShortDate(timestamp) {
return moment(timestamp).format('D MMM YYYY');
}

function govTime(timestamp) {
let t = moment(timestamp);
if(t.minutes() > 0) {
return t.format('h:mma');
} else {
return t.format('ha');
}
}

/* ------------------------------------------------------------------
standard dates for use in Nunjucks,
example: {{ params.date | mojDate("datetime") }}
outputs: 1 Jan 1970 at 1:32pm
------------------------------------------------------------------ */
filters.mojDate = function(timestamp, type) {

switch(type) {
case "datetime":
return govDate(timestamp) + " at " + govTime(timestamp);
case "shortdatetime":
return govShortDate(timestamp) + " at " + govTime(timestamp);
case "date":
return govDate(timestamp);
case "shortdate":
return govShortDate(timestamp);
case "time":
return govTime(timestamp);
default:
return timestamp;
}

}

/* ------------------------------------------------------------------
keep the following line to return your filters to the app
------------------------------------------------------------------ */
return filters;
}

0 comments on commit 9173726

Please sign in to comment.