@genexus/genexus-ide-ui 0.0.60 → 0.0.62

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

@@ -8,9 +8,14 @@ export class GxIdeKbManagerExport {
   constructor() {
     this.checkedObjectsIds = [];
     this.checkedPropertiesIds = [];
+    this.renderedFirstTime = false;
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
+    this.evaluateObjects = () => {
+      var _a;
+      this.noObjects = !!(((_a = this.objectsTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.objectsTreeState);
+    };
     this.optionsCallbackHandler = () => {
       if (this.optionsCallback) {
         this.optionsCallback();
@@ -61,7 +66,7 @@ export class GxIdeKbManagerExport {
     /*
      * Update checked objects 'checkedObjectsArray' array. Used for the 'addReferencesCallback'
      */
-    this.treeObjectsCheckedItemsChangedHandler = (event) => {
+    this.objectsTreeCheckedItemsChangedHandler = (event) => {
       const allItemsWithCheckbox = [...event.detail.values()];
       const checkedItems = allItemsWithCheckbox.filter(node => node.item.checked);
       // objects checked
@@ -102,13 +107,13 @@ export class GxIdeKbManagerExport {
       }
     };
     this.clearButtonHandler = () => {
-      console.log(this.objectsTreeEl);
+      /* revisar*/
       this.objectsTreeEl.updateAllItemsProperties({ checked: false });
     };
     this.fileName = "";
     this.exportFilePathName = undefined;
-    this.objectsTreeState = [];
     this.noObjects = undefined;
+    this.objectsTreeState = [];
     this.dummyInitialTree = undefined;
     this.kbPropertiesTypes = undefined;
     this.objectTypes = undefined;
@@ -128,20 +133,25 @@ export class GxIdeKbManagerExport {
   }
   // 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);
+    this.evaluateObjects();
+  }
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
   }
   // 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: {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noHeadingPadding: true, headingPaddingTop: true, containerTitle: this._componentLocale.componentName, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("header", { slot: "header", class: "header" }, h("div", { class: "header__top" }, 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" }, 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", onClick: this.cancelCallbackHandler }, 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("div", { class: "header__bottom" }, 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))))));
+    h("gxg-tree-view", { treeModel: this.objectsTreeState, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, 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, class: "gx-ide-message gx-ide-message--short", part: "referenced-by-empty-status-message" }, "There are no Objects to display. ", h("br", null), h("gxg-text", { type: "text-link-no-line", textAlign: "center", onClick: this.addObjectsCallbackHandler }, "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"; }
@@ -373,8 +383,8 @@ export class GxIdeKbManagerExport {
     return {
       "fileName": {},
       "exportFilePathName": {},
-      "objectsTreeState": {},
-      "noObjects": {}
+      "noObjects": {},
+      "objectsTreeState": {}
     };
   }
   static get events() {
@@ -393,6 +403,21 @@ export class GxIdeKbManagerExport {
           "resolved": "boolean",
           "references": {}
         }
+      }, {
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
+        "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"; }

package/dist/collection/components/kb-manager-import/gx-ide-assets/kb-manager-import/langs/kb-manager-import.lang.en.json

@@ -0,0 +1,32 @@
+{
+  "componentName": "Kb Manager Import",
+  "header": {
+    "fileNameLabel": "Select a file:",
+    "fileNamePlaceholder": "Allowed files extensions: .xpz/.xml",
+    "selectFileButton": "Select File",
+    "loadButton": "Load"
+  },
+  "main": {
+    "objectsInFile": {
+      "title": "Objects in File",
+      "selectAll": "Click to select all",
+      "deselectAll": "Click to deselect all",
+      "importButton": "Import",
+      "cancelButton": "Cancel",
+      "optionsButton": "Options"
+    },
+    "importStatus": {
+      "title": "Import Status",
+      "clearButton": "Clear Status",
+      "noImportedFiles": "There are no imported files yet",
+      "importedButHidden": "There are imported files, but all are hidden. Try by activating errors, warnings or success"
+    }
+  },
+  "footer": {
+    "selectDeselectAll": "Select All | Deselect All",
+    "errorsButton": "Errors",
+    "warningsButton": "Warnings",
+    "successButton": "Success",
+    "clearStatusButton": "Clear Status"
+  }
+}

package/dist/collection/components/kb-manager-import/helpers.js

@@ -0,0 +1,128 @@
+const convertImportItemToTreeItem = (importCatIcon, importItems) => {
+  const importTreeItems = [];
+  importItems.forEach(importItem => {
+    importTreeItems.push({
+      id: importItem.id,
+      caption: importItem.name,
+      leftImgSrc: importCatIcon,
+      checkbox: true,
+      expanded: true,
+      leaf: true,
+      class: "object tree-view-item"
+    });
+  });
+  return importTreeItems;
+};
+/**
+ * @description This function converts ReferenceData[] data to TreeItemData[]
+ */
+export const convertImportCategoryToTreeView = (importCategoryData) => {
+  const treeData = [];
+  if (!importCategoryData) {
+    return treeData;
+  }
+  importCategoryData.forEach(importCat => {
+    const importCategoryTreeItem = {
+      id: importCat.id,
+      caption: `${importCat.name} (${importCat.items.length})`,
+      leftImgSrc: importCat.icon,
+      checkbox: true,
+      expanded: true,
+      leaf: false,
+      class: "category tree-view-item",
+      items: convertImportItemToTreeItem(importCat.icon, importCat.items)
+    };
+    treeData.push(importCategoryTreeItem);
+  });
+  return treeData;
+};
+const createImportResultDataMessages = (importItemId, messagesArray) => {
+  const messages = [];
+  messagesArray.forEach((message, i) => {
+    messages.push({
+      id: `${importItemId}-message-${i}}]`,
+      caption: message,
+      leftImgSrc: "gx-test/test-results",
+      leaf: true
+    });
+  });
+  return messages;
+};
+const updateImportStatusTree = (importItemResultFullData, importTreeActualState) => {
+  var _a;
+  const objectCategoryIndex = importTreeActualState.findIndex(objectCategoryItem => {
+    return objectCategoryItem.id === importItemResultFullData.categoryId;
+  });
+  if (objectCategoryIndex === -1) {
+    // object category node does not exists. We have to create it, and insert the import result tree node inside.
+    const importTreeItem = {
+      id: importItemResultFullData.categoryId,
+      // the count is (1), because this is the first item for this category
+      caption: `${importItemResultFullData.categoryName} (1)`,
+      leftImgSrc: importItemResultFullData.categoryIcon,
+      class: `tree-view-item tree-view-item--${importItemResultFullData.status}`,
+      expanded: true,
+      items: [
+        {
+          id: importItemResultFullData.id,
+          caption: importItemResultFullData.name,
+          items: createImportResultDataMessages(importItemResultFullData.id, importItemResultFullData.messages),
+          class: `tree-view-item tree-view-item--${importItemResultFullData.status}`,
+          expanded: true,
+          leaf: importItemResultFullData.messages.length === 0
+        }
+      ]
+    };
+    importTreeActualState.push(importTreeItem);
+  }
+  else {
+    // Object category node already exists. Just create the import result node, and insert into the parent category node (if it doesn't exists already).
+    // first search for the importItemResult node...
+    const importItemIndex = (_a = importTreeActualState[objectCategoryIndex].items) === null || _a === void 0 ? void 0 : _a.findIndex(importItem => {
+      return importItem.id === importItemResultFullData.id;
+    });
+    if (importItemIndex === -1) {
+      // ImportItem does not exists already
+      const importTreeItem = {
+        id: importItemResultFullData.id,
+        caption: importItemResultFullData.name,
+        expanded: true,
+        items: createImportResultDataMessages(importItemResultFullData.id, importItemResultFullData.messages),
+        class: `tree-view-item tree-view-item--${importItemResultFullData.status}`
+      };
+      // Insert the import node into the category node
+      importTreeActualState[objectCategoryIndex].items.push(importTreeItem);
+      // Then, update the category node caption (the name is the same, but the (count) should be the actual items.length, because we have just added a new child import node. )
+      importTreeActualState[objectCategoryIndex].caption = `${importItemResultFullData.categoryName} (${importTreeActualState[objectCategoryIndex].items.length})`;
+    }
+  }
+  return importTreeActualState;
+};
+/**
+ * This function takes an ImportItemResultData item, and updates it to a ImportCategoryFullData, which has the same information, plus the category parent needed information, that will be used for creating the "virtual" parent category node on the "Import Status" section.
+ */
+const createImportResultFullData = (importItemResultData, importCategoryData) => {
+  const importCategoryFullData = Object.assign({ categoryId: undefined, categoryName: undefined, categoryIcon: undefined }, importItemResultData);
+  importCategoryDataFor: for (let i = 0; i < importCategoryData.length; i++) {
+    const categoryNode = importCategoryData[i];
+    for (let j = 0; j < categoryNode.items.length; j++) {
+      if (categoryNode.items[j].id === importItemResultData.id) {
+        importCategoryFullData.categoryId = categoryNode.id;
+        importCategoryFullData.categoryName = categoryNode.name;
+        importCategoryFullData.categoryIcon = categoryNode.icon;
+        break importCategoryDataFor;
+      }
+    }
+  }
+  return importCategoryFullData;
+};
+/**
+ * @description This function adds an ImportItemResultData item to the "importTreeState", and returns the updated tree with the new item added.
+ */
+export const addImportItemResultDataItem = (importItemResultData, importCategoryData, importTreeActualState) => {
+  let updatedImportStatusTree = [...importTreeActualState];
+  // first, update importItemResultData with the category data. It will be needed later.
+  const importItemResultFullData = createImportResultFullData(importItemResultData, importCategoryData);
+  updatedImportStatusTree = updateImportStatusTree(importItemResultFullData, updatedImportStatusTree);
+  return updatedImportStatusTree;
+};

package/dist/collection/components/kb-manager-import/kb-manager-import.css

@@ -0,0 +1,253 @@
+/*Gemini*/
+/*Gx Ide*/
+/* Helper Classes */
+.gxi-hidden {
+  display: none !important;
+}
+
+.gxi-full-height {
+  height: 100%;
+}
+
+.gxi-overflow-auto {
+  overflow: auto;
+}
+
+.gxi-display-flex {
+  display: flex;
+}
+
+.align-start {
+  display: flex;
+  align-items: start;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.align-end {
+  display: flex;
+  align-items: end;
+}
+
+/* Grids */
+.grid {
+  display: grid;
+  grid-row-gap: var(--gx-ide-grid-row-gap);
+  grid-column-gap: var(--gx-ide-grid-column-gap);
+  grid-template-rows: auto;
+}
+
+ch-grid-cell {
+  display: flex;
+}
+
+ch-grid {
+  overflow: auto;
+  height: 100%;
+}
+
+ch-grid-column {
+  /*to be removed when this works inside a component with shadow: true*/
+  z-index: 99;
+  border-bottom: 1px solid var(--gray-01);
+}
+
+ch-grid-column {
+  padding-inline-start: --gxg-container--padding;
+  padding-inline-end: --gxg-container--padding;
+}
+
+ch-grid-cell {
+  --spacing-comp-02: var(--gxg-container--padding);
+}
+
+/*Gxg Tabs*/
+gxg-tabs {
+  box-shadow: none;
+}
+
+/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
+:host(.gx-ide-component) {
+  box-shadow: var(--box-shadow-01) !important;
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/*stylize the top bar*/
+:host(:focus-within) gx-ide-top-bar::part(wrapper) {
+  background-color: var(--color-secondary-enabled);
+}
+
+/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
+.gx-ide-main-wrapper {
+  color: var(--gx-ide-component-text-color);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-lg);
+  font-family: var(--font-family-primary);
+  line-height: 1.6em;
+  height: 100%;
+  background-color: var(--gx-ide-component-background-color);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+/*This is the main element. This is the one that take the remaining vertical space*/
+.gx-ide-main {
+  flex-grow: 1;
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-main::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-main::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-main .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+.gx-ide-overflow {
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-overflow::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-overflow::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-overflow .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/*Gemini*/
+/*Gx Ide*/
+:host {
+  display: block;
+}
+
+/*Header*/
+.header {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gx-ide-grid-column-gap);
+}
+.header .select-file {
+  flex: 1;
+}
+
+/*Main*/
+.main {
+  height: 100%;
+  display: flex;
+}
+.main > * {
+  flex: 1;
+}
+.main .left-grid-item {
+  border-right: 1px solid var(--gx-ide-container-border-color);
+}
+.main .gx-ide-message {
+  padding: 50px 0;
+}
+.main .tree-container {
+  /*import status display/hide status (warning, error, success)*/
+}
+.main .tree-container--empty {
+  align-items: center;
+  justify-content: center;
+}
+.main .tree-container--import-status .tree-view-item--success::part(action) {
+  grid-template: "first-img left-img text right-img"/max-content max-content 1fr max-content;
+}
+.main .tree-container--import-status .tree-view-item--success::part(action)::before {
+  grid-area: first-img;
+  content: "";
+  width: var(--spacing-comp-02);
+  height: var(--spacing-comp-02);
+  border-radius: 50%;
+  background-color: var(--gray-03);
+  background-color: var(--color-success-dark);
+}
+.main .tree-container--import-status .tree-view-item--warning::part(action) {
+  grid-template: "first-img left-img text right-img"/max-content max-content 1fr max-content;
+}
+.main .tree-container--import-status .tree-view-item--warning::part(action)::before {
+  grid-area: first-img;
+  content: "";
+  width: var(--spacing-comp-02);
+  height: var(--spacing-comp-02);
+  border-radius: 50%;
+  background-color: var(--gray-03);
+  background-color: var(--color-warning-dark);
+}
+.main .tree-container--import-status .tree-view-item--error::part(action) {
+  grid-template: "first-img left-img text right-img"/max-content max-content 1fr max-content;
+}
+.main .tree-container--import-status .tree-view-item--error::part(action)::before {
+  grid-area: first-img;
+  content: "";
+  width: var(--spacing-comp-02);
+  height: var(--spacing-comp-02);
+  border-radius: 50%;
+  background-color: var(--gray-03);
+  background-color: var(--color-error-dark);
+}
+.main .tree-container--no-warnings .tree-view-item--warning {
+  display: none;
+}
+.main .tree-container--no-errors .tree-view-item--error {
+  display: none;
+}
+.main .tree-container--no-successes .tree-view-item--success {
+  display: none;
+}
+
+.ghost-element {
+  display: block;
+  width: 0;
+  height: 24px;
+  /*this is the taller element on the "objects in file container footer (which is the button group, at the time of writing)"*/
+}