Skip to content

Commit cf3ca5c

Browse files
cristim67cristim67
authored
Merge pull request #9 from ConducereIT/fixes/26-09
Small improvements
2 parents aad478d + 08a8adf commit cf3ca5c

File tree

9 files changed

+287
-76
lines changed

9 files changed

+287
-76
lines changed

‎client/src/components/calendar.component.tsx‎

Lines changed: 50 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import React, { useState, useRef } from "react";
1+
import React, { useState, useRef, useEffect } from "react";
22
import FullCalendar from "@fullcalendar/react";
33
import dayGridPlugin from "@fullcalendar/daygrid";
44
import interactionPlugin from "@fullcalendar/interaction";
55
import timeGridPlugin from "@fullcalendar/timegrid";
66
import { BackendService } from "@genezio-sdk/camin-runtime";
7-
import { Modal, Button, Toast, ToastContainer } from "react-bootstrap";
7+
import { Modal, Button, Toast, ToastContainer, Spinner } from "react-bootstrap";
8+
import {AuthService} from "@genezio/auth";
89

910
interface RenderCalendarProps {
1011
dayCalendar: string;
@@ -21,8 +22,19 @@ const RenderCalendar: React.FC<RenderCalendarProps> = ({
2122
const [showModal, setShowModal] = useState(false);
2223
const [selectedDate, setSelectedDate] = useState<any | null>(null);
2324
const [showToast, setShowToast] = useState(false);
25+
const [loading, setLoading] = useState(false);
26+
const [userName, setUserName] = useState<string | null>(null);
2427
const calendarRef = useRef<any>(null);
2528

29+
useEffect(() => {
30+
const fetchUserInfo = async () => {
31+
const response = await AuthService.getInstance().userInfo();
32+
setUserName(response.name!);
33+
};
34+
35+
fetchUserInfo();
36+
}, []);
37+
2638
const showNotification = (message: string) => {
2739
setNotification(message);
2840
setShowToast(true);
@@ -38,6 +50,7 @@ const RenderCalendar: React.FC<RenderCalendarProps> = ({
3850

3951
const handleConfirmReservation = async () => {
4052
if (!selectedDate) return;
53+
setLoading(true);
4154

4255
const startDate = selectedDate.startStr;
4356
const endDate = selectedDate.endStr;
@@ -59,18 +72,18 @@ const RenderCalendar: React.FC<RenderCalendarProps> = ({
5972
}
6073
} catch (error) {
6174
showNotification(String(error));
75+
} finally {
76+
setLoading(false);
6277
}
6378
setShowModal(false);
6479
};
6580

6681
const handleEventClick = async (event: any) => {
82+
setLoading(true);
6783
try {
6884
const startDate = event.event.startStr;
6985
const endDate = event.event.endStr;
70-
const deleteEvents = await BackendService.deletePerson(
71-
startDate,
72-
endDate
73-
);
86+
const deleteEvents = await BackendService.deletePerson(startDate, endDate);
7487

7588
if (deleteEvents.status) {
7689
showNotification(deleteEvents.message);
@@ -80,11 +93,23 @@ const RenderCalendar: React.FC<RenderCalendarProps> = ({
8093
}
8194
} catch (error) {
8295
showNotification(String(error));
96+
} finally {
97+
setLoading(false);
8398
}
8499
};
85100

86101
const eventsForDay = eventsDate && eventsDate[dayCalendar];
87102

103+
const styledEvents = eventsForDay?.map((event) => {
104+
if (userName && event.title.includes(userName)) {
105+
return {
106+
...event,
107+
className: "user-event",
108+
};
109+
}
110+
return event;
111+
});
112+
88113
if (!eventsForDay || eventsForDay.length === 0) {
89114
return null;
90115
}
@@ -93,9 +118,9 @@ const RenderCalendar: React.FC<RenderCalendarProps> = ({
93118
<div className="calendar" ref={calendarRef}>
94119
<ToastContainer
95120
position="top-end"
96-
style={{ position: "fixed", top: 10, right: 10, zIndex: 1000, paddingTop:"6.5rem", paddingRight:"1rem", }}
121+
style={{ position: "fixed", top: 10, right: 10, zIndex: 1000, paddingTop: "6.5rem", paddingRight: "1rem" }}
97122
>
98-
<Toast show={showToast} onClose={() => setShowToast(false)} delay={5000} autohide style={{background:"white"}}>
123+
<Toast show={showToast} onClose={() => setShowToast(false)} delay={5000} autohide style={{ background: "white" }}>
99124
<Toast.Header>
100125
<strong className="me-auto">Notificare</strong>
101126
</Toast.Header>
@@ -141,7 +166,7 @@ const RenderCalendar: React.FC<RenderCalendarProps> = ({
141166
eventDisplay="block"
142167
dayHeaders={true}
143168
weekends={true}
144-
events={eventsForDay}
169+
events={styledEvents}
145170
eventClick={handleEventClick}
146171
eventMouseEnter={(arg) => {
147172
setHoveredEvent(arg);
@@ -163,7 +188,7 @@ const RenderCalendar: React.FC<RenderCalendarProps> = ({
163188
hour: "2-digit",
164189
minute: "2-digit",
165190
})}{" "}
166-
-
191+
-{" "}
167192
{new Date(selectedDate?.endStr).toLocaleTimeString("ro-RO", {
168193
hour: "2-digit",
169194
minute: "2-digit",
@@ -174,8 +199,21 @@ const RenderCalendar: React.FC<RenderCalendarProps> = ({
174199
<Button variant="secondary" onClick={() => setShowModal(false)}>
175200
Anulează
176201
</Button>
177-
<Button variant="secondary" onClick={handleConfirmReservation}>
178-
Confirmă
202+
<Button variant="secondary" onClick={handleConfirmReservation} disabled={loading}>
203+
{loading ? (
204+
<>
205+
<Spinner
206+
as="span"
207+
animation="border"
208+
size="sm"
209+
role="status"
210+
aria-hidden="true"
211+
/>{" "}
212+
Se încarcă...
213+
</>
214+
) : (
215+
"Confirmă"
216+
)}
179217
</Button>
180218
</Modal.Footer>
181219
</Modal>

‎client/src/components/calendar.mobile.component.tsx‎

Lines changed: 53 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import React, { useState, useRef } from "react";
1+
import React, { useState, useRef, useEffect } from "react";
22
import FullCalendar from "@fullcalendar/react";
33
import dayGridPlugin from "@fullcalendar/daygrid";
44
import interactionPlugin from "@fullcalendar/interaction";
55
import timeGridPlugin from "@fullcalendar/timegrid";
66
import { BackendService } from "@genezio-sdk/camin-runtime";
7-
import { Modal, Button, Toast, ToastContainer } from "react-bootstrap";
7+
import { Modal, Button, Toast, ToastContainer, Spinner } from "react-bootstrap";
8+
import { AuthService } from "@genezio/auth";
89

910
interface RenderCalendarProps {
1011
dayCalendar: string;
@@ -20,8 +21,19 @@ const RenderCalendarMobile: React.FC<RenderCalendarProps> = ({
2021
const [showToast, setShowToast] = useState(false);
2122
const [showModal, setShowModal] = useState(false);
2223
const [selectedDate, setSelectedDate] = useState<any | null>(null);
24+
const [loading, setLoading] = useState(false);
25+
const [userName, setUserName] = useState<string | null>(null); // pentru a stoca numele utilizatorului
2326
const calendarRef = useRef<any>(null);
2427

28+
useEffect(() => {
29+
const fetchUserInfo = async () => {
30+
const response = await AuthService.getInstance().userInfo();
31+
setUserName(response.name!);
32+
};
33+
34+
fetchUserInfo();
35+
}, []);
36+
2537
const showNotification = (message: string) => {
2638
setNotification(message);
2739
setShowToast(true);
@@ -36,6 +48,9 @@ const RenderCalendarMobile: React.FC<RenderCalendarProps> = ({
3648
};
3749

3850
const handleConfirmReservation = async () => {
51+
if (!selectedDate) return;
52+
setLoading(true);
53+
3954
const startDate = selectedDate.startStr;
4055
const endDate = selectedDate.endStr;
4156

@@ -56,11 +71,14 @@ const RenderCalendarMobile: React.FC<RenderCalendarProps> = ({
5671
}
5772
} catch (error) {
5873
showNotification(String(error));
74+
} finally {
75+
setLoading(false);
5976
}
6077
setShowModal(false);
6178
};
6279

6380
const handleEventClick = async (event: any) => {
81+
setLoading(true);
6482
try {
6583
const startDate = event.event.startStr;
6684
const endDate = event.event.endStr;
@@ -77,23 +95,34 @@ const RenderCalendarMobile: React.FC<RenderCalendarProps> = ({
7795
}
7896
} catch (error) {
7997
showNotification(String(error));
98+
} finally {
99+
setLoading(false);
80100
}
81101
};
82102

83103
const eventsForDay = eventsDate && eventsDate[dayCalendar];
84104

85-
if (!eventsForDay) {
105+
const styledEvents = eventsForDay?.map((event) => {
106+
if (userName && event.title.includes(userName)) {
107+
return {
108+
...event,
109+
className: "user-event",
110+
};
111+
}
112+
return event;
113+
});
114+
115+
if (!eventsForDay || eventsForDay.length === 0) {
86116
return null;
87117
}
88118

89119
return (
90120
<div className="calendar" ref={calendarRef}>
91-
{/* ToastContainer for notifications */}
92121
<ToastContainer
93122
position="top-end"
94123
style={{ position: "fixed", top: 10, right: 10, zIndex: 1000, paddingTop: "6.5rem", paddingRight: "1rem" }}
95124
>
96-
<Toast show={showToast} onClose={() => setShowToast(false)} delay={5000} autohide>
125+
<Toast show={showToast} onClose={() => setShowToast(false)} delay={5000} autohide style={{ background: "white" }}>
97126
<Toast.Header>
98127
<strong className="me-auto">Notificare</strong>
99128
</Toast.Header>
@@ -105,7 +134,7 @@ const RenderCalendarMobile: React.FC<RenderCalendarProps> = ({
105134
plugins={[timeGridPlugin, interactionPlugin, dayGridPlugin]}
106135
themeSystem={"standard"}
107136
headerToolbar={{
108-
right: "today prev,next",
137+
right: "today prev,next timeGridDay",
109138
}}
110139
slotLabelFormat={{
111140
hour: "2-digit",
@@ -123,7 +152,7 @@ const RenderCalendarMobile: React.FC<RenderCalendarProps> = ({
123152
eventDisplay="block"
124153
dayHeaders={true}
125154
weekends={true}
126-
events={eventsForDay}
155+
events={styledEvents}
127156
eventClick={handleEventClick}
128157
/>
129158

@@ -147,16 +176,29 @@ const RenderCalendarMobile: React.FC<RenderCalendarProps> = ({
147176
?
148177
</Modal.Body>
149178
<Modal.Footer>
150-
<Button variant="btn btn-secondary" onClick={() => setShowModal(false)}>
179+
<Button variant="secondary" onClick={() => setShowModal(false)}>
151180
Anulează
152181
</Button>
153-
<Button variant="btn btn-secondary" onClick={handleConfirmReservation}>
154-
Confirmă
182+
<Button variant="secondary" onClick={handleConfirmReservation} disabled={loading}>
183+
{loading ? (
184+
<>
185+
<Spinner
186+
as="span"
187+
animation="border"
188+
size="sm"
189+
role="status"
190+
aria-hidden="true"
191+
/>{" "}
192+
Se încarcă...
193+
</>
194+
) : (
195+
"Confirmă"
196+
)}
155197
</Button>
156198
</Modal.Footer>
157199
</Modal>
158200
</div>
159201
);
160202
};
161203

162-
export default RenderCalendarMobile;
204+
export default RenderCalendarMobile;

‎client/src/components/navbar.component.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import {useEffect, useState} from "react";
2-
import {AuthService} from "@genezio/auth";
1+
import { useEffect, useState } from "react";
2+
import { AuthService } from "@genezio/auth";
33
import LogoWhite from "../assets/Logo fata.svg";
44

55
export const NavbarComponent = () => {
66
const [scrolled, setScrolled] = useState(false);
77
const [navbarHeight, setNavbarHeight] = useState(0);
8+
const [isCollapsed, setIsCollapsed] = useState(true);
89

910
useEffect(() => {
1011
const handleScroll = () => {
@@ -25,6 +26,10 @@ export const NavbarComponent = () => {
2526
}
2627
}, []);
2728

29+
const handleToggle = () => {
30+
setIsCollapsed(!isCollapsed);
31+
};
32+
2833
return (
2934
<>
3035
<nav
@@ -59,20 +64,22 @@ export const NavbarComponent = () => {
5964
/>
6065
</a>
6166

62-
<button
67+
<a
6368
className="navbar-toggler"
6469
type="button"
6570
data-bs-toggle="collapse"
6671
data-bs-target="#navbarNav"
6772
aria-controls="navbarNav"
68-
aria-expanded="false"
73+
aria-expanded={!isCollapsed}
6974
aria-label="Toggle navigation"
75+
style={{ background: "white" }}
76+
onClick={handleToggle}
7077
>
7178
<span className="navbar-toggler-icon"></span>
72-
</button>
79+
</a>
7380

74-
<div className="collapse navbar-collapse" id="navbarNav">
75-
<div className="d-flex ms-auto align-items-center">
81+
<div className={`collapse navbar-collapse ${isCollapsed ? "" : "show"}`} id="navbarNav">
82+
<div className="d-flex justify-content-end" style={{ flexDirection: "row", width: "100%" }}>
7683
<a className="btn btn-light me-2" href="/account" style={{ border: "1px solid black" }}>
7784
Cont
7885
</a>

‎client/src/index.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,14 @@ button{
180180
}
181181

182182
.fc-toolbar-title{
183-
font-size: 1.25rem !important;
183+
font-size: 1.5rem !important;
184+
}
185+
186+
187+
@media (max-width: 768px) {
188+
.fc-toolbar-title {
189+
font-size: 0.9rem !important;
190+
}
184191
}
185192

186193
.custom-toast {

0 commit comments

Comments
 (0)