collective-webcomponents/dist/collection/components/collective-products-chooser/collective-products-chooser.js

Stencil Component Starter

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import debounce from "lodash-es/debounce";
import pull from "lodash-es/pull";
export class CollectiveProductsChooser {
    constructor() {
        this.showModal = false;
        this.searchText = "";
        this.products = [];
        this.loading = false;
        this.throttledUpdateSearch = debounce(this.updateSearch.bind(this), 500);
    }
    searchTextChanged() {
        this.throttledUpdateSearch();
    }
    updateSearch() {
        return __awaiter(this, void 0, void 0, function* () {
            this.loading = true;
            // TODO: how get pid hmmm cookie?
            try {
                const response = yield fetch(`https://api.shopstyle.com/api/v2/products?pid=shopstyle&fts=${encodeURIComponent(this.searchText)}&showCommission=true&view=angular&mpid=uid4289-41036017-65&limit=40`);
                const { products } = yield response.json();
                this.products = products;
            }
            finally {
                this.loading = false;
            }
        });
    }
    componentDidLoad() {
        this.updateSearch();
    }
    toggleProduct(product) {
        if (this.isProductSelected(product)) {
            this.change.emit(pull(this.value.slice(), String(product.id)));
        }
        else {
            this.change.emit((this.value || []).concat([String(product.id)]));
        }
    }
    isProductSelected(product) {
        return this.value && this.value.indexOf(String(product.id)) > -1;
    }
    render() {
        return (h("div", { style: {
                display: "flex",
                flexDirection: "column",
                alignItems: "stretch",
                backgroundColor: "#f6f6f6",
                height: "100%",
                maxWidth: "100%",
                width: "700px",
                flexGrow: "1"
            } },
            h("ion-searchbar", { style: { flexShrink: "0", paddingLeft: "2px", paddingRight: "2px" }, value: this.searchText, onIonInput: ev => {
                    const text = ev.target.value;
                    this.searchText = text;
                } }),
            h("div", { class: "products-container", style: {
                    flexGrow: "1",
                    overflow: "auto",
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "stretch"
                } }, this.loading ? (h("ion-spinner", { color: "primary", style: { margin: "auto" } })) : (h("div", { class: "inner-products-container", style: {
                    padding: "10px 2px",
                    display: "flex",
                    flexWrap: "wrap",
                    justifyContent: "center"
                } }, this.products.map(product => (h("collective-product-cell", { style: {
                    opacity: this.isProductSelected(product) ? "0.5" : "1"
                }, onClick: () => this.toggleProduct(product), product: product }))))))));
    }
    static get is() { return "collective-products-chooser"; }
    static get properties() { return {
        "element": {
            "elementRef": true
        },
        "loading": {
            "state": true
        },
        "products": {
            "state": true
        },
        "searchText": {
            "state": true,
            "watchCallbacks": ["searchTextChanged"]
        },
        "showModal": {
            "state": true
        },
        "value": {
            "type": "Any",
            "attr": "value"
        }
    }; }
    static get events() { return [{
            "name": "change",
            "method": "change",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get style() { return "/**style-placeholder:collective-products-chooser:**/"; }
}