Web: Files: Templates: added onArrowClick action

packages/client/src/components/GlobalEvents/CreateRoomTemplateEvent.js

@@ -24,16 +24,13 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-import React, { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { inject, observer } from "mobx-react";
-import { useTranslation } from "react-i18next";
-
 import { toastr } from "@docspace/shared/components/toast";
 
 import { CreateRoomTemplateDialog } from "../dialogs";
-let timerId = null;
 const CreateRoomTemplateEvent = (props) => {
-  const { visible, onClose, item, fetchTags } = props;
+  const { visible, item, fetchTags, setTemplateEventVisible } = props;
 
   const [fetchedTags, setFetchedTags] = useState([]);
 
@@ -42,10 +39,20 @@ const CreateRoomTemplateEvent = (props) => {
     setFetchedTags(tags);
   }, []);
 
+  useEffect(() => {
+    setTemplateEventVisible(true);
+  });
+
   useEffect(() => {
     fetchTagsAction();
   }, [fetchTagsAction]);
 
+  const onClose = () => {
+    props.onClose();
+
+    setTemplateEventVisible(false);
+  };
+
   return (
     <CreateRoomTemplateDialog
       visible={visible}
@@ -57,7 +64,8 @@ const CreateRoomTemplateEvent = (props) => {
   );
 };
 
-export default inject(({ tagsStore }) => {
+export default inject(({ tagsStore, dialogsStore }) => {
   const { fetchTags } = tagsStore;
-  return { fetchTags };
+  const { setTemplateEventVisible } = dialogsStore;
+  return { fetchTags, setTemplateEventVisible };
 })(observer(CreateRoomTemplateEvent));

packages/client/src/components/panels/TemplateAccessSettingsPanel/index.js

@@ -56,10 +56,13 @@ import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
 
 const TemplateAccessSettingsPanel = ({
   t,
+  item,
   visible,
   setIsVisible,
   setInfoPanelIsMobileHidden,
   currentDeviceType,
+  onCreateRoomFromTemplate,
+  templateEventVisible,
 }) => {
   const [isAvailable, setIsAvailable] = useState(false);
   const [inviteItems, setInviteItems] = useState([]);
@@ -104,6 +107,13 @@ const TemplateAccessSettingsPanel = ({
     setIsAvailable(!isAvailable);
   };
 
+  const onArrowClick = () => {
+    onClose();
+    if (item && !templateEventVisible) {
+      onCreateRoomFromTemplate({ ...item, isEdit: true });
+    }
+  };
+
   const onClose = () => {
     setInfoPanelIsMobileHidden(false);
     setIsVisible(false);
@@ -188,7 +198,7 @@ const TemplateAccessSettingsPanel = ({
           size={17}
           iconName={ArrowPathReactSvgUrl}
           className="sharing_panel-arrow"
-          onClick={() => console.log("onArrowClick")} //TODO: Templates
+          onClick={onArrowClick}
         />
         <StyledHeading>{t("Files:AccessSettings")}</StyledHeading>
       </StyledBlock>
@@ -279,14 +289,30 @@ const TemplateAccessSettingsPanel = ({
 };
 
 export default inject(
-  ({ settingsStore, peopleStore, dialogsStore, infoPanelStore }) => {
+  ({
+    settingsStore,
+    peopleStore,
+    dialogsStore,
+    infoPanelStore,
+    filesStore,
+    filesActionsStore,
+  }) => {
     const { theme, currentDeviceType } = settingsStore;
-
     const { getUsersByQuery } = peopleStore.usersStore;
     const { setIsMobileHidden: setInfoPanelIsMobileHidden } = infoPanelStore;
+    const { selection, bufferSelection } = filesStore;
+    const { onCreateRoomFromTemplate } = filesActionsStore;
+    const {
+      templateAccessSettingsVisible,
+      setTemplateAccessSettingsVisible,
+      templateEventVisible,
+    } = dialogsStore;
 
-    const { templateAccessSettingsVisible, setTemplateAccessSettingsVisible } =
-      dialogsStore;
+    const item = selection.length
+      ? selection[0]
+      : bufferSelection
+        ? bufferSelection
+        : null;
 
     return {
       getUsersByQuery,
@@ -295,6 +321,9 @@ export default inject(
       setIsVisible: setTemplateAccessSettingsVisible,
       setInfoPanelIsMobileHidden,
       currentDeviceType,
+      item,
+      onCreateRoomFromTemplate,
+      templateEventVisible,
     };
   },
 )(

packages/client/src/store/DialogsStore.js

@@ -117,6 +117,7 @@ class DialogsStore {
   cancelUploadDialogVisible = false;
   createRoomTemplateDialogVisible = false;
   templateAccessSettingsVisible = true;
+  templateEventVisible = false;
 
   selectFileFormRoomFilterParam = FilesSelectorFilterTypes.DOCX;
   selectFileFormRoomOpenRoot = false;
@@ -531,6 +532,10 @@ class DialogsStore {
   setTemplateAccessSettingsVisible = (isVisible) => {
     this.templateAccessSettingsVisible = isVisible;
   };
+
+  setTemplateEventVisible = (isVisible) => {
+    this.templateEventVisible = isVisible;
+  };
 }
 
 export default DialogsStore;