Web:People:Catalog: fix desktop mobile main button and add new view for tablet and mobile

2022-02-08 17:04:09 +08:00 · 2022-02-08 17:04:09 +08:00 · 13c0cd63a1
commit 13c0cd63a1
parent 6d88c4c90a
6 changed files with 199 additions and 107 deletions
--- a/packages/asc-web-components/main-button-mobile/index.js
+++ b/packages/asc-web-components/main-button-mobile/index.js
@ -136,9 +136,13 @@ const MainButtonMobile = (props) => {
  };

  React.useEffect(() => {
-    const openProgressOptions = progressOptions.filter((option) => option.open);
+    if (progressOptions) {
+      const openProgressOptions = progressOptions.filter(
+        (option) => option.open
+      );

-    setIsUploading(openProgressOptions.length > 0);
+      setIsUploading(openProgressOptions.length > 0);
+    }
  }, [progressOptions]);

  const renderItems = () => {
@ -155,7 +159,9 @@ const MainButtonMobile = (props) => {
              <StyledDropDownItem
                key={option.key}
                label={option.label}
-                className={option.className}
+                className={`${option.className} ${
+                  option.isSeparator && "is-separator"
+                }`}
                onClick={optionOnClickAction}
                icon={option.icon ? option.icon : ""}
                action={option.action}
--- a/packages/asc-web-components/main-button-mobile/styled-main-button.js
+++ b/packages/asc-web-components/main-button-mobile/styled-main-button.js
@ -93,8 +93,10 @@ const StyledDropDown = styled(DropDown)`
  }

  .is-separator {
-    height: 1px;
-    width: 100%;
+    height: 1px !important;
+    width: calc(100% - 48px);
+    padding: 0 !important;
+    margin: 12px 24px !important;
    background-color: ${(props) =>
      props.theme.mainButtonMobile.dropDown.separatorBackground};
  }
--- a/products/ASC.People/Client/src/components/Catalog/MainButton/MobileView.js
+++ b/products/ASC.People/Client/src/components/Catalog/MainButton/MobileView.js
@ -0,0 +1,47 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { isMobileOnly } from "react-device-detect";
+
+import { mobile } from "@appserver/components/utils/device";
+
+import MainButtonMobile from "@appserver/components/main-button-mobile";
+
+const StyledMainButtonMobile = styled(MainButtonMobile)`
+  position: fixed;
+  z-index: 1000;
+  right: 24px;
+  bottom: 24px;
+
+  @media ${mobile} {
+    right: 16px;
+    bottom: 16px;
+  }
+
+  ${isMobileOnly &&
+  css`
+    right: 16px;
+    bottom: 16px;
+  `}
+`;
+
+const MobileView = ({ actionOptions, sectionWidth }) => {
+  const [isOpenButton, setIsOpenButton] = React.useState(false);
+
+  const openButtonToggler = () => {
+    setIsOpenButton((prevState) => !prevState);
+  };
+
+  return (
+    <StyledMainButtonMobile
+      sectionWidth={sectionWidth}
+      actionOptions={actionOptions}
+      isOpenButton={isOpenButton}
+      onClose={openButtonToggler}
+      title="Upload"
+      percent={0}
+      withButton={false}
+    />
+  );
+};
+
+export default React.memo(MobileView);
--- a/products/ASC.People/Client/src/components/Catalog/MainButton/index.js
+++ b/products/ASC.People/Client/src/components/Catalog/MainButton/index.js
@ -2,7 +2,6 @@ import React from "react";
 //import PropTypes from "prop-types";
 import { withRouter } from "react-router";
 import MainButton from "@appserver/components/main-button";
-import DropDownItem from "@appserver/components/drop-down-item";
 import InviteDialog from "./../../dialogs/InviteDialog/index";
 import { withTranslation } from "react-i18next";
 import toastr from "studio/toastr";
@ -13,7 +12,11 @@ import { combineUrl } from "@appserver/common/utils";
 import { AppServerConfig } from "@appserver/common/constants";
 import withLoader from "../../../HOCs/withLoader";
 import { isMobile } from "react-device-detect";
-import { isMobile as isMobileUtils } from "@appserver/components/utils/device";
+import {
+  isMobile as isMobileUtils,
+  isTablet as isTabletUtils,
+} from "@appserver/components/utils/device";
+import MobileView from "./MobileView";

 class CatalogMainButtonContent extends React.Component {
  constructor(props) {
@ -71,71 +74,89 @@ class CatalogMainButtonContent extends React.Component {
      userCaption,
      guestCaption,
      groupCaption,
+      sectionWidth,
    } = this.props;

    const { dialogVisible } = this.state;

+    const menuModel = [
+      {
+        key: "create-user",
+        icon: combineUrl(
+          AppServerConfig.proxyURL,
+          homepage,
+          "/images/add.employee.react.svg"
+        ),
+        label: userCaption,
+        onClick: this.goToEmployeeCreate,
+      },
+      {
+        key: "create-guest",
+        icon: combineUrl(
+          AppServerConfig.proxyURL,
+          homepage,
+          "/images/add.guest.react.svg"
+        ),
+        label: guestCaption,
+        onClick: this.goToGuestCreate,
+      },
+      {
+        key: "create-group",
+        icon: combineUrl(
+          AppServerConfig.proxyURL,
+          homepage,
+          "/images/add.department.react.svg"
+        ),
+        label: groupCaption,
+        onClick: this.goToGroupCreate,
+      },
+      {
+        key: "separator",
+        isSeparator: true,
+      },
+      {
+        key: "invite-link",
+        icon: combineUrl(
+          AppServerConfig.proxyURL,
+          "/static/images/invitation.link.react.svg"
+        ),
+        label: t("Translations:InviteLinkTitle"),
+        onClick: this.onInvitationDialogClick,
+      },
+      /* {
+        icon: combineUrl(
+          AppServerConfig.proxyURL,
+          "/static/images/plane.react.svg"
+        ),
+        label: t("SendInvitesAgain"),
+        onClick: this.onNotImplementedClick.bind(this, t("SendInvitesAgain")),
+      },
+      {
+        icon: combineUrl(
+          AppServerConfig.proxyURL,
+          "/static/images/import.react.svg"
+        ),
+        label: t("ImportPeople"),
+        onClick: this.onImportClick,
+      }, */
+    ];
+
+    console.log(sectionWidth);
+
    return isAdmin ? (
      <>
-        <MainButton
-          isDisabled={false}
-          isDropdown={true}
-          text={t("Common:Actions")}
-        >
-          <DropDownItem
-            icon={combineUrl(
-              AppServerConfig.proxyURL,
-              homepage,
-              "/images/add.employee.react.svg"
-            )}
-            label={userCaption}
-            onClick={this.goToEmployeeCreate}
+        {isMobile || isMobileUtils() || isTabletUtils() ? (
+          <MobileView actionOptions={menuModel} sectionWidth={sectionWidth} />
+        ) : (
+          <MainButton
+            isDisabled={false}
+            isDropdown={true}
+            text={t("Common:Actions")}
+            model={menuModel}
+            className="main-button_invitation-link"
          />
+        )}

-          <DropDownItem
-            icon={combineUrl(
-              AppServerConfig.proxyURL,
-              homepage,
-              "/images/add.guest.react.svg"
-            )}
-            label={guestCaption}
-            onClick={this.goToGuestCreate}
-          />
-          <DropDownItem
-            icon={combineUrl(
-              AppServerConfig.proxyURL,
-              homepage,
-              "/images/add.department.react.svg"
-            )}
-            label={groupCaption}
-            onClick={this.goToGroupCreate}
-          />
-          <DropDownItem isSeparator />
-          <DropDownItem
-            icon={combineUrl(
-              AppServerConfig.proxyURL,
-              "/static/images/invitation.link.react.svg"
-            )}
-            label={t("Translations:InviteLinkTitle")}
-            onClick={this.onInvitationDialogClick}
-          />
-          {/* <DropDownItem
-              icon="images/plane.react.svg"
-              label={t("SendInvitesAgain")}
-              onClick={this.onNotImplementedClick.bind(this, t("SendInvitesAgain"))}
-            /> */}
-          {false && (
-            <DropDownItem
-              icon={combineUrl(
-                AppServerConfig.proxyURL,
-                homepage,
-                "/images/import.react.svg"
-              )}
-              label={t("ImportPeople")}
-              onClick={this.onImportClick}
-            />
-          )}
-        </MainButton>
        {dialogVisible && (
          <InviteDialog
            visible={dialogVisible}
--- a/products/ASC.People/Client/src/pages/Home/Section/Body/EmptyScreen.js
+++ b/products/ASC.People/Client/src/pages/Home/Section/Body/EmptyScreen.js
@ -7,6 +7,8 @@ import Box from "@appserver/components/box";
 import Grid from "@appserver/components/grid";
 import { useTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
+import { CatalogMainButtonContent } from "../../../../components/Catalog";
+import { Consumer } from "@appserver/components/utils/context";

 const EmptyScreen = ({ resetFilter, isEmptyGroup, setIsLoading }) => {
  const { t } = useTranslation(["Home", "Common"]);
@ -22,43 +24,50 @@ const EmptyScreen = ({ resetFilter, isEmptyGroup, setIsLoading }) => {
  };

  return (
-    <EmptyScreenContainer
-      imageSrc="images/empty_screen_filter.png"
-      imageAlt="Empty Screen Filter image"
-      headerText={title}
-      descriptionText={description}
-      buttons={
-        <Grid
-          marginProp="13px 0"
-          gridColumnGap="8px"
-          columnsProp={["12px 1fr"]}
-        >
-          {isEmptyGroup ? null : (
-            <>
-              <Box>
-                <IconButton
-                  className="empty-folder_container-icon"
-                  size="12"
-                  onClick={onResetFilter}
-                  iconName="CrossIcon"
-                  isFill
-                />
-              </Box>{" "}
-              <Box marginProp="-4px 0 0 0">
-                <Link
-                  type="action"
-                  isHovered={true}
-                  fontWeight="600"
-                  onClick={onResetFilter}
-                >
-                  {t("Common:ClearButton")}
-                </Link>
-              </Box>{" "}
-            </>
-          )}
-        </Grid>
-      }
-    />
+    <>
+      <EmptyScreenContainer
+        imageSrc="images/empty_screen_filter.png"
+        imageAlt="Empty Screen Filter image"
+        headerText={title}
+        descriptionText={description}
+        buttons={
+          <Grid
+            marginProp="13px 0"
+            gridColumnGap="8px"
+            columnsProp={["12px 1fr"]}
+          >
+            {isEmptyGroup ? null : (
+              <>
+                <Box>
+                  <IconButton
+                    className="empty-folder_container-icon"
+                    size="12"
+                    onClick={onResetFilter}
+                    iconName="CrossIcon"
+                    isFill
+                  />
+                </Box>{" "}
+                <Box marginProp="-4px 0 0 0">
+                  <Link
+                    type="action"
+                    isHovered={true}
+                    fontWeight="600"
+                    onClick={onResetFilter}
+                  >
+                    {t("Common:ClearButton")}
+                  </Link>
+                </Box>{" "}
+              </>
+            )}
+          </Grid>
+        }
+      />
+      <Consumer>
+        {(context) => (
+          <CatalogMainButtonContent sectionWidth={context.sectionWidth} />
+        )}
+      </Consumer>
+    </>
  );
 };

--- a/products/ASC.People/Client/src/pages/Home/Section/Body/index.js
+++ b/products/ASC.People/Client/src/pages/Home/Section/Body/index.js
@ -6,21 +6,28 @@ import withLoader from "../../../../HOCs/withLoader";
 import PeopleRowContainer from "./RowView/PeopleRowContainer";
 import TableView from "./TableView/TableContainer";
 import { Consumer } from "@appserver/components/utils/context";
+import { CatalogMainButtonContent } from "../../../../components/Catalog";

 class SectionBodyContent extends React.Component {
  render() {
    const { tReady, viewAs } = this.props;
-
+    console.log("render");
    return (
      <Consumer>
        {(context) =>
          viewAs === "table" ? (
-            <TableView sectionWidth={context.sectionWidth} tReady={tReady} />
+            <>
+              <TableView sectionWidth={context.sectionWidth} tReady={tReady} />
+              <CatalogMainButtonContent sectionWidth={context.sectionWidth} />
+            </>
          ) : (
-            <PeopleRowContainer
-              sectionWidth={context.sectionWidth}
-              tReady={tReady}
-            />
+            <>
+              <PeopleRowContainer
+                sectionWidth={context.sectionWidth}
+                tReady={tReady}
+              />
+              <CatalogMainButtonContent sectionWidth={context.sectionWidth} />
+            </>
          )
        }
      </Consumer>