npm - @things-factory/menu-ui - Versions diffs - 10.1.27 → 10.1.28 - Mend

@things-factory/menu-ui 10.1.27 → 10.1.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist-client/pages/menu-management.js +3 -6
package/dist-client/pages/menu-management.js.map +1 -1
package/dist-client/pages/role-menus-management.js +31 -45
package/dist-client/pages/role-menus-management.js.map +1 -1
package/dist-client/tsconfig.tsbuildinfo +1 -1
package/package.json +6 -6

package/dist-client/pages/menu-management.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { openPopup } from '@operato/layout';
 import { i18next, localize } from '@operato/i18n';
-import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles';
+import { CommonButtonStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles';
 import { isMobileDevice } from '@operato/utils';
 import { client, PageView } from '@things-factory/shell/client';
 import { gqlBuilder } from '@things-factory/utils/src';
@@ -19,13 +19,10 @@ let MenuManagement = class MenuManagement extends localize(i18next)(PageView) {
         this.searchFields = [];
     }
     static { this.styles = [
+        /* The work surface frame for a list screen (ADR-0060 decision 8). */
+        WorkSurfacePageStyles,
         ScrollbarStyles,
         css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
       search-form {
         overflow: visible;

package/dist-client/pages/menu-management.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-management.js","sourceRoot":"","sources":["../../client/pages/menu-management.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/form-ui'\nimport '@operato/data-grist'\nimport './menu-management-detail'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { openPopup } from '@operato/layout'\nimport { i18next, localize } from '@operato/i18n'\nimport { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\nimport { client, PageView } from '@things-factory/shell/client'\nimport { gqlBuilder } from '@things-factory/utils/src'\n\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { DataGrist, FetchOption } from '@operato/data-grist'\n\n@customElement('menu-management')\nclass MenuManagement extends localize(i18next)(PageView) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n search-form {\n overflow: visible;\n }\n\n ox-grist {\n overflow-y: auto;\n flex: 1;\n }\n `\n ]\n\n @property({ type: Array }) searchFields: any[] = []\n @property({ type: Object }) config: any\n @property({ type: Object }) data: any\n\n @query('ox-grist') dataGrist!: DataGrist\n @query('search-form') searchForm!: HTMLFormElement\n\n render() {\n return html`\n <search-form .fields=${this.searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>\n\n <ox-grist\n .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n .config=${this.config}\n .fetchHandler=\"${this.fetchHandler.bind(this)}\"\n ></ox-grist>\n `\n }\n\n get context() {\n return {\n title: i18next.t('title.menu_management'),\n actions: [\n {\n title: i18next.t('button.save'),\n action: this.save.bind(this),\n ...CommonButtonStyles.save\n },\n {\n title: i18next.t('button.delete'),\n action: this.delete.bind(this),\n ...CommonButtonStyles.delete\n }\n ]\n }\n }\n\n pageUpdated(_changes, _lifecycle) {\n if (this.active) {\n this.dataGrist.fetch()\n }\n }\n\n pageInitialized() {\n this.searchFields = [\n {\n name: 'name',\n label: i18next.t('label.name'),\n type: 'text',\n props: { searchOper: 'i_like' }\n },\n {\n name: 'description',\n label: i18next.t('label.description'),\n type: 'text',\n props: { searchOper: 'i_like' }\n }\n ]\n\n this.config = {\n rows: { selectable: { multiple: true } },\n columns: [\n { type: 'gutter', gutterName: 'dirty' },\n { type: 'gutter', gutterName: 'sequence' },\n { type: 'gutter', gutterName: 'row-selector', multiple: true },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'reorder',\n handlers: {\n click: (_columns, _data, _column, record, _rowIndex) => {\n if (record.id && record.name) this.openMenuDetail(record.id, record.name)\n }\n }\n },\n {\n type: 'string',\n name: 'name',\n header: i18next.t('field.name'),\n record: { editable: true, align: 'left' },\n sortable: true,\n width: 150\n },\n {\n type: 'integer',\n name: 'rank',\n header: i18next.t('field.rank'),\n record: { editable: true },\n sortable: true,\n width: 80\n },\n {\n type: 'string',\n name: 'description',\n header: i18next.t('field.description'),\n record: { editable: true, align: 'left' },\n sortable: true,\n width: 200\n },\n {\n type: 'boolean',\n name: 'hiddenFlag',\n header: i18next.t('field.hidden_flag'),\n record: { editable: false },\n sortable: true,\n width: 80\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: i18next.t('field.updated_at'),\n record: { editable: false },\n sortable: true,\n width: 150\n },\n {\n type: 'object',\n name: 'updater',\n header: i18next.t('field.updater'),\n record: { editable: false },\n sortable: true,\n width: 150\n }\n ]\n }\n }\n\n async fetchHandler({ page, limit, sorters = [{ name: 'rank' }, { name: 'name' }] }: FetchOption) {\n const response = await client.query({\n query: gql`\n query {\n menus(${gqlBuilder.buildArgs({\n filters: [...this.searchForm.queryFilters, { name: 'menuType', operator: 'eq', value: 'MENU' }],\n pagination: { page, limit },\n sortings: sorters\n })}) {\n items {\n id\n name\n rank\n description\n hiddenFlag\n updatedAt\n updater{\n id\n name\n description\n }\n }\n total\n }\n }\n `\n })\n\n return {\n total: response.data.menus.total \|\| 0,\n records: response.data.menus.items \|\| []\n }\n }\n\n async save() {\n const patches = this.getPatches()\n if (patches && patches.length) {\n const response = await client.query({\n query: gql`\n mutation {\n updateMultipleMenu(${gqlBuilder.buildArgs({\n patches\n })}) {\n name\n }\n }\n `\n })\n\n if (!response.errors) this.dataGrist.fetch()\n } else {\n OxPrompt.open({\n title: i18next.t('text.nothing_changed'),\n text: i18next.t('text.there_is_nothing_to_save')\n })\n }\n }\n\n async delete() {\n const ids = this.dataGrist.selected.map(record => record.id)\n if (ids && ids.length > 0) {\n if (\n await OxPrompt.open({\n type: 'warning',\n title: i18next.t('button.delete'),\n text: i18next.t('text.are_you_sure'),\n confirmButton: { text: i18next.t('button.delete') },\n cancelButton: { text: i18next.t('button.cancel') }\n })\n ) {\n const response = await client.query({\n query: gql`\n mutation {\n deleteMenus(${gqlBuilder.buildArgs({ ids })})\n }\n `\n })\n\n if (!response.errors) {\n this.dataGrist.fetch()\n }\n }\n } else {\n OxPrompt.open({\n title: i18next.t('text.nothing_selected'),\n text: i18next.t('text.there_is_nothing_to_delete')\n })\n }\n }\n\n getPatches() {\n let patches = this.dataGrist.dirtyRecords\n\n if (patches && patches.length) {\n patches = patches.map(menu => {\n let patchField: any = menu.id ? { id: menu.id } : {}\n const dirtyFields = menu.__dirtyfields__\n for (let key in dirtyFields) {\n patchField[key] = dirtyFields[key].after\n }\n\n patchField.cuFlag = menu.__dirty__\n patchField.menuType = 'MENU'\n\n return patchField\n })\n }\n\n return patches\n }\n\n openMenuDetail(menuId, menuName) {\n openPopup(html` <menu-management-detail .menuId=${menuId}></menu-management-detail> `, {\n backdrop: true,\n size: 'large',\n title: `${i18next.t('title.menu_management_detail')} - ${menuName}`\n })\n }\n}\n"]}
1	+ {"version":3,"file":"menu-management.js","sourceRoot":"","sources":["../../client/pages/menu-management.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/form-ui'\nimport '@operato/data-grist'\nimport './menu-management-detail'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { openPopup } from '@operato/layout'\nimport { i18next, localize } from '@operato/i18n'\nimport { CommonButtonStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\nimport { client, PageView } from '@things-factory/shell/client'\nimport { gqlBuilder } from '@things-factory/utils/src'\n\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { DataGrist, FetchOption } from '@operato/data-grist'\n\n@customElement('menu-management')\nclass MenuManagement extends localize(i18next)(PageView) {\n static styles = [\n /* The work surface frame for a list screen (ADR-0060 decision 8). */\n WorkSurfacePageStyles,\n ScrollbarStyles,\n css`\n\n search-form {\n overflow: visible;\n }\n\n ox-grist {\n overflow-y: auto;\n flex: 1;\n }\n `\n ]\n\n @property({ type: Array }) searchFields: any[] = []\n @property({ type: Object }) config: any\n @property({ type: Object }) data: any\n\n @query('ox-grist') dataGrist!: DataGrist\n @query('search-form') searchForm!: HTMLFormElement\n\n render() {\n return html`\n <search-form .fields=${this.searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>\n\n <ox-grist\n .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n .config=${this.config}\n .fetchHandler=\"${this.fetchHandler.bind(this)}\"\n ></ox-grist>\n `\n }\n\n get context() {\n return {\n title: i18next.t('title.menu_management'),\n actions: [\n {\n title: i18next.t('button.save'),\n action: this.save.bind(this),\n ...CommonButtonStyles.save\n },\n {\n title: i18next.t('button.delete'),\n action: this.delete.bind(this),\n ...CommonButtonStyles.delete\n }\n ]\n }\n }\n\n pageUpdated(_changes, _lifecycle) {\n if (this.active) {\n this.dataGrist.fetch()\n }\n }\n\n pageInitialized() {\n this.searchFields = [\n {\n name: 'name',\n label: i18next.t('label.name'),\n type: 'text',\n props: { searchOper: 'i_like' }\n },\n {\n name: 'description',\n label: i18next.t('label.description'),\n type: 'text',\n props: { searchOper: 'i_like' }\n }\n ]\n\n this.config = {\n rows: { selectable: { multiple: true } },\n columns: [\n { type: 'gutter', gutterName: 'dirty' },\n { type: 'gutter', gutterName: 'sequence' },\n { type: 'gutter', gutterName: 'row-selector', multiple: true },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'reorder',\n handlers: {\n click: (_columns, _data, _column, record, _rowIndex) => {\n if (record.id && record.name) this.openMenuDetail(record.id, record.name)\n }\n }\n },\n {\n type: 'string',\n name: 'name',\n header: i18next.t('field.name'),\n record: { editable: true, align: 'left' },\n sortable: true,\n width: 150\n },\n {\n type: 'integer',\n name: 'rank',\n header: i18next.t('field.rank'),\n record: { editable: true },\n sortable: true,\n width: 80\n },\n {\n type: 'string',\n name: 'description',\n header: i18next.t('field.description'),\n record: { editable: true, align: 'left' },\n sortable: true,\n width: 200\n },\n {\n type: 'boolean',\n name: 'hiddenFlag',\n header: i18next.t('field.hidden_flag'),\n record: { editable: false },\n sortable: true,\n width: 80\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: i18next.t('field.updated_at'),\n record: { editable: false },\n sortable: true,\n width: 150\n },\n {\n type: 'object',\n name: 'updater',\n header: i18next.t('field.updater'),\n record: { editable: false },\n sortable: true,\n width: 150\n }\n ]\n }\n }\n\n async fetchHandler({ page, limit, sorters = [{ name: 'rank' }, { name: 'name' }] }: FetchOption) {\n const response = await client.query({\n query: gql`\n query {\n menus(${gqlBuilder.buildArgs({\n filters: [...this.searchForm.queryFilters, { name: 'menuType', operator: 'eq', value: 'MENU' }],\n pagination: { page, limit },\n sortings: sorters\n })}) {\n items {\n id\n name\n rank\n description\n hiddenFlag\n updatedAt\n updater{\n id\n name\n description\n }\n }\n total\n }\n }\n `\n })\n\n return {\n total: response.data.menus.total \|\| 0,\n records: response.data.menus.items \|\| []\n }\n }\n\n async save() {\n const patches = this.getPatches()\n if (patches && patches.length) {\n const response = await client.query({\n query: gql`\n mutation {\n updateMultipleMenu(${gqlBuilder.buildArgs({\n patches\n })}) {\n name\n }\n }\n `\n })\n\n if (!response.errors) this.dataGrist.fetch()\n } else {\n OxPrompt.open({\n title: i18next.t('text.nothing_changed'),\n text: i18next.t('text.there_is_nothing_to_save')\n })\n }\n }\n\n async delete() {\n const ids = this.dataGrist.selected.map(record => record.id)\n if (ids && ids.length > 0) {\n if (\n await OxPrompt.open({\n type: 'warning',\n title: i18next.t('button.delete'),\n text: i18next.t('text.are_you_sure'),\n confirmButton: { text: i18next.t('button.delete') },\n cancelButton: { text: i18next.t('button.cancel') }\n })\n ) {\n const response = await client.query({\n query: gql`\n mutation {\n deleteMenus(${gqlBuilder.buildArgs({ ids })})\n }\n `\n })\n\n if (!response.errors) {\n this.dataGrist.fetch()\n }\n }\n } else {\n OxPrompt.open({\n title: i18next.t('text.nothing_selected'),\n text: i18next.t('text.there_is_nothing_to_delete')\n })\n }\n }\n\n getPatches() {\n let patches = this.dataGrist.dirtyRecords\n\n if (patches && patches.length) {\n patches = patches.map(menu => {\n let patchField: any = menu.id ? { id: menu.id } : {}\n const dirtyFields = menu.__dirtyfields__\n for (let key in dirtyFields) {\n patchField[key] = dirtyFields[key].after\n }\n\n patchField.cuFlag = menu.__dirty__\n patchField.menuType = 'MENU'\n\n return patchField\n })\n }\n\n return patches\n }\n\n openMenuDetail(menuId, menuName) {\n openPopup(html` <menu-management-detail .menuId=${menuId}></menu-management-detail> `, {\n backdrop: true,\n size: 'large',\n title: `${i18next.t('title.menu_management_detail')} - ${menuName}`\n })\n }\n}\n"]}

package/dist-client/pages/role-menus-management.js CHANGED Viewed

@@ -9,43 +9,25 @@ import { customElement, property } from 'lit/decorators.js';
 import { openPopup } from '@operato/layout';
 import { i18next, localize } from '@operato/i18n';
 import { client, PageView } from '@things-factory/shell/client';
+import { DocumentPageStyles } from '@operato/styles';
 let RoleMenusManagement = class RoleMenusManagement extends localize(i18next)(PageView) {
     constructor() {
         super(...arguments);
         this.parentMenus = [];
     }
     static { this.styles = [
+        /*
+         * A screen that is read and edited down one column (ADR-0060 decision 8). The frame owns the
+         * width, the padding and the spacing between sections; what is left here is this screen's own
+         * controls.
+         */
+        DocumentPageStyles,
         css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--md-sys-color-background);
-        padding: var(--spacing-large);
-        overflow: auto;
-      }
       [input-container] {
         display: flex;
-        background-color: var(--md-sys-color-surface);
-        margin: var(--spacing-large) 0;
-        padding: var(--spacing-large);
-        border-radius: var(--border-radius);
-        box-shadow: var(--box-shadow);
-        clear: both;
+        align-items: center;
         gap: 10px;
       }
-      md-filled-button {
-        margin: auto;
-      }
-      h2 {
-        margin: var(--title-margin);
-        font: var(--title-font);
-        color: var(--title-text-color);
-      }
-      [subtitle] {
-        padding: var(--subtitle-padding);
-        font: var(--subtitle-font);
-        color: var(--subtitle-text-color);
-      }
       input {
         background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
         color: var(--input-field-color, var(--md-sys-color-on-surface));
@@ -73,31 +55,35 @@ let RoleMenusManagement = class RoleMenusManagement extends localize(i18next)(Pa
     render() {
         const data = { menus: this.parentMenus || [] };
         const menuSet = this.menuSet || {};
+        /* The screen name is in the title bar, so the h2 that used to sit here said it a second time. */
         return html `
-      <h2>${i18next.t('title.menus_by_role')}</h2>
-      <div subtitle>${i18next.t('field.role')}</div>
-      <div input-container>
-        <label><input name="name" type="text" disabled /></label>
-        <md-filled-button @click=${() => this.onSelectRole()}>${i18next.t('button.select')}</md-filled-button>
-      </div>
+      <div class="page">
+        <section class="page-section">
+          <header class="page-section-header"><h3>${i18next.t('field.role')}</h3></header>
+          <div class="page-card" input-container>
+            <label><input name="name" type="text" disabled /></label>
+            <md-filled-button @click=${() => this.onSelectRole()}>${i18next.t('button.select')}</md-filled-button>
+          </div>
+        </section>
-      <div subtitle>${i18next.t('title.menus')}</div>
-      <div id="children-menus">
-        <div>
-          <quick-find-list
-            .data="${data}"
-            .contentRenderer="${(item, tabKey) => this.targetRole
+        <section class="page-section">
+          <header class="page-section-header"><h3>${i18next.t('title.menus')}</h3></header>
+          <div id="children-menus">
+            <quick-find-list
+              .data="${data}"
+              .contentRenderer="${(item, tabKey) => this.targetRole
             ? html `<child-menus-selector
-                    @updateRoleMenus="${async () => {
+                      @updateRoleMenus="${async () => {
                 await this.getMenus(this.targetRole);
             }}"
-                    .parentMenu=${item}
-                    .roleMenus=${menuSet[item.name]}
-                    .targetRole=${this.targetRole}
-                  ></child-menus-selector>`
+                      .parentMenu=${item}
+                      .roleMenus=${menuSet[item.name]}
+                      .targetRole=${this.targetRole}
+                    ></child-menus-selector>`
             : this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.role') }))}"
-          ></quick-find-list>
-        </div>
+            ></quick-find-list>
+          </div>
+        </section>
       </div>
     `;
     }

package/dist-client/pages/role-menus-management.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"role-menus-management.js","sourceRoot":"","sources":["../../client/pages/role-menus-management.ts"],"names":[],"mappings":";AAAA,OAAO,uCAAuC,CAAA;AAC9C,OAAO,8BAA8B,CAAA;AACrC,OAAO,iCAAiC,CAAA;AACxC,OAAO,oCAAoC,CAAA;AAE3C,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAA;~~AAG~~/D,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IAA7D;;~~QAsD6B~~,gBAAW,GAAU,EAAE,CAAA;~~IA8IpD~~,CAAC;~~aAnMQ~~,WAAM,GAAG;QACd,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDF~~;KACF,~~AAlDY~~,~~CAkDZ~~;IAQD,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC;SAChD,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,IAAI,EAAE,EAAE,CAAA;QAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAElC,OAAO,IAAI,CAAA~~;YACH~~,OAAO,CAAC,CAAC,CAAC,~~qBAAqB,CAAC;sBACtB,OAAO,CAAC,CAAC,CAAC,~~YAAY,CAAC;;;~~mCAGV~~,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC~~;;;sBAGpE~~,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC~~;;;;qBAIzB~~,IAAI;~~gCACO~~,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CACnC,IAAI,CAAC,UAAU;YACb,CAAC,CAAC,IAAI,CAAA;~~wCACkB~~,KAAK,IAAI,EAAE;gBAC7B,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;YACtC,CAAC;~~kCACa~~,IAAI;~~iCACL~~,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;~~kCACjB~~,IAAI,CAAC,UAAU;~~2CACN~~;YAC3B,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC~~;;;;KAIlG~~,CAAA;IACH,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAA;IACnE,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,OAAO;QACvB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,OAAO,EAAE,CAAA;QAChB,CAAC;IACH,CAAC;IAED,KAAK,CAAC,OAAO;QACX,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;OAeT;YACD,SAAS,EAAE;gBACT,OAAO,EAAE,EAAE;gBACX,UAAU,EAAE,EAAE;gBACd,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;aAC7B;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;YAC7B,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAA;YAC7C,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAChE,CAAC;IACH,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,UAAU;QACvB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;OAcT;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,UAAU,CAAC,EAAE;aACtB;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;YAC7B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,CAAA;YACpD,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE;gBAC7D,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;gBACnC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;oBAAE,OAAO,CAAC,UAAU,CAAC,GAAG,EAAE,CAAA;gBAClD,OAAO,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBAE9B,OAAO,OAAO,CAAA;YAChB,CAAC,EAAE,EAAE,CAAC,CAAA;QACR,CAAC;IACH,CAAC;IAED,YAAY;QACV,SAAS,CACP,IAAI,CAAA;;uBAEa,CAAC,CAAC,EAAE;YACf,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAA;YAC5B,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAA;YAC7C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,IAAI,EAAE,CAAA;YACzC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QAChC,CAAC;;OAEJ,EACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,EAAE;SAC3C,CACF,CAAA;IACH,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAA;IACrG,CAAC;;~~AA9I2B~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAAkB;AAClB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;wDAAwB;AACvB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;sDAAe;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAa;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAgB;~~AAzDvC~~,mBAAmB;IADxB,aAAa,CAAC,uBAAuB,CAAC;GACjC,mBAAmB,~~CAoMxB~~","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@things-factory/component-ui'\nimport '../components/role-select-popup'\nimport '../components/child-menus-selector'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { openPopup } from '@operato/layout'\nimport { i18next, localize } from '@operato/i18n'\nimport { client, PageView } from '@things-factory/shell/client'\n\n@customElement('role-menus-management')\nclass RoleMenusManagement extends localize(i18next)(PageView) {\n static styles = [\n ~~css`\~~n ~~:host~~ ~~{\n display:~~ ~~flex;\n flex-direction:~~ column~~;\n background-color:~~ ~~var~~(~~--md~~-~~sys-color-background);\n padding:~~ ~~var(--spacing-large~~)~~;\n overflow:~~ ~~auto;\n }\n [input-container]~~ {\n ~~display:~~ ~~flex;\n background-color:~~ ~~var(--md-sys-color-surface);\n margin:~~ ~~var(--spacing-large) 0;\n~~ padding: ~~var(--~~spacing~~-large);\n border-radius:~~ ~~var(--border-radius);\n box-shadow:~~ ~~var(--box-shadow);\n clear:~~ ~~both;\n gap:~~ ~~10px;\n }\n md-filled-button~~ ~~{\n margin:~~ ~~auto;\n }\n h2~~ {\n ~~margin:~~ ~~var(--title-margin);\~~n ~~font: var(--title-font);\~~n ~~color: var(--title-text-color);\~~n }\n [~~subtitle~~] {\n ~~padding~~: ~~var(--subtitle-padding)~~;\n ~~font~~: ~~var(--subtitle-font)~~;\n ~~color~~: ~~var(--subtitle-text-color)~~;\n }\n input {\n background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n color: var(--input-field-color, var(--md-sys-color-on-surface));\n border: var(--border-dim-color);\n border-radius: var(--border-radius);\n padding: var(--input-padding);\n min-width: 250px;\n font: var(--input-font);\n }\n label {\n display: flex;\n }\n @media screen and (max-width: 480px) {\n input {\n min-width: 0;\n }\n }\n `\n ]\n\n @property({ type: Object }) selectedRole: any\n @property({ type: Array }) parentMenus: any[] = []\n @property({ type: Array }) roleMenus: any\n @property({ type: Object }) menuSet: any\n @property({ type: Object }) targetRole: any\n\n get context() {\n return {\n title: i18next.t('title.role_menus_management')\n }\n }\n\n render() {\n const data = { menus: this.parentMenus \|\| [] }\n const menuSet = this.menuSet \|\| {}\n\n return html`\n <~~h2>${i18next.t('title.menus_by_role')}</h2~~>\n <~~div~~ ~~subtitle~~>${i18next.t('field.role')}</~~div~~>\n <div input-container>\n <label><input name=\"name\" type=\"text\" disabled /></label>\n <md-filled-button @click=${() => this.onSelectRole()}>${i18next.t('button.select')}</md-filled-button>\n </div>\n\n <~~div~~ ~~subtitle~~>${i18next.t('title.menus')}</~~div~~>\n <div id=\"children-menus\">\n <~~div>\n <~~quick-find-list\n .data=\"${data}\"\n .contentRenderer=\"${(item, tabKey) =>\n this.targetRole\n ? html`<child-menus-selector\n @updateRoleMenus=\"${async () => {\n await this.getMenus(this.targetRole)\n }}\"\n .parentMenu=${item}\n .roleMenus=${menuSet[item.name]}\n .targetRole=${this.targetRole}\n ></child-menus-selector>`\n : this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.role') }))}\"\n ></quick-find-list>\n </div>\n </div>\n `\n }\n\n get roleInput() {\n return this.renderRoot.querySelector('input') as HTMLInputElement\n }\n\n async pageUpdated(changes) {\n if (this.active) {\n this.refresh()\n }\n }\n\n async refresh() {\n const response = await client.query({\n query: gql`\n query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n menus(filters: $filters, pagination: $pagination, sortings: $sortings) {\n items {\n id\n name\n description\n children {\n id\n name\n }\n }\n total\n }\n }\n `,\n variables: {\n filters: [],\n pagination: {},\n sortings: [{ name: 'name' }]\n }\n })\n\n if (!response.errors?.length) {\n const menus = response.data.menus.items \|\| []\n this.parentMenus = menus.filter(menu => menu.children?.length)\n }\n }\n\n async getMenus(targetRole) {\n const response = await client.query({\n query: gql`\n query ($roleId: String!) {\n roleMenus(roleId: $roleId) {\n items {\n id\n name\n description\n parent {\n id\n name\n }\n }\n }\n }\n `,\n variables: {\n roleId: targetRole.id\n }\n })\n\n if (!response.errors?.length) {\n this.roleMenus = response.data.roleMenus.items \|\| []\n this.menuSet = (this.roleMenus \|\| []).reduce((menuSet, menu) => {\n const parentMenu = menu.parent.name\n if (!menuSet[parentMenu]) menuSet[parentMenu] = []\n menuSet[parentMenu].push(menu)\n\n return menuSet\n }, {})\n }\n }\n\n onSelectRole() {\n openPopup(\n html`\n <role-select-popup\n @selected=\"${e => {\n this.selectedRole = e.detail\n this.roleInput.value = this.selectedRole.name\n this.targetRole = this.selectedRole \|\| {}\n this.getMenus(this.targetRole)\n }}\"\n ></role-select-popup>\n `,\n {\n size: 'large',\n title: `${i18next.t('title.role_select')}`\n }\n )\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n }\n}\n"]}
1	+ {"version":3,"file":"role-menus-management.js","sourceRoot":"","sources":["../../client/pages/role-menus-management.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@things-factory/component-ui'\nimport '../components/role-select-popup'\nimport '../components/child-menus-selector'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { openPopup } from '@operato/layout'\nimport { i18next, localize } from '@operato/i18n'\nimport { client, PageView } from '@things-factory/shell/client'\nimport { DocumentPageStyles } from '@operato/styles'\n\n@customElement('role-menus-management')\nclass RoleMenusManagement extends localize(i18next)(PageView) {\n static styles = [\n /\n A screen that is read and edited down one column (ADR-0060 decision 8). The frame owns the\n * width, the padding and the spacing between sections; what is left here is this screen's own\n * controls.\n /\n DocumentPageStyles,\n css`\n [input-container] {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n input {\n background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n color: var(--input-field-color, var(--md-sys-color-on-surface));\n border: var(--border-dim-color);\n border-radius: var(--border-radius);\n padding: var(--input-padding);\n min-width: 250px;\n font: var(--input-font);\n }\n label {\n display: flex;\n }\n @media screen and (max-width: 480px) {\n input {\n min-width: 0;\n }\n }\n `\n ]\n\n @property({ type: Object }) selectedRole: any\n @property({ type: Array }) parentMenus: any[] = []\n @property({ type: Array }) roleMenus: any\n @property({ type: Object }) menuSet: any\n @property({ type: Object }) targetRole: any\n\n get context() {\n return {\n title: i18next.t('title.role_menus_management')\n }\n }\n\n render() {\n const data = { menus: this.parentMenus \|\| [] }\n const menuSet = this.menuSet \|\| {}\n\n / The screen name is in the title bar, so the h2 that used to sit here said it a second time. */\n return html`\n <div class=\"page\">\n <section class=\"page-section\">\n <header class=\"page-section-header\"><h3>${i18next.t('field.role')}</h3></header>\n <div class=\"page-card\" input-container>\n <label><input name=\"name\" type=\"text\" disabled /></label>\n <md-filled-button @click=${() => this.onSelectRole()}>${i18next.t('button.select')}</md-filled-button>\n </div>\n </section>\n\n <section class=\"page-section\">\n <header class=\"page-section-header\"><h3>${i18next.t('title.menus')}</h3></header>\n <div id=\"children-menus\">\n <quick-find-list\n .data=\"${data}\"\n .contentRenderer=\"${(item, tabKey) =>\n this.targetRole\n ? html`<child-menus-selector\n @updateRoleMenus=\"${async () => {\n await this.getMenus(this.targetRole)\n }}\"\n .parentMenu=${item}\n .roleMenus=${menuSet[item.name]}\n .targetRole=${this.targetRole}\n ></child-menus-selector>`\n : this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.role') }))}\"\n ></quick-find-list>\n </div>\n </section>\n </div>\n `\n }\n\n get roleInput() {\n return this.renderRoot.querySelector('input') as HTMLInputElement\n }\n\n async pageUpdated(changes) {\n if (this.active) {\n this.refresh()\n }\n }\n\n async refresh() {\n const response = await client.query({\n query: gql`\n query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n menus(filters: $filters, pagination: $pagination, sortings: $sortings) {\n items {\n id\n name\n description\n children {\n id\n name\n }\n }\n total\n }\n }\n `,\n variables: {\n filters: [],\n pagination: {},\n sortings: [{ name: 'name' }]\n }\n })\n\n if (!response.errors?.length) {\n const menus = response.data.menus.items \|\| []\n this.parentMenus = menus.filter(menu => menu.children?.length)\n }\n }\n\n async getMenus(targetRole) {\n const response = await client.query({\n query: gql`\n query ($roleId: String!) {\n roleMenus(roleId: $roleId) {\n items {\n id\n name\n description\n parent {\n id\n name\n }\n }\n }\n }\n `,\n variables: {\n roleId: targetRole.id\n }\n })\n\n if (!response.errors?.length) {\n this.roleMenus = response.data.roleMenus.items \|\| []\n this.menuSet = (this.roleMenus \|\| []).reduce((menuSet, menu) => {\n const parentMenu = menu.parent.name\n if (!menuSet[parentMenu]) menuSet[parentMenu] = []\n menuSet[parentMenu].push(menu)\n\n return menuSet\n }, {})\n }\n }\n\n onSelectRole() {\n openPopup(\n html`\n <role-select-popup\n @selected=\"${e => {\n this.selectedRole = e.detail\n this.roleInput.value = this.selectedRole.name\n this.targetRole = this.selectedRole \|\| {}\n this.getMenus(this.targetRole)\n }}\"\n ></role-select-popup>\n `,\n {\n size: 'large',\n title: `${i18next.t('title.role_select')}`\n }\n )\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n }\n}\n"]}