signature: layout and css bootstrap class of the vue app

This commit is contained in:
nobohan 2024-07-02 15:08:45 +02:00
parent 1bee3114ac
commit 794c479b9e
2 changed files with 117 additions and 119 deletions

View File

@ -9,23 +9,41 @@
</template> </template>
</modal> </modal>
</teleport> </teleport>
<div> <div class="col-12">
<button :disabled="!userSignatureZones" @click="confirm_sign">
Confirmer la signature <div class="row justify-content-center">
</button> <div class="col-3">
<button :disabled="!userSignatureZones" @click="undo_sign"> <button class="btn btn-primary" :disabled="!userSignatureZones" @click="confirm_sign">
Supprimer la signature Confirmer la signature
</button> </button>
</div>
<div class="col-3">
<button class="btn btn-primary" :disabled="!userSignatureZones" @click="undo_sign">
Supprimer la signature
</button>
</div>
</div>
<div class="row justify-content-center">
<div class="col-2">
<button class="btn btn-light" @click="turn_signature(-1)">Zone de signature précédente</button>
</div>
<div class="col-2">
<button class="btn btn-light" @click="turn_signature(1)">Zone de signature suivante</button>
</div>
</div>
<div class="row justify-content-center" v-if="pageCount > 1">
<div class="col-3">
<button class="btn btn-light" :disabled="page <= 1" @click="turn_page(-1)"></button>
{{ page }} / {{ pageCount }}
<button class="btn btn-light" :disabled="page >= pageCount" @click="turn_page(1)"></button>
</div>
</div>
</div> </div>
<div v-if="pageCount > 1"> <div class="col-12">
<button :disabled="page <= 1" @click="turn_page(-1)"></button> <canvas id="canvas" style="width:100%"></canvas>
{{ page }} / {{ pageCount }}
<button :disabled="page >= pageCount" @click="turn_page(1)"></button>
</div> </div>
<div>
<button @click="go_next_signature()">Voir les zones de signature</button>
</div>
<canvas id="canvas"></canvas>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -180,8 +198,7 @@ const turn_page = async (upOrDown: number) => {
setTimeout(() => add_zones(page.value), 200); setTimeout(() => add_zones(page.value), 200);
}; };
const go_next_signature = async () => { const turn_signature = async (upOrDown: number) => {
open()
let currentZone = signature.zones[zone.value]; let currentZone = signature.zones[zone.value];
if (currentZone) { if (currentZone) {
page.value = currentZone.page; page.value = currentZone.page;
@ -189,12 +206,13 @@ const go_next_signature = async () => {
setTimeout(() => add_zones(page.value), 200); setTimeout(() => add_zones(page.value), 200);
} }
if (zone.value < signature.zones.length - 1) { if (zone.value < signature.zones.length - 1) {
zone.value = zone.value + 1; zone.value = zone.value + upOrDown;
} else { } else {
zone.value = 0; zone.value = 0;
} }
}; };
const draw_zone = ( const draw_zone = (
zone: SignatureZone, zone: SignatureZone,
ctx: CanvasRenderingContext2D, ctx: CanvasRenderingContext2D,
@ -262,6 +280,9 @@ const undo_sign = async () => {
download_and_open(); download_and_open();
</script> </script>
<style lang="scss"> <style scoped lang="scss">
canvas {
width: 100%;
}
</style> </style>

View File

@ -1,107 +1,84 @@
{% extends "@ChillPerson/Person/layout.html.twig" %} <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="{{ asset('build/images/favicon.ico') }}" type="image/x-icon">
<title>Signature</title>
{% set activeRouteKey = '' %} {{ encore_entry_link_tags('mod_bootstrap') }}
{% import "@ChillDocStore/Macro/macro.html.twig" as m %} </head>
{% import "@ChillDocStore/Macro/macro_mimeicon.html.twig" as mm %}
{% block title %}{{ 'Detail of document of %name%'|trans({ '%name%': person|chill_entity_render_string } ) }}{% endblock %} <body>
{% block js %} {% block js %}
{{ encore_entry_script_tags('mod_document_action_buttons_group') }} {{ encore_entry_script_tags('mod_document_action_buttons_group') }}
<script type="text/javascript"> <script type="text/javascript">
const signature = { const signature = {
id: 1, id: 1,
// // storedObject: { // // storedObject: {
// // filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA", // // filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA",
// // keyInfos: { // // keyInfos: {
// // alg: "A256CBC", // // alg: "A256CBC",
// // ext: true, // // ext: true,
// // k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY", // // k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY",
// // key_ops: ["encrypt", "decrypt"], // // key_ops: ["encrypt", "decrypt"],
// // kty: "oct", // // kty: "oct",
// // }, // // },
// // iv: [ // // iv: [
// // 50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79, // // 50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
// // ], // // ],
// // }, // // },
storedObject: { storedObject: {
filename: "U2HmWk5MGkUW1vHRA5sMEMkW9fyf", filename: "U2HmWk5MGkUW1vHRA5sMEMkW9fyf",
keyInfos: { keyInfos: {
alg: "A256CBC", alg: "A256CBC",
ext: true, ext: true,
k: "3GmJ8UBck3WhpmdoQy7cGQho0J9k9Rxhn23UIhqvpVY", k: "3GmJ8UBck3WhpmdoQy7cGQho0J9k9Rxhn23UIhqvpVY",
key_ops: ["encrypt", "decrypt"], key_ops: ["encrypt", "decrypt"],
kty: "oct", kty: "oct",
},
iv: [
254, 171, 69, 203, 89, 3, 202, 29, 187, 200, 19, 146, 201, 253, 79, 169,
],
}, },
iv: [ zones: [
254, 171, 69, 203, 89, 3, 202, 29, 187, 200, 19, 146, 201, 253, 79, 169, {
page: 1,
pageWidth: 210,
pageHeight: 297,
x: 21, //from top-left corner
y: 50,
width: 80,
height: 50,
},
{
page: 3,
pageWidth: 210,
pageHeight: 297,
x: 60, //from top-left corner
y: 20,
width: 80,
height: 50,
},
], ],
}, };
zones: [ window.signature = signature;
{ </script>
page: 1, {{ encore_entry_script_tags('vue_document_signature') }}
pageWidth: 210, {% endblock %}
pageHeight: 297,
x: 21, //from top-left corner
y: 50,
width: 80,
height: 50,
},
{
page: 3,
pageWidth: 210,
pageHeight: 297,
x: 60, //from top-left corner
y: 20,
width: 80,
height: 50,
},
],
};
window.signature = signature;
</script>
{{ encore_entry_script_tags('vue_document_signature') }}
{% endblock %}
{% block css %} <div class="content" id="content">
{{ encore_entry_link_tags('mod_document_action_buttons_group') }} <div class="container-xxl">
{% endblock %} <div class="row">
<div class="col-xs-12 col-md-12 col-lg-9 my-5 m-auto">
{% block content %} <h1>{{ 'Document %title%' | trans({ '%title%': document.title }) }}</h1>
<h1>{{ 'Document %title%' | trans({ '%title%': document.title }) }}</h1> <div class="row" id="document-signature"></div>
</div>
{{ mm.mimeIcon(document.object.type) }} </div>
</div>
<dl class="chill_view_data"> </div>
<dt>{{ 'Title'|trans }}</dt> </body>
<dd>{{ document.title }}</dd> </html>
</dl>
<div id="document-signature"></div>
<ul class="record_actions sticky-form-buttons">
<li class="cancel">
<a href="{{ chill_return_path_or('chill_docstore_generic-doc_by-person_index', {'id': person.id}) }}" class="btn btn-cancel">
{{ 'Back to the list' | trans }}
</a>
</li>
{% if is_granted('CHILL_PERSON_DOCUMENT_DELETE', document) %}
<li class="delete">
<a href="{{ chill_return_path_or('chill_docstore_person_document_delete', {'person': person.id, 'id': document.id}) }}" class="btn btn-delete"></a>
</li>
{% endif %}
<li>
{{ document.object|chill_document_button_group(document.title, is_granted('CHILL_PERSON_DOCUMENT_UPDATE', document)) }}
</li>
{% if is_granted('CHILL_PERSON_DOCUMENT_UPDATE', document) %}
<li>
<a href="{{ path('person_document_edit', {'id': document.id, 'person': person.id}) }}" class="btn btn-edit">
{{ 'Edit' | trans }}
</a>
</li>
{% endif %}
{% endblock %}