@genexus/genexus-ide-ui 0.0.57 → 0.0.59

package/dist/collection/components/kb-manager-export/kb-manager-export.js

@@ -0,0 +1,408 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* CUSTOM IMPORTS */
+import { Locale } from "../../common/locale";
+import { config } from "../../common/config";
+import { convertObjectDataToTreeItemData, convertKbPropertiesDataToTreeItemData, clearKbPropertiesFromTree } from "./helpers";
+export class GxIdeKbManagerExport {
+  constructor() {
+    this.checkedObjectsIds = [];
+    this.checkedPropertiesIds = [];
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.optionsCallbackHandler = () => {
+      if (this.optionsCallback) {
+        this.optionsCallback();
+        // returns Promise<void>
+      }
+    };
+    this.addKBPropertiesCallbackHandler = async (e) => {
+      const checked = e.detail.value;
+      if (checked && this.addKBPropertiesCallback) {
+        const kBPropertiesData = await this.addKBPropertiesCallback();
+        if (kBPropertiesData.length === 0) {
+          // nothing to do
+        }
+        else {
+          // 'convertObjectDataToTreeItemData' can be used for converting KBPropertiesData as well, because the two types share the same properties
+          const objectsNewTreeState = convertKbPropertiesDataToTreeItemData(kBPropertiesData, this.kbPropertiesTypes, this.objectsTreeState);
+          this.objectsTreeState = objectsNewTreeState;
+        }
+      }
+      else if (!checked) {
+        // previous properties (if any) should be removed
+        const objectsWithoutProperties = clearKbPropertiesFromTree(this.objectsTreeState);
+        this.objectsTreeState = objectsWithoutProperties;
+      }
+    };
+    this.addObjectsCallbackHandler = async () => {
+      if (this.addObjectsCallback) {
+        const objects = await this.addObjectsCallback();
+        this.updateObjects(objects);
+      }
+    };
+    this.addReferencesCallbackHandler = async () => {
+      if (this.addReferencesCallback) {
+        const objects = await this.addReferencesCallback(this.checkedObjectsIds);
+        this.updateObjects(objects);
+      }
+    };
+    /*
+     * Used to update objects. Objects are updated when calling the 'addObjectsCallback' or 'addReferencesCallback'
+     */
+    this.updateObjects = (objects) => {
+      if (objects.length) {
+        const objectsNewTreeState = convertObjectDataToTreeItemData(objects, this.objectTypes, this.objectsTreeState);
+        // console.log("objectsNewTreeState", objectsNewTreeState);
+        this.objectsTreeState = objectsNewTreeState;
+      }
+    };
+    /*
+     * Update checked objects 'checkedObjectsArray' array. Used for the 'addReferencesCallback'
+     */
+    this.treeObjectsCheckedItemsChangedHandler = (event) => {
+      const allItemsWithCheckbox = [...event.detail.values()];
+      const checkedItems = allItemsWithCheckbox.filter(node => node.item.checked);
+      // objects checked
+      const checkedObjects = checkedItems.filter(node => node.item.class === "object");
+      const checkedObjectsIds = [];
+      if (checkedObjects.length > 0) {
+        checkedObjects.forEach(objectChecked => {
+          checkedObjectsIds.push(objectChecked.item.id);
+        });
+      }
+      this.checkedObjectsIds = checkedObjectsIds;
+      // properties checked
+      const checkedProperties = checkedItems.filter(node => node.item.class === "property");
+      const checkedPropertiesIds = [];
+      if (checkedProperties.length > 0) {
+        checkedProperties.forEach(propertyChecked => {
+          checkedPropertiesIds.push(propertyChecked.item.id);
+        });
+      }
+      this.checkedPropertiesIds = checkedPropertiesIds;
+    };
+    this.exportCallbackHandler = async () => {
+      if (this.exportCallback) {
+        const exportAllChecked = this.exportAllCheckboxEl.checked;
+        const fileName = this.fileNameEl.value;
+        const checkedKbPropertiesIds = this.checkedPropertiesIds;
+        const checkedObjectIds = exportAllChecked
+          ? undefined
+          : this.checkedObjectsIds;
+        this.exportCallback(fileName, checkedKbPropertiesIds, checkedObjectIds);
+        // returns Promise<boolean> but no procedure was detailed on the spec.
+      }
+    };
+    this.cancelCallbackHandler = () => {
+      if (this.cancelCallback) {
+        this.cancelCallback();
+        // returns Promise<boolean> but no procedure was detailed on the spec.
+      }
+    };
+    this.clearButtonHandler = () => {
+      console.log(this.objectsTreeEl);
+      this.objectsTreeEl.updateAllItemsProperties({ checked: false });
+    };
+    this.fileName = "";
+    this.exportFilePathName = undefined;
+    this.objectsTreeState = [];
+    this.noObjects = undefined;
+    this.dummyInitialTree = undefined;
+    this.kbPropertiesTypes = undefined;
+    this.objectTypes = undefined;
+    this.exportFileDirectoryCallback = undefined;
+    this.optionsCallback = undefined;
+    this.addKBPropertiesCallback = undefined;
+    this.addReferencesCallback = undefined;
+    this.addObjectsCallback = undefined;
+    this.exportCallback = undefined;
+    this.cancelCallback = undefined;
+  }
+  watchObjectsTreeStateHandler(newState) {
+    this.noObjects = !!(newState.length === 0 || !newState);
+  }
+  watchDummyInitialTreeHandler(newTree) {
+    this.objectsTreeState = newTree;
+  }
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  async componentWillLoad() {
+    var _a;
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+    this.componentDidLoadEvent.emit(true);
+    this.noObjects = !!(((_a = this.objectsTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.objectsTreeState);
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true }, h("header", { slot: "header", class: "header" }, h("gx-ide-directory-selector", { class: { "select-file-input": true }, value: this.exportFilePathName, part: "xpz-file", label: this._componentLocale.header.exportFileName, ref: el => (this.fileNameEl = el), selectDirectoryCallback: this.exportFileDirectoryCallback }), h("gxg-button-group", { class: "export-cancel-buttons-group", "default-selected-btn-id": "responsive-tablet-btn", onClick: this.cancelCallbackHandler }, h("button", { id: "export-kb-btn", part: "export-btn", onClick: this.exportCallbackHandler }, this._componentLocale.header.exportButton), h("button", { id: "cancel-kb-export-btn", part: "cancel-button" }, this._componentLocale.header.cancelButton)), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/settings", part: "select-kb-btn", class: { "options-btn": true }, onClick: this.optionsCallbackHandler }, this._componentLocale.header.optionsButton)), h("main", { class: { main: true } }, h("div", { class: { "checkboxes-wrapper": true } }, h("gxg-form-checkbox", { label: this._componentLocale.main.addKnowledgeBaseDescription, onChange: this.addKBPropertiesCallbackHandler, part: "add-kb-checkbox" }), h("gxg-form-checkbox", { label: this._componentLocale.main.exportAll, part: "export-all-checkbox", ref: el => (this.exportAllCheckboxEl =
+        el) })), h("div", { class: {
+        "tree-container": true,
+        "tree-container--empty": this.noObjects
+      } }, !this.noObjects ? (
+    /* objects tree */
+    h("gxg-tree-view", { positionRelative: true, treeModel: this.objectsTreeState, toggleCheckboxes: true, onCheckedItemsChange: this.treeObjectsCheckedItemsChangedHandler, ref: el => (this.objectsTreeEl = el) })) : (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "referenced-by-text" }, "There are no Objects to display. ", h("br", null), "Begin by adding some.")))), h("gxg-button", { type: "secondary-text-only", part: "export-button", class: { "cancel-btn": true }, slot: "footer-start", onClick: this.clearButtonHandler }, this._componentLocale.footer.clearButton), h("div", { class: { "footer-right-wrapper": true }, slot: "footer-end" }, h("gxg-button", { onClick: this.addReferencesCallbackHandler, type: "outlined-text-icon", icon: "general/references", part: "export-button", class: { "cancel-btn": true } }, this._componentLocale.footer.referencesButton), h("gxg-button", { type: "primary-text-icon", icon: "menus/new-object", part: "export-button", class: { "cancel-btn": true }, onClick: this.addObjectsCallbackHandler, grabAttention: this.noObjects }, this._componentLocale.footer.addButton))))));
+  }
+  static get is() { return "gx-ide-kb-manager-export"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["kb-manager-export.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kb-manager-export.css"]
+    };
+  }
+  static get assetsDirs() { return ["gx-ide-assets/kb-manager-export"]; }
+  static get properties() {
+    return {
+      "dummyInitialTree": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "TreeXItemModel[]",
+          "resolved": "TreeXItemModel[]",
+          "references": {
+            "TreeXItemModel": {
+              "location": "import",
+              "path": "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-x/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Just for testing. Remove when this is is done (Bruno)"
+        }
+      },
+      "kbPropertiesTypes": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KBPropertyType[]",
+          "resolved": "KBPropertyType[]",
+          "references": {
+            "KBPropertyType": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Array with the possible types of KB properties"
+        }
+      },
+      "objectTypes": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ObjectType[]",
+          "resolved": "ObjectType[]",
+          "references": {
+            "ObjectType": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Array of possible object types"
+        }
+      },
+      "exportFileDirectoryCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ExportFileDirectoryCallback",
+          "resolved": "() => Promise<string>",
+          "references": {
+            "ExportFileDirectoryCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when the user wants to access the export options."
+        }
+      },
+      "optionsCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "OptionsCallback",
+          "resolved": "() => Promise<void>",
+          "references": {
+            "OptionsCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when the user wants to access the export options."
+        }
+      },
+      "addKBPropertiesCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KBPropertiesCallback",
+          "resolved": "() => Promise<KBPropertyData[]>",
+          "references": {
+            "KBPropertiesCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when the user wants to include KB properties."
+        }
+      },
+      "addReferencesCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "AddReferencesCallback",
+          "resolved": "(objectIds: string[]) => Promise<ObjectData[]>",
+          "references": {
+            "AddReferencesCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "param",
+              "text": "itemIds :string[] The selected item ids"
+            }, {
+              "name": "returns",
+              "text": ": Returns an object with the items and its references"
+            }],
+          "text": "Callback invoked when the user wants to add all the references for the selected objects."
+        }
+      },
+      "addObjectsCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "AddObjectsCallback",
+          "resolved": "() => Promise<ObjectData[]>",
+          "references": {
+            "AddObjectsCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when the user wants to add objects."
+        }
+      },
+      "exportCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ExportCallback",
+          "resolved": "(fileName: string, checkedKbPropertiesIds: string[], checkedObjectIds: string[]) => Promise<boolean>",
+          "references": {
+            "ExportCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "param",
+              "text": "fileName :string"
+            }, {
+              "name": "param",
+              "text": "itemIds :string[] The selected item ids"
+            }, {
+              "name": "returns",
+              "text": ": It returns a boolean indicating whether the process was successful"
+            }],
+          "text": "Callback invoked when the user wants to initiate the export process."
+        }
+      },
+      "cancelCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "CancelCallback",
+          "resolved": "() => Promise<boolean>",
+          "references": {
+            "CancelCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "returns",
+              "text": "It returns a boolean indicating whether the process could be canceled or not."
+            }],
+          "text": "Callback invoked when the user wants to cancel the export process."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "fileName": {},
+      "exportFilePathName": {},
+      "objectsTreeState": {},
+      "noObjects": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "componentDidLoadEvent",
+        "name": "componentDidLoadEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event is emitted once just after the component is fully loaded and the first render() occurs."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "objectsTreeState",
+        "methodName": "watchObjectsTreeStateHandler"
+      }, {
+        "propName": "dummyInitialTree",
+        "methodName": "watchDummyInitialTreeHandler"
+      }];
+  }
+}

package/dist/collection/components/references/helpers.js

@@ -25,30 +25,27 @@ export const convertObjectDataToSuggestData = (selectorCategoriesData) => {
   }
   return suggestData;
 };
+const convertToTreeItem = (item) => {
+  var _a;
+  return ({
+    caption: item.description,
+    id: item.id,
+    items: ((_a = item.items) !== null && _a !== void 0 ? _a : []).map(convertToTreeItem),
+    lazy: item.hasChildren && (item.items == null || item.items.length === 0),
+    leaf: item.hasChildren === false,
+    leftImgSrc: item.icon
+  });
+};
 /**
- * @description This function converts ReferenceData[] data to GxgTreeItemData[]
+ * @description This function converts ReferenceData[] data to TreeItemData[]
  */
-export const convertReferenceDataToTreeData = (referencedBy) => {
+export const convertReferenceDataToTreeViewData = (referenceData) => {
   const treeData = [];
-  if (!referencedBy) {
+  if (!referenceData) {
     return treeData;
   }
-  const convertItem = (item) => {
-    var _a;
-    const treeItem = {
-      description: item.description,
-      lazy: item.hasChildren,
-      icon: item.icon,
-      id: item.id,
-      label: item.name
-    };
-    if (((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      treeItem.items = item.items.map(child => convertItem(child));
-    }
-    return treeItem;
-  };
-  referencedBy.forEach(item => {
-    treeData.push(convertItem(item));
+  referenceData.forEach(item => {
+    treeData.push(convertToTreeItem(item));
   });
   return treeData;
 };

package/dist/collection/components/references/references.css

@@ -215,6 +215,15 @@ gxg-tabs {
   height: 100%;
   gap: 0;
 }
+.main .reference-container {
+  display: flex;
+  min-height: 300px;
+}
+.main .reference-container--no-references {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .main > *:first-child {
   border-right: 1px solid var(--gx-ide-container-border-color);
 }