@things-factory/dashboard 9.2.5 → 10.0.0-beta.10

package/dist-client/viewparts/dashboard-setting-let.d.ts

@@ -2,19 +2,16 @@ import '@material/web/icon/icon.js';
 import '@operato/board/ox-board-selector.js';
 import '@operato/i18n/ox-i18n.js';
 import { LitElement } from 'lit';
-declare const DashboardSettingLet_base: (new (...args: any[]) => {
-    _storeUnsubscribe: import("redux").Unsubscribe;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    stateChanged(_state: unknown): void;
-    readonly isConnected: boolean;
-}) & (new (...args: any[]) => LitElement) & typeof LitElement;
+declare const DashboardSettingLet_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 export declare class DashboardSettingLet extends DashboardSettingLet_base {
     static styles: import("lit").CSSResult[];
     private dashboard;
     private dashboardMobile;
     render(): import("lit-html").TemplateResult<1>;
-    stateChanged(state: any): void;
+    private _unsubscribe?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _applyState;
     onClickBoardSelector(name: string, description: string): void;
     saveSettings({ name, value, category, description }: {
         name: any;

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

@@ -5,14 +5,13 @@ 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)) {
+let DashboardSettingLet = class DashboardSettingLet extends localize(i18next)(LitElement) {
     static { this.styles = [
         css `
       div.field {
@@ -144,9 +143,19 @@ let DashboardSettingLet = class DashboardSettingLet extends connect(store)(local
       </setting-let>
     `;
     }
-    stateChanged(state) {
-        var dashboard = state.boardSetting[DASHBOARD] || state.boardSetting[FALLBACK_HOME_BOARD];
-        var dashboardMobile = state.boardSetting[DASHBOARD_MOBILE] || dashboard;
+    connectedCallback() {
+        super.connectedCallback();
+        this._applyState();
+        this._unsubscribe = store.subscribe(() => this._applyState());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unsubscribe?.();
+    }
+    _applyState() {
+        const __state__ = store.getState();
+        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 : {}) || {};
     }

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

@@ -1 +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 {\n  DASHBOARD,\n  DASHBOARD_DESCRIPTION,\n  DASHBOARD_MOBILE,\n  DASHBOARD_MOBILE_DESCRIPTION,\n  FALLBACK_HOME_BOARD\n} 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-dim-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(--md-sys-color-on-secondary-container);\n      }\n\n      .description {\n        font-size: 0.7rem;\n        opacity: 0.7;\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      label {\n        width: 80px;\n        padding-right: var(--spacing-medium);\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(--spacing-medium);\n        color: var(--md-sys-on-secondary-container, #fff);\n        background-color: var(--md-sys-secondary-container, #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-dim-color);\n          padding: var(--spacing-medium);\n        }\n        md-icon {\n          padding: var(--spacing-small) var(--spacing-medium);\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\n                              src=${field.board.thumbnail ||\n                              'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'}\n                            />\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"]}
+{"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 { 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 {\n  DASHBOARD,\n  DASHBOARD_DESCRIPTION,\n  DASHBOARD_MOBILE,\n  DASHBOARD_MOBILE_DESCRIPTION,\n  FALLBACK_HOME_BOARD\n} from '../const'\n\n@customElement('dashboard-setting-let')\nexport class DashboardSettingLet extends 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-dim-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(--md-sys-color-on-secondary-container);\n      }\n\n      .description {\n        font-size: 0.7rem;\n        opacity: 0.7;\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      label {\n        width: 80px;\n        padding-right: var(--spacing-medium);\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(--spacing-medium);\n        color: var(--md-sys-on-secondary-container, #fff);\n        background-color: var(--md-sys-secondary-container, #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-dim-color);\n          padding: var(--spacing-medium);\n        }\n        md-icon {\n          padding: var(--spacing-small) var(--spacing-medium);\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\n                              src=${field.board.thumbnail ||\n                              'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'}\n                            />\n                          </a>\n                        `\n                      : html``\n                  }\n                </div>\n              </div>\n            `\n          )}\n        </form>\n      </setting-let>\n    `\n  }\n\n  private _unsubscribe?: () => void\n\n\n  connectedCallback() {\n\n    super.connectedCallback()\n\n    this._applyState()\n\n    this._unsubscribe = store.subscribe(() => this._applyState())\n\n  }\n\n\n  disconnectedCallback() {\n\n    super.disconnectedCallback()\n\n    this._unsubscribe?.()\n\n  }\n\n\n  private _applyState() {\n\n    const __state__ = store.getState() as any\nvar 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\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/dashboard",
-  "version": "9.2.5",
+  "version": "10.0.0-beta.10",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -26,10 +26,10 @@
     "clean": "npm run clean:server && npm run clean:client"
   },
   "dependencies": {
-    "@things-factory/auth-base": "^9.2.5",
-    "@things-factory/board-service": "^9.2.5",
-    "@things-factory/board-ui": "^9.2.5",
-    "@things-factory/setting-base": "^9.2.5"
+    "@things-factory/auth-base": "^10.0.0-beta.10",
+    "@things-factory/board-service": "^10.0.0-beta.10",
+    "@things-factory/board-ui": "^10.0.0-beta.10",
+    "@things-factory/setting-base": "^10.0.0-beta.10"
   },
-  "gitHead": "d3622f475ae3bab84322d31b064cc4cda20f7062"
+  "gitHead": "95acadd39e9a0ff3b2f34d9f7082142395903179"
 }