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

40% Statements 10/25
40% Branches 4/10
40% Functions 4/10
40% Lines 10/25

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 1031x 1x       1x         1x       6x                                               12x                                       2x   1x   1x                                                                               1x
import { html } from "../../../renderer/html";
import Fetcher from "../../../utils/data/transfer/Fetcher";
import { ErrorResponse } from "../../../utils/data/transfer/interfaces";
import { CustomElementPropertyMetadata, CustomElementStateMetadata } from "../../interfaces";
 
const LoadableMixin = Base =>
 
    /**
     * Implements a mixin that loads a single record
     */
    class Loadable extends Base {
 
        static get properties(): Record<string, CustomElementPropertyMetadata> {
 
            return {
 
                /**
                 * The URL to retrieve the data from
                 */
                loadUrl: {
                    attribute: 'load-url',
                    type: String,
                    //required: true Loading the form or other component might be optional
                },
 
                /**
                 * Whether to load the data for the component when the component is connected
                 */
                autoLoad: {
                    attribute: 'auto-load',
                    type: Boolean,
                    value: true
                }
            };
        }
 
        static get state(): Record<string, CustomElementStateMetadata> {
 
            return {
 
                loading: {
                    value: false
                }
            };
        }
 
        renderLoading() {
 
            if (this.loading === false) {
 
                return null;
            }
 
            return html`<span key="loading-overlay">Loading ...</span>`;
        }
 
        connectedCallback() {
 
            super.connectedCallback?.();
 
            Eif (this.loadUrl === undefined) {
 
                return;
            }
 
            this._loadFetcher = new Fetcher({
                onData: data => this.handleLoadData(data),
                onError: error => this.handleLoadError(error)
            });
 
            if (this.autoLoad === true) { // Wait until all the fields were added
 
                this.load();
            }
        }
 
        load() {
 
            this.error = undefined; // Clear any previous error
 
            this.loading = true;
 
            this._loadFetcher.fetch({
                url: this.loadUrl
            });
        }
 
        handleLoadData(data: Record<string, any>) {
 
            this.loading = false;
 
            this.handleLoadedData(data);
        }
 
        handleLoadError(error: ErrorResponse) {
 
            this.loading = false;
 
            this.error = error;
        }
    }
 
export default LoadableMixin;