impaktapps-ui-builder 0.0.101-alpha.6 → 0.0.101-alpha.60

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

@@ -10,54 +10,123 @@ import { ValueTab } from "../build/uischema/valueTab";
 import { ValidationSection } from "../build/uischema/validationSections";
 import { getFormdataFromSessionStorage, okHandler, saveFormdataInSessionStorage, saveHandler } from "./utils";
 const sectionLabels = {
-  Select: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
-  MultipleSelect: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
-  Table: ["Core", "Components", "Properties", "Event", "Style", "Validation"],
-  LeaderBoard: ["Core", "Components", "Properties", "Event", "Style", "Validation"],
+  Select: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
+  MultipleSelect: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
+  Table: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
+  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
   WrapperSection: ["Core", "Components", "Properties", "Style", "Validation"],
   TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
-  SpeedoMeter: ["Core", "Properties", "Event", "Style", "Validation"],
-  card: ["Core", "Properties", "Event", "Style", "Validation"],
-  UploadFile: ["Core", "Event", "Style", "Validation"],
-  Graph: ["Core", "Properties", "Event", "Style", "Validation"],
-  DownloadFile: ["Core", "Event", "Style", "Validation"],
-  Box: ["Core", "Event", "Style", "Validation"],
-  Properties: ["Core", "Properties", "Event", "Style", "Validation"],
-  ProgressBarCard: ["Core", "Properties", "Event", "Style", "Validation"],
-  RankCard: ["Core", "Properties", "Event", "Style", "Validation"],
-  Slider: ["Core", "Components", "Event", "Style", "Validation"],
-  Timer: ["Core", "Event", "Style", "Validation"],
-  Rank: ["Core", "Event", "Style", "Validation"],
-  Button: ["Core", "Properties", "Event", "Style", "Validation"],
+  SpeedoMeter: ["Core", "Properties", "Events", "Style", "Validation"],
+  card: ["Core", "Properties", "Events", "Style", "Validation"],
+  UploadFile: ["Core", "Events", "Style", "Validation"],
+  Graph: ["Core", "Properties", "Events", "Style", "Validation"],
+  DownloadFile: ["Core", "Events", "Style", "Validation"],
+  Box: ["Core", "Events", "Style", "Validation"],
+  Properties: ["Core", "Properties", "Events", "Style", "Validation"],
+  ProgressBarCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  RankCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  Slider: ["Core", "Components", "Events", "Style", "Validation"],
+  Timer: ["Core", "Events", "Style", "Validation"],
+  Rank: ["Core", "Events", "Style", "Validation"],
+  Button: ["Core", "Properties", "Events", "Style", "Validation"],
   Array: ["Core", "Components", "Validation"],
-  Radio: ["Core", "Properties", "Event", "Style", "Validation"],
-  Text: ["Core", "Properties", "Event", "Style", "Validation"],
-  TextArea: ["Core", "Properties", "Event", "Style", "Validation"],
+  Radio: ["Core", "Properties", "Events", "Style", "Validation"],
+  Text: ["Core", "Properties", "Events", "Style", "Validation"],
+  TextArea: ["Core", "Properties", "Events", "Style", "Validation"],
   PopUp: ["Core", "Components", "Properties", "Style"],
-  Stepper: ["Core", "Components", "Properties", "Event", "Style"],
-  DataGrid: ["Core", "Components", "Properties", "Event", "Style"],
-  InputSlider: ["Core", "Properties", "Event", "Style", "Validation"],
-  TreeMap: ["Core", "Components", "Properties", "Event", "Style"],
+  Stepper: ["Core", "Components", "Properties", "Events", "Style"],
+  DataGrid: ["Core", "Components", "Properties", "Events", "Style"],
+  InputSlider: ["Core", "Properties", "Events", "Style", "Validation"],
+  TreeMap: ["Core", "Components", "Properties", "Events", "Style"],
   ColumnGroup: ["Core", "Components"],
-  Thought: ["Core", "Properties", "Event", "Style", "Validation"]
+  Thought: ["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"));
   if (type) {
     const sectionUiSchema = {
       Core: CoreSection,
       Value: ValueTab,
       Style: StyleSection,
-      Event: EventSection(store.theme.myTheme),
+      Events: EventSection(store.theme.myTheme),
       Components: TableSection(store.theme.myTheme),
       Properties: buildPropertiesSection(type),
       Validation: ValidationSection
     }
     const elements = sectionLabels[type]?.map(e => sectionUiSchema[e]);
-    UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "Style", "Event", "Validation"];
-    UiSchema.elements[1].elements = elements || [CoreSection, StyleSection, EventSection(store.theme.myTheme), ValidationSection];
+    UiSchema.elements[0].config.main.tabLabels = sectionLabels[type] || ["Core", "Style", "Events", "Validation"];
+    UiSchema.elements[0].elements = elements || [CoreSection, StyleSection, EventSection(store.theme.myTheme), ValidationSection];
   }
+
+  // Get Widget Type of parent
+  const path = store.searchParams?.get("path");
+  const lastDotIndex = path.lastIndexOf('.')
+  const parentPath = path.slice(0,lastDotIndex)
+
+  const parentObj = _.get(currentConfig, parentPath)
+
+  if(parentObj?.type === "Table"){
+    UiSchema.elements[0].elements[0].elements[4] = 
+    {
+      type: "Control",
+      scope: "#/properties/columnFormat",
+      options: {
+        widget: "SelectInputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Column Format",
+
+        },
+      },
+    };
+    UiSchema.elements[0].elements[0].elements[5] = 
+    {
+      type: "Control",
+      scope: "#/properties/filteringOptions",
+      options: {
+        widget: "SelectInputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Filter Mode",
+          multiple: true
+        },
+      },
+    };
+    UiSchema.elements[0].elements[0].elements[6] = 
+    {
+      type: "Control",
+      scope: "#/properties/enableFilter",
+      options: {
+        widget: "RadioInputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Enable Filter",
+          options: ["Yes", "No"],
+          errorMessage: "Active is not marked YES or NO",
+        },
+      },
+    },
+    UiSchema.elements[0].elements[0].elements[7] = 
+    {
+      type: "Control",
+      scope: "#/properties/proc",
+      config: {
+        layout: { xs: 0, sm: 0, md: 0, lg: 6 },
+      },
+      options: {
+        widget: "EmptyBox",
+      },
+    };
+  }
+
   if (sessionStorage.getItem("copiedConfig") ) {
     this.ElementPathSetter(UiSchema);
   }
@@ -84,6 +153,38 @@ 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")
+
+      let pathArray = [];
+
+      if (path) {
+              // let urlRoutes: string = config.name;
+              const pathArrayAll = path.split(".");
+              const arr: any = []
+              pathArrayAll.map((e: string, i: number) => {
+                  if (i === 0) {
+                      arr.push(e)
+                      return;
+                  }
+                  arr.push(`${arr[i - 1]}.${e}`)
+              })
+
+
+              arr.map((e) => {
+                  const data = _.get(config, e)
+                  pathArray.push({
+                    label: data?.name || data?.eventType || "NewComponent",
+                    path: `/Component?path=${e}&id=${id}`
+                  });
+              })
+          }
+
+          console.log("pathArray>>",pathArray)
+
+      schema.properties.pageName.path = pathArray
       return schema;
     },
     okHandler: () => okHandler(store),
@@ -219,16 +320,16 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
 
       const copiedConfig = JSON.parse(sessionStorage.getItem("copiedConfig"));
       const notificationMessages = {
-        Event: " The event cannot be integrated into the component section.",
-        Component: "The component cannot be integrated into the event section."
+        Events: " The Events cannot be integrated into the component section.",
+        Component: "The component cannot be integrated into the Events section."
       };
       if(copiedConfig.Handler && elementType === "Component"){
         store.setNotify({
-          FailMessage: notificationMessages.Event,
+          FailMessage: notificationMessages.Events,
           Fail: true,
         });
       }
-      else if(copiedConfig.name && elementType === "Event"){
+      else if(copiedConfig.name && elementType === "Events"){
         store.setNotify({
           FailMessage: notificationMessages.Component,
           Fail: true,
@@ -256,7 +357,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     },
     ElementPathSetter: function(uiSchema: any,copiedFormData?: any){
       const formData = copiedFormData || JSON.parse(sessionStorage.getItem("copiedConfig"));
-      uiSchema.elements[2].elements[1].config.main.heading  = `Copied Path: ${formData.pageName}`;
+      // uiSchema.elements[2].elements[1].config.main.heading  = `Copied Path: ${formData.pageName}`;
     }
   }
 };

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

@@ -3,10 +3,9 @@ import { EventUiSchema } from "../elements/UiSchema/event/uiSchema";
 import Component from "./component";
 import { okHandler, saveFormdataInSessionStorage, saveHandler, getFormdataFromSessionStorage } from "./utils";
 import { APISection } from "../build/uischema/apiSection";
-import { getRadioInputField, getSelectField, getTextArea } from "../build/uischema/buildPropertiesSection";
+import { emptyBox, getRadioInputField, getSelectField, getTextArea } from "../build/uischema/buildPropertiesSection";
 import { refreshSectionUiSchema } from "../build/uischema/refresh";
 import _ from "lodash";
-import emptyBox from "../build/uischema/emptyBox";
 
 export default (
   store: any,
@@ -28,8 +27,8 @@ export default (
       const schema: any = _.cloneDeep(EventSchema)
       if (handlerType) {
         if (handlerType === "custom") {
-          uiSchema.elements[1].elements[0].elements[2] =  getRadioInputField("isSync","Run in Sync",["Yes","No"])
-          uiSchema.elements[1].elements[0].elements[3] = {
+          uiSchema.elements[0].elements[0].elements[2] =  getRadioInputField("isSync","Run in Sync",["Yes","No"])
+          uiSchema.elements[0].elements[0].elements[3] = {
             type: "Control",
             scope: "#/properties/emptyBox",
             options: {
@@ -37,26 +36,26 @@ export default (
             },
           
             config: {
-              layout: { xs: 0, sm: 6, md: 0, lg: 0 },
+              layout: { xs: 6, sm: 6, md: 0, lg: 3 },
               main: {},
               style:{}
             },
           };
-          uiSchema.elements[1].elements[0].elements[4] = getTextArea("eventCode", "Write Custom Code", false)
+          uiSchema.elements[0].elements[0].elements[4] = getTextArea("eventCode", "Write Custom Code", false)
           schema.required = ["eventType", "Handler", "eventCode"]
 
         } else if (handlerType === "api") {
-          uiSchema.elements[1].elements[0].elements[2] = emptyBox;
-          uiSchema.elements[1].elements[0].elements[3] = APISection;
+          uiSchema.elements[0].elements[0].elements[2] = emptyBox("emptyBox", {xs: 0,sm: 0,md: 4,lg: 6});
+          uiSchema.elements[0].elements[0].elements[3] = APISection;
           schema.required = ["eventType", "Handler", "method", "path"]
         } else if (handlerType === "inBuiltFunction") {
           
-          uiSchema.elements[1].elements[0].elements[2] = getSelectField("inBuiltFunctionType", "Function Name", [
+          uiSchema.elements[0].elements[0].elements[2] = getSelectField("inBuiltFunctionType", "Function Name", [
             { label: "RankProvider", value: "RankProvider" },
             { label: "Download File", value: "downloadFile" },
             { label: "Download Blob File", value: "downloadBlobFile" }
           ])
-          uiSchema.elements[1].elements[0].elements[3] = {
+          uiSchema.elements[0].elements[0].elements[3] = {
             type: "Control",
             scope: "#/properties/emptyBox",
             options: {
@@ -64,16 +63,16 @@ export default (
             },
           
             config: {
-              layout: { xs: 6, sm: 6, md: 0, lg: 0 },
+              layout: { xs: 6, sm: 6, md: 0, lg: 3 },
               main: {},
               style:{}
             },
           };
-          uiSchema.elements[1].elements[0].elements[4] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true);
+          uiSchema.elements[0].elements[0].elements[4] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true);
           schema.required = ["eventType", "Handler", "inBuiltFunctionType"]
         } else if (handlerType === "refresh") {
-          uiSchema.elements[1].elements[0].elements[2] = emptyBox;
-          uiSchema.elements[1].elements[0].elements[3] = refreshSectionUiSchema;
+          uiSchema.elements[0].elements[0].elements[2] = emptyBox("emptyBox", {xs: 0,sm: 0,md: 4,lg: 6});
+          uiSchema.elements[0].elements[0].elements[3] = refreshSectionUiSchema;
           schema.properties.refreshElements.required = ["value"]
           schema.properties.refreshElements.items.required = ["value"]
           schema.required = ["eventType", "Handler", "refreshElements"]