Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-28 21:16:13 +00:00
Code Issues Actions Projects Releases Wiki Activity

Signature app: rename userSignatureZones, remove zoneIndex, sign on click

Browse Source
This commit is contained in:
nobohan 2024-09-03 10:28:41 +02:00
parent f8d95384ea
commit 3a959b7044
1 changed files with 49 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,7 +33,7 @@
>
<div class="col-4 gap-2 d-grid">
<button
:disabled="zone < 1"
:disabled="userSignatureZone === null || userSignatureZone?.index < 1"
class="btn btn-light btn-sm"
@click="turnSignature(-1)"
>
@ -41,7 +41,11 @@
</button>
</div>
<div class="col-4 gap-2 d-grid">
<button class="btn btn-light btn-sm" @click="turnSignature(1)">
<button
:disabled="userSignatureZone?.index >= signature.zones.length - 1"
class="btn btn-light btn-sm"
@click="turnSignature(1)"
>
{{ $t("next_sign_zone") }}
</button>
</div>
@ -80,8 +84,8 @@
<div class="col-6">
<button
class="btn btn-action me-2"
:disabled="!userSignatureZones"
@click="modalOpen = true"
:disabled="!userSignatureZone"
@click="sign"
>
{{ $t("sign") }}
</button>
@ -89,7 +93,7 @@
<div class="col-6 d-flex justify-content-end">
<button
class="btn btn-misc me-2"
:hidden="!userSignatureZones"
:hidden="!userSignatureZone"
@click="undoSign"
v-if="signature.zones.length > 1"
>
@ -97,7 +101,7 @@
</button>
<button
class="btn btn-misc me-2"
:hidden="!userSignatureZones"
:hidden="!userSignatureZone"
@click="undoSign"
v-else
>
@ -143,8 +147,7 @@ const loading: Ref<boolean> = ref(false);
const signedState: Ref<SignedState> = ref("pending");
const page: Ref<number> = ref(1);
const pageCount: Ref<number> = ref(0);
const zone: Ref<number> = ref(0);
let userSignatureZones: Ref<null | SignatureZone> = ref(null);
let userSignatureZone: Ref<null | SignatureZone> = ref(null);
let pdfSource: Ref<string> = ref("");
let pdf = {} as PDFDocumentProxy;
@ -233,6 +236,15 @@ const hitSignature = (
);
};
const selectZone = (z: SignatureZone, canvas: HTMLCanvasElement) => {
userSignatureZone.value = z;
const ctx = canvas.getContext("2d");
if (ctx) {
setPage(page.value);
setTimeout(() => drawZone(z, ctx, canvas.width, canvas.height), 200);
}
};
const canvasClick = (e: PointerEvent, canvas: HTMLCanvasElement) =>
signature.zones
.filter((z) => z.PDFPage.index + 1 === page.value)
@ -240,34 +252,39 @@ const canvasClick = (e: PointerEvent, canvas: HTMLCanvasElement) =>
if (
hitSignature(z, [e.offsetX, e.offsetY], canvas.width, canvas.height)
) {
const ctx = canvas.getContext("2d");
if (ctx) {
setPage(page.value);
setTimeout(() => drawZone(z, ctx, canvas.width, canvas.height), 200);
if (userSignatureZone.value === null) {
selectZone(z, canvas);
} else {
if (userSignatureZone.value.index === z.index) {
sign();
}
}
userSignatureZones.value = z;
}
});
const turnPage = async (upOrDown: number) => {
userSignatureZones.value = null;
userSignatureZone.value = null;
page.value = page.value + upOrDown;
await setPage(page.value);
setTimeout(() => addZones(page.value), 200);
};
const turnSignature = async (upOrDown: number) => {
userSignatureZones.value = null;
if (zone.value < signature.zones.length - 1) {
zone.value = zone.value + upOrDown;
} else {
zone.value = 0;
let zoneIndex = userSignatureZone.value?.index ?? -1;
if (zoneIndex < -1) {
zoneIndex = -1;
}
let currentZone = signature.zones[zone.value];
if (zoneIndex < signature.zones.length) {
zoneIndex = zoneIndex + upOrDown;
} else {
zoneIndex = 0;
}
let currentZone = signature.zones[zoneIndex];
if (currentZone) {
page.value = currentZone.PDFPage.index + 1;
await setPage(page.value);
setTimeout(() => addZones(page.value), 200);
userSignatureZone.value = currentZone;
const canvas = document.querySelectorAll("canvas")[0];
selectZone(currentZone, canvas);
}
};
@ -286,7 +303,9 @@ const drawZone = (
const scaleYToCanvas = (y: number) =>
Math.round(zone.PDFPage.height - scaleHeightToCanvas(y));
ctx.strokeStyle =
userSignatureZones.value === null ? unselectedBlue : selectedBlue;
userSignatureZone.value?.index === zone.index
? selectedBlue
: unselectedBlue;
ctx.lineWidth = 2;
ctx.lineJoin = "bevel";
ctx.strokeRect(
@ -300,7 +319,7 @@ const drawZone = (
ctx.fillStyle = "black";
const xText = scaleXToCanvas(zone.x) + scaleXToCanvas(zone.width) / 2;
const yText = scaleYToCanvas(zone.y) + scaleHeightToCanvas(zone.height) / 2;
if (userSignatureZones.value !== null) {
if (userSignatureZone.value?.index === zone.index) {
ctx.fillStyle = selectedBlue;
ctx.fillText("Signer ici", xText, yText);
} else {
@ -379,12 +398,14 @@ const checkForReady = () => {
}
};
const sign = () => (modalOpen.value = true);
const confirmSign = () => {
loading.value = true;
const url = `/api/1.0/document/workflow/${signature.id}/signature-request`;
const body = {
storedObject: signature.storedObject,
zone: userSignatureZones.value,
zone: userSignatureZone.value,
};
makeFetch("POST", url, body)
.then((r) => {
@ -402,12 +423,12 @@ const confirmSign = () => {
const undoSign = async () => {
// const canvas = document.querySelectorAll("canvas")[0];
// const ctx = canvas.getContext("2d");
// if (ctx && userSignatureZones.value) {
// //drawZone(userSignatureZones.value, ctx, canvas.width, canvas.height);
// if (ctx && userSignatureZone.value) {
// //drawZone(userSignatureZone.value, ctx, canvas.width, canvas.height);
// }
await setPage(page.value);
setTimeout(() => addZones(page.value), 200);
userSignatureZones.value = null;
userSignatureZone.value = null;
};
downloadAndOpen();