impaktapps-ui-builder 1.0.174 → 1.0.181-test

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

@@ -12,43 +12,47 @@ import { getFormdataFromSessionStorage, validateAndShowErrors, okHandler, saveFo
 const sectionLabels = {
   Select: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
   MultipleSelect: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
-  Table: ["Core", "Components", "Properties", "Events", "Style", ],
-  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style", ],
-  WrapperSection: ["Core", "Components", "Properties", "Style", ],
-  HorizontalLayout: ["Core", "Components", "Properties", "Style", ],
-  TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
+  Table: ["Core", "Components", "Properties", "Events", "Style",],
+  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style",],
+  WrapperSection: ["Core", "Components", "Properties", "Style",],
+  HorizontalLayout: ["Core", "Components", "Properties", "Style",],
+  TabSection: ["Core", "Components", "TabTitles", "Properties", "Style", "Validation"],
   SpeedoMeter: ["Core", "Properties", "Events", "Style",],
   card: ["Core", "Properties", "Events", "Style", "Validation"],
   UploadFile: ["Core", "Events", "Style", "Validation"],
   Graph: ["Core", "Properties", "Events", "Style", "Validation"],
   DownloadFile: ["Core", "Events", "Style", "Validation"],
-  Box: ["Core", "Properties" , "Events", "Style", "Validation"],
+  Box: ["Core", "Properties", "Events", "Style", "Validation"],
   Properties: ["Core", "Properties", "Events", "Style", "Validation"],
   ProgressBarCard: ["Core", "Properties", "Events", "Style"],
-  ProgressBar:["Core", "Properties", "Events", "Style", ],
-  RankCard: ["Core", "Properties", "Events", "Style", ],
+  ProgressBar: ["Core", "Properties", "Events", "Style",],
+  RankCard: ["Core", "Properties", "Events", "Style",],
+  MetricCard: ["Core", "Properties", "Events", "Style", "Validation"],
   Slider: ["Core", "Components", "Events", "Style", "Validation"],
   Timer: ["Core", "Events", "Style",],
-  Rank: ["Core", "Events", "Style", ],
+  Rank: ["Core", "Events", "Style",],
   Button: ["Core", "Properties", "Events", "Style", "Validation"],
-  Array: ["Core", "Components",  "Properties","Events","Validation"],
+  ButtonGroup: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
+  Array: ["Core", "Components", "Properties", "Events", "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"],
+  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"],
   TreeMap: ["Core", "Components", "Properties", "Events", "Style"],
   ColumnGroup: ["Core", "Components"],
-  Thought: ["Core", "Properties", "Events", "Style", ],
+  Thought: ["Core", "Properties", "Events", "Style",],
   Date: ["Core", "Properties", "Events", "Style", "Validation"],
   DateTime: ["Core", "Properties", "Events", "Style", "Validation"],
-  Image: ["Core", "Properties","Style"],
-  FileInput: ["Core","Properties","Events", "Style", "Validation"],
-  Camera:["Core","Properties","Events", "Style", "Validation"],
+  Image: ["Core", "Properties", "Events", "Style"],
+  FileInput: ["Core", "Properties", "Events", "Style", "Validation"],
+  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"));
@@ -59,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
     }
@@ -70,12 +75,12 @@ 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)
 
-  if(parentObj?.type === "Table" || parentObj?.type === "ColumnGroup"){
-    UiSchema.elements[0].elements[0].elements[4] = 
+  if (parentObj?.type === "Table" || parentObj?.type === "ColumnGroup") {
+    UiSchema.elements[0].elements[0].elements[4] =
     {
       type: "Control",
       scope: "#/properties/columnFormat",
@@ -90,7 +95,7 @@ export function refreshPage(type: string, store: any) {
         },
       },
     };
-    UiSchema.elements[0].elements[0].elements[6] = 
+    UiSchema.elements[0].elements[0].elements[6] =
     {
       type: "Control",
       scope: "#/properties/filteringOptions",
@@ -105,7 +110,7 @@ export function refreshPage(type: string, store: any) {
         },
       },
     };
-    UiSchema.elements[0].elements[0].elements[5] = 
+    UiSchema.elements[0].elements[0].elements[5] =
     {
       type: "Control",
       scope: "#/properties/enableFilter",
@@ -120,49 +125,49 @@ export function refreshPage(type: string, store: any) {
         },
       },
     },
-    UiSchema.elements[0].elements[0].elements[7] = 
-    {
-      type: "Control",
-      scope: "#/properties/enableSorting",
-      options: {
-        widget: "RadioInputField",
-      },
-      config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
-        main: {
-          label: "Enable Sorting",
-          options: ["Yes", "No"],
+      UiSchema.elements[0].elements[0].elements[7] =
+      {
+        type: "Control",
+        scope: "#/properties/enableSorting",
+        options: {
+          widget: "RadioInputField",
         },
-      },
-    },
-    UiSchema.elements[0].elements[0].elements[8] = 
-    {
-      type: "Control",
-      scope: "#/properties/columnKey",
-      config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
-        main: {
-          label: "Column Key",
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+          main: {
+            label: "Enable Sorting",
+            options: ["Yes", "No"],
+          },
         },
       },
-      options: {
-        widget: "InputField",
-      },
-    },
-    UiSchema.elements[0].elements[0].elements[9] = 
-     {
-      type: "Control",
-      scope: "#/properties/elementType",
-      options: {
-        widget: "SelectInputField",
-      },
-      config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
-        main: {
-          label: "Element Type",
+      UiSchema.elements[0].elements[0].elements[8] =
+      {
+        type: "Control",
+        scope: "#/properties/columnKey",
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+          main: {
+            label: "Column Key",
+          },
+        },
+        options: {
+          widget: "InputField",
         },
       },
-    }
+      UiSchema.elements[0].elements[0].elements[9] =
+      {
+        type: "Control",
+        scope: "#/properties/elementType",
+        options: {
+          widget: "SelectInputField",
+        },
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+          main: {
+            label: "Element Type",
+          },
+        },
+      }
     UiSchema.elements[0].elements[0].elements[10] = {
       type: "Control",
       scope: "#/properties/dateFormat",
@@ -187,8 +192,8 @@ export function refreshPage(type: string, store: any) {
       },
     }
   }
-  if(parentObj?.type === "LeaderBoard"){
-    UiSchema.elements[0].elements[0].elements[4] = 
+  if (parentObj?.type === "LeaderBoard") {
+    UiSchema.elements[0].elements[0].elements[4] =
     {
       type: "Control",
       scope: "#/properties/columnFormat",
@@ -204,7 +209,7 @@ export function refreshPage(type: string, store: any) {
     };
   }
 
-  if (sessionStorage.getItem("copiedConfig") ) {
+  if (sessionStorage.getItem("copiedConfig")) {
     this.ElementPathSetter(UiSchema);
   }
   store.setUiSchema(UiSchema);
@@ -230,33 +235,33 @@ 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 = [{label: config.name ?? "NewPage", path: `/PageMaster${id ? `?id=${id}` : ''}`}];
+      let pathArray = [{ label: config.name ?? "NewPage", path: `/PageMaster${id ? `?id=${id}` : ''}` }];
 
       if (path) {
-              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}`)
-              })
+        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=${id}` : ''}`
-                  });
-              })
-          }
+        arr.map((e) => {
+          const data = _.get(config, e)
+          pathArray.push({
+            label: data?.name || data?.eventType || "NewComponent",
+            path: `/Component?path=${e}${id ? `&id=${id}` : ''}`
+          });
+        })
+      }
 
       schema.properties.pageName.path = pathArray
       return schema;
@@ -273,14 +278,18 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     },
     editComponents: function () {
 
-      if (validateAndShowErrors(store)) return; 
+      if (validateAndShowErrors(store)) return;
       const rowId = dynamicData.path.split(".")[1];
       const path = store.searchParams?.get("path");
       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()
@@ -291,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);
@@ -299,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");
@@ -313,20 +328,28 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     },
     widgetAddClickHandler: function () {
 
-      if (validateAndShowErrors(store)) return; 
+      if (validateAndShowErrors(store)) return;
       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()
 
     },
     eventEditHandler: function () {
-      if (validateAndShowErrors(store)) return; 
+      if (validateAndShowErrors(store)) return;
       const rowId = dynamicData.path.split(".")[1];
       const path = store.searchParams?.get("path");
       const id = store.searchParams?.get("id");
@@ -335,7 +358,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       store.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`)
     },
     eventAddHandler: function () {
-      if (validateAndShowErrors(store)) return; 
+      if (validateAndShowErrors(store)) return;
       const path = store.searchParams?.get("path");
       const id = store.searchParams?.get("id");
       if (!Array.isArray(store.formData.events)) {
@@ -351,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 () {
@@ -373,8 +397,8 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       const copiedElementPath = this.elementPathHandler(parentPathOfCopiedComponent, rowId, elementType);
       const copiedFormData = getFormdataFromSessionStorage(copiedElementPath);
 
-      this.ElementPathSetter(uiSchema,copiedFormData);
-      sessionStorage.setItem('copiedConfig',JSON.stringify(copiedFormData));
+      this.ElementPathSetter(uiSchema, copiedFormData);
+      sessionStorage.setItem('copiedConfig', JSON.stringify(copiedFormData));
       store.setNotify({
         SuccessMessage: `${elementType} Copied Successfully`,
         Success: true,
@@ -397,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"));
@@ -413,7 +445,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
           Fail: true,
         });
       }
-      else if(copiedConfig.name && elementType === "Events"){
+      else if (copiedConfig.name && elementType === "Events") {
         store.setNotify({
           FailMessage: notificationMessages.Component,
           Fail: true,
@@ -436,34 +468,37 @@ 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}]`;
     },
     ElementPathSetter: function (uiSchema: any, copiedFormData?: any) {
       const formData = copiedFormData || JSON.parse(sessionStorage.getItem("copiedConfig"));
-      if(uiSchema?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons){
-        uiSchema.elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Component: ${formData.name}`;
+      if (uiSchema?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons) {
+        uiSchema.elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Component: ${formData.name}`;
       }
-      else if(uiSchema?.elements?.[0]?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons){
-        uiSchema.elements[0].elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Component: ${formData.name}`;
+      else if (uiSchema?.elements?.[0]?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons) {
+        uiSchema.elements[0].elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Component: ${formData.name}`;
       }
 
-      
-      if(uiSchema?.elements?.[1]?.elements?.[1]?.config?.main?.headerIcons){
-        uiSchema.elements[1].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Event: ${formData.eventType}`;
+
+      if (uiSchema?.elements?.[1]?.elements?.[1]?.config?.main?.headerIcons) {
+        uiSchema.elements[1].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Event: ${formData.eventType}`;
       }
-      else if(uiSchema?.elements?.[0]?.elements?.[1]?.config?.main?.headerIcons){
-        uiSchema.elements[0].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Component: ${formData.eventType}`;
+      else if (uiSchema?.elements?.[0]?.elements?.[1]?.config?.main?.headerIcons) {
+        uiSchema.elements[0].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Component: ${formData.eventType}`;
       }
     },
 
-    
-    onNavigatePopupYes: function() {
-      try{
+
+    onNavigatePopupYes: function () {
+      try {
         store.navigate(sessionStorage.getItem("pendingNavigatePath"))
         store.updateDialog(`pageNamepopup`)
       }
-      catch(e){
+      catch (e) {
         store.updateDialog(`pageNamepopup`)
         store.setNotify({
           FailMessage: "Couldn't navigate page",
@@ -471,8 +506,8 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
         })
       }
     },
-    onNavigatePopupNo: function() {
-        store.updateDialog(`pageNamepopup`)
+    onNavigatePopupNo: function () {
+      store.updateDialog(`pageNamepopup`)
     }
   }
 };

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

@@ -44,4 +44,84 @@ export const downloadFileFromUrl = (response: any, service) => {
     link.parentNode.removeChild(link);
 };
 
+export const downloadFileStream = async (params: any) => {
+    try {
+        let response: Response;
 
+        if (params.method === "GET") {
+            response = await params.fetchservice.getStream(
+                params.url,
+                params.config
+            );
+        } else if (params.method === "POST") {
+            response = await params.fetchservice.postStream(
+                params.url,
+                params.body,
+                params.config
+            );
+        } else {
+            throw new Error(
+                `Unsupported HTTP method: ${params.method}. Only GET and POST are supported.`
+            );
+        }
+
+        if (!response.ok) {
+            throw new Error("Download failed");
+        }
+
+        // Notify when download starts
+        params.store.setNotify({
+            SuccessMessage: "File Download Started Successfully",
+            Success: true,
+        });
+
+        const fileName =
+            response.headers.get("filename") || "downloaded_file";
+
+        const extension = fileName.includes(".")
+            ? fileName.substring(fileName.lastIndexOf("."))
+            : "";
+
+        const reader = response.body!.getReader();
+
+        //@ts-ignore
+        const fileHandle = await window.showSaveFilePicker({
+            suggestedName: fileName,
+            types: extension
+                ? [
+                      {
+                          description: "File",
+                          accept: {
+                              "application/octet-stream": [extension],
+                          },
+                      },
+                  ]
+                : undefined,
+        });
+
+        const writable = await fileHandle.createWritable();
+
+        while (true) {
+            const { done, value } = await reader.read();
+
+            if (done) break;
+
+            await writable.write(value);
+        }
+
+        await writable.close();
+
+        // Notify when download completes
+        params.store.setNotify({
+            SuccessMessage: `File "${fileHandle.name}" downloaded successfully.`,
+            Success: true,
+        });
+    } catch (e) {
+        params.store.setNotify({
+            FailMessage: "File Download Failed",
+            Fail: true,
+        });
+
+        console.error(e);
+    }
+};

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

@@ -126,10 +126,13 @@ 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)
+    parameter = makeFunc(params.store, params.dynamicData, params.userValue, params.parentEventOutput, params.service, params.fetchservice);
+    params.serviceHolder[params.config.inBuiltFunctionType](
+      parameter,
+      params.service
+    );
   } else {
-    params.serviceHolder[params.config.inBuiltFunctionType](params.store, params.dynamicData, params.userValue, params.parentEventOutput, params.service)
+    params.serviceHolder[params.config.inBuiltFunctionType](params.store, params.dynamicData, params.userValue, params.parentEventOutput, params.service, params.fetchservice)
   }
 }
 

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

@@ -5,6 +5,7 @@ export interface handlersProps {
      dynamicData: any,
       userValue: any,
     service: any, 
+    fetchservice?: any,
     serviceHolder: any, 
     eventGroups?: any, 
     parentEventOutput?: any,