Web: Files: added creating forms from the gallery

packages/asc-web-common/api/files/index.js

@@ -862,3 +862,16 @@ export function restoreDocumentsVersion(fileId, version, doc) {
 
   return request(options);
 }
+
+export function createFormFromTemplate(folderId, formId, title) {
+  const options = {
+    method: "post",
+    url: `files/${folderId}/file.json`,
+    data: {
+      title,
+      formId,
+    },
+  };
+
+  return request(options);
+}

products/ASC.Files/Client/src/helpers/files-helpers.js

@@ -32,8 +32,8 @@ export const getAccessIcon = (access) => {
   }
 };
 
-export const getTitleWithoutExst = (item) => {
-  return item.fileExst
+export const getTitleWithoutExst = (item, fromTemplate) => {
+  return item.fileExst && !fromTemplate
     ? item.title.split(".").slice(0, -1).join(".")
     : item.title;
 };

products/ASC.Files/Client/src/pages/FormGallery/Header.js

@@ -14,7 +14,13 @@ import FilesFilter from "@appserver/common/api/files/filter";
 import { combineUrl } from "@appserver/common/utils";
 
 const SectionHeaderContent = (props) => {
-  const { t, history, match, isInfoPanelVisible, toggleInfoPanel } = props;
+  const {
+    t,
+    history,
+    match,
+    isInfoPanelVisible,
+    setInfoPanelIsVisible,
+  } = props;
 
   const onBackToFiles = () => {
     const filter = FilesFilter.getDefault();
@@ -50,7 +56,7 @@ const SectionHeaderContent = (props) => {
             iconName="images/panel.react.svg"
             size="16"
             isFill={true}
-            onClick={toggleInfoPanel}
+            onClick={setInfoPanelIsVisible}
           />
         </div>
       </StyledInfoPanelToggleWrapper>
@@ -59,10 +65,10 @@ const SectionHeaderContent = (props) => {
 };
 
 export default inject(({ infoPanelStore }) => {
-  const { toggleIsVisible, isVisible } = infoPanelStore;
+  const { setInfoPanelIsVisible, isVisible } = infoPanelStore;
 
   return {
-    toggleInfoPanel: toggleIsVisible,
+    setInfoPanelIsVisible,
     isInfoPanelVisible: isVisible,
   };
 })(withTranslation("Common")(withRouter(observer(SectionHeaderContent))));

products/ASC.Files/Client/src/pages/FormGallery/TilesView/FileTile.js

@@ -6,22 +6,17 @@ import { isDesktop } from "react-device-detect";
 
 const FileTile = (props) => {
   const { item } = props;
-  const { fileExst, title } = item;
-
-  const { thumbnailUrl } = item;
 
   return (
     <div ref={props.selectableRef}>
-      <Tile key={item.id} item={item} thumbnail={thumbnailUrl}>
+      <Tile key={item.id} item={item}>
         <SimpleFilesTileContent
-          //sideColor={theme.filesSection.tilesView.sideColor}
-          isFile={fileExst}
+        //sideColor={theme.filesSection.tilesView.sideColor}
         >
           <Link
             className="item-file-name"
             containerWidth="100%"
             type="page"
-            title={title}
             fontWeight="600"
             fontSize={isDesktop ? "13px" : "14px"}
             target="_blank"

products/ASC.Files/Client/src/pages/FormGallery/TilesView/sub-components/Tile.js

@@ -7,9 +7,11 @@ import { isDesktop } from "react-device-detect";
 import Link from "@appserver/components/link";
 import { withTranslation } from "react-i18next";
 import { ReactSVG } from "react-svg";
-import { AppServerConfig } from "@appserver/common/constants";
+import { AppServerConfig, FileAction } from "@appserver/common/constants";
 import { combineUrl } from "@appserver/common/utils";
 import config from "../../../../../package.json";
+import FilesFilter from "@appserver/common/api/files/filter";
+import { withRouter } from "react-router-dom";
 
 import {
   StyledTile,
@@ -82,24 +84,37 @@ class Tile extends React.PureComponent {
   };
 
   onCreateForm = () => {
-    // const filter = FilesFilter.getDefault();
-    // filter.folder = match.params.fileId;
-    // const urlFilter = filter.toUrlParams();
+    const { match, history, item } = this.props;
+    const { setInfoPanelIsVisible, setAction } = this.props;
 
-    // history.push(
-    //   combineUrl(
-    //     AppServerConfig.proxyURL,
-    //     config.homepage,
-    //     `/filter?${urlFilter}`
-    //   )
-    // );
+    const filter = FilesFilter.getDefault();
+    filter.folder = match.params.fileId;
+    const urlFilter = filter.toUrlParams();
 
-    console.log("onCreateForm");
+    setInfoPanelIsVisible(false);
+
+    setTimeout(() => {
+      setAction({
+        type: FileAction.Create,
+        extension: "docxf",
+        fromTemplate: true,
+        title: item.attributes.name_form,
+        id: -1,
+      });
+    }, 100);
+
+    history.push(
+      combineUrl(
+        AppServerConfig.proxyURL,
+        config.homepage,
+        `/filter?${urlFilter}`
+      )
+    );
   };
 
   onShowTemplateInfo = () => {
     if (!this.props.isInfoPanelVisible) {
-      this.props.toggleInfoPanel(true);
+      this.props.setInfoPanelIsVisible(true);
     }
   };
 
@@ -201,9 +216,9 @@ Tile.defaultProps = {
 
 export default inject(
   ({ filesStore, settingsStore, infoPanelStore }, { item }) => {
-    const { gallerySelected, setGallerySelected } = filesStore;
+    const { gallerySelected, setGallerySelected, fileActionStore } = filesStore;
     const { getIcon } = settingsStore;
-    const { toggleIsVisible, isVisible } = infoPanelStore;
+    const { setInfoPanelIsVisible, isVisible } = infoPanelStore;
 
     const isSelected = item.id === gallerySelected?.id;
 
@@ -211,12 +226,9 @@ export default inject(
       isSelected,
       setGallerySelected,
       getIcon,
-      toggleInfoPanel: toggleIsVisible,
+      setInfoPanelIsVisible,
       isInfoPanelVisible: isVisible,
+      setAction: fileActionStore.setAction,
     };
   }
-)(
-  withTranslation(["FormGallery", "Common"])(
-    /* withRouter( */ observer(Tile) /* ) */
-  )
-);
+)(withTranslation(["FormGallery", "Common"])(withRouter(observer(Tile))));

products/ASC.Files/Client/src/store/FileActionStore.js

@@ -1,4 +1,4 @@
-import { makeObservable, action, observable } from "mobx";
+import { makeAutoObservable } from "mobx";
 
 class FileActionStore {
   id = null;
@@ -6,20 +6,15 @@ class FileActionStore {
   extension = null;
   title = "";
   templateId = null;
+  fromTemplate = null;
 
   constructor() {
-    makeObservable(this, {
-      type: observable,
-      extension: observable,
-      id: observable,
-      title: observable,
-      templateId: observable,
-
-      setAction: action,
-    });
+    makeAutoObservable(this);
   }
 
   setAction = (fileAction) => {
+    if (fileAction.fromTemplate !== undefined && this.fromTemplate) return;
+
     const fileActionItems = Object.keys(fileAction);
     for (let key of fileActionItems) {
       if (key in this) {

products/ASC.Files/Client/src/store/FilesActionsStore.js

@@ -392,6 +392,7 @@ class FilesActionStore {
         extension: null,
         title: "",
         templateId: null,
+        fromTemplate: null,
       });
       setIsLoading(false);
       type === FileAction.Rename &&

products/ASC.Files/Client/src/store/FilesStore.js

@@ -22,8 +22,6 @@ import { openDocEditor as openEditor } from "../helpers/utils";
 const { FilesFilter } = api;
 const storageViewAs = localStorage.getItem("viewAs");
 
-import OFORMsGallery from "./OFORMsGallery.json";
-
 class FilesStore {
   authStore;
   settingsStore;
@@ -281,8 +279,7 @@ class FilesStore {
       }
     }
     requests.push(getFilesSettings());
-    //requests.push(this.getOforms());
-    this.getOforms();
+    requests.push(this.getOforms());
 
     return Promise.all(requests).then(() => (this.isInit = true));
   };
@@ -290,9 +287,7 @@ class FilesStore {
   getOforms = async () => {
     const { culture, getOforms } = this.settingsStore;
 
-    //const oformData = await getOforms();
-    const oformData = OFORMsGallery.data;
-    console.log("oformData", oformData);
+    const oformData = await getOforms();
 
     if (oformData && oformData.length) {
       this.oformFiles = oformData.filter(
@@ -1208,6 +1203,15 @@ class FilesStore {
     return api.files.createFolder(parentFolderId, title);
   }
 
+  createFormFromTemplate = (folderId, formId, title) => {
+    return api.files
+      .createFormFromTemplate(folderId, formId, title)
+      .then((file) => Promise.resolve(file))
+      .finally(() => {
+        this.setGallerySelected(null);
+      });
+  };
+
   setFile = (file) => {
     const fileIndex = this.files.findIndex((f) => f.id === file.id);
     if (fileIndex !== -1) this.files[fileIndex] = file;

products/ASC.Files/Client/src/store/InfoPanelStore.js

@@ -15,6 +15,10 @@ class InfoPanelStore {
     this.isVisible = !this.isVisible;
   };
 
+  setInfoPanelIsVisible = (isVisible) => {
+    this.isVisible = isVisible;
+  };
+
   setVisible = () => {
     this.isVisible = true;
   };