@things-factory/auth-ui 7.0.1-alpha.24 → 7.0.1-alpha.27

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,3 +1,5 @@
1
+ import '@material/web/icon/icon.js'
2
+
1
3
  import Clipboard from 'clipboard'
2
4
  import gql from 'graphql-tag'
3
5
  import { css, html } from 'lit'
@@ -8,10 +10,12 @@ import { APPLICATION_TYPES } from '../../constants/application'
8
10
 
9
11
  import { client } from '@operato/graphql'
10
12
  import { navigate, PageView, store } from '@operato/shell'
13
+ import { ButtonContainerStyles } from '@operato/styles'
11
14
 
12
15
  @customElement('application-page')
13
16
  class Application extends connect(store)(PageView) {
14
17
  static styles = [
18
+ ButtonContainerStyles,
15
19
  css`
16
20
  :host {
17
21
  display: flex;
@@ -109,16 +113,7 @@ class Application extends connect(store)(PageView) {
109
113
  font: var(--input-hint-font);
110
114
  color: var(--input-hint-color);
111
115
  }
112
- [danger] {
113
- --mdc-theme-primary: var(--mdc-danger-button-primary-color);
114
- }
115
- .button-container {
116
- margin-top: var(--margin-wide);
117
- text-align: right;
118
- }
119
- .button-container mwc-button {
120
- margin-left: var(--margin-narrow);
121
- }
116
+
122
117
  @media screen and (max-width: 480px) {
123
118
  [field] {
124
119
  grid-column: span 2;
@@ -176,10 +171,7 @@ class Application extends connect(store)(PageView) {
176
171
  <div field grid-span>
177
172
  <label for="type-selector">type</label>
178
173
  <select id="type-selector" name="type">
179
- ${APPLICATION_TYPES.map(
180
- type =>
181
- html`<option value="${app.type}" ?selected="${type === app.type ? true : false}">${type}</option>`
182
- )}
174
+ ${APPLICATION_TYPES.map(type => html`<option value="${app.type}" ?selected="${type === app.type ? true : false}">${type}</option>`)}
183
175
  </select>
184
176
  </div>
185
177
 
@@ -211,30 +203,15 @@ class Application extends connect(store)(PageView) {
211
203
  <div field grid-span>
212
204
  <label for="auth-url">auth URL</label>
213
205
  <input id="auth-url" type="text" .value=${app.authUrl} readonly />
214
- <mwc-button
215
- dense
216
- unelevated
217
- button-in-field
218
- clipboard-copy
219
- @click=${e => e.preventDefault()}
220
- label="copy"
221
- ></mwc-button>
206
+ <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
222
207
  The endpoint for authorization server. This is used to get the authorization code.
223
208
  </div>
224
209
 
225
210
  <div field grid-span>
226
211
  <label for="access-token-url">access token URL</label>
227
212
  <input id="access-token-url" type="text" .value=${app.accessTokenUrl} readonly />
228
- <mwc-button
229
- dense
230
- unelevated
231
- button-in-field
232
- clipboard-copy
233
- @click=${e => e.preventDefault()}
234
- label="copy"
235
- ></mwc-button>
236
- The endpoint for authentication server. This is used to exchange the authorization code for an access
237
- token.
213
+ <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
214
+ The endpoint for authentication server. This is used to exchange the authorization code for an access token.
238
215
  </div>
239
216
  </div>
240
217
  </fieldset>
@@ -247,36 +224,22 @@ class Application extends connect(store)(PageView) {
247
224
  <div field grid-span>
248
225
  <label for="app-key">appKey</label>
249
226
  <input id="app-key" type="text" .value=${app.appKey} readonly />
250
- <mwc-button
251
- dense
252
- unelevated
253
- button-in-field
254
- clipboard-copy
255
- @click=${e => e.preventDefault()}
256
- label="copy"
257
- ></mwc-button>
227
+ <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
258
228
  </div>
259
229
 
260
230
  <div field grid-span>
261
231
  <label for="app-secret">appSecret</label>
262
232
  <input id="app-secret" type="text" .value=${app.appSecret} readonly />
263
- <mwc-button
264
- dense
265
- unelevated
266
- button-in-field
267
- clipboard-copy
268
- @click=${e => e.preventDefault()}
269
- label="copy"
270
- ></mwc-button>
233
+ <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
271
234
  </div>
272
235
  </div>
273
236
  </fieldset>
274
237
  </div>
275
238
 
276
239
  <div class="button-container">
277
- <mwc-button raised danger label="delete this app" @click=${this.deleteApplication.bind(this)}></mwc-button>
278
- <mwc-button raised label="update" @click=${this.updateApplication.bind(this)}></mwc-button>
279
- <mwc-button outlined label="generate new secret"></mwc-button>
240
+ <button danger @click=${this.deleteApplication.bind(this)}><md-icon>delete_forever</md-icon>delete this app</button>
241
+ <button @click=${this.updateApplication.bind(this)}><md-icon>save</md-icon>update</button>
242
+ <button><md-icon>passkey</md-icon>generate new secret</button>
280
243
  </div>
281
244
  </form>
282
245
  `
@@ -1,3 +1,5 @@
1
+ import '@material/web/icon/icon.js'
2
+
1
3
  import gql from 'graphql-tag'
2
4
 
3
5
  import { css, html, LitElement } from 'lit'
@@ -7,6 +9,7 @@ import { client } from '@operato/graphql'
7
9
  import { i18next, localize } from '@operato/i18n'
8
10
  import { isMobileDevice } from '@operato/utils'
9
11
  import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
12
+ import { ButtonContainerStyles } from '@operato/styles'
10
13
 
11
14
  @customElement('attribute-set-item-list')
12
15
  class AttributeSetItemList extends localize(i18next)(LitElement) {
@@ -16,6 +19,7 @@ class AttributeSetItemList extends localize(i18next)(LitElement) {
16
19
 
17
20
  static styles = [
18
21
  css`
22
+ ButtonContainerStyles,
19
23
  :host {
20
24
  display: flex;
21
25
  flex-direction: column;
@@ -26,19 +30,6 @@ class AttributeSetItemList extends localize(i18next)(LitElement) {
26
30
  ox-grist {
27
31
  flex: 1;
28
32
  }
29
-
30
- .button-container {
31
- display: flex;
32
- margin-left: auto;
33
- padding: var(--padding-default);
34
- }
35
-
36
- [danger] {
37
- --mdc-theme-primary: var(--mdc-danger-button-primary-color);
38
- }
39
- mwc-button {
40
- margin-left: var(--margin-default);
41
- }
42
33
  `
43
34
  ]
44
35
 
@@ -46,16 +37,11 @@ class AttributeSetItemList extends localize(i18next)(LitElement) {
46
37
 
47
38
  render() {
48
39
  return html`
49
- <ox-grist
50
- .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
51
- .config=${this.gristConfig}
52
- .fetchHandler=${this.fetchHandler.bind(this)}
53
- ></ox-grist>
40
+ <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
41
+
54
42
  <div class="button-container">
55
- <mwc-button raised danger @click=${this.deleteAttributeSetItems.bind(this)}
56
- >${i18next.t('button.delete')}</mwc-button
57
- >
58
- <mwc-button raised @click=${this.updateAttributeSetItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
43
+ <button danger @click=${this.deleteAttributeSetItems.bind(this)}><md-icon>delete_forever</md-icon>${i18next.t('button.delete')}</button>
44
+ <button @click=${this.updateAttributeSetItems.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
59
45
  </div>
60
46
  `
61
47
  }
@@ -80,10 +80,7 @@ export class AttributeSetManagementPage extends connect(store)(localize(i18next)
80
80
  return html`
81
81
  <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
82
82
  <div slot="headroom" class="header">
83
- <div class="title">
84
- <mwc-icon>apps</mwc-icon>
85
- ${i18next.t('title.attributes')}
86
- </div>
83
+ <div class="title">${i18next.t('title.attributes')}</div>
87
84
 
88
85
  <ox-context-page-toolbar class="actions" .context=${this.context}> </ox-context-page-toolbar>
89
86
  </div>
@@ -81,10 +81,7 @@ export class AuthProviderManagementPage extends connect(store)(localize(i18next)
81
81
  return html`
82
82
  <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
83
83
  <div slot="headroom" class="header">
84
- <div class="title">
85
- <mwc-icon>apps</mwc-icon>
86
- ${i18next.t('title.auth-provider')}
87
- </div>
84
+ <div class="title">${i18next.t('title.auth-provider')}</div>
88
85
 
89
86
  <ox-filters-form autofocus without-search class="filters"></ox-filters-form>
90
87
 
@@ -81,10 +81,7 @@ export class DomainManagement extends connect(store)(localize(i18next)(PageView)
81
81
  return html`
82
82
  <ox-grist .mode=${this.mode} .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>
83
83
  <div slot="headroom" class="header">
84
- <div class="title">
85
- <mwc-icon>apps</mwc-icon>
86
- ${i18next.t('text.domain management')}
87
- </div>
84
+ <div class="title">${i18next.t('text.domain management')}</div>
88
85
 
89
86
  <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
90
87
  </div>
@@ -1 +1 @@
1
- export {};
1
+ import '@material/web/icon/icon.js';
@@ -1,4 +1,5 @@
1
1
  import { __decorate, __metadata } from "tslib";
2
+ import '@material/web/icon/icon.js';
2
3
  import Clipboard from 'clipboard';
3
4
  import gql from 'graphql-tag';
4
5
  import { css, html } from 'lit';
@@ -7,6 +8,7 @@ import { connect } from 'pwa-helpers/connect-mixin.js';
7
8
  import { APPLICATION_TYPES } from '../../constants/application';
8
9
  import { client } from '@operato/graphql';
9
10
  import { navigate, PageView, store } from '@operato/shell';
11
+ import { ButtonContainerStyles } from '@operato/styles';
10
12
  let Application = class Application extends connect(store)(PageView) {
11
13
  get context() {
12
14
  return {
@@ -83,30 +85,15 @@ let Application = class Application extends connect(store)(PageView) {
83
85
  <div field grid-span>
84
86
  <label for="auth-url">auth URL</label>
85
87
  <input id="auth-url" type="text" .value=${app.authUrl} readonly />
86
- <mwc-button
87
- dense
88
- unelevated
89
- button-in-field
90
- clipboard-copy
91
- @click=${e => e.preventDefault()}
92
- label="copy"
93
- ></mwc-button>
88
+ <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
94
89
  The endpoint for authorization server. This is used to get the authorization code.
95
90
  </div>
96
91
 
97
92
  <div field grid-span>
98
93
  <label for="access-token-url">access token URL</label>
99
94
  <input id="access-token-url" type="text" .value=${app.accessTokenUrl} readonly />
100
- <mwc-button
101
- dense
102
- unelevated
103
- button-in-field
104
- clipboard-copy
105
- @click=${e => e.preventDefault()}
106
- label="copy"
107
- ></mwc-button>
108
- The endpoint for authentication server. This is used to exchange the authorization code for an access
109
- token.
95
+ <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
96
+ The endpoint for authentication server. This is used to exchange the authorization code for an access token.
110
97
  </div>
111
98
  </div>
112
99
  </fieldset>
@@ -119,36 +106,22 @@ let Application = class Application extends connect(store)(PageView) {
119
106
  <div field grid-span>
120
107
  <label for="app-key">appKey</label>
121
108
  <input id="app-key" type="text" .value=${app.appKey} readonly />
122
- <mwc-button
123
- dense
124
- unelevated
125
- button-in-field
126
- clipboard-copy
127
- @click=${e => e.preventDefault()}
128
- label="copy"
129
- ></mwc-button>
109
+ <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
130
110
  </div>
131
111
 
132
112
  <div field grid-span>
133
113
  <label for="app-secret">appSecret</label>
134
114
  <input id="app-secret" type="text" .value=${app.appSecret} readonly />
135
- <mwc-button
136
- dense
137
- unelevated
138
- button-in-field
139
- clipboard-copy
140
- @click=${e => e.preventDefault()}
141
- label="copy"
142
- ></mwc-button>
115
+ <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label="copy"></mwc-button>
143
116
  </div>
144
117
  </div>
145
118
  </fieldset>
146
119
  </div>
147
120
 
148
121
  <div class="button-container">
149
- <mwc-button raised danger label="delete this app" @click=${this.deleteApplication.bind(this)}></mwc-button>
150
- <mwc-button raised label="update" @click=${this.updateApplication.bind(this)}></mwc-button>
151
- <mwc-button outlined label="generate new secret"></mwc-button>
122
+ <button danger @click=${this.deleteApplication.bind(this)}><md-icon>delete_forever</md-icon>delete this app</button>
123
+ <button @click=${this.updateApplication.bind(this)}><md-icon>save</md-icon>update</button>
124
+ <button><md-icon>passkey</md-icon>generate new secret</button>
152
125
  </div>
153
126
  </form>
154
127
  `;
@@ -255,6 +228,7 @@ let Application = class Application extends connect(store)(PageView) {
255
228
  }
256
229
  };
257
230
  Application.styles = [
231
+ ButtonContainerStyles,
258
232
  css `
259
233
  :host {
260
234
  display: flex;
@@ -352,16 +326,7 @@ Application.styles = [
352
326
  font: var(--input-hint-font);
353
327
  color: var(--input-hint-color);
354
328
  }
355
- [danger] {
356
- --mdc-theme-primary: var(--mdc-danger-button-primary-color);
357
- }
358
- .button-container {
359
- margin-top: var(--margin-wide);
360
- text-align: right;
361
- }
362
- .button-container mwc-button {
363
- margin-left: var(--margin-narrow);
364
- }
329
+
365
330
  @media screen and (max-width: 480px) {
366
331
  [field] {
367
332
  grid-column: span 2;
@@ -1 +1 @@
1
- {"version":3,"file":"application.js","sourceRoot":"","sources":["../../../client/pages/application/application.ts"],"names":[],"mappings":"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","sourcesContent":["import Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { APPLICATION_TYPES } from '../../constants/application'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\n\n@customElement('application-page')\nclass Application extends connect(store)(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n position: relative;\n background-color: var(--main-section-background-color);\n padding: var(--padding-wide);\n }\n h2 {\n display: flex;\n align-items: center;\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n [icon] {\n position: absolute;\n top: 10px;\n right: 10px;\n max-width: 80px;\n }\n [icon] img {\n max-width: 100%;\n max-height: 100%;\n }\n label {\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n }\n input,\n select {\n border: var(--border-dark-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n font: var(--input-font);\n flex: 1;\n }\n select:focus,\n input:focus,\n button {\n outline: none;\n }\n form {\n max-width: var(--content-container-max-width);\n }\n [fieldset-container] {\n background-color: var(--theme-white-color);\n margin: var(--margin-wide) 0 var(--margin-default) 0;\n padding: var(--padding-default);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n }\n [fieldset-container] fieldset {\n margin: 0;\n margin-top: -15px;\n }\n fieldset {\n border-radius: var(--border-radius);\n border: var(--border-dark-color);\n margin: var(--fieldset-margin);\n padding: var(--fieldset-padding);\n }\n legend {\n padding: var(--legend-padding);\n font-weight: bold;\n color: var(--legend-color);\n }\n [field-2column] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n [field] {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n [grid-span] {\n grid-column: span 2;\n }\n [button-in-field] {\n position: absolute;\n top: 24px;\n right: 4px;\n }\n [input-hint] {\n font: var(--input-hint-font);\n color: var(--input-hint-color);\n }\n [danger] {\n --mdc-theme-primary: var(--mdc-danger-button-primary-color);\n }\n .button-container {\n margin-top: var(--margin-wide);\n text-align: right;\n }\n .button-container mwc-button {\n margin-left: var(--margin-narrow);\n }\n @media screen and (max-width: 480px) {\n [field] {\n grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) application: any\n @queryAll('[clipboard-copy]') copybuttons\n private clipboard?: Clipboard\n\n get context() {\n return {\n title: {\n icon: 'apps',\n text: this.application.name\n }\n }\n }\n\n render() {\n var app = this.application || {}\n\n return html`\n <div>\n <h2><mwc-icon>apps</mwc-icon>&nbsp;${app.name}</h2>\n <p page-description>${app.description}</p>\n </div>\n\n <div icon>\n <img src=${app.icon} />\n </div>\n\n <form>\n <div fieldset-container>\n <fieldset>\n <legend>application</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">app name</label>\n <input id=\"name\" type=\"text\" name=\"name\" .value=${app.name} />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input id=\"description\" type=\"text\" name=\"description\" .value=${app.description} />\n </div>\n\n <div field grid-span>\n <label for=\"email\">contact email</label>\n <input id=\"email\" type=\"text\" name=\"email\" .value=${app.email} />\n </div>\n\n <div field grid-span>\n <label for=\"type-selector\">type</label>\n <select id=\"type-selector\" name=\"type\">\n ${APPLICATION_TYPES.map(\n type =>\n html`<option value=\"${app.type}\" ?selected=\"${type === app.type ? true : false}\">${type}</option>`\n )}\n </select>\n </div>\n\n <div field grid-span>\n <label for=\"url\">application URL</label>\n <input id=\"url\" type=\"text\" name=\"url\" .value=${app.url} />\n </div>\n\n <div field grid-span>\n <label for=\"icon\">icon</label>\n <input id=\"icon\" type=\"text\" name=\"icon\" .value=${app.icon} />\n </div>\n\n <div field grid-span>\n <label for=\"redirect-url\">redirect URL</label>\n <input id=\"redirect-url\" type=\"text\" name=\"redirectUrl\" .value=${app.redirectUrl} />\n </div>\n\n <div field grid-span>\n <label for=\"webhook\">webhook</label>\n <input id=\"webhook\" type=\"text\" name=\"webhook\" .value=${app.webhook} />\n </div>\n\n <div field grid-span>\n <label for=\"available-scopes\">available-scopes</label>\n <input id=\"available-scopes\" type=\"text\" .value=${app.availableScopes} readonly />\n </div>\n\n <div field grid-span>\n <label for=\"auth-url\">auth URL</label>\n <input id=\"auth-url\" type=\"text\" .value=${app.authUrl} readonly />\n <mwc-button\n dense\n unelevated\n button-in-field\n clipboard-copy\n @click=${e => e.preventDefault()}\n label=\"copy\"\n ></mwc-button>\n The endpoint for authorization server. This is used to get the authorization code.\n </div>\n\n <div field grid-span>\n <label for=\"access-token-url\">access token URL</label>\n <input id=\"access-token-url\" type=\"text\" .value=${app.accessTokenUrl} readonly />\n <mwc-button\n dense\n unelevated\n button-in-field\n clipboard-copy\n @click=${e => e.preventDefault()}\n label=\"copy\"\n ></mwc-button>\n The endpoint for authentication server. This is used to exchange the authorization code for an access\n token.\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>credentials</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"app-key\">appKey</label>\n <input id=\"app-key\" type=\"text\" .value=${app.appKey} readonly />\n <mwc-button\n dense\n unelevated\n button-in-field\n clipboard-copy\n @click=${e => e.preventDefault()}\n label=\"copy\"\n ></mwc-button>\n </div>\n\n <div field grid-span>\n <label for=\"app-secret\">appSecret</label>\n <input id=\"app-secret\" type=\"text\" .value=${app.appSecret} readonly />\n <mwc-button\n dense\n unelevated\n button-in-field\n clipboard-copy\n @click=${e => e.preventDefault()}\n label=\"copy\"\n ></mwc-button>\n </div>\n </div>\n </fieldset>\n </div>\n\n <div class=\"button-container\">\n <mwc-button raised danger label=\"delete this app\" @click=${this.deleteApplication.bind(this)}></mwc-button>\n <mwc-button raised label=\"update\" @click=${this.updateApplication.bind(this)}></mwc-button>\n <mwc-button outlined label=\"generate new secret\"></mwc-button>\n </div>\n </form>\n `\n }\n\n firstUpdated() {\n this.clipboard = new Clipboard(this.copybuttons, {\n target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n await this.fetchApplication()\n }\n }\n\n async fetchApplication() {\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n application(id: $id) {\n id\n name\n description\n email\n url\n icon\n redirectUrl\n authUrl\n accessTokenUrl\n webhook\n availableScopes\n appKey\n appSecret\n type\n }\n }\n `,\n variables: {\n id: this.lifecycle.resourceId\n }\n })\n\n this.application = response.data.application\n }\n\n async updateApplication(e) {\n e.preventDefault()\n\n const form = this.renderRoot.querySelector('form') as HTMLFormElement\n const formData = new FormData(form)\n\n const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {\n patch[key] = value\n return patch\n }, {})\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!, $patch: ApplicationPatch!) {\n updateApplication(id: $id, patch: $patch) {\n id\n name\n description\n email\n url\n icon\n redirectUrl\n webhook\n appKey\n appSecret\n type\n }\n }\n `,\n variables: {\n id,\n patch\n }\n })\n\n if (response.errors) {\n console.error('update fail')\n } else {\n this.application = { ...this.application, ...response.data.updateApplication }\n console.log('update sucess')\n }\n }\n\n async deleteApplication(e) {\n e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteApplication(id: $id)\n }\n `,\n variables: {\n id\n }\n })\n\n const result = response.data.deleteApplication\n if (result) {\n console.log('delete sucess')\n navigate('applications')\n } else {\n console.error('delete fail')\n }\n }\n}\n"]}
1
+ {"version":3,"file":"application.js","sourceRoot":"","sources":["../../../client/pages/application/application.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,SAAS,MAAM,WAAW,CAAA;AACjC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAE/D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAGvD,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IAiHhD,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE;gBACL,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI;aAC5B;SACF,CAAA;IACH,CAAC;IAED,MAAM;QACJ,IAAI,GAAG,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE,CAAA;QAEhC,OAAO,IAAI,CAAA;;6CAE8B,GAAG,CAAC,IAAI;8BACvB,GAAG,CAAC,WAAW;;;;mBAI1B,GAAG,CAAC,IAAI;;;;;;;;;;kEAUuC,GAAG,CAAC,IAAI;;;;;gFAKM,GAAG,CAAC,WAAW;;;;;oEAK3B,GAAG,CAAC,KAAK;;;;;;oBAMzD,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,GAAG,CAAC,IAAI,gBAAgB,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,WAAW,CAAC;;;;;;gEAMrF,GAAG,CAAC,GAAG;;;;;kEAKL,GAAG,CAAC,IAAI;;;;;iFAKO,GAAG,CAAC,WAAW;;;;;wEAKxB,GAAG,CAAC,OAAO;;;;;kEAKjB,GAAG,CAAC,eAAe;;;;;0DAK3B,GAAG,CAAC,OAAO;qFACgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;;;;;;kEAM1C,GAAG,CAAC,cAAc;qFACC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;;;;;;;;;;;;;yDAanD,GAAG,CAAC,MAAM;qFACkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;;;;;4DAKhD,GAAG,CAAC,SAAS;qFACY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;;;;;;;kCAO1E,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;2BACxC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAIvD,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE;YAC/C,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,OAAO,CAAC,CAAQ;SACzE,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QAC1C,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAA;SAC9B;IACH,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;OAmBT;YACD,SAAS,EAAE;gBACT,EAAE,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU;aAC9B;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAA;IAC9C,CAAC;IAED,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACvB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB,CAAA;QACrE,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;QAEnC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YAC1E,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YAClB,OAAO,KAAK,CAAA;QACd,CAAC,EAAE,EAAE,CAAC,CAAA;QAEN,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA;QAEpC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;OAgBZ;YACD,SAAS,EAAE;gBACT,EAAE;gBACF,KAAK;aACN;SACF,CAAC,CAAA;QAEF,IAAI,QAAQ,CAAC,MAAM,EAAE;YACnB,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;SAC7B;aAAM;YACL,IAAI,CAAC,WAAW,mCAAQ,IAAI,CAAC,WAAW,GAAK,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAE,CAAA;YAC9E,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAA;SAC7B;IACH,CAAC;IAED,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACvB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA;QAEpC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;OAIZ;YACD,SAAS,EAAE;gBACT,EAAE;aACH;SACF,CAAC,CAAA;QAEF,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAA;QAC9C,IAAI,MAAM,EAAE;YACV,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAA;YAC5B,QAAQ,CAAC,cAAc,CAAC,CAAA;SACzB;aAAM;YACL,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;SAC7B;IACH,CAAC;;AArVM,kBAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuGF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAiB;AAC5C;IAAC,QAAQ,CAAC,kBAAkB,CAAC;;gDAAY;AA9GrC,WAAW;IADhB,aAAa,CAAC,kBAAkB,CAAC;GAC5B,WAAW,CAuVhB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { APPLICATION_TYPES } from '../../constants/application'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('application-page')\nclass Application extends connect(store)(PageView) {\n static styles = [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n position: relative;\n background-color: var(--main-section-background-color);\n padding: var(--padding-wide);\n }\n h2 {\n display: flex;\n align-items: center;\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n [icon] {\n position: absolute;\n top: 10px;\n right: 10px;\n max-width: 80px;\n }\n [icon] img {\n max-width: 100%;\n max-height: 100%;\n }\n label {\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n }\n input,\n select {\n border: var(--border-dark-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n font: var(--input-font);\n flex: 1;\n }\n select:focus,\n input:focus,\n button {\n outline: none;\n }\n form {\n max-width: var(--content-container-max-width);\n }\n [fieldset-container] {\n background-color: var(--theme-white-color);\n margin: var(--margin-wide) 0 var(--margin-default) 0;\n padding: var(--padding-default);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n }\n [fieldset-container] fieldset {\n margin: 0;\n margin-top: -15px;\n }\n fieldset {\n border-radius: var(--border-radius);\n border: var(--border-dark-color);\n margin: var(--fieldset-margin);\n padding: var(--fieldset-padding);\n }\n legend {\n padding: var(--legend-padding);\n font-weight: bold;\n color: var(--legend-color);\n }\n [field-2column] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n [field] {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n [grid-span] {\n grid-column: span 2;\n }\n [button-in-field] {\n position: absolute;\n top: 24px;\n right: 4px;\n }\n [input-hint] {\n font: var(--input-hint-font);\n color: var(--input-hint-color);\n }\n\n @media screen and (max-width: 480px) {\n [field] {\n grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) application: any\n @queryAll('[clipboard-copy]') copybuttons\n private clipboard?: Clipboard\n\n get context() {\n return {\n title: {\n icon: 'apps',\n text: this.application.name\n }\n }\n }\n\n render() {\n var app = this.application || {}\n\n return html`\n <div>\n <h2><mwc-icon>apps</mwc-icon>&nbsp;${app.name}</h2>\n <p page-description>${app.description}</p>\n </div>\n\n <div icon>\n <img src=${app.icon} />\n </div>\n\n <form>\n <div fieldset-container>\n <fieldset>\n <legend>application</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">app name</label>\n <input id=\"name\" type=\"text\" name=\"name\" .value=${app.name} />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input id=\"description\" type=\"text\" name=\"description\" .value=${app.description} />\n </div>\n\n <div field grid-span>\n <label for=\"email\">contact email</label>\n <input id=\"email\" type=\"text\" name=\"email\" .value=${app.email} />\n </div>\n\n <div field grid-span>\n <label for=\"type-selector\">type</label>\n <select id=\"type-selector\" name=\"type\">\n ${APPLICATION_TYPES.map(type => html`<option value=\"${app.type}\" ?selected=\"${type === app.type ? true : false}\">${type}</option>`)}\n </select>\n </div>\n\n <div field grid-span>\n <label for=\"url\">application URL</label>\n <input id=\"url\" type=\"text\" name=\"url\" .value=${app.url} />\n </div>\n\n <div field grid-span>\n <label for=\"icon\">icon</label>\n <input id=\"icon\" type=\"text\" name=\"icon\" .value=${app.icon} />\n </div>\n\n <div field grid-span>\n <label for=\"redirect-url\">redirect URL</label>\n <input id=\"redirect-url\" type=\"text\" name=\"redirectUrl\" .value=${app.redirectUrl} />\n </div>\n\n <div field grid-span>\n <label for=\"webhook\">webhook</label>\n <input id=\"webhook\" type=\"text\" name=\"webhook\" .value=${app.webhook} />\n </div>\n\n <div field grid-span>\n <label for=\"available-scopes\">available-scopes</label>\n <input id=\"available-scopes\" type=\"text\" .value=${app.availableScopes} readonly />\n </div>\n\n <div field grid-span>\n <label for=\"auth-url\">auth URL</label>\n <input id=\"auth-url\" type=\"text\" .value=${app.authUrl} readonly />\n <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label=\"copy\"></mwc-button>\n The endpoint for authorization server. This is used to get the authorization code.\n </div>\n\n <div field grid-span>\n <label for=\"access-token-url\">access token URL</label>\n <input id=\"access-token-url\" type=\"text\" .value=${app.accessTokenUrl} readonly />\n <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label=\"copy\"></mwc-button>\n The endpoint for authentication server. This is used to exchange the authorization code for an access token.\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>credentials</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"app-key\">appKey</label>\n <input id=\"app-key\" type=\"text\" .value=${app.appKey} readonly />\n <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label=\"copy\"></mwc-button>\n </div>\n\n <div field grid-span>\n <label for=\"app-secret\">appSecret</label>\n <input id=\"app-secret\" type=\"text\" .value=${app.appSecret} readonly />\n <mwc-button dense unelevated button-in-field clipboard-copy @click=${e => e.preventDefault()} label=\"copy\"></mwc-button>\n </div>\n </div>\n </fieldset>\n </div>\n\n <div class=\"button-container\">\n <button danger @click=${this.deleteApplication.bind(this)}><md-icon>delete_forever</md-icon>delete this app</button>\n <button @click=${this.updateApplication.bind(this)}><md-icon>save</md-icon>update</button>\n <button><md-icon>passkey</md-icon>generate new secret</button>\n </div>\n </form>\n `\n }\n\n firstUpdated() {\n this.clipboard = new Clipboard(this.copybuttons, {\n target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n await this.fetchApplication()\n }\n }\n\n async fetchApplication() {\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n application(id: $id) {\n id\n name\n description\n email\n url\n icon\n redirectUrl\n authUrl\n accessTokenUrl\n webhook\n availableScopes\n appKey\n appSecret\n type\n }\n }\n `,\n variables: {\n id: this.lifecycle.resourceId\n }\n })\n\n this.application = response.data.application\n }\n\n async updateApplication(e) {\n e.preventDefault()\n\n const form = this.renderRoot.querySelector('form') as HTMLFormElement\n const formData = new FormData(form)\n\n const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {\n patch[key] = value\n return patch\n }, {})\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!, $patch: ApplicationPatch!) {\n updateApplication(id: $id, patch: $patch) {\n id\n name\n description\n email\n url\n icon\n redirectUrl\n webhook\n appKey\n appSecret\n type\n }\n }\n `,\n variables: {\n id,\n patch\n }\n })\n\n if (response.errors) {\n console.error('update fail')\n } else {\n this.application = { ...this.application, ...response.data.updateApplication }\n console.log('update sucess')\n }\n }\n\n async deleteApplication(e) {\n e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteApplication(id: $id)\n }\n `,\n variables: {\n id\n }\n })\n\n const result = response.data.deleteApplication\n if (result) {\n console.log('delete sucess')\n navigate('applications')\n } else {\n console.error('delete fail')\n }\n }\n}\n"]}
@@ -1 +1 @@
1
- export {};
1
+ import '@material/web/icon/icon.js';
@@ -1,4 +1,5 @@
1
1
  import { __decorate, __metadata } from "tslib";
2
+ import '@material/web/icon/icon.js';
2
3
  import gql from 'graphql-tag';
3
4
  import { css, html, LitElement } from 'lit';
4
5
  import { customElement, property, query, state } from 'lit/decorators.js';
@@ -9,16 +10,11 @@ import { DataGrist } from '@operato/data-grist';
9
10
  let AttributeSetItemList = class AttributeSetItemList extends localize(i18next)(LitElement) {
10
11
  render() {
11
12
  return html `
12
- <ox-grist
13
- .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
14
- .config=${this.gristConfig}
15
- .fetchHandler=${this.fetchHandler.bind(this)}
16
- ></ox-grist>
13
+ <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
14
+
17
15
  <div class="button-container">
18
- <mwc-button raised danger @click=${this.deleteAttributeSetItems.bind(this)}
19
- >${i18next.t('button.delete')}</mwc-button
20
- >
21
- <mwc-button raised @click=${this.updateAttributeSetItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
16
+ <button danger @click=${this.deleteAttributeSetItems.bind(this)}><md-icon>delete_forever</md-icon>${i18next.t('button.delete')}</button>
17
+ <button @click=${this.updateAttributeSetItems.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
22
18
  </div>
23
19
  `;
24
20
  }
@@ -194,6 +190,7 @@ let AttributeSetItemList = class AttributeSetItemList extends localize(i18next)(
194
190
  };
195
191
  AttributeSetItemList.styles = [
196
192
  css `
193
+ ButtonContainerStyles,
197
194
  :host {
198
195
  display: flex;
199
196
  flex-direction: column;
@@ -204,19 +201,6 @@ AttributeSetItemList.styles = [
204
201
  ox-grist {
205
202
  flex: 1;
206
203
  }
207
-
208
- .button-container {
209
- display: flex;
210
- margin-left: auto;
211
- padding: var(--padding-default);
212
- }
213
-
214
- [danger] {
215
- --mdc-theme-primary: var(--mdc-danger-button-primary-color);
216
- }
217
- mwc-button {
218
- margin-left: var(--margin-default);
219
- }
220
204
  `
221
205
  ];
222
206
  __decorate([
@@ -1 +1 @@
1
- {"version":3,"file":"attribute-set-item-list.js","sourceRoot":"","sources":["../../../client/pages/attribute/attribute-set-item-list.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'\n\n@customElement('attribute-set-item-list')\nclass AttributeSetItemList extends localize(i18next)(LitElement) {\n @property({ type: Object }) attribute: any\n\n @state() gristConfig: any\n\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: #fff;\n }\n\n ox-grist {\n flex: 1;\n }\n\n .button-container {\n display: flex;\n margin-left: auto;\n padding: var(--padding-default);\n }\n\n [danger] {\n --mdc-theme-primary: var(--mdc-danger-button-primary-color);\n }\n mwc-button {\n margin-left: var(--margin-default);\n }\n `\n ]\n\n @query('ox-grist') private grist!: DataGrist\n\n render() {\n return html`\n <ox-grist\n .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n .config=${this.gristConfig}\n .fetchHandler=${this.fetchHandler.bind(this)}\n ></ox-grist>\n <div class=\"button-container\">\n <mwc-button raised danger @click=${this.deleteAttributeSetItems.bind(this)}\n >${i18next.t('button.delete')}</mwc-button\n >\n <mwc-button raised @click=${this.updateAttributeSetItems.bind(this)}>${i18next.t('button.save')}</mwc-button>\n </div>\n `\n }\n\n async firstUpdated() {\n this.gristConfig = {\n list: { fields: ['name', 'description', 'active'] },\n columns: [\n { type: 'gutter', gutterName: 'row-selector', multiple: true },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'add',\n handlers: {\n click: 'record-copy'\n }\n },\n { type: 'gutter', gutterName: 'sequence' },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'arrow_upward',\n handlers: {\n click: 'move-up'\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'arrow_downward',\n handlers: {\n click: 'move-down'\n }\n },\n {\n type: 'string',\n name: 'name',\n header: i18next.t('field.name'),\n record: {\n editable: true\n },\n width: 140\n },\n {\n type: 'string',\n name: 'description',\n header: i18next.t('field.description'),\n record: {\n editable: true\n },\n width: 180\n },\n {\n type: 'string',\n name: 'tag',\n header: i18next.t('field.tag'),\n record: {\n editable: true\n },\n width: 180\n },\n {\n type: 'checkbox',\n name: 'active',\n label: true,\n header: i18next.t('field.active'),\n record: {\n editable: true\n },\n sortable: true,\n width: 60\n },\n {\n type: 'checkbox',\n name: 'hidden',\n label: true,\n header: i18next.t('field.hidden'),\n record: {\n editable: true\n },\n sortable: true,\n width: 60\n },\n {\n type: 'select',\n name: 'type',\n header: i18next.t('field.type'),\n record: {\n options: ['', 'number', 'text', 'select', 'boolean', 'date', 'datetime', 'file'],\n editable: true\n },\n width: 120\n },\n {\n type: 'parameters',\n name: 'options',\n header: i18next.t('field.options'),\n record: {\n editable: true,\n renderer: 'json5',\n options: async (value, column, record, row, field) => {\n return {\n name: record.type,\n help: '',\n spec:\n record.type === 'select'\n ? [\n {\n type: 'options' /* property-editor type */,\n name: 'options',\n label: 'options'\n }\n ]\n : [],\n context: this.grist,\n objectified: true\n }\n }\n },\n width: 120\n }\n ],\n rows: {\n selectable: {\n multiple: true\n }\n },\n pagination: {\n infinite: true\n },\n sorters: []\n }\n }\n\n async fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {\n const attributes = this.attribute.items || []\n\n return {\n total: attributes.length,\n records: attributes\n }\n }\n\n private async updateAttributeSetItems() {\n this.grist.commit()\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!, $patch: AttributeSetPatch!) {\n updateAttributeSet(id: $id, patch: $patch) {\n entity\n }\n }\n `,\n variables: {\n id: this.attribute.id,\n patch: {\n items: this.grist.data.records,\n cuFlag: 'M'\n }\n }\n })\n\n if (!response.errors) {\n await document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n message: i18next.t('text.info_x_successfully', {\n x: i18next.t('button.save')\n })\n }\n })\n )\n }\n }\n\n private async deleteAttributeSetItems() {\n if (!confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {\n return\n }\n\n this.grist.deleteSelectedRecords(false)\n }\n}\n"]}
1
+ {"version":3,"file":"attribute-set-item-list.js","sourceRoot":"","sources":["../../../client/pages/attribute/attribute-set-item-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('attribute-set-item-list')\nclass AttributeSetItemList extends localize(i18next)(LitElement) {\n @property({ type: Object }) attribute: any\n\n @state() gristConfig: any\n\n static styles = [\n css`\n ButtonContainerStyles,\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: #fff;\n }\n\n ox-grist {\n flex: 1;\n }\n `\n ]\n\n @query('ox-grist') private grist!: DataGrist\n\n render() {\n return html`\n <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>\n\n <div class=\"button-container\">\n <button danger @click=${this.deleteAttributeSetItems.bind(this)}><md-icon>delete_forever</md-icon>${i18next.t('button.delete')}</button>\n <button @click=${this.updateAttributeSetItems.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>\n </div>\n `\n }\n\n async firstUpdated() {\n this.gristConfig = {\n list: { fields: ['name', 'description', 'active'] },\n columns: [\n { type: 'gutter', gutterName: 'row-selector', multiple: true },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'add',\n handlers: {\n click: 'record-copy'\n }\n },\n { type: 'gutter', gutterName: 'sequence' },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'arrow_upward',\n handlers: {\n click: 'move-up'\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'arrow_downward',\n handlers: {\n click: 'move-down'\n }\n },\n {\n type: 'string',\n name: 'name',\n header: i18next.t('field.name'),\n record: {\n editable: true\n },\n width: 140\n },\n {\n type: 'string',\n name: 'description',\n header: i18next.t('field.description'),\n record: {\n editable: true\n },\n width: 180\n },\n {\n type: 'string',\n name: 'tag',\n header: i18next.t('field.tag'),\n record: {\n editable: true\n },\n width: 180\n },\n {\n type: 'checkbox',\n name: 'active',\n label: true,\n header: i18next.t('field.active'),\n record: {\n editable: true\n },\n sortable: true,\n width: 60\n },\n {\n type: 'checkbox',\n name: 'hidden',\n label: true,\n header: i18next.t('field.hidden'),\n record: {\n editable: true\n },\n sortable: true,\n width: 60\n },\n {\n type: 'select',\n name: 'type',\n header: i18next.t('field.type'),\n record: {\n options: ['', 'number', 'text', 'select', 'boolean', 'date', 'datetime', 'file'],\n editable: true\n },\n width: 120\n },\n {\n type: 'parameters',\n name: 'options',\n header: i18next.t('field.options'),\n record: {\n editable: true,\n renderer: 'json5',\n options: async (value, column, record, row, field) => {\n return {\n name: record.type,\n help: '',\n spec:\n record.type === 'select'\n ? [\n {\n type: 'options' /* property-editor type */,\n name: 'options',\n label: 'options'\n }\n ]\n : [],\n context: this.grist,\n objectified: true\n }\n }\n },\n width: 120\n }\n ],\n rows: {\n selectable: {\n multiple: true\n }\n },\n pagination: {\n infinite: true\n },\n sorters: []\n }\n }\n\n async fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {\n const attributes = this.attribute.items || []\n\n return {\n total: attributes.length,\n records: attributes\n }\n }\n\n private async updateAttributeSetItems() {\n this.grist.commit()\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!, $patch: AttributeSetPatch!) {\n updateAttributeSet(id: $id, patch: $patch) {\n entity\n }\n }\n `,\n variables: {\n id: this.attribute.id,\n patch: {\n items: this.grist.data.records,\n cuFlag: 'M'\n }\n }\n })\n\n if (!response.errors) {\n await document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n message: i18next.t('text.info_x_successfully', {\n x: i18next.t('button.save')\n })\n }\n })\n )\n }\n }\n\n private async deleteAttributeSetItems() {\n if (!confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {\n return\n }\n\n this.grist.deleteSelectedRecords(false)\n }\n}\n"]}
@@ -54,10 +54,7 @@ let AttributeSetManagementPage = class AttributeSetManagementPage extends connec
54
54
  return html `
55
55
  <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
56
56
  <div slot="headroom" class="header">
57
- <div class="title">
58
- <mwc-icon>apps</mwc-icon>
59
- ${i18next.t('title.attributes')}
60
- </div>
57
+ <div class="title">${i18next.t('title.attributes')}</div>
61
58
 
62
59
  <ox-context-page-toolbar class="actions" .context=${this.context}> </ox-context-page-toolbar>
63
60
  </div>
@@ -1 +1 @@
1
- {"version":3,"file":"attribute-set-management.js","sourceRoot":"","sources":["../../../client/pages/attribute/attribute-set-management.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/context/ox-context-page-toolbar.js'\nimport './attribute-set-item-list.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { getEditor, getRenderer, ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { PageView, store } from '@operato/shell'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\nimport { isMobileDevice, sleep } from '@operato/utils'\nimport { OxPopup } from '@operato/popup'\n\n@customElement('attribute-set-management')\nexport class AttributeSetManagementPage extends connect(store)(localize(i18next)(PageView)) {\n static styles = [\n ScrollbarStyles,\n CommonHeaderStyles,\n css`\n :host {\n display: flex;\n\n width: 100%;\n\n --grid-record-emphasized-background-color: #8b0000;\n --grid-record-emphasized-color: #ff6b6b;\n }\n\n ox-grist {\n overflow-y: auto;\n flex: 1;\n }\n `\n ]\n\n @state() gristConfig: any\n @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'\n\n @query('ox-grist') private grist!: DataGrist\n\n get context() {\n return {\n title: i18next.t('title.attributes'),\n search: {\n handler: (search: string) => {\n this.grist.searchText = search\n },\n value: this.grist?.searchText || ''\n },\n filter: {\n handler: () => {\n this.grist.toggleHeadroom()\n }\n },\n // help: 'system/attribute',\n actions: [\n {\n title: i18next.t('button.save'),\n action: this.updateAttributeSet.bind(this),\n icon: 'save'\n },\n {\n title: i18next.t('button.delete'),\n action: this.deleteAttributeSet.bind(this),\n icon: 'delete'\n }\n ],\n toolbar: false\n }\n }\n\n render() {\n const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')\n\n return html`\n <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>\n <div slot=\"headroom\" class=\"header\">\n <div class=\"title\">\n <mwc-icon>apps</mwc-icon>\n ${i18next.t('title.attributes')}\n </div>\n\n <ox-context-page-toolbar class=\"actions\" .context=${this.context}> </ox-context-page-toolbar>\n </div>\n </ox-grist>\n `\n }\n\n async pageInitialized(lifecycle) {\n this.gristConfig = {\n list: {\n fields: ['entity', 'description']\n },\n columns: [\n { type: 'gutter', gutterName: 'sequence' },\n { type: 'gutter', gutterName: 'row-selector', multiple: true },\n {\n type: 'gutter',\n gutterName: 'button',\n title: i18next.t('title.attribute model'),\n icon: 'reorder',\n handlers: {\n click: (columns, data, column, record, rowIndex) => {\n if (!record.id) return\n const popup = openPopup(html` <attribute-set-item-list .attribute=${record}></attribute-set-item-list> `, {\n backdrop: true,\n help: 'attribute/ui/attribute-set-item-list',\n size: 'large',\n title: i18next.t('title.attribute-item list')\n })\n popup.onclosed = () => {\n this.grist.fetch()\n }\n }\n }\n },\n {\n type: 'string',\n name: 'entity',\n header: i18next.t('field.entity'),\n record: {\n editable: true\n },\n filter: 'search',\n sortable: true,\n width: 150\n },\n {\n type: 'string',\n name: 'description',\n header: i18next.t('field.description'),\n record: {\n editable: true\n },\n filter: 'search',\n width: 200\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: i18next.t('field.updated_at'),\n record: {\n editable: false\n },\n sortable: true,\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: true\n }\n },\n sorters: [\n {\n name: 'name'\n }\n ]\n }\n }\n\n async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {\n const response = await client.query({\n query: gql`\n query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n responses: attributeSets(filters: $filters, pagination: $pagination, sortings: $sortings) {\n items {\n id\n entity\n description\n updatedAt\n items {\n name\n description\n tag\n active\n hidden\n type\n options\n }\n }\n total\n }\n }\n `,\n variables: {\n filters,\n pagination: { page, limit },\n sortings\n }\n })\n\n return {\n total: response.data.responses.total || 0,\n records: response.data.responses.items || []\n }\n }\n\n private async deleteAttributeSet() {\n if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {\n const ids = this.grist.selected.map(record => record.id)\n if (ids && ids.length > 0) {\n const response = await client.mutate({\n mutation: gql`\n mutation ($ids: [String!]!) {\n deleteAttributeSets(ids: $ids)\n }\n `,\n variables: {\n ids\n }\n })\n\n if (!response.errors) {\n this.grist.fetch()\n notify({\n message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })\n })\n }\n }\n }\n }\n\n private async updateAttributeSet() {\n let patches = this.grist.dirtyRecords\n if (patches && patches.length) {\n patches = patches.map(patch => {\n let patchField: any = patch.id ? { id: patch.id } : {}\n const dirtyFields = patch.__dirtyfields__\n for (let key in dirtyFields) {\n patchField[key] = dirtyFields[key].after\n }\n if (patchField['reportTemplate'] instanceof FileList) {\n patchField['reportTemplate'] = patchField['reportTemplate'][0]\n }\n patchField.cuFlag = patch.__dirty__\n\n return patchField\n })\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($patches: [AttributeSetPatch!]!) {\n updateMultipleAttributeSet(patches: $patches) {\n entity\n }\n }\n `,\n variables: {\n patches\n },\n context: {\n hasUpload: true\n }\n })\n\n if (!response.errors) {\n this.grist.fetch()\n }\n }\n }\n}\n"]}
1
+ {"version":3,"file":"attribute-set-management.js","sourceRoot":"","sources":["../../../client/pages/attribute/attribute-set-management.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/context/ox-context-page-toolbar.js'\nimport './attribute-set-item-list.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { getEditor, getRenderer, ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { PageView, store } from '@operato/shell'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\nimport { isMobileDevice, sleep } from '@operato/utils'\nimport { OxPopup } from '@operato/popup'\n\n@customElement('attribute-set-management')\nexport class AttributeSetManagementPage extends connect(store)(localize(i18next)(PageView)) {\n static styles = [\n ScrollbarStyles,\n CommonHeaderStyles,\n css`\n :host {\n display: flex;\n\n width: 100%;\n\n --grid-record-emphasized-background-color: #8b0000;\n --grid-record-emphasized-color: #ff6b6b;\n }\n\n ox-grist {\n overflow-y: auto;\n flex: 1;\n }\n `\n ]\n\n @state() gristConfig: any\n @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'\n\n @query('ox-grist') private grist!: DataGrist\n\n get context() {\n return {\n title: i18next.t('title.attributes'),\n search: {\n handler: (search: string) => {\n this.grist.searchText = search\n },\n value: this.grist?.searchText || ''\n },\n filter: {\n handler: () => {\n this.grist.toggleHeadroom()\n }\n },\n // help: 'system/attribute',\n actions: [\n {\n title: i18next.t('button.save'),\n action: this.updateAttributeSet.bind(this),\n icon: 'save'\n },\n {\n title: i18next.t('button.delete'),\n action: this.deleteAttributeSet.bind(this),\n icon: 'delete'\n }\n ],\n toolbar: false\n }\n }\n\n render() {\n const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')\n\n return html`\n <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>\n <div slot=\"headroom\" class=\"header\">\n <div class=\"title\">${i18next.t('title.attributes')}</div>\n\n <ox-context-page-toolbar class=\"actions\" .context=${this.context}> </ox-context-page-toolbar>\n </div>\n </ox-grist>\n `\n }\n\n async pageInitialized(lifecycle) {\n this.gristConfig = {\n list: {\n fields: ['entity', 'description']\n },\n columns: [\n { type: 'gutter', gutterName: 'sequence' },\n { type: 'gutter', gutterName: 'row-selector', multiple: true },\n {\n type: 'gutter',\n gutterName: 'button',\n title: i18next.t('title.attribute model'),\n icon: 'reorder',\n handlers: {\n click: (columns, data, column, record, rowIndex) => {\n if (!record.id) return\n const popup = openPopup(html` <attribute-set-item-list .attribute=${record}></attribute-set-item-list> `, {\n backdrop: true,\n help: 'attribute/ui/attribute-set-item-list',\n size: 'large',\n title: i18next.t('title.attribute-item list')\n })\n popup.onclosed = () => {\n this.grist.fetch()\n }\n }\n }\n },\n {\n type: 'string',\n name: 'entity',\n header: i18next.t('field.entity'),\n record: {\n editable: true\n },\n filter: 'search',\n sortable: true,\n width: 150\n },\n {\n type: 'string',\n name: 'description',\n header: i18next.t('field.description'),\n record: {\n editable: true\n },\n filter: 'search',\n width: 200\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: i18next.t('field.updated_at'),\n record: {\n editable: false\n },\n sortable: true,\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: true\n }\n },\n sorters: [\n {\n name: 'name'\n }\n ]\n }\n }\n\n async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {\n const response = await client.query({\n query: gql`\n query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n responses: attributeSets(filters: $filters, pagination: $pagination, sortings: $sortings) {\n items {\n id\n entity\n description\n updatedAt\n items {\n name\n description\n tag\n active\n hidden\n type\n options\n }\n }\n total\n }\n }\n `,\n variables: {\n filters,\n pagination: { page, limit },\n sortings\n }\n })\n\n return {\n total: response.data.responses.total || 0,\n records: response.data.responses.items || []\n }\n }\n\n private async deleteAttributeSet() {\n if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {\n const ids = this.grist.selected.map(record => record.id)\n if (ids && ids.length > 0) {\n const response = await client.mutate({\n mutation: gql`\n mutation ($ids: [String!]!) {\n deleteAttributeSets(ids: $ids)\n }\n `,\n variables: {\n ids\n }\n })\n\n if (!response.errors) {\n this.grist.fetch()\n notify({\n message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })\n })\n }\n }\n }\n }\n\n private async updateAttributeSet() {\n let patches = this.grist.dirtyRecords\n if (patches && patches.length) {\n patches = patches.map(patch => {\n let patchField: any = patch.id ? { id: patch.id } : {}\n const dirtyFields = patch.__dirtyfields__\n for (let key in dirtyFields) {\n patchField[key] = dirtyFields[key].after\n }\n if (patchField['reportTemplate'] instanceof FileList) {\n patchField['reportTemplate'] = patchField['reportTemplate'][0]\n }\n patchField.cuFlag = patch.__dirty__\n\n return patchField\n })\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($patches: [AttributeSetPatch!]!) {\n updateMultipleAttributeSet(patches: $patches) {\n entity\n }\n }\n `,\n variables: {\n patches\n },\n context: {\n hasUpload: true\n }\n })\n\n if (!response.errors) {\n this.grist.fetch()\n }\n }\n }\n}\n"]}