impaktapps-ui-builder 1.0.320 → 1.0.330

package/src/impaktapps-ui-builder/builder/build/uischema/pdfViewer.ts

@@ -0,0 +1,18 @@
+export default {
+    type: "Control",
+    scope: "#/properties/pdfviewer",
+    options: {
+      widget: "PdfViewer",
+    },
+    config: {
+      layout: {
+        xs: 12,
+        sm: 12,
+        md: 12,
+        lg: 12,
+      },
+      main: {
+        title: "PDF"
+      },
+    },
+  }

package/src/impaktapps-ui-builder/builder/build/uischema/tableSection.ts

@@ -1,10 +1,10 @@
-export const TableSection = (theme) => {
+export const TableSection = (theme,scopeName="elements") => {
   const uiSchema = {
     type: "HorizontalLayout",
     elements: [
       {
         type: "Control",
-        scope: "#/properties/elements",
+        scope: `#/properties/${scopeName}`,
         options: {
           widget: "Table",
         },
@@ -15,8 +15,7 @@ export const TableSection = (theme) => {
                 {
                   widget: {
                     type: "Control",
-                    scope: "#/properties/New_Record",
-
+                     scope: `#/properties/${scopeName}_New_Record`,
                     options: {
                       widget: "IconButton",
                     },
@@ -43,7 +42,7 @@ export const TableSection = (theme) => {
                 {
                   widget: {
                     type: "Control",
-                    scope: "#/properties/Paste_Component",
+                     scope: scopeName === "elements" ? `#/properties/Paste_Component` : `#/properties/Paste_TabsComponent`,
                     options: {
                       widget: "IconButton",
                     },
@@ -109,7 +108,7 @@ export const TableSection = (theme) => {
             },
             {
               type: "Control",
-              scope: "#/properties/Copy_Component",
+              scope: scopeName === "elements" ? `#/properties/Copy_Component` : `#/properties/Copy_TabsComponent`,
               options: {
                 widget: "Button",
               },

package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/schema.ts

@@ -40,7 +40,8 @@ export const ComponentSchema: any = {
         { title: "Rank", const: "Rank" },
         { title: "Rank Card", const: "RankCard" },
         { title: "Metric Card", const: "MetricCard" },
-        { title: "Bow and Arrow", const: "RunnerBoyProgressBar" },
+        { title: "Hierarchy Chart", const: "HierarchyChart" },
+        { title: "Runner Boy", const: "RunnerBoyProgressBar" },
         { title: "Table", const: "Table" },
         { title: "Tabs", const: "TabSection" },
         { title: "Text", const: "Text" },
@@ -49,6 +50,7 @@ export const ComponentSchema: any = {
         { title: "Upload", const: "UploadFile" },
         { title: "Tree ", const: "TreeMap" },
         { title: "Thought of the day", const: "Thought" },
+        { title: "PDF", const: "PdfViewer" }
       ],
     },
     elementType: {
@@ -102,6 +104,13 @@ export const ComponentSchema: any = {
         { title: "Standard", const: "standard" },
       ],
     },
+    linkType:{
+      oneOf:[
+        { title: "Step", const: "step" },
+        { title: "Diagonal", const: "diagonal" },
+        { title: "Line", const: "line" },
+      ]
+    },
     positionVertical:{
       oneOf: [
         { title: "Top", const: "top" },
@@ -109,28 +118,28 @@ export const ComponentSchema: any = {
         { title: "Bottom", const: "bottom" }
       ],
     },
-    positionHorizontal:{
+    positionHorizontal: {
       oneOf: [
         { title: "Left", const: "left" },
         { title: "Center", const: "center" },
         { title: "Right", const: "right" }
       ],
     },
-    contentVertical:{
+    contentVertical: {
       oneOf: [
         { title: "Top", const: "top" },
         { title: "Center", const: "center" },
         { title: "Bottom", const: "bottom" }
       ],
     },
-    contentHorizontal:{
+    contentHorizontal: {
       oneOf: [
         { title: "Left", const: "left" },
         { title: "Center", const: "center" },
         { title: "Right", const: "right" }
       ],
     },
-    toolTipPosition:{
+    toolTipPosition: {
       oneOf: [
         { title: "Top", const: "top" },
         { title: "Left", const: "left" },
@@ -440,6 +449,7 @@ export const ComponentSchema: any = {
           const: "HorizontalStackBarGraph",
         },
         { title: "Area Graph", const: "AreaGraph" },
+        { title: "StackBar And Line Graph", const: "StackBarLineGraph" },
       ],
     },
     iconName: {
@@ -493,6 +503,11 @@ export const ComponentSchema: any = {
         { title: "Detail Icon", const: "DetailIcon" },
         { title: "Report View Icon", const: "ReportViewIcon" },
         { title: "Payout", const: "Payout" },
+        { title: "Info Outlined", const: "InfoOutlinedIcon" },
+        { title: "Territory Add", const: "TerritoryAdd" },
+        { title: "Territory Edit", const: "TerritoryEdit" },
+        { title: "Territory Delete", const: "TerritoryDelete" },
+        { title: "Git Compare", const: "GitCompare" },
       ],
     },
     color: {

package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/schema.ts

@@ -1,5 +1,3 @@
-import { title } from "process";
-
 export const EventSchema = {
   type: "object",
   properties: {
@@ -55,9 +53,10 @@ export const EventSchema = {
         { title: "Row Movement", const: "onRowMovement" },
         { title: "Download", const: "onDownload" },
         { title: "Fail", const: "Fail" },
+        { title: "onClose", const: "onClose" },
         { title: "Key Down", const: "onKeyDown" },
-
-
+        { title: "Set Style", const: "setStyle" },
+        { title: "Expand Node", const: "onNodeExpandChange" },
       ]
     },
     Handler: {

package/src/impaktapps-ui-builder/builder/services/component.ts

@@ -16,7 +16,7 @@ const sectionLabels = {
   LeaderBoard: ["Core", "Components", "Properties", "Events", "Style",],
   WrapperSection: ["Core", "Components", "Properties", "Style",],
   HorizontalLayout: ["Core", "Components", "Properties", "Style",],
-  TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
+  TabSection: ["Core", "Components", "TabTitles", "Properties", "Style", "Validation"],
   SpeedoMeter: ["Core", "Properties", "Events", "Style",],
   card: ["Core", "Properties", "Events", "Style", "Validation"],
   UploadFile: ["Core", "Events", "Style", "Validation"],
@@ -28,6 +28,7 @@ const sectionLabels = {
   ProgressBar: ["Core", "Properties", "Events", "Style",],
   RankCard: ["Core", "Properties", "Events", "Style",],
   MetricCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  HierarchyChart: ["Core","Components","Properties", "Events", "Style", "Validation"],
   Slider: ["Core", "Components", "Events", "Style", "Validation"],
   Timer: ["Core", "Events", "Style",],
   Rank: ["Core", "Events", "Style",],
@@ -37,8 +38,9 @@ const sectionLabels = {
   Radio: ["Core", "Properties", "Events", "Style", "Validation"],
   Text: ["Core", "Properties", "Events", "Style", "Validation"],
   TextArea: ["Core", "Properties", "Events", "Style", "Validation"],
-  PopUp: ["Core", "Components", "Properties", "Style"],
+  PopUp: ["Core", "Components", "Properties", "Events", "Style"],
   PopOver: ["Core", "Components", "Properties", "Style"],
+  PdfViewer: ["Core", "Properties", "Style"],
   Stepper: ["Core", "Components", "Properties", "Events", "Style"],
   DataGrid: ["Core", "Components", "Properties", "Events", "Style"],
   InputSlider: ["Core", "Properties", "Events", "Style", "Validation"],
@@ -52,7 +54,6 @@ const sectionLabels = {
   Camera: ["Core", "Properties", "Events", "Style", "Validation"],
   OTP_Input: ["Core", "Properties", "Events", "Style", "Validation"],
 }
-
 export function refreshPage(type: string, store: any) {
   const UiSchema = _.cloneDeep(componentBasicUiSchema(store.theme.myTheme))
   const currentConfig = JSON.parse(sessionStorage.getItem("pageFormdata"));
@@ -63,6 +64,7 @@ export function refreshPage(type: string, store: any) {
       Style: StyleSection,
       Events: EventSection(store.theme.myTheme),
       Components: TableSection(store.theme.myTheme),
+      TabTitles: TableSection(store.theme.myTheme, "tabLabelElements"),
       Properties: buildPropertiesSection(type),
       Validation: ValidationSection
     }
@@ -283,8 +285,12 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       const id = store.searchParams?.get("id");
       saveFormdataInSessionStorage(store.ctx.core.data, path)
       if (path) {
-        const path = store.searchParams?.get("path");
-        const finalPath = `${path}.elements[${rowId}]`
+        let finalPath = `${path}`;
+        if (dynamicData?.path?.startsWith("tabLabel")) {
+          finalPath = `${finalPath}.tabLabelElements[${rowId}]`
+        } else {
+          finalPath = `${finalPath}.elements[${rowId}]`
+        }
         store.searchParams.set("path", finalPath)
         store.setSearchParams(store.searchParams)
         this.setPage()
@@ -295,7 +301,12 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     deleteComponents: function (shouldUpdateDialog: boolean = true) {
       const path = store.searchParams?.get("path");
       const rowId = sessionStorage.getItem('rowId');
-      store.formData.elements.splice(rowId, 1);
+      const isTabLabelElements = sessionStorage.getItem('isTabLabelElements') === "true";
+      if (isTabLabelElements) {
+        store.formData.tabLabelElements.splice(rowId, 1);
+      } else {
+        store.formData.elements.splice(rowId, 1);
+      }
       const response = saveFormdataInSessionStorage(store.ctx.core.data, path)
       const data = path ? _.get(response, path) : response;
       store.setFormdata(data);
@@ -303,6 +314,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
         store.updateDialog("popUpComponentSection");
       }
       sessionStorage.removeItem('rowId');
+      sessionStorage.removeItem('isTabLabelElements');
     },
     deleteEvent: function (shouldUpdateDialog: boolean = true) {
       const path = store.searchParams?.get("path");
@@ -321,9 +333,17 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       if (!Array.isArray(store.formData.elements)) {
         store.formData.elements = []
       }
+      if (!Array.isArray(store.formData.tabLabelElements)) {
+        store.formData.tabLabelElements = []
+      }
       const path = store.searchParams?.get("path");
       saveFormdataInSessionStorage(store.ctx.core.data, path)
-      const finalPath = `${path}.elements[${store.formData.elements.length}]`
+      let finalPath = `${path}`;
+      if (dynamicData.path.startsWith("tabLabel")) {
+        finalPath = `${finalPath}.tabLabelElements[${store.formData.tabLabelElements.length}]`
+      } else {
+        finalPath = `${finalPath}.elements[${store.formData.elements.length}]`
+      }
       store.searchParams.set("path", finalPath)
       store.setSearchParams(store.searchParams)
       this.setPage()
@@ -355,6 +375,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     deletePopUpComponent: function () {
       const rowId = dynamicData.path.split(".")[1];
       sessionStorage.setItem('rowId', rowId);
+      sessionStorage.setItem('isTabLabelElements', dynamicData.path.startsWith("tabLabel") ? "true" : "false");
       store.updateDialog("popUpComponentSection");
     },
     deletePopUpEvent: function () {
@@ -401,9 +422,17 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       if (!Array.isArray(store.formData.events)) {
         store.formData.events = []
       }
+      if (!Array.isArray(store.formData.tabLabelElements)) {
+        store.formData.tabLabelElements = []
+      }
       saveFormdataInSessionStorage(store.ctx.core.data, pastedElementParentPath);
       const formData = getFormdataFromSessionStorage(pastedElementParentPath);
-      const insertElementIndex = elementType === "Component" ? formData.elements.length : formData.events.length;
+      const currentLength = {
+        "TabsComponent": formData.tabLabelElements.length,
+        "Component": formData.elements.length,
+        "Events": formData.events.length
+      };
+      const insertElementIndex = currentLength[elementType] || 0;
       const pastedElementPath = this.elementPathHandler(pastedElementParentPath, insertElementIndex, elementType);
 
       const copiedConfig = JSON.parse(sessionStorage.getItem("copiedConfig"));
@@ -440,6 +469,9 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     elementPathHandler: function (parentPath: string, rowId: any, elementType: string) {
       if (elementType === "Component") {
         return parentPath ? `${parentPath}.elements[${rowId}]` : `elements[${rowId}]`;
+      }
+        if(elementType === "TabsComponent"){
+        return `${parentPath}.tabLabelElements[${rowId}]` 
       }
       return parentPath ? `${parentPath}.events[${rowId}]` : `events[${rowId}]`;
     },

package/src/impaktapps-ui-builder/runtime/services/service.ts

@@ -101,6 +101,7 @@ export default (funcParams: funcParamsProps) => {
           }
         }
       )
+
       executeRefreshHandler({
         config: {}, componentName: "",
         store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
@@ -111,6 +112,24 @@ export default (funcParams: funcParamsProps) => {
         funcParams.store.setUiSchema(uiSchema);
       });
     },
+    getStyle: () => {
+      const cloneEventGroup = _.cloneDeep(eventGroups)
+      if (cloneEventGroup.setStyle) {
+        let finalResponse = {};
+        const path = funcParams.dynamicData?.tableButtonPath || funcParams?.dynamicData.path?.split(".").pop();
+        if (cloneEventGroup?.setStyle?.[path]) {
+          for (const eventConfig of cloneEventGroup?.setStyle?.[path]) {
+            finalResponse = executeEvents({
+              ...executeEventsParameters,
+              config: eventConfig,
+              componentName: path
+            })
+          }
+          return finalResponse
+        }
+      }
+      return {}
+    },
     onCellRenderer: (cellParams) => {
       const cloneEventGroup = _.cloneDeep(eventGroups)
       if (cloneEventGroup.onCellRenderer) {
@@ -139,6 +158,9 @@ export default (funcParams: funcParamsProps) => {
     onFileDelete: async function () {
       this.callHandler("onFileDelete")
     },
+    onClose: function () {
+      this.callHandler("onClose")
+    },
     onMount: function () {
       this.callHandler("onMount")
     },
@@ -168,11 +190,19 @@ export default (funcParams: funcParamsProps) => {
         { key: "sorting", value: paginationValues.sorting || [] },
         { key: "filters", value: paginationValues.tableColumnConfig || [] },
         { key: "globalFilter", value: paginationValues.globalFilter ?? '' },
-        { key: "expandedRowIds", value: paginationValues.expandedRowIds ?? [] }
+        { key: "parentIds", value: paginationValues.parentIds},
+        { key: "isExpandAll", value: paginationValues.isExpandAll},
       ]
       const response = await this.callExecuteEvents(paginationValues, apiBody, "onLoad");
       return response?.data;
     },
+    onNodeExpandChange: async function (param) {
+      const apiBody = [
+        { key: "expandedNodeId", value: param.expandedNodeId }
+      ]
+      const response = await this.callExecuteEvents(param, apiBody, "onNodeExpandChange");
+      return response?.data;
+    },
     getSelectOptions: async function (param) {
       if (param.serachValue !== "" && param.serachValue !== undefined) {
         const apiBody = [
@@ -190,8 +220,7 @@ export default (funcParams: funcParamsProps) => {
 
       const promises = ChangeEventsKeysArray.flatMap((componentName: string) => {
         if (
-          funcParams.store?.formData[componentName] === funcParams.store.newData[componentName] ||
-          funcParams.store?.newData[componentName] === undefined
+          funcParams.store?.formData[componentName] === funcParams.store.newData[componentName] 
         ) {
           return [];
         }