🤡(backend) add template editor json in demo

For the demo to be compatible with the new template
editor, we need to add the json file that setup
correctly the editor.
We are able to read and use it, but not edit it,
because the demo is in is_public mode.
This commit is contained in:
Anthony LC
2024-04-18 16:39:47 +02:00
committed by Anthony LC
parent 4de79c2388
commit 75801bf95f
4 changed files with 587 additions and 95 deletions

View File

@@ -0,0 +1,37 @@
<body id="iubr">
<div id="ix1a" class="gjs-row">
<div id="iqey" class="gjs-cell">
<div id="ip2l" class="gjs-row">
<div id="i9ps" class="gjs-cell">
<img
id="ioje"
src="https://upload.wikimedia.org/wikipedia/fr/7/72/Logo_du_Gouvernement_de_la_R%C3%A9publique_fran%C3%A7aise_%282020%29.svg"
/>
</div>
<div id="ifn8" class="gjs-cell">
<div id="i1v9">
Direction <br />Interministérielle <br />du numérique
</div>
</div>
</div>
<div id="ipfx3" class="gjs-row">
<div id="isc8e" class="gjs-cell">
<div id="ix7wo">La directrice</div>
<div id="ij1wk">Réf: 12000001</div>
</div>
<div id="iei3g" class="gjs-cell">
<div id="iwp89">Paris, le 28/09/2023</div>
</div>
</div>
<div id="i59gh"><b>Note</b><br />à Monsieur Le Premier Ministre</div>
<div id="i2egv">Objet: Generated PDF</div>
<div id="icpsv">{{ body }}<br /></div>
</div>
</div>
<div id="iqn81">
Footer: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat
</div>
</body>

View File

@@ -0,0 +1,442 @@
{
"pages": [
{
"id": "VlXkJzAStsYTLhwJ",
"type": "main",
"frames": [
{
"id": "FZ0aEvTxwtxsFeIQ",
"component": {
"type": "wrapper",
"stylable": [
"background",
"background-color",
"background-image",
"background-repeat",
"background-attachment",
"background-position",
"background-size"
],
"attributes": { "id": "iubr" },
"components": [
{
"name": "Row",
"classes": [{ "name": "gjs-row", "private": 1 }],
"droppable": ".gjs-cell",
"resizable": {
"bl": 0,
"br": 0,
"cl": 0,
"cr": 0,
"tc": 0,
"tl": 0,
"tr": 0,
"minDim": 1
},
"attributes": { "id": "ix1a" },
"components": [
{
"name": "Cell",
"classes": [{ "name": "gjs-cell", "private": 1 }],
"draggable": ".gjs-row",
"resizable": {
"bc": 0,
"bl": 0,
"br": 0,
"cl": 0,
"cr": 1,
"tc": 0,
"tl": 0,
"tr": 0,
"step": 0.2,
"minDim": 1,
"currentUnit": 1
},
"attributes": { "id": "iqey" },
"components": [
{
"name": "Row",
"classes": [{ "name": "gjs-row", "private": 1 }],
"droppable": ".gjs-cell",
"resizable": {
"bl": 0,
"br": 0,
"cl": 0,
"cr": 0,
"tc": 0,
"tl": 0,
"tr": 0,
"minDim": 1
},
"attributes": { "id": "ip2l" },
"components": [
{
"name": "Cell",
"classes": [{ "name": "gjs-cell", "private": 1 }],
"draggable": ".gjs-row",
"resizable": {
"bc": 0,
"bl": 0,
"br": 0,
"cl": 0,
"cr": 1,
"tc": 0,
"tl": 0,
"tr": 0,
"step": 0.2,
"minDim": 1,
"currentUnit": 1
},
"attributes": { "id": "i9ps" },
"components": [
{
"type": "image",
"resizable": { "ratioDefault": 1 },
"attributes": {
"id": "ioje",
"src": "https://upload.wikimedia.org/wikipedia/fr/7/72/Logo_du_Gouvernement_de_la_R%C3%A9publique_fran%C3%A7aise_%282020%29.svg"
}
}
]
},
{
"name": "Cell",
"classes": [{ "name": "gjs-cell", "private": 1 }],
"draggable": ".gjs-row",
"resizable": {
"bc": 0,
"bl": 0,
"br": 0,
"cl": 0,
"cr": 1,
"tc": 0,
"tl": 0,
"tr": 0,
"step": 0.2,
"minDim": 1,
"currentUnit": 1
},
"attributes": { "id": "ifn8" },
"components": [
{
"type": "text",
"attributes": { "id": "i1v9" },
"components": [
{
"type": "textnode",
"content": "Direction\n"
},
{ "void": true, "tagName": "br" },
{
"type": "textnode",
"content": "Interministérielle\n"
},
{ "void": true, "tagName": "br" },
{
"type": "textnode",
"content": "du numérique"
}
]
}
]
}
],
"custom-name": "header"
},
{
"name": "Row",
"classes": [{ "name": "gjs-row", "private": 1 }],
"droppable": ".gjs-cell",
"resizable": {
"bl": 0,
"br": 0,
"cl": 0,
"cr": 0,
"tc": 0,
"tl": 0,
"tr": 0,
"minDim": 1
},
"attributes": { "id": "ipfx3" },
"components": [
{
"name": "Cell",
"classes": [{ "name": "gjs-cell", "private": 1 }],
"draggable": ".gjs-row",
"resizable": {
"bc": 0,
"bl": 0,
"br": 0,
"cl": 0,
"cr": 1,
"tc": 0,
"tl": 0,
"tr": 0,
"step": 0.2,
"minDim": 1,
"currentUnit": 1
},
"attributes": { "id": "isc8e" },
"components": [
{
"type": "text",
"attributes": { "id": "ix7wo" },
"components": [
{
"type": "textnode",
"content": "La directrice"
}
]
},
{
"type": "text",
"attributes": { "id": "ij1wk" },
"components": [
{
"type": "textnode",
"content": "Réf: 12000001"
}
]
}
]
},
{
"name": "Cell",
"classes": [{ "name": "gjs-cell", "private": 1 }],
"draggable": ".gjs-row",
"resizable": {
"bc": 0,
"bl": 0,
"br": 0,
"cl": 0,
"cr": 1,
"tc": 0,
"tl": 0,
"tr": 0,
"step": 0.2,
"minDim": 1,
"currentUnit": 1
},
"attributes": { "id": "iei3g" },
"components": [
{
"type": "text",
"attributes": { "id": "iwp89" },
"components": [
{
"type": "textnode",
"content": "Paris, le 28/09/2023"
}
]
}
]
}
],
"custom-name": "sub-header"
},
{
"type": "text",
"attributes": { "id": "i59gh" },
"components": [
{
"type": "text",
"tagName": "b",
"components": [
{ "type": "textnode", "content": "Note" }
]
},
{ "void": true, "tagName": "br" },
{
"type": "textnode",
"content": "à Monsieur Le Premier Ministre"
}
],
"custom-name": "note"
},
{
"type": "text",
"attributes": { "id": "i2egv" },
"components": [
{
"type": "textnode",
"content": "Objet: Generated PDF"
}
],
"custom-name": "object"
},
{
"type": "text",
"attributes": { "id": "icpsv" },
"components": [
{ "type": "textnode", "content": "{{body}}" },
{ "void": true, "tagName": "br" }
],
"custom-name": "body"
}
]
}
]
},
{
"type": "text",
"attributes": { "id": "iqn81" },
"components": [
{
"type": "textnode",
"content": "Footer: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
}
]
}
],
"custom-name": "Body"
}
}
]
}
],
"assets": [
{
"src": "https://upload.wikimedia.org/wikipedia/fr/7/72/Logo_du_Gouvernement_de_la_R%C3%A9publique_fran%C3%A7aise_%282020%29.svg",
"type": "image",
"width": 0,
"height": 0,
"unitDim": "px"
}
],
"styles": [
{
"style": {
"width": "100%",
"display": "table",
"padding-top": "10px",
"padding-left": "10px",
"padding-right": "10px",
"padding-bottom": "10px"
},
"selectors": [{ "name": "gjs-row", "private": 1 }]
},
{
"style": { "width": "100%", "display": "block" },
"mediaText": "(max-width: 768px)",
"selectors": [{ "name": "gjs-cell", "private": 1 }],
"atRuleType": "media"
},
{
"style": { "width": "100%", "display": "block" },
"mediaText": "(max-width: 768px)",
"selectors": ["gjs-cell30"],
"atRuleType": "media"
},
{
"style": { "width": "100%", "display": "block" },
"mediaText": "(max-width: 768px)",
"selectors": ["gjs-cell70"],
"atRuleType": "media"
},
{
"style": { "width": "8%", "height": "75px", "display": "table-cell" },
"selectors": [{ "name": "gjs-cell", "private": 1 }]
},
{
"style": { "height": "100%", "padding": "0px 0px 0px 0px" },
"selectors": ["#ix1a"]
},
{
"style": {
"color": "black",
"width": "214px",
"height": "128px",
"margin": "0px 0px 0px -12px"
},
"selectors": ["#ioje"]
},
{
"style": {
"top": "-5px",
"float": "right",
"margin": "-13px 0px 0px 0px",
"display": "block",
"padding": "0px 10px 0px 0px",
"position": "relative",
"font-size": "19px",
"text-align": "right",
"font-family": "Arial Black, Gadget, sans-serif",
"font-weight": "800",
"line-height": "26px",
"letter-spacing": "0px"
},
"selectors": ["#i1v9"]
},
{ "style": { "margin": "60px 0px 0px 0px" }, "selectors": ["#ipfx3"] },
{
"style": {
"padding": "10px 10px 3px 0px",
"font-family": "Georgia, serif"
},
"selectors": ["#ix7wo"]
},
{
"style": {
"padding": "0px 10px 10px 0px",
"font-size": "12px",
"font-family": "Georgia, serif"
},
"selectors": ["#ij1wk"]
},
{
"style": {
"padding": "10px 0px 3px 10px",
"font-size": "14px",
"text-align": "right",
"font-family": "Georgia, serif"
},
"selectors": ["#iwp89"]
},
{
"style": {
"padding": "10px",
"font-size": "15px",
"font-family": "Georgia, serif"
},
"selectors": ["#i59gh"]
},
{
"style": {
"padding": "29px 10px 10px 10px",
"font-size": "20px",
"font-family": "Georgia, serif",
"font-weight": "900"
},
"selectors": ["#i2egv"]
},
{
"style": {
"padding": "30px 10px 10px 10px",
"font-family": "Georgia, serif"
},
"selectors": ["#icpsv"]
},
{ "style": { "padding": "0px 0px 0px 0px" }, "selectors": ["#ifn8"] },
{ "style": { "padding": "0px 0px 0px 0px" }, "selectors": ["#ip2l"] },
{
"style": {
"bottom": "0px",
"padding": "10px 10px 0px 10px",
"position": "fixed",
"font-size": "12px",
"font-family": "Georgia, serif"
},
"selectors": ["#iqn81"]
},
{
"style": {
"color": "#000000",
"border": "0px solid #f6f6f6",
"font-size": "15px",
"font-family": "\"Mercury SSm A\", \"Mercury SSm B\", Georgia, Times, \"Times New Roman\", \"Microsoft YaHei New\", \"Microsoft Yahei\", 微软雅黑, 宋体, SimSun, STXihei, 华文细黑, serif",
"background-color": "#fbfbfb"
},
"selectors": ["#ilke6"]
}
]
}

View File

@@ -0,0 +1,95 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.gjs-row {
width: 100%;
display: table;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.gjs-cell {
width: 8%;
height: 75px;
display: table-cell;
}
#ix1a {
height: 100%;
padding: 0px 0px 0px 0px;
}
#ioje {
color: black;
width: 214px;
height: 128px;
margin: 0px 0px 0px -12px;
}
#i1v9 {
top: -5px;
float: right;
margin: -13px 0px 0px 0px;
display: block;
padding: 0px 10px 0px 0px;
position: relative;
font-size: 19px;
text-align: right;
font-family: Arial Black, Gadget, sans-serif;
font-weight: 800;
line-height: 26px;
letter-spacing: 0px;
}
#ipfx3 {
margin: 60px 0px 0px 0px;
}
#ix7wo {
padding: 10px 10px 3px 0px;
font-family: Georgia, serif;
}
#ij1wk {
padding: 0px 10px 10px 0px;
font-size: 12px;
font-family: Georgia, serif;
}
#iwp89 {
padding: 10px 0px 3px 10px;
font-size: 14px;
text-align: right;
font-family: Georgia, serif;
}
#i59gh {
padding: 10px;
font-size: 15px;
font-family: Georgia, serif;
}
#i2egv {
padding: 29px 10px 10px 10px;
font-size: 20px;
font-family: Georgia, serif;
font-weight: 900;
}
#icpsv {
padding: 30px 10px 10px 10px;
font-family: Georgia, serif;
}
#ifn8 {
padding: 0px 0px 0px 0px;
}
#ip2l {
padding: 0px 0px 0px 0px;
}
#iqn81 {
bottom: 0px;
padding: 10px 10px 0px 10px;
position: fixed;
font-size: 12px;
font-family: Georgia, serif;
}
@media (max-width: 768px) {
.gjs-cell {
width: 100%;
display: block;
}
}

View File

@@ -1,6 +1,7 @@
# ruff: noqa: S311, S106
"""create_demo management command"""
import json
import logging
import random
import time
@@ -109,105 +110,22 @@ def create_demo(stdout):
queue = BulkQueue(stdout)
with Timeit(stdout, "Creating Template"):
with open("demo/data/template/code_editor.json", "r") as file:
json_data = json.load(file)
with open("demo/data/template/code.txt", "r") as text_file:
code_data = text_file.read()
with open("demo/data/template/css.txt", "r") as text_file:
css_data = text_file.read()
queue.push(
models.Template(
id="472d0633-20b8-4cb1-998a-1134ade092ba",
title="Demo Template",
description="This is the demo template",
code="""
<page size="A4">
<div class="header">
<image src="https://upload.wikimedia.org/wikipedia/fr/7/72/Logo_du_Gouvernement_de_la_R%C3%A9publique_fran%C3%A7aise_%282020%29.svg"/>
<h2 class="header-title">Direction<br/>Interministérielle<br/>du numérique</h2>
</div>
<div class="second-row">
<div class="who-ref">
<div class="who">La directrice</div>
<p class="ref">Réf: 1200001</p>
</div>
<div class="date">Paris, le 28/09/2023</div>
</div>
<div class="third-row">
<h4 class="title">Note</h4>
<h5 class="subtitle">à Monsieur le Premier Ministre</h5>
</div>
<div class="content">
<div class="object">Objet: Generated PDF</div>
<div class="body">{{ body }}</div>
</div>
</page>
""",
css="""
body {
background: white;
font-family: arial
}
img {
width: 5cm;
margin-left: -0.4cm;
}
.header {
display: flex;
justify-content: space-between;
}
.header-title {
text-align: right;
margin-top: 3rem;
font-size: 1.2rem;
}
.second-row {
display: flex;
justify-content: space-between;
margin-top: 1.2cm;
}
.ref {
margin-top: 0;
}
.who {
font-weight: medium;
}
.date, .ref {
font-size: 12px;
}
.title, .subtitle {
margin: 0;
}
.subtitle {
font-weight: normal;
}
.object {
font-weight: bold;
margin-bottom: 1.2cm;
margin-top: 3rem
}
.body{
margin-top: 1.5rem
}
h1 {
font-size: 18px;
}
h2 {
font-size: 14px;
}
p {
text-align: justify;
ligne-height: 0.8;
}
""",
code_editor=json_data,
code=code_data,
css=css_data,
is_public=True,
)
)