From 6ed7eacf8c0a169caa095cbd0383298e0baed083 Mon Sep 17 00:00:00 2001
From: gazizova-vlada <vladamuzyka@yandex.ru>
Date: Tue, 26 Sep 2023 10:40:43 +0300
Subject: [PATCH] Web:Client:Add CalendarComponent.

---
 .../Home/InfoPanel/Body/styles/common.js      | 52 +++++++++++++------
 .../Body/sub-components/ItemTitle/Calendar.js | 46 ++++++++++++++++
 .../ItemTitle/FilesItemTitle.js               | 20 ++++---
 .../ItemTitle/ItemContextOptions.js           | 26 +++++-----
 .../Body/sub-components/ItemTitle/index.js    |  3 ++
 .../Body/views/History/HistoryBlock.js        |  3 ++
 .../InfoPanel/Body/views/History/index.js     |  4 +-
 .../Section/sub-components/info-panel-body.js |  7 ++-
 8 files changed, 122 insertions(+), 39 deletions(-)
 create mode 100644 packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js

diff --git a/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js b/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js
index 717c0332c3..82d2c837f7 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js
@@ -5,7 +5,7 @@ import { hugeMobile, tablet } from "@docspace/components/utils/device";
 
 const StyledInfoPanelBody = styled.div`
   height: auto;
-  ${props =>
+  ${(props) =>
     props.theme.interfaceDirection === "rtl"
       ? css`
           padding: 0px 20px 0 3px;
@@ -13,8 +13,8 @@ const StyledInfoPanelBody = styled.div`
       : css`
           padding: 0px 3px 0 20px;
         `}
-  color: ${props => props.theme.infoPanel.textColor};
-  background-color: ${props => props.theme.infoPanel.backgroundColor};
+  color: ${(props) => props.theme.infoPanel.textColor};
+  background-color: ${(props) => props.theme.infoPanel.backgroundColor};
 
   .no-item {
     text-align: center;
@@ -29,7 +29,7 @@ const StyledInfoPanelBody = styled.div`
   }
 
   @media ${hugeMobile} {
-    ${props =>
+    ${(props) =>
       props.theme.interfaceDirection === "rtl"
         ? css`
             padding: 0px 16px 0 8px;
@@ -44,7 +44,7 @@ const StyledTitle = styled.div`
   position: sticky;
   top: 0;
   z-index: 100;
-  ${props =>
+  ${(props) =>
     props.theme.interfaceDirection === "rtl"
       ? css`
           padding: 24px 20px 24px 0px;
@@ -55,7 +55,7 @@ const StyledTitle = styled.div`
           margin-left: -20px;
         `}
 
-  background: ${props => props.theme.infoPanel.backgroundColor};
+  background: ${(props) => props.theme.infoPanel.backgroundColor};
 
   display: flex;
   flex-wrap: no-wrap;
@@ -74,7 +74,7 @@ const StyledTitle = styled.div`
     }
     &.is-room {
       border-radius: 6px;
-      outline: 1px solid ${props => props.theme.itemIcon.borderColor};
+      outline: 1px solid ${(props) => props.theme.itemIcon.borderColor};
     }
   }
 
@@ -91,12 +91,12 @@ const StyledTitle = styled.div`
     -webkit-line-clamp: 2;
   }
 
-  ${props =>
+  ${(props) =>
     props.withBottomBorder &&
     css`
       width: calc(100% + 20px);
       margin: 0 -20px 0 -20px;
-      ${props =>
+      ${(props) =>
         props.theme.interfaceDirection === "rtl"
           ? css`
               padding: 23px 23px 23px 0;
@@ -104,7 +104,7 @@ const StyledTitle = styled.div`
           : css`
               padding: 23px 0 23px 20px;
             `}
-      border-bottom: ${props =>
+      border-bottom: ${(props) =>
         `solid 1px ${props.theme.infoPanel.borderColor}`};
     `}
 
@@ -115,7 +115,7 @@ const StyledTitle = styled.div`
 
   @media ${hugeMobile} {
     width: calc(100vw - 32px);
-    ${props =>
+    ${(props) =>
       props.theme.interfaceDirection === "rtl"
         ? css`
             padding: 24px 16px 24px 0;
@@ -124,11 +124,11 @@ const StyledTitle = styled.div`
             padding: 24px 0 24px 16px;
           `}
 
-    ${props =>
+    ${(props) =>
       props.withBottomBorder &&
       css`
         width: calc(100% + 16px);
-        ${props =>
+        ${(props) =>
           props.theme.interfaceDirection === "rtl"
             ? css`
                 padding: 23px 16px 23px 0;
@@ -184,7 +184,7 @@ const StyledProperties = styled.div`
         background: red;
         max-width: 195px;
         margin: 0;
-        background: ${props => props.theme.infoPanel.details.tagBackground};
+        background: ${(props) => props.theme.infoPanel.details.tagBackground};
         p {
           white-space: nowrap;
           overflow: hidden;
@@ -209,7 +209,7 @@ const StyledProperties = styled.div`
               width: 12px;
               height: 12px;
               path {
-                fill: ${props =>
+                fill: ${(props) =>
                   props.theme.infoPanel.details.commentEditorIconColor};
               }
             }
@@ -247,7 +247,27 @@ const StyledProperties = styled.div`
   }
 `;
 
+const StyledItemOptions = styled.div`
+  ${(props) =>
+    props.theme.interfaceDirection === "rtl"
+      ? css`
+          margin-right: auto;
+        `
+      : css`
+          margin-left: auto;
+        `}
+
+  display: flex;
+`;
+
 StyledInfoPanelBody.defaultProps = { theme: Base };
 StyledTitle.defaultProps = { theme: Base };
+StyledItemOptions.defaultProps = { theme: Base };
 
-export { StyledInfoPanelBody, StyledTitle, StyledSubtitle, StyledProperties };
+export {
+  StyledInfoPanelBody,
+  StyledTitle,
+  StyledSubtitle,
+  StyledProperties,
+  StyledItemOptions,
+};
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js
new file mode 100644
index 0000000000..e5c93ce6d8
--- /dev/null
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js
@@ -0,0 +1,46 @@
+import { useState } from "react";
+import styled from "styled-components";
+import Calendar from "@docspace/components/calendar";
+
+const StyledCalendar = styled.div`
+  position: relative;
+
+  .calendar {
+    position: absolute;
+    right: 0;
+    /* ${(props) =>
+      props.isMobile &&
+      css`
+        position: fixed;
+        bottom: 0;
+        inset-inline-start: 0;
+      `} */
+  }
+`;
+
+const CalendarComponent = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedDate, setSelectedDate] = useState(null);
+
+  const toggleCalendar = () => setIsOpen((open) => !open);
+  const onDateSet = (date) => {
+    console.log("date", date);
+    setSelectedDate(date);
+    setIsOpen(false);
+  };
+
+  return (
+    <StyledCalendar>
+      <div onClick={toggleCalendar}>Calendar</div>
+      {isOpen && (
+        <Calendar
+          className="calendar"
+          setSelectedDate={onDateSet}
+          selectedDate={selectedDate}
+        />
+      )}
+    </StyledCalendar>
+  );
+};
+
+export default CalendarComponent;
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js
index a80cdf7807..071909bdcf 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js
@@ -6,15 +6,17 @@ import { ReactSVG } from "react-svg";
 import { Text } from "@docspace/components";
 
 import ItemContextOptions from "./ItemContextOptions";
+import CalendarComponent from "./Calendar";
 
-import { StyledTitle } from "../../styles/common";
+import { StyledTitle, StyledItemOptions } from "../../styles/common";
 
-const FilesItemTitle = ({ t, selection, isSeveralItems }) => {
+const FilesItemTitle = ({ t, selection, isSeveralItems, openHistory }) => {
   const itemTitleRef = useRef();
 
   if (isSeveralItems) return <></>;
 
   const icon = selection.icon;
+  //only history
 
   return (
     <StyledTitle ref={itemTitleRef}>
@@ -27,11 +29,15 @@ const FilesItemTitle = ({ t, selection, isSeveralItems }) => {
       </div>
       <Text className="text">{selection.title}</Text>
       {selection && (
-        <ItemContextOptions
-          t={t}
-          itemTitleRef={itemTitleRef}
-          selection={selection}
-        />
+        <StyledItemOptions>
+          {openHistory && <CalendarComponent />}
+
+          <ItemContextOptions
+            t={t}
+            itemTitleRef={itemTitleRef}
+            selection={selection}
+          />
+        </StyledItemOptions>
       )}
     </StyledTitle>
   );
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/ItemContextOptions.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/ItemContextOptions.js
index 8bbbda9a92..bf5df38fbd 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/ItemContextOptions.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/ItemContextOptions.js
@@ -6,16 +6,16 @@ import { ContextMenu, ContextMenuButton } from "@docspace/components";
 
 import ContextHelper from "../../helpers/ContextHelper";
 
-const StyledItemContextOptions = styled.div`
-  ${props =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          margin-right: auto;
-        `
-      : css`
-          margin-left: auto;
-        `}
-`;
+// const StyledItemContextOptions = styled.div`
+//   ${props =>
+//     props.theme.interfaceDirection === "rtl"
+//       ? css`
+//           margin-right: auto;
+//         `
+//       : css`
+//           margin-left: auto;
+//         `}
+// `;
 
 const ItemContextOptions = ({
   t,
@@ -33,7 +33,7 @@ const ItemContextOptions = ({
 
   const contextMenuRef = useRef();
 
-  const onContextMenu = e => {
+  const onContextMenu = (e) => {
     e.button === 2;
     if (!contextMenuRef.current.menuRef.current) itemTitleRef.current.click(e);
     contextMenuRef.current.show(e);
@@ -70,7 +70,7 @@ const ItemContextOptions = ({
   };
 
   return (
-    <StyledItemContextOptions>
+    <>
       <ContextMenu
         ref={contextMenuRef}
         getContextModel={getData}
@@ -91,7 +91,7 @@ const ItemContextOptions = ({
           displayType="toggle"
         />
       )}
-    </StyledItemContextOptions>
+    </>
   );
 };
 
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js
index f7902f1b77..c67cfad0a9 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js
@@ -44,12 +44,15 @@ const ItemTitle = ({
       ? selectionParentRoom
       : selection;
 
+  const openHistory = roomsView === "info_history";
+
   return (
     <FilesItemTitle
       selectionLength={selectionLength}
       selection={filesItemSelection}
       isSeveralItems={isSeveralItems}
       getIcon={getIcon}
+      openHistory={openHistory}
     />
   );
 };
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js b/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js
index cb10f495f1..71653a13f8 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js
@@ -41,8 +41,11 @@ const HistoryBlock = ({
     ? initiator.avatarSmall
     : DefaultUserAvatarSmall;
 
+  console.log("json.ModifiedDate", json.ModifiedDate);
+
   return (
     <StyledHistoryBlock
+      id="StyledHistoryBlock"
       withBottomDivider={!isLastEntity}
       isUserAction={isUserAction}
     >
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js
index e4c83c212d..a187489991 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js
@@ -72,8 +72,10 @@ const History = ({
   if (!selectionHistory) return <Loaders.InfoPanelViewLoader view="history" />;
   if (!selectionHistory?.length) return <NoHistory t={t} />;
 
+  console.log("selectionHistory", selectionHistory);
+
   return (
-    <StyledHistoryList>
+    <StyledHistoryList id="StyledHistoryList">
       {selectionHistory.map(({ day, feeds }) => [
         <StyledHistorySubtitle key={day}>{day}</StyledHistorySubtitle>,
         ...feeds.map((feed, i) => (
diff --git a/packages/common/components/Section/sub-components/info-panel-body.js b/packages/common/components/Section/sub-components/info-panel-body.js
index fc66545ace..1a66c1f0f9 100644
--- a/packages/common/components/Section/sub-components/info-panel-body.js
+++ b/packages/common/components/Section/sub-components/info-panel-body.js
@@ -10,7 +10,7 @@ const StyledScrollbar = styled(Scrollbar)`
       box-sizing: border-box;
       & .scroll-wrapper > .scroller > .scroll-body {
         overflow: hidden !important;
-        ${props =>
+        ${(props) =>
           props.theme.interfaceDirection === "rtl"
             ? css`
                 padding-left: 17px !important;
@@ -30,11 +30,14 @@ const StyledScrollbar = styled(Scrollbar)`
 const SubInfoPanelBody = ({ children, isInfoPanelScrollLocked }) => {
   const content = children?.props?.children;
 
+  console.log("SubInfoPanelBody");
+
   return (
     <StyledScrollbar
       $isScrollLocked={isInfoPanelScrollLocked}
       scrollclass="section-scroll"
-      stype="mediumBlack">
+      stype="mediumBlack"
+    >
       {content}
     </StyledScrollbar>
   );