From 8d8c5b0ccabaefe6d3107f8db9046c69f2b6ddf6 Mon Sep 17 00:00:00 2001
From: Araozu
Date: Wed, 22 Nov 2023 11:21:20 -0500
Subject: [PATCH] [FE][Classroom] Fixes #17 - Add button to increase expiry
date by 2 months
---
.../ClassroomUserInfo/AccountExpiration.tsx | 139 ++++++++++++------
frontend/src/icons/PlusIcon.tsx | 15 ++
2 files changed, 109 insertions(+), 45 deletions(-)
create mode 100644 frontend/src/icons/PlusIcon.tsx
diff --git a/frontend/src/OnlineClassroom/ClassroomUserInfo/AccountExpiration.tsx b/frontend/src/OnlineClassroom/ClassroomUserInfo/AccountExpiration.tsx
index 8f78a7e..be6414c 100644
--- a/frontend/src/OnlineClassroom/ClassroomUserInfo/AccountExpiration.tsx
+++ b/frontend/src/OnlineClassroom/ClassroomUserInfo/AccountExpiration.tsx
@@ -6,9 +6,11 @@ import { ArrowsClockwiseIcon } from "../../icons/ArrowsClockwiseIcon";
import { JsonResult } from "../../types/JsonResult";
import { AxiosError } from "axios";
import { WarningIcon } from "../../icons/WarningIcon";
+import { PlusIcon } from "../../icons/PlusIcon";
export function AccountExpiration(props: {userId: number}) {
const [expirationDate, setExpirationDate] = createSignal(null); // YYYY-MM-DD
+ const [localExpirationDate, setLocalExpirationDate] = createSignal(null); // YYYY-MM-DD
const {status, setStatus, error, setError} = useLoading();
const loading = createMemo(() => status() === LoadingStatus.Loading);
@@ -28,6 +30,7 @@ export function AccountExpiration(props: {userId: number}) {
setError("");
setStatus(LoadingStatus.Loading);
setExpirationDate(null);
+ setLocalExpirationDate(null);
backend.get>(`/api/classroom/expiration_date/${props.userId}`)
.then((response) => {
@@ -51,15 +54,25 @@ export function AccountExpiration(props: {userId: number}) {
});
};
+ const setExpiration2Months = () => {
+ setStatus(LoadingStatus.Loading);
+ const newDate = new Date();
+ newDate.setDate(newDate.getDate() + 60);
+ setLocalExpirationDate(newDate.toISOString().split("T")[0]);
+
+ setExpiration();
+ };
+
const setExpiration = () => {
setStatus(LoadingStatus.Loading);
backend.put>(
`/api/classroom/expiration_date/${props.userId}`,
- {date: expirationDate()},
+ {date: localExpirationDate()},
)
.then((response) => {
if (response.status === 200) {
+ loadExpiration();
setStatus(LoadingStatus.Ok);
}
})
@@ -72,7 +85,7 @@ export function AccountExpiration(props: {userId: number}) {
onMount(loadExpiration);
return (
-
+
Fecha de expiración del acceso
@@ -106,55 +119,91 @@ export function AccountExpiration(props: {userId: number}) {
-
-
- Fecha de expiración:
-
+
- setExpirationDate(e.target.value)}
- disabled={status() === LoadingStatus.Loading}
- />
-
+
+
+
Ampliar por preset:
+
+
+
+
+
Ampliar manualmente:
+
+
setLocalExpirationDate(e.target.value)}
+ disabled={status() === LoadingStatus.Loading}
+ />
+
+
+
+
{error()}
-
+
diff --git a/frontend/src/icons/PlusIcon.tsx b/frontend/src/icons/PlusIcon.tsx
new file mode 100644
index 0000000..7549b5f
--- /dev/null
+++ b/frontend/src/icons/PlusIcon.tsx
@@ -0,0 +1,15 @@
+
+export function PlusIcon(props: {fill: string, size?: number, class?: string}) {
+ return (
+
+ );
+}