@genexus/genexus-ide-ui 0.0.57 → 0.0.59

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

@@ -0,0 +1,167 @@
+/*
+INDEX:
+1. getObjectIcon
+2. convertObjectTypeToTreeItem
+3. convertObjectToTreeItem
+4. getObjectType
+5. findObjectInTree
+6. findPropertyInTree
+7. convertPropertyToTreeItem
+8. convertObjectDataToTreeItemData
+9. convertKbPropertiesDataToTreeItemData
+10. clearKbPropertiesFromTree
+*/
+/* 1.1 getIcon (for objects)*/
+const getObjectIcon = (typeId, objectTypes) => {
+  // The object icon has to be retrieved from the ObjetTypes array, by matching the ObjectData typeId with the ObjectType id.
+  const objectType = objectTypes.find(objectType => objectType.id === typeId);
+  if (objectType) {
+    return objectType.icon;
+  }
+  else {
+    return undefined;
+  }
+};
+/* 1.2 getIcon (for properties)*/
+const getPropertyIcon = (typeId, kbPropertiesTypes) => {
+  // The object icon has to be retrieved from the ObjetTypes array, by matching the ObjectData typeId with the ObjectType id.
+  const propertyType = kbPropertiesTypes.find(propertyType => propertyType.id === typeId);
+  if (propertyType) {
+    return propertyType.icon;
+  }
+  else {
+    return undefined;
+  }
+};
+/* 2. convertObjectTypeToTreeItem*/
+const convertObjectTypeToTreeItem = (objectType) => ({
+  caption: objectType.name,
+  id: objectType.id,
+  leftImgSrc: objectType.icon,
+  leaf: false,
+  checkbox: true,
+  class: "object-type",
+  expanded: true,
+  items: []
+});
+/* 3. convertObjectToTreeItem*/
+const convertObjectToTreeItem = (object, objectTypes) => ({
+  caption: object.name,
+  id: object.id,
+  leftImgSrc: getObjectIcon(object.typeId, objectTypes),
+  checkbox: true,
+  class: "object",
+  leaf: true
+});
+/* 4. getObjectType*/
+const getObjectType = (object, objectTypes) => {
+  return objectTypes.find(objectType => {
+    return objectType.id === object.typeId;
+  });
+};
+/* 5. findObjectInTree*/
+const findObjectInTree = (object, actualTreeState) => {
+  var _a;
+  const objectTreeItemInfo = {
+    objectExists: false,
+    objectTypeIndex: -1
+  };
+  if (actualTreeState) {
+    const objectTypeTreeItemIndex = actualTreeState.findIndex(objectTypeTreeItem => {
+      return objectTypeTreeItem.id === object.typeId;
+    });
+    if (objectTypeTreeItemIndex !== -1) {
+      objectTreeItemInfo.objectTypeIndex = objectTypeTreeItemIndex;
+      // objectType exists as a node in the actual tree.
+      // Now try to find the object
+      const objectFound = (_a = actualTreeState[objectTypeTreeItemIndex].items) === null || _a === void 0 ? void 0 : _a.find(objectTreeItem => {
+        return objectTreeItem.id === object.id;
+      });
+      if (objectFound) {
+        objectTreeItemInfo.objectExists = true;
+      }
+    }
+  }
+  return objectTreeItemInfo;
+};
+/* 6. findPropertyInTree */
+const findPropertyInTree = (property, updatedTreeData) => {
+  const found = updatedTreeData.find(node => {
+    return node.id === property.id;
+  });
+  if (found) {
+    return true;
+  }
+  return false;
+};
+/* 7. convertPropertyToTreeItem */
+const convertPropertyToTreeItem = (property, kbPropertiesTypes) => ({
+  caption: property.name,
+  id: property.id,
+  leftImgSrc: getPropertyIcon(property.typeId, kbPropertiesTypes),
+  checkbox: true,
+  class: "property",
+  leaf: true
+});
+/* 8. convertObjectDataToTreeItemData*/
+export const convertObjectDataToTreeItemData = (objects, objectTypes, actualTreeState) => {
+  const updatedTreeData = [...actualTreeState];
+  if (!objects) {
+    // nothing to do
+    return updatedTreeData;
+  }
+  objects.forEach(object => {
+    // objects that already exists in the actual actualTreeState should not be added.
+    // We can find the object in the actual actualTreeState.
+    const objectTreeItemInfo = findObjectInTree(object, updatedTreeData);
+    if (!objectTreeItemInfo.objectExists) {
+      // object does not exists in actualTreeState
+      // if the objectType tree node exists, insert inside.
+      // if the objectType tree node does not exists, create object type node first.
+      if (objectTreeItemInfo.objectTypeIndex === -1) {
+        const objectType = getObjectType(object, objectTypes);
+        if (objectType !== undefined) {
+          const objectTypeTreeItem = convertObjectTypeToTreeItem(objectType);
+          objectTreeItemInfo.objectTypeIndex =
+            updatedTreeData.push(objectTypeTreeItem) - 1;
+        }
+      }
+      const objectAsTreeItem = convertObjectToTreeItem(object, objectTypes);
+      // insert object in tree (under the object type tree node)
+      updatedTreeData[objectTreeItemInfo.objectTypeIndex].items.push(objectAsTreeItem);
+    }
+  });
+  return updatedTreeData;
+};
+/* 9. convertKbPropertiesDataToTreeItemData*/
+export const convertKbPropertiesDataToTreeItemData = (properties, kbPropertiesTypes, actualTreeState) => {
+  const updatedTreeData = [...actualTreeState];
+  if (!properties) {
+    // nothing to do
+    return updatedTreeData;
+  }
+  properties.forEach(property => {
+    // properties have no parent node, and they should be added at the beginning of the tree
+    const propertyAlreadyExists = findPropertyInTree(property, updatedTreeData);
+    if (!propertyAlreadyExists) {
+      const propertyTreeItem = convertPropertyToTreeItem(property, kbPropertiesTypes);
+      updatedTreeData.unshift(propertyTreeItem);
+    }
+  });
+  return updatedTreeData;
+};
+/* 10. clearKbPropertiesFromTree*/
+export const clearKbPropertiesFromTree = (actualTreeState) => {
+  if (!(actualTreeState.length > 0)) {
+    // nothing to do.
+    return [];
+  }
+  const updatedTreeData = [...actualTreeState];
+  for (let i = updatedTreeData.length - 1; i >= 0; i--) {
+    if (updatedTreeData[i].class === "property") {
+      updatedTreeData.splice(i, 1);
+    }
+  }
+  console.log("updatedTreeData", updatedTreeData);
+  return updatedTreeData;
+};

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

@@ -0,0 +1,199 @@
+/*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);
+}
+
+/*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);
+  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;
+}
+
+/*Gemini*/
+/*Gx Ide*/
+/*general*/
+.tree-view-container {
+  display: flex;
+}
+
+/*Header*/
+.header {
+  display: grid;
+  gap: var(--gx-ide-grid-column-gap);
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "select-directory export-cancel-buttons-group options-btn";
+}
+.header .select-directory {
+  grid-area: select-directory;
+}
+.header .export-cancel-buttons-group {
+  grid-area: export-cancel-buttons-group;
+}
+.header .options-btn {
+  grid-area: options-btn;
+}
+
+/*Main*/
+.checkboxes-wrapper {
+  padding: var(--gx-ide-grid-column-gap);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gx-ide-grid-column-gap);
+  border-bottom: 1px solid var(--gx-ide-container-border-color);
+}
+
+.tree-container {
+  display: flex;
+  min-height: 100px;
+  max-height: 200px;
+  padding-left: var(--gx-ide-grid-column-gap);
+  width: 100%;
+  box-sizing: border-box;
+}
+.tree-container--empty {
+  padding-left: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+/*Footer*/
+.footer-right-wrapper {
+  display: grid;
+  gap: var(--gx-ide-grid-column-gap);
+  grid-template-columns: 100px 100px;
+}