some tweaks

products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/SeveralItems.js

@@ -1,206 +1,15 @@
-import RectangleLoader from "@appserver/common/components/Loaders/RectangleLoader";
-import { FileType } from "@appserver/common/constants";
-import Link from "@appserver/components/link";
 import Text from "@appserver/components/text";
 import { inject, observer } from "mobx-react";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { withTranslation } from "react-i18next";
 import { ReactSVG } from "react-svg";
 
-import {
-    StyledProperties,
-    StyledSubtitle,
-    StyledTitle,
-} from "./styles/styles.js";
+import { StyledTitle } from "./styles/styles.js";
 
 const SeveralItems = (props) => {
     const { t, selectedItems, getIcon, getFolderInfo } = props;
     const itemsIcon = getIcon(24, ".file");
 
-    let items = [];
-    const [mixedProperties, setMixedProperties] = useState([]);
-
-    const systemPropertiesTemplate = [
-        {
-            title: t("Common:Owner"),
-            content: "",
-        },
-        {
-            title: t("InfoPanel:Location"),
-            content: "",
-        },
-        {
-            title: t("Common:Type"),
-            content: "",
-        },
-        {
-            title: t("Common:Size"),
-            content: "",
-        },
-        {
-            title: t("Home:ByLastModifiedDate"),
-            content: "",
-        },
-        {
-            title: t("LastModifiedBy"),
-            content: "",
-        },
-        {
-            title: t("Home:ByCreationDate"),
-            content: "",
-        },
-    ];
-
-    const updateItems = (selectedItems) => {
-        let newProperties = selectedItems.map((selectedItem) =>
-            getSingleItemProperties(selectedItem)
-        );
-
-        let mixedProperties = mixProperties(newProperties);
-    };
-
-    const getSingleItemProperties = (item) => {
-        const styledLink = (text, href) => (
-            <Link className="property-content" href={href} isHovered={true}>
-                {text}
-            </Link>
-        );
-
-        const styledText = (text) => (
-            <Text className="property-content">{text}</Text>
-        );
-
-        const parseAndFormatDate = (date) => {
-            date = new Date(date);
-
-            const normalize = (num) => {
-                if (num > 9) return num;
-                return `0${num}`;
-            };
-
-            let day = normalize(date.getDate()),
-                month = normalize(date.getMonth()),
-                year = date.getFullYear(),
-                hours = date.getHours(),
-                minutes = normalize(date.getMinutes()),
-                a_p = hours > 12 ? "AM" : "PM";
-
-            if (hours === 0) hours = 12;
-            else if (hours > 12) hours = hours - 12;
-
-            return `${day}.${month}.${year} ${hours}:${minutes} ${a_p}`;
-        };
-
-        const getItemType = (fileType) => {
-            switch (fileType) {
-                case FileType.Unknown:
-                    return t("Common:Unknown");
-                case FileType.Archive:
-                    return t("Common:Archive");
-                case FileType.Video:
-                    return t("Common:Video");
-                case FileType.Audio:
-                    return t("Common:Audio");
-                case FileType.Image:
-                    return t("Common:Image");
-                case FileType.Spreadsheet:
-                    return t("Home:Spreadsheet");
-                case FileType.Presentation:
-                    return t("Home:Presentation");
-                case FileType.Document:
-                    return t("Home:Document");
-                default:
-                    return t("Home:Folder");
-            }
-        };
-
-        const itemSize = item.isFolder
-            ? `${item.foldersCount} ${t("Translations:Folders")} | ${
-                  item.filesCount
-              } ${t("Files")}`
-            : item.contentLength;
-
-        const itemType = getItemType(item.fileType);
-
-        let result = [
-            {
-                title: t("Common:Owner"),
-                content: styledLink(
-                    item.createdBy.displayName,
-                    item.createdBy.profileUrl
-                ),
-            },
-            {
-                title: t("InfoPanel:Location"),
-                content: <RectangleLoader width="150" height="19" />,
-            },
-            {
-                title: t("Common:Type"),
-                content: styledText(itemType),
-            },
-            {
-                title: t("Common:Size"),
-                content: styledText(itemSize),
-            },
-            {
-                title: t("Home:ByLastModifiedDate"),
-                content: styledText(parseAndFormatDate(item.updated)),
-            },
-            {
-                title: t("LastModifiedBy"),
-                content: styledLink(
-                    item.updatedBy.displayName,
-                    item.updatedBy.profileUrl
-                ),
-            },
-            {
-                title: t("Home:ByCreationDate"),
-                content: styledText(parseAndFormatDate(item.created)),
-            },
-        ];
-
-        if (item.isFolder) return result;
-
-        result.splice(3, 0, {
-            title: t("FileExtension"),
-            content: styledText(item.fileExst.split(".")[1].toUpperCase()),
-        });
-
-        result.push(
-            {
-                title: t("Versions"),
-                content: styledText(item.version),
-            },
-            {
-                title: t("Comments"),
-                content: styledText(item.comment),
-            }
-        );
-
-        return result;
-    };
-
-    const mixProperties = (properties) => {
-        const result = [...systemPropertiesTemplate];
-        result.forEach((finalProperty, i) => {
-            const itemsProperties = properties.map((itemProperties) => {
-                const [property] = itemProperties.filter((obj) => {
-                    return obj.title === finalProperty.title;
-                });
-                console.log(property, finalProperty);
-                return itemProperties[i].title === finalProperty.title
-                    ? itemProperties[i].content
-                    : null;
-            });
-
-            //console.log(itemsProperties);
-        });
-    };
-
-    useEffect(() => {
-        if (selectedItems.length !== items.length) updateItems(selectedItems);
-    }, [selectedItems]);
-
     return (
         <>
             <StyledTitle>
@@ -216,21 +25,6 @@ const SeveralItems = (props) => {
                     src="images/empty_screen.png"
                 />
             </div>
-
-            <StyledSubtitle>
-                <Text fontWeight="600" fontSize="14px" color="#000000">
-                    {t("SystemProperties")}
-                </Text>
-            </StyledSubtitle>
-
-            <StyledProperties>
-                {mixedProperties.map((p) => (
-                    <div key={p.title} className="property">
-                        <Text className="property-title">{p.title}</Text>
-                        {p.content}
-                    </div>
-                ))}
-            </StyledProperties>
         </>
     );
 };

products/ASC.Files/Client/src/pages/Home/index.js

@@ -20,9 +20,9 @@ import {
 } from "../../components/Article";
 import DragTooltip from "../../components/DragTooltip";
 import { createTreeFolders } from "../../helpers/files-helpers";
-import MediaViewer from "./MediaViewer";
 import { InfoPanelBodyContent } from "./InfoPanel";
 import { InfoPanelHeaderContent } from "./InfoPanel";
+import MediaViewer from "./MediaViewer";
 import {
     SectionBodyContent,
     SectionFilterContent,

web/ASC.Web.Client/src/components/pages/Home/index.js

@@ -1,127 +1,128 @@
-import React, { useEffect } from "react";
-import PropTypes from "prop-types";
-import { withRouter } from "react-router";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import Text from "@appserver/components/text";
-import toastr from "studio/toastr";
 import PageLayout from "@appserver/common/components/PageLayout";
 import history from "@appserver/common/history";
-import ModuleTile from "./ModuleTile";
 import { tryRedirectTo } from "@appserver/common/utils";
-import { setDocumentTitle } from "../../../helpers/utils";
+import Text from "@appserver/components/text";
 import { inject, observer } from "mobx-react";
+import PropTypes from "prop-types";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { withRouter } from "react-router";
+import toastr from "studio/toastr";
+import styled from "styled-components";
+
 import config from "../../../../package.json";
+import { setDocumentTitle } from "../../../helpers/utils";
+import ModuleTile from "./ModuleTile";
 
 const HomeContainer = styled.div`
-  padding: 62px 15px 0 15px;
-  margin: 0 auto;
-  max-width: 1140px;
-  width: 100%;
-  box-sizing: border-box;
-  /*justify-content: center;*/
+    padding: 62px 15px 0 15px;
+    margin: 0 auto;
+    max-width: 1140px;
+    width: 100%;
+    box-sizing: border-box;
+    /*justify-content: center;*/
 
-  .home-modules {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 -15px;
+    .home-modules {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 0 -15px;
 
-    .home-module {
-      flex-basis: 0;
-      flex-grow: 1;
-      max-width: 100%;
+        .home-module {
+            flex-basis: 0;
+            flex-grow: 1;
+            max-width: 100%;
+        }
     }
-  }
 
-  .home-error-text {
-    margin-top: 23px;
-    padding: 0 30px;
-    @media (min-width: 768px) {
-      margin-left: 25%;
-      flex: 0 0 50%;
-      max-width: 50%;
+    .home-error-text {
+        margin-top: 23px;
+        padding: 0 30px;
+        @media (min-width: 768px) {
+            margin-left: 25%;
+            flex: 0 0 50%;
+            max-width: 50%;
+        }
+        @media (min-width: 576px) {
+            flex: 0 0 100%;
+            max-width: 100%;
+        }
     }
-    @media (min-width: 576px) {
-      flex: 0 0 100%;
-      max-width: 100%;
-    }
-  }
 `;
 
 const Tiles = ({ modules, isPrimary }) => {
-  let index = 0;
-  const mapped = modules.filter(
-    (m) => m.isPrimary === isPrimary && m.isolateMode !== true
-  );
+    let index = 0;
+    const mapped = modules.filter(
+        (m) => m.isPrimary === isPrimary && m.isolateMode !== true
+    );
 
-  //console.log("Tiles", mapped, isPrimary);
+    //console.log("Tiles", mapped, isPrimary);
 
-  return mapped.length > 0 ? (
-    <div className="home-modules">
-      {mapped.map((m) => (
-        <div className="home-module" key={++index}>
-          <ModuleTile {...m} onClick={() => history.push(m.link)} />
+    return mapped.length > 0 ? (
+        <div className="home-modules">
+            {mapped.map((m) => (
+                <div className="home-module" key={++index}>
+                    <ModuleTile {...m} onClick={() => history.push(m.link)} />
+                </div>
+            ))}
         </div>
-      ))}
-    </div>
-  ) : (
-    <></>
-  );
+    ) : (
+        <></>
+    );
 };
 
 Tiles.propTypes = {
-  modules: PropTypes.array.isRequired,
-  isPrimary: PropTypes.bool.isRequired,
+    modules: PropTypes.array.isRequired,
+    isPrimary: PropTypes.bool.isRequired,
 };
 
 const Body = ({ modules, match, isLoaded }) => {
-  const { t } = useTranslation();
-  const { error } = match.params;
-  setDocumentTitle();
+    const { t } = useTranslation();
+    const { error } = match.params;
+    setDocumentTitle();
 
-  useEffect(() => error && toastr.error(error), [error]);
+    useEffect(() => error && toastr.error(error), [error]);
 
-  return !isLoaded ? (
-    <></>
-  ) : (
-    <HomeContainer>
-      <Tiles modules={modules} isPrimary={true} />
-      <Tiles modules={modules} isPrimary={false} />
+    return !isLoaded ? (
+        <></>
+    ) : (
+        <HomeContainer>
+            <Tiles modules={modules} isPrimary={true} />
+            <Tiles modules={modules} isPrimary={false} />
 
-      {!modules || !modules.length ? (
-        <Text className="home-error-text" fontSize="14px" color="#c30">
-          {t("NoOneModulesAvailable")}
-        </Text>
-      ) : null}
-    </HomeContainer>
-  );
+            {!modules || !modules.length ? (
+                <Text className="home-error-text" fontSize="14px" color="#c30">
+                    {t("NoOneModulesAvailable")}
+                </Text>
+            ) : null}
+        </HomeContainer>
+    );
 };
 
 const Home = ({ defaultPage, ...rest }) => {
-  return tryRedirectTo(defaultPage) ? (
-    <></>
-  ) : (
-    <PageLayout>
-      <PageLayout.SectionBody>
-        <Body {...rest} />
-      </PageLayout.SectionBody>
-    </PageLayout>
-  );
+    return tryRedirectTo(defaultPage) ? (
+        <></>
+    ) : (
+        <PageLayout>
+            <PageLayout.SectionBody>
+                <Body {...rest} />
+            </PageLayout.SectionBody>
+        </PageLayout>
+    );
 };
 
 Home.propTypes = {
-  modules: PropTypes.array.isRequired,
-  isLoaded: PropTypes.bool,
-  defaultPage: PropTypes.string,
+    modules: PropTypes.array.isRequired,
+    isLoaded: PropTypes.bool,
+    defaultPage: PropTypes.string,
 };
 
 export default inject(({ auth }) => {
-  const { isLoaded, settingsStore, moduleStore } = auth;
-  const { defaultPage } = settingsStore;
-  const { modules } = moduleStore;
-  return {
-    defaultPage,
-    modules,
-    isLoaded,
-  };
+    const { isLoaded, settingsStore, moduleStore } = auth;
+    const { defaultPage } = settingsStore;
+    const { modules } = moduleStore;
+    return {
+        defaultPage,
+        modules,
+        isLoaded,
+    };
 })(withRouter(observer(Home)));