diff --git a/client/src/components/common/TermInfoSection.jsx b/client/src/components/common/TermInfoSection.jsx index e924fb12..f3b93b87 100644 --- a/client/src/components/common/TermInfoSection.jsx +++ b/client/src/components/common/TermInfoSection.jsx @@ -67,8 +67,10 @@ export default function TermInfoSection() { }} className="row" > - - + + ); diff --git a/client/src/components/common/UserActions.jsx b/client/src/components/common/UserActions.jsx index dd6a82f2..e019c128 100644 --- a/client/src/components/common/UserActions.jsx +++ b/client/src/components/common/UserActions.jsx @@ -72,21 +72,21 @@ export default function UserActions() { + + {isLoading && ( +

+ جاري إنشاء الفترة +

+ )} +
+ + +
+ + ); +} diff --git a/client/src/components/insert-term/InsertTermPage.scss b/client/src/components/insert-term/InsertTermPage.scss new file mode 100644 index 00000000..484b6b5a --- /dev/null +++ b/client/src/components/insert-term/InsertTermPage.scss @@ -0,0 +1,28 @@ +.insert-term { + &__form { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin-block: 1rem; + direction: rtl; + + .input:nth-child(1), + .insert-term__note, + .insert-term__btn { + grid-column: 1 / 3; + } + + .insert-term__note { + direction: rtl; + font-size: 13px; + color: var(--grey-400); + } + } + + .actions-row { + direction: rtl; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + } +} diff --git a/client/src/components/update-term-page/UpdateTermPage.jsx b/client/src/components/update-term-page/UpdateTermPage.jsx new file mode 100644 index 00000000..eba3d313 --- /dev/null +++ b/client/src/components/update-term-page/UpdateTermPage.jsx @@ -0,0 +1,128 @@ +import { useEffect, useState } from "react"; +import PageTitle from "../common/PageTitle"; +import TextInput from "../common/Inputs"; +import Button from "../common/Button"; +import CustomCheckbox from "../common/CustomCheckbox"; +import "../insert-term/InsertTermPage.scss"; +import { + useUpdateTermMutation, + useGetCurTermQuery, +} from "../../redux/slices/termApiSlice"; +import { toast } from "react-toastify"; + +export default function UpdateTermPage() { + const [termName, setTermName] = useState(""); + const [termStartDate, setTermStartDate] = useState(""); + const [termEndDate, setTermEndDate] = useState(""); + const [understandCheckbox, setUnderstandCheckbox] = useState(false); + + const [updateTerm, { isLoading }] = useUpdateTermMutation(); + + const { data, isFetching: isFetchingTerm } = useGetCurTermQuery(); + + useEffect(() => { + if (data && data.body) { + setTermName(data.body.termName); + let date = new Date(data.body.startDate).toISOString().split("T")[0]; + setTermStartDate(date); + date = new Date(data.body.endDate).toISOString().split("T")[0]; + setTermEndDate(date); + } + }, [data]); + + const handleSubmit = async (e) => { + e.preventDefault(); + // TODO: send request with this info to the server + console.log({ + termName, + startDate: termStartDate, + endDate: termEndDate, + understandCheckbox, + }); + try { + const res = updateTerm({ + termName, + startDate: termStartDate, + endDate: termEndDate, + }).unwrap(); + if (res.status === 400 || res.status === 500) + throw new Error("Something went wrong while updating the term"); + toast.success("تم تعديل الفترة بنجاح"); + } catch (err) { + console.log(err); + toast.error("حدث خطأ أثناء تعديل الفترة"); + toast.error(JSON.stringify(err)); + } + }; + + return ( +
+ + {isFetchingTerm && ( +

+ جاري تحميل الفترة +

+ )} +
+ setTermName(e.target.value)} + placeholder="اسم الفترة" + required + /> + setTermStartDate(e.target.value)} + placeholder="تاريخ بداية الفترة" + required + /> + setTermEndDate(e.target.value)} + placeholder="تاريخ نهاية الفترة" + required + /> +

+ **إنشاء فترة هو إجراء لا رجعة به يجب مراعاة انه بعد إنشاء الفترة + ستتحول كل الصفحات الاخرى الى احدث فترة تم إنشاءها +

+ setUnderstandCheckbox(e.target.checked)} + name="understand" + required + /> + + + {isLoading && ( +

+ جاري تعديل الفترة +

+ )} +
+ ); +} diff --git a/client/src/redux/slices/termApiSlice.js b/client/src/redux/slices/termApiSlice.js index 14042b98..737ca583 100644 --- a/client/src/redux/slices/termApiSlice.js +++ b/client/src/redux/slices/termApiSlice.js @@ -22,6 +22,20 @@ export const termApi = apiSlice.injectEndpoints({ method: "GET", }), }), + InsertTerm: builder.mutation({ + query: (term) => ({ + url: `${TERM_URL}/`, + method: "POST", + body: term, + }), + }), + UpdateTerm: builder.mutation({ + query: (term) => ({ + url: `${TERM_URL}/`, + method: "PATCH", + body: term, + }), + }), }), }); @@ -29,4 +43,6 @@ export const { useGetCurTermQuery, useGetCurWeekQuery, useGetRemainingWeeksQuery, + useInsertTermMutation, + useUpdateTermMutation, } = termApi; diff --git a/client/src/routes.jsx b/client/src/routes.jsx index 4e621bad..fee3514c 100644 --- a/client/src/routes.jsx +++ b/client/src/routes.jsx @@ -19,6 +19,8 @@ import TestTypo from "./components/testing/testTypo"; import TestLayout from "./components/testing/testLayout"; import Dashboard from "./components/dashboard/Dashboard"; import CaptainProfile from "./components/captain-profile/CaptainProfile"; +import InsertTermPage from "./components/insert-term/InsertTermPage"; +import UpdateTermPage from "./components/update-term-page/UpdateTermPage"; function Routes() { return ( @@ -30,6 +32,8 @@ function Routes() { } /> } /> } /> + } /> + } /> {/* Testing Routes */}