@things-factory/dashboard 7.0.1-alpha.5 → 7.0.1-alpha.51

package/dist-client/viewparts/dashboard-setting-let.js

@@ -0,0 +1,219 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/board/ox-board-selector.js';
+import '@operato/i18n/ox-i18n.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers';
+import { openPopup } from '@operato/layout';
+import { i18next, localize } from '@operato/i18n';
+import { store } from '@operato/shell';
+import { client } from '@operato/graphql';
+import { fetchBoardSettings, UPDATE_BOARD_SETTINGS } from '../actions/board-settings';
+import { DASHBOARD, DASHBOARD_DESCRIPTION, DASHBOARD_MOBILE, DASHBOARD_MOBILE_DESCRIPTION, FALLBACK_HOME_BOARD } from '../const';
+let DashboardSettingLet = class DashboardSettingLet extends connect(store)(localize(i18next)(LitElement)) {
+    render() {
+        return html `
+      <setting-let>
+        <ox-i18n slot="title" msgid="title.dashboard setting"></ox-i18n>
+
+        <form slot="content">
+          ${[
+            {
+                title: i18next.t('label.dashboard for desktop'),
+                board: this.dashboard,
+                key: DASHBOARD,
+                description: DASHBOARD_DESCRIPTION
+            },
+            {
+                title: i18next.t('label.dashboard for mobile'),
+                board: this.dashboardMobile,
+                key: DASHBOARD_MOBILE,
+                description: DASHBOARD_MOBILE_DESCRIPTION
+            }
+        ].map(field => html `
+              <div class="field">
+                <label>${field.title}</ox-i18n></label>
+                <div>
+                  <div class="name">${field.board.name}</div>
+                  <span class="description">${field.board.description}</span>
+                  <md-icon @click=${e => this.onClickBoardSelector(field.key, field.description)}>
+                    more_horiz
+                  </md-icon>
+                  ${field.board.id
+            ? html `
+                          <a href=${`board-modeller/${field.board.id}`}>
+                            <img src=${field.board.thumbnail || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'} />
+                          </a>
+                        `
+            : html ``}
+                </div>
+              </div>
+            `)}
+        </form>
+      </setting-let>
+    `;
+    }
+    stateChanged(state) {
+        var dashboard = state.boardSetting[DASHBOARD] || state.boardSetting[FALLBACK_HOME_BOARD];
+        var dashboardMobile = state.boardSetting[DASHBOARD_MOBILE] || dashboard;
+        this.dashboard = (dashboard ? dashboard.board : {}) || {};
+        this.dashboardMobile = (dashboardMobile ? dashboardMobile.board : {}) || {};
+    }
+    onClickBoardSelector(name, description) {
+        var _a, _b;
+        var popup = openPopup(html `
+        <ox-board-selector
+          .creatable=${true}
+          .value=${name == DASHBOARD ? (_a = this.dashboard) === null || _a === void 0 ? void 0 : _a.id : (_b = this.dashboardMobile) === null || _b === void 0 ? void 0 : _b.id}
+          @board-selected=${async (e) => {
+            var board = e.detail.board;
+            await this.saveSettings({
+                name,
+                value: board.id,
+                category: 'board',
+                description
+            });
+            var settings = await fetchBoardSettings([FALLBACK_HOME_BOARD, DASHBOARD, DASHBOARD_MOBILE]);
+            store.dispatch({
+                type: UPDATE_BOARD_SETTINGS,
+                settings: settings.reduce((settings, setting) => {
+                    settings[setting.name] = setting;
+                    return settings;
+                }, {})
+            });
+            popup.close();
+            this.requestUpdate();
+        }}
+        ></ox-board-selector>
+      `, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('title.dashboard setting')
+        });
+    }
+    async saveSettings({ name, value, category, description }) {
+        if (!(name && value)) {
+            return;
+        }
+        await client.query({
+            query: gql `
+        mutation UpdateSetting($patch: SettingPatch!, $name: String!) {
+          updateSetting(patch: $patch, name: $name) {
+            name
+            value
+          }
+        }
+      `,
+            variables: {
+                name,
+                patch: {
+                    name,
+                    description,
+                    category,
+                    value
+                }
+            }
+        });
+    }
+};
+DashboardSettingLet.styles = [
+    css `
+      div.field {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        max-width: 100%;
+        overflow: hidden;
+      }
+
+      div.field > * {
+        flex: none;
+      }
+
+      div.field > div {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      div.field a {
+        overflow: hidden;
+        border: var(--border-dark-color);
+        border-radius: var(--border-radius);
+        background-color: rgba(0, 0, 0, 0.1);
+        min-width: 50px;
+        min-height: 50px;
+      }
+
+      div.field img {
+        max-height: 250px;
+        max-width: 100%;
+      }
+
+      .name {
+        color: var(--secondary-color, #394e64);
+      }
+
+      .description {
+        font-size: 0.7rem;
+        opacity: 0.7;
+        color: var(--secondary-text-color);
+      }
+
+      label {
+        width: 80px;
+        padding-right: var(--padding-default);
+        font: bold 0.9em var(--theme-font);
+      }
+
+      setting-let > form {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+      }
+
+      md-icon {
+        --md-icon-size: 18px;
+        margin: 2px 2px 5px 2px;
+        padding: 0 var(--padding-default);
+        color: var(--theme-white-color, #fff);
+        background-color: var(--secondary-color, #394e64);
+        border-radius: var(--border-radius, 5px);
+        border: var(--button-border, 1px solid transparent);
+      }
+
+      md-icon:hover,
+      md-icon:active {
+        background-color: var(--button-active-background-color, #22a6a7);
+      }
+
+      @media screen and (max-width: 460px) {
+        setting-let > form {
+          display: flex;
+          flex-direction: column;
+        }
+        div.field {
+          border-bottom: var(--border-dark-color);
+          padding: var(--padding-default);
+        }
+        md-icon {
+          padding: var(--padding-narrow) var(--padding-default);
+        }
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DashboardSettingLet.prototype, "dashboard", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DashboardSettingLet.prototype, "dashboardMobile", void 0);
+DashboardSettingLet = __decorate([
+    customElement('dashboard-setting-let')
+], DashboardSettingLet);
+export { DashboardSettingLet };
+//# sourceMappingURL=dashboard-setting-let.js.map

package/dist-client/viewparts/dashboard-setting-let.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-setting-let.js","sourceRoot":"","sources":["../../client/viewparts/dashboard-setting-let.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/board/ox-board-selector.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { openPopup } from '@operato/layout'\nimport { i18next, localize } from '@operato/i18n'\nimport { store } from '@operato/shell'\nimport { client } from '@operato/graphql'\n\nimport { fetchBoardSettings, UPDATE_BOARD_SETTINGS } from '../actions/board-settings'\nimport { DASHBOARD, DASHBOARD_DESCRIPTION, DASHBOARD_MOBILE, DASHBOARD_MOBILE_DESCRIPTION, FALLBACK_HOME_BOARD } from '../const'\n\n@customElement('dashboard-setting-let')\nexport class DashboardSettingLet extends connect(store)(localize(i18next)(LitElement)) {\n  static styles = [\n    css`\n      div.field {\n        display: flex;\n        flex-direction: row;\n        align-items: flex-start;\n        max-width: 100%;\n        overflow: hidden;\n      }\n\n      div.field > * {\n        flex: none;\n      }\n\n      div.field > div {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n      }\n\n      div.field a {\n        overflow: hidden;\n        border: var(--border-dark-color);\n        border-radius: var(--border-radius);\n        background-color: rgba(0, 0, 0, 0.1);\n        min-width: 50px;\n        min-height: 50px;\n      }\n\n      div.field img {\n        max-height: 250px;\n        max-width: 100%;\n      }\n\n      .name {\n        color: var(--secondary-color, #394e64);\n      }\n\n      .description {\n        font-size: 0.7rem;\n        opacity: 0.7;\n        color: var(--secondary-text-color);\n      }\n\n      label {\n        width: 80px;\n        padding-right: var(--padding-default);\n        font: bold 0.9em var(--theme-font);\n      }\n\n      setting-let > form {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n      }\n\n      md-icon {\n        --md-icon-size: 18px;\n        margin: 2px 2px 5px 2px;\n        padding: 0 var(--padding-default);\n        color: var(--theme-white-color, #fff);\n        background-color: var(--secondary-color, #394e64);\n        border-radius: var(--border-radius, 5px);\n        border: var(--button-border, 1px solid transparent);\n      }\n\n      md-icon:hover,\n      md-icon:active {\n        background-color: var(--button-active-background-color, #22a6a7);\n      }\n\n      @media screen and (max-width: 460px) {\n        setting-let > form {\n          display: flex;\n          flex-direction: column;\n        }\n        div.field {\n          border-bottom: var(--border-dark-color);\n          padding: var(--padding-default);\n        }\n        md-icon {\n          padding: var(--padding-narrow) var(--padding-default);\n        }\n      }\n    `\n  ]\n\n  @state() private dashboard: any\n  @state() private dashboardMobile: any\n\n  render() {\n    return html`\n      <setting-let>\n        <ox-i18n slot=\"title\" msgid=\"title.dashboard setting\"></ox-i18n>\n\n        <form slot=\"content\">\n          ${[\n            {\n              title: i18next.t('label.dashboard for desktop'),\n              board: this.dashboard,\n              key: DASHBOARD,\n              description: DASHBOARD_DESCRIPTION\n            },\n            {\n              title: i18next.t('label.dashboard for mobile'),\n              board: this.dashboardMobile,\n              key: DASHBOARD_MOBILE,\n              description: DASHBOARD_MOBILE_DESCRIPTION\n            }\n          ].map(\n            field => html`\n              <div class=\"field\">\n                <label>${field.title}</ox-i18n></label>\n                <div>\n                  <div class=\"name\">${field.board.name}</div>\n                  <span class=\"description\">${field.board.description}</span>\n                  <md-icon @click=${e => this.onClickBoardSelector(field.key, field.description)}>\n                    more_horiz\n                  </md-icon>\n                  ${\n                    field.board.id\n                      ? html`\n                          <a href=${`board-modeller/${field.board.id}`}>\n                            <img src=${field.board.thumbnail || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'} />\n                          </a>\n                        `\n                      : html``\n                  }\n                </div>\n              </div>\n            `\n          )}\n        </form>\n      </setting-let>\n    `\n  }\n\n  stateChanged(state: any) {\n    var dashboard = state.boardSetting[DASHBOARD] || state.boardSetting[FALLBACK_HOME_BOARD]\n    var dashboardMobile = state.boardSetting[DASHBOARD_MOBILE] || dashboard\n\n    this.dashboard = (dashboard ? dashboard.board : {}) || {}\n    this.dashboardMobile = (dashboardMobile ? dashboardMobile.board : {}) || {}\n  }\n\n  onClickBoardSelector(name: string, description: string) {\n    var popup = openPopup(\n      html`\n        <ox-board-selector\n          .creatable=${true}\n          .value=${name == DASHBOARD ? this.dashboard?.id : this.dashboardMobile?.id}\n          @board-selected=${async e => {\n            var board = e.detail.board\n\n            await this.saveSettings({\n              name,\n              value: board.id,\n              category: 'board',\n              description\n            })\n\n            var settings = await fetchBoardSettings([FALLBACK_HOME_BOARD, DASHBOARD, DASHBOARD_MOBILE])\n            store.dispatch({\n              type: UPDATE_BOARD_SETTINGS,\n              settings: settings.reduce((settings, setting) => {\n                settings[setting.name] = setting\n                return settings\n              }, {})\n            })\n\n            popup.close()\n            this.requestUpdate()\n          }}\n        ></ox-board-selector>\n      `,\n      {\n        backdrop: true,\n        size: 'large',\n        title: i18next.t('title.dashboard setting')\n      }\n    )\n  }\n\n  async saveSettings({ name, value, category, description }) {\n    if (!(name && value)) {\n      return\n    }\n\n    await client.query({\n      query: gql`\n        mutation UpdateSetting($patch: SettingPatch!, $name: String!) {\n          updateSetting(patch: $patch, name: $name) {\n            name\n            value\n          }\n        }\n      `,\n      variables: {\n        name,\n        patch: {\n          name,\n          description,\n          category,\n          value\n        }\n      }\n    })\n  }\n}\n"]}

package/dist-server/index.js

@@ -2,5 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./service"), exports);
-tslib_1.__exportStar(require("./migrations"), exports);
 //# sourceMappingURL=index.js.map

package/dist-server/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../server/index.ts"],"names":[],"mappings":";;;AAAA,oDAAyB;AACzB,uDAA4B","sourcesContent":["export * from './service'\nexport * from './migrations'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../server/index.ts"],"names":[],"mappings":";;;AAAA,oDAAyB","sourcesContent":["export * from './service'\n"]}