Skip to content

Commit

Permalink
Add custom headers and footers to the generated document
Browse files Browse the repository at this point in the history
Previously, a template’s custom header and footer were not part of the generated HTML preview at all.

Now, the headers and footers are included in the SSR page when the `renderTemplateFootersAndHeaders` attribute is `true`. This will allow us to conditionally turn on the headers and footers when DAT renders the HTML preview but not when it’s generating the PDF.

This adds a number of attributes to one of the existing templates because they are required for the template to successfully render; see this issue for more info: #55

Part of #53
  • Loading branch information
Chasen Le Hara authored and chasenlehara committed Dec 16, 2021
1 parent c23547b commit fc4d9c4
Show file tree
Hide file tree
Showing 9 changed files with 183 additions and 18 deletions.
89 changes: 87 additions & 2 deletions elements/a2j-template-ssr/a2j-template-ssr-test.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
import 'steal-mocha'
import 'models/fixtures-author/templates'
import './a2j-template-ssr'

import $ from 'jquery'
import { assert } from 'chai'
import CanList from 'can-list'
import F from 'funcunit'
import stache from 'can-stache'
import template2115 from '~/models/fixtures-author/templates/guide1261-template2115'
import TemplateSsrVM from './a2j-template-ssr-vm'

describe('a2j-template-srr', function () {
describe('a2j-template-ssr', function () {
describe('viewModel', function () {
it.skip('templatesPromise resolves a list of templates', function (done) {
it('templatesPromise resolves a list of templates', function (done) {
const vm = new TemplateSsrVM({ guideId: '1261', templateId: '2112' })

vm.attr('templatesPromise').then(templates => {
Expand All @@ -13,4 +21,81 @@ describe('a2j-template-srr', function () {
})
})
})

describe('Component', function () {
describe('template without a custom header and footer', () => {
beforeEach(function () {
const frag = stache(
'<a2j-template-ssr guideId:from="guideId" templateId:from="templateId" />'
)
$('#test-area').html(frag({ guideId: '1261', templateId: '2112' }))
})

afterEach(function () {
$('#test-area').empty()
})

it('does not render a custom header or footer', function (done) {
F('a2j-template-ssr a2j-template').visible('template should be visible')
F('a2j-template-ssr footer').missing('custom footer should not be visible')
F('a2j-template-ssr header').missing('custom header should not be visible')
F(done)
})
})

describe('template with a custom header and footer', () => {
describe('when renderTemplateFootersAndHeaders is false', () => {
beforeEach(function () {
const frag = stache(
'<a2j-template-ssr guideId:from="guideId" renderTemplateFootersAndHeaders:from="renderTemplateFootersAndHeaders" templateId:from="templateId" />'
)
$('#test-area').html(frag({
guideId: '1261',
renderTemplateFootersAndHeaders: false,
templateId: '2115'
}))
})

afterEach(function () {
$('#test-area').empty()
})

it('does not render a custom header or footer', function (done) {
F('a2j-template-ssr a2j-template').visible('template should be visible')
F('a2j-template-ssr footer p').missing('custom footer should not be visible')
F('a2j-template-ssr header p').missing('custom header should not be visible')
F(done)
})
})

describe('when renderTemplateFootersAndHeaders is true', () => {
beforeEach(function () {
const frag = stache(
'<a2j-template-ssr guideId:from="guideId" renderTemplateFootersAndHeaders:from="renderTemplateFootersAndHeaders" templateId:from="templateId" />'
)
$('#test-area').html(frag({
guideId: '1261',
renderTemplateFootersAndHeaders: true,
templateId: '2115'
}))
})

afterEach(function () {
$('#test-area').empty()
})

it('renders the custom headers and footers', function (done) {
F('a2j-template-ssr footer p').visible('custom footer should be visible')
F('a2j-template-ssr header p').visible('custom header should be visible')

F(function () {
assert.strictEqual(F('a2j-template-ssr footer')[0].innerHTML, template2115.footer, 'should have the custom footer text')
assert.strictEqual(F('a2j-template-ssr header')[0].innerHTML, template2115.header, 'should have the custom header text')
})

F(done)
})
})
})
})
})
4 changes: 4 additions & 0 deletions elements/a2j-template-ssr/a2j-template-ssr-vm.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ export default CanMap.extend({
define: {
// passed in from server.stache
guideId: {},
renderTemplateFootersAndHeaders: {
type: 'boolean',
default: false
},
templateId: {},
templateIds: {
type: '*'
Expand Down
5 changes: 5 additions & 0 deletions elements/a2j-template-ssr/a2j-template-ssr.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<!doctype html>
<title>A2J-Template-SSR Tests</title>
<div id="mocha"></div>
<div id="test-area"></div>
<script src="../../node_modules/steal/steal.js" mocha="bdd" main="~/elements/a2j-template-ssr/a2j-template-ssr-test"></script>
20 changes: 14 additions & 6 deletions elements/a2j-template-ssr/a2j-template-ssr.stache
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,20 @@
{{#if(scope.vm.templatesPromise.isResolved)}}
{{#each(scope.vm.templates)}}
{{#if(scope.vm.canRenderTemplate(this))}}
<a2j-template
vm:template:from="."
use-answers:raw="true"
vm:answers:from="scope.vm.answers"
edit-enabled:raw="false"
/>
<section>
{{#and(scope.vm.renderTemplateFootersAndHeaders, this.header)}}
<header>{{{this.header}}}</header>
{{/and}}
<a2j-template
vm:template:from="."
use-answers:raw="true"
vm:answers:from="scope.vm.answers"
edit-enabled:raw="false"
/>
{{#and(scope.vm.renderTemplateFootersAndHeaders, this.footer)}}
<footer>{{{this.footer}}}</footer>
{{/and}}
</section>
{{/if}}
{{/each}}
{{/if}}
4 changes: 2 additions & 2 deletions elements/a2j-template-ssr/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@
var $ = require('jquery');
var stache = require('can-stache/');

require('styles.less!');
require('models/fixtures-author/templates')
require('elements/a2j-template-ssr/');

var template = '<a2j-template-ssr {guide-id}="guideId" {answers}="answers" />';
var template = '<a2j-template-ssr answers:from="answers" guideId:from="guideId" />';
var answers = {"user gender":{"name":"User Gender","repeating":false,"type":"MC","values":[null,"Male"]},"client first name te":{"name":"Client first name TE","repeating":false,"type":"Text","values":[null,"Manuel"]},"client middle name te":{"name":"Client middle name TE","repeating":false,"type":"Text","values":[null,"Antonio"]},"client last name te":{"name":"Client last name TE","repeating":false,"type":"Text","values":[null,"Mujica"]},"a2j version":{"name":"A2J Version","repeating":false,"type":"Text","values":[null,"5.0.2.4"]},"a2j interview id":{"name":"A2J Interview ID","repeating":false,"type":"Text","values":[null,"1276765160"]},"a2j bookmark":{"name":"A2J Bookmark","repeating":false,"type":"Text","values":[null,"1-Question 1"]},"a2j history":{"name":"A2J History","repeating":false,"type":"Text","values":[null,"&lt;LABELS/&gt;"]}};
var frag = stache(template);

Expand Down
3 changes: 2 additions & 1 deletion models/fixtures-author/a2j-templates.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@ import template2111 from './templates/guide1261-template2111'
import template2112 from './templates/guide1261-template2112'
import template2113 from './templates/guide1261-template2113'
import template2114 from './templates/guide20-template2114'
import template2115 from './templates/guide1261-template2115'

// emulates a Guide's local templates.json file which has a map like {"guideId":20,"templateIds":[2114]}
// and the api call that returns the template based on guideId/templateId comboId like {20-2114}
let fixtureTemplates = {
1261: { 2111: template2111, 2112: template2112, 2113: template2113 },
1261: { 2111: template2111, 2112: template2112, 2113: template2113, 2115: template2115 },
20: { 2114: template2114 },
5150: {} // used for 'throw away' tests that don't need templates map to persist
}
Expand Down
44 changes: 39 additions & 5 deletions models/fixtures-author/templates/guide1261-template2112.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,50 @@ export default {
tag: 'a2j-template',
state: {},
children: [
{ tag: 'a2j-repeat-loop',
state: {}
{
tag: 'a2j-repeat-loop',
state: {
listStyleType: 'disc',
loopTitleTag: 'h1',
repeatEachInOneList: true,
tableStyle: 'bordered',
tableColumns: [
{
width: 50,
variable: 'Item name TE',
column: 'Item name'
},
{
variable: 'Item value NU',
width: 50,
column: 'Item value'
}
],
loopCounter: 1,
listItems: [
{
variable: '',
item: 'Item 1'
}
],
loopType: 'variable',
loopTitle: 'This is a repeat loop title',
displayType: 'table',
loopRichText: '',
loopVariable: 'CountVar'
}
},
{ tag: 'a2j-rich-text',
{
tag: 'a2j-rich-text',
state: {
userContent: 'User\'s last name <a2j-variable name="Client last name TE" />.'
notes: '',
userContent: 'User\'s last name <a2j-variable name=Client last name TE />.'
}
},
{ tag: 'a2j-rich-text',
{
tag: 'a2j-rich-text',
state: {
notes: '',
userContent: `<p><em>Lorem ipsum dolor sit amet, pri ad porro consul
disputando. Mea tale admodum cu, soluta fuisset per ad. Te omittam
noluisse consequat vel. Impetus appetere antiopam sit ut, at nec
Expand Down
28 changes: 28 additions & 0 deletions models/fixtures-author/templates/guide1261-template2115.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
export default {
guideId: '1261',
templateId: '2115',
updatedAt: '2021-12-08T17:51:00.688Z',
active: true,
title: 'Test template',
header: '<p>This is a custom header. The author might use this to include court information or a caption.&nbsp;</p>\n',
footer: '<p>This is a custom footer. The author might include this to display the fact that this form was created with the assistance of a specific legal aid organization or a court division. They might include <em>itallics</em> or <strong>bold text</strong> to make it stand out.&nbsp;</p>\n',
rootNode: {
tag: 'a2j-template',
state: {},
children: [
{ tag: 'a2j-rich-text',
state: {
notes: '',
userContent: 'Hello, <a2j-variable name="Client first name TE"></a2j-variable>.'
}
},
{ tag: 'a2j-section-title',
state: {
title: 'This is a Section Title',
titleTag: 'h2',
underline: true
}
}
]
}
}
4 changes: 2 additions & 2 deletions models/tests/a2j-template-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ describe('A2JTemplate Model', function () {
let promise = A2JTemplate.findAll({ guideId: 1261 })

return promise.then(function (a2jTemplates) {
assert.equal(a2jTemplates.length, 3, 'should have 3 total templates')
assert.equal(a2jTemplates.length, 4, 'should have 4 total templates')
a2jTemplates.forEach(function (a2jTemplate) {
assert.ok(a2jTemplate.attr('rootNode') instanceof A2JNode)

Expand All @@ -37,7 +37,7 @@ describe('A2JTemplate Model', function () {
let promise = A2JTemplate.findAll({ guideId: 1261, active: true })

return promise.then(function (a2jTemplates) {
assert.equal(a2jTemplates.length, 2, 'should only have 2 active of 3 templates')
assert.equal(a2jTemplates.length, 3, 'should only have 3 active of 4 templates')
})
})

Expand Down

0 comments on commit fc4d9c4

Please sign in to comment.