@things-factory/menu-ui 10.0.0-beta.5 → 10.0.0-beta.6
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate, __metadata } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
import '@material/web/button/filled-button.js';
|
|
3
3
|
import '@things-factory/component-ui';
|
|
4
4
|
import '../components/role-select-popup';
|
|
5
5
|
import '../components/child-menus-selector';
|
|
@@ -33,7 +33,7 @@ let RoleMenusManagement = class RoleMenusManagement extends localize(i18next)(Pa
|
|
|
33
33
|
clear: both;
|
|
34
34
|
gap: 10px;
|
|
35
35
|
}
|
|
36
|
-
|
|
36
|
+
md-filled-button {
|
|
37
37
|
margin: auto;
|
|
38
38
|
}
|
|
39
39
|
h2 {
|
|
@@ -76,7 +76,7 @@ let RoleMenusManagement = class RoleMenusManagement extends localize(i18next)(Pa
|
|
|
76
76
|
<div subtitle>${i18next.t('field.role')}</div>
|
|
77
77
|
<div input-container>
|
|
78
78
|
<label><input name="name" type="text" disabled /></label>
|
|
79
|
-
<
|
|
79
|
+
<md-filled-button @click=${() => this.onSelectRole()}>${i18next.t('button.select')}</md-filled-button>
|
|
80
80
|
</div>
|
|
81
81
|
|
|
82
82
|
<div subtitle>${i18next.t('title.menus')}</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"role-menus-management.js","sourceRoot":"","sources":["../../client/pages/role-menus-management.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
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'\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 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"]}
|