Web:Client:Add onStartAgain, onTerminate.

2023-09-18 16:55:03 +03:00 · 2023-09-18 16:55:03 +03:00 · 34a7c068a7
commit 34a7c068a7
parent d89137eced
7 changed files with 141 additions and 62 deletions
--- a/packages/client/src/components/dialogs/DataReassignmentDialog/index.js
+++ b/packages/client/src/components/dialogs/DataReassignmentDialog/index.js
@ -28,7 +28,7 @@ const StyledModalDialog = styled(ModalDialog)`
  }
 `;

-let timerId = null;
+const statusTerminateCompleted = 3;

 const DataReassignmentDialog = ({
  visible,
@ -40,20 +40,22 @@ const DataReassignmentDialog = ({
  currentColorScheme,
  currentUser,
  deleteProfile,
-  isDeleteUserReassignmentYourself,
+  isDeletingUserWithReassignment,
  t,
  tReady,
  setFilter,
-  setIsDeleteUserReassignmentYourself,
+  setIsDeletingUserWithReassignment,
+  setDataReassignmentDeleteProfile,
 }) => {
  const [selectorVisible, setSelectorVisible] = useState(false);
-  const defaultSelectedUser = isDeleteUserReassignmentYourself
+  const defaultSelectedUser = isDeletingUserWithReassignment
    ? currentUser
    : null;
  const [selectedUser, setSelectedUser] = useState(defaultSelectedUser);
  const [isDeleteProfile, setIsDeleteProfile] = useState(deleteProfile);
  const [showProgress, setShowProgress] = useState(false);
  const [isReassignCurrentUser, setIsReassignCurrentUser] = useState(false);
+  const [isAbortTransfer, setIsAbortTransfer] = useState(false);

  const [percent, setPercent] = useState(0);

@ -71,13 +73,13 @@ const DataReassignmentDialog = ({

  useEffect(() => {
    //If click Delete user
-    if (isDeleteUserReassignmentYourself) onReassign();
+    if (isDeletingUserWithReassignment) onReassign();

    return () => {
-      setIsDeleteUserReassignmentYourself(false);
-      clearInterval(timerId);
+      setIsDeletingUserWithReassignment(false);
+      setDataReassignmentDeleteProfile(false);
    };
-  }, [isDeleteUserReassignmentYourself]);
+  }, [isDeletingUserWithReassignment]);

  const onToggleDeleteProfile = () => {
    setIsDeleteProfile((remove) => !remove);
@ -95,6 +97,12 @@ const DataReassignmentDialog = ({
    setSelectorVisible(false);
  };

+  const onStartAgain = () => {
+    setShowProgress(false);
+    setPercent(0);
+    setIsAbortTransfer(false);
+  };
+
  const onAccept = (item) => {
    setSelectorVisible(false);
    setSelectedUser({ ...item[0] });
@ -104,15 +112,29 @@ const DataReassignmentDialog = ({
    setIsReassignCurrentUser(currentUser.id === selectedUser.id);
  };

-  const checkProgress = (id) => {
-    dataReassignmentProgress(id)
+  const checkProgress = () => {
+    if (isAbortTransfer) return;
+
+    dataReassignmentProgress(user.id)
      .then((res) => {
+        //If the task has already been interrupted and killed
+        if (!res) return;
+
+        if (res.error) {
+          console.log(res.error);
+          return;
+        }
+
        setPercent(res.percentage);

-        if (!res.isCompleted) return;
+        if (!res.isCompleted) {
+          checkProgress();
+          return;
+        }
+
+        if (res.status === statusTerminateCompleted) return;

        toastr.success(t("Common:ChangesSavedSuccessfully"));
-        clearInterval(timerId);
        isDeleteProfile && updateAccountsAfterDeleteUser();
      })
      .catch((error) => {
@ -125,31 +147,19 @@ const DataReassignmentDialog = ({
    setShowProgress(true);

    dataReassignment(user.id, selectedUser.id, isDeleteProfile)
-      .then(() => {
-        checkProgress(user.id);
-        dataReassignmentTerminate(user.id).then(() => {
-          checkProgress(user.id);
-          timerId = setInterval(() => checkProgress(user.id), 100);
-        });
-      })
+      .then(() => checkProgress())
      .catch((error) => {
        toastr.error(error?.response?.data?.error?.message);
      });
-
-    // timerId = setInterval(() => checkProgress(user.id), 100);
-
-    // .then(() => {
-    //   timerId = setInterval(() => checkProgress(user.id), 10);
-    // })
-    // .catch((error) => {
-    //   toastr.error(error?.response?.data?.error?.message);
-    // });
  };

  const onTerminate = () => {
    dataReassignmentTerminate(user.id)
-      .then(() => {
+      .then((res) => {
+        setPercent(res.percentage);
+        setIsAbortTransfer(true);
        toastr.success(t("Common:ChangesSavedSuccessfully"));
+        isDeleteProfile && updateAccountsAfterDeleteUser();
      })
      .catch((error) => {
        toastr.error(error?.response?.data?.error?.message);
@ -192,8 +202,8 @@ const DataReassignmentDialog = ({
      visible={visible}
      onClose={onClose}
      containerVisible={selectorVisible}
-      withFooterBorder
-      withBodyScroll
+      withFooterBorder={true}
+      withBodyScroll={true}
    >
      <ModalDialog.Header>
        {t("DataReassignmentDialog:DataReassignment")}
@ -207,6 +217,7 @@ const DataReassignmentDialog = ({
          user={user}
          selectedUser={selectedUser}
          percent={percent}
+          isAbortTransfer={isAbortTransfer}
          currentColorScheme={currentColorScheme}
          onTogglePeopleSelector={onTogglePeopleSelector}
        />
@ -221,8 +232,10 @@ const DataReassignmentDialog = ({
          selectedUser={selectedUser}
          onReassign={onReassign}
          percent={percent}
+          isAbortTransfer={isAbortTransfer}
          onClose={onClose}
          onTerminate={onTerminate}
+          onStartAgain={onStartAgain}
        />
      </ModalDialog.Footer>
    </StyledModalDialog>
@ -233,8 +246,9 @@ export default inject(({ auth, peopleStore, setup }) => {
  const {
    setDataReassignmentDialogVisible,
    dataReassignmentDeleteProfile,
-    isDeleteUserReassignmentYourself,
-    setIsDeleteUserReassignmentYourself,
+    setDataReassignmentDeleteProfile,
+    isDeletingUserWithReassignment,
+    setIsDeletingUserWithReassignment,
  } = peopleStore.dialogStore;
  const { currentColorScheme } = auth.settingsStore;
  const {
@ -256,9 +270,10 @@ export default inject(({ auth, peopleStore, setup }) => {
    dataReassignmentProgress,
    dataReassignmentTerminate,
    deleteProfile: dataReassignmentDeleteProfile,
+    setDataReassignmentDeleteProfile,
    setFilter,
-    isDeleteUserReassignmentYourself,
-    setIsDeleteUserReassignmentYourself,
+    isDeletingUserWithReassignment,
+    setIsDeletingUserWithReassignment,
  };
 })(
  observer(
--- a/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/Progress.js
+++ b/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/Progress.js
@ -2,6 +2,7 @@ import Text from "@docspace/components/text";
 import styled from "styled-components";
 import Loader from "@docspace/components/loader";
 import CheckIcon from "PUBLIC_DIR/images/check.edit.react.svg";
+import InterruptIcon from "PUBLIC_DIR/images/interrupt.icon.react.svg";
 import commonIconsStyles from "@docspace/components/utils/common-icons-style";
 import { Base } from "@docspace/components/themes";
 import { withTranslation, Trans } from "react-i18next";
@ -29,10 +30,6 @@ const StyledProgress = styled.div`
    font-weight: 600;
  }

-  .progress {
-    margin: 16px 0;
-  }
-
  .progress-container {
    display: flex;
    gap: 16px;
@ -61,11 +58,21 @@ const StyledProgress = styled.div`
    gap: 4px;
  }

-  .all-data-transferred {
+  .transfer-information {
    display: flex;
+    align-items: center;
    gap: 6px;
  }

+  .status {
+    font-size: 14px;
+    line-height: 16px;
+  }
+
+  .status-pending {
+    padding-left: 24px;
+  }
+
  .check-icon {
    width: 16px;
  }
@ -79,18 +86,47 @@ const StyledProgress = styled.div`
    height: 20px;
  }
 `;
-const Progress = ({ fromUser, toUser, isReassignCurrentUser, percent, t }) => {
+
+const percentRoomReassignment = 70;
+const percentFilesInRoomsReassignment = 90;
+const percentAllReassignment = 100;
+
+const Progress = ({
+  fromUser,
+  toUser,
+  isReassignCurrentUser,
+  percent,
+  isAbortTransfer,
+  t,
+}) => {
  const inProgressNode = (
    <div className="in-progress">
      <Loader className="in-progress-loader" size="20px" type="track" />
-      <Text>{t("DataReassignmentDialog:InProgress")}</Text>
+      <Text className="status">{t("DataReassignmentDialog:InProgress")}</Text>
    </div>
  );

+  const pendingNode = (
+    <Text className="status status-pending" noSelect>
+      {t("PeopleTranslations:PendingTitle")}...
+    </Text>
+  );
+
  const allDataTransferredNode = (
-    <div className="all-data-transferred">
+    <div className="transfer-information">
      <StyledCheckIcon size="medium" />
-      <Text>{t("DataReassignmentDialog:AllDataTransferred")}</Text>
+      <Text className="status">
+        {t("DataReassignmentDialog:AllDataTransferred")}
+      </Text>
+    </div>
+  );
+
+  const interruptedNode = (
+    <div className="transfer-information">
+      <InterruptIcon />
+      <Text className="status">
+        Interrupted, some data could be transferred
+      </Text>
    </div>
  );

@ -130,19 +166,26 @@ const Progress = ({ fromUser, toUser, isReassignCurrentUser, percent, t }) => {
        </div>

        <div className="progress-status">
-          {percent < 70 ? inProgressNode : allDataTransferredNode}
+          {percent < percentRoomReassignment
+            ? isAbortTransfer && percent !== percentAllReassignment
+              ? interruptedNode
+              : inProgressNode
+            : allDataTransferredNode}

-          {percent < 70 ? (
-            <Text noSelect>{t("PeopleTranslations:PendingTitle")}...</Text>
-          ) : percent < 100 ? (
-            inProgressNode
-          ) : (
-            allDataTransferredNode
-          )}
+          {isAbortTransfer && percent !== percentAllReassignment
+            ? interruptedNode
+            : percent < percentRoomReassignment
+            ? pendingNode
+            : percent < percentFilesInRoomsReassignment
+            ? inProgressNode
+            : allDataTransferredNode}
        </div>
      </div>

-      <ProgressBar className="progress" percent={percent} />
+      <ProgressBar
+        className="progress"
+        percent={isAbortTransfer ? percentAllReassignment : percent}
+      />

      <Text className="description" noSelect>
        {t("DataReassignmentDialog:ProcessComplete")}
--- a/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/index.js
+++ b/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/index.js
@ -13,6 +13,7 @@ const Body = ({
  selectedUser,
  percent,
  currentColorScheme,
+  isAbortTransfer,
  onTogglePeopleSelector,
  onTerminate,
 }) => {
@ -29,6 +30,7 @@ const Body = ({
            : selectedUser.label
        }
        percent={percent}
+        isAbortTransfer={isAbortTransfer}
        onTerminate={onTerminate}
      />
    );
--- a/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Footer/index.js
+++ b/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Footer/index.js
@ -11,18 +11,32 @@ const Footer = ({
  selectedUser,
  onReassign,
  percent,
+  isAbortTransfer,
  onClose,
  onTerminate,
+  onStartAgain,
 }) => {
  if (showProgress) {
    return (
      <StyledFooterWrapper>
        <div className="button-wrapper">
          <Button
-            label={percent === 100 ? t("Common:OkButton") : "Abort transfer"}
+            label={
+              isAbortTransfer
+                ? "Start transfer again"
+                : percent === 100
+                ? t("Common:OkButton")
+                : "Abort transfer"
+            }
            size="normal"
            scale
-            onClick={percent === 100 ? onClose : onTerminate}
+            onClick={
+              isAbortTransfer
+                ? onStartAgain
+                : percent === 100
+                ? onClose
+                : onTerminate
+            }
          />
        </div>
      </StyledFooterWrapper>
--- a/packages/client/src/components/dialogs/DeleteProfileEverDialog/index.js
+++ b/packages/client/src/components/dialogs/DeleteProfileEverDialog/index.js
@ -74,7 +74,7 @@ const DeleteProfileEverDialogComponent = (props) => {
    setDataReassignmentDialogVisible,
    setDeleteProfileDialogVisible,
    setDataReassignmentDeleteProfile,
-    setIsDeleteUserReassignmentYourself,
+    setIsDeletingUserWithReassignment,
    userPerformedDeletion,
    setDialogData,
  } = props;
@ -134,7 +134,7 @@ const DeleteProfileEverDialogComponent = (props) => {

    setDialogData(user);

-    setIsDeleteUserReassignmentYourself(true);
+    setIsDeletingUserWithReassignment(true);
    setDataReassignmentDialogVisible(true);
    setDataReassignmentDeleteProfile(true);
    setDeleteProfileDialogVisible(false);
@ -217,7 +217,7 @@ export default inject(({ peopleStore }) => {
    setDataReassignmentDialogVisible,
    setDeleteProfileDialogVisible,
    setDataReassignmentDeleteProfile,
-    setIsDeleteUserReassignmentYourself,
+    setIsDeletingUserWithReassignment,
    setDialogData,
  } = dialogStore;

@ -228,7 +228,7 @@ export default inject(({ peopleStore }) => {
    setDataReassignmentDialogVisible,
    setDeleteProfileDialogVisible,
    setDataReassignmentDeleteProfile,
-    setIsDeleteUserReassignmentYourself,
+    setIsDeletingUserWithReassignment,
    setDialogData,
    setSelected,
    removeUser: peopleStore.usersStore.removeUser,
--- a/packages/client/src/store/DialogStore.js
+++ b/packages/client/src/store/DialogStore.js
@ -14,7 +14,7 @@ class DialogStore {
  resetAuthDialogVisible = false;
  dataReassignmentDialogVisible = false;
  dataReassignmentDeleteProfile = false;
-  isDeleteUserReassignmentYourself = false;
+  isDeletingUserWithReassignment = false;

  constructor() {
    makeAutoObservable(this);
@ -36,8 +36,8 @@ class DialogStore {
    this.dataReassignmentDeleteProfile = dataReassignmentDeleteProfile;
  };

-  setIsDeleteUserReassignmentYourself = (isDeleteUserReassignmentYourself) => {
-    this.isDeleteUserReassignmentYourself = isDeleteUserReassignmentYourself;
+  setIsDeletingUserWithReassignment = (isDeletingUserWithReassignment) => {
+    this.isDeletingUserWithReassignment = isDeletingUserWithReassignment;
  };

  setDialogData = (data) => {
--- a/public/images/interrupt.icon.react.svg
+++ b/public/images/interrupt.icon.react.svg
@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Spam">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM12 7H4V9H12V7Z" fill="#F24724"/>
+</g>
+</svg>