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

View File

@ -1,11 +1,17 @@
{% 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 %}
{% import "@ChillDocStore/Macro/macro_mimeicon.html.twig" as mm %}
</head>
{% block title %}{{ 'Detail of document of %name%'|trans({ '%name%': person|chill_entity_render_string } ) }}{% endblock %}
<body>
{% block js %}
{{ encore_entry_script_tags('mod_document_action_buttons_group') }}
@ -64,44 +70,15 @@
{{ encore_entry_script_tags('vue_document_signature') }}
{% endblock %}
{% block css %}
{{ encore_entry_link_tags('mod_document_action_buttons_group') }}
{% endblock %}
{% block content %}
<div class="content" id="content">
<div class="container-xxl">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-9 my-5 m-auto">
<h1>{{ 'Document %title%' | trans({ '%title%': document.title }) }}</h1>
{{ mm.mimeIcon(document.object.type) }}
<dl class="chill_view_data">
<dt>{{ 'Title'|trans }}</dt>
<dd>{{ document.title }}</dd>
</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 %}
<div class="row" id="document-signature"></div>
</div>
</div>
</div>
</div>
</body>
</html>