@quandis/qbo4.configuration 4.0.1-CI-20241010-231112 → 4.0.1-CI-20241014-215832

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quandis/qbo4.configuration",
-  "version": "4.0.1-CI-20241010-231112",
+  "version": "4.0.1-CI-20241014-215832",
   "type": "module",
   "types": "./src/Program.d.ts",
   "exports": {
@@ -15,39 +15,39 @@
     "scss/"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.16.2",
-    "@codemirror/commands": "^6.6.0",
-    "@codemirror/lang-css": "^6.2.1",
+    "@codemirror/autocomplete": "^6.18.1",
+    "@codemirror/commands": "^6.7.0",
+    "@codemirror/lang-css": "^6.3.0",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.27.0",
+    "@codemirror/view": "^6.34.1",
     "bootstrap": "^5.3.3",
     "codemirror": "^6.0.1",
-    "lit": "^3.1.2",
-    "reflect-metadata": "^0.2.1",
+    "lit": "^3.2.1",
+    "reflect-metadata": "^0.2.2",
     "tsyringe": "^4.8.0"
   },
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^5.0.0",
-    "autoprefixer": "^10.4.18",
+    "@fullhuman/postcss-purgecss": "^6.0.0",
+    "autoprefixer": "^10.4.20",
     "clean-css": "^5.3.3",
-    "glob": "^10.3.10",
-    "mini-css-extract-plugin": "^2.8.1",
+    "glob": "^11.0.0",
+    "mini-css-extract-plugin": "^2.9.1",
     "postcss-cli": "^11.0.0",
     "postcss-loader": "^8.1.1",
-    "sass": "^1.72.0",
-    "sass-loader": "^14.1.1",
-    "style-loader": "^3.3.4",
-    "typescript": "^5.4.2",
-    "webpack": "^5.90.3",
+    "sass": "^1.79.5",
+    "sass-loader": "^16.0.2",
+    "style-loader": "^4.0.0",
+    "typescript": "^5.6.3",
+    "webpack": "^5.95.0",
     "webpack-cli": "^5.1.4",
-    "webpack-merge": "^5.10.0"
+    "webpack-merge": "^6.0.1"
   },
   "scripts": {
-    "sass": "sass scss/:wwwroot/css && node cssshake.js",
+    "sass": "sass --load-path=node_modules --quiet scss/:wwwroot/css && node cssshake.js",
     "postcss": "postcss \"wwwroot/css/*.css\" --use autoprefixer --replace",
     "packdev": "webpack --config pack.dev.js --no-color",
     "packprod": "webpack --config pack.prod.js --no-color",
-    "build": "npm install && npm run sass && tsc && npm run packdev && npm run packprod && del *.tgz && npm pack && ren *.tgz qbo4.configuration.tgz"
+    "build": "ncu -u && npm install && npm run sass && tsc --build --force && npm run packdev && npm run packprod && del *.tgz && npm pack && ren *.tgz qbo4.configuration.tgz"
   }
 }

package/scss/qbo-configuration.scss

@@ -61,4 +61,13 @@
 .error {
     @extend .alert;
     @extend .alert-danger;
-}
+}
+
+.success {
+    @extend .alert;
+    @extend .alert-success;
+}
+
+.hidden {
+    display: none;
+}

package/src/qbo-config-editor.d.ts

@@ -1,19 +1,16 @@
 import { LitElement } from 'lit';
 export declare class QboConfigEditor extends LitElement {
-    private _internals;
-    static get formAssociated(): boolean;
-    value: any;
     apiEndpoint: URL;
     configData: Object;
-    static styles: import("lit").CSSResult;
-    constructor();
-    _handleInput(e: any): void;
-    kc_connectedCallback(): Promise<void>;
-    handleInputChange(key: any, event: any): void;
-    updateConfigData(key: any, newValue: any, event: any, isKey?: boolean): void;
+    static styles: import("lit").CSSResult[];
+    updateConfigData(key: any, newValue: any, event: any, isKey?: boolean): Promise<void>;
     addKeyValuePair(event: any): void;
-    deleteKeyValuePair(key: any, event: any): void;
-    saveChanges(event: any): void;
-    cancelChanges(event: any): void;
+    deleteKeyValuePair(key: any, event: any): Promise<void>;
+    saveChanges(event: any): Promise<void>;
+    alertUpdated(): void;
+    alertClear(alert: Element): void;
+    cancelChanges(event: any): Promise<void>;
+    filter(event: any): Promise<void>;
+    search(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
 }

package/src/qbo-config-editor.js

@@ -10,47 +10,29 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { LitElement, html, css, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { JsonConfigurationSource } from './Configuration.js';
+import { configurationCss } from './styles.js';
 export class QboConfigEditor extends LitElement {
-    static get formAssociated() {
-        return true;
+    constructor() {
+        super(...arguments);
+        this.apiEndpoint = new URL('configuration/repository', this.baseURI);
+        this.configData = {};
     }
-    // configSource = new JsonConfigurationSource({});
-    static { this.styles = css `
+    static { this.styles = [
+        configurationCss,
+        css `
     :host {
       display: block;
       padding: 16px;
     }
-    .form-group {
-      margin-bottom: 10px;
+    .row-search-result {
+        margin-bottom: 10px;
     }
-  `; }
-    constructor() {
-        super();
-        this.apiEndpoint = new URL('repository/search', this.baseURI);
-        // @property({ type: Object })
-        this.configData = {};
-        // Use attachInternals() to get access to form internals
-        this._internals = this.attachInternals();
-    }
-    _handleInput(e) {
-        // Update the value on input events
-        this.value = e.target.value;
-        this._internals.setFormValue(this.value);
-    }
-    async kc_connectedCallback() {
-        super.connectedCallback();
-        // check payload
-        if (this.value) {
-            this.configData = JSON.parse(this.value);
-        }
-    }
-    handleInputChange(key, event) {
-        event.preventDefault();
-        const target = event.target;
-        this.configData[key] = target.value;
-        this.requestUpdate();
-    }
-    updateConfigData(key, newValue, event, isKey = false) {
+    .save-cancel-buttons {
+        float: right;
+    }
+        `
+    ]; }
+    async updateConfigData(key, newValue, event, isKey = false) {
         event.preventDefault();
         if (isKey) {
             const oldValue = this.configData[key];
@@ -68,45 +50,127 @@ export class QboConfigEditor extends LitElement {
         this.configData[newKey] = 'newValue';
         this.requestUpdate();
     }
-    deleteKeyValuePair(key, event) {
+    async deleteKeyValuePair(key, event) {
         event.preventDefault();
-        delete this.configData[key];
-        this.requestUpdate();
+        try {
+            await fetch(`${this.apiEndpoint}/delete/${key}`, {
+                method: 'GET'
+            });
+        }
+        catch (err) {
+            dispatchEvent(new CustomEvent('qbo-error', { detail: err }));
+        }
+        await this.search();
+        this.alertUpdated();
     }
-    saveChanges(event) {
+    async saveChanges(event) {
         event.preventDefault();
-        console.log('Saving changes:', this.configData);
+        try {
+            await fetch(`${this.apiEndpoint}/save`, {
+                method: 'POST',
+                body: JSON.stringify(this.configData)
+            });
+        }
+        catch (err) {
+            dispatchEvent(new CustomEvent('qbo-error', { detail: err }));
+        }
+        await this.search();
+        this.alertUpdated();
+    }
+    alertUpdated() {
+        var alert = this.renderRoot.querySelector(`div.alert-success`);
+        if (alert) {
+            alert.classList.remove("hidden");
+        }
+        else {
+            alert = document.createElement("div");
+            alert.className = "success";
+            alert.innerHTML = "Settings have been updated.";
+            var form = this.renderRoot.querySelector(`form`);
+            form?.insertBefore(alert, form?.querySelector("div.save-cancel"));
+        }
+        setTimeout(this.alertClear, 5000, alert);
+    }
+    alertClear(alert) {
+        alert?.classList.add("hidden");
     }
-    cancelChanges(event) {
+    async cancelChanges(event) {
         event.preventDefault();
-        console.log('Cancelling changes');
+        await this.search();
+    }
+    async filter(event) {
+        if (!(event instanceof PointerEvent) && event.key !== 'Enter')
+            return;
+        await this.search();
+    }
+    async search() {
+        var input = this.renderRoot.querySelector(`input.form-control.search`);
+        if (input instanceof HTMLInputElement) {
+            if (input.value.trim() == '') {
+                this.configData = {};
+            }
+            else {
+                try {
+                    const response = await fetch(`${this.apiEndpoint}/search/${input.value}`, {
+                        method: "GET",
+                        headers: { "Accept": "application/json" }
+                    });
+                    this.configData = await response.json();
+                }
+                catch (err) {
+                    dispatchEvent(new CustomEvent('qbo-error', { detail: err }));
+                }
+            }
+        }
     }
     render() {
         const source = new JsonConfigurationSource(this.configData);
         return html `<slot></slot>
-      <form>
-        ${Array.from(source.getValues()).map(({ key, value }) => html `
- <div class="input-group mb-3">
-    <input type="text" class="form-control" .value="${key}" @input="${(e) => this.updateConfigData(key, e.target.value, e, true)}">
-    <input type="text" class="form-control" .value="${value}" @input="${(e) => this.updateConfigData(key, e.target.value, e)}">
-    <button class="btn btn-outline-danger" @click="${(e) => this.deleteKeyValuePair(key, e)}">Delete</button>
-</div>`)}
-        <div>
-            <button class="btn btn-outline-primary" @click="${this.addKeyValuePair}">Add Entry</button>
-            <button class="btn btn-success" @click="${this.saveChanges}">Save</button>
-            <button class="btn btn-secondary" @click="${this.cancelChanges}">Cancel</button>
-          </div>
-      </form>
+<form onsubmit="return false;">
+    <div class="input-group mb-3">
+        <input type="text" class="form-control search" @keydown="${this.filter}">
+        <button class="btn btn-outline-primary" @click="${this.filter}">Search</button>
+    </div>
+    <div class="row">
+        <div class="col">
+          <label>Key</label>
+          <hr/>
+        </div>
+        <div class="col">
+          <label>Value</label>
+          <hr/>
+        </div>
+    </div>
+    ${Array.from(source.getValues()).map(({ key, value }) => html `
+    <div class="row row-search-result">
+        <div class="col">
+            <input type="text" class="form-control" .value="${key}" @input="${(e) => this.updateConfigData(key, e.target.value, e, true)}">
+        </div>
+        <div class="col">
+            <div class="input-group">
+                <input type="text" class="form-control" .value="${value}" @input="${(e) => this.updateConfigData(key, e.target.value, e)}">
+                <button type="button" class="btn btn-outline-danger" @click="${(e) => this.deleteKeyValuePair(key, e)}">Delete</button>
+            </div>
+        </div>
+    </div>`)}
+    <div class="save-cancel">
+        <button type="button" class="btn btn-outline-primary" @click="${this.addKeyValuePair}">Add Setting</button>
+        <div class="save-cancel-buttons">
+            <button type="button" class="btn btn-outline-primary save" @click="${this.saveChanges}">Save</button>
+            <button type="button" class="btn btn-outline-danger cancel" @click="${this.cancelChanges}">Cancel</button>
+        </div>
+    </div>
+</form>
     `;
     }
 }
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboConfigEditor.prototype, "value", void 0);
 __decorate([
     property({ type: URL }),
     __metadata("design:type", Object)
 ], QboConfigEditor.prototype, "apiEndpoint", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], QboConfigEditor.prototype, "configData", void 0);
 customElements.define('qbo-config-editor', QboConfigEditor);
 //# sourceMappingURL=qbo-config-editor.js.map

package/src/qbo-config-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"qbo-config-editor.js","sourceRoot":"","sources":["qbo-config-editor.ts"],"names":[],"mappings":"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"}
+{"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

@@ -1,66 +1,33 @@
 import { LitElement, html, css, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { JsonConfigurationSource } from './Configuration.js';
-
+import { configurationCss } from './styles.js';
 
 export class QboConfigEditor extends LitElement {
 
-    // private _value: string;
-    private _internals: ElementInternals;
-
-    static get formAssociated(): boolean {
-        return true;
-    }
-
-    @property({ type: String })
-    value;
-
     @property({ type: URL })
-    apiEndpoint = new URL('repository/search', this.baseURI);
+    apiEndpoint = new URL('configuration/repository', this.baseURI);
 
-    // @property({ type: Object })
+    @property({ type: Object })
     configData: Object = {};
 
-    // configSource = new JsonConfigurationSource({});
-
-    static styles = css`
+    static styles = [
+        configurationCss,
+        css`
     :host {
       display: block;
       padding: 16px;
     }
-    .form-group {
-      margin-bottom: 10px;
-    }
-  `;
-
-    constructor() {
-        super();
-        // Use attachInternals() to get access to form internals
-        this._internals = this.attachInternals();
-    }
-
-    _handleInput(e) {
-        // Update the value on input events
-        this.value = e.target.value;
-        this._internals.setFormValue(this.value);
+    .row-search-result {
+        margin-bottom: 10px;
     }
-
-    async kc_connectedCallback() {
-        super.connectedCallback();
-        // check payload
-        if (this.value) {
-            this.configData = JSON.parse(this.value);
-        }
+    .save-cancel-buttons {
+        float: right;
     }
+        `
+    ];
 
-    handleInputChange(key, event) {
-        event.preventDefault();
-        const target = event.target as HTMLInputElement;
-        this.configData[key] = target.value;
-        this.requestUpdate();
-    }
-
-    updateConfigData(key, newValue, event, isKey = false) {
+    async updateConfigData(key, newValue, event, isKey = false) {
         event.preventDefault();
         if (isKey) {
             const oldValue = this.configData[key];
@@ -79,38 +46,123 @@ export class QboConfigEditor extends LitElement {
         this.requestUpdate();
     }
 
-    deleteKeyValuePair(key, event) {
+    async deleteKeyValuePair(key, event) {
         event.preventDefault();
-        delete this.configData[key];
-        this.requestUpdate();
+        try {
+            await fetch(`${this.apiEndpoint}/delete/${key}`, {
+                method: 'GET'
+            });
+        } catch (err) {
+            dispatchEvent(new CustomEvent('qbo-error', { detail: err }));
+        }
+        await this.search();
+        this.alertUpdated();
     }
 
-    saveChanges(event) {
+    async saveChanges(event) {
         event.preventDefault();
-        console.log('Saving changes:', this.configData);
+        try {
+            await fetch(`${this.apiEndpoint}/save`, {
+                method: 'POST',
+                body: JSON.stringify(this.configData)
+            });
+        } catch (err) {
+            dispatchEvent(new CustomEvent('qbo-error', { detail: err }));
+        }
+        await this.search();
+        this.alertUpdated();
     }
 
-    cancelChanges(event) {
+    alertUpdated() {
+        var alert = this.renderRoot.querySelector(`div.alert-success`);
+        if (alert) {
+            alert.classList.remove("hidden");
+        } else {
+            alert = document.createElement("div");
+            alert.className = "success";
+            alert.innerHTML = "Settings have been updated.";
+
+            var form = this.renderRoot.querySelector(`form`);
+            form?.insertBefore(alert, form?.querySelector("div.save-cancel"));
+        }
+        setTimeout(this.alertClear, 5000, alert);
+    }
+
+    alertClear(alert: Element) {
+        alert?.classList.add("hidden");
+    }
+
+    async cancelChanges(event) {
         event.preventDefault();
-        console.log('Cancelling changes');
+        await this.search();
     }
 
+    async filter(event) {
+        if (!(event instanceof PointerEvent) && event.key !== 'Enter') return;
+        await this.search();
+    }
+
+    async search() {
+        var input = this.renderRoot.querySelector(`input.form-control.search`);
+        if (input instanceof HTMLInputElement) {
+
+            if (input.value.trim() == '') {
+
+                this.configData = {};
+
+            } else {
+
+                try {
+                    const response = await fetch(`${this.apiEndpoint}/search/${input.value}`, {
+                        method: "GET",
+                        headers: { "Accept": "application/json" }
+                    });
+                    this.configData = await response.json();
+                } catch (err) {
+                    dispatchEvent(new CustomEvent('qbo-error', { detail: err }));
+                }
+
+            }
+        }
+    }
     render() {
         const source = new JsonConfigurationSource(this.configData);
         return html`<slot></slot>
-      <form>
-        ${Array.from(source.getValues()).map(({ key, value }) => html`
- <div class="input-group mb-3">
-    <input type="text" class="form-control" .value="${key}" @input="${(e) => this.updateConfigData(key, e.target.value, e, true)}">
-    <input type="text" class="form-control" .value="${value}" @input="${(e) => this.updateConfigData(key, e.target.value, e)}">
-    <button class="btn btn-outline-danger" @click="${(e) => this.deleteKeyValuePair(key, e)}">Delete</button>
-</div>`)}
-        <div>
-            <button class="btn btn-outline-primary" @click="${this.addKeyValuePair}">Add Entry</button>
-            <button class="btn btn-success" @click="${this.saveChanges}">Save</button>
-            <button class="btn btn-secondary" @click="${this.cancelChanges}">Cancel</button>
-          </div>
-      </form>
+<form onsubmit="return false;">
+    <div class="input-group mb-3">
+        <input type="text" class="form-control search" @keydown="${this.filter}">
+        <button class="btn btn-outline-primary" @click="${this.filter}">Search</button>
+    </div>
+    <div class="row">
+        <div class="col">
+          <label>Key</label>
+          <hr/>
+        </div>
+        <div class="col">
+          <label>Value</label>
+          <hr/>
+        </div>
+    </div>
+    ${Array.from(source.getValues()).map(({ key, value }) => html`
+    <div class="row row-search-result">
+        <div class="col">
+            <input type="text" class="form-control" .value="${key}" @input="${(e) => this.updateConfigData(key, e.target.value, e, true)}">
+        </div>
+        <div class="col">
+            <div class="input-group">
+                <input type="text" class="form-control" .value="${value}" @input="${(e) => this.updateConfigData(key, e.target.value, e)}">
+                <button type="button" class="btn btn-outline-danger" @click="${(e) => this.deleteKeyValuePair(key, e)}">Delete</button>
+            </div>
+        </div>
+    </div>`)}
+    <div class="save-cancel">
+        <button type="button" class="btn btn-outline-primary" @click="${this.addKeyValuePair}">Add Setting</button>
+        <div class="save-cancel-buttons">
+            <button type="button" class="btn btn-outline-primary save" @click="${this.saveChanges}">Save</button>
+            <button type="button" class="btn btn-outline-danger cancel" @click="${this.cancelChanges}">Cancel</button>
+        </div>
+    </div>
+</form>
     `;
     }
 }

package/src/qbo-template.js

@@ -448,5 +448,6 @@ if (typeof window !== 'undefined') {
     window.qbo4.configuration = window.qbo4.configuration || {};
     window.qbo4.configuration.templates = templates;
     window.qbo4.configuration.html = html;
+    window.qbo4.configuration['version'] = '1.0.1';
 }
 //# sourceMappingURL=qbo-template.js.map