@things-factory/menu-ui 9.0.0-beta.76 → 9.0.0
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.
- package/dist-client/apptools/favorite-tool.js +11 -11
- package/dist-client/apptools/favorite-tool.js.map +1 -1
- package/dist-client/bootstrap.js +1 -2
- package/dist-client/bootstrap.js.map +1 -1
- package/dist-client/components/child-menus-selector.js +48 -48
- package/dist-client/components/child-menus-selector.js.map +1 -1
- package/dist-client/components/role-select-popup.js +31 -32
- package/dist-client/components/role-select-popup.js.map +1 -1
- package/dist-client/pages/menu-list-page.js +20 -20
- package/dist-client/pages/menu-list-page.js.map +1 -1
- package/dist-client/pages/menu-management-detail.js +43 -43
- package/dist-client/pages/menu-management-detail.js.map +1 -1
- package/dist-client/pages/menu-management.js +29 -21
- package/dist-client/pages/menu-management.js.map +1 -1
- package/dist-client/pages/role-menus-management.js +52 -54
- package/dist-client/pages/role-menus-management.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-client/viewparts/menu-bar.js +42 -42
- package/dist-client/viewparts/menu-bar.js.map +1 -1
- package/dist-client/viewparts/menu-tile-list.js +71 -71
- package/dist-client/viewparts/menu-tile-list.js.map +1 -1
- package/dist-client/viewparts/menu-tree-bar.js +121 -122
- package/dist-client/viewparts/menu-tree-bar.js.map +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +12 -12
|
@@ -8,6 +8,47 @@ let MenuBar = class MenuBar extends LitElement {
|
|
|
8
8
|
super(...arguments);
|
|
9
9
|
this.menus = [];
|
|
10
10
|
}
|
|
11
|
+
static { this.styles = [
|
|
12
|
+
css `
|
|
13
|
+
:host {
|
|
14
|
+
background-color: var(--menu-bar-background-color, #242d30);
|
|
15
|
+
|
|
16
|
+
overflow-x: hidden;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
ul {
|
|
20
|
+
display: flex;
|
|
21
|
+
list-style: none;
|
|
22
|
+
margin: 0;
|
|
23
|
+
padding: 0;
|
|
24
|
+
white-space: nowrap;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
li {
|
|
28
|
+
display: inline-block;
|
|
29
|
+
padding: 0px 3px;
|
|
30
|
+
|
|
31
|
+
border-bottom: var(--menu-bar-line);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
li[active] {
|
|
35
|
+
border-color: var(--menu-bar-active-line-color, red);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
li a {
|
|
39
|
+
display: block;
|
|
40
|
+
padding: 5px 4px 1px 4px;
|
|
41
|
+
text-decoration: none;
|
|
42
|
+
font: var(--menu-bar-textbutton);
|
|
43
|
+
color: rgba(255, 255, 255, 0.8);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
li[active] a {
|
|
47
|
+
font: var(--menu-bar-textbutton-active);
|
|
48
|
+
color: rgba(255, 255, 255, 1);
|
|
49
|
+
}
|
|
50
|
+
`
|
|
51
|
+
]; }
|
|
11
52
|
render() {
|
|
12
53
|
var topmenus = this.menus || [];
|
|
13
54
|
return html `
|
|
@@ -41,7 +82,7 @@ let MenuBar = class MenuBar extends LitElement {
|
|
|
41
82
|
}
|
|
42
83
|
firstUpdated() {
|
|
43
84
|
var scrollTarget = this.renderRoot.querySelector('ul');
|
|
44
|
-
scrollTarget
|
|
85
|
+
scrollTarget?.addEventListener('mousewheel', this._onWheelEvent.bind(this), false);
|
|
45
86
|
this.__sb = new ScrollBooster({
|
|
46
87
|
viewport: this,
|
|
47
88
|
content: scrollTarget,
|
|
@@ -52,47 +93,6 @@ let MenuBar = class MenuBar extends LitElement {
|
|
|
52
93
|
});
|
|
53
94
|
}
|
|
54
95
|
};
|
|
55
|
-
MenuBar.styles = [
|
|
56
|
-
css `
|
|
57
|
-
:host {
|
|
58
|
-
background-color: var(--menu-bar-background-color, #242d30);
|
|
59
|
-
|
|
60
|
-
overflow-x: hidden;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
ul {
|
|
64
|
-
display: flex;
|
|
65
|
-
list-style: none;
|
|
66
|
-
margin: 0;
|
|
67
|
-
padding: 0;
|
|
68
|
-
white-space: nowrap;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
li {
|
|
72
|
-
display: inline-block;
|
|
73
|
-
padding: 0px 3px;
|
|
74
|
-
|
|
75
|
-
border-bottom: var(--menu-bar-line);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
li[active] {
|
|
79
|
-
border-color: var(--menu-bar-active-line-color, red);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
li a {
|
|
83
|
-
display: block;
|
|
84
|
-
padding: 5px 4px 1px 4px;
|
|
85
|
-
text-decoration: none;
|
|
86
|
-
font: var(--menu-bar-textbutton);
|
|
87
|
-
color: rgba(255, 255, 255, 0.8);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
li[active] a {
|
|
91
|
-
font: var(--menu-bar-textbutton-active);
|
|
92
|
-
color: rgba(255, 255, 255, 1);
|
|
93
|
-
}
|
|
94
|
-
`
|
|
95
|
-
];
|
|
96
96
|
__decorate([
|
|
97
97
|
property({ type: Array }),
|
|
98
98
|
__metadata("design:type", Array)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-bar.js","sourceRoot":"","sources":["../../client/viewparts/menu-bar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,aAAa,MAAM,eAAe,CAAA;AAG1B,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QA2Cc,UAAK,GAAU,EAAE,CAAA;IA0D9C,CAAC;
|
|
1
|
+
{"version":3,"file":"menu-bar.js","sourceRoot":"","sources":["../../client/viewparts/menu-bar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,aAAa,MAAM,eAAe,CAAA;AAG1B,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QA2Cc,UAAK,GAAU,EAAE,CAAA;IA0D9C,CAAC;aApGQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCF;KACF,AAxCY,CAwCZ;IAOD,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE/B,OAAO,IAAI,CAAA;;sBAEO,CAAC,IAAI,CAAC,MAAM;;;;UAIxB,QAAQ,CAAC,GAAG,CACZ,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;0BACH,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,GAAG,CAAC;wBAC7B,GAAG,IAAI,CAAC,OAAO,IAAI,WAAW,IAAI,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI;;WAEjE,CACF;;KAEJ,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAC;QACb,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;QAChE,IAAI,CAAC,UAAU,IAAI,KAAK,GAAG,EAAE,CAAA;QAE7B,CAAC,CAAC,cAAc,EAAE,CAAA;IACpB,CAAC;IAED,OAAO,CAAC,MAAM;QACZ,IAAI,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACxB,qDAAqD;YACrD,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;QACxC,CAAC;QAED,IAAI,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACzB,IAAI,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAA;YACxD,MAAM,IAAI,MAAM,CAAC,cAAc,EAAE,CAAA;QACnC,CAAC;IACH,CAAC;IAED,YAAY;QACV,IAAI,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;QAEtD,YAAY,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAA;QAElF,IAAI,CAAC,IAAI,GAAG,IAAI,aAAa,CAAC;YAC5B,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,YAAY;YACrB,IAAI,EAAE,GAAG;YACT,QAAQ,EAAE,IAAI,CAAC,EAAE;gBACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAA;YACnC,CAAC;SACF,CAAC,CAAA;IACJ,CAAC;;AAzD0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;sCAAkB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uCAAgB;AA5CxB,OAAO;IAD3B,aAAa,CAAC,UAAU,CAAC;GACL,OAAO,CAqG3B;eArGoB,OAAO","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport ScrollBooster from 'scrollbooster'\n\n@customElement('menu-bar')\nexport default class MenuBar extends LitElement {\n static styles = [\n css`\n :host {\n background-color: var(--menu-bar-background-color, #242d30);\n\n overflow-x: hidden;\n }\n\n ul {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n white-space: nowrap;\n }\n\n li {\n display: inline-block;\n padding: 0px 3px;\n\n border-bottom: var(--menu-bar-line);\n }\n\n li[active] {\n border-color: var(--menu-bar-active-line-color, red);\n }\n\n li a {\n display: block;\n padding: 5px 4px 1px 4px;\n text-decoration: none;\n font: var(--menu-bar-textbutton);\n color: rgba(255, 255, 255, 0.8);\n }\n\n li[active] a {\n font: var(--menu-bar-textbutton-active);\n color: rgba(255, 255, 255, 1);\n }\n `\n ]\n\n @property({ type: Array }) menus: any[] = []\n @property({ type: String }) menuId?: string\n\n private __sb: any\n\n render() {\n var topmenus = this.menus || []\n\n return html`\n <ul>\n <li ?active=${!this.menuId}>\n <a href=\"menu-list\"><md-icon>star</md-icon></a>\n </li>\n\n ${topmenus.map(\n (menu, idx) => html`\n <li ?active=${this.menuId === String(idx)}>\n <a href=${`${menu.routing || 'menu-list'}/${idx}`}>${menu.name}</a>\n </li>\n `\n )}\n </ul>\n `\n }\n\n _onWheelEvent(e) {\n var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))\n this.scrollLeft -= delta * 40\n\n e.preventDefault()\n }\n\n updated(change) {\n if (change.has('menus')) {\n /* menus가 바뀔 때마다, contents의 폭이 달라지므로, 다시 폭을 계산해준다. */\n this.__sb && this.__sb.updateMetrics()\n }\n\n if (change.has('menuId')) {\n var active = this.renderRoot.querySelector('li[active]')\n active && active.scrollIntoView()\n }\n }\n\n firstUpdated() {\n var scrollTarget = this.renderRoot.querySelector('ul')\n\n scrollTarget?.addEventListener('mousewheel', this._onWheelEvent.bind(this), false)\n\n this.__sb = new ScrollBooster({\n viewport: this,\n content: scrollTarget,\n mode: 'x',\n onUpdate: data => {\n this.scrollLeft = data.position.x\n }\n })\n }\n}\n"]}
|
|
@@ -10,76 +10,8 @@ let MenuTileList = class MenuTileList extends LitElement {
|
|
|
10
10
|
this.favorites = [];
|
|
11
11
|
this.showSpinner = false;
|
|
12
12
|
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var menuId = this.menuId;
|
|
16
|
-
if (!menuId) {
|
|
17
|
-
/* favorite menus */
|
|
18
|
-
var submenus = topmenus.reduce((allmenu, topmenu) => {
|
|
19
|
-
let menus = (topmenu && topmenu.children) || [];
|
|
20
|
-
menus.forEach(menu => {
|
|
21
|
-
if (this.favorites.includes(this._getFullRouting(menu))) {
|
|
22
|
-
allmenu.push(menu);
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
return allmenu;
|
|
26
|
-
}, []);
|
|
27
|
-
}
|
|
28
|
-
else {
|
|
29
|
-
var menu = topmenus[menuId];
|
|
30
|
-
var submenus = (menu && menu.children) || [];
|
|
31
|
-
}
|
|
32
|
-
return html `
|
|
33
|
-
<ul>
|
|
34
|
-
${submenus.map(subMenu => {
|
|
35
|
-
const routing = this._getFullRouting(subMenu);
|
|
36
|
-
return html `
|
|
37
|
-
<li
|
|
38
|
-
class="${subMenu.class} text"
|
|
39
|
-
style="grid-row: span ${subMenu.routingType.toUpperCase() === 'STATIC' ? 1 : 2}"
|
|
40
|
-
>
|
|
41
|
-
<a href=${routing}>${subMenu.name}</a>
|
|
42
|
-
|
|
43
|
-
<md-icon ?selected=${(this.favorites || []).includes(routing)}
|
|
44
|
-
>${(this.favorites || []).includes(routing) ? 'star' : 'star_border'}</md-icon
|
|
45
|
-
>
|
|
46
|
-
</li>
|
|
47
|
-
`;
|
|
48
|
-
})}
|
|
49
|
-
</ul>
|
|
50
|
-
|
|
51
|
-
${submenus.length == 0 && !this.showSpinner
|
|
52
|
-
? typeof menuId == 'number'
|
|
53
|
-
? html `
|
|
54
|
-
<ox-oops-note
|
|
55
|
-
icon="apps"
|
|
56
|
-
title="No Menu Found"
|
|
57
|
-
description="Seems like you are not authorised to view this menu"
|
|
58
|
-
></ox-oops-note>
|
|
59
|
-
`
|
|
60
|
-
: html `
|
|
61
|
-
<ox-oops-note
|
|
62
|
-
icon="star_border"
|
|
63
|
-
title="No Favourite Found"
|
|
64
|
-
description="Click ☆ icon to add new favourite menu"
|
|
65
|
-
></ox-oops-note>
|
|
66
|
-
`
|
|
67
|
-
: html ``}
|
|
68
|
-
|
|
69
|
-
<ox-oops-spinner ?show=${this.showSpinner}></ox-oops-spinner>
|
|
70
|
-
`;
|
|
71
|
-
}
|
|
72
|
-
_getFullRouting(menu) {
|
|
73
|
-
var { routingType, titleField, name, resourceUrl } = menu;
|
|
74
|
-
if (routingType.toUpperCase() === 'STATIC') {
|
|
75
|
-
return resourceUrl;
|
|
76
|
-
}
|
|
77
|
-
var { page } = this.routingTypes[routingType];
|
|
78
|
-
return titleField ? `${page}/${menu[titleField]}` : `${page}/${name}`;
|
|
79
|
-
}
|
|
80
|
-
};
|
|
81
|
-
MenuTileList.styles = [
|
|
82
|
-
css `
|
|
13
|
+
static { this.styles = [
|
|
14
|
+
css `
|
|
83
15
|
:host {
|
|
84
16
|
display: block;
|
|
85
17
|
box-sizing: border-box;
|
|
@@ -206,7 +138,75 @@ MenuTileList.styles = [
|
|
|
206
138
|
}
|
|
207
139
|
}
|
|
208
140
|
`
|
|
209
|
-
];
|
|
141
|
+
]; }
|
|
142
|
+
render() {
|
|
143
|
+
var topmenus = this.menus || [];
|
|
144
|
+
var menuId = this.menuId;
|
|
145
|
+
if (!menuId) {
|
|
146
|
+
/* favorite menus */
|
|
147
|
+
var submenus = topmenus.reduce((allmenu, topmenu) => {
|
|
148
|
+
let menus = (topmenu && topmenu.children) || [];
|
|
149
|
+
menus.forEach(menu => {
|
|
150
|
+
if (this.favorites.includes(this._getFullRouting(menu))) {
|
|
151
|
+
allmenu.push(menu);
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
return allmenu;
|
|
155
|
+
}, []);
|
|
156
|
+
}
|
|
157
|
+
else {
|
|
158
|
+
var menu = topmenus[menuId];
|
|
159
|
+
var submenus = (menu && menu.children) || [];
|
|
160
|
+
}
|
|
161
|
+
return html `
|
|
162
|
+
<ul>
|
|
163
|
+
${submenus.map(subMenu => {
|
|
164
|
+
const routing = this._getFullRouting(subMenu);
|
|
165
|
+
return html `
|
|
166
|
+
<li
|
|
167
|
+
class="${subMenu.class} text"
|
|
168
|
+
style="grid-row: span ${subMenu.routingType.toUpperCase() === 'STATIC' ? 1 : 2}"
|
|
169
|
+
>
|
|
170
|
+
<a href=${routing}>${subMenu.name}</a>
|
|
171
|
+
|
|
172
|
+
<md-icon ?selected=${(this.favorites || []).includes(routing)}
|
|
173
|
+
>${(this.favorites || []).includes(routing) ? 'star' : 'star_border'}</md-icon
|
|
174
|
+
>
|
|
175
|
+
</li>
|
|
176
|
+
`;
|
|
177
|
+
})}
|
|
178
|
+
</ul>
|
|
179
|
+
|
|
180
|
+
${submenus.length == 0 && !this.showSpinner
|
|
181
|
+
? typeof menuId == 'number'
|
|
182
|
+
? html `
|
|
183
|
+
<ox-oops-note
|
|
184
|
+
icon="apps"
|
|
185
|
+
title="No Menu Found"
|
|
186
|
+
description="Seems like you are not authorised to view this menu"
|
|
187
|
+
></ox-oops-note>
|
|
188
|
+
`
|
|
189
|
+
: html `
|
|
190
|
+
<ox-oops-note
|
|
191
|
+
icon="star_border"
|
|
192
|
+
title="No Favourite Found"
|
|
193
|
+
description="Click ☆ icon to add new favourite menu"
|
|
194
|
+
></ox-oops-note>
|
|
195
|
+
`
|
|
196
|
+
: html ``}
|
|
197
|
+
|
|
198
|
+
<ox-oops-spinner ?show=${this.showSpinner}></ox-oops-spinner>
|
|
199
|
+
`;
|
|
200
|
+
}
|
|
201
|
+
_getFullRouting(menu) {
|
|
202
|
+
var { routingType, titleField, name, resourceUrl } = menu;
|
|
203
|
+
if (routingType.toUpperCase() === 'STATIC') {
|
|
204
|
+
return resourceUrl;
|
|
205
|
+
}
|
|
206
|
+
var { page } = this.routingTypes[routingType];
|
|
207
|
+
return titleField ? `${page}/${menu[titleField]}` : `${page}/${name}`;
|
|
208
|
+
}
|
|
209
|
+
};
|
|
210
210
|
__decorate([
|
|
211
211
|
property({ type: String }),
|
|
212
212
|
__metadata("design:type", String)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-tile-list.js","sourceRoot":"","sources":["../../client/viewparts/menu-tile-list.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,eAAe,CAAA;AAEtB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAoIc,UAAK,GAAU,EAAE,CAAA;QAEjB,cAAS,GAAU,EAAE,CAAA;QACnB,gBAAW,GAAY,KAAK,CAAA;IAyE3D,CAAC;
|
|
1
|
+
{"version":3,"file":"menu-tile-list.js","sourceRoot":"","sources":["../../client/viewparts/menu-tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/oops'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('menu-tile-list')\nexport default class MenuTileList extends LitElement {\n static styles = [\n css`\n :host {\n display: block;\n box-sizing: border-box;\n\n position: relative;\n }\n\n ul {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-auto-rows: 110px;\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n ul > li {\n margin: var(--menu-tile-list-item-margin);\n padding: 10px;\n\n position: relative;\n }\n\n md-icon {\n cursor: pointer;\n position: absolute;\n right: 8px;\n top: 8px;\n\n color: var(--menu-tile-list-favorite-color);\n font-size: 1em;\n }\n\n md-icon[selected] {\n color: white;\n text-shadow: 1px 1px 1px var(--menu-tile-list-favorite-color);\n }\n\n li.text a {\n color: #fff;\n text-decoration: none;\n\n font-size: 1.4em;\n line-height: 1.3;\n word-wrap: break-word;\n word-break: keep-all;\n\n margin: 0px;\n display: block;\n width: 100%;\n height: 100%;\n }\n\n li.text:nth-child(7n + 1) {\n background-color: #4397de;\n }\n\n li.text:nth-child(7n + 2) {\n background-color: #33b8d0;\n }\n\n li.text:nth-child(7n + 3) {\n background-color: #4ab75f;\n }\n\n li.text:nth-child(7n + 4) {\n background-color: #93796f;\n }\n\n li.text:nth-child(7n + 5) {\n background-color: #f1ac42;\n }\n\n li.text:nth-child(7n + 6) {\n background-color: #ea6361;\n }\n\n li.text:nth-child(7n + 7) {\n background-color: #7386c3;\n }\n\n ox-oops-note {\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n ox-oops-spinner {\n display: none;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n ox-oops-spinner[show] {\n display: block;\n }\n\n @media (min-width: 600px) {\n ul {\n grid-template-columns: 1fr 1fr 1fr;\n grid-auto-rows: 120px;\n }\n }\n @media (min-width: 1200px) {\n ul {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-auto-rows: 130px;\n }\n }\n @media (min-width: 1800px) {\n ul {\n grid-template-columns: 1fr 1fr 1fr 1fr 1fr;\n grid-auto-rows: 140px;\n }\n }\n @media (min-width: 2400px) {\n ul {\n grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;\n grid-auto-rows: 150px;\n }\n }\n `\n ]\n\n @property({ type: String }) menuId?: string\n @property({ type: Array }) menus: any[] = []\n @property({ type: Object }) routingTypes: any\n @property({ type: Array }) favorites: any[] = []\n @property({ type: Boolean }) showSpinner: boolean = false\n\n render() {\n var topmenus = this.menus || []\n var menuId = this.menuId\n\n if (!menuId) {\n /* favorite menus */\n var submenus = topmenus.reduce((allmenu, topmenu) => {\n let menus = (topmenu && topmenu.children) || []\n menus.forEach(menu => {\n if (this.favorites.includes(this._getFullRouting(menu))) {\n allmenu.push(menu)\n }\n })\n return allmenu\n }, [])\n } else {\n var menu = topmenus[menuId]\n var submenus = (menu && menu.children) || []\n }\n\n return html`\n <ul>\n ${submenus.map(subMenu => {\n const routing = this._getFullRouting(subMenu)\n\n return html`\n <li\n class=\"${subMenu.class} text\"\n style=\"grid-row: span ${subMenu.routingType.toUpperCase() === 'STATIC' ? 1 : 2}\"\n >\n <a href=${routing}>${subMenu.name}</a>\n\n <md-icon ?selected=${(this.favorites || []).includes(routing)}\n >${(this.favorites || ([] as any[])).includes(routing) ? 'star' : 'star_border'}</md-icon\n >\n </li>\n `\n })}\n </ul>\n\n ${submenus.length == 0 && !this.showSpinner\n ? typeof menuId == 'number'\n ? html`\n <ox-oops-note\n icon=\"apps\"\n title=\"No Menu Found\"\n description=\"Seems like you are not authorised to view this menu\"\n ></ox-oops-note>\n `\n : html`\n <ox-oops-note\n icon=\"star_border\"\n title=\"No Favourite Found\"\n description=\"Click ☆ icon to add new favourite menu\"\n ></ox-oops-note>\n `\n : html``}\n\n <ox-oops-spinner ?show=${this.showSpinner}></ox-oops-spinner>\n `\n }\n\n _getFullRouting(menu): string {\n var { routingType, titleField, name, resourceUrl } = menu\n if (routingType.toUpperCase() === 'STATIC') {\n return resourceUrl\n }\n\n var { page } = this.routingTypes[routingType]\n return titleField ? `${page}/${menu[titleField]}` : `${page}/${name}`\n }\n}\n"]}
|
|
@@ -14,127 +14,9 @@ let MenuTreeBar = class MenuTreeBar extends connect(store)(LitElement) {
|
|
|
14
14
|
this.routingTypes = [];
|
|
15
15
|
this.domains = [];
|
|
16
16
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const currentRouting = decodeURIComponent(location.pathname.substr(this.contextPath ? this.contextPath.length + 1 : 1));
|
|
21
|
-
return html `
|
|
22
|
-
<div domain>
|
|
23
|
-
<md-icon>beenhere</md-icon>
|
|
24
|
-
${domains.length <= 1
|
|
25
|
-
? html ` <span>${domain.name}</span> `
|
|
26
|
-
: html `
|
|
27
|
-
<select
|
|
28
|
-
.value=${domain.subdomain}
|
|
29
|
-
@change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}
|
|
30
|
-
>
|
|
31
|
-
${domains.map(d => html `
|
|
32
|
-
<option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d.name}</option>
|
|
33
|
-
`)}
|
|
34
|
-
</select>
|
|
35
|
-
`}
|
|
36
|
-
</div>
|
|
37
|
-
|
|
38
|
-
<ul toplevel>
|
|
39
|
-
${(this.menus || []).map(menu => html `
|
|
40
|
-
<li groupmenu>
|
|
41
|
-
<span
|
|
42
|
-
@click=${e => {
|
|
43
|
-
e.target.parentElement.toggleAttribute('expanded');
|
|
44
|
-
this.renderRoot
|
|
45
|
-
.querySelectorAll('[expanded]')
|
|
46
|
-
.forEach(element => element !== e.target.parentElement && element.removeAttribute('expanded'));
|
|
47
|
-
}}
|
|
48
|
-
>${menu.name}</span
|
|
49
|
-
>
|
|
50
|
-
|
|
51
|
-
<ul grouplevel>
|
|
52
|
-
${menu.children.map(subMenu => {
|
|
53
|
-
const routing = this._getFullRouting(subMenu);
|
|
54
|
-
const favorite = this.favorites.includes(routing);
|
|
55
|
-
const { icon } = this.routingTypes[subMenu.routingType] || {};
|
|
56
|
-
const typeIcon = icon ? icon : favorite ? 'star' : null;
|
|
57
|
-
return html `
|
|
58
|
-
<li ?active=${routing === currentRouting}>
|
|
59
|
-
<a href=${routing}>
|
|
60
|
-
<span>${subMenu.name}</span>
|
|
61
|
-
${typeIcon ? html ` <md-icon menutype ?favorite=${favorite}>${typeIcon}</md-icon> ` : html ``}</a
|
|
62
|
-
>
|
|
63
|
-
</li>
|
|
64
|
-
`;
|
|
65
|
-
})}
|
|
66
|
-
</ul>
|
|
67
|
-
</li>
|
|
68
|
-
`)}
|
|
69
|
-
</ul>
|
|
70
|
-
`;
|
|
71
|
-
}
|
|
72
|
-
async updated(changes) {
|
|
73
|
-
var _a, _b;
|
|
74
|
-
if (changes.has('user')) {
|
|
75
|
-
this.menus = await this.getMenus();
|
|
76
|
-
}
|
|
77
|
-
await this.updateComplete;
|
|
78
|
-
var active = this.renderRoot.querySelector('[active]');
|
|
79
|
-
if (active) {
|
|
80
|
-
(_b = (_a = active.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.setAttribute('expanded', '');
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
stateChanged(state) {
|
|
84
|
-
this.contextPath = state.app.contextPath;
|
|
85
|
-
this.routingTypes = state.menu.routingTypes;
|
|
86
|
-
this.menuId = state.route.resourceId;
|
|
87
|
-
this.page = state.route.page;
|
|
88
|
-
this.user = state.auth.user;
|
|
89
|
-
this.domains = state.app.domains;
|
|
90
|
-
this.domain = state.app.domain;
|
|
91
|
-
this.getMenus =
|
|
92
|
-
state.menu.provider && typeof state.menu.provider === 'function' ? state.menu.provider : this.getMenus;
|
|
93
|
-
this.favorites = state.favorite.favorites;
|
|
94
|
-
}
|
|
95
|
-
_getFullRouting(menu) {
|
|
96
|
-
var { routingType, resourceUrl, titleField, name, resourceType, resourceId } = menu;
|
|
97
|
-
if (routingType.toUpperCase() === 'STATIC') {
|
|
98
|
-
if ((resourceType === null || resourceType === void 0 ? void 0 : resourceType.toUpperCase()) === 'BOARD') {
|
|
99
|
-
return `${resourceUrl || 'board-viewer'}/${resourceId}?title=${name}`;
|
|
100
|
-
}
|
|
101
|
-
return resourceUrl;
|
|
102
|
-
}
|
|
103
|
-
var { page } = this.routingTypes[routingType];
|
|
104
|
-
return titleField ? `${page}/${menu[titleField]}` : `${page}/${name}`;
|
|
105
|
-
}
|
|
106
|
-
_onClickRefresh(e) {
|
|
107
|
-
this.dispatchEvent(new CustomEvent('refresh'));
|
|
108
|
-
}
|
|
109
|
-
async getMenus() {
|
|
110
|
-
const response = await client.query({
|
|
111
|
-
query: gql `
|
|
112
|
-
query {
|
|
113
|
-
userMenus {
|
|
114
|
-
id
|
|
115
|
-
name
|
|
116
|
-
children {
|
|
117
|
-
id
|
|
118
|
-
name
|
|
119
|
-
routingType
|
|
120
|
-
idField
|
|
121
|
-
titleField
|
|
122
|
-
resourceType
|
|
123
|
-
resourceId
|
|
124
|
-
resourceName
|
|
125
|
-
resourceUrl
|
|
126
|
-
template
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
`
|
|
131
|
-
});
|
|
132
|
-
return response.data.userMenus;
|
|
133
|
-
}
|
|
134
|
-
};
|
|
135
|
-
MenuTreeBar.styles = [
|
|
136
|
-
ScrollbarStyles,
|
|
137
|
-
css `
|
|
17
|
+
static { this.styles = [
|
|
18
|
+
ScrollbarStyles,
|
|
19
|
+
css `
|
|
138
20
|
:host {
|
|
139
21
|
display: flex;
|
|
140
22
|
flex-direction: column;
|
|
@@ -263,7 +145,124 @@ MenuTreeBar.styles = [
|
|
|
263
145
|
padding-left: 12px;
|
|
264
146
|
}
|
|
265
147
|
`
|
|
266
|
-
];
|
|
148
|
+
]; }
|
|
149
|
+
render() {
|
|
150
|
+
var domains = this.domains || [];
|
|
151
|
+
var domain = this.domain || {};
|
|
152
|
+
const currentRouting = decodeURIComponent(location.pathname.substr(this.contextPath ? this.contextPath.length + 1 : 1));
|
|
153
|
+
return html `
|
|
154
|
+
<div domain>
|
|
155
|
+
<md-icon>beenhere</md-icon>
|
|
156
|
+
${domains.length <= 1
|
|
157
|
+
? html ` <span>${domain.name}</span> `
|
|
158
|
+
: html `
|
|
159
|
+
<select
|
|
160
|
+
.value=${domain.subdomain}
|
|
161
|
+
@change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}
|
|
162
|
+
>
|
|
163
|
+
${domains.map(d => html `
|
|
164
|
+
<option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d.name}</option>
|
|
165
|
+
`)}
|
|
166
|
+
</select>
|
|
167
|
+
`}
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<ul toplevel>
|
|
171
|
+
${(this.menus || []).map(menu => html `
|
|
172
|
+
<li groupmenu>
|
|
173
|
+
<span
|
|
174
|
+
@click=${e => {
|
|
175
|
+
e.target.parentElement.toggleAttribute('expanded');
|
|
176
|
+
this.renderRoot
|
|
177
|
+
.querySelectorAll('[expanded]')
|
|
178
|
+
.forEach(element => element !== e.target.parentElement && element.removeAttribute('expanded'));
|
|
179
|
+
}}
|
|
180
|
+
>${menu.name}</span
|
|
181
|
+
>
|
|
182
|
+
|
|
183
|
+
<ul grouplevel>
|
|
184
|
+
${menu.children.map(subMenu => {
|
|
185
|
+
const routing = this._getFullRouting(subMenu);
|
|
186
|
+
const favorite = this.favorites.includes(routing);
|
|
187
|
+
const { icon } = this.routingTypes[subMenu.routingType] || {};
|
|
188
|
+
const typeIcon = icon ? icon : favorite ? 'star' : null;
|
|
189
|
+
return html `
|
|
190
|
+
<li ?active=${routing === currentRouting}>
|
|
191
|
+
<a href=${routing}>
|
|
192
|
+
<span>${subMenu.name}</span>
|
|
193
|
+
${typeIcon ? html ` <md-icon menutype ?favorite=${favorite}>${typeIcon}</md-icon> ` : html ``}</a
|
|
194
|
+
>
|
|
195
|
+
</li>
|
|
196
|
+
`;
|
|
197
|
+
})}
|
|
198
|
+
</ul>
|
|
199
|
+
</li>
|
|
200
|
+
`)}
|
|
201
|
+
</ul>
|
|
202
|
+
`;
|
|
203
|
+
}
|
|
204
|
+
async updated(changes) {
|
|
205
|
+
if (changes.has('user')) {
|
|
206
|
+
this.menus = await this.getMenus();
|
|
207
|
+
}
|
|
208
|
+
await this.updateComplete;
|
|
209
|
+
var active = this.renderRoot.querySelector('[active]');
|
|
210
|
+
if (active) {
|
|
211
|
+
active.parentElement?.parentElement?.setAttribute('expanded', '');
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
stateChanged(state) {
|
|
215
|
+
this.contextPath = state.app.contextPath;
|
|
216
|
+
this.routingTypes = state.menu.routingTypes;
|
|
217
|
+
this.menuId = state.route.resourceId;
|
|
218
|
+
this.page = state.route.page;
|
|
219
|
+
this.user = state.auth.user;
|
|
220
|
+
this.domains = state.app.domains;
|
|
221
|
+
this.domain = state.app.domain;
|
|
222
|
+
this.getMenus =
|
|
223
|
+
state.menu.provider && typeof state.menu.provider === 'function' ? state.menu.provider : this.getMenus;
|
|
224
|
+
this.favorites = state.favorite.favorites;
|
|
225
|
+
}
|
|
226
|
+
_getFullRouting(menu) {
|
|
227
|
+
var { routingType, resourceUrl, titleField, name, resourceType, resourceId } = menu;
|
|
228
|
+
if (routingType.toUpperCase() === 'STATIC') {
|
|
229
|
+
if (resourceType?.toUpperCase() === 'BOARD') {
|
|
230
|
+
return `${resourceUrl || 'board-viewer'}/${resourceId}?title=${name}`;
|
|
231
|
+
}
|
|
232
|
+
return resourceUrl;
|
|
233
|
+
}
|
|
234
|
+
var { page } = this.routingTypes[routingType];
|
|
235
|
+
return titleField ? `${page}/${menu[titleField]}` : `${page}/${name}`;
|
|
236
|
+
}
|
|
237
|
+
_onClickRefresh(e) {
|
|
238
|
+
this.dispatchEvent(new CustomEvent('refresh'));
|
|
239
|
+
}
|
|
240
|
+
async getMenus() {
|
|
241
|
+
const response = await client.query({
|
|
242
|
+
query: gql `
|
|
243
|
+
query {
|
|
244
|
+
userMenus {
|
|
245
|
+
id
|
|
246
|
+
name
|
|
247
|
+
children {
|
|
248
|
+
id
|
|
249
|
+
name
|
|
250
|
+
routingType
|
|
251
|
+
idField
|
|
252
|
+
titleField
|
|
253
|
+
resourceType
|
|
254
|
+
resourceId
|
|
255
|
+
resourceName
|
|
256
|
+
resourceUrl
|
|
257
|
+
template
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
`
|
|
262
|
+
});
|
|
263
|
+
return response.data.userMenus;
|
|
264
|
+
}
|
|
265
|
+
};
|
|
267
266
|
__decorate([
|
|
268
267
|
property({ type: String }),
|
|
269
268
|
__metadata("design:type", String)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-tree-bar.js","sourceRoot":"","sources":["../../client/viewparts/menu-tree-bar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGlC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAApD;;QAuIc,UAAK,GAAU,EAAE,CAAA;QACjB,cAAS,GAAa,EAAE,CAAA;QACxB,iBAAY,GAAa,EAAE,CAAA;QAI3B,YAAO,GAAU,EAAE,CAAA;IAwIhD,CAAC;IArIC,MAAM;QACJ,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAChC,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAC9B,MAAM,cAAc,GAAG,kBAAkB,CACvC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC7E,CAAA;QAED,OAAO,IAAI,CAAA;;;UAGL,OAAO,CAAC,MAAM,IAAI,CAAC;YACnB,CAAC,CAAC,IAAI,CAAA,UAAU,MAAM,CAAC,IAAI,UAAU;YACrC,CAAC,CAAC,IAAI,CAAA;;yBAES,MAAM,CAAC,SAAS;0BACf,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,GAAG,iBAAiB,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;;kBAE3E,OAAO,CAAC,GAAG,CACX,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;qCACU,CAAC,CAAC,SAAS,cAAc,CAAC,CAAC,SAAS,IAAI,MAAM,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI;mBACpF,CACF;;aAEJ;;;;UAIH,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CACtB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;;yBAGG,CAAC,CAAC,EAAE;YACX,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;YAClD,IAAI,CAAC,UAAU;iBACZ,gBAAgB,CAAC,YAAY,CAAC;iBAC9B,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,IAAI,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;QAClG,CAAC;mBACE,IAAI,CAAC,IAAI;;;;kBAIV,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;YAC7C,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;YACjD,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,IAAK,EAAU,CAAA;YACtE,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;YAEvD,OAAO,IAAI,CAAA;kCACK,OAAO,KAAK,cAAc;gCAC5B,OAAO;gCACP,OAAO,CAAC,IAAI;0BAClB,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,gCAAgC,QAAQ,IAAI,QAAQ,aAAa,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;;mBAGhG,CAAA;QACH,CAAC,CAAC;;;WAGP,CACF;;KAEJ,CAAA;IACH,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,OAAO;;QACnB,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAA;QACpC,CAAC;QAED,MAAM,IAAI,CAAC,cAAc,CAAA;QAEzB,IAAI,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;QACtD,IAAI,MAAM,EAAE,CAAC;YACX,MAAA,MAAA,MAAM,CAAC,aAAa,0CAAE,aAAa,0CAAE,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;QACnE,CAAC;IACH,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,CAAA;QACxC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAA;QAC3C,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAA;QACpC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA;QAC5B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;QAC3B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAA;QAChC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,MAAM,CAAA;QAC9B,IAAI,CAAC,QAAQ;YACX,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAA;QACxG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAA;IAC3C,CAAC;IAED,eAAe,CAAC,IAAI;QAClB,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;QACnF,IAAI,WAAW,CAAC,WAAW,EAAE,KAAK,QAAQ,EAAE,CAAC;YAC3C,IAAI,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,WAAW,EAAE,MAAK,OAAO,EAAE,CAAC;gBAC5C,OAAO,GAAG,WAAW,IAAI,cAAc,IAAI,UAAU,UAAU,IAAI,EAAE,CAAA;YACvE,CAAC;YACD,OAAO,WAAW,CAAA;QACpB,CAAC;QAED,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAQ,CAAA;QACpD,OAAO,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,IAAI,EAAE,CAAA;IACvE,CAAC;IAED,eAAe,CAAC,CAAC;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,CAAC,CAAC,CAAA;IAChD,CAAC;IAED,KAAK,CAAC,QAAQ;QACZ,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;OAmBT;SACF,CAAC,CAAA;QAEF,OAAO,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAA;IAChC,CAAC;;AAnRM,kBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgIF;CACF,AAnIY,CAmIZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAgB;AAChB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;0CAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;8CAAyB;AACxB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;iDAA4B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAqB;AACrB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;4CAAoB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAa;AA9IrB,WAAW;IAD/B,aAAa,CAAC,eAAe,CAAC;GACV,WAAW,CAqR/B;eArRoB,WAAW","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client, store } from '@things-factory/shell/client'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('menu-tree-bar')\nexport default class MenuTreeBar extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n min-width: 200px;\n }\n [domain] {\n background: var(--menu-domain-background-color);\n background: linear-gradient(180deg, var(--md-sys-color-secondary) 0%, var(--md-sys-color-primary) 120%);\n padding: var(--menu-domain-padding);\n border-bottom: 1px solid var(--md-sys-color-primary);\n }\n [domain] md-icon {\n margin-right: -8px;\n font-size: 12px;\n color: var(--menu-domain-icon-color);\n }\n [domain] * {\n vertical-align: middle;\n }\n [domain] span {\n padding-left: 7px;\n font: var(--menu-domain-font);\n color: var(--menu-domain-color);\n }\n [domain] select {\n background-color: transparent;\n width: -webkit-fill-available;\n max-width: 175px;\n border: none;\n\n font: var(--menu-domain-font);\n color: var(--menu-domain-color);\n }\n select:focus {\n outline: 0;\n }\n\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n ul[toplevel] {\n overflow: auto;\n }\n\n li {\n border-bottom: var(--menu-tree-toplevel-border-bottom);\n }\n\n [grouplevel] li {\n border-bottom: var(--menu-tree-grouplevel-border-bottom);\n }\n\n li span,\n li a {\n display: block;\n text-decoration: none;\n position: relative;\n }\n\n [menutype] {\n position: absolute;\n font-size: 1.2em;\n right: 0;\n bottom: 50%;\n transform: translate(-5px, 50%);\n }\n\n [favorite] {\n color: var(--menu-tree-favorite-color, tomato);\n }\n\n [groupmenu] > span {\n padding: 9px 9px 7px 10px;\n font: var(--menu-tree-toplevel-font);\n color: var(--menu-tree-toplevel-color);\n }\n\n a {\n background-color: rgba(0, 0, 0, 0.4);\n padding: 7px 7px 6px 15px;\n font: var(--menu-tree-grouplevel-font);\n color: var(--menu-tree-grouplevel-color);\n }\n\n [groupmenu] > span::before {\n content: '';\n display: inline-block;\n width: var(--menu-tree-toplevel-icon-size);\n height: var(--menu-tree-toplevel-icon-size);\n border: var(--menu-tree-toplevel-icon-border);\n border-radius: 50%;\n margin-right: 5px;\n }\n\n a span::before {\n content: '-';\n margin-right: 4px;\n }\n\n [expanded] > span {\n font-weight: bold;\n color: var(--menu-tree-focus-color);\n }\n\n [grouplevel] {\n overflow-y: hidden;\n max-height: 0;\n\n transition-property: all;\n transition-duration: 0.7s;\n }\n\n [expanded] > [grouplevel] {\n overflow-y: auto;\n max-height: 500px;\n }\n\n li[active] a {\n color: var(--menu-tree-focus-color);\n font-weight: bold;\n border-left: var(--menu-tree-grouplevel-active-border-left);\n background-color: rgba(0, 0, 0, 0.6);\n padding-left: 12px;\n }\n `\n ]\n\n @property({ type: String }) menuId?: string\n @property({ type: Array }) menus: any[] = []\n @property({ type: Array }) favorites: string[] = []\n @property({ type: Array }) routingTypes: string[] = []\n @property({ type: String }) page?: string\n @property({ type: Object }) user?: any\n @property({ type: String }) contextPath?: string\n @property({ type: Array }) domains: any[] = []\n @property({ type: Object }) domain?: any\n\n render() {\n var domains = this.domains || []\n var domain = this.domain || {}\n const currentRouting = decodeURIComponent(\n location.pathname.substr(this.contextPath ? this.contextPath.length + 1 : 1)\n )\n\n return html`\n <div domain>\n <md-icon>beenhere</md-icon>\n ${domains.length <= 1\n ? html` <span>${domain.name}</span> `\n : html`\n <select\n .value=${domain.subdomain}\n @change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}\n >\n ${domains.map(\n d => html`\n <option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d.name}</option>\n `\n )}\n </select>\n `}\n </div>\n\n <ul toplevel>\n ${(this.menus || []).map(\n menu => html`\n <li groupmenu>\n <span\n @click=${e => {\n e.target.parentElement.toggleAttribute('expanded')\n this.renderRoot\n .querySelectorAll('[expanded]')\n .forEach(element => element !== e.target.parentElement && element.removeAttribute('expanded'))\n }}\n >${menu.name}</span\n >\n\n <ul grouplevel>\n ${menu.children.map(subMenu => {\n const routing = this._getFullRouting(subMenu)\n const favorite = this.favorites.includes(routing)\n const { icon } = this.routingTypes[subMenu.routingType] || ({} as any)\n const typeIcon = icon ? icon : favorite ? 'star' : null\n\n return html`\n <li ?active=${routing === currentRouting}>\n <a href=${routing}>\n <span>${subMenu.name}</span>\n ${typeIcon ? html` <md-icon menutype ?favorite=${favorite}>${typeIcon}</md-icon> ` : html``}</a\n >\n </li>\n `\n })}\n </ul>\n </li>\n `\n )}\n </ul>\n `\n }\n\n async updated(changes) {\n if (changes.has('user')) {\n this.menus = await this.getMenus()\n }\n\n await this.updateComplete\n\n var active = this.renderRoot.querySelector('[active]')\n if (active) {\n active.parentElement?.parentElement?.setAttribute('expanded', '')\n }\n }\n\n stateChanged(state) {\n this.contextPath = state.app.contextPath\n this.routingTypes = state.menu.routingTypes\n this.menuId = state.route.resourceId\n this.page = state.route.page\n this.user = state.auth.user\n this.domains = state.app.domains\n this.domain = state.app.domain\n this.getMenus =\n state.menu.provider && typeof state.menu.provider === 'function' ? state.menu.provider : this.getMenus\n this.favorites = state.favorite.favorites\n }\n\n _getFullRouting(menu) {\n var { routingType, resourceUrl, titleField, name, resourceType, resourceId } = menu\n if (routingType.toUpperCase() === 'STATIC') {\n if (resourceType?.toUpperCase() === 'BOARD') {\n return `${resourceUrl || 'board-viewer'}/${resourceId}?title=${name}`\n }\n return resourceUrl\n }\n\n var { page } = this.routingTypes[routingType] as any\n return titleField ? `${page}/${menu[titleField]}` : `${page}/${name}`\n }\n\n _onClickRefresh(e) {\n this.dispatchEvent(new CustomEvent('refresh'))\n }\n\n async getMenus() {\n const response = await client.query({\n query: gql`\n query {\n userMenus {\n id\n name\n children {\n id\n name\n routingType\n idField\n titleField\n resourceType\n resourceId\n resourceName\n resourceUrl\n template\n }\n }\n }\n `\n })\n\n return response.data.userMenus\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"menu-tree-bar.js","sourceRoot":"","sources":["../../client/viewparts/menu-tree-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client, store } from '@things-factory/shell/client'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('menu-tree-bar')\nexport default class MenuTreeBar extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n min-width: 200px;\n }\n [domain] {\n background: var(--menu-domain-background-color);\n background: linear-gradient(180deg, var(--md-sys-color-secondary) 0%, var(--md-sys-color-primary) 120%);\n padding: var(--menu-domain-padding);\n border-bottom: 1px solid var(--md-sys-color-primary);\n }\n [domain] md-icon {\n margin-right: -8px;\n font-size: 12px;\n color: var(--menu-domain-icon-color);\n }\n [domain] * {\n vertical-align: middle;\n }\n [domain] span {\n padding-left: 7px;\n font: var(--menu-domain-font);\n color: var(--menu-domain-color);\n }\n [domain] select {\n background-color: transparent;\n width: -webkit-fill-available;\n max-width: 175px;\n border: none;\n\n font: var(--menu-domain-font);\n color: var(--menu-domain-color);\n }\n select:focus {\n outline: 0;\n }\n\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n ul[toplevel] {\n overflow: auto;\n }\n\n li {\n border-bottom: var(--menu-tree-toplevel-border-bottom);\n }\n\n [grouplevel] li {\n border-bottom: var(--menu-tree-grouplevel-border-bottom);\n }\n\n li span,\n li a {\n display: block;\n text-decoration: none;\n position: relative;\n }\n\n [menutype] {\n position: absolute;\n font-size: 1.2em;\n right: 0;\n bottom: 50%;\n transform: translate(-5px, 50%);\n }\n\n [favorite] {\n color: var(--menu-tree-favorite-color, tomato);\n }\n\n [groupmenu] > span {\n padding: 9px 9px 7px 10px;\n font: var(--menu-tree-toplevel-font);\n color: var(--menu-tree-toplevel-color);\n }\n\n a {\n background-color: rgba(0, 0, 0, 0.4);\n padding: 7px 7px 6px 15px;\n font: var(--menu-tree-grouplevel-font);\n color: var(--menu-tree-grouplevel-color);\n }\n\n [groupmenu] > span::before {\n content: '';\n display: inline-block;\n width: var(--menu-tree-toplevel-icon-size);\n height: var(--menu-tree-toplevel-icon-size);\n border: var(--menu-tree-toplevel-icon-border);\n border-radius: 50%;\n margin-right: 5px;\n }\n\n a span::before {\n content: '-';\n margin-right: 4px;\n }\n\n [expanded] > span {\n font-weight: bold;\n color: var(--menu-tree-focus-color);\n }\n\n [grouplevel] {\n overflow-y: hidden;\n max-height: 0;\n\n transition-property: all;\n transition-duration: 0.7s;\n }\n\n [expanded] > [grouplevel] {\n overflow-y: auto;\n max-height: 500px;\n }\n\n li[active] a {\n color: var(--menu-tree-focus-color);\n font-weight: bold;\n border-left: var(--menu-tree-grouplevel-active-border-left);\n background-color: rgba(0, 0, 0, 0.6);\n padding-left: 12px;\n }\n `\n ]\n\n @property({ type: String }) menuId?: string\n @property({ type: Array }) menus: any[] = []\n @property({ type: Array }) favorites: string[] = []\n @property({ type: Array }) routingTypes: string[] = []\n @property({ type: String }) page?: string\n @property({ type: Object }) user?: any\n @property({ type: String }) contextPath?: string\n @property({ type: Array }) domains: any[] = []\n @property({ type: Object }) domain?: any\n\n render() {\n var domains = this.domains || []\n var domain = this.domain || {}\n const currentRouting = decodeURIComponent(\n location.pathname.substr(this.contextPath ? this.contextPath.length + 1 : 1)\n )\n\n return html`\n <div domain>\n <md-icon>beenhere</md-icon>\n ${domains.length <= 1\n ? html` <span>${domain.name}</span> `\n : html`\n <select\n .value=${domain.subdomain}\n @change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}\n >\n ${domains.map(\n d => html`\n <option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d.name}</option>\n `\n )}\n </select>\n `}\n </div>\n\n <ul toplevel>\n ${(this.menus || []).map(\n menu => html`\n <li groupmenu>\n <span\n @click=${e => {\n e.target.parentElement.toggleAttribute('expanded')\n this.renderRoot\n .querySelectorAll('[expanded]')\n .forEach(element => element !== e.target.parentElement && element.removeAttribute('expanded'))\n }}\n >${menu.name}</span\n >\n\n <ul grouplevel>\n ${menu.children.map(subMenu => {\n const routing = this._getFullRouting(subMenu)\n const favorite = this.favorites.includes(routing)\n const { icon } = this.routingTypes[subMenu.routingType] || ({} as any)\n const typeIcon = icon ? icon : favorite ? 'star' : null\n\n return html`\n <li ?active=${routing === currentRouting}>\n <a href=${routing}>\n <span>${subMenu.name}</span>\n ${typeIcon ? html` <md-icon menutype ?favorite=${favorite}>${typeIcon}</md-icon> ` : html``}</a\n >\n </li>\n `\n })}\n </ul>\n </li>\n `\n )}\n </ul>\n `\n }\n\n async updated(changes) {\n if (changes.has('user')) {\n this.menus = await this.getMenus()\n }\n\n await this.updateComplete\n\n var active = this.renderRoot.querySelector('[active]')\n if (active) {\n active.parentElement?.parentElement?.setAttribute('expanded', '')\n }\n }\n\n stateChanged(state) {\n this.contextPath = state.app.contextPath\n this.routingTypes = state.menu.routingTypes\n this.menuId = state.route.resourceId\n this.page = state.route.page\n this.user = state.auth.user\n this.domains = state.app.domains\n this.domain = state.app.domain\n this.getMenus =\n state.menu.provider && typeof state.menu.provider === 'function' ? state.menu.provider : this.getMenus\n this.favorites = state.favorite.favorites\n }\n\n _getFullRouting(menu) {\n var { routingType, resourceUrl, titleField, name, resourceType, resourceId } = menu\n if (routingType.toUpperCase() === 'STATIC') {\n if (resourceType?.toUpperCase() === 'BOARD') {\n return `${resourceUrl || 'board-viewer'}/${resourceId}?title=${name}`\n }\n return resourceUrl\n }\n\n var { page } = this.routingTypes[routingType] as any\n return titleField ? `${page}/${menu[titleField]}` : `${page}/${name}`\n }\n\n _onClickRefresh(e) {\n this.dispatchEvent(new CustomEvent('refresh'))\n }\n\n async getMenus() {\n const response = await client.query({\n query: gql`\n query {\n userMenus {\n id\n name\n children {\n id\n name\n routingType\n idField\n titleField\n resourceType\n resourceId\n resourceName\n resourceUrl\n template\n }\n }\n }\n `\n })\n\n return response.data.userMenus\n }\n}\n"]}
|