@quandis/qbo4.configuration 4.0.1-CI-20240605-191701 → 4.0.1-CI-20240611-143233
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/package.json +7 -1
- package/readme.md +183 -5
- package/scss/qbo-configuration.scss +56 -0
- package/src/Program.d.ts +1 -0
- package/src/Program.js +1 -0
- package/src/Program.js.map +1 -1
- package/src/Program.ts +1 -0
- package/src/qbo-template.js +271 -6
- package/src/qbo-template.js.map +1 -1
- package/src/qbo-template.ts +289 -6
- package/src/styles.d.ts +1 -0
- package/src/styles.js +7 -0
- package/src/styles.js.map +1 -0
- package/src/styles.ts +7 -0
- package/wwwroot/css/qbo-configuration.css +1615 -0
- package/wwwroot/css/qbo-configuration.css.map +1 -0
- package/wwwroot/css/qbo-configuration.min.css +5 -0
- package/wwwroot/js/qbo4.configuration.js +31700 -24
- package/wwwroot/js/qbo4.configuration.min.js +35 -4
- 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-
|
|
3
|
+
"version": "4.0.1-CI-20240611-143233",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"types": "./src/Program.d.ts",
|
|
6
6
|
"exports": {
|
|
@@ -15,7 +15,13 @@
|
|
|
15
15
|
"scss/"
|
|
16
16
|
],
|
|
17
17
|
"dependencies": {
|
|
18
|
+
"@codemirror/autocomplete": "^6.16.2",
|
|
19
|
+
"@codemirror/commands": "^6.6.0",
|
|
20
|
+
"@codemirror/lang-html": "^6.4.9",
|
|
21
|
+
"@codemirror/state": "^6.4.1",
|
|
22
|
+
"@codemirror/view": "^6.27.0",
|
|
18
23
|
"bootstrap": "^5.3.3",
|
|
24
|
+
"codemirror": "^6.0.1",
|
|
19
25
|
"lit": "^3.1.2",
|
|
20
26
|
"reflect-metadata": "^0.2.1",
|
|
21
27
|
"tsyringe": "^4.8.0"
|
package/readme.md
CHANGED
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
# Overview
|
|
2
2
|
|
|
3
|
-
The `@quandis/qbo4.Configuration.Web` package offers
|
|
4
|
-
|
|
3
|
+
The `@quandis/qbo4.Configuration.Web` package offers:
|
|
4
|
+
|
|
5
|
+
- Management of options classes via dependency injection
|
|
6
|
+
- A `QboTemplate` web component base class that supports configuration driven rendering options
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
# Options Classes
|
|
10
|
+
|
|
11
|
+
Similar to Microsoft's `IConfiguration`, the `qbo4.Configuration` package's classes manage configuration settings
|
|
12
|
+
for a web application via dependency injection.
|
|
5
13
|
|
|
6
14
|
Including the `qbo4.Configuration.js` script will provide:
|
|
7
15
|
|
|
@@ -11,7 +19,7 @@ Including the `qbo4.Configuration.js` script will provide:
|
|
|
11
19
|
|
|
12
20
|
It provides for dependency injections via the `tsyringe` package.
|
|
13
21
|
|
|
14
|
-
|
|
22
|
+
## Typescript Usage
|
|
15
23
|
|
|
16
24
|
```typescript
|
|
17
25
|
import 'reflect-metadata';
|
|
@@ -35,7 +43,7 @@ const b = config.getSection('B').bind(OptionsB);
|
|
|
35
43
|
expect(b.count).equal(27);
|
|
36
44
|
```
|
|
37
45
|
|
|
38
|
-
|
|
46
|
+
## Browser Usage
|
|
39
47
|
|
|
40
48
|
```html
|
|
41
49
|
<html>
|
|
@@ -56,7 +64,7 @@ expect(b.count).equal(27);
|
|
|
56
64
|
</html>
|
|
57
65
|
```
|
|
58
66
|
|
|
59
|
-
|
|
67
|
+
## Example: ApplicationInsights Logger
|
|
60
68
|
|
|
61
69
|
Assume we want to inject an `ApplicationInsights` logger, where the `InstrumentationKey` is stored in the configuration settings.
|
|
62
70
|
|
|
@@ -83,3 +91,173 @@ export class ApplicationInsights {
|
|
|
83
91
|
// Prepare the class for dependency injection
|
|
84
92
|
export const ApplicationInsightsToken: InjectionToken<ApplicationInsights> = 'ApplicationInsights';
|
|
85
93
|
```
|
|
94
|
+
|
|
95
|
+
# QboTemplate Web Component
|
|
96
|
+
|
|
97
|
+
The `QboTemplate` web component enables power users to configure the rendering of a web component a runtime.
|
|
98
|
+
Assume we have a `Contact` web component that renders a contact's name, address, and other information,
|
|
99
|
+
and we choose to support different layouts based on a `type` attribute:
|
|
100
|
+
|
|
101
|
+
```html
|
|
102
|
+
<qbo-contact type="fullname"></qbo-contact>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
should render:
|
|
106
|
+
|
|
107
|
+
```html
|
|
108
|
+
<input name="first" placeholder="First name"/>
|
|
109
|
+
<input name="middle" placeholder="Middle name"/>
|
|
110
|
+
<input name="last" placeholder="Last name"/>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
Such a web component might look like this:
|
|
114
|
+
|
|
115
|
+
```typescript
|
|
116
|
+
import { html } from 'lit';
|
|
117
|
+
import { customElement } from 'lit/decorators.js';
|
|
118
|
+
|
|
119
|
+
@customElement('qbo-contact')
|
|
120
|
+
export class ContactComponent extends LitElement {
|
|
121
|
+
jsonData: object = {
|
|
122
|
+
'Contact': {
|
|
123
|
+
'First': 'James',
|
|
124
|
+
'Middle': 'Tiberious',
|
|
125
|
+
'Last': 'Kirk'
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
render() {
|
|
130
|
+
return html`
|
|
131
|
+
<input name="first" placeholder="First name" value="${this.jsonData['Contact']['First']}"/>
|
|
132
|
+
<input name="middle" placeholder="Middle name" value="${this.jsonData['Contact']['Middle']}"/>
|
|
133
|
+
<input name="last" placeholder="Last name" value="${this.jsonData['Contact']['Last']}"/>
|
|
134
|
+
`;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
Futher assume that you want to allow a power user to configure the layout of the `qbo-contact` web component at runtime.
|
|
140
|
+
To accomplish this, shift the `ContactComponent` to derive from a `QboTemplate` class:
|
|
141
|
+
|
|
142
|
+
```typescript
|
|
143
|
+
import { html } from 'lit';
|
|
144
|
+
import { customElement } from 'lit/decorators.js';
|
|
145
|
+
import { templates, TemplateFunction, QboTemplate } from '@quandis/qbo4.configuration';
|
|
146
|
+
|
|
147
|
+
export class ContactComponent extends QboTemplate {
|
|
148
|
+
constructor() {
|
|
149
|
+
super();
|
|
150
|
+
this.type ??= 'default';
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
jsonData: object = {
|
|
154
|
+
'Contact': {
|
|
155
|
+
'First': 'James',
|
|
156
|
+
'Middle': 'Tiberious',
|
|
157
|
+
'Last': 'Kirk'
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
// Notice: no render method here - see below.
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
const contactTemplates = new Map<string, TemplateFunction>();
|
|
165
|
+
|
|
166
|
+
contactTemplates.set('default', (component: any) => {
|
|
167
|
+
return html`<input name="first" placeholder="First name" value="${component.jsonData['Contact']['First']}"/>
|
|
168
|
+
<input name="middle" placeholder="Middle name" value="${component.jsonData['Contact']['Middle']}"/>
|
|
169
|
+
<input name="last" placeholder="Last name" value="${component.jsonData['Contact']['Last']}"/>`;
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
contactTemplates.set('reverse', (component: any) => {
|
|
173
|
+
return html`<input name="last" placeholder="Last name" value="${component.jsonData['Contact']['First']}"/>,
|
|
174
|
+
<input name="first" placeholder="Last name" value="${component.jsonData['Contact']['Last']}"/>
|
|
175
|
+
<input name="middle" placeholder="Middle name" value="${component.jsonData['Contact']['Middle']}"/>`
|
|
176
|
+
});
|
|
177
|
+
|
|
178
|
+
// template is a global variable set by the qbo4.configuration package
|
|
179
|
+
templates.set('ContactComponent', contactTemplates);
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
Now you can render the `qbo-contact` web component with a `type` attribute:
|
|
183
|
+
|
|
184
|
+
```html
|
|
185
|
+
<!-- This will render last name, first name, middle name -->
|
|
186
|
+
<qbo-contact type="reverse"></qbo-contact>
|
|
187
|
+
|
|
188
|
+
<!-- This will render first name, middle name, last name -->
|
|
189
|
+
<qbo-contact type="default"></qbo-contact>
|
|
190
|
+
|
|
191
|
+
<!-- So will this, because we set type = 'default' in the constructor -->
|
|
192
|
+
<qbo-contact></qbo-contact>
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
> Note that the template functions accept a `component` parameter, which is the instance of the `ContactComponent` class.
|
|
196
|
+
Ensure you reference your component's properties via `component` rather than `this`.
|
|
197
|
+
|
|
198
|
+
Mapping `type` to different rendering functions is all well and good, but not particularly interesting.
|
|
199
|
+
|
|
200
|
+
The interesting part is allowing a power user to create new rendering functions (or edit existing ones) at runtime.
|
|
201
|
+
|
|
202
|
+
The `QboTemplate` class will listen for a `ctrl-dblclick` event if it is contained in an element with a `qbo-design` class
|
|
203
|
+
(indicating that we are in 'design' mode).
|
|
204
|
+
|
|
205
|
+
When the `ctrl-dblclick` event is triggered, a dialog will open, presenting the user with something like:
|
|
206
|
+
|
|
207
|
+
---
|
|
208
|
+
**Edit Template**
|
|
209
|
+
|
|
210
|
+
| default ↓ | <- *a datalist of available templates*
|
|
211
|
+
|
|
212
|
+
```html
|
|
213
|
+
1 <input name="first" placeholder="First name" value="${component.jsonData.Contact.First]}"/>
|
|
214
|
+
2 <input name="middle" placeholder="Middle name" value="${component.jsonData.Contact.Middle]}"/>
|
|
215
|
+
3 <input name="last" placeholder="Last name" value="${component.jsonData.Contact.Last}"/>
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
^ *an editor for editing the rendering function*
|
|
219
|
+
|
|
220
|
+
[ Save ] [ Cancel ]
|
|
221
|
+
|
|
222
|
+
---
|
|
223
|
+
|
|
224
|
+
Feature include:
|
|
225
|
+
|
|
226
|
+
- As the power user modifies the template, the underlying UI will update in real-time.
|
|
227
|
+
- Any syntax errors will be trapped and displayed in the editor
|
|
228
|
+
- The editor can be dragged and resized as needed
|
|
229
|
+
- The `type` at the top can be selected from a `datalist`, and new types can be entered.
|
|
230
|
+
- Clicking `Save` will save the template in configuration (server-side), and be available for use.
|
|
231
|
+
- Clicking `Cancel` will discard any changes, reverting to the original rendering.
|
|
232
|
+
|
|
233
|
+
## How it Works
|
|
234
|
+
|
|
235
|
+
Deployment of `@qbo4.Configuration` web components is paired with deployment of the `qbo4.Configuration.Web` Razor Class Library,
|
|
236
|
+
which includes server-side functionality to store are retrieve template code.
|
|
237
|
+
The `QboTemplate` class will interact with the server-side `/template` endpoint to store and retrieve templates.
|
|
238
|
+
|
|
239
|
+
The `QboTemplate` class will render the web component based on the `type` attribute, using the `templates` map.
|
|
240
|
+
If the `type` is not found in the `templates` map, the component will `fetch` templates stored in configuration
|
|
241
|
+
from the `/template/search/{ComponentClassName}` endpoint.
|
|
242
|
+
|
|
243
|
+
> If a component's `Typescript` class defines a `type` that also exists in configuration, the configuration will take precedence.
|
|
244
|
+
|
|
245
|
+
## Spiderman Clause
|
|
246
|
+
|
|
247
|
+
With great power comes great responsibility. Only trusted user should be allowed to edit templates.
|
|
248
|
+
The ultimate control of this remains server-side with the authorization policies of the `/template` endpoints.
|
|
249
|
+
For the front-end, the `QboTemplate` class will only allow editing of templates if the containing element has a `qbo-design` class.
|
|
250
|
+
We recommend that the `qbo-design` class be added to the `body` for trusted power users only.
|
|
251
|
+
This will prevent accidental editing attempts of templates by regular users.
|
|
252
|
+
|
|
253
|
+
As with all qbo-based configuration, enable and test in a lower environment before deploying to production.
|
|
254
|
+
|
|
255
|
+
# RoadMap
|
|
256
|
+
|
|
257
|
+
- add intellisense to CodeMirror for component-specific properties (including Json data)
|
|
258
|
+
- shift the Editor to a separate web component
|
|
259
|
+
- enable custom Editors, to simplify changes to complex controls
|
|
260
|
+
- create a GUI designer that detects available web components via DI
|
|
261
|
+
- propagate changes to a components `type` property to parent components
|
|
262
|
+
- if a user creates a new `type` of an address control called `streetview`, and the address control is part of a property control, save the property control such that it uses `<qbo-address type="streetview">`
|
|
263
|
+
- add AI modifications to the default editor
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
@import "../node_modules/bootstrap/scss/bootstrap";
|
|
2
|
+
|
|
3
|
+
.popup-editor {
|
|
4
|
+
position: fixed;
|
|
5
|
+
top: 100px;
|
|
6
|
+
left: 100px;
|
|
7
|
+
width: 60%;
|
|
8
|
+
height: 50%;
|
|
9
|
+
background: white;
|
|
10
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
11
|
+
border: 1px solid #ddd;
|
|
12
|
+
@extend .modal-content;
|
|
13
|
+
z-index: 1000;
|
|
14
|
+
resize: both;
|
|
15
|
+
overflow: auto;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.popup-editor header {
|
|
19
|
+
/*background: #f0f0f0;
|
|
20
|
+
padding: 10px;*/
|
|
21
|
+
cursor: move;
|
|
22
|
+
@extend .modal-header;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.popup-editor section {
|
|
26
|
+
/*padding: 10px;*/
|
|
27
|
+
@extend .modal-body;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.popup-editor footer {
|
|
31
|
+
@extend .modal-footer;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.popup-editor input {
|
|
35
|
+
@extend .form-control;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.popup-editor button {
|
|
39
|
+
@extend .btn;
|
|
40
|
+
}
|
|
41
|
+
.popup-editor button[type="submit"]
|
|
42
|
+
{
|
|
43
|
+
@extend .btn-primary;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.popup-editor button[type="reset"] {
|
|
47
|
+
@extend .btn-light;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/*.popup-editor .resize-handle {
|
|
51
|
+
@extend .modal-footer;
|
|
52
|
+
}*/
|
|
53
|
+
.error {
|
|
54
|
+
@extend .alert;
|
|
55
|
+
@extend .alert-danger;
|
|
56
|
+
}
|
package/src/Program.d.ts
CHANGED
package/src/Program.js
CHANGED
package/src/Program.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Program.js","sourceRoot":"","sources":["Program.ts"],"names":[],"mappings":"AAOA,OAAO,kBAAkB,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"Program.js","sourceRoot":"","sources":["Program.ts"],"names":[],"mappings":"AAOA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC"}
|
package/src/Program.ts
CHANGED
package/src/qbo-template.js
CHANGED
|
@@ -7,18 +7,50 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
8
8
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
9
|
};
|
|
10
|
-
import { LitElement } from 'lit';
|
|
10
|
+
import { LitElement, css, html } from 'lit';
|
|
11
11
|
import { property } from 'lit/decorators.js';
|
|
12
|
+
import { basicSetup } from "codemirror";
|
|
13
|
+
import { EditorView, keymap } from "@codemirror/view";
|
|
14
|
+
import { html as htmlcode } from "@codemirror/lang-html";
|
|
15
|
+
import { indentWithTab } from "@codemirror/commands";
|
|
16
|
+
import { configurationCss } from './styles.js';
|
|
12
17
|
const scriptCache = {};
|
|
13
18
|
export const templates = new Map();
|
|
14
19
|
export const QboTemplateMixin = (superClass) => {
|
|
15
20
|
class QboTemplateClass extends superClass {
|
|
21
|
+
static { this.styles = [
|
|
22
|
+
configurationCss,
|
|
23
|
+
css `
|
|
24
|
+
:host {
|
|
25
|
+
display: block;
|
|
26
|
+
position: relative;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
:host-context(.qbo-design):host(:hover) {
|
|
30
|
+
outline: 1px dashed #0078d4;
|
|
31
|
+
background-color: #f0f8ff;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
}`
|
|
34
|
+
]; }
|
|
16
35
|
constructor(...args) {
|
|
17
36
|
super(...args);
|
|
18
|
-
this.
|
|
19
|
-
this.
|
|
37
|
+
this.dragging = false;
|
|
38
|
+
this.resizing = false;
|
|
39
|
+
this.offsetX = 0;
|
|
40
|
+
this.offsetY = 0;
|
|
41
|
+
this.startWidth = 0;
|
|
42
|
+
this.startHeight = 0;
|
|
43
|
+
this.regex = /`(.*?)`/s;
|
|
44
|
+
// when true, the editor will show the error class
|
|
45
|
+
this.editorError = null;
|
|
46
|
+
this.type = null;
|
|
47
|
+
this.editing = false;
|
|
48
|
+
this.defaultTemplate = (component) => html `<span>Template matching ${component.type} not defined</span>`;
|
|
49
|
+
this.templateEndpoint = '/template';
|
|
20
50
|
this.prefix = null;
|
|
21
51
|
this.map = undefined;
|
|
52
|
+
this.editor = null;
|
|
53
|
+
this.editorType = this.type;
|
|
22
54
|
}
|
|
23
55
|
async connectedCallback() {
|
|
24
56
|
super.connectedCallback();
|
|
@@ -32,9 +64,99 @@ export const QboTemplateMixin = (superClass) => {
|
|
|
32
64
|
if (this.map === undefined)
|
|
33
65
|
console.error(`The prefix ${this.prefix} is not defined in the templates map.`);
|
|
34
66
|
// Don't bother with the API call if we already have the template.
|
|
35
|
-
if (this.map && !this.map.has(this.type)) {
|
|
67
|
+
if (this.map && this.type && !this.map.has(this.type)) {
|
|
36
68
|
await this.loadScript(this.prefix);
|
|
37
69
|
}
|
|
70
|
+
this.addEventListener('dblclick', this.requestEdit.bind(this));
|
|
71
|
+
this.shadowRoot?.addEventListener('mousedown', this._onMouseDown.bind(this));
|
|
72
|
+
this.shadowRoot?.addEventListener('mousedown', this._onResizeMouseDown.bind(this), true);
|
|
73
|
+
window.addEventListener('mousemove', this._onMouseMove.bind(this));
|
|
74
|
+
window.addEventListener('mouseup', this._onMouseUp.bind(this));
|
|
75
|
+
}
|
|
76
|
+
async disconnectedCallback() {
|
|
77
|
+
this.removeEventListener('dblclick', this.requestEdit.bind(this));
|
|
78
|
+
this.shadowRoot?.removeEventListener('mousedown', this._onMouseDown.bind(this));
|
|
79
|
+
this.shadowRoot?.removeEventListener('mousedown', this._onResizeMouseDown.bind(this), true);
|
|
80
|
+
window.removeEventListener('mousemove', this._onMouseMove.bind(this));
|
|
81
|
+
window.removeEventListener('mouseup', this._onMouseUp.bind(this));
|
|
82
|
+
}
|
|
83
|
+
_onMouseDown(event) {
|
|
84
|
+
if (!event.target.closest('.popup-editor header'))
|
|
85
|
+
return;
|
|
86
|
+
this.dragging = true;
|
|
87
|
+
const editor = this.shadowRoot?.querySelector('.popup-editor');
|
|
88
|
+
if (editor) {
|
|
89
|
+
this.offsetX = event.clientX - editor.getBoundingClientRect().left;
|
|
90
|
+
this.offsetY = event.clientY - editor.getBoundingClientRect().top;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
_onResizeMouseDown(event) {
|
|
94
|
+
if (!event.target.closest('.popup-editor .resize-handle'))
|
|
95
|
+
return;
|
|
96
|
+
this.resizing = true;
|
|
97
|
+
const editor = this.shadowRoot?.querySelector('.popup-editor');
|
|
98
|
+
if (editor) {
|
|
99
|
+
this.startWidth = editor.offsetWidth;
|
|
100
|
+
this.startHeight = editor.offsetHeight;
|
|
101
|
+
this.offsetX = event.clientX;
|
|
102
|
+
this.offsetY = event.clientY;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
_onMouseMove(event) {
|
|
106
|
+
if (this.dragging) {
|
|
107
|
+
const editor = this.shadowRoot?.querySelector('.popup-editor');
|
|
108
|
+
const x = event.clientX - this.offsetX;
|
|
109
|
+
const y = event.clientY - this.offsetY;
|
|
110
|
+
if (editor) {
|
|
111
|
+
editor.style.left = `${x}px`;
|
|
112
|
+
editor.style.top = `${y}px`;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
else if (this.resizing) {
|
|
116
|
+
const editor = this.shadowRoot?.querySelector('.popup-editor');
|
|
117
|
+
if (editor) {
|
|
118
|
+
editor.style.width = `${this.startWidth + (event.clientX - this.offsetX)}px`;
|
|
119
|
+
editor.style.height = `${this.startHeight + (event.clientY - this.offsetY)}px`;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
_onMouseUp() {
|
|
124
|
+
this.dragging = false;
|
|
125
|
+
this.resizing = false;
|
|
126
|
+
}
|
|
127
|
+
// Function to flatten JSON object keys for use in autocomplete
|
|
128
|
+
flattenObjectKeys(obj, prefix = '') {
|
|
129
|
+
return Object.keys(obj).reduce((res, k) => {
|
|
130
|
+
const pre = prefix.length ? `${prefix}.` : '';
|
|
131
|
+
if (typeof obj[k] === 'object' && obj[k] !== null) {
|
|
132
|
+
res = res.concat(this.flattenObjectKeys(obj[k], `${pre}${k}`));
|
|
133
|
+
}
|
|
134
|
+
else {
|
|
135
|
+
res.push(`${pre}${k}`);
|
|
136
|
+
}
|
|
137
|
+
return res;
|
|
138
|
+
}, []);
|
|
139
|
+
}
|
|
140
|
+
// Function to flatten properties of a LitElement-derived component for use in autocomplete
|
|
141
|
+
flattenComponentKeys(component) {
|
|
142
|
+
const keys = [];
|
|
143
|
+
const proto = Object.getPrototypeOf(component);
|
|
144
|
+
// Use Reflect API to get metadata if available
|
|
145
|
+
const propertyKeys = Object.getOwnPropertyNames(proto);
|
|
146
|
+
propertyKeys.forEach((key) => {
|
|
147
|
+
if (key === 'constructor' || key.startsWith('_'))
|
|
148
|
+
return; // Skip constructor and private fields
|
|
149
|
+
const metadata = Reflect.getMetadata('design:type', proto, key);
|
|
150
|
+
if (metadata) {
|
|
151
|
+
if (typeof component[key] === 'object' && component[key] !== null) {
|
|
152
|
+
keys.push(...this.flattenObjectKeys(component[key], key));
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
keys.push(key);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
return keys.map(key => ({ label: key, type: 'variable' }));
|
|
38
160
|
}
|
|
39
161
|
async loadScript(prefix) {
|
|
40
162
|
if (!scriptCache[prefix]) {
|
|
@@ -44,15 +166,16 @@ export const QboTemplateMixin = (superClass) => {
|
|
|
44
166
|
const scriptText = await scriptCache[prefix];
|
|
45
167
|
this.appendScriptToHead(scriptText);
|
|
46
168
|
console.log(`Template script for ${this.prefix} loaded and executed.`);
|
|
169
|
+
this.requestUpdate();
|
|
47
170
|
}
|
|
48
171
|
catch (error) {
|
|
49
172
|
console.error(`Template script for ${this.prefix} failed to load:`, error);
|
|
50
173
|
}
|
|
51
174
|
}
|
|
52
175
|
async fetchScript(prefix) {
|
|
53
|
-
const response = await fetch(`${this.templateEndpoint}/${prefix}`);
|
|
176
|
+
const response = await fetch(`${this.templateEndpoint}/search/${prefix}`);
|
|
54
177
|
if (!response.ok) {
|
|
55
|
-
throw new Error(
|
|
178
|
+
throw new Error(`Failed to fetch templates from: ${this.templateEndpoint}/search/${prefix}`);
|
|
56
179
|
}
|
|
57
180
|
return response.text();
|
|
58
181
|
}
|
|
@@ -62,11 +185,153 @@ export const QboTemplateMixin = (superClass) => {
|
|
|
62
185
|
scriptElement.text = scriptText;
|
|
63
186
|
document.head.appendChild(scriptElement);
|
|
64
187
|
}
|
|
188
|
+
requestEdit(event) {
|
|
189
|
+
if (event.ctrlKey && this.closest('.qbo-design')) {
|
|
190
|
+
this.toggleEdit(!this.editing);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
toggleEdit(editing) {
|
|
194
|
+
this.editing = editing;
|
|
195
|
+
if (!this.editing) {
|
|
196
|
+
this.testTemplate = undefined;
|
|
197
|
+
this.editor?.destroy();
|
|
198
|
+
this.editor = null;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
// Creates a function from the user's input.
|
|
202
|
+
setTemplate(content) {
|
|
203
|
+
const test = new Function('component', `return qbo4.configuration.html\`${content}\``);
|
|
204
|
+
try {
|
|
205
|
+
test(this);
|
|
206
|
+
this.editorError = undefined;
|
|
207
|
+
this.testTemplate = test;
|
|
208
|
+
}
|
|
209
|
+
catch (e) {
|
|
210
|
+
this.editorError = e;
|
|
211
|
+
console.error(`Error rendering ${content}`, e);
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
// resets the template, ignoring the user's input.
|
|
215
|
+
resetTemplate(event) {
|
|
216
|
+
this.editorType = event.target.value;
|
|
217
|
+
if (this.map?.has(event.target.value))
|
|
218
|
+
this.testTemplate = this.map.get(event.target.value) ?? this.defaultTemplate;
|
|
219
|
+
let expression = '<span>Template not defined</span>';
|
|
220
|
+
if (this.testTemplate !== undefined) {
|
|
221
|
+
const matches = this.testTemplate.toString().match(this.regex);
|
|
222
|
+
if (matches) {
|
|
223
|
+
expression = matches[1];
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
this.editor?.dispatch(this.editor.state.update({
|
|
227
|
+
changes: { from: 0, to: this.editor.state.doc.length, insert: expression }
|
|
228
|
+
}));
|
|
229
|
+
}
|
|
230
|
+
updated(changedProperties) {
|
|
231
|
+
super.update(changedProperties);
|
|
232
|
+
let expression = '<span>Template not defined</span>';
|
|
233
|
+
if (this.testTemplate !== undefined) {
|
|
234
|
+
const matches = this.testTemplate.toString().match(this.regex);
|
|
235
|
+
if (matches) {
|
|
236
|
+
expression = matches[1];
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
if (this.editing) {
|
|
240
|
+
// const componentKeys = this.flattenComponentKeys(this);
|
|
241
|
+
// todo: create a custom autocomplete source
|
|
242
|
+
this.editor ??= new EditorView({
|
|
243
|
+
doc: expression,
|
|
244
|
+
extensions: [
|
|
245
|
+
basicSetup,
|
|
246
|
+
htmlcode(),
|
|
247
|
+
keymap.of([indentWithTab]),
|
|
248
|
+
EditorView.updateListener.of((e) => {
|
|
249
|
+
this.setTemplate(e.state.doc.toString());
|
|
250
|
+
// this.dispatchEvent(new CustomEvent('change', { detail: { code: this.value } }));
|
|
251
|
+
})
|
|
252
|
+
],
|
|
253
|
+
parent: this.shadowRoot?.querySelector('div.editor')
|
|
254
|
+
// parent: <DocumentFragment>this.shadowRoot,
|
|
255
|
+
});
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
edit() {
|
|
259
|
+
this.testTemplate ??= this.type ? this.map?.get(this.type) : this.defaultTemplate;
|
|
260
|
+
const id = Math.random().toString(36).substring(2, 15);
|
|
261
|
+
return html `
|
|
262
|
+
<dialog class="popup-editor" open>
|
|
263
|
+
<header>
|
|
264
|
+
<h5>Edit Template</h5>
|
|
265
|
+
</header>
|
|
266
|
+
<section class="content">
|
|
267
|
+
<input list="${id}" .value=${this.type} @change=${this.resetTemplate}>
|
|
268
|
+
<datalist id="${id}">
|
|
269
|
+
${Array.from(this.map?.keys() ?? []).map((key) => html `<option>${key}</option>`)}
|
|
270
|
+
</datalist>
|
|
271
|
+
<div class="editor"></div>
|
|
272
|
+
${this.editorError ? html `<hr/><span class="error">${this.editorError.message}<span>` : html ``}
|
|
273
|
+
</section>
|
|
274
|
+
<footer >
|
|
275
|
+
<button type="submit" @click=${this.save}>Save</button>
|
|
276
|
+
<button type="reset" @click=${this.cancel}>Cancel</button>
|
|
277
|
+
</footer>
|
|
278
|
+
</dialog>`;
|
|
279
|
+
}
|
|
280
|
+
cancel() {
|
|
281
|
+
this.toggleEdit(false);
|
|
282
|
+
}
|
|
283
|
+
async save() {
|
|
284
|
+
try {
|
|
285
|
+
if (this.editor == null)
|
|
286
|
+
return;
|
|
287
|
+
const formData = new FormData();
|
|
288
|
+
formData.append('htmlTemplate', this.editor.state.doc.toString());
|
|
289
|
+
const response = await fetch(`${this.templateEndpoint}/save/${this.prefix}/${this.editorType}`, {
|
|
290
|
+
method: 'POST',
|
|
291
|
+
body: formData
|
|
292
|
+
});
|
|
293
|
+
if (response.ok) {
|
|
294
|
+
this.map?.set(this.editorType, this.testTemplate);
|
|
295
|
+
this.type = this.editorType;
|
|
296
|
+
this.toggleEdit(false);
|
|
297
|
+
return;
|
|
298
|
+
}
|
|
299
|
+
throw new Error(`Failed to save template: ${response.statusText}`);
|
|
300
|
+
}
|
|
301
|
+
catch (e) {
|
|
302
|
+
throw e;
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
render() {
|
|
306
|
+
let template = this.defaultTemplate;
|
|
307
|
+
if (this.type && this.map?.has(this.type))
|
|
308
|
+
template = this.map.get(this.type);
|
|
309
|
+
return (this.editing)
|
|
310
|
+
? html `${this.edit()}${this.testTemplate(this)}`
|
|
311
|
+
: template(this);
|
|
312
|
+
// return html`${this.editing ? this.edit() : html``}${this.editing ? this.testTemplate(this) : template(this)}`
|
|
313
|
+
}
|
|
65
314
|
}
|
|
315
|
+
__decorate([
|
|
316
|
+
property({ attribute: false }),
|
|
317
|
+
__metadata("design:type", Object)
|
|
318
|
+
], QboTemplateClass.prototype, "editorError", void 0);
|
|
66
319
|
__decorate([
|
|
67
320
|
property(),
|
|
68
321
|
__metadata("design:type", Object)
|
|
69
322
|
], QboTemplateClass.prototype, "type", void 0);
|
|
323
|
+
__decorate([
|
|
324
|
+
property(),
|
|
325
|
+
__metadata("design:type", Object)
|
|
326
|
+
], QboTemplateClass.prototype, "editing", void 0);
|
|
327
|
+
__decorate([
|
|
328
|
+
property({ attribute: false }),
|
|
329
|
+
__metadata("design:type", Function)
|
|
330
|
+
], QboTemplateClass.prototype, "defaultTemplate", void 0);
|
|
331
|
+
__decorate([
|
|
332
|
+
property({ attribute: false }),
|
|
333
|
+
__metadata("design:type", Object)
|
|
334
|
+
], QboTemplateClass.prototype, "testTemplate", void 0);
|
|
70
335
|
__decorate([
|
|
71
336
|
property(),
|
|
72
337
|
__metadata("design:type", Object)
|