Admin note frontend

frontend/components/ClubCard.tsx

@@ -29,7 +29,7 @@ const CardWrapper = styled.div`
   }
 `
 
-const Description = styled.p`
+export const Description = styled.p`
   margin-top: 0.2rem;
   color: ${CLUBS_GREY_LIGHT};
   width: 100%;

frontend/components/ClubEditPage.tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
 import React, { ReactElement, useEffect, useState } from 'react'
 import { toast, TypeOptions } from 'react-toastify'
 
+import AdminNotesPage from '../components/ClubEditPage/AdminNotesPage'
 import ApplicationsPage from '../components/ClubEditPage/ApplicationsPage'
 import ClubEditCard from '../components/ClubEditPage/ClubEditCard'
 import ClubManagementCard from '../components/ClubEditPage/ClubManagementCard'
@@ -25,6 +26,7 @@ import {
   School,
   StudentType,
   Tag,
+  UserInfo,
   VisitType,
   Year,
 } from '../types'
@@ -73,6 +75,7 @@ type ClubFormProps = {
   tags: Tag[]
   studentTypes: StudentType[]
   tab?: string | null
+  userInfo: UserInfo
 }
 
 const ClubForm = ({
@@ -83,6 +86,7 @@ const ClubForm = ({
   tags,
   studentTypes,
   clubId,
+  userInfo,
   tab,
 }: ClubFormProps): ReactElement => {
   const [club, setClub] = useState<Club | null>(null)
@@ -369,6 +373,12 @@ const ClubForm = ({
         ),
         disabled: !SHOW_ORG_MANAGEMENT,
       },
+      {
+        name: 'note',
+        label: 'Notes',
+        content: <AdminNotesPage club={club} />,
+        disabled: !userInfo.is_superuser,
+      },
     ]
   }
 

frontend/components/ClubEditPage/AdminNotesCard.tsx

@@ -0,0 +1,67 @@
+import React, { ReactElement } from 'react'
+import styled from 'styled-components'
+
+import { CardTitle, Description } from '../ClubCard'
+import { Card } from '../common'
+
+const NotesCard = styled(Card)`
+  border: 1.5px solid gray;
+  cursor: pointer;
+  margin: 16px 0px;
+`
+const OverflowWrapper = styled.div`
+  width: 100%;
+  display: table;
+  table-layout: fixed;
+`
+const OverflowDescription = styled(Description)`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  word-wrap: break-word;
+`
+const NoteInfo = styled.div`
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  opacity: 0.75;
+  user-select: none;
+`
+
+function extractContentFromHtml(html) {
+  return new DOMParser().parseFromString(html, 'text/html').documentElement
+    .textContent
+}
+
+export default function AdminNotesCard({
+  note,
+  viewNote,
+  disabled,
+}): ReactElement {
+  return (
+    <NotesCard
+      hoverable
+      onClick={
+        disabled
+          ? () => {
+              // pass
+            }
+          : () => viewNote(note)
+      }
+      disabled={disabled}
+    >
+      <CardTitle>{note.title}</CardTitle>
+      <OverflowWrapper>
+        <OverflowDescription>
+          {extractContentFromHtml(note.content)}
+        </OverflowDescription>
+      </OverflowWrapper>
+
+      <NoteInfo>
+        <b>{note.creator}</b>
+        <p>{new Date(note.created_at).toLocaleDateString()}</p>
+      </NoteInfo>
+    </NotesCard>
+  )
+}