@griddo/ax 11.1.9 → 11.1.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.1.9",
+  "version": "11.1.10",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -62,7 +62,6 @@
     "@types/react-draft-wysiwyg": "^1.13.1",
     "@types/react-redux": "^7.1.23",
     "@types/react-router-dom": "5.3.3",
-    "@types/react-select": "^3.0.8",
     "@types/react-slick": "^0.23.10",
     "@types/react-test-renderer": "17.0.1",
     "@types/react-textarea-autosize": "^4.3.5",
@@ -134,7 +133,7 @@
     "react-redux": "^7.2.8",
     "react-refresh": "^0.10.0",
     "react-router-dom": "5.1.2",
-    "react-select": "^3.0.8",
+    "react-select": "5.10.0",
     "react-slick": "^0.29.0",
     "react-textarea-autosize": "^7.1.2",
     "redux": "4.0.4",
@@ -225,5 +224,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6d0f91ca783b025364513319976c3e9873e76953"
+  "gitHead": "68794c64ceac7a98aef51c9fca387b9066cc6ff3"
 }

package/src/components/Fields/AsyncSelect/index.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
+import { InputActionMeta } from "react-select";
 
 import { isReqOk } from "@ax/helpers";
 import { selects, checkgroups } from "@ax/api";
-import { ISite } from "@ax/types";
+import { IPage, ISite } from "@ax/types";
 
 import * as S from "./style";
 
@@ -27,10 +28,12 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
     maxWidth,
   } = props;
 
-  const initialState: { items: IOption[]; hasEmptyOption: boolean } = {
+  const initialState: IState = {
     items: [],
     hasEmptyOption: true,
+    inputText: "",
   };
+
   const [state, setState] = useState(initialState);
 
   const isPage = entity === "pages";
@@ -65,6 +68,7 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
           }
         }
       } catch (e) {
+        // eslint-disable-next-line no-console
         console.log(e);
       }
       return data;
@@ -81,6 +85,7 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
           : optionValues;
         if (isMounted) setState((state) => ({ ...state, items: filteredOptions }));
       })
+      // eslint-disable-next-line no-console
       .catch((apiError) => console.log(apiError));
     return () => {
       isMounted = false;
@@ -97,11 +102,12 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
     return state.items.filter((i: IOption) => i.label.toLowerCase().includes(inputValue.toLowerCase()));
   };
 
-  const handleInputChange = (newValue: string) => {
-    const inputValue = newValue.replace(/\W/g, "");
-    const hasEmptyOption = inputValue.length === 0;
-    setState((state) => ({ ...state, hasEmptyOption }));
-    return inputValue;
+  const handleInputChange = (inputText: string, meta: InputActionMeta) => {
+    if (meta.action !== "input-blur" && meta.action !== "menu-close") {
+      const inputValue = inputText.replace(/\W/g, "");
+      const hasEmptyOption = inputValue.length === 0;
+      setState((state) => ({ ...state, hasEmptyOption, inputText }));
+    }
   };
 
   const loadOptions = (inputValue: string, callback: any) => {
@@ -110,7 +116,6 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
     }, 0);
   };
 
-  // tslint:disable-next-line: no-shadowed-variable
   const getObjectValue = (val: any, options: IOption[]) => {
     const fixedVal = Array.isArray(val) ? val[0] : val;
     const selectedValue = fixedVal && typeof fixedVal === "object" ? fixedVal.id : fixedVal;
@@ -139,11 +144,18 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
         hasEmptyOption={state.hasEmptyOption}
         isSearchable={searchable}
         maxWidth={maxWidth}
+        inputValue={state.inputText}
       />
     </div>
   );
 };
 
+interface IState {
+  items: IOption[];
+  hasEmptyOption: boolean;
+  inputText: string;
+}
+
 interface IOption {
   value: number | string | null;
   label: string;
@@ -164,11 +176,11 @@ export interface IAsyncSelectProps {
   onChange: (value: string | number | null) => void;
   site?: ISite | null;
   lang?: string;
-  selectedContent?: any;
+  selectedContent?: IPage;
   mandatory?: boolean;
   placeholder?: string;
-  filter?: any[];
-  options?: any[];
+  filter?: (string | number | null)[];
+  options?: IOption[];
   source?: string;
   type?: string;
   maxWidth?: number;

package/src/components/Fields/Select/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { InputActionMeta } from "react-select";
 
 import * as S from "./style";
 
@@ -22,20 +23,20 @@ const Select = (props: ISelectProps): JSX.Element => {
   const emptyOption = { value: "", label: placeholder || "Empty" };
 
   const [hasEmptyOption, setHasEmptyOption] = useState(!mandatory);
+  const [inputText, setInputText] = useState<string>("");
 
   const optionValues: IOptionProps[] = hasEmptyOption ? [emptyOption, ...options] : options;
 
-  const handleChange = (selectedValue: IOptionProps) => {
-    onChange(selectedValue.value);
-  };
+  const handleChange = (selectedValue: IOptionProps) => onChange(selectedValue.value);
 
-  const handleInputChange = (newValue: string) => {
-    const inputValue = newValue.replace(/\W/g, "");
-    setHasEmptyOption(!mandatory && inputValue.length === 0);
-    return inputValue;
+  const handleInputChange = (inputText: string, meta: InputActionMeta) => {
+    if (meta.action !== "input-blur" && meta.action !== "menu-close") {
+      const inputValue = inputText.replace(/\W/g, "");
+      setInputText(inputText);
+      setHasEmptyOption(!mandatory && inputValue.length === 0);
+    }
   };
 
-  // tslint:disable-next-line: no-shadowed-variable
   const getObjectValue = (value: string | undefined, options: IOptionProps[]) =>
     options.find((option) => option.value === value);
 
@@ -61,6 +62,7 @@ const Select = (props: ISelectProps): JSX.Element => {
         alignRight={alignRight}
         aria-label={name}
         maxWidth={maxWidth}
+        inputValue={inputText}
       />
     </div>
   );

package/src/modules/Content/ContentFilters/index.tsx

@@ -24,7 +24,6 @@ const ContentFilters = (props: IProps): JSX.Element => {
     addTemplate,
     setSelectedStructuredData,
     resetFilter,
-    setStructuredDataFilter,
     setFilter,
     addNew,
   } = props;
@@ -46,7 +45,6 @@ const ContentFilters = (props: IProps): JSX.Element => {
     resetFilter();
     setContentFilter(value);
     setSelectedStructuredData(value, "site");
-    current && setStructuredDataFilter(value);
     if (hasTemplate) {
       addTemplate(firstTemplate);
     } else {
@@ -65,7 +63,6 @@ const ContentFilters = (props: IProps): JSX.Element => {
 
     setContentFilter(filter);
     setSelectedStructuredData(filter, "site");
-    current && setStructuredDataFilter(filter);
   };
 
   return (
@@ -110,7 +107,6 @@ interface IProps {
   addTemplate(template: string): void;
   setSelectedStructuredData(id: string, scope: string): void;
   resetFilter(): void;
-  setStructuredDataFilter: (filter: string) => void;
   setFilter: (pointer: string, filter: IQueryValue[]) => void;
   addNew: () => void;
 }
@@ -119,7 +115,6 @@ const mapDispatchToProps = {
   setContentFilter: sitesActions.setFilter,
   addTemplate: pageEditorActions.addTemplate,
   setSelectedStructuredData: structuredDataActions.setSelectedStructuredData,
-  setStructuredDataFilter: structuredDataActions.setFilter,
 };
 
 export default connect(null, mapDispatchToProps)(ContentFilters);

package/src/modules/Forms/FormEditor/index.tsx

@@ -25,6 +25,7 @@ const FormEditor = (props: IProps) => {
     globalLangs,
     formContent,
     isNewTranslation,
+    currentSiteInfo,
     setHistoryPush,
     setLanguage,
     deleteForm,
@@ -36,6 +37,7 @@ const FormEditor = (props: IProps) => {
   const { id, title, state, dataLanguages } = formContent || { dataLanguages: [] };
   const formStatus = state === "active" ? "active" : "offline";
   const isTranslated = dataLanguages.length > 1;
+  const isSiteView = !!currentSiteInfo;
 
   const formLanguages: ILanguage[] = [];
   dataLanguages?.forEach((dataLang) => {
@@ -52,7 +54,7 @@ const FormEditor = (props: IProps) => {
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(formContent);
   const browserRef = useRef<HTMLDivElement>(null);
 
-  const backLinkRoute = "/forms";
+  const backLinkRoute = isSiteView ? "/sites/forms" : "/forms";
   const theme = getDefaultTheme();
 
   useEffect(() => {
@@ -204,7 +206,7 @@ const FormEditor = (props: IProps) => {
         currentLanguages={formLanguages}
         currentPageID={0}
         fullWidth={true}
-        inversed={true}
+        inversed={!isSiteView}
         isFromEditor={true}
         isDirty={isDirty}
       >

package/src/modules/Forms/FormsMenu/index.tsx

@@ -9,23 +9,25 @@ import { getSchemaFormCategories } from "@ax/helpers";
 import MenuGroup from "./MenuGroup";
 
 import * as S from "./style";
+import { IRootState, ISite } from "@ax/types";
 
 const FormsMenu = (props: IProps): JSX.Element => {
-  const { selected, setHistoryPush } = props;
+  const { selected, currentSiteInfo, setHistoryPush } = props;
 
+  const basePath = currentSiteInfo ? "/sites" : "";
   const formCategories = getSchemaFormCategories();
 
   const navItems: INavItem[] = [
     {
       label: "All Forms",
-      path: "/forms",
+      path: `${basePath}/forms`,
     },
   ];
 
   if (formCategories.length) {
     navItems.push({
       label: "Forms Categories",
-      path: "/forms/categories/",
+      path: `${basePath}/forms/categories/`,
       items: formCategories,
     });
   }
@@ -77,11 +79,16 @@ interface INavItem {
 
 interface IProps {
   selected?: string;
+  currentSiteInfo: ISite | null;
   setHistoryPush(path: string, isEditor?: boolean): Promise<void>;
 }
 
+const mapStateToProps = (state: IRootState) => ({
+  currentSiteInfo: state.sites.currentSiteInfo,
+});
+
 const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
 };
 
-export default connect(null, mapDispatchToProps)(FormsMenu);
+export default connect(mapStateToProps, mapDispatchToProps)(FormsMenu);

package/src/modules/FramePreview/index.tsx

@@ -61,7 +61,7 @@ const FramePreview = (props: IProps) => {
 
   const selectHoverEditorID = (editorID: number, parentEditorID: number) => {
     const { parent } = findByEditorID(content, parentEditorID);
-    if (parent && parent.parentEditorID === 0) {
+    if (parent && (parent.parentEditorID === null || parent.parentEditorID === 0)) {
       window.parent.postMessage({ type: "module-scroll", message: editorID }, "*");
     }
   };

package/src/modules/Sites/index.tsx

@@ -23,6 +23,7 @@ const Sites = (props: ISitesProps): JSX.Element => {
     globalLangs,
     getRoles,
     updateCurrentSearch,
+    resetCurrentData,
     setIsLoading,
   } = props;
 
@@ -31,6 +32,7 @@ const Sites = (props: ISitesProps): JSX.Element => {
       setIsLoading(true);
       setCurrentSiteInfo(null);
       updateCurrentSearch("");
+      resetCurrentData();
       await getRoles({ siteId: "global" }, token, false);
       await getUser("me", token, false);
       await getStructuredData(token, null, false);
@@ -74,6 +76,7 @@ interface IDispatchProps {
   getUser: (id: string, token?: string, hasLoading?: boolean) => Promise<void>;
   getRoles: (params: IGetRoles, token?: string, hasLoading?: boolean) => Promise<void>;
   updateCurrentSearch(query: string): Promise<void>;
+  resetCurrentData(): Promise<void>;
   setIsLoading(isLoading: boolean): void;
 }
 
@@ -87,6 +90,7 @@ const mapDispatchToProps = {
   getUser: usersActions.getUser,
   getRoles: usersActions.getRoles,
   updateCurrentSearch: structuredDataActions.updateCurrentSearch,
+  resetCurrentData: structuredDataActions.resetCurrentData,
   setIsLoading: appActions.setIsLoading,
 };
 

package/src/routes/site.tsx

@@ -16,6 +16,9 @@ import Profile from "./../modules/Users/Profile";
 import Integrations from "./../modules/Settings/Integrations";
 import IntegrationForm from "./../modules/Settings/Integrations/IntegrationForm";
 import FileDrive from "./../modules/FileDrive";
+import FormList from "../modules/Forms/FormList";
+import FormEditor from "../modules/Forms/FormEditor";
+import FormCategoriesList from "../modules/Forms/FormCategoriesList";
 
 const BASE_PATH = "/sites";
 
@@ -89,6 +92,39 @@ export default [
       },
     ],
   },
+  {
+    path: `${BASE_PATH}/forms`,
+    component: FormList,
+    name: "Forms",
+    showInNav: true,
+    icon: "Form",
+  },
+  {
+    path: `${BASE_PATH}/forms/categories`,
+    component: FormCategoriesList,
+    name: "Form Categories",
+    showInNav: false,
+  },
+  {
+    path: `${BASE_PATH}/forms/categories/:cat`,
+    component: FormCategoriesList,
+    name: "Form Categories",
+    showInNav: false,
+  },
+  {
+    path: `${BASE_PATH}/forms/editor`,
+    component: FormEditor,
+    name: "Form Editor",
+    showInNav: false,
+    hideNav: true,
+  },
+  {
+    path: `${BASE_PATH}/forms/editor/new`,
+    component: FormEditor,
+    name: "New Form Editor",
+    showInNav: false,
+    hideNav: true,
+  },
   {
     path: `${BASE_PATH}/files`,
     component: FileDrive,