Feature/oforms gallery

config/appsettings.json

@@ -53,18 +53,18 @@
     },
     "files": {
         "thirdparty": {
-      "enable": [ "box", "dropboxv2", "docusign", "google", "onedrive", "sharepoint", "nextcloud", "owncloud", "webdav", "kdrive", "yandex" ]
+			"enable": [ "box", "dropboxv2", "docusign", "google", "onedrive", "sharepoint", "nextcloud", "owncloud", "webdav", "kdrive", "yandex" ]
         },
         "docservice": {
-      "coauthor-docs": [ ".pptx", ".ppsx", ".xlsx", ".csv", ".docx", ".docxf", ".oform", ".txt" ],
-      "commented-docs": [ ".docx", ".docxf", ".xlsx", ".pptx" ],
-      "convert-docs": [ ".pptm", ".ppt", ".ppsm", ".pps", ".potx", ".potm", ".pot", ".odp", ".fodp", ".otp", ".xlsm", ".xls", ".xltx", ".xltm", ".xlt", ".ods", ".fods", ".ots", ".docm", ".doc", ".dotx", ".dotm", ".dot", ".odt", ".fodt", ".ott", ".rtf" ],
-      "edited-docs": [ ".pptx", ".pptm", ".ppt", ".ppsx", ".ppsm", ".pps", ".potx", ".potm", ".pot", ".odp", ".fodp", ".otp", ".xlsx", ".xlsm", ".xls", ".xltx", ".xltm", ".xlt", ".ods", ".fods", ".ots", ".csv", ".docx", ".docxf", ".oform", ".docm", ".doc", ".dotx", ".dotm", ".dot", ".odt", ".fodt", ".ott", ".txt", ".rtf", ".mht", ".html", ".htm" ],
-      "encrypted-docs": [ ".docx", ".docxf", ".xlsx", ".pptx", ".oform" ],
-      "formfilling-docs": [ ".oform" ],
-      "customfilter-docs": [ ".xlsx" ],
-      "reviewed-docs": [ ".docx", ".docxf" ],
-      "viewed-docs": [ ".pptx", ".pptm", ".ppt", ".ppsx", ".ppsm", ".pps", ".potx", ".potm", ".pot", ".odp", ".fodp", ".otp", ".gslides", ".xlsx", ".xlsm", ".xls", ".xltx", ".xltm", ".xlt", ".ods", ".fods", ".ots", ".gsheet", ".csv", ".docx", ".docxf", ".oform", ".docm", ".doc", ".dotx", ".dotm", ".dot", ".odt", ".fodt", ".ott", ".gdoc", ".txt", ".rtf", ".mht", ".html", ".htm", ".epub", ".pdf", ".djvu", ".xps" ],
+			"coauthor-docs": [ ".pptx", ".ppsx", ".xlsx", ".csv", ".docx", ".docxf", ".oform", ".txt" ],
+		    "commented-docs": [ ".docx", ".docxf", ".xlsx", ".pptx" ],
+		    "convert-docs": [ ".pptm", ".ppt", ".ppsm", ".pps", ".potx", ".potm", ".pot", ".odp", ".fodp", ".otp", ".xlsm", ".xls", ".xltx", ".xltm", ".xlt", ".ods", ".fods", ".ots", ".docm", ".doc", ".dotx", ".dotm", ".dot", ".odt", ".fodt", ".ott", ".rtf" ],
+		    "edited-docs": [ ".pptx", ".pptm", ".ppt", ".ppsx", ".ppsm", ".pps", ".potx", ".potm", ".pot", ".odp", ".fodp", ".otp", ".xlsx", ".xlsm", ".xls", ".xltx", ".xltm", ".xlt", ".ods", ".fods", ".ots", ".csv", ".docx", ".docxf", ".oform", ".docm", ".doc", ".dotx", ".dotm", ".dot", ".odt", ".fodt", ".ott", ".txt", ".rtf", ".mht", ".html", ".htm" ],
+		    "encrypted-docs": [ ".docx", ".docxf", ".xlsx", ".pptx", ".oform" ],
+		    "formfilling-docs": [ ".oform" ],
+		    "customfilter-docs": [ ".xlsx" ],
+		    "reviewed-docs": [ ".docx", ".docxf" ],
+		    "viewed-docs": [ ".pptx", ".pptm", ".ppt", ".ppsx", ".ppsm", ".pps", ".potx", ".potm", ".pot", ".odp", ".fodp", ".otp", ".gslides", ".xlsx", ".xlsm", ".xls", ".xltx", ".xltm", ".xlt", ".ods", ".fods", ".ots", ".gsheet", ".csv", ".docx", ".docxf", ".oform", ".docm", ".doc", ".dotx", ".dotm", ".dot", ".odt", ".fodt", ".ott", ".gdoc", ".txt", ".rtf", ".mht", ".html", ".htm", ".epub", ".pdf", ".djvu", ".xps" ],
             "secret": {
                 "value": "",
                 "header": ""
@@ -77,15 +77,20 @@
         },
         "ffmpeg": {
             "value": "",
-      "exts": [ "avi", "mpeg", "mpg", "wmv" ]
+            "exts": [ "avi", "mpeg", "mpg", "wmv" ]
         },
         "uploader": {
             "chunk-size": 10485760,
             "url": "products/files/"
         },
-    "viewed-images": [ ".bmp", ".gif", ".jpeg", ".jpg", ".png", ".ico", ".tif", ".tiff", ".webp" ],
-    "viewed-media": [ ".aac", ".flac", ".m4a", ".mp3", ".oga", ".ogg", ".wav", ".f4v", ".m4v", ".mov", ".mp4", ".ogv", ".webm" ],
-    "index": [ ".pptx", ".xlsx", ".docx" ]
+        "viewed-images": [ ".bmp", ".gif", ".jpeg", ".jpg", ".png", ".ico", ".tif", ".tiff", ".webp" ],
+        "viewed-media": [ ".aac", ".flac", ".m4a", ".mp3", ".oga", ".ogg", ".wav", ".f4v", ".m4v", ".mov", ".mp4", ".ogv", ".webm" ],
+        "index": [ ".pptx", ".xlsx", ".docx" ],
+	    "oform": {
+			"url": "https://oforms.onlyoffice.com/data/reqdata.json",
+			"period": 60,
+			"ext": ".oform"
+		}
     },
     "web": {
         "api": "api/2.0",

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

@@ -298,8 +298,8 @@ export function deleteFolder(folderId, deleteAfter, immediately) {
   return request(options);
 }
 
-export function createFile(folderId, title, templateId) {
-  const data = { title, templateId };
+export function createFile(folderId, title, templateId, formId) {
+  const data = { title, templateId, formId };
   const options = {
     method: "post",
     url: `/files/${folderId}/file`,

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

@@ -1,4 +1,5 @@
 import { request } from "../client";
+import axios from "axios";
 
 export function getSettings() {
   return request({
@@ -454,3 +455,7 @@ export function toggleTipsSubscription() {
   };
   return request(options);
 }
+
+export function getOforms(url) {
+  return axios.get(url);
+}

packages/asc-web-common/components/Loaders/TilesLoader/TilesLoader.js

@@ -34,7 +34,13 @@ const StyledWrapper = styled.div`
   }
 `;
 
-const TilesLoader = ({ foldersCount, filesCount, sectionWidth, ...rest }) => {
+const TilesLoader = ({
+  foldersCount,
+  filesCount,
+  sectionWidth,
+  withTitle,
+  ...rest
+}) => {
   const folders = [];
   const files = [];
 
@@ -59,15 +65,17 @@ const TilesLoader = ({ foldersCount, filesCount, sectionWidth, ...rest }) => {
       ) : null}
       <StyledTilesLoader>{folders}</StyledTilesLoader>
 
-      {filesCount > 0 ? (
-        <RectangleLoader
-          height="22px"
-          width="35px"
-          className="files"
-          animate
-          {...rest}
-        />
-      ) : null}
+      {filesCount > 0
+        ? withTitle && (
+            <RectangleLoader
+              height="22px"
+              width="35px"
+              className="files"
+              animate
+              {...rest}
+            />
+          )
+        : null}
       <StyledTilesLoader>{files}</StyledTilesLoader>
     </StyledWrapper>
   );
@@ -81,6 +89,7 @@ TilesLoader.propTypes = {
 TilesLoader.defaultProps = {
   foldersCount: 2,
   filesCount: 8,
+  withTitle: true,
 };
 
 export default TilesLoader;

packages/asc-web-common/components/Section/sub-components/section-container.js

@@ -38,10 +38,8 @@ const StyledSectionContainer = styled.section`
   display: flex;
   flex-direction: column;
 
-  width: ${(props) =>
-    props.infoPanelIsVisible ? "calc(100% - 677px)" : "100%"};
-  max-width: ${(props) =>
-    props.infoPanelIsVisible ? "calc(100vw - 677px)" : "100vw"};
+  width: 100%;
+  max-width: 100%;
 
   @media ${tablet} {
     width: 100%;

packages/asc-web-common/store/AuthStore.js

@@ -323,6 +323,12 @@ class AuthStore {
   setProviders = (providers) => {
     this.providers = providers;
   };
+
+  getOforms = () => {
+    const culture =
+      this.userStore.user.cultureName || this.settingsStore.culture;
+    return api.settings.getOforms(`${this.settingsStore.urlOforms}${culture}`);
+  };
 }
 
 export default new AuthStore();

packages/asc-web-common/store/SettingsStore.js

@@ -52,6 +52,8 @@ class SettingsStore {
   enabledJoin = false;
   urlLicense = "https://gnu.org/licenses/gpl-3.0.html";
   urlSupport = "https://helpdesk.onlyoffice.com/";
+  urlOforms = "https://cmsoforms.onlyoffice.com/api/oforms?populate=*&locale=";
+
   logoUrl = combineUrl(proxyURL, "/static/images/nav.logo.opened.react.svg");
   customNames = {
     id: "Common",

products/ASC.Files/Client/public/locales/en/FormGallery.json

@@ -0,0 +1,7 @@
+{
+  "GalleryEmptyScreenHeader": "Failed to load form templates",
+  "GalleryEmptyScreenDescription": "Select any form template to see the details",
+  "EmptyScreenDescription": "Please check your Internet connection and refresh the page or try later",
+  "TemplateInfo": "Template info",
+  "FormTemplateInfo": "Form template info"
+}

products/ASC.Files/Client/public/locales/ru/FormGallery.json

@@ -0,0 +1,7 @@
+{
+  "GalleryEmptyScreenHeader": "Не удалось загрузить шаблоны форм",
+  "GalleryEmptyScreenDescription": "Выберите шаблон формы, чтобы просмотреть подробности",
+  "EmptyScreenDescription": "Проверьте подключение к Интернету и обновите страницу или повторите попытку позже",
+  "TemplateInfo": "Информация шаблона",
+  "FormTemplateInfo": "Информация о шаблоне формы"
+}

products/ASC.Files/Client/src/Files.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Provider as FilesProvider } from "mobx-react";
 import { inject, observer } from "mobx-react";
-import { Switch } from "react-router-dom";
+import { Switch, withRouter } from "react-router-dom";
 import config from "../package.json";
 import PrivateRoute from "@appserver/common/components/PrivateRoute";
 import AppLoader from "@appserver/common/components/AppLoader";
@@ -28,6 +28,7 @@ import {
   ArticleHeaderContent,
   ArticleMainButtonContent,
 } from "./components/Article";
+import FormGallery from "./pages/FormGallery";
 
 const { proxyURL } = AppServerConfig;
 const homepage = config.homepage;
@@ -40,6 +41,10 @@ const HISTORY_URL = combineUrl(PROXY_HOMEPAGE_URL, "/:fileId/history");
 const PRIVATE_ROOMS_URL = combineUrl(PROXY_HOMEPAGE_URL, "/private");
 const FILTER_URL = combineUrl(PROXY_HOMEPAGE_URL, "/filter");
 const MEDIA_VIEW_URL = combineUrl(PROXY_HOMEPAGE_URL, "/#preview");
+const FORM_GALLERY_URL = combineUrl(
+  PROXY_HOMEPAGE_URL,
+  "/form-gallery/:folderId"
+);
 
 if (!window.AppServer) {
   window.AppServer = {};
@@ -56,8 +61,12 @@ window.AppServer.files = {
 
 const Error404 = React.lazy(() => import("studio/Error404"));
 
-const FilesArticle = React.memo(() => {
-  return (
+const FilesArticle = React.memo(({ history }) => {
+  const isFormGallery = history.location.pathname
+    .split("/")
+    .includes("form-gallery");
+
+  return !isFormGallery ? (
     <Article>
       <Article.Header>
         <ArticleHeaderContent />
@@ -69,6 +78,8 @@ const FilesArticle = React.memo(() => {
         <ArticleBodyContent />
       </Article.Body>
     </Article>
+  ) : (
+    <></>
   );
 });
 
@@ -81,6 +92,7 @@ const FilesSection = React.memo(() => {
       <PrivateRoute exact path={HOME_URL} component={Home} />
       <PrivateRoute path={FILTER_URL} component={Home} />
       <PrivateRoute path={MEDIA_VIEW_URL} component={Home} />
+      <PrivateRoute path={FORM_GALLERY_URL} component={FormGallery} />
       <PrivateRoute component={Error404Route} />
     </Switch>
   );
@@ -158,7 +170,7 @@ class FilesContent extends React.Component {
     return (
       <>
         <Panels />
-        <FilesArticle />
+        <FilesArticle history={this.props.history} />
         <FilesSection />
       </>
     );
@@ -182,7 +194,7 @@ const Files = inject(({ auth, filesStore }) => {
       auth.setProductVersion(config.version);
     },
   };
-})(withTranslation("Common")(observer(FilesContent)));
+})(withTranslation("Common")(observer(withRouter(FilesContent))));
 
 export default () => (
   <FilesProvider {...stores}>

products/ASC.Files/Client/src/HOCs/withContent.js

@@ -20,12 +20,19 @@ export default function withContent(WrappedContent) {
     constructor(props) {
       super(props);
 
-      const { item, fileActionId, fileActionExt, fileActionTemplateId } = props;
+      const {
+        item,
+        fileActionId,
+        fileActionExt,
+        fileActionTemplateId,
+        fromTemplate,
+      } = props;
       let titleWithoutExt = props.titleWithoutExt;
       if (
         fileActionId === -1 &&
         item.id === fileActionId &&
-        fileActionTemplateId === null
+        fileActionTemplateId === null &&
+        !fromTemplate
       ) {
         titleWithoutExt = getDefaultFileName(fileActionExt);
       }
@@ -188,8 +195,11 @@ export default function withContent(WrappedContent) {
         clearActiveOperations,
         addActiveItems,
         fileCopyAs,
+        fromTemplate,
+        gallerySelected,
       } = this.props;
       const { itemTitle } = this.state;
+      const { parentId, fileExst } = item;
 
       const isMakeFormFromFile = fileActionTemplateId ? true : false;
 
@@ -288,6 +298,29 @@ export default function withContent(WrappedContent) {
 
               clearActiveOperations(fileIds);
 
+              return setIsLoading(false);
+            });
+        } else if (fromTemplate) {
+          createFile(
+            parentId,
+            `${itemTitle}.${fileExst}`,
+            undefined,
+            gallerySelected.id
+          )
+            .then((file) => {
+              createdFileId = file.id;
+              addActiveItems([file.id]);
+
+              return open && openDocEditor(file.id, file.providerKey, tab);
+            })
+            .then(() => this.completeAction(itemId))
+            .catch((e) => toastr.error(e))
+            .finally(() => {
+              const fileIds = [+itemId];
+              createdFileId && fileIds.push(createdFileId);
+
+              clearActiveOperations(fileIds);
+
               return setIsLoading(false);
             });
         } else {
@@ -465,6 +498,7 @@ export default function withContent(WrappedContent) {
         isUpdatingRowItem,
         passwordEntryProcess,
         addActiveItems,
+        gallerySelected,
       } = filesStore;
       const { clearActiveOperations, fileCopyAs } = uploadDataStore;
       const { isRecycleBinFolder, isPrivacyFolder } = treeFoldersStore;
@@ -474,6 +508,7 @@ export default function withContent(WrappedContent) {
         id: fileActionId,
         templateId: fileActionTemplateId,
         type: fileActionType,
+        fromTemplate,
       } = filesStore.fileActionStore;
       const { replaceFileStream, setEncryptionAccess } = auth;
       const {
@@ -491,7 +526,7 @@ export default function withContent(WrappedContent) {
       const isEdit =
         item.id === fileActionId && item.fileExst === fileActionExt;
 
-      const titleWithoutExt = getTitleWithoutExst(item);
+      const titleWithoutExt = getTitleWithoutExst(item, fromTemplate);
 
       return {
         createFile,
@@ -526,6 +561,8 @@ export default function withContent(WrappedContent) {
         fileCopyAs,
         isEdit,
         titleWithoutExt,
+        fromTemplate,
+        gallerySelected,
       };
     }
   )(observer(WithContent));