@griddo/ax 1.63.3 → 1.64.0

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

@@ -90,6 +90,8 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   const lastPage = Math.ceil(totalItems / itemsPerPage);
   const isLastItem = page === lastPage && currentSitePages.length === 1;
 
+  const [structuredDataType, setStructuredDataType] = useState("all");
+
   const [isScrolling, setIsScrolling] = useState(false);
   const [deletedItem, setDeletedItem] = useState<number | number[] | null>(null);
   const { isVisible: isDataToast, toggleToast: toggleDataToast, setIsVisible: setIsDataToast } = useToast();
@@ -102,7 +104,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   const { isOpen: isNewOpen, toggleModal: toggleNewModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
-  const { setFiltersSelection, setFilterQuery, filterValues, resetFilterQuery } = useFilterQuery();
+  const { setFiltersSelection, setFilterQuery, filterValues, resetFilterQuery } = useFilterQuery(currentStructuredData);
   const [currentFilterQuery, setCurrentFilterQuery] = useState("");
   const history = useHistory();
   const [isFirstRender, setIsFirstRender] = useState(true);
@@ -130,20 +132,24 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     live: { title: "Live", show: true },
     status: { title: "Status", show: true },
     translation: { title: "Trans.", show: true },
-    seo: { title: "SEO", show: true },
+    ...(isStructuredDataFromPage && { seo: { title: "SEO", show: true } }),
   };
 
   const extraColumns = categoryColumns.reduce((acc: Record<string, IColumn>, cur: any) => {
-    acc[cur.key] = { title: cur.title, show: false };
+    acc[cur.key] = { title: cur.title, show: !isStructuredDataFromPage };
     return acc;
   }, {});
 
   const allColumns = { type: { title: "Types", show: true }, ...extraColumns, ...defaultColumns };
-  const filterColumns = { site: { title: "Site", show: true }, ...extraColumns, ...defaultColumns };
+  const filterColumns = {
+    ...(isStructuredDataFromPage && { site: { title: "Site", show: true } }),
+    ...extraColumns,
+    ...defaultColumns,
+  };
 
   const initialColumns = isAllPages ? allColumns : filterColumns;
 
-  const [columnsState, setColumnsState] = useState(initialColumns);
+  const [columnsState, setColumnsState] = useState<Record<string, any>>({ all: allColumns });
 
   const {
     resetBulkSelection,
@@ -186,8 +192,10 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     getGlobalPages(params, currentFilterQuery);
   };
 
+  const handleGetStructuredData = () => getStructuredData(filter, currentFilterQuery);
+
   const handleGetData = () => {
-    isStructuredDataFromPage ? handleGetGlobalPages() : getStructuredData(filter, currentFilterQuery);
+    isStructuredDataFromPage ? handleGetGlobalPages() : handleGetStructuredData();
   };
 
   const resetFilter = () => {
@@ -196,37 +204,52 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     }
   };
 
+  const changeColumnsState = (updatedColumns: any) => {
+    setColumnsState((state) => ({ ...state, [structuredDataType]: updatedColumns }));
+  };
+
   useLayoutEffect(() => {
     resetFilter();
-    handleGetData();
     setIsFirstRender(false);
     resetPageEditor();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    const isGlobalData = structuredData.global.some((data) => data.id === currentStructuredData?.id);
+    const type = currentStructuredData && isGlobalData ? currentStructuredData.id : "all";
+    setStructuredDataType(type);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentStructuredData]);
+
   useEffect(() => {
     filterItems("types", "all");
     if (filter === "all-pages" || !isStructuredDataFromPage) {
       filterItems("filterSites", "all");
     }
     unselectAllItems();
-    if (filter === "all-pages") {
-      setColumnsState(filter === "all-pages" ? allColumns : filterColumns);
-    } else {
-      setColumnsState({ site: { title: "Site", show: true }, ...extraColumns, ...initialColumns });
+    if (filter !== "all-pages" && currentStructuredData) {
+      setColumnsState((state) => ({
+        [currentStructuredData.id]: {
+          site: { title: "Site", show: true },
+          ...extraColumns,
+          ...initialColumns,
+        },
+        ...state,
+      }));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filter]);
 
   useEffect(() => {
-    if (!isFirstRender || filter === "all-pages") {
+    if (!isFirstRender) {
       handleGetData();
     }
     if (tableRef.current) {
       tableRef.current.scrollTo(0, 0);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filter, lang.locale, page, searchQuery, currentFilterQuery]);
+  }, [lang.locale, page, searchQuery, filterValues]);
 
   useEffect(() => {
     if (wrapperRef.current) {
@@ -241,7 +264,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   };
 
   useEffect(() => {
-    if (!isLoading) {
+    if (!isFirstRender && !isLoading) {
       const emptyState: IEmptyStateProps = {};
       const isSearching = searchQuery.length > 0;
       if (isSearching) {
@@ -277,8 +300,6 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   };
 
   const handleMenuClick = (dataID: string) => {
-    resetFilterQuery();
-    setCurrentFilterQuery("");
     setPage(firstPage);
     setSelectedStructuredData(dataID, scope);
   };
@@ -383,11 +404,14 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 
   const filterItems = async (filterPointer: string, filtersSelected: string) => {
     setPage(firstPage);
+    if (!isStructuredDataFromPage && filterPointer === "categories") filterPointer = "related";
     const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
     const filterQuery = setFilterQuery(filtersSelection);
     setCurrentFilterQuery(filterQuery);
   };
 
+  const currentDataColumnsState = currentStructuredData ? columnsState[structuredDataType] || [] : columnsState["all"];
+
   const TableHeader = (
     <BulkHeader
       showBulk={areItemsSelected(dataIds)}
@@ -404,11 +428,11 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       sortItems={sortItems}
       sortedListStatus={sortedListStatus}
       filterItems={filterItems}
-      filterValues={filterValues}
+      filterValues={filterValues[structuredDataType]}
       isAllPages={isAllPages}
       categoryColumns={categoryColumns}
-      columns={columnsState}
-      setColumns={setColumnsState}
+      columns={currentDataColumnsState}
+      setColumns={changeColumnsState}
     />
   );
 
@@ -470,6 +494,10 @@ const StructuredDataList = (props: IProps): JSX.Element => {
           setDeletedItem={setDeletedItem}
           isEditable={isDataEditable}
           activatedDataPacks={activatedDataPacks}
+          categoryColumns={categoryColumns}
+          columns={columnsState}
+          categoryColors={categoryColors}
+          addCategoryColors={addCategoryColors}
         />
       );
     });
@@ -498,7 +526,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
           toggleToast={togglePageToast}
           setDeletedItem={setDeletedItem}
           categoryColumns={categoryColumns}
-          columns={columnsState}
+          columns={currentDataColumnsState}
           categoryColors={categoryColors}
           addCategoryColors={addCategoryColors}
         />

package/src/modules/Users/Profile/index.tsx

@@ -3,21 +3,22 @@ import { connect } from "react-redux";
 
 import { appActions } from "@ax/containers/App";
 import { usersActions } from "@ax/containers/Users";
+import { sitesActions } from "@ax/containers/Sites";
 import { Loading, MainWrapper } from "@ax/components";
 import { IRootState, IUser } from "@ax/types";
 import { useURLSearchParam } from "@ax/hooks";
+
 import UserForm from "../UserForm";
 
 const Profile = (props: IProps) => {
-  const { user, getUser, updateUser, isSaving, isLoading } = props;
+  const { user, getUser, updateUser, isSaving, isLoading, getSites, token } = props;
 
   const isUserInit = useURLSearchParam("init");
 
-  const [form, setForm] = useState<any>({});
-  const { id } = form;
+  const [form, setForm] = useState<IUser>({ ...user });
 
   useEffect(() => {
-    if (!isUserInit) getUser("me");
+    isUserInit ? getSites(token) : getUser("me");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -29,7 +30,7 @@ const Profile = (props: IProps) => {
   }, [user]);
 
   const handleSave = () => {
-    updateUser(id, form, true);
+    form.id && updateUser(form.id, form, true, false);
   };
 
   const rightButtonProps = {
@@ -42,7 +43,7 @@ const Profile = (props: IProps) => {
 
   return (
     <MainWrapper title="My Profile" rightButton={rightButtonProps}>
-      <UserForm form={form} setForm={setForm} user={user} />
+      <UserForm form={form} setForm={setForm} user={user} readOnlySites={true} />
     </MainWrapper>
   );
 };
@@ -51,24 +52,28 @@ const mapStateToProps = (state: IRootState) => ({
   user: state.users.currentUser,
   isSaving: state.app.isSaving,
   isLoading: state.app.isLoading,
+  token: state.app.token,
 });
 
 interface IDispatchProps {
   setHistoryPush(path: string): any;
   getUser(id: string): any;
-  updateUser(id: number, data: any, isProfile: boolean): any;
+  getSites(token: string): Promise<void>;
+  updateUser(id: number, data: any, isProfile: boolean, isList: boolean): any;
 }
 
 const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
   getUser: usersActions.getUser,
   updateUser: usersActions.updateUser,
+  getSites: sitesActions.getSites,
 };
 
 interface IProfileProps {
   user: IUser;
   isSaving: boolean;
   isLoading: boolean;
+  token: string;
 }
 
 type IProps = IProfileProps & IDispatchProps;

package/src/modules/Users/UserCreate/SiteItem/index.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import { CheckField } from "@ax/components";
+
+import * as S from "./style";
+
+const SiteItem = (props: IProps) => {
+  const { item, sites, disabled = false, readOnly = false } = props;
+  const { name, id, onChange } = item;
+  const isSelected = sites.includes(id);
+
+  const onClick = (e: React.MouseEvent) => {
+    if (readOnly) return;
+    e.preventDefault();
+    e.stopPropagation();
+    onChange();
+  };
+
+  return (
+    <S.SiteItem
+      disabled={disabled}
+      role="rowgroup"
+      readOnly={readOnly}
+      selected={!readOnly && isSelected}
+      onClick={onClick}
+    >
+      {!readOnly ? (
+        <S.CheckCell role="cell">
+          <CheckField disabled={disabled} name="check" value={id} checked={isSelected} onChange={onChange} />
+        </S.CheckCell>
+      ) : null}
+      <S.NameCell disabled={disabled}>{name}</S.NameCell>
+    </S.SiteItem>
+  );
+};
+
+interface IProps {
+  item: { name: string; id: number | string; onChange: () => void };
+  sites: (string | number)[];
+  disabled?: boolean;
+  readOnly?: boolean;
+}
+
+export default SiteItem;

package/src/modules/Users/UserCreate/SiteItem/style.tsx

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { Cell, Row } from "@ax/components/TableList/TableItem/style";
+
+const CheckCell = styled(Cell)`
+  padding-left: ${(p) => p.theme.spacing.m};
+  width: 32px;
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const NameCell = styled(Cell)<{ disabled?: boolean }>`
+  width: 40%;
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textHighEmphasis)};
+`;
+
+const SiteItem = styled(Row)<{ disabled?: boolean; readOnly?: boolean }>`
+  pointer-events: ${(p) => (p.disabled || p.readOnly ? "none" : "auto")};
+  &:hover {
+    background-color: ${(p) =>
+      p.readOnly
+        ? p.theme.color.uiBackground02
+        : p.selected
+        ? p.theme.color.overlayPressedPrimary
+        : p.theme.color.overlayHoverPrimary};
+  }
+`;
+
+export { CheckCell, NameCell, SiteItem };

package/src/modules/Users/UserCreate/index.tsx

@@ -1,16 +1,25 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
+import { ISite, IRootState, IUser } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { usersActions } from "@ax/containers/Users";
-import { ErrorToast, FieldsBehavior, MainWrapper } from "@ax/components";
+import { ErrorToast, FieldsBehavior, MainWrapper, SearchField, Notification } from "@ax/components";
+import SiteItem from "./SiteItem";
 
 import * as S from "./style";
 
 const UserCreate = (props: IProps) => {
-  const { setHistoryPush, createUser } = props;
+  const { setHistoryPush, createUser, sites, site, users, updateUser } = props;
+  const isSiteView = !!site;
+  const initState: any = { name: "", email: "", sites: isSiteView ? [site.id] : ["all"] };
+  const getSortedSitesByName = (sites: any) =>
+    sites.sort((site1: any, site2: any) => site1.name.localeCompare(site2.name));
+  const sortedByNameSites = getSortedSitesByName(sites);
 
-  const initState = { name: "", email: "", sites: ["all"] };
+  const [sitesList, setSiteList] = useState(sortedByNameSites);
   const [state, setState] = useState(initState);
+  const [userAlreadyExists, setUserAlreadyExists] = useState(false);
+  const BASE_URL = isSiteView ? "/sites/users" : "/users";
 
   const handleNameChange = (value: string) => {
     setState({ ...state, name: value });
@@ -21,11 +30,28 @@ const UserCreate = (props: IProps) => {
   };
 
   const handleCreate = () => {
-    createUser(state).then((created: boolean) => {
-      if (created) {
-        setHistoryPush("/users");
+    const { email } = state;
+    const globalUser = users.find((user) => user.email === email);
+    setUserAlreadyExists(false);
+
+    if (isSiteView && globalUser?.id) {
+      const { id, sites } = globalUser;
+      const userAlreadyExists = sites[0] === "all" || sites.includes(site.id);
+      if (userAlreadyExists) {
+        setUserAlreadyExists(true);
+      } else {
+        const form = { ...globalUser, sites: [...sites, site.id] };
+        updateUser(id, form, false).then(() => {
+          setHistoryPush(BASE_URL);
+        });
       }
-    });
+    } else {
+      createUser(state).then((created: boolean) => {
+        if (created) {
+          setHistoryPush(BASE_URL);
+        }
+      });
+    }
   };
 
   const rightButtonProps = {
@@ -35,12 +61,47 @@ const UserCreate = (props: IProps) => {
 
   const name = state.name.trim() === "" ? "Name" : state.name;
 
+  const selectAllSites = () => {
+    const { sites } = state;
+    if (sites.includes("all")) {
+      const filteredSites = sites.filter((site: number | string) => site !== "all");
+      const sortedSites = getSortedSitesByName(filteredSites);
+      setState({ ...state, sites: sortedSites });
+    } else {
+      setState({ ...state, sites: ["all"] });
+    }
+  };
+
+  const selectSite = (id: number) => {
+    const { sites } = state;
+    if (sites.includes(id)) {
+      const filteredSites = sites.filter((site: number | string) => site !== id && site !== "all");
+      setState({ ...state, sites: filteredSites });
+    } else {
+      const filteredSites: string[] | number[] = [...sites].filter((site) => site !== "all");
+      setState({ ...state, sites: [...filteredSites, id] });
+    }
+  };
+
+  const filterSitesList = (query: string) => {
+    const filteredSites = sites.filter((site) =>
+      site.name.toLowerCase().replace(" ", "").includes(query.toLowerCase().replace(" ", ""))
+    );
+    const sortedSites = getSortedSitesByName(filteredSites);
+    setSiteList(sortedSites);
+  };
+
   return (
     <>
       <MainWrapper backLink={true} title="New User" rightButton={rightButtonProps}>
         <ErrorToast size="l" />
+        {userAlreadyExists && (
+          <S.NotificationWrapper>
+            <Notification type="error" text="User already has access to this site." />
+          </S.NotificationWrapper>
+        )}
         <S.Wrapper>
-          <S.SubTitle>USER DATA</S.SubTitle>
+          <S.SubTitle>User data</S.SubTitle>
           <S.NameTitle>{name}</S.NameTitle>
           <FieldsBehavior
             title="Name"
@@ -60,20 +121,69 @@ const UserCreate = (props: IProps) => {
             value={state.email}
             onChange={handleEmailChange}
           />
+          {isSiteView ? null : (
+            <>
+              <S.SettingsWrapper>
+                <S.Heading>Sites assigned</S.Heading>
+                <S.SettingContent>
+                  <S.SettingText>You can give access to one or more sites to this user.</S.SettingText>
+                </S.SettingContent>
+              </S.SettingsWrapper>
+              <S.SelectAllSitesFieldWrapper>
+                <SiteItem
+                  sites={state.sites}
+                  item={{ name: "Access to All Sites", id: "all", onChange: selectAllSites }}
+                />
+              </S.SelectAllSitesFieldWrapper>
+              <S.SubTitle>Sites list</S.SubTitle>
+              <S.SearchFieldWrapper>
+                <SearchField
+                  disabled={state.sites[0] === "all"}
+                  placeholder="Search"
+                  onChange={filterSitesList}
+                  searchOnEnter={false}
+                />
+              </S.SearchFieldWrapper>
+              {sitesList.length > 0 &&
+                sitesList.map((site: any) => (
+                  <SiteItem
+                    disabled={state.sites[0] === "all"}
+                    sites={state.sites}
+                    key={site.id}
+                    item={{ name: site.name, id: site.id, onChange: () => selectSite(site.id) }}
+                  />
+                ))}
+            </>
+          )}
         </S.Wrapper>
       </MainWrapper>
     </>
   );
 };
 
-interface IProps {
+interface IDispatchProps {
   setHistoryPush(path: string): any;
   createUser(data: { name: string; email: string; sites: any[] }): Promise<boolean>;
+  updateUser(id: number, data: any, isProfile: boolean): any;
+}
+interface IProfileProps {
+  users: IUser[];
+  sites: ISite[];
+  site: ISite;
 }
 
+const mapStateToProps = (state: IRootState) => ({
+  users: state.users.users,
+  sites: state.sites.sites,
+  site: state.sites.currentSiteInfo,
+});
+
 const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
   createUser: usersActions.createUser,
+  updateUser: usersActions.updateUser,
 };
 
-export default connect(null, mapDispatchToProps)(UserCreate);
+type IProps = IProfileProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(UserCreate);

package/src/modules/Users/UserCreate/style.tsx

@@ -17,9 +17,62 @@ const SubTitle = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
+const Heading = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const SettingsWrapper = styled.div`
+  position: relative;
+  border-top: 1px solid ${(p) => p.theme.color.uiLine};
+  padding-top: ${(p) => p.theme.spacing.m};
+`;
+
+const SettingContent = styled.div`
+  padding-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const SearchFieldWrapper = styled.div`
+  padding-top: ${(p) => p.theme.spacing.xs};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  max-width: calc(${(p) => p.theme.spacing.l} * 7);
+`;
+
+const SelectAllSitesFieldWrapper = styled.div`
+  padding-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const SettingText = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  width: calc(${(p) => p.theme.spacing.l} * 12);
+`;
+
+const FormWrapper = styled.div`
+  width: 720px;
+  margin: ${(p) => `${p.theme.spacing.m} 0 0 ${p.theme.spacing.m}`};
+`;
+
+const NotificationWrapper = styled.div`
+  position: fixed;
+  width: 100%;
+  top: ${(p) => `calc(${p.theme.spacing.s} * 4)`};
+  left: 0;
+  right: 0;
+  z-index: 2;
+`;
 
 export {
   Wrapper,
   NameTitle,
-  SubTitle
+  SubTitle,
+  Heading,
+  SettingsWrapper,
+  SettingText,
+  SettingContent,
+  SearchFieldWrapper,
+  SelectAllSitesFieldWrapper,
+  FormWrapper,
+  NotificationWrapper,
 };