@griddo/ax 1.55.14 → 1.56.2

package/src/components/Gallery/style.tsx

@@ -1,7 +1,11 @@
 import styled from "styled-components";
 
-const gutter = "16px";
-const columns = "5";
+const gutter = "6px";
+const imageSizes: Record<string, number> = {
+  "S": 2.5,
+  "L": 4,
+  "P": 1.75
+}
 
 export const Wrapper = styled.div`
   display: flex;
@@ -53,6 +57,7 @@ export const GalleryWrapper = styled.div`
   overflow: auto;
   padding-right: ${gutter};
   min-height: calc(100% - ${p => p.theme.spacing.xl} * 2);
+  position: relative;
 `;
 
 export const IconChecked = styled.div`
@@ -86,26 +91,37 @@ export const IconUnchecked = styled.div`
 export const Grid = styled.div`
   display: flex;
   flex-flow: row wrap;
+  align-content: flex-start;
+  align-items: stretch;
   padding: ${p => p.theme.spacing.m};
   margin: 0 -${gutter};
   margin-top: -${gutter};
   border-right: 1px solid ${p => p.theme.color.uiLine};
   min-height: calc(100% + ${gutter});
+
+  &::after {
+    content: "";
+    flex: auto;
+  }
 `;
 
-export const GridItem = styled.div`
-  width: calc(100% / ${columns});
+export const GridItem = styled.div<{ orientation: string }>`
   padding-left: ${gutter};
   padding-top: ${gutter};
+  flex: ${p => p.orientation === "P" ? 0 : 1};
+
+  &:last-child {
+    flex: 0;
+  }
 `;
 
-export const ImageWrapper = styled.div<{ selected: boolean }>`
+export const ImageWrapper = styled.div<{ selected: boolean, orientation: string }>`
   position: relative;
-  width: ${p => `calc(${p.theme.spacing.xl} * 2)`};
-  height: ${p => `calc(${p.theme.spacing.l} * 2)`};
+  min-width: ${p => `calc(${p.theme.spacing.l} * ${imageSizes[p.orientation]})`};
+  width: ${p => p.orientation === "P" ? `calc(${p.theme.spacing.l} * ${imageSizes["P"]})` : "auto"};
+  height: ${p => `calc(${p.theme.spacing.l} * ${imageSizes["S"]})`};
   border: 1px solid;
   border-color: ${p => (p.selected === true ? p.theme.color.interactive02 : p.theme.color.uiLine)};
-  border-radius: 4px;
   :before {
     content: "";
     position: absolute;
@@ -116,7 +132,6 @@ export const ImageWrapper = styled.div<{ selected: boolean }>`
     opacity: ${p => (p.selected === true ? 1 : 0)};
     transition: opacity 0.1s;
     background-color: ${p => (p.selected === true ? p.theme.color.overlay : `transparent`)};
-    border-radius: 4px;
   }
   :hover {
     cursor: pointer;
@@ -133,7 +148,6 @@ export const ImageWrapper = styled.div<{ selected: boolean }>`
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: 4px;
   }
   ${IconChecked} {
     display: ${p => (p.selected === true ? `block` : 0)};
@@ -156,10 +170,26 @@ export const LoadingWrapper = styled.div`
 export const LoaderWrapper = styled.div`
   width: 100%;
   text-align: center;
+  margin-bottom: ${p => p.theme.spacing.s};
 `;
 
 export const EmptyWrapper = styled.div`
   display: flex;
   align-items: center;
   margin: auto;
+  align-content: center;
+  padding: ${p => p.theme.spacing.m};
+  margin: 0 -${gutter};
+  margin-top: -${gutter};
+  border-right: 1px solid ${p => p.theme.color.uiLine};
+  min-height: calc(100% + ${gutter});
+`;
+
+export const NotificationWrapper = styled.div`
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
 `;

package/src/components/MainWrapper/AppBar/index.tsx

@@ -84,6 +84,7 @@ const AppBar = (props: IProps): JSX.Element => {
     if (pageLanguages && !getCurrentLanguage(item.locale)) {
       setNewTranslation(true);
       languageActions.getContent && currentPageID && languageActions.getContent(currentPageID);
+      languageActions.getDataContent && currentPageID && languageActions.getDataContent(currentPageID);
     }
   };
 

package/src/components/Toast/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useEffect } from "react";
 
 import { createPortal } from "react-dom";
 import { Button, IconAction } from "@ax/components";
@@ -10,22 +10,28 @@ const Toast = (props: IProps) => {
   const toast = useRef<any>(null);
 
   let temp: any;
-  const setTemp = () => (temp = setTimeout(() => setIsVisible(false), 2000));
-  const stopTemp = () => clearTimeout(temp);
+  const setTemp = (time: number) => (temp = setTimeout(() => setIsVisible(false), time));
 
   const close = () => {
     toast.current.classList.add("close-animation");
-    setTemp();
-    stopTemp();
+    setTemp(1000);
   };
 
+  useEffect(() => {
+    setTemp(5000);
+    return () => clearTimeout(temp);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return createPortal(
     <S.Wrapper ref={toast}>
       <S.Text>{message}</S.Text>
       <S.Buttons>
-        <Button type="button" buttonStyle="lineInverse" onClick={action}>
-          Undo
-        </Button>
+        {action &&
+          <Button type="button" buttonStyle="lineInverse" onClick={action}>
+            Undo
+          </Button>
+        }
         <IconAction icon="close" onClick={close} inversed={true} />
       </S.Buttons>
     </S.Wrapper>,
@@ -34,7 +40,7 @@ const Toast = (props: IProps) => {
 };
 
 interface IProps {
-  action: () => void;
+  action?: () => void;
   message: string;
   setIsVisible: (visibility: boolean) => void;
 }

package/src/components/Toast/style.tsx

@@ -8,8 +8,8 @@ const Wrapper = styled.div`
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
-   position: absolute;
-   z-index: 1;
+   position: fixed;
+   z-index: 1100;
    bottom: ${p => p.theme.spacing.m};
    left: ${p => `calc(${p.theme.spacing.m} * 4)`};
    padding-left: ${p => p.theme.spacing.m};

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,