Skip to content

Commit

Permalink
Merge branch 'predefined-cover-page' into 'main'
Browse files Browse the repository at this point in the history 
Predefined component for cover page

See merge request reportcreator/reportcreator!449
  • Loading branch information
@MWedl
MWedl committed Feb 14, 2024
2 parents 1eabd70 + b2e8c4c commit b3f9f98
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 88 deletions.
11 changes: 9 additions & 2 deletions frontend/src/components/Design/LayoutComponentForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,14 @@
You can add and style the remaining fields afterwards in HTML.
</p>
</div>
<!--<div v-if="form.form === 'page-cover-create'">
<div v-if="form.form === 'page-cover-create'">
<s-select
v-model="form.coverPage.background"
label="Page Background"
:items="[{value: null, title: 'none'}, {value: 'color', title: 'Color'}, {value: 'image', title: 'Image'}]"
:hint="form.coverPage.background === 'image' ? 'Image must be uploaded in assets as background.png. The background image can later be customized in CSS code.' : form.coverPage.background === 'color' ? 'The color can be customized later in CSS code' : ''"
:disabled="props.disabled"
/>
<s-checkbox
v-model="form.coverPage.hideHeader"
label="Hide header on page"
Expand All @@ -173,7 +180,7 @@
label="Hide footer on page"
:disabled="props.disabled"
/>
</div>-->
</div>
</div>
</template>

Expand Down
179 changes: 93 additions & 86 deletions frontend/src/components/Design/designer-components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -849,6 +849,7 @@ export class PageHeaderComponent extends DesignerComponentBase {
}
}
#${id} { position: absolute; width: 0; }
`) + '\n';
if (form.header.left) {
html += `<div id="${id}-left">\n${getHeaderTypeContent(form.header.left)}\n</div>\n`;
Expand Down Expand Up @@ -895,7 +896,7 @@ export class PageFooterComponent extends DesignerComponentBase {
createCode(form: any, context: DesignerContext) {
const id = createUniqueId('footer', context);
let html = `<div id="${id}" data-sysreptor-generated="page-footer">\n`;
let css = ``;
let css = `#${id} { position: absolute; width: 0; }\n`;
let cssPage = '';
if (form.footer.textLeft) {
html += `<div id="${id}-left">${form.footer.textLeft}</div>\n`;
Expand Down Expand Up @@ -932,91 +933,96 @@ export class CoverPageComponent extends DesignerComponentBase {
return tagInfo.attributes['data-sysreptor-generated']?.value === 'page-cover';
}

// TODO: cover page: how to integrate with headers/footers
// getCreateForm() {
// return {
// form: 'page-cover-create',
// coverPage: {
// // backgroundColor: null,
// // backgroundImage: null,
// hideHeader: true,
// hideFooter: true,
// }
// };
// }

// createCode(form: any, context: DesignerContext) {
// const id = createUniqueId('page-cover', context);
// const html = trimLeadingWhitespace(`
// <section id="${id}" data-sysreptor-generated="page-cover">
// <div class="page-cover-title">
// <h1>PENTEST REPORT</h1>
// <h2>{{ report.title }}</h2>
// </div>
// <div class="page-cover-customer">
// <p>
// <strong>Customer:</strong><br>
// ${'customer' in context.projectType.report_fields ? '{{ report.customer }}' : 'Example Customer'}<br>
// ${'document_history' in context.projectType.report_fields ?
// "{{ report.document_history[report.document_history.length - 1]?.date || '' }}<br>" +
// "{{ report.document_history[report.document_history.length - 1]?.version || '0.0' }}<br>" : ""
// }
// </p>
// </div>
// <pagebreak />
// </section>
// `);

// let pageCss = '';
// // if (form.coverPage.backgroundColor) {
// // pageCss += ` background-color: ${form.coverPage.backgroundColor};\n\n`;
// // }
// if (form.coverPage.hideHeader) {
// pageCss += ' /* Hide header */\n';
// pageCss += ' @top-left-corner { content: none !important; }\n';
// pageCss += ' @top-left { content: none !important; }\n';
// pageCss += ' @top-center { content: none !important; }\n';
// pageCss += ' @top-right { content: none !important; }\n';
// pageCss += ' @top-right-corner { content: none !important; }\n';
// }
// if (form.coverPage.hideFooter) {
// pageCss += ' /* Hide footer */\n';
// pageCss += ' @bottom-left-corner { content: none !important; }\n';
// pageCss += ' @bottom-left { content: none !important; }\n';
// pageCss += ' @bottom-center { content: none !important; }\n';
// pageCss += ' @bottom-right { content: none !important; }\n';
// pageCss += ' @bottom-right-corner { content: none !important; }\n';
// }

// let css = trimLeadingWhitespace(`
// #${id} {
// page: ${id};
// }
// `) + '\n';
// if (pageCss) {
// css += `@page ${id} {\n${pageCss}}\n`;
// }

// css += trimLeadingWhitespace(`
// #${id} .page-cover-title {
// position: absolute;
// top: 20mm;
// left: 0;
// width: 14cm;
// }
// #${id} .page-cover-customer {
// position: absolute;
// top: 11cm;
// left: 0;
// width: 14cm;
// }
// `) + '\n';

// return {
// html,
// css: `/* #region ${id} */\n${css}/* #endregion ${id} */`,
// };
// }
getCreateForm() {
return {
form: 'page-cover-create',
coverPage: {
background: null,
hideHeader: true,
hideFooter: true,
}
};
}

createCode(form: any, context: DesignerContext) {
const id = createUniqueId('page-cover', context);
const html = trimLeadingWhitespace(`
<section id="${id}" data-sysreptor-generated="page-cover">
<div class="page-cover-title">
<h1>PENTEST REPORT</h1>
<h2>{{ report.title }}</h2>
</div>
<div class="page-cover-customer">
<p>
<strong>Customer:</strong><br>
${'customer' in context.projectType.report_fields ? '{{ report.customer }}' : 'Example Customer'}<br>
${'document_history' in context.projectType.report_fields ?
"{{ report.document_history[report.document_history.length - 1]?.date || '' }}<br>" +
"{{ report.document_history[report.document_history.length - 1]?.version || '0.0' }}<br>" : ""
}
</p>
</div>
<pagebreak />
</section>
`);

let pageCss = '';
if (form.coverPage.background === 'color') {
pageCss += ` background-color: #ff0000;\n\n`;
}
if (form.coverPage.background === 'image') {
pageCss += ` background-image: url("/assets/name/background.png");\n`;
pageCss += ` background-repeat: no-repeat;\n`;
pageCss += ` background-size: cover;\n`;
pageCss += ` background-position: center;\n`
pageCss += ` background-attachment: fixed;\n\n`;
}
if (form.coverPage.hideHeader) {
pageCss += ' /* Hide header */\n';
pageCss += ' @top-left-corner { content: none !important; }\n';
pageCss += ' @top-left { content: none !important; }\n';
pageCss += ' @top-center { content: none !important; }\n';
pageCss += ' @top-right { content: none !important; }\n';
pageCss += ' @top-right-corner { content: none !important; }\n';
}
if (form.coverPage.hideFooter) {
pageCss += ' /* Hide footer */\n';
pageCss += ' @bottom-left-corner { content: none !important; }\n';
pageCss += ' @bottom-left { content: none !important; }\n';
pageCss += ' @bottom-center { content: none !important; }\n';
pageCss += ' @bottom-right { content: none !important; }\n';
pageCss += ' @bottom-right-corner { content: none !important; }\n';
}

let css = trimLeadingWhitespace(`
#${id} {
page: ${id};
}
`) + '\n';
if (pageCss) {
css += `@page ${id} {\n${pageCss}}\n`;
}

css += trimLeadingWhitespace(`
#${id} .page-cover-title {
position: absolute;
top: 20mm;
left: 0;
width: 14cm;
}
#${id} .page-cover-customer {
position: absolute;
top: 11cm;
left: 0;
width: 14cm;
}
`) + '\n';

return {
html,
css: `/* #region ${id} */\n${css}/* #endregion ${id} */`,
};
}
}

export const unknownComponent = new DesignerComponentBase({ type: 'unknown', name: 'Code' });
Expand Down Expand Up @@ -1048,6 +1054,7 @@ export const predefinedDesignerComponentGroups = [
components: [
new PageHeaderComponent(),
new PageFooterComponent(),
new CoverPageComponent(),
],
},
{
Expand Down

0 comments on commit b3f9f98

Please sign in to comment.