@things-factory/board-ui 10.1.41 → 10.1.42

package/dist-client/utils/board-meta.d.ts

@@ -0,0 +1,10 @@
+/** "3 days ago", in the current UI language; empty when there is no date. */
+export declare function timeAgo(value?: string | number | Date): string;
+/**
+ * The one line under a board's name in the catalog: which release it is, and how fresh.
+ * Both are what an operator picks a board by, once the picture has told them what it is.
+ */
+export declare function boardMeta(board: {
+    version?: number;
+    updatedAt?: string;
+}): string;

package/dist-client/utils/board-meta.js

@@ -0,0 +1,34 @@
+import { i18next } from '@operato/i18n';
+const UNITS = [
+    ['year', 365 * 24 * 60 * 60 * 1000],
+    ['month', 30 * 24 * 60 * 60 * 1000],
+    ['day', 24 * 60 * 60 * 1000],
+    ['hour', 60 * 60 * 1000],
+    ['minute', 60 * 1000]
+];
+/** "3 days ago", in the current UI language; empty when there is no date. */
+export function timeAgo(value) {
+    if (!value)
+        return '';
+    const then = new Date(value).getTime();
+    if (Number.isNaN(then))
+        return '';
+    const diff = then - Date.now();
+    const rtf = new Intl.RelativeTimeFormat(i18next.language || 'en', { numeric: 'auto' });
+    for (const [unit, ms] of UNITS) {
+        if (Math.abs(diff) >= ms) {
+            return rtf.format(Math.round(diff / ms), unit);
+        }
+    }
+    return rtf.format(0, 'minute');
+}
+/**
+ * The one line under a board's name in the catalog: which release it is, and how fresh.
+ * Both are what an operator picks a board by, once the picture has told them what it is.
+ */
+export function boardMeta(board) {
+    const version = `v${board.version ?? 0}`;
+    const ago = timeAgo(board.updatedAt);
+    return ago ? `${version} · ${ago}` : version;
+}
+//# sourceMappingURL=board-meta.js.map

package/dist-client/utils/board-meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-meta.js","sourceRoot":"","sources":["../../client/utils/board-meta.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,MAAM,KAAK,GAA4C;IACrD,CAAC,MAAM,EAAE,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IACnC,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IACnC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAC5B,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IACxB,CAAC,QAAQ,EAAE,EAAE,GAAG,IAAI,CAAC;CACtB,CAAA;AAED,6EAA6E;AAC7E,MAAM,UAAU,OAAO,CAAC,KAA8B;IACpD,IAAI,CAAC,KAAK;QAAE,OAAO,EAAE,CAAA;IAErB,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,CAAA;IACtC,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC;QAAE,OAAO,EAAE,CAAA;IAEjC,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAA;IAC9B,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,QAAQ,IAAI,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAA;IAEtF,KAAK,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;YACzB,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,CAAA;QAChD,CAAC;IACH,CAAC;IAED,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAA;AAChC,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,KAA+C;IACvE,MAAM,OAAO,GAAG,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,EAAE,CAAA;IACxC,MAAM,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAEpC,OAAO,GAAG,CAAC,CAAC,CAAC,GAAG,OAAO,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO,CAAA;AAC9C,CAAC","sourcesContent":["import { i18next } from '@operato/i18n'\n\nconst UNITS: [Intl.RelativeTimeFormatUnit, number][] = [\n  ['year', 365 * 24 * 60 * 60 * 1000],\n  ['month', 30 * 24 * 60 * 60 * 1000],\n  ['day', 24 * 60 * 60 * 1000],\n  ['hour', 60 * 60 * 1000],\n  ['minute', 60 * 1000]\n]\n\n/** \"3 days ago\", in the current UI language; empty when there is no date. */\nexport function timeAgo(value?: string | number | Date): string {\n  if (!value) return ''\n\n  const then = new Date(value).getTime()\n  if (Number.isNaN(then)) return ''\n\n  const diff = then - Date.now()\n  const rtf = new Intl.RelativeTimeFormat(i18next.language || 'en', { numeric: 'auto' })\n\n  for (const [unit, ms] of UNITS) {\n    if (Math.abs(diff) >= ms) {\n      return rtf.format(Math.round(diff / ms), unit)\n    }\n  }\n\n  return rtf.format(0, 'minute')\n}\n\n/**\n * The one line under a board's name in the catalog: which release it is, and how fresh.\n * Both are what an operator picks a board by, once the picture has told them what it is.\n */\nexport function boardMeta(board: { version?: number; updatedAt?: string }): string {\n  const version = `v${board.version ?? 0}`\n  const ago = timeAgo(board.updatedAt)\n\n  return ago ? `${version} · ${ago}` : version\n}\n"]}

package/dist-client/viewparts/board-basic-info.d.ts

@@ -1,12 +1,38 @@
 import '@material/web/icon/icon.js';
-import '@material/web/textfield/filled-text-field.js';
-import '@material/web/select/outlined-select';
-import '@material/web/button/elevated-button.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/button/text-button.js';
 import '@material/web/chips/chip-set.js';
-import '@material/web/chips/assist-chip.js';
 import '@material/web/chips/filter-chip.js';
-import '@material/web/radio/radio.js';
+import '@material/web/menu/menu.js';
+import '@material/web/menu/menu-item.js';
+import '@material/web/divider/divider.js';
+import '@operato/input/ox-input-select-buttons.js';
 import { LitElement } from 'lit';
+/**
+ * The basic tab of the board dialog.
+ *
+ * ## The shape, and why
+ *
+ * Three kinds of thing used to share one scrolling form: fields that wait for Save, actions that
+ * happen the moment you touch them (release, join a play group), and a copy-to-domain panel hidden
+ * behind a caret next to the name. The Save button sat in the middle of all that and scrolled out
+ * of view on a short screen.
+ *
+ * Now the dialog reads top to bottom as: what this is (a status band), what you can change (the
+ * form, committed by Save), where it plays (membership chips, which apply at once and say so), and
+ * a footer that never scrolls away: the primary Save, the way into the modeller, and everything
+ * else - duplicate, export, release, delete - behind one "more" menu so the footer stays two
+ * buttons wide. Duplicate opens its own small panel with its own Copy and Cancel.
+ *
+ * ## Colour
+ *
+ * The accent (board's earth brown) is spent on three things only: the filled Save, the selected
+ * segment, and the pressed play-group chip. Everything else is the neutral scale - the status band
+ * is a low surface, the draft pill a warm secondary container, released a soft tertiary green -
+ * so the one thing you are meant to press is the one thing in colour.
+ */
 export declare class BoardInfo extends LitElement {
     static styles: import("lit").CSSResult[];
     boardId?: string;
@@ -14,7 +40,7 @@ export declare class BoardInfo extends LitElement {
     board: any;
     boardGroupList: any[];
     playGroupList: any[];
-    showTarget: boolean;
+    duplicating: boolean;
     enableModeller?: boolean;
     private _appCtrl;
     targetDomains: {
@@ -28,12 +54,17 @@ export declare class BoardInfo extends LitElement {
     }[];
     targetSubdomain?: string;
     targetGroupId?: string;
+    private menu;
     private original;
     render(): import("lit-html").TemplateResult<1>;
+    private renderWhat;
+    private renderDuplicate;
     firstUpdated(): Promise<void>;
     refresh(): Promise<void>;
     getGroupsByDomain(subdomain?: string): Promise<void>;
-    get isReleasable(): any;
+    /** Something in the form differs from what the server has. */
+    get isDirty(): boolean;
+    get isReleasable(): boolean;
     cloneBoard(): Promise<void>;
     exportBoard(): Promise<void>;
     releaseBoard(): Promise<void>;