@griddo/ax 1.55.13 → 1.56.1

package/src/containers/Gallery/actions.tsx

@@ -0,0 +1,171 @@
+import { Dispatch } from "redux";
+
+import { handleRequest, isReqOk, compressImage } from "@ax/helpers";
+import { images, sites } from "@ax/api";
+import { IGetSiteImages, IImage, IImageForm, IRootState } from "@ax/types";
+import { appActions } from "@ax/containers/App";
+
+import {
+  SET_DATA,
+  SET_IS_LOADING,
+  SET_IS_SAVING,
+  SET_IS_UPLOADING,
+  SET_UPLOAD_SUCCESS,
+  SET_UPLOAD_ERROR,
+} from "./constants";
+import {
+  ISetData,
+  ISetIsLoading,
+  ISetIsSaving,
+  ISetIsUploading,
+  ISetUploadSuccess,
+  ISetUploadError,
+} from "./interfaces";
+import { IData, IIsLoading, IIsSaving } from "./reducer";
+
+const thumbWidth = 192;
+const thumbHeight = 144;
+const maxSize = 10; // MB
+
+function setData(data: IData): ISetData {
+  return { type: SET_DATA, payload: { data } };
+}
+
+function setIsLoading(isLoading: IIsLoading): ISetIsLoading {
+  return { type: SET_IS_LOADING, payload: { isLoading } };
+}
+
+function setIsSaving(isSaving: IIsSaving): ISetIsSaving {
+  return { type: SET_IS_SAVING, payload: { isSaving } };
+}
+
+function setIsUploading(isUploading: boolean): ISetIsUploading {
+  return { type: SET_IS_UPLOADING, payload: { isUploading } };
+}
+
+function setUploadSuccess(isSuccess: boolean): ISetUploadSuccess {
+  return { type: SET_UPLOAD_SUCCESS, payload: { isUploading: false, isSuccess } };
+}
+
+function setUploadError(errorMsg = ""): ISetUploadError {
+  return { type: SET_UPLOAD_ERROR, payload: { inDropZone: false, isUploading: false, isError: true, errorMsg } };
+}
+
+function getSiteImages(props: IGetSiteImages): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
+  return async (dispatch, getState) => {
+    const {
+      gallery: { data },
+    } = getState();
+    const { site, page = 1, items, query, search, more = false } = props;
+    try {
+      dispatch(setIsLoading({ init: !more, more }));
+      const result = await sites.getSiteImages(site, page, items, thumbWidth, thumbHeight, query, search);
+      if (isReqOk(result.status)) {
+        const images = [...result.data.items];
+        if (more) images.unshift(...data.items);
+        dispatch(
+          setData({
+            items: images,
+            page,
+            isImageSelected: false,
+            imageSelected: null,
+            isFinished: result.data.items.length < items,
+          })
+        );
+        dispatch(setIsLoading({ init: false, more: false }));
+        dispatch(setUploadSuccess(false));
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
+function selectImage(item: IImage): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
+  return async (dispatch, getState) => {
+    const {
+      gallery: { data },
+    } = getState();
+    if (data.imageSelected === item) {
+      dispatch(setData({ ...data, imageSelected: null, isImageSelected: false }));
+    } else {
+      dispatch(setData({ ...data, imageSelected: item, isImageSelected: true }));
+    }
+  };
+}
+
+function uploadImage(imageFile: File, site: number | string): (dispatch: Dispatch) => Promise<IImage> {
+  return async (dispatch) => {
+    try {
+      dispatch(setIsUploading(true));
+      const imageSize = imageFile.size / (1024 * 1024);
+      const image = imageSize >= maxSize ? await compressImage(imageFile, 9999, 9999, maxSize, false) : imageFile;
+      const form = new FormData();
+      form.append("file", image);
+      site && form.append("site", JSON.stringify(site));
+      const result = await images.createImage(form);
+      if (isReqOk(result.status)) {
+        dispatch(setIsUploading(false));
+        dispatch(setUploadSuccess(true));
+        // dispatch(setInDropZone(false));
+        return { ...result.data, file: image };
+      } else {
+        dispatch(setUploadError("Error uploading image"));
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
+function uploadError(error: string): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    dispatch(setUploadError(error));
+  };
+}
+
+function updateImage(
+  imageID: number,
+  imageData: IImageForm,
+  add?: boolean
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
+  return async (dispatch, getState) => {
+    const {
+      gallery: { isSaving },
+    } = getState();
+    dispatch(setIsSaving({ ...isSaving, save: true, saveAdd: !!add }));
+    try {
+      const result = await images.updateImage(imageID, imageData);
+      if (isReqOk(result.status)) {
+        console.log(result.data, "data");
+        dispatch(setData({ ...result.data, isImageSelected: false, imageSelected: null }));
+      }
+    } catch (e) {
+      console.log(e);
+    }
+    dispatch(setIsSaving({ ...isSaving, save: false, saveAdd: false }));
+  };
+}
+
+function deleteImage(imageID: number): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
+  return async (dispatch) => {
+    try {
+      const responseActions = {
+        handleSuccess: () => true,
+        handleError: (response: any) => {
+          appActions.handleError(response)(dispatch);
+          return false;
+        },
+      };
+
+      const callback = async () => images.deleteImage(imageID);
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+export { setIsLoading, getSiteImages, uploadImage, updateImage, deleteImage, selectImage, uploadError };

package/src/containers/Gallery/constants.tsx

@@ -0,0 +1,18 @@
+const NAME = "gallery";
+
+const SET_DATA = `${NAME}/SET_DATA`;
+const SET_IS_LOADING = `${NAME}/SET_IS_LOADING`;
+const SET_IS_SAVING = `${NAME}/SET_IS_SAVING`;
+const SET_IS_UPLOADING = `${NAME}/SET_IS_UPLOADING`;
+const SET_UPLOAD_SUCCESS = `${NAME}/SET_UPLOAD_SUCCESS`;
+const SET_UPLOAD_ERROR = `${NAME}/SET_UPLOAD_ERROR`;
+
+export {
+  NAME,
+  SET_DATA,
+  SET_IS_LOADING,
+  SET_IS_SAVING,
+  SET_IS_UPLOADING,
+  SET_UPLOAD_SUCCESS,
+  SET_UPLOAD_ERROR,
+};

package/src/containers/Gallery/index.tsx

@@ -0,0 +1,7 @@
+import * as galleryActions from "./actions";
+import { galleryReducer } from "./reducer";
+
+export {
+  galleryActions,
+  galleryReducer
+}

package/src/containers/Gallery/interfaces.tsx

@@ -0,0 +1,41 @@
+import { IData, IIsLoading, IIsSaving } from "./reducer";
+import {
+  SET_DATA,
+  SET_IS_LOADING,
+  SET_IS_SAVING,
+  SET_IS_UPLOADING,
+  SET_UPLOAD_SUCCESS,
+  SET_UPLOAD_ERROR,
+} from "./constants";
+
+export interface ISetData {
+  type: typeof SET_DATA;
+  payload: { data: IData };
+}
+
+export interface ISetIsLoading {
+  type: typeof SET_IS_LOADING;
+  payload: { isLoading: IIsLoading };
+}
+
+export interface ISetIsSaving {
+  type: typeof SET_IS_SAVING;
+  payload: { isSaving: IIsSaving };
+}
+
+export interface ISetIsUploading {
+  type: typeof SET_IS_UPLOADING;
+  payload: { isUploading: boolean };
+}
+
+export interface ISetUploadSuccess {
+  type: typeof SET_UPLOAD_SUCCESS;
+  payload: { isUploading: boolean, isSuccess: boolean };
+}
+
+export interface ISetUploadError {
+  type: typeof SET_UPLOAD_ERROR;
+  payload: { inDropZone: boolean, isUploading: boolean, isError: boolean, errorMsg: string };
+}
+
+export type GalleryActionsCreators = ISetData & ISetIsLoading & ISetIsSaving & ISetIsUploading & ISetUploadSuccess & ISetUploadError;

package/src/containers/Gallery/reducer.tsx

@@ -0,0 +1,78 @@
+import { IImage } from "@ax/types";
+import {
+  SET_DATA,
+  SET_IS_LOADING,
+  SET_IS_SAVING,
+  SET_IS_UPLOADING,
+  SET_UPLOAD_SUCCESS,
+  SET_UPLOAD_ERROR,
+} from "./constants";
+import { GalleryActionsCreators } from "./interfaces";
+
+export interface IData {
+  items: IImage[];
+  isImageSelected: boolean;
+  imageSelected: IImage | null;
+  page: number;
+  isFinished: boolean;
+}
+
+export interface IIsLoading {
+  init: boolean;
+  more: boolean;
+}
+
+export interface IIsSaving {
+  save: boolean;
+  saveAdd: boolean;
+  delete: boolean;
+}
+
+export interface IGalleryState {
+  data: IData;
+  isLoading: IIsLoading;
+  isSaving: IIsSaving;
+  isUploading: boolean;
+  isSuccess: boolean;
+  isError: boolean;
+  errorMsg: string;
+}
+
+export const initialState = {
+  data: {
+    items: [],
+    isImageSelected: false,
+    imageSelected: null,
+    page: 1,
+    isFinished: false,
+  },
+  isLoading: {
+    init: false,
+    more: false,
+  },
+  isSaving: {
+    save: false,
+    saveAdd: false,
+    delete: false
+  },
+  isUploading: false,
+  isSuccess: false,
+  isError: false,
+  errorMsg: "",
+};
+
+export function reducer(state = initialState, action: GalleryActionsCreators): IGalleryState {
+  switch (action.type) {
+    case SET_DATA:
+    case SET_IS_LOADING:
+    case SET_IS_SAVING:
+    case SET_IS_UPLOADING:
+    case SET_UPLOAD_SUCCESS:
+    case SET_UPLOAD_ERROR:
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+}
+
+export { initialState as galleryInitialState, reducer as galleryReducer };

package/src/containers/PageEditor/actions.tsx

@@ -173,8 +173,13 @@ const setRootEditorID = (dispatch: Dispatch, getState: any) => {
 };
 
 function generateNewPage(dispatch: Dispatch, getState: any, baseSchema: string) {
-  const { template } = getState().pageEditor;
-  const { site } = getState().structuredData.structuredData;
+  const {
+    structuredData: {
+      structuredData: { site },
+    },
+    pageEditor: { template },
+    app: { lang },
+  } = getState();
 
   let page = getDefaultSchema(baseSchema);
   const parsedPageData = parseData(page, true);
@@ -182,7 +187,7 @@ function generateNewPage(dispatch: Dispatch, getState: any, baseSchema: string)
   const pageStructuredData = getStructuredDataFromPage(site);
   const structuredData = pageStructuredData && getCurrentPageStructuredData(template, pageStructuredData);
 
-  page = { ...parsedPageData, template: currentTemplate };
+  page = { ...parsedPageData, template: currentTemplate, language: lang.id };
 
   if (structuredData) {
     page.structuredData = structuredData.id;
@@ -250,6 +255,12 @@ function getPage(pageID?: number, global?: boolean): (dispatch: Dispatch, getSta
 
         if (global) page["component"] = component;
 
+        const pageLiveStatus = page.draftFromPage
+          ? pageStatus.MODIFIED
+          : isNewTranslation
+          ? pageStatus.OFFLINE
+          : page.liveStatus.status;
+
         if (isReqOk(response.status)) {
           setRootEditorID(dispatch, getState);
           generatePageContent(page, dispatch, getState);
@@ -257,8 +268,7 @@ function getPage(pageID?: number, global?: boolean): (dispatch: Dispatch, getSta
           dispatch(setCurrentPageID(page.id));
           dispatch(setTemplateConfig(page.templateConfig));
           dispatch(setUserEditing(page.editing));
-          const liveStatus = page.draftFromPage ? pageStatus.MODIFIED : page.liveStatus.status;
-          dispatch(setCurrentPageStatus(liveStatus));
+          dispatch(setCurrentPageStatus(pageLiveStatus));
         }
       } else {
         if (!isNewTranslation) {

package/src/containers/StructuredData/actions.tsx

@@ -291,7 +291,6 @@ function createStructuredDataContent(
       const {
         app: { lang },
         sites: { currentSiteInfo },
-        structuredData: { currentFilter },
       } = getState();
 
       dataContent = {
@@ -300,15 +299,8 @@ function createStructuredDataContent(
         relatedSite: currentSiteInfo && currentSiteInfo.id,
       };
 
-      const params = { ...DEFAULT_PARAMS, dataID: currentFilter };
-
-      const siteID = currentSiteInfo && currentSiteInfo.id;
-
       const responseActions = {
-        handleSuccess: (response: any) => {
-          getStructuredDataContents(params, siteID)(dispatch, getState);
-          dispatch(setForm(response));
-        },
+        handleSuccess: (response: any) => dispatch(setForm(response)),
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 
@@ -325,22 +317,13 @@ function createStructuredDataContent(
 
 function updateStructuredDataContent(
   structuredDataContent: IStructuredDataContent
-): (dispatch: Dispatch, getState: any) => Promise<void> {
-  return async (dispatch, getState) => {
+): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
     try {
-      const {
-        structuredData: { currentFilter },
-        sites: { currentSiteInfo },
-      } = getState();
-
-      const params = { ...DEFAULT_PARAMS, dataID: currentFilter };
-
-      const siteID = currentSiteInfo && currentSiteInfo.id;
-
       const dataContent = prepareStructuredDataContent(structuredDataContent);
 
       const responseActions = {
-        handleSuccess: () => getStructuredDataContents(params, siteID)(dispatch, getState),
+        handleSuccess: (response: any) => dispatch(setForm(response)),
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 

package/src/forms/fields.tsx

@@ -3,7 +3,7 @@ import { FieldContainer, FieldsBehavior } from "@ax/components";
 import { IErrorItem, IPage } from "@ax/types";
 
 const getInnerFields = (
-  innerFields: any,
+  innerFields: any[],
   innerActions: any,
   selectedContent: IPage,
   isTemplateActivated: boolean,
@@ -49,22 +49,35 @@ const getInnerFields = (
   );
 };
 
-const getStructuredDataInnerFields = (innerFields: any) => {
+const getStructuredDataInnerFields = (
+  innerFields: any[],
+  content: any,
+  updateValue: (value: Record<string, unknown>) => void
+) => {
   let fieldArr: any[] = [];
 
   return (
     innerFields &&
     innerFields.map((singleFieldProps: any) => {
-      const { key } = singleFieldProps;
+      const { key, type, fields } = singleFieldProps;
 
-      if (singleFieldProps.type === "ConditionalField" || singleFieldProps.type === "ArrayFieldGroup") {
-        fieldArr = getStructuredDataInnerFields(singleFieldProps.fields);
+      const handleChange = (newValue: any) => {
+        updateValue({ [key]: newValue });
+      };
+
+      const value = content && content[key];
+
+      if (type === "ConditionalField" || type === "ArrayFieldGroup") {
+        fieldArr = getStructuredDataInnerFields(fields, content, updateValue);
       }
 
       const fieldProps = {
+        value,
         objKey: key,
-        fieldType: singleFieldProps.type,
+        fieldType: type,
         innerFields: fieldArr,
+        field: singleFieldProps,
+        onChange: handleChange,
         ...singleFieldProps,
       };
 

package/src/guards/error/index.tsx

@@ -24,7 +24,9 @@ const ErrorGuard = (props: IProps) => {
   const isBlocking = blockingErrors.includes(code);
 
   const createErrorNotification = () => {
-    const domNode = document.getElementById("error") || document.getElementById("default-error");
+    const errorElements = document.querySelectorAll("#error");
+    const lastErrorElement = errorElements.length - 1;
+    const domNode = errorElements[lastErrorElement] || document.getElementById("default-error");
 
     const isMultiple = Array.isArray(text);
 

package/src/modules/Content/HeaderMenus/Live/index.tsx

@@ -1,14 +1,15 @@
 import React, { useState, useEffect } from "react";
 
 import { CheckGroup, Icon, FloatingMenu, ListTitle } from "@ax/components";
-
 import { checkgroups } from "@ax/api";
-
 import { areEquals, isReqOk } from "@ax/helpers";
+import { IPageLiveStatus } from "@ax/types";
 
 import * as S from "./style";
 
-const Live = ({ filterItems }: ILiveProps) => {
+const Live = (props: ILiveProps): JSX.Element => {
+  const { filterItems } = props;
+
   const filters: Array<{ name: string; value: string; title: string; icon?: string }> = [
     {
       name: "all",
@@ -37,9 +38,9 @@ const Live = ({ filterItems }: ILiveProps) => {
   useEffect(() => {
     getLiveStatusValues()
       .then((items) => {
-        items.forEach((item: any) => {
+        items.forEach((item: IPageLiveStatus) => {
           const newFilter = {
-            name: item.id,
+            name: item.status,
             value: item.status,
             title: item.title,
             icon: item.status,

package/src/modules/Sites/SitesList/index.tsx

@@ -45,7 +45,7 @@ const SitesList = (props: IProps): JSX.Element => {
 
   return (
     <MainWrapper title="Sites" rightButton={rightButtonProps}>
-      {!isOpen && <ErrorToast />}
+      <ErrorToast />
       <S.Sites>
         {sites.map((site: ISite) => (
           <SiteItem key={site.id} site={site} />

package/src/modules/StructuredData/Form/ConnectedField/index.tsx

@@ -23,7 +23,7 @@ const ConnectedField = (props: IProps) => {
   let innerFields: JSX.Element[] = [];
 
   if (isConditional || isArrayGroup) {
-    innerFields = getStructuredDataInnerFields(field.fields);
+    innerFields = getStructuredDataInnerFields(field.fields, form.content, updateFormValue);
   }
 
   const fieldProps = {

package/src/modules/StructuredData/Form/index.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 
 import { IDataPack, IRootState } from "@ax/types";
 import { structuredDataActions } from "@ax/containers/StructuredData";
-import { MainWrapper, ErrorToast, Notification } from "@ax/components";
+import { MainWrapper, ErrorToast, Notification, Loading } from "@ax/components";
 import { getActivatedDataPacksIds } from "@ax/helpers";
 import { appActions } from "@ax/containers/App";
 import { RouteLeavingGuard } from "@ax/guards";
@@ -24,6 +24,7 @@ const Form = (props: IProps) => {
     createStructuredDataContent,
     updateStructuredDataContent,
     isSaving,
+    isLoading,
     siteLanguages,
     globalLangs,
     currentSite,
@@ -91,14 +92,14 @@ const Form = (props: IProps) => {
 
   const inversed = !currentSite;
 
-  const setIsNewTranslation = (value: boolean) => {
+  const createNewTranslation = (value: boolean) => {
     setisNewStructuredData(value);
   };
 
   const languageActions = {
     setLanguage,
     getDataContent,
-    setIsNewTranslation,
+    createNewTranslation,
   };
 
   const languages = currentSite ? siteLanguages : globalLangs;
@@ -202,7 +203,9 @@ const Form = (props: IProps) => {
     languageActions: isDataTranslatable ? languageActions : null,
   };
 
-  return (
+  return isLoading ? (
+    <Loading />
+  ) : (
     <>
       <RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
       <MainWrapper
@@ -218,6 +221,7 @@ const Form = (props: IProps) => {
         pageStatus={status}
         downArrowMenu={downArrowMenu}
         isFromEditor={true}
+        currentPageID={form.id}
       >
         {isDisabled && (
           <S.NotificationWrapper>
@@ -242,6 +246,7 @@ interface IProps {
   site: any;
   currentStructuredData: any;
   isSaving: boolean;
+  isLoading: boolean;
   siteLanguages: any[];
   globalLangs: any[];
   currentSite: any;
@@ -263,6 +268,7 @@ const mapStateToProps = (state: IRootState) => ({
   site: state.sites.currentSiteInfo,
   currentStructuredData: state.structuredData.currentStructuredData,
   isSaving: state.app.isSaving,
+  isLoading: state.app.isLoading,
   lang: state.app.lang,
   siteLanguages: state.sites.currentSiteLanguages,
   globalLangs: state.app.globalLangs,

package/src/modules/StructuredData/StructuredDataList/HeaderMenus/Live/index.tsx

@@ -42,7 +42,7 @@ const Live = (props: ILiveProps): JSX.Element => {
       .then((items) => {
         items.forEach((item: IPageLiveStatus) => {
           const newFilter = {
-            name: item.id,
+            name: item.status,
             value: item.status,
             title: item.title,
             icon: item.status,

package/src/types/index.tsx

@@ -7,6 +7,7 @@ import { IStructuredDataState } from "@ax/containers/StructuredData/reducer";
 import { ILanguageState } from "@ax/containers/Settings/Languages/reducer";
 import { IDataPacksState } from "@ax/containers/Settings/DataPacks/reducer";
 import { IUsersState } from "@ax/containers/Users/reducer";
+import { IGalleryState } from "@ax/containers/Gallery/reducer";
 
 export interface IBreadcrumbItem {
   editorID: number;
@@ -147,6 +148,7 @@ export interface IImage {
   thumb: string;
   tags: string[];
   file: File;
+  orientation: string;
 }
 
 export interface IUrlField {
@@ -175,6 +177,7 @@ export interface IRootState {
   dataPacks: IDataPacksState;
   social: ISocialState;
   users: IUsersState;
+  gallery: IGalleryState;
 }
 
 export interface IStyledProps {
@@ -618,6 +621,23 @@ export interface IUserEditing {
   username: string;
 }
 
+export interface IGetSiteImages {
+  site: number | string;
+  page?: number;
+  items: number;
+  query?: string;
+  search?: string;
+  more?: boolean;
+}
+
+export interface IImageForm {
+  id?: number;
+  alt: string;
+  title: string;
+  description: string;
+  tags: string[];
+}
+
 export type Field =
   | "AsyncCheckGroup"
   | "AsyncSelect"