@things-factory/board-ui 9.0.0-beta.8 → 9.0.0

package/dist-client/viewparts/board-info.js

@@ -3,38 +3,17 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { ScrollbarStyles } from '@operato/styles';
-import './board-basic-info';
-import './board-versions';
-import './board-info-link';
+import './board-basic-info.js';
+import './board-versions.js';
+import './board-info-link.js';
 let BoardInfo = class BoardInfo extends LitElement {
     constructor() {
         super(...arguments);
         this.tab = 'basic';
     }
-    render() {
-        var _a, _b;
-        return html `
-      <div tab>
-        <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>
-        <span @click=${() => (this.tab = 'versions')} ?active=${this.tab == 'versions'}>versions</span>
-        <span @click=${() => (this.tab = 'link')} ?active=${this.tab == 'link'}>link</span>
-      </div>
-      <div content>
-        ${this.tab == 'basic'
-            ? html `<board-basic-info boardId=${ifDefined((_a = this.board) === null || _a === void 0 ? void 0 : _a.id)}></board-basic-info>`
-            : this.tab == 'versions'
-                ? html `<board-versions boardId=${ifDefined((_b = this.board) === null || _b === void 0 ? void 0 : _b.id)}></board-versions>`
-                : html `<board-info-link .board=${this.board}></board-info-link>`}
-      </div>
-    `;
-    }
-    close() {
-        history.back();
-    }
-};
-BoardInfo.styles = [
-    ScrollbarStyles,
-    css `
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
       :host {
         height: 100%;
         min-width: 360px;
@@ -59,6 +38,10 @@ BoardInfo.styles = [
         overflow-y: auto;
       }
 
+      board-versions {
+        height: 100%;
+      }
+
       span {
         padding: 5px 4px 1px;
         font: var(--group-bar-textbutton);
@@ -78,7 +61,27 @@ BoardInfo.styles = [
         }
       }
     `
-];
+    ]; }
+    render() {
+        return html `
+      <div tab>
+        <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>
+        <span @click=${() => (this.tab = 'versions')} ?active=${this.tab == 'versions'}>versions</span>
+        <span @click=${() => (this.tab = 'link')} ?active=${this.tab == 'link'}>link</span>
+      </div>
+      <div content>
+        ${this.tab == 'basic'
+            ? html `<board-basic-info boardId=${ifDefined(this.board?.id)}></board-basic-info>`
+            : this.tab == 'versions'
+                ? html `<board-versions boardId=${ifDefined(this.board?.id)}></board-versions>`
+                : html `<board-info-link .board=${this.board}></board-info-link>`}
+      </div>
+    `;
+    }
+    close() {
+        history.back();
+    }
+};
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

package/dist-client/viewparts/board-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"board-info.js","sourceRoot":"","sources":["../../client/viewparts/board-info.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,oBAAoB,CAAA;AAC3B,OAAO,kBAAkB,CAAA;AACzB,OAAO,mBAAmB,CAAA;AAGnB,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAmDI,QAAG,GAAW,OAAO,CAAA;IAsBhC,CAAC;IApBC,MAAM;;QACJ,OAAO,IAAI,CAAA;;uBAEQ,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,OAAO;uBACzD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,UAAU,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,UAAU;uBAC/D,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,MAAM;;;UAGpE,IAAI,CAAC,GAAG,IAAI,OAAO;YACnB,CAAC,CAAC,IAAI,CAAA,6BAA6B,SAAS,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,EAAE,CAAC,sBAAsB;YAClF,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,UAAU;gBACtB,CAAC,CAAC,IAAI,CAAA,2BAA2B,SAAS,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,EAAE,CAAC,oBAAoB;gBAC9E,CAAC,CAAC,IAAI,CAAA,2BAA2B,IAAI,CAAC,KAAK,qBAAqB;;KAEvE,CAAA;IACH,CAAC;IAED,KAAK;QACH,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;;AAvEM,gBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CF;CACF,AA9CY,CA8CZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCAAqC;AAEvD;IAAR,KAAK,EAAE;;sCAAsB;AAnDnB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAyErB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport './board-basic-info'\nimport './board-versions'\nimport './board-info-link'\n\n@customElement('board-info')\nexport class BoardInfo extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        height: 100%;\n        min-width: 360px;\n\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        background-color: var(--md-sys-color-surface);\n      }\n\n      [tab] {\n        width: 100%;\n        display: flex;\n      }\n\n      [tab] > * {\n        flex: 1;\n      }\n\n      [content] {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      span {\n        padding: 5px 4px 1px;\n        font: var(--group-bar-textbutton);\n        background-color: var(--md-sys-color-secondary);\n        color: rgba(255, 255, 255, 0.8);\n        text-align: center;\n        text-transform: uppercase;\n      }\n\n      span[active] {\n        background-color: var(--md-sys-color-primary);\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) board?: { id: string; name: string }\n\n  @state() tab: string = 'basic'\n\n  render() {\n    return html`\n      <div tab>\n        <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>\n        <span @click=${() => (this.tab = 'versions')} ?active=${this.tab == 'versions'}>versions</span>\n        <span @click=${() => (this.tab = 'link')} ?active=${this.tab == 'link'}>link</span>\n      </div>\n      <div content>\n        ${this.tab == 'basic'\n          ? html`<board-basic-info boardId=${ifDefined(this.board?.id)}></board-basic-info>`\n          : this.tab == 'versions'\n            ? html`<board-versions boardId=${ifDefined(this.board?.id)}></board-versions>`\n            : html`<board-info-link .board=${this.board}></board-info-link>`}\n      </div>\n    `\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}
+{"version":3,"file":"board-info.js","sourceRoot":"","sources":["../../client/viewparts/board-info.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,uBAAuB,CAAA;AAC9B,OAAO,qBAAqB,CAAA;AAC5B,OAAO,sBAAsB,CAAA;AAGtB,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAuDI,QAAG,GAAW,OAAO,CAAA;IAsBhC,CAAC;aA5EQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+CF;KACF,AAlDY,CAkDZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;uBAEQ,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,OAAO;uBACzD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,UAAU,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,UAAU;uBAC/D,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,MAAM;;;UAGpE,IAAI,CAAC,GAAG,IAAI,OAAO;YACnB,CAAC,CAAC,IAAI,CAAA,6BAA6B,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,sBAAsB;YAClF,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,UAAU;gBACtB,CAAC,CAAC,IAAI,CAAA,2BAA2B,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,oBAAoB;gBAC9E,CAAC,CAAC,IAAI,CAAA,2BAA2B,IAAI,CAAC,KAAK,qBAAqB;;KAEvE,CAAA;IACH,CAAC;IAED,KAAK;QACH,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;;AAvB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCAA0D;AAE5E;IAAR,KAAK,EAAE;;sCAAsB;AAvDnB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA6ErB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport './board-basic-info.js'\nimport './board-versions.js'\nimport './board-info-link.js'\n\n@customElement('board-info')\nexport class BoardInfo extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        height: 100%;\n        min-width: 360px;\n\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        background-color: var(--md-sys-color-surface);\n      }\n\n      [tab] {\n        width: 100%;\n        display: flex;\n      }\n\n      [tab] > * {\n        flex: 1;\n      }\n\n      [content] {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      board-versions {\n        height: 100%;\n      }\n\n      span {\n        padding: 5px 4px 1px;\n        font: var(--group-bar-textbutton);\n        background-color: var(--md-sys-color-secondary);\n        color: rgba(255, 255, 255, 0.8);\n        text-align: center;\n        text-transform: uppercase;\n      }\n\n      span[active] {\n        background-color: var(--md-sys-color-primary);\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) board?: { id: string; name: string; description: string }\n\n  @state() tab: string = 'basic'\n\n  render() {\n    return html`\n      <div tab>\n        <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>\n        <span @click=${() => (this.tab = 'versions')} ?active=${this.tab == 'versions'}>versions</span>\n        <span @click=${() => (this.tab = 'link')} ?active=${this.tab == 'link'}>link</span>\n      </div>\n      <div content>\n        ${this.tab == 'basic'\n          ? html`<board-basic-info boardId=${ifDefined(this.board?.id)}></board-basic-info>`\n          : this.tab == 'versions'\n            ? html`<board-versions boardId=${ifDefined(this.board?.id)}></board-versions>`\n            : html`<board-info-link .board=${this.board}></board-info-link>`}\n      </div>\n    `\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}

package/dist-client/viewparts/board-template-builder.js

@@ -4,6 +4,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ScrollbarStyles } from '@operato/styles';
 import { i18next } from '@operato/i18n';
+import { getPathInfo } from '@operato/utils';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
 let BoardTemplateBuilder = class BoardTemplateBuilder extends LitElement {
     constructor() {
@@ -12,10 +13,62 @@ let BoardTemplateBuilder = class BoardTemplateBuilder extends LitElement {
         this.name = '';
         this.description = '';
     }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        padding: var(--spacing-large);
+
+        /* for narrow mode */
+        flex-direction: column;
+      }
+
+      div[template] {
+        display: grid;
+        position: relative;
+        border-top: 1px solid var(--md-sys-color-primary);
+      }
+
+      label {
+        font: var(--label-font);
+        color: var(--md-sys-color-on-surface);
+        text-transform: capitalize;
+      }
+
+      input,
+      select,
+      textarea {
+        border: var(--border-dim-color);
+        border-radius: var(--border-radius);
+        margin: var(--input-margin);
+        padding: var(--input-padding);
+        font: var(--input-font);
+        flex: 1 1 0%;
+      }
+
+      textarea {
+        min-height: 132px;
+        resize: none;
+      }
+
+      select:focus,
+      input:focus,
+      textarea:focus,
+      button {
+        outline: none;
+      }
+
+      button:hover {
+        border: var(--button-activ-border);
+        box-shadow: var(--button-active-box-shadow);
+      }
+    `
+    ]; }
     render() {
-        var _a, _b;
-        const name = this.name || ((_a = this.board) === null || _a === void 0 ? void 0 : _a.name) || '';
-        const description = this.description || ((_b = this.board) === null || _b === void 0 ? void 0 : _b.description) || '';
+        const name = this.name || this.board?.name || '';
+        const description = this.description || this.board?.description || '';
+        const { domain } = getPathInfo(window.location.pathname);
         return html `
       <div template>
         <h3>
@@ -29,7 +82,7 @@ let BoardTemplateBuilder = class BoardTemplateBuilder extends LitElement {
         <label for="description">${i18next.t('field.description')}</label>
         <textarea
           id="description"
-          .value=${this.description}
+          .value=${this.description || ''}
           @change=${e => (this.description = e.target.value)}
         ></textarea>
 
@@ -37,12 +90,10 @@ let BoardTemplateBuilder = class BoardTemplateBuilder extends LitElement {
         <select
           @change=${e => (this.visibility = e.target.value)}
           placeholder="choose visibility ..."
-          .value=${this.visibility}
+          .value=${this.visibility || 'private'}
         >
           <option value="private">${i18next.t('label.visibility-private')}</option>
-          ${window.location.pathname.startsWith('/domain/')
-            ? html ` <option value="domain">${i18next.t('label.visibility-domain')}</option> `
-            : nothing}
+          ${domain ? html ` <option value="domain">${i18next.t('label.visibility-domain')}</option> ` : nothing}
           <option value="public">${i18next.t('label.visibility-public')}</option>
         </select>
 
@@ -51,7 +102,6 @@ let BoardTemplateBuilder = class BoardTemplateBuilder extends LitElement {
     `;
     }
     async registerBoardAsTemplate() {
-        var _a, _b;
         if (await OxPrompt.open({
             title: i18next.t('text.are_you_sure'),
             text: i18next.t('text.sure_to_x', { x: i18next.t('text.register-template') }),
@@ -62,8 +112,8 @@ let BoardTemplateBuilder = class BoardTemplateBuilder extends LitElement {
             this.dispatchEvent(new CustomEvent('register-template', {
                 detail: {
                     id,
-                    name: this.name || ((_a = this.board) === null || _a === void 0 ? void 0 : _a.name),
-                    description: this.description || ((_b = this.board) === null || _b === void 0 ? void 0 : _b.description),
+                    name: this.name || this.board?.name,
+                    description: this.description || this.board?.description,
                     visibility: this.visibility
                 },
                 bubbles: true,
@@ -72,57 +122,6 @@ let BoardTemplateBuilder = class BoardTemplateBuilder extends LitElement {
         }
     }
 };
-BoardTemplateBuilder.styles = [
-    ScrollbarStyles,
-    css `
-      :host {
-        display: flex;
-        padding: var(--spacing-large);
-
-        /* for narrow mode */
-        flex-direction: column;
-      }
-
-      div[template] {
-        display: grid;
-        position: relative;
-      }
-
-      label {
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        text-transform: capitalize;
-      }
-
-      input,
-      select,
-      textarea {
-        border: var(--border-dim-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        font: var(--input-font);
-        flex: 1 1 0%;
-      }
-
-      textarea {
-        min-height: 132px;
-        resize: none;
-      }
-
-      select:focus,
-      input:focus,
-      textarea:focus,
-      button {
-        outline: none;
-      }
-
-      button:hover {
-        border: var(--button-activ-border);
-        box-shadow: var(--button-active-box-shadow);
-      }
-    `
-];
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

package/dist-client/viewparts/board-template-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"board-template-builder.js","sourceRoot":"","sources":["../../client/viewparts/board-template-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('board-template-builder')\nexport class BoardTemplateBuilder extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        padding: var(--spacing-large);\n\n        /* for narrow mode */\n        flex-direction: column;\n      }\n\n      div[template] {\n        display: grid;\n        position: relative;\n      }\n\n      label {\n        font: var(--label-font);\n        color: var(--label-color, var(--md-sys-color-on-surface));\n        text-transform: capitalize;\n      }\n\n      input,\n      select,\n      textarea {\n        border: var(--border-dim-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        font: var(--input-font);\n        flex: 1 1 0%;\n      }\n\n      textarea {\n        min-height: 132px;\n        resize: none;\n      }\n\n      select:focus,\n      input:focus,\n      textarea:focus,\n      button {\n        outline: none;\n      }\n\n      button:hover {\n        border: var(--button-activ-border);\n        box-shadow: var(--button-active-box-shadow);\n      }\n    `\n  ]\n\n  @property({ type: Object }) board?: { id: string; name: string; description: string }\n\n  @state() visibility?: string = 'private'\n  @state() name?: string = ''\n  @state() description?: string = ''\n\n  render() {\n    const name = this.name || this.board?.name || ''\n    const description = this.description || this.board?.description || ''\n\n    return html`\n      <div template>\n        <h3>\n          <ox-title-with-help topic=\"board-service/board-template\" msgid=\"label.board-template\"\n            >board template</ox-title-with-help\n          >\n        </h3>\n        <label for=\"name\">${i18next.t('field.name')}</label>\n        <input id=\"name\" type=\"text\" .value=${name} @change=${e => (this.name = e.target.value)} />\n\n        <label for=\"description\">${i18next.t('field.description')}</label>\n        <textarea\n          id=\"description\"\n          .value=${this.description}\n          @change=${e => (this.description = e.target.value)}\n        ></textarea>\n\n        <label>${i18next.t('field.visibility')}</label>\n        <select\n          @change=${e => (this.visibility = e.target.value)}\n          placeholder=\"choose visibility ...\"\n          .value=${this.visibility}\n        >\n          <option value=\"private\">${i18next.t('label.visibility-private')}</option>\n          ${window.location.pathname.startsWith('/domain/')\n            ? html` <option value=\"domain\">${i18next.t('label.visibility-domain')}</option> `\n            : nothing}\n          <option value=\"public\">${i18next.t('label.visibility-public')}</option>\n        </select>\n\n        <button @click=${this.registerBoardAsTemplate}>${i18next.t('text.register-template')}</button>\n      </div>\n    `\n  }\n\n  async registerBoardAsTemplate() {\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.sure_to_x', { x: i18next.t('text.register-template') }),\n        confirmButton: { text: i18next.t('button.confirm') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      const { id } = this.board || {}\n\n      this.dispatchEvent(\n        new CustomEvent('register-template', {\n          detail: {\n            id,\n            name: this.name || this.board?.name,\n            description: this.description || this.board?.description,\n            visibility: this.visibility\n          },\n          bubbles: true,\n          composed: true\n        })\n      )\n    }\n  }\n}\n"]}
+{"version":3,"file":"board-template-builder.js","sourceRoot":"","sources":["../../client/viewparts/board-template-builder.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGlE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAG/C,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAwDI,eAAU,GAAY,SAAS,CAAA;QAC/B,SAAI,GAAY,EAAE,CAAA;QAClB,gBAAW,GAAY,EAAE,CAAA;IAiEpC,CAAC;aA1HQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDF;KACF,AAnDY,CAmDZ;IAQD,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,IAAI,EAAE,CAAA;QAChD,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,WAAW,IAAI,EAAE,CAAA;QACrE,MAAM,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;QAExD,OAAO,IAAI,CAAA;;;;;;;4BAOa,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;8CACL,IAAI,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;mCAE5D,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;mBAG9C,IAAI,CAAC,WAAW,IAAI,EAAE;oBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;iBAG3C,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;;oBAE1B,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;mBAExC,IAAI,CAAC,UAAU,IAAI,SAAS;;oCAEX,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC;YAC7D,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,2BAA2B,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO;mCAC3E,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC;;;yBAG9C,IAAI,CAAC,uBAAuB,IAAI,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;;KAEvF,CAAA;IACH,CAAC;IAED,KAAK,CAAC,uBAAuB;QAC3B,IACE,MAAM,QAAQ,CAAC,IAAI,CAAC;YAClB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;YACrC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,EAAE,CAAC;YAC7E,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE;YACpD,YAAY,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE;SACnD,CAAC,EACF,CAAC;YACD,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;YAE/B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,mBAAmB,EAAE;gBACnC,MAAM,EAAE;oBACN,EAAE;oBACF,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI;oBACnC,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,WAAW;oBACxD,UAAU,EAAE,IAAI,CAAC,UAAU;iBAC5B;gBACD,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAA;QACH,CAAC;IACH,CAAC;;AApE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mDAA0D;AAE5E;IAAR,KAAK,EAAE;;wDAAgC;AAC/B;IAAR,KAAK,EAAE;;kDAAmB;AAClB;IAAR,KAAK,EAAE;;yDAA0B;AA1DvB,oBAAoB;IADhC,aAAa,CAAC,wBAAwB,CAAC;GAC3B,oBAAoB,CA2HhC","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\nimport { getPathInfo } from '@operato/utils'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('board-template-builder')\nexport class BoardTemplateBuilder extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        padding: var(--spacing-large);\n\n        /* for narrow mode */\n        flex-direction: column;\n      }\n\n      div[template] {\n        display: grid;\n        position: relative;\n        border-top: 1px solid var(--md-sys-color-primary);\n      }\n\n      label {\n        font: var(--label-font);\n        color: var(--md-sys-color-on-surface);\n        text-transform: capitalize;\n      }\n\n      input,\n      select,\n      textarea {\n        border: var(--border-dim-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        font: var(--input-font);\n        flex: 1 1 0%;\n      }\n\n      textarea {\n        min-height: 132px;\n        resize: none;\n      }\n\n      select:focus,\n      input:focus,\n      textarea:focus,\n      button {\n        outline: none;\n      }\n\n      button:hover {\n        border: var(--button-activ-border);\n        box-shadow: var(--button-active-box-shadow);\n      }\n    `\n  ]\n\n  @property({ type: Object }) board?: { id: string; name: string; description: string }\n\n  @state() visibility?: string = 'private'\n  @state() name?: string = ''\n  @state() description?: string = ''\n\n  render() {\n    const name = this.name || this.board?.name || ''\n    const description = this.description || this.board?.description || ''\n    const { domain } = getPathInfo(window.location.pathname)\n\n    return html`\n      <div template>\n        <h3>\n          <ox-title-with-help topic=\"board-service/board-template\" msgid=\"label.board-template\"\n            >board template</ox-title-with-help\n          >\n        </h3>\n        <label for=\"name\">${i18next.t('field.name')}</label>\n        <input id=\"name\" type=\"text\" .value=${name} @change=${e => (this.name = e.target.value)} />\n\n        <label for=\"description\">${i18next.t('field.description')}</label>\n        <textarea\n          id=\"description\"\n          .value=${this.description || ''}\n          @change=${e => (this.description = e.target.value)}\n        ></textarea>\n\n        <label>${i18next.t('field.visibility')}</label>\n        <select\n          @change=${e => (this.visibility = e.target.value)}\n          placeholder=\"choose visibility ...\"\n          .value=${this.visibility || 'private'}\n        >\n          <option value=\"private\">${i18next.t('label.visibility-private')}</option>\n          ${domain ? html` <option value=\"domain\">${i18next.t('label.visibility-domain')}</option> ` : nothing}\n          <option value=\"public\">${i18next.t('label.visibility-public')}</option>\n        </select>\n\n        <button @click=${this.registerBoardAsTemplate}>${i18next.t('text.register-template')}</button>\n      </div>\n    `\n  }\n\n  async registerBoardAsTemplate() {\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.sure_to_x', { x: i18next.t('text.register-template') }),\n        confirmButton: { text: i18next.t('button.confirm') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      const { id } = this.board || {}\n\n      this.dispatchEvent(\n        new CustomEvent('register-template', {\n          detail: {\n            id,\n            name: this.name || this.board?.name,\n            description: this.description || this.board?.description,\n            visibility: this.visibility\n          },\n          bubbles: true,\n          composed: true\n        })\n      )\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+declare const BoardTemplateInfo_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & typeof LitElement;
+export declare class BoardTemplateInfo extends BoardTemplateInfo_base {
+    static styles: import("lit").CSSResult[];
+    constructor();
+    template: any;
+    username: string;
+    form: HTMLFormElement;
+    stateChanged(state: any): void;
+    get isMine(): boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    onUpdate(): Promise<void>;
+    onDelete(): Promise<void>;
+    notify(level: any, message: any, ex?: Error | any): void;
+}
+export {};

package/dist-client/viewparts/board-template-info.js

@@ -0,0 +1,248 @@
+import { __decorate, __metadata } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import gql from 'graphql-tag';
+import { connect } from 'pwa-helpers/connect-mixin';
+import { store } from '@operato/shell';
+import { client } from '@operato/graphql';
+import { i18next } from '@operato/i18n';
+import { OxPrompt } from '@operato/popup';
+import { ScrollbarStyles } from '@operato/styles';
+let BoardTemplateInfo = class BoardTemplateInfo extends connect(store)(LitElement) {
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        height: 100%;
+        min-width: 360px;
+
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        background-color: var(--md-sys-color-surface);
+      }
+
+      form {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        grid-gap: var(--form-grid-gap);
+        grid-auto-rows: minmax(24px, auto);
+        padding: var(--padding-wide);
+        align-items: center;
+
+        --form-grid-gap: 2px 0;
+        --input-field-padding: var(--padding-default);
+        --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;
+        --mdc-button-horizontal-padding: var(--padding-default);
+      }
+
+      [buttons] {
+        grid-column: span 12;
+        padding: var(--padding-default) 0;
+        text-align: right;
+      }
+
+      [buttons] * {
+        margin: 0 0 0 var(--margin-narrow);
+      }
+
+      [danger] {
+        --md-assist-chip-elevated-container-color: var(--md-sys-color-error);
+        --md-assist-chip-label-text-color: var(--md-sys-color-on-error);
+        --md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);
+      }
+
+      fieldset {
+        display: contents;
+      }
+      legend {
+        grid-column: span 12;
+        padding: var(--legend-padding);
+        font: var(--legend-font);
+        color: var(--primary-color);
+        text-transform: capitalize;
+      }
+      label {
+        grid-column: span 12;
+        text-transform: capitalize;
+        color: var(--label-color);
+        font: var(--label-font);
+      }
+
+      input,
+      textarea,
+      select {
+        grid-column: span 12;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        padding: 6px 8px;
+        font-size: 1rem;
+        margin-bottom: 8px;
+      }
+      textarea {
+        min-height: 100px;
+        resize: none;
+      }
+      div[buttons] {
+        grid-column: span 12;
+        text-align: right;
+        margin-top: 12px;
+      }
+      button {
+        margin-left: 8px;
+        padding: 6px 16px;
+        border-radius: 4px;
+        border: none;
+        background: var(--md-sys-color-tertiary, #1976d2);
+        color: #fff;
+        font-weight: 500;
+        cursor: pointer;
+      }
+      button[disabled] {
+        background: #ccc;
+        cursor: not-allowed;
+      }
+
+      @media screen and (max-width: 460px) {
+        :host {
+          width: 100vw;
+        }
+      }
+    `
+    ]; }
+    constructor() {
+        super();
+        this.username = '';
+        this.template = {
+            name: '',
+            description: '',
+            visibility: 'private'
+        };
+    }
+    stateChanged(state) {
+        this.username = state.auth?.user?.username || '';
+    }
+    get isMine() {
+        return this.template?.creator?.username === this.username;
+    }
+    render() {
+        return html `
+      <form>
+        <fieldset>
+          <legend>${i18next.t('label.board-template')}</legend>
+          <label>${i18next.t('field.name')}</label>
+          <input
+            name="name"
+            .value=${this.template.name}
+            @input=${e => (this.template.name = e.target.value)}
+            ?disabled=${!this.isMine}
+          />
+          <label>${i18next.t('field.description')}</label>
+          <textarea
+            name="description"
+            .value=${this.template.description}
+            @input=${e => (this.template.description = e.target.value)}
+            ?disabled=${!this.isMine}
+          ></textarea>
+          <label>${i18next.t('field.visibility')}</label>
+          <select
+            name="visibility"
+            .value=${this.template.visibility}
+            @change=${e => (this.template.visibility = e.target.value)}
+            ?disabled=${!this.isMine}
+          >
+            <option value="private">${i18next.t('label.visibility-private')}</option>
+            <option value="domain">${i18next.t('label.visibility-domain')}</option>
+            <option value="public">${i18next.t('label.visibility-public')}</option>
+          </select>
+          <div buttons>
+            ${this.isMine
+            ? html `
+                  <button type="button" @click=${this.onUpdate}>${i18next.t('button.save')}</button>
+                  <button type="button" @click=${this.onDelete}>${i18next.t('button.delete')}</button>
+                `
+            : ''}
+          </div>
+        </fieldset>
+      </form>
+    `;
+    }
+    async onUpdate() {
+        const formData = new FormData(this.form);
+        const patch = {};
+        for (const [key, value] of formData.entries()) {
+            patch[key] = value;
+        }
+        try {
+            await client.mutate({
+                mutation: gql `
+          mutation ($id: String!, $patch: BoardTemplatePatch!) {
+            updateBoardTemplate(id: $id, patch: $patch) {
+              id
+            }
+          }
+        `,
+                variables: {
+                    id: this.template.id,
+                    patch
+                }
+            });
+            this.notify('info', i18next.t('text.board-template updated'));
+            this.dispatchEvent(new CustomEvent('updated', { bubbles: true, composed: true }));
+        }
+        catch (ex) {
+            this.notify('error', ex, ex);
+        }
+    }
+    async onDelete() {
+        if (await OxPrompt.open({
+            title: i18next.t('text.are_you_sure'),
+            text: i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }),
+            confirmButton: { text: i18next.t('button.confirm') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        })) {
+            try {
+                await client.mutate({
+                    mutation: gql `
+            mutation ($id: String!) {
+              deleteBoardTemplate(id: $id)
+            }
+          `,
+                    variables: { id: this.template.id }
+                });
+                this.notify('info', i18next.t('text.board-template deleted'));
+                this.dispatchEvent(new CustomEvent('deleted', { bubbles: true, composed: true }));
+            }
+            catch (ex) {
+                this.notify('error', ex, ex);
+            }
+        }
+    }
+    notify(level, message, ex) {
+        document.dispatchEvent(new CustomEvent('notify', {
+            detail: {
+                level,
+                message,
+                ex
+            }
+        }));
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardTemplateInfo.prototype, "template", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardTemplateInfo.prototype, "username", void 0);
+__decorate([
+    query('form'),
+    __metadata("design:type", HTMLFormElement)
+], BoardTemplateInfo.prototype, "form", void 0);
+BoardTemplateInfo = __decorate([
+    customElement('board-template-info'),
+    __metadata("design:paramtypes", [])
+], BoardTemplateInfo);
+export { BoardTemplateInfo };
+//# sourceMappingURL=board-template-info.js.map

package/dist-client/viewparts/board-template-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-template-info.js","sourceRoot":"","sources":["../../client/viewparts/board-template-info.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport gql from 'graphql-tag'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { store } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('board-template-info')\nexport class BoardTemplateInfo extends connect(store)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        height: 100%;\n        min-width: 360px;\n\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        background-color: var(--md-sys-color-surface);\n      }\n\n      form {\n        display: grid;\n        grid-template-columns: repeat(12, 1fr);\n        grid-gap: var(--form-grid-gap);\n        grid-auto-rows: minmax(24px, auto);\n        padding: var(--padding-wide);\n        align-items: center;\n\n        --form-grid-gap: 2px 0;\n        --input-field-padding: var(--padding-default);\n        --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;\n        --mdc-button-horizontal-padding: var(--padding-default);\n      }\n\n      [buttons] {\n        grid-column: span 12;\n        padding: var(--padding-default) 0;\n        text-align: right;\n      }\n\n      [buttons] * {\n        margin: 0 0 0 var(--margin-narrow);\n      }\n\n      [danger] {\n        --md-assist-chip-elevated-container-color: var(--md-sys-color-error);\n        --md-assist-chip-label-text-color: var(--md-sys-color-on-error);\n        --md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);\n      }\n\n      fieldset {\n        display: contents;\n      }\n      legend {\n        grid-column: span 12;\n        padding: var(--legend-padding);\n        font: var(--legend-font);\n        color: var(--primary-color);\n        text-transform: capitalize;\n      }\n      label {\n        grid-column: span 12;\n        text-transform: capitalize;\n        color: var(--label-color);\n        font: var(--label-font);\n      }\n\n      input,\n      textarea,\n      select {\n        grid-column: span 12;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        padding: 6px 8px;\n        font-size: 1rem;\n        margin-bottom: 8px;\n      }\n      textarea {\n        min-height: 100px;\n        resize: none;\n      }\n      div[buttons] {\n        grid-column: span 12;\n        text-align: right;\n        margin-top: 12px;\n      }\n      button {\n        margin-left: 8px;\n        padding: 6px 16px;\n        border-radius: 4px;\n        border: none;\n        background: var(--md-sys-color-tertiary, #1976d2);\n        color: #fff;\n        font-weight: 500;\n        cursor: pointer;\n      }\n      button[disabled] {\n        background: #ccc;\n        cursor: not-allowed;\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n      }\n    `\n  ]\n\n  constructor() {\n    super()\n    this.template = {\n      name: '',\n      description: '',\n      visibility: 'private'\n    }\n  }\n\n  @property({ type: Object }) template: any\n  @state() username: string = ''\n\n  @query('form') form!: HTMLFormElement\n\n  stateChanged(state: any) {\n    this.username = state.auth?.user?.username || ''\n  }\n\n  get isMine() {\n    return this.template?.creator?.username === this.username\n  }\n\n  render() {\n    return html`\n      <form>\n        <fieldset>\n          <legend>${i18next.t('label.board-template')}</legend>\n          <label>${i18next.t('field.name')}</label>\n          <input\n            name=\"name\"\n            .value=${this.template.name}\n            @input=${e => (this.template.name = e.target.value)}\n            ?disabled=${!this.isMine}\n          />\n          <label>${i18next.t('field.description')}</label>\n          <textarea\n            name=\"description\"\n            .value=${this.template.description}\n            @input=${e => (this.template.description = e.target.value)}\n            ?disabled=${!this.isMine}\n          ></textarea>\n          <label>${i18next.t('field.visibility')}</label>\n          <select\n            name=\"visibility\"\n            .value=${this.template.visibility}\n            @change=${e => (this.template.visibility = e.target.value)}\n            ?disabled=${!this.isMine}\n          >\n            <option value=\"private\">${i18next.t('label.visibility-private')}</option>\n            <option value=\"domain\">${i18next.t('label.visibility-domain')}</option>\n            <option value=\"public\">${i18next.t('label.visibility-public')}</option>\n          </select>\n          <div buttons>\n            ${this.isMine\n              ? html`\n                  <button type=\"button\" @click=${this.onUpdate}>${i18next.t('button.save')}</button>\n                  <button type=\"button\" @click=${this.onDelete}>${i18next.t('button.delete')}</button>\n                `\n              : ''}\n          </div>\n        </fieldset>\n      </form>\n    `\n  }\n\n  async onUpdate() {\n    const formData = new FormData(this.form)\n    const patch: any = {}\n    for (const [key, value] of formData.entries()) {\n      patch[key] = value\n    }\n\n    try {\n      await client.mutate({\n        mutation: gql`\n          mutation ($id: String!, $patch: BoardTemplatePatch!) {\n            updateBoardTemplate(id: $id, patch: $patch) {\n              id\n            }\n          }\n        `,\n        variables: {\n          id: this.template.id,\n          patch\n        }\n      })\n      this.notify('info', i18next.t('text.board-template updated'))\n      this.dispatchEvent(new CustomEvent('updated', { bubbles: true, composed: true }))\n    } catch (ex) {\n      this.notify('error', ex, ex)\n    }\n  }\n\n  async onDelete() {\n    if (\n      await OxPrompt.open({\n        title: i18next.t('text.are_you_sure'),\n        text: i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }),\n        confirmButton: { text: i18next.t('button.confirm') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      try {\n        await client.mutate({\n          mutation: gql`\n            mutation ($id: String!) {\n              deleteBoardTemplate(id: $id)\n            }\n          `,\n          variables: { id: this.template.id }\n        })\n        this.notify('info', i18next.t('text.board-template deleted'))\n        this.dispatchEvent(new CustomEvent('deleted', { bubbles: true, composed: true }))\n      } catch (ex) {\n        this.notify('error', ex, ex)\n      }\n    }\n  }\n\n  notify(level, message, ex?: Error | any) {\n    document.dispatchEvent(\n      new CustomEvent('notify', {\n        detail: {\n          level,\n          message,\n          ex\n        }\n      })\n    )\n  }\n}\n"]}