All files / custom-element/mixins/data SubmitableMixin.ts

46.43% Statements 13/28
33.33% Branches 4/12
45.45% Functions 5/11
46.43% Lines 13/28

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 1111x 1x   1x   1x   1x       9x                                       9x                       4x   4x   4x               2x   1x                                                                                                         1x
import { html } from "../../../renderer/html";
import Fetcher from "../../../utils/data/transfer/Fetcher";
import { ErrorResponse } from "../../../utils/data/transfer/interfaces";
import { Callback, CustomElementPropertyMetadata, CustomElementStateMetadata } from "../../interfaces";
 
const SubmitableMixin = Base =>
 
    class Submitable extends Base {
 
        static get properties(): Record<string, CustomElementPropertyMetadata> {
 
            return {
 
                /**
                 * The URL to post the data to
                 */
                submitUrl: {
                    attribute: 'submit-url',
                    type: String,
                    required: true
                },
 
                method: {
                    type: [String, Callback],
                    options: ['post', 'put']
                }
            };
        }
 
        static get state(): Record<string, CustomElementStateMetadata> {
 
            return {
 
                submitting: {
                    value: false
                }
            };
        }
 
        renderSubmitting() {
 
            const {
                submitting
            } = this;
 
            Eif (submitting === false) {
 
                return null;
            }
 
            return html`<span key="submitting-overlay">Submiting ...</span>`;
        }
 
        connectedCallback() {
 
            super.connectedCallback?.();
 
            this._submitFetcher = new Fetcher({
                onData: data => this.handleSubmitData(data),
                onError: error => this.handleSubmitError(error)
            });
        }
 
        submit() {
 
            this.error = undefined; // Clear any previous error
 
            this.submitting = true;
 
            const data = this.getSubmitData(); // Overriden by the derived classes
 
            this._submitFetcher.fetch({
                url: this.submitUrl,
                method: this.getMethod(data),
                data
            });
        }
 
        getMethod(data: Record<string, any>) {
 
            const {
                method
            } = this;
 
            if (method !== undefined) {
 
                return typeof method === 'function' ?
                    method() :
                    method; // The user set an specific method
            }
 
            // Use conventions
            return data.id !== undefined ? 'put' : 'post';
        }
 
        handleSubmitData(data: Record<string, any>) {
 
            this.submitting = false;
 
            this.handleSubmitResponse(data);
        }
 
        handleSubmitError(error: ErrorResponse) {
 
            this.submitting = false;
 
            this.error = error;
        }
    }
 
export default SubmitableMixin;