reintrodotta visualizzazione lista rimossa nel commit precedente

This commit is contained in:
2023-10-07 22:49:03 +02:00
parent 7efb311a61
commit af41177561
7 changed files with 104 additions and 46 deletions
+35 -7
View File
@@ -4,11 +4,21 @@ import _ from 'lodash'
import { useEffect, useRef, useState } from 'preact/hooks'
import { prettyCourseName, WEEK_DAYS } from '../../utils.jsx'
export const Courses = ({ source, timetables, selection, setSelection }) => {
export const Courses = ({
source,
timetables,
selection,
setSelection,
hideOtherCourses,
}) => {
const events = timetables[source]
const selectionSet = new Set(selection)
const eventsByCourse = _.groupBy(_.sortBy(events, 'id'), 'id')
const visibleEvents = hideOtherCourses
? events.filter(e => selectionSet.has(e.id))
: events
const eventsByCourse = _.groupBy(_.sortBy(visibleEvents, 'id'), 'id')
const profsPerCourse = _.mapValues(eventsByCourse, events =>
_.uniq(events.flatMap(event => event.docenti))
@@ -42,6 +52,15 @@ export const Courses = ({ source, timetables, selection, setSelection }) => {
return (
<div class="course-view" ref={element}>
{hideOtherCourses && selection.length === 0 && (
<div class="no-courses-warning">
<p>Non hai ancora selezionato nessun corso.</p>
<p>
Clicca sui corsi nelle altre visuali per selezionarli e
visualizzarli nella lista
</p>
</div>
)}
<div class="wrap-container">
{Object.entries(eventsByCourse).map(([id, courseEvents]) => (
<div
@@ -52,18 +71,27 @@ export const Courses = ({ source, timetables, selection, setSelection }) => {
}
data-course-id={id}
onClick={() => {
if (!selectionSet.has(id)) setSelection([...selection, id])
else setSelection(selection.filter(selId => selId !== id))
if (!selectionSet.has(id))
setSelection([...selection, id])
else
setSelection(
selection.filter(selId => selId !== id)
)
}}
>
<div class="title">{prettyCourseName(courseEvents[0].name)}</div>
<div class="docenti">{profsPerCourse[id].join(', ')}</div>
<div class="title">
{prettyCourseName(courseEvents[0].name)}
</div>
<div class="docenti">
{profsPerCourse[id].join(', ')}
</div>
<div class="events">
{courseEvents.map(course => (
<div>
{WEEK_DAYS[course.start.getDay()]}{' '}
{format(course.start, 'H:mm')}&ndash;
{format(course.end, 'H:mm')} {course.aule.join(', ')}
{format(course.end, 'H:mm')}{' '}
{course.aule.join(', ')}
</div>
))}
</div>