Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

signature - modale and translations in the vue app

Browse Source
This commit is contained in:
nobohan 2024-07-03 16:08:44 +02:00
parent 0c8ef37860
commit 5b7e3f0336
2 changed files with 72 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
View File

@ -1,51 +1,80 @@
<template>
<teleport to="body">
<modal v-if="state.show_modal" @close="close">
<modal v-if="modalOpen" @close="modalOpen = false">
<template v-slot:header>
<h2>eh là!</h2>
<h2>{{ $t("signature_confirmation") }}</h2>
</template>
<template v-slot:body>
<p>Etes-vous sur de vouloir signer?</p>
<p>{{ $t("you_are_going_to_sign") }}</p>
<p>{{ $t("are_you_sure") }}</p>
</template>
<template v-slot:footer>
<button class="btn btn-action" @click.prevent="confirm_sign">
{{ $t("yes") }}
</button>
</template>
</modal>
</teleport>
<div class="col-12">
<div class="row justify-content-center">
<div class="col-6">
<button class="btn btn-create me-2" :disabled="!userSignatureZones" @click="confirm_sign">
Signer
<button
class="btn btn-action me-2"
:disabled="!userSignatureZones"
@click="modalOpen = true"
>
{{ $t("sign") }}
</button>
<button class="btn btn-misc" :disabled="!userSignatureZones" @click="undo_sign">
Enlever la signature
<button
class="btn btn-misc"
:hidden="!userSignatureZones"
@click="undo_sign"
>
{{ $t("choose_another_signature") }}
</button>
</div>
<div class="col-6">
<button class="btn float-end btn-delete" :disabled="!userSignatureZones" @click="undo_sign">
Refuser de signer
<button class="btn float-end btn-delete" @click="undo_sign">
{{ $t("cancel_signing") }}
</button>
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
<button class="btn btn-light" @click="turn_signature(-1)">Zone de signature précédente</button>
<div class="col-4 gap-2 d-grid">
<button class="btn btn-light" @click="turn_signature(-1)">
{{ $t("last_sign_zone") }}
</button>
</div>
<div class="col-4">
<button class="btn btn-light" @click="turn_signature(1)">Zone de signature suivante</button>
<div class="col-4 gap-2 d-grid">
<button class="btn btn-light" @click="turn_signature(1)">
{{ $t("next_sign_zone") }}
</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 {{ page }} / {{ pageCount }}
<button class="btn btn-light" :disabled="page >= pageCount" @click="turn_page(1)">❯</button>
<div class="col-3 text-center">
<button
class="btn btn-light"
:disabled="page <= 1"
@click="turn_page(-1)"
>
❮
</button>
page {{ page }} / {{ pageCount }}
<button
class="btn btn-light"
:disabled="page >= pageCount"
@click="turn_page(1)"
>
❯
</button>
</div>
</div>
</div>
<div class="col-12">
<canvas id="canvas" style="width:100%"></canvas>
<div class="col-12 text-center">
<canvas class="m-auto" id="canvas"></canvas>
</div>
</template>
@ -73,15 +102,7 @@ import {
pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs";
// export const i18n = {
// messages: {
// fr: {
// upload_a_document: "Téléversez un document",
// },
// },
// };
const modalOpened: Ref<boolean> = ref(false);
const modalOpen: Ref<boolean> = ref(false);
const page: Ref<number> = ref(1);
const pageCount: Ref<number> = ref(0);
const zone: Ref<number> = ref(0);
@ -95,17 +116,6 @@ declare global {
}
}
interface AddressModalState {
show_modal: boolean,
}
const state: AddressModalState = reactive({show_modal: false});
const open = (): void => {
state.show_modal = true;
}
const close = (): void => {
state.show_modal = false;
}
const signature = window.signature;
const urlInfo = build_download_info_link(signature.storedObject.filename);
@ -188,7 +198,10 @@ const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) =>
) {
const ctx = canvas.getContext("2d");
if (ctx) {
draw_zone(z, ctx, canvas.width, canvas.height, true);
setTimeout(
() => draw_zone(z, ctx, canvas.width, canvas.height, true),
200
);
}
userSignatureZones.value = z;
}
@ -215,7 +228,6 @@ const turn_signature = async (upOrDown: number) => {
}
};
const draw_zone = (
zone: SignatureZone,
ctx: CanvasRenderingContext2D,
@ -260,10 +272,6 @@ const add_zones = (page: number) => {
};
const confirm_sign = () => {
open()
};
const post_zone = () => {
console.log(userSignatureZones.value);
//TODO POST userSignatureZones to backend
};

21
src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
View File

@ -1,12 +1,27 @@
import { createApp } from "vue";
//import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
// @ts-ignore
import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
import App from "./App.vue";
// const i18n = _createI18n(appMessages);
const appMessages = {
fr: {
yes: 'Oui',
are_you_sure: 'Êtes-vous sûr·e?',
you_are_going_to_sign: 'Vous allez signer le document',
signature_confirmation: 'Confirmation de la signature',
sign: 'Signer',
choose_another_signature: 'Choisir une autre signature',
cancel_signing: 'Refuser de signer',
last_sign_zone: 'Zone de signature précédente',
next_sign_zone: 'Zone de signature suivante',
}
}
const i18n = _createI18n(appMessages);
const app = createApp({
template: `<app></app>`,
})
// .use(i18n)
.use(i18n)
.component("app", App)
.mount("#document-signature");