Skip to content

Commit 5c82105

Browse files
JonathangarridoJonathangarrido
committed
fix(calendar): muestra sede en eventos presenciales
1 parent 1ccd17a commit 5c82105

8 files changed

Lines changed: 220 additions & 122 deletions

File tree

‎src/atoms/Icons/MapIndicator.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Base, BaseProps } from './Base'
2+
3+
export function MapIndicator(props: BaseProps): JSX.Element {
4+
return (
5+
<Base {...props} w="12px" viewBox="0 0 14 16" title="mapIndicator">
6+
<path
7+
fillRule="nonzero"
8+
fill="currentColor"
9+
d="M7 0C3.1 0 0 3.1 0 7c0 1.9.7 3.7 2.1 5 .1.1 4.1 3.7 4.2 3.8.4.3 1 .3 1.3 0 .1-.1 4.2-3.7 4.2-3.8 1.4-1.3 2.1-3.1 2.1-5 .1-3.9-3-7-6.9-7zm0 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
10+
/>
11+
</Base>
12+
)
13+
}
14+
15+
MapIndicator.displayName = 'MapIndicator'

‎src/atoms/Icons/index.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
11
export * from './AcademicRecord'
22
export * from './AlertInfo'
3+
export * from './Alerts'
34
export * from './ArrowRight'
45
export * from './Calendar'
56
export * from './Certificate'
67
export * from './CircularCheck'
78
export * from './CircularInformation'
9+
export * from './Close'
10+
export * from './DiagonalArrow'
811
export * from './Download'
912
export * from './GoAhead'
1013
export * from './GoBack'
11-
export * from './Multimedia'
1214
export * from './Loader'
15+
export * from './MapIndicator'
16+
export * from './Multimedia'
17+
export * from './Password'
18+
export * from './Pen'
19+
export * from './PlusSign'
1320
export * from './Profile'
1421
export * from './Remote'
1522
export * from './Schedule'
23+
export * from './TextBubble'
1624
export * from './Time'
17-
export * from './TinyAlertInfo'
1825
export * from './TinyAlertError'
19-
export * from './TinyAlertWarning'
26+
export * from './TinyAlertInfo'
2027
export * from './TinyAlertSuccess'
21-
export * from './Password'
22-
export * from './Pen'
23-
export * from './PlusSign'
28+
export * from './TinyAlertWarning'
2429
export * from './TrashCan'
25-
export * from './TextBubble'
26-
export * from './Alerts'
27-
export * from './Close'
28-
export * from './DiagonalArrow'

‎src/documentation/pages/Organisms/CalendarDropdown.tsx‎

Lines changed: 59 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import { Box } from '@chakra-ui/react'
2+
13
import { Code, MyHeading, MyText, MyTitle } from '@/documentation/components'
24
import { CalendarDropdown } from '@/organisms'
3-
import { Box } from '@chakra-ui/react'
45
import { vars } from '@theme'
56

67
export const CalendarDropdownPage = (): JSX.Element => {
@@ -206,34 +207,34 @@ const events = [
206207
time: '0:01 hrs.',
207208
},
208209
},
209-
{
210-
id: 4534,
211-
student_id: 17158893,
212-
course_id: 40711,
213-
class_id: 1,
214-
status: 'SCHEDULED',
215-
start: '2025-05-29T04:01:00.000Z',
216-
end: '2025-05-29T05:01:00.000Z',
217-
duration_in_minutes: 60,
218-
type: 'evaluation-release',
219-
id_resource: 1947886,
220-
associated_resource: {
221-
id: 1,
222-
name: 'Se habilita para responder "MCH y MCV"',
223-
description: 'MCH o MCV',
224-
},
225-
url: null,
226-
course: {
227-
id: 40711,
228-
name: '[Pruebas TI] - Herramientas para la Gestión Estratégica de Procesoss',
229-
},
230-
translatedTitle: 'Se habilita para responder "MCH y MCV"',
231-
formatedDate: {
232-
day: 'jueves',
233-
date: '29 may',
234-
time: '0:01 hrs.',
235-
},
236-
},
210+
// {
211+
// id: 4534,
212+
// student_id: 17158893,
213+
// course_id: 40711,
214+
// class_id: 1,
215+
// status: 'SCHEDULED',
216+
// start: '2025-05-29T04:01:00.000Z',
217+
// end: '2025-05-29T05:01:00.000Z',
218+
// duration_in_minutes: 60,
219+
// type: 'evaluation-release',
220+
// id_resource: 1947886,
221+
// associated_resource: {
222+
// id: 1,
223+
// name: 'Se habilita para responder "MCH y MCV"',
224+
// description: 'MCH o MCV',
225+
// },
226+
// url: null,
227+
// course: {
228+
// id: 40711,
229+
// name: '[Pruebas TI] - Herramientas para la Gestión Estratégica de Procesoss',
230+
// },
231+
// translatedTitle: 'Se habilita para responder "MCH y MCV"',
232+
// formatedDate: {
233+
// day: 'jueves',
234+
// date: '29 may',
235+
// time: '0:01 hrs.',
236+
// },
237+
// },
237238
{
238239
id: 62947,
239240
student_id: 17158893,
@@ -318,6 +319,35 @@ const events = [
318319
time: '23:59 hrs.',
319320
},
320321
},
322+
{
323+
id: 808522222,
324+
student_id: 17269014,
325+
course_id: 22568,
326+
class_id: 1,
327+
status: 'SCHEDULED',
328+
start: '2027-01-01T02:59:00.000Z',
329+
end: '2027-01-01T03:59:00.000Z',
330+
duration_in_minutes: 60,
331+
type: 'in-person-presencial',
332+
location_sede: 'Sede Santiago, sala 204',
333+
id_resource: 848781,
334+
associated_resource: {
335+
id: 1,
336+
name: 'CalendarEventDeadlineAnswer "Pregunta tipo archivo toma 2"',
337+
description: 'Clase con Pruebas de Prueba',
338+
},
339+
url: null,
340+
course: {
341+
id: 22568,
342+
name: 'Pruebas contenido v8',
343+
},
344+
translatedTitle: 'Fin del plazo para responder "Pregunta tipo archivo toma 2"',
345+
formatedDate: {
346+
day: 'jueves',
347+
date: '31 dic',
348+
time: '23:59 hrs.',
349+
},
350+
},
321351
{
322352
id: 80868,
323353
student_id: 17269014,

‎src/documentation/pages/Organisms/EventsList.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
import { Box } from '@chakra-ui/react'
2+
13
import { Code, MyHeading, MyText, MyTitle } from '@/documentation/components'
24
import { EventsList } from '@/organisms'
35
import { vars } from '@/theme'
4-
import { Box } from '@chakra-ui/react'
56

67
export const EventsListPage = (): JSX.Element => {
78
return (
@@ -82,6 +83,20 @@ export const EventsListPage = (): JSX.Element => {
8283
courseName="[Pruebas TI] - Herramientas para la Gestión Estratégica de Procesos"
8384
duration={40}
8485
/>
86+
<EventsList
87+
color="#00857A"
88+
key="2"
89+
name='Clase presencial "Caso aplicado"'
90+
day="viernes"
91+
date="30 jun"
92+
time="19:00 hrs."
93+
text="Curso"
94+
type="in-person-presencial"
95+
showCourse
96+
courseName="[Pruebas TI] - Herramientas para la Gestión Estratégica de Procesos"
97+
duration={40}
98+
locationSede="Sede Santiago, sala 204"
99+
/>
85100
</Box>
86101

87102
<MyTitle>3. Eventos en vista curso</MyTitle>
@@ -128,6 +143,7 @@ interface IEventList {
128143
time: string // Hora
129144
name: string // Nombre del evento
130145
hasNotification?: boolean // Indica si el evento tiene notificación
146+
locationSede?: string // Sede para eventos de tipo in-person-presencial
131147
onClick?: () => void // Permite usar el item como elemento clickeable
132148
showCourse?: boolean // Indica si se muestra el curso
133149
showUnit?: boolean // Indica si se muestra la unidad

‎src/organisms/Calendar/Dropdown/CalendarDropdown/Components/EventsGroup.tsx‎

Lines changed: 39 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import { Box, MenuGroup } from '@chakra-ui/react'
2+
13
import { BtnLink } from '@/molecules'
24
import { EventsList } from '@/organisms/Calendar'
3-
import { Box, MenuGroup } from '@chakra-ui/react'
45
import { vars } from '@theme'
56
import { Event } from '../../types'
67

@@ -29,6 +30,42 @@ export const EventsGroup = ({
2930
}: IEventsGroupProps): JSX.Element => {
3031
if (!events || (events && events.length === 0)) return <></>
3132

33+
const eventItems: JSX.Element[] = events.map((event) => (
34+
// Una vez que el evento se comporte como link, se debe cambiar Box a MenuItem y aplicar el efecto de focus
35+
<Box
36+
bg={vars('colors-neutral-white') ?? '#FFFFFF'}
37+
border="none"
38+
cursor={onClickEvent ? 'pointer' : 'default'}
39+
padding="0"
40+
key={event.id}
41+
_hover={{
42+
boxShadow: 'none !important',
43+
cursor: onClickEvent ? 'pointer !important' : 'default !important',
44+
bg: 'none !important',
45+
}}
46+
_focus={{
47+
background: 'none !important',
48+
boxShadow: 'none !important',
49+
}}
50+
>
51+
<EventsList
52+
name={event.translatedTitle}
53+
courseName={event.course.name}
54+
day={event.formatedDate.day}
55+
date={event.formatedDate.date}
56+
duration={event.duration_in_minutes}
57+
time={event.formatedDate.time}
58+
color={event.course_id && colors?.[event.course_id] ? colors[event.course_id] : '#82504A'}
59+
text={text}
60+
type={event.type}
61+
locationSede={event.location_sede}
62+
hasNotification={event.isNew}
63+
onClick={onClickEvent ? () => onClickEvent(event) : undefined}
64+
showCourse
65+
/>
66+
</Box>
67+
))
68+
3269
return (
3370
<>
3471
<Box
@@ -43,49 +80,7 @@ export const EventsGroup = ({
4380
},
4481
}}
4582
>
46-
<MenuGroup title={title}>
47-
{events.map((event: Event) => {
48-
return (
49-
// Una vez que el evento se comporte como link, se debe cambiar Box a MenuItem y aplicar el efecto de focus
50-
<Box
51-
bg={vars('colors-neutral-white') ?? '#FFFFFF'}
52-
border="none"
53-
cursor={onClickEvent ? 'pointer' : 'default'}
54-
padding="0"
55-
key={event.id}
56-
_hover={{
57-
boxShadow: 'none !important',
58-
cursor: onClickEvent ? 'pointer !important' : 'default !important',
59-
bg: 'none !important',
60-
}}
61-
_focus={{
62-
background: 'none !important',
63-
boxShadow: 'none !important',
64-
}}
65-
>
66-
<EventsList
67-
key={event.id}
68-
name={event.translatedTitle}
69-
courseName={event.course.name}
70-
day={event.formatedDate.day}
71-
date={event.formatedDate.date}
72-
duration={event.duration_in_minutes}
73-
time={event.formatedDate.time}
74-
color={
75-
event.course_id && colors?.[event.course_id]
76-
? colors[event.course_id]
77-
: '#82504A'
78-
}
79-
text={text}
80-
type={event.type}
81-
hasNotification={event.isNew}
82-
onClick={onClickEvent ? () => onClickEvent(event) : undefined}
83-
showCourse
84-
/>
85-
</Box>
86-
)
87-
})}
88-
</MenuGroup>
83+
<MenuGroup title={title}>{eventItems}</MenuGroup>
8984
</Box>
9085
{hasMoreNext && (
9186
<Box display="flex" alignItems="center" padding="16px 0 0 16px">

‎src/organisms/Calendar/Dropdown/types.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export interface Event {
2424
formatedDate: FormattedDate
2525
id: number
2626
isNew?: boolean
27+
location_sede?: string
2728
translatedTitle: string
2829
type: string
2930
}

‎src/organisms/Calendar/EventsList/EventsList.test.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,29 @@ describe('EventsList', () => {
5252
expect(container).toHaveTextContent(/40\s*min/)
5353
})
5454

55+
it('renders location for in-person-presencial events when locationSede is provided', () => {
56+
const { container } = renderComponent(undefined, {
57+
duration: 40,
58+
locationSede: 'Sede Santiago, sala 204',
59+
type: 'in-person-presencial',
60+
})
61+
62+
expect(screen.getByText('Sede Santiago, sala 204')).toBeInTheDocument()
63+
expect(screen.queryByText('Link clase online')).not.toBeInTheDocument()
64+
expect(container).toHaveTextContent(/40\s*min/)
65+
})
66+
67+
it('does not render an empty location label for in-person-presencial events without locationSede', () => {
68+
const { container } = renderComponent(undefined, {
69+
duration: 40,
70+
type: 'in-person-presencial',
71+
})
72+
73+
expect(screen.queryByText('Link clase online')).not.toBeInTheDocument()
74+
expect(screen.queryByTitle('icon-mapIndicator')).not.toBeInTheDocument()
75+
expect(container).toHaveTextContent(/40\s*min/)
76+
})
77+
5578
it('does not render duration when minutes are zero', () => {
5679
renderComponent(undefined, { duration: 0 })
5780

0 commit comments

Comments
 (0)