@quandis/qbo4.configuration 4.0.1-CI-20241011-172926 → 4.0.1-CI-20241014-230455

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/package.json +1 -1
  2. package/scss/qbo-configuration.scss +10 -1
  3. package/src/qbo-config-editor.d.ts +9 -12
  4. package/src/qbo-config-editor.js +122 -58
  5. package/src/qbo-config-editor.js.map +1 -1
  6. package/src/qbo-config-editor.ts +118 -66
  7. package/src/styles.js +1 -1
  8. package/src/styles.js.map +1 -1
  9. package/src/styles.ts +1 -1
  10. package/wwwroot/css/qbo-configuration.css +6 -3
  11. package/wwwroot/css/qbo-configuration.css.map +1 -1
  12. package/wwwroot/css/qbo-configuration.min.css +1 -1
  13. package/wwwroot/js/esm/qbo4.configuration.js +125 -60
  14. package/wwwroot/js/esm/qbo4.configuration.min.js +49 -24
  15. package/wwwroot/js/esm/qbo4.configuration.min.js.map +1 -1
  16. package/wwwroot/js/qbo4.configuration.js +125 -60
  17. package/wwwroot/js/qbo4.configuration.min.js +49 -24
  18. package/wwwroot/js/qbo4.configuration.min.js.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@quandis/qbo4.configuration",
3
- "version": "4.0.1-CI-20241011-172926",
3
+ "version": "4.0.1-CI-20241014-230455",
4
4
  "type": "module",
5
5
  "types": "./src/Program.d.ts",
6
6
  "exports": {
package/scss/qbo-configuration.scss CHANGED
@@ -61,4 +61,13 @@
61
61
  .error {
62
62
  @extend .alert;
63
63
  @extend .alert-danger;
64
- }
64
+ }
65
+
66
+ .success {
67
+ @extend .alert;
68
+ @extend .alert-success;
69
+ }
70
+
71
+ .hidden {
72
+ display: none;
73
+ }
package/src/qbo-config-editor.d.ts CHANGED
@@ -1,19 +1,16 @@
1
1
  import { LitElement } from 'lit';
2
2
  export declare class QboConfigEditor extends LitElement {
3
- private _internals;
4
- static get formAssociated(): boolean;
5
- value: any;
6
3
  apiEndpoint: URL;
7
4
  configData: Object;
8
- static styles: import("lit").CSSResult;
9
- constructor();
10
- _handleInput(e: any): void;
11
- kc_connectedCallback(): Promise<void>;
12
- handleInputChange(key: any, event: any): void;
13
- updateConfigData(key: any, newValue: any, event: any, isKey?: boolean): void;
5
+ static styles: import("lit").CSSResult[];
6
+ updateConfigData(key: any, newValue: any, event: any, isKey?: boolean): Promise<void>;
14
7
  addKeyValuePair(event: any): void;
15
- deleteKeyValuePair(key: any, event: any): void;
16
- saveChanges(event: any): void;
17
- cancelChanges(event: any): void;
8
+ deleteKeyValuePair(key: any, event: any): Promise<void>;
9
+ saveChanges(event: any): Promise<void>;
10
+ alertUpdated(): void;
11
+ alertClear(alert: Element): void;
12
+ cancelChanges(event: any): Promise<void>;
13
+ filter(event: any): Promise<void>;
14
+ search(): Promise<void>;
18
15
  render(): import("lit-html").TemplateResult<1>;
19
16
  }
package/src/qbo-config-editor.js CHANGED
@@ -10,47 +10,29 @@ var __metadata = (this && this.__metadata) || function (k, v) {
10
10
  import { LitElement, html, css, } from 'lit';
11
11
  import { property } from 'lit/decorators.js';
12
12
  import { JsonConfigurationSource } from './Configuration.js';
13
+ import { configurationCss } from './styles.js';
13
14
  export class QboConfigEditor extends LitElement {
14
- static get formAssociated() {
15
- return true;
15
+ constructor() {
16
+ super(...arguments);
17
+ this.apiEndpoint = new URL('configuration/repository', this.baseURI);
18
+ this.configData = {};
16
19
  }
17
- // configSource = new JsonConfigurationSource({});
18
- static { this.styles = css `
20
+ static { this.styles = [
21
+ configurationCss,
22
+ css `
19
23
  :host {
20
24
  display: block;
21
25
  padding: 16px;
22
26
  }
23
- .form-group {
24
- margin-bottom: 10px;
27
+ .row-search-result {
28
+ margin-bottom: 10px;
25
29
  }
26
- `; }
27
- constructor() {
28
- super();
29
- this.apiEndpoint = new URL('repository/search', this.baseURI);
30
- // @property({ type: Object })
31
- this.configData = {};
32
- // Use attachInternals() to get access to form internals
33
- this._internals = this.attachInternals();
34
- }
35
- _handleInput(e) {
36
- // Update the value on input events
37
- this.value = e.target.value;
38
- this._internals.setFormValue(this.value);
39
- }
40
- async kc_connectedCallback() {
41
- super.connectedCallback();
42
- // check payload
43
- if (this.value) {
44
- this.configData = JSON.parse(this.value);
45
- }
46
- }
47
- handleInputChange(key, event) {
48
- event.preventDefault();
49
- const target = event.target;
50
- this.configData[key] = target.value;
51
- this.requestUpdate();
52
- }
53
- updateConfigData(key, newValue, event, isKey = false) {
30
+ .save-cancel-buttons {
31
+ float: right;
32
+ }
33
+ `
34
+ ]; }
35
+ async updateConfigData(key, newValue, event, isKey = false) {
54
36
  event.preventDefault();
55
37
  if (isKey) {
56
38
  const oldValue = this.configData[key];
@@ -68,45 +50,127 @@ export class QboConfigEditor extends LitElement {
68
50
  this.configData[newKey] = 'newValue';
69
51
  this.requestUpdate();
70
52
  }
71
- deleteKeyValuePair(key, event) {
53
+ async deleteKeyValuePair(key, event) {
72
54
  event.preventDefault();
73
- delete this.configData[key];
74
- this.requestUpdate();
55
+ try {
56
+ await fetch(`${this.apiEndpoint}/delete/${key}`, {
57
+ method: 'GET'
58
+ });
59
+ }
60
+ catch (err) {
61
+ dispatchEvent(new CustomEvent('qbo-error', { detail: err }));
62
+ }
63
+ await this.search();
64
+ this.alertUpdated();
75
65
  }
76
- saveChanges(event) {
66
+ async saveChanges(event) {
77
67
  event.preventDefault();
78
- console.log('Saving changes:', this.configData);
68
+ try {
69
+ await fetch(`${this.apiEndpoint}/save`, {
70
+ method: 'POST',
71
+ body: JSON.stringify(this.configData)
72
+ });
73
+ }
74
+ catch (err) {
75
+ dispatchEvent(new CustomEvent('qbo-error', { detail: err }));
76
+ }
77
+ await this.search();
78
+ this.alertUpdated();
79
+ }
80
+ alertUpdated() {
81
+ var alert = this.renderRoot.querySelector(`div.alert-success`);
82
+ if (alert) {
83
+ alert.classList.remove("hidden");
84
+ }
85
+ else {
86
+ alert = document.createElement("div");
87
+ alert.className = "success";
88
+ alert.innerHTML = "Settings have been updated.";
89
+ var form = this.renderRoot.querySelector(`form`);
90
+ form?.insertBefore(alert, form?.querySelector("div.save-cancel"));
91
+ }
92
+ setTimeout(this.alertClear, 5000, alert);
93
+ }
94
+ alertClear(alert) {
95
+ alert?.classList.add("hidden");
79
96
  }
80
- cancelChanges(event) {
97
+ async cancelChanges(event) {
81
98
  event.preventDefault();
82
- console.log('Cancelling changes');
99
+ await this.search();
100
+ }
101
+ async filter(event) {
102
+ if (!(event instanceof PointerEvent) && event.key !== 'Enter')
103
+ return;
104
+ await this.search();
105
+ }
106
+ async search() {
107
+ var input = this.renderRoot.querySelector(`input.form-control.search`);
108
+ if (input instanceof HTMLInputElement) {
109
+ if (input.value.trim() == '') {
110
+ this.configData = {};
111
+ }
112
+ else {
113
+ try {
114
+ const response = await fetch(`${this.apiEndpoint}/search/${input.value}`, {
115
+ method: "GET",
116
+ headers: { "Accept": "application/json" }
117
+ });
118
+ this.configData = await response.json();
119
+ }
120
+ catch (err) {
121
+ dispatchEvent(new CustomEvent('qbo-error', { detail: err }));
122
+ }
123
+ }
124
+ }
83
125
  }
84
126
  render() {
85
127
  const source = new JsonConfigurationSource(this.configData);
86
128
  return html `<slot></slot>
87
- <form>
88
- ${Array.from(source.getValues()).map(({ key, value }) => html `
89
- <div class="input-group mb-3">
90
- <input type="text" class="form-control" .value="${key}" @input="${(e) => this.updateConfigData(key, e.target.value, e, true)}">
91
- <input type="text" class="form-control" .value="${value}" @input="${(e) => this.updateConfigData(key, e.target.value, e)}">
92
- <button class="btn btn-outline-danger" @click="${(e) => this.deleteKeyValuePair(key, e)}">Delete</button>
93
- </div>`)}
94
- <div>
95
- <button class="btn btn-outline-primary" @click="${this.addKeyValuePair}">Add Entry</button>
96
- <button class="btn btn-success" @click="${this.saveChanges}">Save</button>
97
- <button class="btn btn-secondary" @click="${this.cancelChanges}">Cancel</button>
98
- </div>
99
- </form>
129
+ <form onsubmit="return false;">
130
+ <div class="input-group mb-3">
131
+ <input type="text" class="form-control search" @keydown="${this.filter}">
132
+ <button class="btn btn-outline-primary" @click="${this.filter}">Search</button>
133
+ </div>
134
+ <div class="row">
135
+ <div class="col">
136
+ <label>Key</label>
137
+ <hr/>
138
+ </div>
139
+ <div class="col">
140
+ <label>Value</label>
141
+ <hr/>
142
+ </div>
143
+ </div>
144
+ ${Array.from(source.getValues()).map(({ key, value }) => html `
145
+ <div class="row row-search-result">
146
+ <div class="col">
147
+ <input type="text" class="form-control" .value="${key}" @input="${(e) => this.updateConfigData(key, e.target.value, e, true)}">
148
+ </div>
149
+ <div class="col">
150
+ <div class="input-group">
151
+ <input type="text" class="form-control" .value="${value}" @input="${(e) => this.updateConfigData(key, e.target.value, e)}">
152
+ <button type="button" class="btn btn-outline-danger" @click="${(e) => this.deleteKeyValuePair(key, e)}">Delete</button>
153
+ </div>
154
+ </div>
155
+ </div>`)}
156
+ <div class="save-cancel">
157
+ <button type="button" class="btn btn-outline-primary" @click="${this.addKeyValuePair}">Add Setting</button>
158
+ <div class="save-cancel-buttons">
159
+ <button type="button" class="btn btn-outline-primary save" @click="${this.saveChanges}">Save</button>
160
+ <button type="button" class="btn btn-outline-danger cancel" @click="${this.cancelChanges}">Cancel</button>
161
+ </div>
162
+ </div>
163
+ </form>
100
164
  `;
101
165
  }
102
166
  }
103
- __decorate([
104
- property({ type: String }),
105
- __metadata("design:type", Object)
106
- ], QboConfigEditor.prototype, "value", void 0);
107
167
  __decorate([
108
168
  property({ type: URL }),
109
169
  __metadata("design:type", Object)
110
170
  ], QboConfigEditor.prototype, "apiEndpoint", void 0);
171
+ __decorate([
172
+ property({ type: Object }),
173
+ __metadata("design:type", Object)
174
+ ], QboConfigEditor.prototype, "configData", void 0);
111
175
  customElements.define('qbo-config-editor', QboConfigEditor);
112
176
  //# sourceMappingURL=qbo-config-editor.js.map
package/src/qbo-config-editor.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"qbo-config-editor.js","sourceRoot":"","sources":["qbo-config-editor.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"qbo-config-editor.js","sourceRoot":"","sources":["qbo-config-editor.ts"],"names":[],"mappings":"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"}
package/src/qbo-config-editor.ts CHANGED
@@ -1,66 +1,33 @@
1
1
  import { LitElement, html, css, } from 'lit';
2
2
  import { property } from 'lit/decorators.js';
3
3
  import { JsonConfigurationSource } from './Configuration.js';
4
-
4
+ import { configurationCss } from './styles.js';
5
5
 
6
6
  export class QboConfigEditor extends LitElement {
7
7
 
8
- // private _value: string;
9
- private _internals: ElementInternals;
10
-
11
- static get formAssociated(): boolean {
12
- return true;
13
- }
14
-
15
- @property({ type: String })
16
- value;
17
-
18
8
  @property({ type: URL })
19
- apiEndpoint = new URL('repository/search', this.baseURI);
9
+ apiEndpoint = new URL('configuration/repository', this.baseURI);
20
10
 
21
- // @property({ type: Object })
11
+ @property({ type: Object })
22
12
  configData: Object = {};
23
13
 
24
- // configSource = new JsonConfigurationSource({});
25
-
26
- static styles = css`
14
+ static styles = [
15
+ configurationCss,
16
+ css`
27
17
  :host {
28
18
  display: block;
29
19
  padding: 16px;
30
20
  }
31
- .form-group {
32
- margin-bottom: 10px;
33
- }
34
- `;
35
-
36
- constructor() {
37
- super();
38
- // Use attachInternals() to get access to form internals
39
- this._internals = this.attachInternals();
40
- }
41
-
42
- _handleInput(e) {
43
- // Update the value on input events
44
- this.value = e.target.value;
45
- this._internals.setFormValue(this.value);
21
+ .row-search-result {
22
+ margin-bottom: 10px;
46
23
  }
47
-
48
- async kc_connectedCallback() {
49
- super.connectedCallback();
50
- // check payload
51
- if (this.value) {
52
- this.configData = JSON.parse(this.value);
53
- }
24
+ .save-cancel-buttons {
25
+ float: right;
54
26
  }
27
+ `
28
+ ];
55
29
 
56
- handleInputChange(key, event) {
57
- event.preventDefault();
58
- const target = event.target as HTMLInputElement;
59
- this.configData[key] = target.value;
60
- this.requestUpdate();
61
- }
62
-
63
- updateConfigData(key, newValue, event, isKey = false) {
30
+ async updateConfigData(key, newValue, event, isKey = false) {
64
31
  event.preventDefault();
65
32
  if (isKey) {
66
33
  const oldValue = this.configData[key];
@@ -79,38 +46,123 @@ export class QboConfigEditor extends LitElement {
79
46
  this.requestUpdate();
80
47
  }
81
48
 
82
- deleteKeyValuePair(key, event) {
49
+ async deleteKeyValuePair(key, event) {
83
50
  event.preventDefault();
84
- delete this.configData[key];
85
- this.requestUpdate();
51
+ try {
52
+ await fetch(`${this.apiEndpoint}/delete/${key}`, {
53
+ method: 'GET'
54
+ });
55
+ } catch (err) {
56
+ dispatchEvent(new CustomEvent('qbo-error', { detail: err }));
57
+ }
58
+ await this.search();
59
+ this.alertUpdated();
86
60
  }
87
61
 
88
- saveChanges(event) {
62
+ async saveChanges(event) {
89
63
  event.preventDefault();
90
- console.log('Saving changes:', this.configData);
64
+ try {
65
+ await fetch(`${this.apiEndpoint}/save`, {
66
+ method: 'POST',
67
+ body: JSON.stringify(this.configData)
68
+ });
69
+ } catch (err) {
70
+ dispatchEvent(new CustomEvent('qbo-error', { detail: err }));
71
+ }
72
+ await this.search();
73
+ this.alertUpdated();
91
74
  }
92
75
 
93
- cancelChanges(event) {
76
+ alertUpdated() {
77
+ var alert = this.renderRoot.querySelector(`div.alert-success`);
78
+ if (alert) {
79
+ alert.classList.remove("hidden");
80
+ } else {
81
+ alert = document.createElement("div");
82
+ alert.className = "success";
83
+ alert.innerHTML = "Settings have been updated.";
84
+
85
+ var form = this.renderRoot.querySelector(`form`);
86
+ form?.insertBefore(alert, form?.querySelector("div.save-cancel"));
87
+ }
88
+ setTimeout(this.alertClear, 5000, alert);
89
+ }
90
+
91
+ alertClear(alert: Element) {
92
+ alert?.classList.add("hidden");
93
+ }
94
+
95
+ async cancelChanges(event) {
94
96
  event.preventDefault();
95
- console.log('Cancelling changes');
97
+ await this.search();
96
98
  }
97
99
 
100
+ async filter(event) {
101
+ if (!(event instanceof PointerEvent) && event.key !== 'Enter') return;
102
+ await this.search();
103
+ }
104
+
105
+ async search() {
106
+ var input = this.renderRoot.querySelector(`input.form-control.search`);
107
+ if (input instanceof HTMLInputElement) {
108
+
109
+ if (input.value.trim() == '') {
110
+
111
+ this.configData = {};
112
+
113
+ } else {
114
+
115
+ try {
116
+ const response = await fetch(`${this.apiEndpoint}/search/${input.value}`, {
117
+ method: "GET",
118
+ headers: { "Accept": "application/json" }
119
+ });
120
+ this.configData = await response.json();
121
+ } catch (err) {
122
+ dispatchEvent(new CustomEvent('qbo-error', { detail: err }));
123
+ }
124
+
125
+ }
126
+ }
127
+ }
98
128
  render() {
99
129
  const source = new JsonConfigurationSource(this.configData);
100
130
  return html`<slot></slot>
101
- <form>
102
- ${Array.from(source.getValues()).map(({ key, value }) => html`
103
- <div class="input-group mb-3">
104
- <input type="text" class="form-control" .value="${key}" @input="${(e) => this.updateConfigData(key, e.target.value, e, true)}">
105
- <input type="text" class="form-control" .value="${value}" @input="${(e) => this.updateConfigData(key, e.target.value, e)}">
106
- <button class="btn btn-outline-danger" @click="${(e) => this.deleteKeyValuePair(key, e)}">Delete</button>
107
- </div>`)}
108
- <div>
109
- <button class="btn btn-outline-primary" @click="${this.addKeyValuePair}">Add Entry</button>
110
- <button class="btn btn-success" @click="${this.saveChanges}">Save</button>
111
- <button class="btn btn-secondary" @click="${this.cancelChanges}">Cancel</button>
112
- </div>
113
- </form>
131
+ <form onsubmit="return false;">
132
+ <div class="input-group mb-3">
133
+ <input type="text" class="form-control search" @keydown="${this.filter}">
134
+ <button class="btn btn-outline-primary" @click="${this.filter}">Search</button>
135
+ </div>
136
+ <div class="row">
137
+ <div class="col">
138
+ <label>Key</label>
139
+ <hr/>
140
+ </div>
141
+ <div class="col">
142
+ <label>Value</label>
143
+ <hr/>
144
+ </div>
145
+ </div>
146
+ ${Array.from(source.getValues()).map(({ key, value }) => html`
147
+ <div class="row row-search-result">
148
+ <div class="col">
149
+ <input type="text" class="form-control" .value="${key}" @input="${(e) => this.updateConfigData(key, e.target.value, e, true)}">
150
+ </div>
151
+ <div class="col">
152
+ <div class="input-group">
153
+ <input type="text" class="form-control" .value="${value}" @input="${(e) => this.updateConfigData(key, e.target.value, e)}">
154
+ <button type="button" class="btn btn-outline-danger" @click="${(e) => this.deleteKeyValuePair(key, e)}">Delete</button>
155
+ </div>
156
+ </div>
157
+ </div>`)}
158
+ <div class="save-cancel">
159
+ <button type="button" class="btn btn-outline-primary" @click="${this.addKeyValuePair}">Add Setting</button>
160
+ <div class="save-cancel-buttons">
161
+ <button type="button" class="btn btn-outline-primary save" @click="${this.saveChanges}">Save</button>
162
+ <button type="button" class="btn btn-outline-danger cancel" @click="${this.cancelChanges}">Cancel</button>
163
+ </div>
164
+ </div>
165
+ </form>
114
166
  `;
115
167
  }
116
168
  }