Merge pull request #4951 from webkom/report-changelog

Implement report changelogs to meetings
webkom · Sep 13, 2024 · 5448bdd · 5448bdd
2 parents d2865f9 + 6590272
commit 5448bdd
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 25 deletions.
diff --git a/app/components/AddToCalendar/AddToCalendar.css b/app/components/AddToCalendar/AddToCalendar.css
@@ -1,13 +1,8 @@
-.calendarToggleButton {
-  margin-top: var(--spacing-md);
-  margin-bottom: var(--spacing-sm);
-}
-
 .calendarImportCard {
   margin-top: var(--spacing-sm);
 }
 
 .calendarLink {
   display: block;
-  margin-bottom: var(--spacing-md);
+  margin-bottom: var(--spacing-sm);
 }
diff --git a/app/components/AddToCalendar/AddToCalendar.tsx b/app/components/AddToCalendar/AddToCalendar.tsx
@@ -38,10 +38,7 @@ const AddToCalendarToggle = ({ icalToken, meeting }: Props) => {
 
   return (
     <div>
-      <Button
-        className={styles.calendarToggleButton}
-        onPress={() => setCalendarIsOpen(!calendarIsOpen)}
-      >
+      <Button onPress={() => setCalendarIsOpen(!calendarIsOpen)}>
         <Icon name="calendar-outline" size={19} />
         {!calendarIsOpen ? 'Vis kalenderimport' : 'Skjul kalenderimport'}
       </Button>

diff --git a/app/components/Tooltip/Tooltip.css b/app/components/Tooltip/Tooltip.css
@@ -1,6 +1,5 @@
 :root {
   --tooltip-background: var(--lego-font-color);
-  --shadow-md: 0 12px 20px 6px rgba(104, 112, 118, 8%);
 }
 
 .tooltip {

diff --git a/app/components/Tooltip/index.tsx b/app/components/Tooltip/index.tsx
@@ -7,6 +7,7 @@ type Props = {
   children: ReactNode;
   content: ReactNode;
   className?: string;
+  containerClassName?: string;
   onClick?: () => void;
   positions?: ComponentProps<typeof Popover>['positions'];
   style?: CSSProperties;
@@ -17,6 +18,7 @@ const Tooltip = ({
   children,
   content,
   className,
+  containerClassName,
   onClick,
   positions,
   style,
@@ -35,6 +37,7 @@ const Tooltip = ({
       <Popover
         isOpen={hovered}
         positions={positions}
+        containerClassName={containerClassName}
         content={({ position, childRect, popoverRect }) => (
           <ArrowContainer
             position={position}

diff --git a/app/routes/meetings/components/MeetingDetail.css b/app/routes/meetings/components/MeetingDetail.css
@@ -1,9 +1,24 @@
+.changelogTrigger {
+  color: var(--secondary-font-color);
+  font-size: var(--font-size-sm);
+}
+
+.changelogDropdown {
+  z-index: 80;
+}
+
+.changelogTooltipContainer {
+  z-index: 95;
+}
+
+.changelogTooltip {
+  display: inline-flex;
+}
+
 .statusButtons {
-  margin-bottom: 10px;
+  margin-bottom: var(--spacing-md);
 }
 
 .meetingReactions {
-  display: flex;
-  flex-direction: row;
   margin: var(--spacing-sm) 0;
 }
diff --git a/app/routes/meetings/components/MeetingDetail.tsx b/app/routes/meetings/components/MeetingDetail.tsx
@@ -1,14 +1,18 @@
 import {
   Button,
   ButtonGroup,
+  Flex,
   Icon,
   LinkButton,
   LoadingPage,
+  Modal,
   Page,
 } from '@webkom/lego-bricks';
 import { isEmpty } from 'lodash';
-import { Pencil } from 'lucide-react';
+import { ListRestart, Pencil } from 'lucide-react';
 import moment from 'moment-timezone';
+import diff from 'node-htmldiff';
+import { useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link, useParams } from 'react-router-dom';
 import { setInvitationStatus } from 'app/actions/MeetingActions';
@@ -21,10 +25,13 @@ import {
   ContentMain,
 } from 'app/components/Content';
 import DisplayContent from 'app/components/DisplayContent';
+import Dropdown from 'app/components/Dropdown';
+import { ProfilePicture } from 'app/components/Image';
 import InfoList from 'app/components/InfoList';
 import LegoReactions from 'app/components/LegoReactions';
 import { MazemapEmbed } from 'app/components/MazemapEmbed';
-import { FromToTime } from 'app/components/Time';
+import Time, { FromToTime } from 'app/components/Time';
+import Tooltip from 'app/components/Tooltip';
 import Attendance from 'app/components/UserAttendance/Attendance';
 import { useCurrentUser } from 'app/reducers/auth';
 import { selectCommentsByIds } from 'app/reducers/comments';
@@ -108,6 +115,21 @@ const MeetingDetails = () => {
     }));
   };
 
+  const [changelogOpen, setChangelogOpen] = useState(false);
+  const [_diff, setDiff] = useState('');
+
+  const handleChangelogClick = (index: number) => {
+    if (!meeting) return;
+
+    const currentReport = meeting.reportChangelogs[index].report;
+    const previousReport =
+      index < meeting.reportChangelogs.length - 1
+        ? meeting.reportChangelogs[index + 1].report
+        : '';
+
+    setDiff(diff(previousReport, currentReport));
+  };
+
   const attendanceButtons = (
     statusMe: string | null | undefined,
     startTime: Dateish,
@@ -177,7 +199,71 @@ const MeetingDetails = () => {
           {meeting.description && (
             <div>{urlifyString(meeting.description)}</div>
           )}
-          <h2>Referat</h2>
+          <Flex alignItems="center" gap="var(--spacing-sm)">
+            <h2>Referat</h2>
+            {meeting.reportChangelogs?.length > 1 && (
+              <Dropdown
+                show={changelogOpen}
+                toggle={() => setChangelogOpen(!changelogOpen)}
+                contentClassName={styles.changelogDropdown}
+                triggerComponent={
+                  <Icon
+                    iconNode={<ListRestart />}
+                    size={18}
+                    className="secondaryFontColor"
+                  />
+                }
+              >
+                <Dropdown.List>
+                  {meeting.reportChangelogs.map((reportChangelog, index) => (
+                    <Dropdown.ListItem key={index}>
+                      <button onClick={() => handleChangelogClick(index)}>
+                        <Flex alignItems="center" gap="var(--spacing-sm)">
+                          <ProfilePicture
+                            user={reportChangelog.createdBy}
+                            size={24}
+                          />
+                          <span>
+                            <strong>
+                              {reportChangelog.createdBy.username}
+                            </strong>{' '}
+                            {index === meeting.reportChangelogs.length - 1
+                              ? 'opprettet'
+                              : 'redigerte'}{' '}
+                            for{' '}
+                            <Tooltip
+                              content={moment(reportChangelog.createdAt).format(
+                                'lll',
+                              )}
+                              positions="right"
+                              className={styles.changelogTooltip}
+                              containerClassName={
+                                styles.changelogTooltipContainer
+                              }
+                            >
+                              <Time time={reportChangelog.createdAt} wordsAgo />
+                            </Tooltip>
+                          </span>
+                        </Flex>
+                      </button>
+                      {index !== meeting.reportChangelogs.length - 1 && (
+                        <Dropdown.Divider />
+                      )}
+                    </Dropdown.ListItem>
+                  ))}
+                </Dropdown.List>
+                {!isEmpty(_diff) && (
+                  <Modal
+                    title="Endringer"
+                    isOpen
+                    onOpenChange={() => setDiff('')}
+                  >
+                    <DisplayContent content={_diff} />
+                  </Modal>
+                )}
+              </Dropdown>
+            )}
+          </Flex>
           <DisplayContent content={meeting.report} />
         </ContentMain>
         <ContentSidebar>

diff --git a/app/store/models/Meeting.d.ts b/app/store/models/Meeting.d.ts
@@ -2,8 +2,15 @@ import type { EntityId } from '@reduxjs/toolkit';
 import type { ActionGrant, Dateish } from 'app/models';
 import type { AutocompleteContentType } from 'app/store/models/Autocomplete';
 import type { ReactionsGrouped } from 'app/store/models/Reaction';
+import type { PublicUser } from 'app/store/models/User';
 import type { ContentTarget } from 'app/store/utils/contentTarget';
 
+interface ReportChangelog {
+  report: string;
+  createdAt: Dateish;
+  createdBy: PublicUser;
+}
+
 interface Meeting {
   id: EntityId;
   createdBy: EntityId;
@@ -13,6 +20,7 @@ interface Meeting {
   startTime: Dateish;
   endTime: Dateish;
   report: string;
+  reportChangelogs: ReportChangelog[];
   reportAuthor?: EntityId;
   invitations: EntityId[];
   comments: EntityId[];
@@ -32,6 +40,7 @@ export type DetailedMeeting = Pick<
   | 'startTime'
   | 'endTime'
   | 'report'
+  | 'reportChangelogs'
   | 'reportAuthor'
   | 'invitations'
   | 'comments'

diff --git a/app/styles/overlay.css b/app/styles/overlay.css
@@ -5,11 +5,11 @@
   background: var(--lego-card-color);
   border-radius: var(--border-radius-lg);
   position: absolute;
-  margin-top: 10px;
+  margin-top: var(--spacing-sm);
   z-index: 110;
 
   @media (--small-viewport) {
-    width: calc(100% - 10px);
+    width: calc(100% - var(--spacing-sm));
   }
 }
 
@@ -54,7 +54,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 15px;
+  padding: var(--spacing-sm) var(--spacing-md);
   transition: background var(--easing-fast);
 
   &:hover {

diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "@sentry/node": "^7.101.1",
     "@stripe/react-stripe-js": "^1.14.2",
     "@stripe/stripe-js": "^1.46.0",
-    "@webkom/lego-editor": "^2.4.0",
+    "@webkom/lego-editor": "^2.5.0",
     "@webkom/react-meter-bar": "^2.0.0",
     "@webkom/react-prepare": "^1.0.1",
     "animate.css": "^4.1.1",
@@ -76,6 +76,7 @@
     "minireset.css": "^0.0.7",
     "moment-timezone": "^0.5.45",
     "morgan": "^1.9.1",
+    "node-htmldiff": "^0.9.4",
     "normalizr": "^3.6.2",
     "path-browserify": "^1.0.1",
     "postcss": "^8.4.40",

diff --git a/yarn.lock b/yarn.lock
@@ -4974,10 +4974,10 @@
     "@webassemblyjs/ast" "1.12.1"
     "@xtuc/long" "4.2.2"
 
-"@webkom/lego-editor@^2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@webkom/lego-editor/-/lego-editor-2.4.0.tgz#27ca2b464c3887d3b4e6769793361ef34981c2af"
-  integrity sha512-tC5BU3+LkkIB2Acj0zUr1Y6uBcYa7jHqYorkAp+1Z4SvF3lj0QMJgaMWt6IaYQF9164vA3C9RLj9+bK8+xowYA==
+"@webkom/lego-editor@^2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@webkom/lego-editor/-/lego-editor-2.5.0.tgz#84d3b64d252a0b40ccd29e74a8d57669ae5d0415"
+  integrity sha512-MbyZDRAVAqucqDvsVPot7BHmotNLR7rGmlVPt1ZrpgU/uEYczTQ9jvdMIfmm5w4ShxIv0lDRqYsfmZqL7J+6RQ==
   dependencies:
     "@webkom/lego-bricks" "^1.2.1"
     classnames "^2.2.6"
@@ -10290,6 +10290,11 @@ node-fetch@^2.6.1:
   dependencies:
     whatwg-url "^5.0.0"
 
+node-htmldiff@^0.9.4:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/node-htmldiff/-/node-htmldiff-0.9.4.tgz#d8fec52fbe736780afff28d2c8476ec106520887"
+  integrity sha512-Nvnv0bcehOFsH/TD+bi4ls3iWTRQiytqII5+I1iBUypO+GFMYLcyBJfS2U3DMRSIYzfZHysaYLYoCXx6Q148Hg==
+
 node-releases@^2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"