impaktapps-ui-builder 1.0.482 → 1.0.484

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

@@ -1,4 +1,4 @@
-export declare const TableSection: (theme: any) => {
+export declare const TableSection: (theme: any, scopeName?: string) => {
     type: string;
     elements: {
         type: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "1.0.482",
+    "version": "1.0.484",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

package/src/impaktapps-ui-builder/builder/build/buildAreaGraph.ts

@@ -37,6 +37,9 @@ const buildAreaGraph = (config:any,componentScope:string) => {
     if(config.yAxisTickCount){
       AreaGraph.config.main.yAxisTickCount = config.yAxisTickCount
     }
+    if(config.xAxisTickCount){
+      AreaGraph.config.main.xAxisTickCount = config.xAxisTickCount
+    }
     if (config.xAxisValue) {
       AreaGraph.config.main.xAxisValue = config.xAxisValue;
     }

package/src/impaktapps-ui-builder/builder/build/buildConfig.ts

@@ -22,27 +22,31 @@ export default (FormData: any) => {
   if (formData.events) {
     delete formData.events
   }
+  if (formData.tabLabelElements) {
+    component.tabLabelElements = formData.tabLabelElements || [];
+    delete formData.tabLabelElements
+  }
   component = { ...formData, ...component };
   return component;
 };
 
 export const createLayoutFormat = (layout: any[], type?: string) => {
   if (_.isEmpty(layout)) {
-    const fullLayoutComponents: string[] = ["WrapperSection", "DataGrid", "LeaderBoard", "PopUp", "TextArea", "TreeMap", "Thought", "HorizontalLayout","Table"]
-    if(fullLayoutComponents.includes(type)){
+    const fullLayoutComponents: string[] = ["WrapperSection", "DataGrid", "LeaderBoard", "PopUp", "TextArea", "TreeMap", "Thought", "HorizontalLayout", "Table"]
+    if (fullLayoutComponents.includes(type)) {
       return { xs: 12, sm: 12, md: 12, lg: 12 }
     }
-    else if(type === "Graph"){
-      return {xs :12,sm:12,md:12,lg:6}
+    else if (type === "Graph") {
+      return { xs: 12, sm: 12, md: 12, lg: 6 }
     }
-    else if(type === "Button"){
+    else if (type === "Button") {
       return { xs: 4, sm: 2.5, md: 2, lg: 1.5 }
     }
-    else{
+    else {
       return { xs: 6, sm: 6, md: 4, lg: 3 }
     }
   }
-  let data: any = {  };
+  let data: any = {};
 
   layout.map((e: any) => {
     data[e.key || "xs"] =

package/src/impaktapps-ui-builder/builder/build/buildStackBarLineGraph.ts

@@ -34,6 +34,9 @@ const buildStackBarLineGraph = (config:any,componentScope:string) => {
     if(config.yAxisTickCount){
       StackBarLineGraph.config.main.yAxisTickCount = config.yAxisTickCount
     }
+    if(config.xAxisTickCount){
+      StackBarLineGraph.config.main.xAxisTickCount = config.xAxisTickCount
+    }
     if (config.xAxisValue) {
       StackBarLineGraph.config.main.xAxisValue = config.xAxisValue;
     }

package/src/impaktapps-ui-builder/builder/build/buildUiSchema.ts

@@ -295,7 +295,6 @@ const buildUiSchema = (config: any, store?: any) => {
     case "PdfViewer":
       elements = buildPdfViewer(config, componentScope);
       break;
-    break;
     default:
       schema = {
         type: "object",
@@ -404,6 +403,11 @@ const buildUiSchema = (config: any, store?: any) => {
       });
     }
   }
+  if (config.tabLabelElements) {
+    elements.tabLabelElements = config.tabLabelElements.map((e: any, elemInd: number) => {
+      return buildUiSchema(e, store)
+    });
+  }
   return elements;
 }
 

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

@@ -519,7 +519,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Negative", value: "negative" }
         ]),
         getInputField("color", "Card Color"),
-        emptyBox("MetricEmpty1", { xs: 6, sm: 0, md: 8, lg: 6 }),
+        emptyBox("MetricEmpty1", { xs: 6, sm: 6, md: 4, lg: 3 }),
       ];
       break;
     case "Button":
@@ -581,13 +581,13 @@ export const buildPropertiesSection = function (type: String) {
         getRadioInputField("bottomAxisAngle", "Bottom Axis Angled", ["YES", "No"]),
         getInputField("leftMargin", "Left Margin"),
         getInputField("yAxisTickCount", "Y Axis TickCount"),
+        getInputField("xAxisTickCount", "X Axis TickCount"),
         getSelectField("xAxisFormatType", "X Axis Format Type", [
           { label: "Date and Month", value: "Date and Month" },
           { label: "Month and Year", value: "Month and Year" }
         ]),
         getInputField("growthRateKey", "Growth Rate Key"),
         getInputField("tooltipUnit", "Tooltip Unit"),
-        emptyBox("GraphEmpty1",  { xs: 6, sm: 6, md: 4, lg: 3 }),
         getArrayControlMultiField("legendLabels", "key", "value", "Key", "Label", "Configure Bar Labels"),
         getArrayControlMultiField("pieArcColors", "key", "value", "Key", "Color", "Configure Bar Colors"),
       ];
@@ -689,7 +689,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Right", value: "right" },
           { label: "Bottom", value: "bottom" }
         ]),
-        getRadioInputField("grouping", "grouping", ["YES", "NO"]),
+        getRadioInputField("grouping", "Grouping", ["YES", "NO"]),
         emptyBox("SelectEmpty", { xs: 0, sm: 0, md: 4, lg: 6  })
       ]
       break;
@@ -708,7 +708,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Right", value: "right" },
           { label: "Bottom", value: "bottom" }
         ]),
-        getRadioInputField("grouping", "grouping", ["YES", "NO"]),
+        getRadioInputField("grouping", "Grouping", ["YES", "NO"]),
         emptyBox("MultipleSelectEmpty", { xs: 6, sm: 6, md: 8, lg: 9 })
       ]
       break;

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

@@ -49,7 +49,7 @@ export const ComponentSchema: any = {
         { title: "Upload", const: "UploadFile" },
         { title: "Tree ", const: "TreeMap" },
         { title: "Thought of the day", const: "Thought" },
-        { title: "PDF", const: "PdfViewer"}
+        { title: "PDF", const: "PdfViewer" }
       ],
     },
     elementType: {
@@ -103,35 +103,35 @@ export const ComponentSchema: any = {
         { title: "Standard", const: "standard" },
       ],
     },
-    positionVertical:{
+    positionVertical: {
       oneOf: [
         { title: "Top", const: "top" },
         { title: "Center", const: "center" },
         { 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" },
@@ -495,6 +495,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/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"],
@@ -39,7 +39,7 @@ const sectionLabels = {
   TextArea: ["Core", "Properties", "Events", "Style", "Validation"],
   PopUp: ["Core", "Components", "Properties", "Events", "Style"],
   PopOver: ["Core", "Components", "Properties", "Style"],
-  PdfViewer: ["Core","Properties", "Style"],
+  PdfViewer: ["Core", "Properties", "Style"],
   Stepper: ["Core", "Components", "Properties", "Events", "Style"],
   DataGrid: ["Core", "Components", "Properties", "Events", "Style"],
   InputSlider: ["Core", "Properties", "Events", "Style", "Validation"],
@@ -63,6 +63,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
     }
@@ -74,7 +75,7 @@ export function refreshPage(type: string, store: any) {
   // Get Widget Type of parent
   const path = store.searchParams?.get("path");
   const lastDotIndex = path.lastIndexOf('.')
-  const parentPath = path.slice(0,lastDotIndex)
+  const parentPath = path.slice(0, lastDotIndex)
 
   const parentObj = _.get(currentConfig, parentPath)
 
@@ -234,7 +235,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       if (sessionStorage.getItem("copiedConfig")) {
         schema.properties.RemoveItemButton.disabled = false;
       }
-      
+
       const config = JSON.parse(sessionStorage.getItem("pageFormdata"));
       const path = store.searchParams?.get("path");
       const id = store.searchParams?.get("id")
@@ -283,8 +284,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 +300,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 +313,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 +332,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 +374,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 +421,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 +468,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}]`;
     },