EnvelopeGenerator/EnvelopeGenerator.Web/wwwroot/js/app.js

const ActionType = {
    Created: 0,
    Saved: 1,
    Sent: 2,
    EmailSent: 3,
    Delivered: 4,
    Seen: 5,
    Signed: 6,
    Rejected: 7
}

class App {
    constructor(container, envelopeKey) {
        this.container = container;
        this.envelopeKey = envelopeKey;

        // Initialize classes
        console.debug("Initializing classes..")
        this.UI = new UI();
        this.Network = new Network();
        this.Annotation = new Annotation();

        this.Instance = null;
        this.currentDocument = null;
        this.currentReceiver = null;
    }

    // This function will be called in the ShowEnvelope.razor page
    // and will trigger loading of the Editor Interface
    async init() {

        // Load the envelope from the database
        console.debug("Loading envelope from database..")
        const envelopeObject = await this.Network.getEnvelope(this.envelopeKey);
        this.currentDocument = envelopeObject.envelope.documents[0];
        this.currentReceiver = envelopeObject.receiver;

        console.log(envelopeObject)

        // Load the document from the filestore
        console.debug("Loading document from filestore")
        let arrayBuffer
        try {
            arrayBuffer = await this.Network.getDocument(this.envelopeKey, this.currentDocument.id);
        } catch (e) {
            console.error(e)
        }

        // Load PSPDFKit
        console.debug("Loading PSPDFKit..")
        this.Instance = await this.UI.loadPSPDFKit(arrayBuffer, this.container)
        this.UI.configurePSPDFKit(this.Instance, this.handleClick.bind(this))

        this.Instance.addEventListener("annotations.load", this.handleAnnotationsLoad)
        this.Instance.addEventListener("annotations.change", this.handleAnnotationsChange)
        this.Instance.addEventListener("annotations.create", this.handleAnnotationsCreate.bind(this))

        // Load annotations into PSPDFKit
        console.debug("Loading annotations..")

        try {
            const annotations = this.Annotation.createAnnotations(this.currentDocument)
            const createdAnnotations = await this.Instance.create(annotations)

            await this.Network.postHistory(this.envelopeKey, ActionType.Seen)
        } catch (e) {
            console.error(e)
        }
        
    }

    handleAnnotationsLoad(loadedAnnotations) {
        console.log("annotations loaded", loadedAnnotations.toJS());
    }

    handleAnnotationsChange() {}

    async handleAnnotationsCreate(createdAnnotations) {
        const annotation = createdAnnotations.toJS()[0];
        const isFormField = !!annotation.formFieldName;
        const isSignature = !!annotation.isSignature;

        if (isFormField === false && isSignature === true) {
            await this.Annotation.createFrameAnnotation(annotation, this.currentReceiver)                
        }    
    }

    async handleClick(eventType) {
        let result = false;

        switch (eventType) {
            case "RESET":
                result = await this.handleReset(null)

                if (result == true) {
                    alert("Dokument zurückgesetzt!");
                } else {
                    alert("Fehler beim Zurücksetzen des Dokuments!")
                }

                break;

            case "FINISH":
                result = await this.handleFinish(null)

                if (result == true) {
                    // TODO: Redirect to success page
                    alert("Dokument erfolgreich signiert!")
                } else {
                    alert("Fehler beim Abschließen des Dokuments!")
                }

                break;
        }
    }

    async handleFinish(event) {

        // Save changes before doing anything
        try {
            await this.Instance.save();
        } catch (e) {
            console.error(e);
            return false;
        }

        // Export annotation data and save to database
        try {
            const json = await this.Instance.exportInstantJSON()
            const postEnvelopeResult = await this.Network.postEnvelope(this.envelopeKey, this.currentDocument.id, JSON.stringify(json))

            if (postEnvelopeResult === false) {
                return false;
            }

            // Redirect to success page after saving to database
            window.location.href = `/EnvelopeKey/${this.envelopeKey}/Success`

        } catch (e) {
            console.error(e);
            return false;
        }


        return true;

    }

     async handleReset(event) {
        if (confirm("Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?")) {
            const result = this.Annotation.deleteAnnotations(this.Instance)
            return true;
        } else {
            return true;
        }
    }
}