impaktapps-ui-builder 1.0.0 → 1.0.1

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

@@ -0,0 +1,123 @@
+import { PageMasterSchema } from "../elements/UiSchema/PageMaster/schema";
+import { PageMasterUiSchema } from "../elements/UiSchema/PageMaster/uiSchema";
+import _ from "lodash";
+import Component from "./component";
+import { getFormdataFromSessionStorage, saveFormdataInSessionStorage, saveHandler } from "./utils";
+
+
+interface funcParamsProps {
+  store: any,
+  dynamicData: any,
+  pageConfigProvider: any,
+  submitHandler: any,
+  service: any
+}
+export default (funcParams: funcParamsProps) => {
+  const { store, dynamicData, submitHandler, service } = funcParams
+  return {
+    setPage: async function () {
+      const formdata = await this.getFormdata();
+      store.setFormdata(formdata);
+      const uiSchema = await this.getUiSchema();
+      const schema = await this.getSchema();
+      store.setSchema(schema);
+      store.setUiSchema(uiSchema);
+    },
+    getFormdata: async function () {
+      const id = store.searchParams?.get("id");
+      const config: any = await funcParams.pageConfigProvider(id)
+      const formData = getFormdataFromSessionStorage()
+      if (formData) {
+        return formData;
+      }
+      saveFormdataInSessionStorage(config)
+      return config
+    },
+    getUiSchema: function () {
+      const UiSchema = _.cloneDeep(PageMasterUiSchema(store.theme.myTheme));
+      if (sessionStorage.getItem("copiedConfig") ) {
+        Component(store, dynamicData, submitHandler, service).ElementPathSetter(UiSchema)
+      }
+      return UiSchema;
+    },
+    getSchema: () => {
+      const schema = _.cloneDeep(PageMasterSchema);
+      if (sessionStorage.getItem("copiedConfig") ) {
+        schema.properties.RemoveItemButton.disabled = false;
+      }
+      return schema;
+    },
+    backHandler: () => {
+      sessionStorage.removeItem("pageFormdata")
+      store.navigate("/PageMasterRecords");
+    },
+    onAddClickHandler: function () {
+      const id = store.searchParams?.get("id");
+      if (!Array.isArray(store.formData.elements)) {
+        store.formData.elements = []
+      }
+      const response = saveFormdataInSessionStorage(store.ctx.core.data)
+      if (id) {
+        store.navigate(
+          `/Component?path=${`elements[${response?.elements.length}]`}&id=${id}`
+        );
+      } else {
+        store.navigate(
+          `/Component?path=${`elements[${response?.elements.length}]`}`
+        );
+      }
+
+    },
+    saveHandler: async () => await saveHandler(store, service, submitHandler),
+    Edit_Components: Component(store, dynamicData, submitHandler, service).editComponents,
+    
+    Delete_Components: async function() {
+      await Component(store, dynamicData, submitHandler, service).deleteComponents(false);
+      store.updateDialog("popUpPageMasterComponent");
+    },
+    eventAddHandler: function () {
+      const id = store.searchParams?.get("id");
+      if (!Array.isArray(store.formData.events)) {
+        store.formData.events = []
+      }
+      saveFormdataInSessionStorage(store.ctx.core.data)
+      const finalPath = `events[${store.formData.events.length}]`
+      store.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`)
+    },
+    editEvent: function () {
+      const rowId = dynamicData.path.split(".")[1];
+      const id = store.searchParams?.get("id");
+      saveFormdataInSessionStorage(store.ctx.core.data)
+      const finalPath = `events[${rowId}]`
+      store.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`)
+    },
+    deleteEvent: function () {
+      const rowId = sessionStorage.getItem('rowId');
+      store.formData.events.splice(rowId, 1);
+      const response = saveFormdataInSessionStorage(store.ctx.core.data)
+      store.setFormdata(response);
+      store.updateDialog("popUpPageMasterEvent");
+      sessionStorage.removeItem('rowId');
+    },
+    deletePopUpComponent: function(){
+      const rowId = dynamicData.path.split(".")[1];
+      sessionStorage.setItem('rowId',rowId);
+      store.updateDialog("popUpPageMasterComponent");
+    },
+    deletePopUpEvent: function(){
+      const rowId = dynamicData.path.split(".")[1];
+      sessionStorage.setItem('rowId',rowId);
+      store.updateDialog("popUpPageMasterEvent");
+    },
+
+
+    copyPasteElement:  function(){
+      Component(store, dynamicData, submitHandler, service).copyPasteElement(store,this.setPage.bind(this));
+    },
+    
+    RemoveItemButton: function(){
+      Component(store, dynamicData, submitHandler, service).RemoveItemButton(store)
+    },
+    
+  }
+};

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

@@ -0,0 +1,108 @@
+import buildConfig from "../build/buildConfig";
+import _ from "lodash";
+
+const clearFromSessionStorage = () => {
+    sessionStorage.removeItem("pageFormdata")
+}
+export default clearFromSessionStorage;
+export const getNavigationHistory = (config: any, path: string | undefined) => {
+    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)
+            if (data) {
+                urlRoutes = urlRoutes + ` >    ${data?.name || data?.eventType}`
+            } else {
+                urlRoutes = urlRoutes + " > NewComponent";
+            }
+
+        })
+        return { pageName: urlRoutes }
+    }
+    return undefined;
+}
+
+export const saveFormdataInSessionStorage = (formData: any, path?: string) => {
+    let updatedFormdata: any;
+    if (path) {
+        const pageFormdata = getFormdataFromSessionStorage()
+        updatedFormdata = _.set(pageFormdata, path, buildConfig(formData));
+    } else {
+        updatedFormdata = buildConfig(formData)
+    }
+    sessionStorage.setItem("pageFormdata", JSON.stringify(updatedFormdata))
+    return updatedFormdata;
+}
+
+export const getFormdataFromSessionStorage = (path?: string) => {
+    const pageFormdata = sessionStorage.getItem("pageFormdata") ? JSON.parse(sessionStorage.getItem("pageFormdata")) : undefined;
+    let returnValue: any;
+    if (path) {
+        returnValue = _.get(pageFormdata, path)
+        returnValue = { ...returnValue, ...getNavigationHistory(pageFormdata, path) }
+    }
+    if (!returnValue) {
+        returnValue = getNavigationHistory(pageFormdata, path)
+    }
+    return returnValue || pageFormdata;
+
+}
+
+export async function saveHandler(store, service, submitHandler) {
+    const id = store.searchParams?.get("id");
+    const path = store.searchParams?.get("path");
+    saveFormdataInSessionStorage(store.ctx.core.data, path);
+    const config = JSON.parse(sessionStorage.getItem("pageFormdata"));
+    if (_.isEmpty(store.ctx.core.errors)) {
+        try {
+            const saveReturn = await submitHandler(store, service, config);
+            navigateHandler(store, true,"/PageMasterRecords")
+        } catch (err) {
+            navigateHandler(store, false)
+        }
+    }
+}
+
+export const navigateHandler = (store, isSubmitted, pageName?: string | boolean) => {
+    if (isSubmitted) {
+        sessionStorage.removeItem("pageFormdata");
+        store.navigate(pageName || -1)
+        store.setNotify({
+            SuccessMessage: "Submit Successfully",
+            Success: true,
+        });
+    } else {
+        store.setValidation("ValidateAndShow");
+        store.setNotify({
+            Fail: true,
+            FailMessage: "Errors on Page"
+        });
+    }
+};
+
+export function okHandler(store) {
+    const path = store.searchParams?.get("path");
+    if (_.isEmpty(store.ctx.core.errors)) {
+        saveFormdataInSessionStorage(store.ctx.core.data, path)
+        store.navigate(-1)
+        store.setNotify({
+            SuccessMessage: "Save Successfully",
+            Success: true,
+        });
+    } else {
+        store.setValidation("ValidateAndShow");
+        store.setNotify({
+            Fail: true,
+            FailMessage: "Errors on Page"
+        })
+    }
+}

package/src/impaktapps-ui-builder/lib/index.ts

@@ -0,0 +1,10 @@
+
+export {default as pageMaster} from "../builder/services/pageMaster"
+export {default as pageMasterEvents} from "../builder/services/event"
+export {default as pageMasterComponents} from "../builder/services/component"
+export {default as pageService} from "../runtime/services/service"
+export { schema} from "../builder/build/buildUiSchema"
+export {default as buildConfig} from "../builder/build/buildConfig"
+export  {default as buildUiSchema} from "../builder/build/buildUiSchema"
+export  {buildSchema} from "../builder/build/buildUiSchema"
+export {default as clearFromSessionStorage} from "../builder/services/utils"

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

@@ -0,0 +1,32 @@
+export const downloadFile = (obj: any) => {
+    const typeArr = obj.name.split(".");
+    const data = obj.data;
+    const finalData = window.atob(data);
+    let file;
+    file = new File([finalData], typeArr[typeArr.length - 1]);
+
+    const url = URL.createObjectURL(file);
+    const link = document.createElement("a");
+    link.href = typeArr[typeArr.length - 1] === 'pdf' ? 'data:application/octet-stream;base64,' + data : url;
+    link.download = `${obj.name}`;
+    document.body.appendChild(link);
+    link.click();
+
+    URL.revokeObjectURL(url);
+    document.body.removeChild(link);
+};
+
+export const doDownload = (response: any, service) => {
+    let url = `${service.defaults.baseURL}/${response.path}`;
+    if (response?.params) {
+        const keysArray = Object.keys(response?.params);
+        keysArray.map((e, i) => {
+            url = url + `${i === 0?"?":"&"}${e}=${response?.params[e]}`
+        })
+    }
+    const link = document.createElement('a');
+    link.href = url;
+    document.body.appendChild(link);
+    link.click();
+    link.parentNode.removeChild(link);
+};

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

@@ -0,0 +1,295 @@
+import _ from "lodash";
+import { handlersProps } from "./interface";
+export const executeEvents = (params: handlersProps) => {
+  let nextEvent = [];
+  let finalResponse = null;
+
+  if (params.config.isSync !== "Yes") {
+    return shouldEventExecute(params)
+      .then((shouldExecute) => {
+        if (!shouldExecute) {
+          throw new Error('onStart Event not allow to run Parent Events');
+        }
+        return executeEventsHandler(params);
+      })
+      .then((response) => {
+        finalResponse = response;
+        const SuccessEvent = params.config?.events.filter(e => e.eventType === "Success");
+        nextEvent = SuccessEvent;
+      })
+      .catch((err) => {
+        const FailEvent = params.config?.events?.filter(e => e.eventType === "Fail");
+        const setEvent = FailEvent?.length > 0 ? FailEvent : [];
+        nextEvent = setEvent;
+      })
+      .then(() => {
+        if (nextEvent?.length > 0) {
+          return nextEvent.reduce((chain, actionConfig) => {
+            return chain.then(() => executeEvents({ ...params, config: actionConfig, parentEventOutput: finalResponse }));
+          }, Promise.resolve());
+        }
+      })
+      .then(() => finalResponse)
+  }
+  const shouldExecute = shouldEventExecute(params);
+  if (!shouldExecute) {
+    return { response: undefined, events: undefined };
+  }
+  try {
+    const eventsResponse = executeEventsHandler(params);
+    finalResponse = eventsResponse;
+    const SuccessEvent = params.config?.events.filter(e => e.eventType === "Success");
+    nextEvent = SuccessEvent;
+  } catch {
+    const FailEvent = params.config?.events?.filter(e => e.eventType === "Fail");
+    const setEvent = FailEvent?.length > 0 ? FailEvent : [];
+    nextEvent = setEvent;
+  }
+  if (nextEvent?.length > 0) {
+    for (const actionConfig of nextEvent) {
+      executeEvents({ ...params, config: actionConfig, parentEventOutput: finalResponse })
+    }
+  }
+  return finalResponse;
+}
+
+function executeEventsHandler(params: handlersProps) {
+  if (params.config.Handler === "api") {
+    return executeApiRequest(params);
+  } else if (params.config.Handler === "inBuiltFunction") {
+    return executeInBuiltFunctionHandler(params);
+  } else if (params.config.Handler === "custom") {
+    return executeCustomHandler(params);
+  } else if (params.config.Handler === "refresh") {
+    return executeRefreshHandler(params);
+  } else if (params.config.Handler === "mergeFormdata") {
+    return mergeFormdata(
+      params.parentEventOutput,
+      params.componentName,
+      params.config,
+      params.store,
+      params.service,
+      params.formDataHolder
+    );
+  } else if (params.config.Handler === "onBackHandler") {
+    return params.store.functionParameters?.handleBack();
+  } else if (params.config.Handler === "onNextHandler") {
+    return params.store.functionParameters?.handleNext();
+  } else if (params.config.Handler === "onResetHandler") {
+    return params.store.functionParameters?.handleReset();
+  }
+}
+
+export function getRefreshElements(eventConfig: any, eventGropus: any) {
+  let result: string[] = [];
+  if (eventConfig?.refreshElements?.length > 0) {
+    result = eventConfig.refreshElements.map((e) => {
+      return e.value
+    })
+
+  } else {
+    if (eventGropus?.onLoad) {
+      result = Object.keys(eventGropus?.onLoad)
+    }
+  }
+  return result;
+}
+export async function executeRefreshHandler(params: handlersProps) {
+  const compToRefresh: string[] = getRefreshElements(params.config, params.eventGroups);
+  return Promise.allSettled(compToRefresh.map(componentName => {
+    const eventConfigs = params.eventGroups.onLoad[componentName];
+    if (!eventConfigs) {
+      return Promise.resolve();
+    }
+    return Promise.allSettled(eventConfigs.map(compEventConfig => {
+      return executeEvents({ ...params, config: compEventConfig, componentName });
+    }));
+  }));
+}
+export function executeApiRequest(params: any) {
+  const initialBody = { ...params.userValue?.payload };
+  const initialHeaders = {
+    "X-Requested-With": "XMLHttpRequest",
+    "Access-Control-Allow-Origin": "*"
+  };
+
+  const payloadApi = buildApiPayload(params.config, initialBody, initialHeaders, params.store, params.dynamicData, params.userValue, params.service)
+  return params.service[params.config.method](
+    params.config.path,
+    payloadApi.body,
+    { headers: payloadApi.headers }
+  ).then((response) => {
+    return response;
+  });
+};
+
+function executeInBuiltFunctionHandler(params: handlersProps) {
+  let parameter = {};
+  if (params.config.funcParametersCode) {
+    const makeFunc = eval(params.config.funcParametersCode)
+    parameter = makeFunc(params.store, params.dynamicData, params.userValue, params.parentEventOutput, params.service);
+    params.serviceHolder[params.config.inBuiltFunctionType](parameter, params.service)
+  } else {
+    params.serviceHolder[params.config.inBuiltFunctionType](params.store, params.dynamicData, params.userValue, params.parentEventOutput, params.service)
+  }
+}
+
+function executeCustomHandler(params: handlersProps) {
+  const makeFunc = eval(params.config.eventCode)
+  if (params.config.isSync !== "Yes") {
+    return makeFunc(params.store, params.dynamicData, params.userValue, params.parentEventOutput, params.service, params.componentName).then((res) => res)
+  } else {
+    const response = makeFunc(params.store, params.dynamicData, params.userValue, params.parentEventOutput, params.service, params.componentName)
+    return response;
+  }
+
+}
+
+function mergeFormdata(handlerResponse: any, componentName: string, eventConfig: any, store: any, service: any, formDataHolder: any) {
+  if (eventConfig.type === "Select" && handlerResponse?.data) {
+    if (!_.isEmpty(handlerResponse?.data)) {
+      store.setSchema((pre) => {
+        return {
+          ...pre, properties: {
+            ...pre.properties, [componentName]: {
+              ...pre.properties?.[componentName],
+              oneOf: handlerResponse.data
+            }
+          }
+        }
+      })
+    }
+  }
+  else if (eventConfig.type === "MultipleSelect" && handlerResponse?.data) {
+    if (!_.isEmpty(handlerResponse?.data)) {
+      store.setSchema((pre) => {
+        return {
+          ...pre, properties: {
+            ...pre.properties, [componentName]: {
+              ...pre.properties?.[componentName],
+              type: "array",
+              items: {
+                oneOf: handlerResponse?.data
+              }
+            }
+          }
+        }
+      })
+    }
+  }
+  else if (eventConfig.type === "page") {
+    if (!(_.isEmpty(handlerResponse?.data) && handlerResponse?.data)) {
+      store.newData = {
+        ...store.newData,
+        ...handlerResponse?.data
+      }
+      store.setFormdata((pre: any) => { return { ...pre, ...handlerResponse?.data } })
+    }
+  }
+  else if (eventConfig.type === "Table" && eventConfig.lazyLoading) {
+    if (handlerResponse && handlerResponse?.data) {
+      formDataHolder[componentName] = handlerResponse.data?.data
+      formDataHolder[`${componentName}_RowCount`] = handlerResponse.data?.meta?.totalRowCount
+      store.setFormdata((pre) => { return { ...pre, ...formDataHolder } });
+    }
+  }
+  else {
+    if (handlerResponse) {
+      formDataHolder[componentName] = handlerResponse.data
+      store.setFormdata((pre) => { return { ...pre, ...formDataHolder } });
+    }
+  }
+}
+
+const buildBodyFormat = (body: any[], formData: any, userValue: any, store: any) => {
+  let finalBody = { ...userValue?.payload };
+  body.map((elem) => {
+    if (typeof elem?.value !== "string") {
+      finalBody[elem.key] = elem.value;
+    } else {
+      if (elem?.value?.startsWith("$userValue")) {
+        const finalpath = elem.value.substring(11);
+        finalBody[elem.key] = _.get(userValue, finalpath);;
+      } else if (elem?.value?.startsWith("$urlParams")) {
+        const finalpath = elem.value.substring(11);
+        const value = store?.searchParams?.get(finalpath);
+        finalBody[elem.key] = value;
+      }
+      else if (elem?.value?.startsWith("$local")) {
+        const finalpath = elem.value.substring(7);
+        const value = JSON.parse(sessionStorage.getItem(finalpath) || '""')
+        finalBody[elem.key] = value;
+      }
+      else if (elem?.value?.startsWith("$")) {
+        const finalpath = elem.value.substring(1);
+        finalBody[elem.key] = _.get(formData, finalpath);;
+      } else if (elem?.value === "*" && elem?.key === "*") {
+        finalBody = { ...finalBody, ...formData };
+      } else if (elem?.value === "*") {
+        finalBody[elem.key] = formData;
+      }
+      else {
+        finalBody[elem.key] = elem.value;
+      }
+    }
+  })
+  return finalBody;
+}
+
+const buildHeadersFormat = (headers: any[]) => {
+  const headerObj = {
+    // "Content-Type": "application/json",
+    "X-Requested-With": "XMLHttpRequest"
+  }
+  headers.map((elem) => {
+    headerObj[elem.key] = elem.value;
+  })
+  return headerObj;
+}
+
+export function shouldEventExecute(params: handlersProps) {
+  const startEvent = params.config?.events?.filter(e => e.eventType === "onStart");
+
+  if (startEvent?.length > 0) {
+    if (startEvent[0]?.isSync !== "Yes") {
+      return executeEventsHandler({ ...params, config: startEvent[0] }).then((response) => {
+        return response;
+      });
+    } else {
+      return executeEventsHandler({ ...params, config: startEvent[0] })
+    }
+  } else {
+    if (params.config.isSync !== "Yes") {
+      return Promise.resolve(true)
+    } else {
+      return true
+    }
+  }
+}
+
+
+export function buildApiPayload(compConfig: any, body: any, headers: any, store: any, dynamicData: any, userValue: any, service) {
+  if (compConfig?.headers) {
+    headers = buildHeadersFormat(compConfig.headers);
+  }
+  if (compConfig.body) {
+    body = { ...buildBodyFormat(compConfig.body, store.newData || store?.ctx?.core?.data || store.formData, userValue, store) };
+  }
+  const promiseChain = { body, headers };
+  if (compConfig.apiBody) {
+    const makeFunc = eval(compConfig.apiBody);
+    return { body: makeFunc(store, dynamicData, userValue, promiseChain.body), headers: promiseChain.headers };
+  }
+  return promiseChain;
+}
+export function asyncOperation() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      const success = true;
+      if (success) {
+        resolve("Operation completed successfully!");
+        reject(new Error("Operation failed!"));
+      }
+    }, 50);
+  });
+}

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

@@ -0,0 +1,13 @@
+export interface handlersProps {
+    config: any, 
+    componentName: string,
+    store: any,
+     dynamicData: any,
+      userValue: any,
+    service: any, 
+    serviceHolder: any, 
+    eventGroups?: any, 
+    parentEventOutput?: any,
+    functionsProvider?:Record<string,any>
+    formDataHolder?:Record<string,any>
+}