feat/wordpress-page

build/WooCommerce.js

@@ -0,0 +1,26 @@
+import { config } from "./config";
+class WooCommerce {
+    async get({ endpoint, params = {}, version = 3 }) {
+        var queryString = Object.keys(params)
+            .map((key) => key + "=" + params[key])
+            .join("&");
+        const response = await fetch(
+            `${config.wordpress.url}/wp-json/wc/v${version}/${endpoint}?${queryString}`,
+            {
+                method: "GET",
+                headers: {
+                    Authorization: `Bearer ${localStorage.getItem("token")}`,
+                },
+            }
+        );
+        if (response.status === 403 || response.status === 404)
+            throw new Error({ response });
+        // Get response headers
+        let headers = {};
+        for (let entry of response.headers.entries()) {
+            headers[entry[0]] = entry[1];
+        }
+        return { data: await response.json(), headers };
+    }
+}
+export const wooCommerce = new WooCommerce();

build/assets.js

@@ -0,0 +1,20 @@
+import { svg } from "lit-html";
+export const wordpress = svg`
+    <g fill="#464342">
+        <path
+            d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z"
+        />
+        <path
+            d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z"
+        />
+        <path
+            d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.141-.225-.269-.464-.374-.724z"
+        />
+        <path
+            d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z"
+        />
+        <path
+            d="m61.262 0c-33.779 0-61.262 27.481-61.262 61.26 0 33.783 27.483 61.263 61.262 61.263 33.778 0 61.265-27.48 61.265-61.263-.001-33.779-27.487-61.26-61.265-61.26zm0 119.715c-32.23 0-58.453-26.223-58.453-58.455 0-32.23 26.222-58.451 58.453-58.451 32.229 0 58.45 26.221 58.45 58.451 0 32.232-26.221 58.455-58.45 58.455z"
+        />
+    </g>
+`;

build/base-elements/BaseElement.js

@@ -0,0 +1,92 @@
+import { Router } from "@vaadin/router";
+import "@vaadin/vaadin-notification";
+import { css, html, LitElement } from "lit-element";
+import { render } from "lit-html";
+import { baseStyle } from "../base-style";
+import { navigate } from "../utilities";
+export class BaseElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._notification = this._showNotification;
+    }
+    static get styles() {
+        return [
+            baseStyle,
+            css`
+                :host {
+                    display: block;
+                    height: 100%;
+                    box-sizing: border-box;
+                    padding: 1rem;
+                }
+
+                :host([hidden]) {
+                    display: none;
+                }
+
+                :host([pending]) > * {
+                    display: none;
+                }
+            `,
+        ];
+    }
+    updated(changedProperties) {
+        // Add pending message
+        if (changedProperties.has("pending")) {
+            if (this.pending) {
+                this._addPendingMessage();
+            }
+        }
+    }
+    _back() {
+        history.back();
+    }
+    _createDialog({ renderer }) {
+        const dialog = document.createElement("vaadin-dialog");
+        Object.assign(dialog, {
+            opened: true,
+            renderer,
+        });
+        this.shadowRoot.appendChild(dialog);
+        dialog.addEventListener("opened-changed", (e) => {
+            if (!e.detail.value) this.shadowRoot.removeChild(dialog);
+        });
+    }
+    _createLoadingElement() {
+        const el = document.createElement("span");
+        Object.assign(el, { id: "loading", textContent: "Loading..." });
+        return el;
+    }
+    _navigate(e) {
+        Router.go(e.target.getAttribute("href"));
+    }
+    _showNotification({ duration = 5000, message, theme }) {
+        const el = document.createElement("vaadin-notification");
+        theme && el.setAttribute("theme", theme);
+        Object.assign(el, {
+            duration,
+            position: "middle",
+            renderer: (root) => render(html`${message}`, root),
+        });
+        this.shadowRoot.appendChild(el);
+        el.open();
+    }
+    _addPendingMessage() {
+        const el = document.createElement("span");
+        el.id = "pending-message";
+        el.textContent = "Loading...";
+        this.shadowRoot.appendChild(el);
+    }
+    onBeforeEnter(location, commands, router) {
+        if (!this.isAuthorized()) {
+            console.log("Not authorized");
+            console.log(commands.redirect);
+            // commands.redirect("/login");
+            navigate("/login");
+        }
+    }
+    isAuthorized() {
+        console.log("Checking authorization");
+        return localStorage.getItem("token") !== null;
+    }
+}

build/base-elements/GridElement.js

@@ -0,0 +1,109 @@
+var __decorate =
+    (this && this.__decorate) ||
+    function (decorators, target, key, desc) {
+        var c = arguments.length,
+            r =
+                c < 3
+                    ? target
+                    : desc === null
+                    ? (desc = Object.getOwnPropertyDescriptor(target, key))
+                    : desc,
+            d;
+        if (
+            typeof Reflect === "object" &&
+            typeof Reflect.decorate === "function"
+        )
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if ((d = decorators[i]))
+                    r =
+                        (c < 3
+                            ? d(r)
+                            : c > 3
+                            ? d(target, key, r)
+                            : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+import { css, html, query } from "lit-element";
+import { BaseElement } from "./BaseElement";
+import { render } from "lit-html";
+export class GridElement extends BaseElement {
+    constructor() {
+        super();
+        this.params = {};
+        this._boundActionColumnRenderer = this._actionColumnRenderer.bind(this);
+    }
+    get _props() {
+        return {};
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            css`
+                :host {
+                    flex: 1;
+                }
+
+                vaadin-grid {
+                    height: 100%;
+                }
+            `,
+        ];
+    }
+    firstUpdated() {
+        if (!this.items) this.grid.dataProvider = this.dataProvider.bind(this);
+        this._registerActiveItemChangedListener();
+    }
+    _actionColumnRenderer(root, column, rowData) {
+        // This could be cleaned up.
+        const path = rowData.item._getViewPath
+            ? rowData.item._getViewPath(this)
+            : `/${this._baseRoute}/view/${rowData.item.id}`;
+        render(
+            html`
+                <vaadin-button @click=${this._navigate} href=${path}
+                    >View</vaadin-button
+                >
+            `,
+            root
+        );
+    }
+    _registerActiveItemChangedListener() {
+        this.grid.addEventListener("active-item-changed", (event) => {
+            const item = event.detail.value;
+            // @deprecated
+            this._selectedItem = item;
+            this.selectedItem = item;
+            this.grid.selectedItems = item ? [item] : [];
+        });
+    }
+    // filters don't work
+    async dataProvider(params, callback) {
+        const filter = Object.assign({}, this.filter);
+        params.filters.map((_filter) => {
+            filter[_filter.path] = _filter.value;
+        });
+        let order = "desc";
+        let orderby = "id";
+        params.sortOrders.map((_sortOrder) => {
+            orderby = _sortOrder.path;
+            order = _sortOrder.direction;
+        });
+        const list = await new this._collectionType(
+            Object.assign(Object.assign({}, this._props), {
+                params: Object.assign(
+                    Object.assign(Object.assign({}, this.params), filter),
+                    {
+                        order,
+                        // orderby,
+                        page: ++params.page,
+                        per_page: params.pageSize,
+                    }
+                ),
+            })
+        ).get();
+        callback(list.getItems(), list.getTotal());
+    }
+}
+__decorate([query("vaadin-grid")], GridElement.prototype, "grid", void 0);

build/base-elements/ViewElement.js

@@ -0,0 +1,106 @@
+var __decorate =
+    (this && this.__decorate) ||
+    function (decorators, target, key, desc) {
+        var c = arguments.length,
+            r =
+                c < 3
+                    ? target
+                    : desc === null
+                    ? (desc = Object.getOwnPropertyDescriptor(target, key))
+                    : desc,
+            d;
+        if (
+            typeof Reflect === "object" &&
+            typeof Reflect.decorate === "function"
+        )
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if ((d = decorators[i]))
+                    r =
+                        (c < 3
+                            ? d(r)
+                            : c > 3
+                            ? d(target, key, r)
+                            : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+import "@vaadin/vaadin-button";
+import "@vaadin/vaadin-dialog";
+import "@vaadin/vaadin-form-layout";
+import { css, property } from "lit-element";
+import { BaseElement } from "./BaseElement";
+export class ViewElement extends BaseElement {
+    constructor() {
+        super(...arguments);
+        this._getDisabled = false;
+        this.pending = true;
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            css`
+                :host {
+                    height: 100%;
+                }
+
+                :host([pending]) > * {
+                    display: none !important;
+                }
+
+                :host([pending]) > #pending-message {
+                    display: flex !important;
+                    justify-content: center;
+                    align-items: center;
+                    height: 100%;
+                }
+
+                :host(:not([pending])) #pending-message {
+                    display: none;
+                }
+            `,
+        ];
+    }
+    async updated(changedProperties) {
+        var _a, _b;
+        super.updated(changedProperties);
+        if (
+            changedProperties.has("item") &&
+            (changedProperties.get("item") || {}).id !==
+                ((_a = this.item) === null || _a === void 0 ? void 0 : _a.id)
+        ) {
+            if (
+                !this._getDisabled &&
+                !((_b = this.item) === null || _b === void 0
+                    ? void 0
+                    : _b._getCompleted)
+            ) {
+                this.item = await this.getItem();
+            }
+            this.pending = false;
+        }
+    }
+    firstUpdated() {
+        if (!this.item || !this.item._getCompleted) {
+            if (this.location) {
+                this.item = Object.assign({}, this.location.params);
+            }
+        }
+    }
+    async getItem() {
+        return await new this._itemType(this.item).get();
+    }
+}
+__decorate(
+    [property({ type: Boolean, attribute: "get-disabled" })],
+    ViewElement.prototype,
+    "_getDisabled",
+    void 0
+);
+__decorate([property({ type: Object })], ViewElement.prototype, "item", void 0);
+__decorate(
+    [property({ type: Boolean, reflect: true })],
+    ViewElement.prototype,
+    "pending",
+    void 0
+);