@fmsim/board 0.0.49

package/dist/src/selector/board-thumbnail-card.js

@@ -0,0 +1,168 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+export let BoardThumbnailCard = class BoardThumbnailCard extends localize(i18next)(LitElement) {
+    static get styles() {
+        return [
+            css `
+        :host {
+          position: relative;
+
+          padding: 0;
+          margin: 0;
+          height: 100%;
+
+          -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+          -webkit-transition: all 0.5s ease-in-out;
+          transition: all 0.5s ease-in-out;
+        }
+
+        :host(.flipped) {
+          -webkit-transform: var(--card-list-flip-transform);
+          transform: var(--card-list-flip-transform);
+        }
+
+        [front],
+        [back] {
+          position: absolute;
+
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          padding: 0;
+
+          border: var(--card-list-create-border);
+          border-radius: var(--card-list-create-border-radius);
+
+          background-color: #fff;
+
+          -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+        }
+
+        [front] {
+          text-align: center;
+          font-size: 0.8em;
+          color: var(--card-list-create-color);
+          text-transform: capitalize;
+        }
+
+        [front] mwc-icon {
+          margin-top: 15%;
+          display: block;
+          font-size: 3.5em;
+          color: var(--card-list-create-icon-color);
+        }
+
+        [back] {
+          -webkit-transform: var(--card-list-flip-transform);
+          transform: var(--card-list-flip-transform);
+        }
+
+        [back] form {
+          padding: var(--card-list-create-form-padding);
+          display: flex;
+          flex-flow: row wrap;
+        }
+
+        [back] form label {
+          flex: 1 1 25%;
+          font: var(--card-list-create-label-font);
+          color: var(--card-list-create-label-color);
+        }
+
+        [back] form input,
+        [back] form select {
+          flex: 1 1 60%;
+          width: 10px;
+          background-color: #fff;
+          border: var(--card-list-create-input-border);
+          border-radius: var(--card-list-create-input-border-radius);
+          padding: var(--card-list-create-input-padding);
+          font: var(--card-list-create-input-font);
+          color: var(--card-list-create-input-color);
+        }
+
+        form * {
+          margin: var(--card-list-create-margin);
+        }
+
+        input[type='submit'] {
+          background-color: var(--button-background-color) !important;
+          margin: var(--button-margin);
+          font: var(--button-font);
+          color: var(--button-color) !important;
+          border-radius: var(--button-radius);
+          border: var(--button-border);
+        }
+      `
+        ];
+    }
+    render() {
+        var groups = this.groups || [];
+        return html `
+      <div @click=${(e) => this.onClickFlip(e)} front><mwc-icon>add_circle_outline</mwc-icon>create board</div>
+
+      <div @click=${(e) => this.onClickFlip(e)} back>
+        <form @submit=${(e) => this.onClickSubmit(e)}>
+          <label>${i18next.t('label.name')}</label>
+          <input type="text" name="name" />
+
+          <label>${i18next.t('label.description')}</label>
+          <input type="text" name="description" />
+
+          <label>${i18next.t('label.group')}</label>
+          <select .value=${this.defaultGroup || ''} name="groupId">
+            ${groups.map(group => html `
+                <option value=${group.id} ?selected=${this.defaultGroup == group.id}>${group.name}</option>
+              `)}
+          </select>
+
+          <input type="submit" value=${String(i18next.t('button.create'))} />
+        </form>
+      </div>
+    `;
+    }
+    onClickFlip(e) {
+        var _a, _b;
+        if (((_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.hasAttribute('front')) || ((_b = e.target) === null || _b === void 0 ? void 0 : _b.hasAttribute('back'))) {
+            this.classList.toggle('flipped');
+        }
+        e.stopPropagation();
+    }
+    onClickSubmit(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var form = e.target;
+        var name = form.elements['name'].value;
+        var description = form.elements['description'].value;
+        var groupId = form.elements['groupId'].value;
+        this.dispatchEvent(new CustomEvent('create-board', {
+            detail: {
+                name,
+                description,
+                groupId
+            }
+        }));
+    }
+    reset() {
+        var _a;
+        var form = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('form');
+        if (form) {
+            form.reset();
+        }
+        this.classList.remove('flipped');
+    }
+};
+__decorate([
+    property({ type: String })
+], BoardThumbnailCard.prototype, "defaultGroup", void 0);
+__decorate([
+    property({ type: Array })
+], BoardThumbnailCard.prototype, "groups", void 0);
+BoardThumbnailCard = __decorate([
+    customElement('board-thumbnail-card')
+], BoardThumbnailCard);
+//# sourceMappingURL=board-thumbnail-card.js.map

package/dist/src/selector/board-thumbnail-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-thumbnail-card.js","sourceRoot":"","sources":["../../../src/selector/board-thumbnail-card.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('board-thumbnail-card')\nexport class BoardThumbnailCard extends localize(i18next)(LitElement) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          position: relative;\n\n          padding: 0;\n          margin: 0;\n          height: 100%;\n\n          -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n          -webkit-transition: all 0.5s ease-in-out;\n          transition: all 0.5s ease-in-out;\n        }\n\n        :host(.flipped) {\n          -webkit-transform: var(--card-list-flip-transform);\n          transform: var(--card-list-flip-transform);\n        }\n\n        [front],\n        [back] {\n          position: absolute;\n\n          width: 100%;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n\n          border: var(--card-list-create-border);\n          border-radius: var(--card-list-create-border-radius);\n\n          background-color: #fff;\n\n          -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n        }\n\n        [front] {\n          text-align: center;\n          font-size: 0.8em;\n          color: var(--card-list-create-color);\n          text-transform: capitalize;\n        }\n\n        [front] mwc-icon {\n          margin-top: 15%;\n          display: block;\n          font-size: 3.5em;\n          color: var(--card-list-create-icon-color);\n        }\n\n        [back] {\n          -webkit-transform: var(--card-list-flip-transform);\n          transform: var(--card-list-flip-transform);\n        }\n\n        [back] form {\n          padding: var(--card-list-create-form-padding);\n          display: flex;\n          flex-flow: row wrap;\n        }\n\n        [back] form label {\n          flex: 1 1 25%;\n          font: var(--card-list-create-label-font);\n          color: var(--card-list-create-label-color);\n        }\n\n        [back] form input,\n        [back] form select {\n          flex: 1 1 60%;\n          width: 10px;\n          background-color: #fff;\n          border: var(--card-list-create-input-border);\n          border-radius: var(--card-list-create-input-border-radius);\n          padding: var(--card-list-create-input-padding);\n          font: var(--card-list-create-input-font);\n          color: var(--card-list-create-input-color);\n        }\n\n        form * {\n          margin: var(--card-list-create-margin);\n        }\n\n        input[type='submit'] {\n          background-color: var(--button-background-color) !important;\n          margin: var(--button-margin);\n          font: var(--button-font);\n          color: var(--button-color) !important;\n          border-radius: var(--button-radius);\n          border: var(--button-border);\n        }\n      `\n    ]\n  }\n\n  @property({ type: String }) defaultGroup?: string\n  @property({ type: Array }) groups?: { id: string; name: string }[]\n\n  render() {\n    var groups = this.groups || []\n\n    return html`\n      <div @click=${(e: Event) => this.onClickFlip(e)} front><mwc-icon>add_circle_outline</mwc-icon>create board</div>\n\n      <div @click=${(e: Event) => this.onClickFlip(e)} back>\n        <form @submit=${(e: Event) => this.onClickSubmit(e)}>\n          <label>${i18next.t('label.name')}</label>\n          <input type=\"text\" name=\"name\" />\n\n          <label>${i18next.t('label.description')}</label>\n          <input type=\"text\" name=\"description\" />\n\n          <label>${i18next.t('label.group')}</label>\n          <select .value=${this.defaultGroup || ''} name=\"groupId\">\n            ${groups.map(\n              group => html`\n                <option value=${group.id} ?selected=${this.defaultGroup == group.id}>${group.name}</option>\n              `\n            )}\n          </select>\n\n          <input type=\"submit\" value=${String(i18next.t('button.create'))} />\n        </form>\n      </div>\n    `\n  }\n\n  onClickFlip(e: Event) {\n    if ((e.currentTarget as any)?.hasAttribute('front') || (e.target as any)?.hasAttribute('back')) {\n      this.classList.toggle('flipped')\n    }\n\n    e.stopPropagation()\n  }\n\n  onClickSubmit(e: Event) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    var form = e.target as any\n\n    var name = form.elements['name'].value\n    var description = form.elements['description'].value\n    var groupId = form.elements['groupId'].value\n\n    this.dispatchEvent(\n      new CustomEvent('create-board', {\n        detail: {\n          name,\n          description,\n          groupId\n        }\n      })\n    )\n  }\n\n  reset() {\n    var form = this.shadowRoot?.querySelector('form')\n    if (form) {\n      form.reset()\n    }\n\n    this.classList.remove('flipped')\n  }\n}\n"]}

package/dist/src/selector/ox-board-creation-card.d.ts

@@ -0,0 +1,14 @@
+import '@material/mwc-icon';
+import './board-creation-popup';
+import { LitElement } from 'lit';
+declare const BoardCreationCard_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class BoardCreationCard extends BoardCreationCard_base {
+    static get styles(): import("lit").CSSResult[];
+    defaultGroup?: string;
+    groups: any;
+    private popup;
+    render(): import("lit-html").TemplateResult<1>;
+    onClick(): void;
+    reset(): void;
+}
+export {};

package/dist/src/selector/ox-board-creation-card.js

@@ -0,0 +1,84 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import './board-creation-popup';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+export let BoardCreationCard = class BoardCreationCard extends localize(i18next)(LitElement) {
+    static get styles() {
+        return [
+            css `
+        :host {
+          display: flex;
+          border: var(--card-list-create-border);
+          border-radius: var(--card-list-create-border-radius);
+
+          background-color: #fff;
+
+          align-content: center;
+          justify-content: center;
+        }
+
+        div {
+          text-align: center;
+          font-size: 0.8em;
+          color: var(--card-list-create-color);
+          text-transform: capitalize;
+        }
+
+        mwc-icon {
+          display: block;
+          font-size: 3.5em;
+          color: var(--card-list-create-icon-color);
+        }
+      `
+        ];
+    }
+    render() {
+        return html `<div @click=${(e) => this.onClick()}><mwc-icon>add_circle_outline</mwc-icon>create board</div> `;
+    }
+    onClick() {
+        if (this.popup) {
+            delete this.popup;
+        }
+        /*
+         * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+         * 주의. value는 object일 수도 있고, string일 수도 있다.
+         * string인 경우에는 해당 보드의 id로 해석한다.
+         */
+        var template = html `
+      <board-creation-popup
+        .defaultGroup=${this.defaultGroup}
+        .groups=${this.groups}
+        @create-board=${async (e) => {
+            var { name, description, groupId } = e.detail;
+            this.dispatchEvent(new CustomEvent('create-board', {
+                detail: {
+                    name,
+                    description,
+                    groupId
+                }
+            }));
+            this.popup && this.popup.close();
+        }}
+      ></board-creation-popup>
+    `;
+        this.popup = openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('title.create-board')
+        });
+    }
+    reset() { }
+};
+__decorate([
+    property({ type: String })
+], BoardCreationCard.prototype, "defaultGroup", void 0);
+__decorate([
+    property({ type: Array })
+], BoardCreationCard.prototype, "groups", void 0);
+BoardCreationCard = __decorate([
+    customElement('ox-board-creation-card')
+], BoardCreationCard);
+//# sourceMappingURL=ox-board-creation-card.js.map

package/dist/src/selector/ox-board-creation-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-board-creation-card.js","sourceRoot":"","sources":["../../../src/selector/ox-board-creation-card.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGpC,WAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAClE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;OAwBF;SACF,CAAA;IACH,CAAC;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,6DAA6D,CAAA;IACrH,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;QAED;;;;WAIG;QACH,IAAI,QAAQ,GAAG,IAAI,CAAA;;wBAEC,IAAI,CAAC,YAAY;kBACvB,IAAI,CAAC,MAAM;wBACL,KAAK,EAAE,CAAc,EAAE,EAAE;YACvC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;YAE7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,MAAM,EAAE;oBACN,IAAI;oBACJ,WAAW;oBACX,OAAO;iBACR;aACF,CAAC,CACH,CAAA;YAED,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;SACvC,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,KAAI,CAAC;CACX,CAAA;AAjD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDAAY;AAjC3B,iBAAiB;IAD7B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,iBAAiB,CAiF7B","sourcesContent":["import '@material/mwc-icon'\nimport './board-creation-popup'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('ox-board-creation-card')\nexport class BoardCreationCard extends localize(i18next)(LitElement) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: flex;\n          border: var(--card-list-create-border);\n          border-radius: var(--card-list-create-border-radius);\n\n          background-color: #fff;\n\n          align-content: center;\n          justify-content: center;\n        }\n\n        div {\n          text-align: center;\n          font-size: 0.8em;\n          color: var(--card-list-create-color);\n          text-transform: capitalize;\n        }\n\n        mwc-icon {\n          display: block;\n          font-size: 3.5em;\n          color: var(--card-list-create-icon-color);\n        }\n      `\n    ]\n  }\n\n  /* default group id */\n  @property({ type: String }) defaultGroup?: string\n  @property({ type: Array }) groups: any\n\n  private popup: any\n\n  render() {\n    return html`<div @click=${(e: Event) => this.onClick()}><mwc-icon>add_circle_outline</mwc-icon>create board</div> `\n  }\n\n  onClick() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    /*\n     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n     * 주의. value는 object일 수도 있고, string일 수도 있다.\n     * string인 경우에는 해당 보드의 id로 해석한다.\n     */\n    var template = html`\n      <board-creation-popup\n        .defaultGroup=${this.defaultGroup}\n        .groups=${this.groups}\n        @create-board=${async (e: CustomEvent) => {\n          var { name, description, groupId } = e.detail\n\n          this.dispatchEvent(\n            new CustomEvent('create-board', {\n              detail: {\n                name,\n                description,\n                groupId\n              }\n            })\n          )\n\n          this.popup && this.popup.close()\n        }}\n      ></board-creation-popup>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.create-board')\n    })\n  }\n\n  reset() {}\n}\n"]}

package/dist/src/selector/ox-board-selector.d.ts

@@ -0,0 +1,45 @@
+import './ox-board-creation-card';
+import { LitElement, PropertyValues } from 'lit';
+import { InheritedValueType } from '@operato/shell';
+declare const BoardSelector_base: (new (...args: any[]) => {
+    _infiniteScrollOptions: {
+        threshold: number;
+        limit: number;
+        totalProp: string;
+        pageProp: string;
+    };
+    onScroll: import("lodash").DebouncedFunc<(e: any) => void>;
+    scrollAction(): Promise<void>;
+}) & (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class BoardSelector extends BoardSelector_base {
+    static get styles(): import("lit").CSSResult[];
+    groups: {
+        id: string;
+        name: string;
+        description: string;
+    }[];
+    boards: any[];
+    group?: string;
+    inherited?: InheritedValueType;
+    creatable: boolean;
+    value?: string;
+    private _page;
+    private _total;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    get scrollTargetEl(): HTMLElement | null;
+    scrollAction(): Promise<void>;
+    firstUpdated(): void;
+    updated(changed: PropertyValues<this>): Promise<void>;
+    onClickSelect(board: any): void;
+    onCreateBoard(e: CustomEvent): Promise<void>;
+    refreshGroups(): Promise<void>;
+    refreshBoards(): Promise<void>;
+    appendBoards(): Promise<void>;
+    getBoards({ page, limit }?: {
+        page?: number | undefined;
+        limit?: number | undefined;
+    }): Promise<any>;
+    createBoard(name: string, description: string, groupId: string): Promise<any>;
+}
+export {};

package/dist/src/selector/ox-board-selector.js

@@ -0,0 +1,273 @@
+import { __decorate } from "tslib";
+import './ox-board-creation-card';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+import InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js';
+import { InheritedValueType } from '@operato/shell';
+import { createBoard, fetchBoardList, fetchGroupList } from '@fmsim/api';
+export let BoardSelector = class BoardSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {
+    static get styles() {
+        return [
+            ScrollbarStyles,
+            css `
+        :host {
+          display: grid;
+          grid-template-rows: auto auto 1fr;
+          overflow: hidden;
+          background-color: var(--popup-content-background-color);
+        }
+
+        #main {
+          overflow: auto;
+          padding: var(--popup-content-padding);
+          display: grid;
+          grid-template-columns: var(--card-list-template);
+          grid-auto-rows: var(--card-list-rows-height);
+          grid-gap: 20px;
+        }
+
+        .card {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          overflow: hidden;
+          border-radius: var(--card-list-border-radius);
+          background-color: var(--card-list-background-color);
+        }
+
+        .card[selected] {
+          border: red solid;
+        }
+
+        .card.create {
+          overflow: visible;
+        }
+
+        .card:hover {
+          cursor: pointer;
+        }
+
+        .card > .name {
+          background-color: var(--board-renderer-name-background-color);
+          opacity: 0.8;
+          margin-top: -35px;
+          width: 100%;
+          color: #fff;
+          font-weight: bolder;
+          font-size: 13px;
+          text-indent: 7px;
+        }
+
+        .card > .description {
+          background-color: rgba(0, 0, 0, 0.7);
+          width: 100%;
+          min-height: 15px;
+          font-size: 0.6rem;
+          color: #fff;
+          text-indent: 7px;
+        }
+        .card img {
+          max-height: 100%;
+          min-height: 100%;
+        }
+
+        #filter {
+          padding: var(--popup-content-padding);
+          background-color: #fff;
+          box-shadow: var(--box-shadow);
+        }
+
+        #filter > div {
+          float: right;
+          margin-left: 10px;
+        }
+
+        #filter * {
+          font-size: 15px;
+        }
+
+        select {
+          text-transform: capitalize;
+        }
+      `
+        ];
+    }
+    constructor() {
+        super();
+        this.groups = [];
+        this.boards = [];
+        this.inherited = InheritedValueType.Include;
+        this.creatable = false;
+        this._page = 1;
+        this._total = 0;
+        this._infiniteScrollOptions.limit = 50;
+    }
+    render() {
+        return html `
+      <div id="filter">
+        <div>
+          <label for="group">Group</label>
+          <select
+            id="group"
+            @change=${(e) => {
+            var _a;
+            this.group = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+            this.requestUpdate();
+        }}
+          >
+            <option value="">${i18next.t('label.all')}</option>
+            ${this.groups.map(group => html ` <option value=${group.id}>${group.description}</option> `)}
+          </select>
+        </div>
+
+        <div>
+          <label for="inherited">Inherited</label>
+          <select
+            id="inherited"
+            @change=${(e) => {
+            var _a;
+            this.inherited = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+            this.requestUpdate();
+        }}
+          >
+            <option value="Include">Include</option>
+            <option value="Only">Only</option>
+            <option value="None">None</option>
+          </select>
+        </div>
+      </div>
+
+      <div
+        id="main"
+        @scroll=${(e) => {
+            this.onScroll(e);
+        }}
+      >
+        ${this.creatable
+            ? html `
+              <ox-board-creation-card
+                class="card create"
+                .groups=${this.groups}
+                .defaultGroup=${this.group}
+                @create-board=${(e) => this.onCreateBoard(e)}
+              ></ox-board-creation-card>
+            `
+            : html ``}
+        ${this.boards.map(board => html `
+            <div class="card" @click=${(e) => this.onClickSelect(board)} ?selected=${this.value === board.id}>
+              <img src=${board.thumbnail} />
+              <div class="name">${board.name}</div>
+              <div class="description">${board.description}</div>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+    get scrollTargetEl() {
+        return this.renderRoot.querySelector('#main');
+    }
+    async scrollAction() {
+        return this.appendBoards();
+    }
+    firstUpdated() {
+        this.refreshGroups();
+    }
+    async updated(changed) {
+        if (changed.has('group') || changed.has('inherited')) {
+            this.refreshBoards();
+        }
+    }
+    onClickSelect(board) {
+        this.dispatchEvent(new CustomEvent('board-selected', {
+            composed: true,
+            bubbles: true,
+            detail: {
+                board
+            }
+        }));
+    }
+    async onCreateBoard(e) {
+        var { name, description, groupId } = e.detail;
+        await this.createBoard(name, description, groupId);
+        this.refreshBoards();
+    }
+    async refreshGroups() {
+        const groups = await fetchGroupList();
+        this.groups = [...groups];
+        this.group = groups.filter((group) => group.id == this.group).length > 0 ? this.group : '';
+    }
+    async refreshBoards() {
+        var boards = await this.getBoards();
+        this.boards = [...boards];
+        var creationCard = this.renderRoot.querySelector('ox-board-creation-card');
+        if (creationCard) {
+            ;
+            creationCard.reset();
+        }
+    }
+    async appendBoards() {
+        var boards = await this.getBoards({ page: this._page + 1 });
+        this.boards = [...this.boards, ...boards];
+    }
+    async getBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {
+        var filters = [];
+        var sortings = [];
+        var pagination = {
+            limit,
+            page
+        };
+        if (this.group)
+            filters.push({
+                name: 'groupId',
+                operator: 'eq',
+                value: this.group
+            });
+        var variables = {
+            filters,
+            sortings,
+            pagination,
+            inherited: this.inherited || InheritedValueType.Include
+        };
+        const boardList = await fetchBoardList(variables);
+        this._total = boardList.boards.total;
+        this._page = page;
+        return boardList.boards.items;
+    }
+    async createBoard(name, description, groupId) {
+        var model = JSON.stringify({
+            width: 800,
+            height: 600
+        });
+        const { data } = await createBoard({
+            name,
+            description,
+            groupId,
+            model
+        });
+        return data;
+    }
+};
+__decorate([
+    property({ type: Array })
+], BoardSelector.prototype, "groups", void 0);
+__decorate([
+    property({ type: Array })
+], BoardSelector.prototype, "boards", void 0);
+__decorate([
+    property({ type: String })
+], BoardSelector.prototype, "group", void 0);
+__decorate([
+    property({ type: String })
+], BoardSelector.prototype, "inherited", void 0);
+__decorate([
+    property({ type: Boolean })
+], BoardSelector.prototype, "creatable", void 0);
+__decorate([
+    property({ type: String })
+], BoardSelector.prototype, "value", void 0);
+BoardSelector = __decorate([
+    customElement('ox-board-selector')
+], BoardSelector);
+//# sourceMappingURL=ox-board-selector.js.map

package/dist/src/selector/ox-board-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-board-selector.js","sourceRoot":"","sources":["../../../src/selector/ox-board-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-board-creation-card'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'\nimport { InheritedValueType } from '@operato/shell'\nimport { createBoard, fetchBoardList, fetchGroupList } from '@fmsim/api'\n\n@customElement('ox-board-selector')\nexport class BoardSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {\n  static get styles() {\n    return [\n      ScrollbarStyles,\n      css`\n        :host {\n          display: grid;\n          grid-template-rows: auto auto 1fr;\n          overflow: hidden;\n          background-color: var(--popup-content-background-color);\n        }\n\n        #main {\n          overflow: auto;\n          padding: var(--popup-content-padding);\n          display: grid;\n          grid-template-columns: var(--card-list-template);\n          grid-auto-rows: var(--card-list-rows-height);\n          grid-gap: 20px;\n        }\n\n        .card {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          overflow: hidden;\n          border-radius: var(--card-list-border-radius);\n          background-color: var(--card-list-background-color);\n        }\n\n        .card[selected] {\n          border: red solid;\n        }\n\n        .card.create {\n          overflow: visible;\n        }\n\n        .card:hover {\n          cursor: pointer;\n        }\n\n        .card > .name {\n          background-color: var(--board-renderer-name-background-color);\n          opacity: 0.8;\n          margin-top: -35px;\n          width: 100%;\n          color: #fff;\n          font-weight: bolder;\n          font-size: 13px;\n          text-indent: 7px;\n        }\n\n        .card > .description {\n          background-color: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          min-height: 15px;\n          font-size: 0.6rem;\n          color: #fff;\n          text-indent: 7px;\n        }\n        .card img {\n          max-height: 100%;\n          min-height: 100%;\n        }\n\n        #filter {\n          padding: var(--popup-content-padding);\n          background-color: #fff;\n          box-shadow: var(--box-shadow);\n        }\n\n        #filter > div {\n          float: right;\n          margin-left: 10px;\n        }\n\n        #filter * {\n          font-size: 15px;\n        }\n\n        select {\n          text-transform: capitalize;\n        }\n      `\n    ]\n  }\n\n  @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []\n  @property({ type: Array }) boards: any[] = []\n  @property({ type: String }) group?: string\n  @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: String }) value?: string\n\n  private _page: number = 1\n  private _total: number = 0\n\n  constructor() {\n    super()\n\n    this._infiniteScrollOptions.limit = 50\n  }\n\n  render() {\n    return html`\n      <div id=\"filter\">\n        <div>\n          <label for=\"group\">Group</label>\n          <select\n            id=\"group\"\n            @change=${(e: Event) => {\n              this.group = (e.currentTarget as any)?.value\n              this.requestUpdate()\n            }}\n          >\n            <option value=\"\">${i18next.t('label.all')}</option>\n            ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}\n          </select>\n        </div>\n\n        <div>\n          <label for=\"inherited\">Inherited</label>\n          <select\n            id=\"inherited\"\n            @change=${(e: Event) => {\n              this.inherited = (e.currentTarget as any)?.value\n              this.requestUpdate()\n            }}\n          >\n            <option value=\"Include\">Include</option>\n            <option value=\"Only\">Only</option>\n            <option value=\"None\">None</option>\n          </select>\n        </div>\n      </div>\n\n      <div\n        id=\"main\"\n        @scroll=${(e: Event) => {\n          this.onScroll(e)\n        }}\n      >\n        ${this.creatable\n          ? html`\n              <ox-board-creation-card\n                class=\"card create\"\n                .groups=${this.groups}\n                .defaultGroup=${this.group}\n                @create-board=${(e: CustomEvent) => this.onCreateBoard(e)}\n              ></ox-board-creation-card>\n            `\n          : html``}\n        ${this.boards.map(\n          board => html`\n            <div class=\"card\" @click=${(e: Event) => this.onClickSelect(board)} ?selected=${this.value === board.id}>\n              <img src=${board.thumbnail} />\n              <div class=\"name\">${board.name}</div>\n              <div class=\"description\">${board.description}</div>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  get scrollTargetEl(): HTMLElement | null {\n    return this.renderRoot.querySelector('#main') as HTMLElement\n  }\n\n  async scrollAction() {\n    return this.appendBoards()\n  }\n\n  firstUpdated() {\n    this.refreshGroups()\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('group') || changed.has('inherited')) {\n      this.refreshBoards()\n    }\n  }\n\n  onClickSelect(board: any) {\n    this.dispatchEvent(\n      new CustomEvent('board-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          board\n        }\n      })\n    )\n  }\n\n  async onCreateBoard(e: CustomEvent) {\n    var { name, description, groupId } = e.detail\n\n    await this.createBoard(name, description, groupId)\n    this.refreshBoards()\n  }\n\n  async refreshGroups() {\n    const groups = await fetchGroupList()\n\n    this.groups = [...groups]\n\n    this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''\n  }\n\n  async refreshBoards() {\n    var boards = await this.getBoards()\n    this.boards = [...boards]\n\n    var creationCard = this.renderRoot.querySelector('ox-board-creation-card')\n    if (creationCard) {\n      ;(creationCard as any).reset()\n    }\n  }\n\n  async appendBoards() {\n    var boards = await this.getBoards({ page: this._page + 1 })\n    this.boards = [...this.boards, ...boards]\n  }\n\n  async getBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {\n    var filters = []\n    var sortings = [] as any[]\n    var pagination = {\n      limit,\n      page\n    }\n\n    if (this.group)\n      filters.push({\n        name: 'groupId',\n        operator: 'eq',\n        value: this.group\n      })\n\n    var variables = {\n      filters,\n      sortings,\n      pagination,\n      inherited: this.inherited || InheritedValueType.Include\n    }\n\n    const boardList = await fetchBoardList(variables)\n\n    this._total = boardList.boards.total\n    this._page = page\n\n    return boardList.boards.items\n  }\n\n  async createBoard(name: string, description: string, groupId: string) {\n    var model = JSON.stringify({\n      width: 800,\n      height: 600\n    })\n\n    const { data } = await createBoard({\n      name,\n      description,\n      groupId,\n      model\n    })\n\n    return data\n  }\n}\n"]}

package/dist/src/types.d.ts

@@ -0,0 +1,37 @@
+import { Model } from '@hatiolab/things-scene';
+export interface PalletItem {
+    type: string;
+    description: string;
+    icon: HTMLImageElement;
+    group: 'line' | 'shape' | 'textAndMedio' | 'chartAndGauge' | 'table' | 'container' | 'IoT' | '3D' | 'warehouse' | 'form' | 'etc' | string;
+    model: Model;
+}
+export interface Pallet {
+    name: string;
+    templates: PalletItem[];
+}
+export type ComponentTemplate = {
+    type: string;
+    description: string;
+    group: string | string[];
+    icon: any;
+    model: Model;
+};
+export type ComponentGroup = {
+    name: string;
+    description: string;
+    icon: string;
+    templates: ComponentTemplate[];
+};
+export type Board = {
+    id?: string;
+    name?: string;
+    description?: string;
+    model?: any;
+    groupId?: string;
+};
+export type BoardGroup = {
+    id?: string;
+    name?: string;
+    description?: string;
+};

package/dist/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map