kempo-products 0.1.2 → 0.1.4

package/README.md

@@ -264,3 +264,7 @@ DATABASE_URL=postgresql://kempo:kempo@localhost:5443/kempo_products_test npm tes
 ```
 
 The database tests skip themselves when no database is reachable, and refuse to run unless its name ends in `_test`, because they empty the tables. **A green run with `SKIPPED` did not test the database.**
+
+## Dashboard widget
+
+Adds a **Products** widget to the kempo admin dashboard showing catalog size, recorded purchases and the latest products, with a **New product** button. It is declared in `widgets` in `kempo-config.json` and registered when the extension is installed or updated; people only see it if they hold its permission, and can hide, reorder or resize it from the dashboard's Customize dialog. Needs a kempo with the dashboard (see kempo's `docs/dashboard.md`); on an older kempo the entry is ignored.

package/kempo-config.json

@@ -3,6 +3,22 @@
   "git": "https://github.com/dustinpoissant/kempo-products",
   "public-scope": "products",
   "schema": "./server/db/schema.js",
+  "widgets": [
+    {
+      "key": "catalog",
+      "title": "Products",
+      "description": "How many products there are, how many purchases were recorded, and the latest products.",
+      "icon": "label",
+      "element": "k-prod-widget",
+      "module": "/products/components/ProductsWidget.js",
+      "defaultWidth": 2,
+      "defaultHeight": 2,
+      "minWidth": 1,
+      "minHeight": 2,
+      "permission": "products:read",
+      "priority": 101
+    }
+  ],
   "permissions": [
     {
       "name": "products:read",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-products",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A product catalog for kempo cms: browse, filter and inquire about products, with no checkout required",
   "license": "MIT",
   "author": "Dustin Poissant",
@@ -15,7 +15,8 @@
   "type": "module",
   "main": "sdk.js",
   "scripts": {
-    "test": "node --test --test-concurrency=1",
+    "test": "node scripts/run-tests.js unit node --test --test-concurrency=1",
+    "test:integration": "node scripts/run-tests.js integration node --test --test-concurrency=1",
     "link:local": "npm install ../kempo ../kempo-server ../kempo-ui --no-save --no-legacy-peer-deps --force",
     "docs:build": "node scripts/build-docs.js",
     "docs:dev": "npx kempo-server --root docs --port 4049"
@@ -52,6 +53,7 @@
     }
   },
   "devDependencies": {
+    "@electric-sql/pglite": "^0.5.9",
     "drizzle-kit": "^0.31.10",
     "postgres": "^3.4.9",
     "highlight.js": "^11.11.1"

package/public/components/ProductsWidget.js

@@ -0,0 +1,55 @@
+import DashboardWidget from '/kempo/components/DashboardWidget.js';
+import { html, nothing } from '/kempo-ui/lit-all.min.js';
+import { getProducts, getPurchases } from '/products/sdk.js';
+const stat = (value, label, classes = '') => html`<div class="flex"><div class="h2 m0 ${classes}">${value}</div><div class="small tc-muted">${label}</div></div>`;
+
+/*
+  The catalog size, recorded purchases and the latest products.
+*/
+export default class ProductsWidget extends DashboardWidget {
+  static properties = {
+    ...DashboardWidget.properties,
+    total: { state: true },
+    purchases: { state: true },
+    recent: { state: true }
+  };
+
+  constructor(){
+    super();
+    this.total = 0;
+    this.purchases = 0;
+    this.recent = [];
+    this.cta = { label: 'New product', icon: 'add', href: '/admin/extension/kempo-products/new', permission: 'products:create' };
+  }
+
+  /*
+    Public Methods
+  */
+
+  load = async () => {
+    const [products, purchases] = await Promise.all([
+      this.unwrap(getProducts({ limit: 9 })),
+      this.unwrap(getPurchases({ limit: 1 }))
+    ]);
+    this.total = products.total;
+    this.recent = products.items;
+    this.purchases = purchases.total;
+  };
+
+  /*
+    Rendering
+  */
+
+  renderContent(){
+    if(!this.total && !this.purchases) return html`<p class="tc-muted">No products yet.</p>`;
+    return html`
+      <div class="d-f mb">${stat(this.total, 'Products')}${stat(this.purchases, 'Purchases')}</div>
+      ${this.recent.length ? html`<div class="small tc-muted mbq">Latest</div>` : nothing}
+      ${this.recent.slice(0, this.height * 2).map(product => html`
+        <div class="d-f pyq bb"><span class="flex">${product.name}</span><span class="small tc-muted">${product.status}</span></div>
+      `)}
+    `;
+  }
+}
+
+customElements.define('k-prod-widget', ProductsWidget);