@griddo/ax 11.2.12 → 11.3.0

package/src/containers/Forms/actions.tsx

@@ -13,7 +13,15 @@ import {
   ISchema,
   ListForm,
 } from "@ax/types";
-import { deepClone, getDefaultFormTemplate, getDefaultSchema, getSchema, handleRequest, isReqOk } from "@ax/helpers";
+import {
+  deepClone,
+  getDefaultFormTemplate,
+  getDefaultSchema,
+  getImageFromIFrame,
+  getSchema,
+  handleRequest,
+  isReqOk,
+} from "@ax/helpers";
 import {
   findByEditorID,
   generateEditorIDs,
@@ -26,7 +34,7 @@ import {
   updateComponent,
 } from "@ax/forms";
 import { appActions } from "@ax/containers/App";
-import { forms } from "@ax/api";
+import { forms, images } from "@ax/api";
 import {
   SET_BREADCRUMB,
   SET_COPY_MODULE,
@@ -134,16 +142,16 @@ function setIsIATranslated(isIATranslated: boolean): ISetIsIATranslated {
   return { type: SET_IS_IA_TRANSLATED, payload: { isIATranslated } };
 }
 
-function getForms(params?: GetFormsParams): (dispatch: Dispatch, getState: any) => Promise<void> {
-  return async (dispatch, getState) => {
+function getForms(
+  siteID: number | null,
+  params?: GetFormsParams,
+  loading = true
+): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
     try {
-      const {
-        sites: { currentSiteInfo },
-      }: IRootState = getState();
-
       const getParams = { ...DEFAULT_PARAMS, ...params };
 
-      const siteID = currentSiteInfo ? currentSiteInfo.id : "global";
+      const site = siteID ? siteID : "global";
 
       const responseActions = {
         handleSuccess: (response: ListForm) => {
@@ -154,22 +162,24 @@ function getForms(params?: GetFormsParams): (dispatch: Dispatch, getState: any)
         handleError: (response: any) => handleError(response)(dispatch),
       };
 
-      const callback = async () => forms.getForms(siteID, getParams);
+      const callback = async () => forms.getForms(site, getParams);
 
-      await handleRequest(callback, responseActions, [setIsLoading])(dispatch);
+      const loadingAction = loading ? [setIsLoading] : [];
+
+      await handleRequest(callback, responseActions, loadingAction)(dispatch);
     } catch (e) {
       console.log(e);
     }
   };
 }
 
-function getForm(formID: number | null): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getForm(formID: number | null): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     try {
       dispatch(setIsLoading(true));
       const {
         forms: { isNewTranslation },
-      }: IRootState = getState();
+      } = getState();
 
       if (formID) {
         const response: { status: number; data: FormContent } = await forms.getForm(formID);
@@ -183,9 +193,11 @@ function getForm(formID: number | null): (dispatch: Dispatch, getState: any) =>
             formData["state"] = "inactive";
             formData["canBeTranslated"] = true;
             formData["originalLanguage"] = formData.language;
+            formData["formInUse"] = null;
           }
           generateFormContent(formData)(dispatch, getState);
           dispatch(setCurrentFormID(response.data.id));
+          dispatch(setIsIATranslated(false));
         }
       } else {
         generateNewForm()(dispatch, getState);
@@ -197,12 +209,12 @@ function getForm(formID: number | null): (dispatch: Dispatch, getState: any) =>
   };
 }
 
-function generateNewForm(): (dispatch: Dispatch, getState: any) => void {
+function generateNewForm(): (dispatch: Dispatch, getState: () => IRootState) => void {
   return async (dispatch, getState) => {
     const {
       forms: { template },
       app: { lang },
-    }: IRootState = getState();
+    } = getState();
 
     let form = getDefaultSchema("FormPage");
     const parsedPageData = parseData(form, true);
@@ -218,19 +230,21 @@ function generateNewForm(): (dispatch: Dispatch, getState: any) => void {
   };
 }
 
-function generateFormContent(formContent: Partial<FormContent>): (dispatch: Dispatch, getState: any) => void {
+function generateFormContent(
+  formContent: Partial<FormContent>
+): (dispatch: Dispatch, getState: () => IRootState) => void {
   return (dispatch, getState) => {
     const {
       forms: { selectedEditorID },
       sites: { currentSiteInfo },
-    }: IRootState = getState();
+    } = getState();
 
     const { pageContent } = generateEditorIDs({ ...formContent });
     pageContent["site"] = currentSiteInfo ? currentSiteInfo.id : null;
     const { element: selectedContent, parent: selectedParent } = findByEditorID(pageContent, selectedEditorID);
     const { component } = selectedContent;
     const schema = getSchema(component);
-
+    if (!schema) return;
     dispatch(setSchema(schema));
     dispatch(setFormContent(pageContent));
     updateBreadcrumb(selectedEditorID)(dispatch, getState);
@@ -240,11 +254,11 @@ function generateFormContent(formContent: Partial<FormContent>): (dispatch: Disp
   };
 }
 
-function setSelectedContent(editorID: number): (dispatch: Dispatch, getState: any) => Promise<void> {
+function setSelectedContent(editorID: number): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     const {
       forms: { formContent, tab },
-    }: IRootState = getState();
+    } = getState();
 
     dispatch(setIsLoading(true));
 
@@ -271,6 +285,7 @@ function setSelectedContent(editorID: number): (dispatch: Dispatch, getState: an
     isUpdatedComponent && updateComponent(selectedContent, defaultSchema);
 
     const schema = getSchema(component);
+    if (!schema) return;
     const defaultTab = "content";
     dispatch(setTab(tab || defaultTab));
     dispatch(setSchema(schema));
@@ -286,11 +301,11 @@ function updateFormContent(
   selectedEditorID: number,
   key: string,
   value: any
-): (dispatch: Dispatch, getState: any) => void {
+): (dispatch: Dispatch, getState: () => IRootState) => void {
   return (dispatch, getState) => {
     const {
       forms: { formContent, selectedContent },
-    }: IRootState = getState();
+    } = getState();
 
     const clonedContent = deepClone(formContent);
 
@@ -318,13 +333,16 @@ function updateBreadcrumb(editorID: number): (dispatch: Dispatch, getState: any)
   };
 }
 
-function saveForm(updateState?: FormState): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function saveForm(
+  formHtml?: HTMLDivElement | null,
+  updateState?: FormState
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const {
         forms: { formContent },
         app: { lang },
-      }: IRootState = getState();
+      } = getState();
 
       if (!formContent) {
         return false;
@@ -350,6 +368,16 @@ function saveForm(updateState?: FormState): (dispatch: Dispatch, getState: any)
           }
           dispatch(setFormContent(pageContent));
           dispatch(setIsNewTranslation(false));
+
+          if (formHtml && pageContent.state === "active") {
+            const form = new FormData();
+            const image = await getImageFromIFrame(formHtml, "form-thumbnail");
+
+            if (image) {
+              form.append("file", image);
+              images.createThumbnail(pageContent.id, "form", form);
+            }
+          }
         },
         handleError: (response: any) => handleError(response)(dispatch),
       };
@@ -362,12 +390,16 @@ function saveForm(updateState?: FormState): (dispatch: Dispatch, getState: any)
   };
 }
 
-function deleteForm(id: number | number[]): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function deleteForm(id: number | number[]): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
+      const {
+        sites: { currentSiteInfo },
+      } = getState();
+
       const responseActions = {
         handleSuccess: () => {
-          getForms()(dispatch, getState);
+          getForms(currentSiteInfo?.id || null)(dispatch);
         },
         handleError: (response: any) => {
           const {
@@ -392,9 +424,13 @@ function deleteForm(id: number | number[]): (dispatch: Dispatch, getState: any)
 function updateFormState(
   formID: number | number[],
   state: FormState
-): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
+      const {
+        sites: { currentSiteInfo },
+      } = getState();
+
       const callback = async () =>
         Array.isArray(formID)
           ? await forms.updateFormStateBulk(formID, state)
@@ -402,7 +438,7 @@ function updateFormState(
 
       const responseActions = {
         handleSuccess: () => {
-          getForms()(dispatch, getState);
+          getForms(currentSiteInfo?.id || null)(dispatch);
         },
         handleError: (response: any) => handleError(response)(dispatch),
       };
@@ -425,11 +461,11 @@ function setSelectedTab(tab: string): (dispatch: Dispatch) => void {
   };
 }
 
-function addModule(type: string, key: string): (dispatch: Dispatch, getState: any) => void {
+function addModule(type: string, key: string): (dispatch: Dispatch, getState: () => IRootState) => void {
   return (dispatch, getState) => {
     const {
       forms: { formContent, selectedEditorID: editorID },
-    }: IRootState = getState();
+    } = getState();
 
     if (!formContent) return;
 
@@ -463,11 +499,11 @@ function addModule(type: string, key: string): (dispatch: Dispatch, getState: an
   };
 }
 
-function deleteModule(editorID: number[], key?: string): (dispatch: Dispatch, getState: any) => void {
+function deleteModule(editorID: number[], key?: string): (dispatch: Dispatch, getState: () => IRootState) => void {
   return (dispatch, getState) => {
     const {
       forms: { formContent },
-    }: IRootState = getState();
+    } = getState();
 
     if (!formContent) return;
 
@@ -495,11 +531,11 @@ function deleteModule(editorID: number[], key?: string): (dispatch: Dispatch, ge
   };
 }
 
-function duplicateModule(editorID: number[], key?: string): (dispatch: Dispatch, getState: any) => number {
+function duplicateModule(editorID: number[], key?: string): (dispatch: Dispatch, getState: () => IRootState) => number {
   return (dispatch, getState) => {
     const {
       forms: { formContent },
-    }: IRootState = getState();
+    } = getState();
 
     if (!formContent) return;
 
@@ -514,9 +550,11 @@ function duplicateModule(editorID: number[], key?: string): (dispatch: Dispatch,
 
     editorID.forEach((id) => {
       const { element: originalItem } = findByEditorID(templateContent, id);
+      const clonedItem = deepClone(originalItem);
+      delete clonedItem.fixed;
       const originalItemIndex = itemsArr.findIndex((module: IModule) => module.editorID === id);
       duplicatedItemIndex = originalItemIndex + 1;
-      itemsArr.splice(duplicatedItemIndex, 0, originalItem);
+      itemsArr.splice(duplicatedItemIndex, 0, clonedItem);
     });
 
     const updatedContent = {
@@ -550,11 +588,11 @@ function moveModule(
   content: any,
   newIndex: number,
   key: string
-): (dispatch: Dispatch, getState: any) => void {
+): (dispatch: Dispatch, getState: () => IRootState) => void {
   return async (dispatch, getState) => {
     const {
       forms: { formContent, selectedContent },
-    }: IRootState = getState();
+    } = getState();
 
     if (!formContent) return;
 
@@ -576,11 +614,11 @@ function moveModule(
   };
 }
 
-function copyModule(editorID: number[]): (dispatch: Dispatch, getState: any) => boolean | number {
+function copyModule(editorID: number[]): (dispatch: Dispatch, getState: () => IRootState) => boolean | number {
   return (dispatch, getState) => {
     const {
       forms: { formContent },
-    }: IRootState = getState();
+    } = getState();
 
     if (!formContent) return false;
 
@@ -592,6 +630,7 @@ function copyModule(editorID: number[]): (dispatch: Dispatch, getState: any) =>
       if (originalElement) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { editorID, parentEditorID, ...element } = originalElement;
+        delete element.fixed;
         modulesToCopy.push(element);
       }
     });
@@ -614,11 +653,11 @@ function pasteModule(
   editorID: number,
   key: string,
   modulesToPaste: IModule[]
-): (dispatch: Dispatch, getState: any) => Promise<{ error?: INotification }> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<{ error?: INotification }> {
   return async (dispatch, getState) => {
     const {
       forms: { formContent },
-    }: IRootState = getState();
+    } = getState();
 
     if (!formContent) return { error: undefined };
 
@@ -659,12 +698,12 @@ function resetForm(): (dispatch: Dispatch) => void {
   };
 }
 
-function getFormCategories(type: string): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getFormCategories(type: string): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     try {
       const {
         sites: { currentSiteInfo },
-      }: IRootState = getState();
+      } = getState();
 
       const siteID = currentSiteInfo ? currentSiteInfo.id : "global";
 
@@ -688,12 +727,12 @@ function getFormCategories(type: string): (dispatch: Dispatch, getState: any) =>
 function createFormCategory(
   content: { title: string; code: string },
   categoryType: string
-): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const {
         sites: { currentSiteInfo },
-      }: IRootState = getState();
+      } = getState();
 
       const relatedSite = currentSiteInfo ? currentSiteInfo.id : null;
 
@@ -722,7 +761,7 @@ function createFormCategory(
 function updateFormCategory(
   id: number,
   content: { title: string; code: string }
-): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const callback = async () => await forms.updateFormCategory(id, { content });
@@ -745,7 +784,7 @@ function updateFormCategory(
 function deleteFormCategory(
   id: number | number[],
   categoryType: string
-): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const responseActions = {
@@ -773,7 +812,9 @@ function deleteFormCategory(
   };
 }
 
-function orderFormCategory(data: FormCategoriesOrderParams): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function orderFormCategory(
+  data: FormCategoriesOrderParams
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       dispatch(setIsLoading(true));
@@ -803,7 +844,7 @@ function createNewTranslation(isNewTranslation: boolean): (dispatch: Dispatch) =
   };
 }
 
-function getFormTranslation(langID: number): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function getFormTranslation(langID: number): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const {
@@ -829,7 +870,7 @@ function getFormTranslation(langID: number): (dispatch: Dispatch, getState: any)
   };
 }
 
-function duplicateForm(formID: number, title: string): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function duplicateForm(formID: number, title: string): (dispatch: Dispatch) => Promise<boolean> {
   return async (dispatch) => {
     try {
       const responseActions = {
@@ -849,7 +890,7 @@ function duplicateForm(formID: number, title: string): (dispatch: Dispatch, getS
   };
 }
 
-function copyForm(formID: number, siteID: number): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function copyForm(formID: number, siteID: number): (dispatch: Dispatch) => Promise<boolean> {
   return async (dispatch) => {
     try {
       const responseActions = {

package/src/containers/Gallery/actions.tsx

@@ -146,12 +146,9 @@ function updateImage(
   };
 }
 
-function deleteImage(imageID: number): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
-  return async (dispatch, getState) => {
+function deleteImage(imageID: number): (dispatch: Dispatch) => Promise<boolean> {
+  return async (dispatch) => {
     try {
-      const {
-        gallery: { data },
-      } = getState();
       const responseActions = {
         handleSuccess: () => null,
         handleError: (response: any) => appActions.handleError(response)(dispatch),

package/src/containers/Navigation/Defaults/actions.tsx

@@ -18,6 +18,7 @@ import {
   deepClone,
   getNullValue,
   getDefaultNavigationModules,
+  getImageFromHtml,
 } from "@ax/helpers";
 import {
   findByEditorID,
@@ -32,7 +33,7 @@ import {
 
 import { appActions } from "@ax/containers/App";
 
-import { getFormData, getStateValues, getImage } from "./utils";
+import { getFormData, getStateValues } from "./utils";
 
 import {
   SET_EDITOR_CONTENT,
@@ -258,7 +259,7 @@ function createNavigation(navHtml?: HTMLDivElement | null): (dispatch: Dispatch,
 
       let image = null;
       if (navHtml) {
-        image = await getImage(navHtml);
+        image = await getImageFromHtml(navHtml, "navigation-thumbnail");
       }
 
       const navigationValues = { ...editorContent, site: currentSiteInfo.id, language: lang.id };
@@ -308,7 +309,7 @@ function updateNavigation(
 
       let image = null;
       if (navHtml) {
-        image = await getImage(navHtml);
+        image = await getImageFromHtml(navHtml, "navigation-thumbnail");
       }
 
       const cleanValues = removeEditorIds(data);
@@ -680,6 +681,7 @@ function copyModule(editorID: number[]): (dispatch: Dispatch, getState: any) =>
     editorID.forEach((id) => {
       const { element: originalElement } = findByEditorID(editorContent, id);
       if (originalElement) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { editorID, parentEditorID, ...element } = originalElement;
         modulesToCopy.push(element);
       }
@@ -792,7 +794,7 @@ function setSelectedContent(editorID: number): (dispatch: Dispatch, getState: an
     const { component } = selectedContent;
 
     const schema = getSchema(component);
-
+    if (!schema) return;
     dispatch(setSchema(schema));
     dispatch(setSelectedEditorID(editorID));
     dispatch(setSelectedDefaultContent({ ...selectedContent }));

package/src/containers/Navigation/Defaults/utils.tsx

@@ -1,5 +1,3 @@
-import { toBlob } from "html-to-image";
-
 const getStateValues = (getState: any) => {
   const {
     sites: { currentSiteInfo },
@@ -44,44 +42,4 @@ const getFormData = (values: any, image?: File | null): FormData => {
   return form;
 };
 
-const getImage = async (navHtml: HTMLDivElement): Promise<File | null> => {
-  const browserContent = navHtml.querySelector<HTMLElement>(".browser-content");
-
-  if (!browserContent) {
-    return null;
-  }
-
-  const { height, overflow } = getComputedStyle(browserContent);
-  browserContent.style.height = "auto";
-  browserContent.style.overflow = "visible";
-  const originalHeight = browserContent.clientHeight;
-
-  const elChildren = browserContent.querySelectorAll("*");
-  let maxAbsoluteElementHeight = 0;
-  [].forEach.call(elChildren, function (element: any) {
-    const isAbsolutePosition = getComputedStyle(element).position === "absolute";
-    const isMaxAbsolutePositionHeight = element.clientHeight > maxAbsoluteElementHeight;
-    if (isAbsolutePosition && isMaxAbsolutePositionHeight) {
-      maxAbsoluteElementHeight = element.clientHeight;
-    }
-  });
-  if (maxAbsoluteElementHeight) {
-    const actualHeight = originalHeight + maxAbsoluteElementHeight;
-    browserContent.style.height = `${actualHeight}px`;
-  }
-
-  return toBlob(browserContent, { quality: 0.95, pixelRatio: 0.5 })
-    .then((imageBlob) => {
-      return imageBlob && new File([imageBlob], "navigation-thumbnail.png", { type: "image/png" });
-    })
-    .finally(() => {
-      browserContent.style.height = height;
-      browserContent.style.overflow = overflow;
-    })
-    .catch((err) => {
-      //console.log(err);
-      return null;
-    });
-};
-
-export { getStateValues, getFormData, getImage };
+export { getStateValues, getFormData };