add home visits widget

widgets/src/components/HomeEventList.js

@@ -141,11 +141,11 @@ export function HomeEventList({ default_entries = 3, columns = 6, columns_md = 6
 
 function filterEventsByType(events, type) {
     return events.filter((event) => event.type === type);
-  }
+}
 
-  function filterEventsByCategory(events, category) {
+function filterEventsByCategory(events, category) {
     return events.filter((event) => event.category?.name === category);
-  }
+}
 
 function EventBox({ event, columns, columns_md, columns_lg }) {    
     const date = event.endDate

widgets/src/components/HomeGrantList.js

@@ -51,10 +51,9 @@ export function HomeGrantList({}) {
 }
 
 function GrantBox({ grant }) {    
-    console.log(grant)
     const date = grant.endDate
     ? formatDateInterval(grant.startDate, grant.endDate, 'en-US')
-    : `${formatDate(grant.startDatetime)} - ${formatTime(grant.startDatetime)}`;
+    : `${formatDate(grant.startDate)} - ${formatTime(grant.startDate)}`;
 
     const link = getDMURL(`research/grant-details/?grant_id=${grant._id}`);
 

widgets/src/components/HomeVisitList.js

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { Button, Nav, Tab } from 'react-bootstrap';
+import { useQuery } from 'react-query';
+import axios from 'axios';
+import { Loading } from './Loading';
+import {
+  formatDateInterval,
+  getManageURL,
+  getRoomDetails
+} from '../utils';
+import './styles.css';
+
+export function HomeVisitList({ default_entries = 10 }) {
+    const [numberOfEntries, setNumberOfEntries] = useState(default_entries)
+
+    const { isLoading, error, data } = useQuery([ 'homevisits', numberOfEntries ], async () => {
+        const now = new Date()
+        now.setHours(0, 0, 0, 0)
+
+        const visits = await axios.get(getManageURL("public/visits"), { params: { _limit: numberOfEntries, _sort: "startDate", from: '2024-01-01'} })
+        if (visits.data) {
+            return visits.data.data
+        }
+    })
+
+    if (isLoading || error) {
+        return <Loading widget="Lista delle visite" error={error}></Loading>
+    }
+
+    const all_visit_list = data.slice(0, numberOfEntries).map((v) => (
+        <VisitTableItems visit={v} key={v._id}></VisitTableItems>
+    ));
+
+    const showButton = numberOfEntries <= all_visit_list.length;
+
+    return (
+        <div className="">
+            <table className="styled-table">
+                <thead>
+                    <tr>
+                        <th>Visitor</th>
+                        <th>Period</th>
+                        <th>Office</th>
+                    </tr>
+                </thead>
+                <tbody className="">{all_visit_list}</tbody>
+            </table>
+            {showButton && (
+            <div className="d-flex flex-row justify-content-center">
+                <Button className="load-button" onClick={() => setNumberOfEntries(numberOfEntries + default_entries)}>
+                {'Load more'}
+                </Button>
+            </div>
+            )}
+        </div>
+      );
+}
+
+function VisitTableItems({ visit, key }) {
+    const date = formatDateInterval(visit.startDate, visit.endDate, 'en-US')
+    const roomDetails = visit.roomAssignment ? getRoomDetails(visit.roomAssignment.room, '', true) : '';
+
+    return (
+    <tr key={key}>
+        <td>{visit.person.firstName} {visit.person.lastName} ({visit.person.affiliations[0]?.name})</td>
+        <td>{date}</td>
+        {roomDetails && roomDetails !== '' && (
+          <td>{roomDetails.buildingName}, {roomDetails.floorName}, {roomDetails.roomLink.text}</td>
+        )}
+    </tr>
+    )
+}

widgets/src/components/styles.css

@@ -1,3 +1,35 @@
+.styled-table {
+    border-collapse: collapse;
+    margin: 0 auto;
+    font-size: 1rem;
+    min-width: 400px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+}
+
+.styled-table thead tr {
+    background-color: #003c71;
+    color: #ffffff;
+    text-align: left;
+}
+
+.styled-table th,
+.styled-table td {
+    padding: 12px 15px;
+}
+.styled-table tbody tr {
+    border-bottom: 1px solid #dddddd;
+    font-family: "Titillium Web";
+    font-size: 0.9rem;
+}
+
+.styled-table tbody tr:nth-of-type(even) {
+    background-color: #f3f3f3;
+}
+
+.styled-table tbody tr:last-of-type {
+    border-bottom: 2px solid #003c71;
+}
+
 .event-box {
     width: 300px;
     height: 170px;

widgets/src/index.html

@@ -76,6 +76,11 @@
                data-target="#homegrantlist-tab" type="button" role="tab" aria-controls="homegrantlist" 
                aria-selected="false">HomeGrantList</a>
           </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#homevisitlist" id="homevisitlist-label" data-toggle="tab" 
+               data-target="#homevisitlist-tab" type="button" role="tab" aria-controls="homevisittlist" 
+               aria-selected="false">HomeVisitList</a>
+          </li>
           <li class="nav-item">
               <a class="nav-link" href="#persondetails" id="persondetails-label" data-toggle="tab" 
                  data-target="#persondetails-tab" type="button" role="tab" aria-controls="persondetails" 
@@ -109,6 +114,7 @@
           <div class="tab-pane fade p-3" id="conference-tab"><div id="conference"></div></div>
           <div class="tab-pane fade p-3" id="homeeventlist-tab"><div id="homeeventlist"></div></div>
           <div class="tab-pane fade p-3" id="homegrantlist-tab"><div id="homegrantlist"></div></div>
+          <div class="tab-pane fade p-3" id="homevisitlist-tab"><div id="homevisitlist"></div></div>
           <div class="tab-pane fade p-3" id="persondetails-tab"><div id="persondetails"></div></div>
           <div class="tab-pane fade p-3" id="courselist-tab"><div id="courselist"></div></div>
           <div class="tab-pane fade p-3" id="grant-tab"><div id="grant"></div></div>
@@ -158,6 +164,9 @@
             dmwidgets.loadComponent(document.getElementById('homegrantlist'), "HomeGrantList", {
               _limit: 10,
             })
+            dmwidgets.loadComponent(document.getElementById('homevisitlist'), "HomeVisitList", {
+              default_entries: 5,
+            })
             dmwidgets.loadComponent(document.getElementById('persondetails'), "PersonDetails", {
                 person_id: '66471d4ef38d44852c3310e9',
             })

widgets/src/index.js

@@ -8,6 +8,7 @@ import { ConferenceList } from './components/ConferenceList';
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { HomeEventList } from './components/HomeEventList';
 import { HomeGrantList } from './components/HomeGrantList';
+import { HomeVisitList } from './components/HomeVisitList';
 import { PersonDetails } from './components/PersonDetails';
 import { CourseList } from './components/CourseList';
 import { Grant } from './components/Grant';
@@ -51,6 +52,9 @@ dmwidgets.loadComponent = (target, name, props = {}) => {
         case 'HomeGrantList':
             element = <HomeGrantList></HomeGrantList>
             break;
+        case 'HomeVisitList':
+            element = <HomeVisitList {...props}></HomeVisitList>
+            break;
         case 'PersonDetails':
             element = <PersonDetails {...props}></PersonDetails>
             break;