From 7bbd9e620eac95a4282607524241858e3c6b800b Mon Sep 17 00:00:00 2001 From: Moaz Dawalibi Date: Tue, 12 Nov 2024 11:54:35 +0300 Subject: [PATCH 1/7] add env file , prepare notification add page ,fix loading page and fix error toast message --- .env | 1 + .env.example | 1 + src/App.tsx | 2 +- .../Routes/RenderRoutesRecursively.tsx | 1 + src/Components/Ui/ReportTableIcon.tsx | 22 +++++++++ src/Layout/Dashboard/PageHeader.tsx | 6 ++- .../Notifications/AddNotification/Page.tsx | 2 + .../AddNotification/useTableColumns.tsx | 45 +++++++------------ src/Pages/Admin/Notifications/Card.tsx | 12 +---- src/Pages/Admin/Notifications/Page.tsx | 34 ++++---------- .../Admin/QuestionBank/useTableColumns.tsx | 19 +++++++- src/Pages/Admin/Report/Show/ReportInfo.tsx | 1 + src/Pages/Admin/Report/Table.tsx | 6 ++- src/Pages/Admin/Reseller/Add/Page.tsx | 4 +- src/Pages/Admin/Reseller/Edit/Page.tsx | 5 +-- src/Pages/Auth/LoginForm.tsx | 4 +- src/Routes.tsx | 11 ++++- src/Styles/App/classNames.scss | 3 ++ src/Styles/Pages/reSeller.scss | 20 ++++++--- src/api/config.ts | 1 + src/api/helper/useAxios.ts | 17 ++++--- src/api/notification.ts | 6 +++ src/lib/I18nProvider.tsx | 2 +- src/translate/ar.json | 22 ++++++--- src/types/Notification.ts | 2 +- src/types/Notifications.ts | 2 - vite.config.mjs | 23 +++++++--- 27 files changed, 169 insertions(+), 105 deletions(-) create mode 100644 .env create mode 100644 .env.example create mode 100644 src/Components/Ui/ReportTableIcon.tsx diff --git a/.env b/.env new file mode 100644 index 0000000..eed0cd2 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +VITE_BASE_URL="https://nerd-back.point-dev.net/api/" \ No newline at end of file diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..74afdbd --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +REACT_APP_BASE_URL= \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 2935dfa..10d1b07 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -33,7 +33,7 @@ const App = () => { /> {renderRoutesRecursively(menuItems)} - + {CrudRoute.map((route) => { const useAbility = hasAbility(route.abilities, route.abilities_value); if (!RoleByType(route)) { diff --git a/src/Components/Routes/RenderRoutesRecursively.tsx b/src/Components/Routes/RenderRoutesRecursively.tsx index 9769870..2f2aec2 100644 --- a/src/Components/Routes/RenderRoutesRecursively.tsx +++ b/src/Components/Routes/RenderRoutesRecursively.tsx @@ -10,6 +10,7 @@ export const renderRoutesRecursively = (routes: TMenuItem[]) => if (!useAbility) { return false; } + return ( diff --git a/src/Components/Ui/ReportTableIcon.tsx b/src/Components/Ui/ReportTableIcon.tsx new file mode 100644 index 0000000..b192d00 --- /dev/null +++ b/src/Components/Ui/ReportTableIcon.tsx @@ -0,0 +1,22 @@ +import { Tooltip } from 'antd' +import React from 'react' +import { useTranslation } from 'react-i18next'; +import { FaPaperclip } from 'react-icons/fa' + +interface ReportButtonsProps { + editTooltipTitle?: any; + onClick?: () => void; + } + +const ReportTableIcon = ({editTooltipTitle,onClick}:ReportButtonsProps) => { + const {t} = useTranslation(); + return ( + + + + + + ) +} + +export default ReportTableIcon \ No newline at end of file diff --git a/src/Layout/Dashboard/PageHeader.tsx b/src/Layout/Dashboard/PageHeader.tsx index 3340984..2ed927d 100644 --- a/src/Layout/Dashboard/PageHeader.tsx +++ b/src/Layout/Dashboard/PageHeader.tsx @@ -14,7 +14,8 @@ const PageHeader = ({ pageTitle, openModel = true, locationToNavigate, - addModal = true + addModal = true, + modelButtonTitle = "add", }: { canAdd?: any; ModelAbility?: any; @@ -22,6 +23,7 @@ const PageHeader = ({ openModel?: boolean; locationToNavigate?: string | any; addModal?:boolean; + modelButtonTitle?:string }) => { const navigate = useNavigate(); const { handel_open_model } = useModalHandler(); @@ -57,7 +59,7 @@ const PageHeader = ({ className="add_button" > - {t(`practical.add`)} + {t(`practical.${modelButtonTitle}`)} ) :""} diff --git a/src/Pages/Admin/Notifications/AddNotification/Page.tsx b/src/Pages/Admin/Notifications/AddNotification/Page.tsx index 151b82d..f600b15 100644 --- a/src/Pages/Admin/Notifications/AddNotification/Page.tsx +++ b/src/Pages/Admin/Notifications/AddNotification/Page.tsx @@ -32,7 +32,9 @@ const TableHeader = () => { pageTitle="notification" ModelAbility={ModalEnum?.NOTIFICATION_ADD} canAdd={canAddNotification} + modelButtonTitle="add_notification" /> + } filterTitle="table.notification" /> diff --git a/src/Pages/Admin/Notifications/AddNotification/useTableColumns.tsx b/src/Pages/Admin/Notifications/AddNotification/useTableColumns.tsx index d446938..912d28f 100644 --- a/src/Pages/Admin/Notifications/AddNotification/useTableColumns.tsx +++ b/src/Pages/Admin/Notifications/AddNotification/useTableColumns.tsx @@ -40,19 +40,11 @@ export const useColumns = () => { const columns: TableColumnsType = [ { - title: t("columns.id"), - dataIndex: "id", - key: "id", + title: t("columns.created_at"), + dataIndex: "created_at", + key: "created_at", align: "center", - render: (_text, record) => record?.id, - }, - { - title: `${t("columns.body")}`, - dataIndex: "body", - key: "body", - align: "center", - render: (_text, record) => record?.body, - ellipsis:true + render: (_text, record) => record?.created_at, }, { title: `${t("columns.seen")}`, @@ -62,6 +54,14 @@ export const useColumns = () => { render: (_text, record) => record?.seen, ellipsis:true }, + { + title: `${t("columns.title")}`, + dataIndex: "title", + key: "title", + align: "center", + render: (_text, record) => record?.title, + ellipsis:true + }, { title: `${t("columns.notifiable_type")}`, dataIndex: "notifiable_type", @@ -71,23 +71,12 @@ export const useColumns = () => { ellipsis:true }, { - - title: t("columns.procedure"), - key: "actions", + title: `${t("columns.body")}`, + dataIndex: "body", + key: "body", align: "center", - width: "25vw", - render: (_text, record, index) => { - return ( - handelDelete(record)} - onEdit={() => handleEdit(record)} - onShow={() => handelShow(record)} - /> - ); - }, + render: (_text, record) => record?.body, + // ellipsis:true }, ]; diff --git a/src/Pages/Admin/Notifications/Card.tsx b/src/Pages/Admin/Notifications/Card.tsx index e936b14..a0b0c03 100644 --- a/src/Pages/Admin/Notifications/Card.tsx +++ b/src/Pages/Admin/Notifications/Card.tsx @@ -1,11 +1,7 @@ -import TrashButton from "../../../Components/Ui/TrashButton" import { notifications } from "../../../types/Notifications" -const Card = ({name,date,image,id,pop,setPop}:notifications) => { - const handleDeleteOne = () => { - setPop(pop?.filter((item:any)=> item?.id !== id)) - } +const Card = ({name,date,image,id}:notifications) => { return (
@@ -16,12 +12,6 @@ const Card = ({name,date,image,id,pop,setPop}:notifications) => {

{date}

-
- -
) } diff --git a/src/Pages/Admin/Notifications/Page.tsx b/src/Pages/Admin/Notifications/Page.tsx index 8fb0b22..814d756 100644 --- a/src/Pages/Admin/Notifications/Page.tsx +++ b/src/Pages/Admin/Notifications/Page.tsx @@ -1,48 +1,32 @@ import { Divider } from 'antd'; import { useTranslation } from 'react-i18next' -import { NotificationArray } from './NotificationArray'; import { notifications } from '../../../types/Notifications'; import Card from './Card'; -import TrashButton from '../../../Components/Ui/TrashButton'; -import { useEffect, useState } from 'react'; +import { useGetAllNotificationMine } from '../../../api/notification'; const Page = () => { const {t} = useTranslation(); - const [pop, setPop] = useState(NotificationArray); - const [isEmpty, setIsEmpty] = useState(pop.length < 1 ? true : false); + const {data} = useGetAllNotificationMine(); + console.log(data); - const handleDeleteAll = () => { - setPop([]) - } - - useEffect(()=>{ - if(pop.length < 1){ - setIsEmpty(true); - }else{ - setIsEmpty(false); - } - },[pop]) return (

{t("header.notifications")}

- +
{ - isEmpty === false + !!data?.data ?
- {pop?.map((not:notifications)=>( + {data?.data?.map((not:notifications)=>( + date={not?.date} + image={not?.image} + /> ))}
: diff --git a/src/Pages/Admin/QuestionBank/useTableColumns.tsx b/src/Pages/Admin/QuestionBank/useTableColumns.tsx index fdadc72..12b9c7e 100644 --- a/src/Pages/Admin/QuestionBank/useTableColumns.tsx +++ b/src/Pages/Admin/QuestionBank/useTableColumns.tsx @@ -12,6 +12,9 @@ import { } from "../../../utils/hasAbilityFn"; import ActionButtons from "../../../Components/Table/ActionButtons"; import { useFilterStateState } from "../../../zustand/Filter"; +import { FaPaperclip } from "react-icons/fa"; +import { ParamsEnum } from "../../../enums/params"; +import ReportTableIcon from "../../../Components/Ui/ReportTableIcon"; export const useColumns = () => { const { setObjectToEdit } = useObjectToEdit((state) => state); @@ -24,6 +27,13 @@ export const useColumns = () => { setIsOpen(ModalEnum?.QUESTION_DELETE); }; + + const handleNavigateToReport = (record: any) => { + setFilter({}) + // console.log(record); + + navigate(`/report/${record?.report?.id}`); + }; const handleEdit = (record: any) => { console.log(record,"record"); const lesson = record?.lessons?.[0] ; @@ -170,8 +180,9 @@ export const useColumns = () => { key: "actions", align: "center", - render: (_text, record, index) => { + render: ({_text, record, index}:any) => { return ( +
{ onDelete={() => handelDelete(record)} onEdit={() => handleEdit(record)} /> + { + !!record?.report?.content + ? handleNavigateToReport(record)}/> + : "" + } +
); }, }, diff --git a/src/Pages/Admin/Report/Show/ReportInfo.tsx b/src/Pages/Admin/Report/Show/ReportInfo.tsx index 463195f..a15d9c5 100644 --- a/src/Pages/Admin/Report/Show/ReportInfo.tsx +++ b/src/Pages/Admin/Report/Show/ReportInfo.tsx @@ -10,6 +10,7 @@ const ReportInfo = () => { const {data} = useGetAllReport({ show:report_id }) + const {t} = useTranslation(); return ( diff --git a/src/Pages/Admin/Report/Table.tsx b/src/Pages/Admin/Report/Table.tsx index b7c5d7b..d0c365f 100644 --- a/src/Pages/Admin/Report/Table.tsx +++ b/src/Pages/Admin/Report/Table.tsx @@ -4,19 +4,23 @@ import { useColumns } from "./useTableColumns"; import { useGetAllReport } from "../../../api/report"; import { useFilterState } from "../../../Components/Utils/Filter/FilterState"; import { useFilterStateState } from "../../../zustand/Filter"; +import { useParams } from "react-router-dom"; +import { ParamsEnum } from "../../../enums/params"; const App: React.FC = () => { const { filterState } = useFilterState(); const { Filter } = useFilterStateState(); const name = Filter?.name ; const sort_by = Filter?.sort_by ; - + const { question_id } = useParams(); + const response = useGetAllReport({ name, sort_by, pagination: true, ...filterState, + question_id:question_id }); return ; diff --git a/src/Pages/Admin/Reseller/Add/Page.tsx b/src/Pages/Admin/Reseller/Add/Page.tsx index 88e066a..50748cb 100644 --- a/src/Pages/Admin/Reseller/Add/Page.tsx +++ b/src/Pages/Admin/Reseller/Add/Page.tsx @@ -49,14 +49,14 @@ const TableHeader = () => { validationSchema={getValidationSchema} onSubmit={handleSubmit} > - {({ resetForm }) => ( + {({ dirty }) => (
- - + +
+ + )} + +
+ + + ); +}; + +export default TableHeader; diff --git a/src/Pages/Admin/Notifications/AddNotification/Form/AttachmentForm.tsx b/src/Pages/Admin/Notifications/AddNotification/Form/AttachmentForm.tsx new file mode 100644 index 0000000..a47ec54 --- /dev/null +++ b/src/Pages/Admin/Notifications/AddNotification/Form/AttachmentForm.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import { FaImage } from "react-icons/fa"; +import ImageBoxField from "./ImageBoxField/ImageBoxField"; +import ValidationField from "../../../../../Components/ValidationField/ValidationField"; + +const AttachmentForm = () => { + const [t] = useTranslation(); + + return ( +
+
+ +

{t("header.attachment")}

+
+
+
+ + +
+
+ + +
+
+
+ ); +}; + +export default AttachmentForm; diff --git a/src/Pages/Admin/Notifications/AddNotification/Form/FilterForm.tsx b/src/Pages/Admin/Notifications/AddNotification/Form/FilterForm.tsx new file mode 100644 index 0000000..c91b911 --- /dev/null +++ b/src/Pages/Admin/Notifications/AddNotification/Form/FilterForm.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import ValidationField from "../../../../../Components/ValidationField/ValidationField"; +import { Col, Row } from "reactstrap"; + +const FilterForm = () => { + return ( +
+ +
+ + {/* */} + + {/* + + */} + + + ); +}; + +export default FilterForm; diff --git a/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/ImageBoxField.scss b/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/ImageBoxField.scss new file mode 100644 index 0000000..66e2f2f --- /dev/null +++ b/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/ImageBoxField.scss @@ -0,0 +1,38 @@ +.ImageBoxField { + .ImageBox { + width: 120px; + height: 120px; + display: flex; + align-items: center; + justify-content: center; + border: max(1.5px, 0.1vw) dashed #a9c3f1; + margin-block: 10px; + border-radius: 5px; + z-index: 9999999 !important; + .ImageBoxIcon { + cursor: pointer; + } + .imagePreview { + max-width: 99%; + height: auto; + max-height: 99%; + object-fit: contain; + border-radius: 5px; + } + } + .ImageHeader { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 10px; + } + + .ImageCancelIcon { + width: 16px !important; + height: 16px !important; + } + .ImageBoxIcon { + width: 20px !important; + height: 20px !important; + } +} diff --git a/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/ImageBoxField.tsx b/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/ImageBoxField.tsx new file mode 100644 index 0000000..fae09b2 --- /dev/null +++ b/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/ImageBoxField.tsx @@ -0,0 +1,87 @@ +import { useFormikContext } from "formik"; +import { useState, useRef, useEffect } from "react"; +import "./ImageBoxField.scss"; +import ImageIcon from "./ImageIcon"; +import ImageCancelIcon from "./ImageCancelIcon"; +import { generateImagePreview } from "./generateImagePreview"; +import { getNestedValue } from "../../../../../../utils/getNestedValue"; +import { useTranslation } from "react-i18next"; + +// Helper function to generate image preview from a File + +const ImageBoxField = ({ name }: any) => { + const formik = useFormikContext(); + const value = getNestedValue(formik.values, name); + const [imagePreview, setImagePreview] = useState(null); + const fileInputRef = useRef(null); + + useEffect(() => { + if (value instanceof File) { + generateImagePreview(value, setImagePreview); + } else if (typeof value === "string") { + setImagePreview(value); + } else { + setImagePreview(null); + } + }, [value]); + + const handleFileChange = (event: any) => { + const file = event.target.files[0]; + if (file) { + generateImagePreview(file, setImagePreview); + formik.setFieldValue(name, file); + } + }; + + const handleButtonClick = () => { + const fileInput = fileInputRef.current; + if (fileInput) { + fileInput.click(); + } + }; + + const handleCancel = () => { + setImagePreview(""); + formik.setFieldValue(name, ""); + + if (fileInputRef.current) { + fileInputRef.current.value = ""; + } + }; + const [t] = useTranslation(); + return ( +
+
{t(`input.${name}`)}
+
+ {imagePreview ? ( + <> + + + + ) : ( +
hidden
+ )} +
+
+ {imagePreview ? ( + Preview + ) : ( + + )} +
+ +
+ ); +}; + +export default ImageBoxField; diff --git a/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/ImageCancelIcon.tsx b/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/ImageCancelIcon.tsx new file mode 100644 index 0000000..d42ba53 --- /dev/null +++ b/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/ImageCancelIcon.tsx @@ -0,0 +1,18 @@ +import React from "react"; + +interface ImageCancelIconProps extends React.HTMLAttributes {} + +const ImageCancelIcon: React.FC = (props) => { + return ( +
+ + + +
+ ); +}; + +export default ImageCancelIcon; diff --git a/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/ImageIcon.tsx b/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/ImageIcon.tsx new file mode 100644 index 0000000..4ca597a --- /dev/null +++ b/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/ImageIcon.tsx @@ -0,0 +1,18 @@ +import React from "react"; + +interface ImageIconProps extends React.HTMLAttributes {} + +const ImageIcon: React.FC = (props) => { + return ( +
+ + + +
+ ); +}; + +export default ImageIcon; diff --git a/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/generateImagePreview.ts b/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/generateImagePreview.ts new file mode 100644 index 0000000..3f754d3 --- /dev/null +++ b/src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/generateImagePreview.ts @@ -0,0 +1,10 @@ +export const generateImagePreview = ( + file: File, + setImagePreview: (result: string) => void, +) => { + const reader = new FileReader(); + reader.onloadend = () => { + setImagePreview(reader.result as string); + }; + reader.readAsDataURL(file); +}; diff --git a/src/Pages/Admin/Notifications/AddNotification/Form/PersonalDetailsForm.tsx b/src/Pages/Admin/Notifications/AddNotification/Form/PersonalDetailsForm.tsx new file mode 100644 index 0000000..719233b --- /dev/null +++ b/src/Pages/Admin/Notifications/AddNotification/Form/PersonalDetailsForm.tsx @@ -0,0 +1,63 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import { FaStore } from "react-icons/fa"; +import ValidationField from "../../../../../Components/ValidationField/ValidationField"; +import { convert_data_to_select } from "../../../../../Layout/app/Const"; +import { userTypeOptions } from "../../../../../config/userTypeOptions"; +import { statusType } from "../../../../../config/statusType"; +import { IoIosNotifications } from "react-icons/io"; + +const PersonalDetailsForm = ({isEdit}:{isEdit?:boolean}) => { + const [t] = useTranslation(); + return ( +
+
+ +

{t("header.notification_details")}

+
+
+ + + + + + + {isEdit? "" : + + } + +
+
+ ); +}; + +export default PersonalDetailsForm; diff --git a/src/Pages/Admin/Notifications/AddNotification/Form/TitleDetailsForm.tsx b/src/Pages/Admin/Notifications/AddNotification/Form/TitleDetailsForm.tsx new file mode 100644 index 0000000..cb04ba6 --- /dev/null +++ b/src/Pages/Admin/Notifications/AddNotification/Form/TitleDetailsForm.tsx @@ -0,0 +1,31 @@ +import React, { useState } from "react"; +import { useTranslation } from "react-i18next"; +import { FaRegAddressBook } from "react-icons/fa"; +import ValidationField from "../../../../../Components/ValidationField/ValidationField"; +import { useGetAllArea } from "../../../../../api/Area"; +import { useGetAllCity } from "../../../../../api/City"; +import { FaUsers } from "react-icons/fa6"; + +const TitleDetailsForm = () => { + const [t] = useTranslation(); + const {data:city} = useGetAllCity(); + const [CityId, setCityId] = useState() + + const {data} = useGetAllArea({ + city_id:CityId + }); + + return ( +
+
+ +

{t("header.users")}

+
+
+ {/* */} +
+
+ ); +}; + +export default TitleDetailsForm; diff --git a/src/Pages/Admin/Notifications/AddNotification/Form/formUtils.ts b/src/Pages/Admin/Notifications/AddNotification/Form/formUtils.ts new file mode 100644 index 0000000..373d192 --- /dev/null +++ b/src/Pages/Admin/Notifications/AddNotification/Form/formUtils.ts @@ -0,0 +1,95 @@ +import * as Yup from "yup"; +import { objectToKeyValueArray } from "../../../../../utils/objectToKeyValueArray"; + +interface Location { + lat: number; + lng: number; +} +interface User { + username: string; + phone_number?: number; + type?:string +} + + +interface PersonalDetailsForm { + id: number; + first_name: string | null; + last_name: string | null; + location: Location[]; + contact_number1: string | null; + contact_number2: string | null; + card_number: string | null; + username: string | null; + password: string | null; + area_id: number | null; + lat:number, + lng:number +} + +interface PersonalDetailsEditForm { + id: number; + first_name: string | null; + last_name: string | null; + location: Location[]; + contact_number1: string | null; + contact_number2: string | null; + card_number: string | null; + user: User; + area_id: any | null; + lat:number, + lng:number +} + +export const getInitialValues = (objectToEdit: Partial) => { + const location = objectToEdit?.location?.[0] || { lat: 33.5138, lng: 36.2765 }; + + return { + id: objectToEdit?.id ?? 0, + first_name: objectToEdit?.first_name ?? null, + last_name: objectToEdit?.last_name ?? null, + location_lat: location.lat, + location_lng: location.lng, + contact_number1: objectToEdit?.contact_number1 ?? null, + contact_number2: objectToEdit?.contact_number2 ?? null, + card_number: objectToEdit?.card_number ?? null, + username: objectToEdit?.username ?? null, + password: objectToEdit?.password ?? null, + area_id: objectToEdit?.area_id ?? null, + lat: location.lat ?? 33.5138, + lng: location.lng ?? 36.2765, + }; +}; + +export const getValidationSchema = () => { + // validate input + return Yup.object().shape({ + id: Yup.number().required(), + first_name: Yup.string().required('first_name is required'), + last_name: Yup.string().required('last_name is required'), + location_lat: Yup.string().required('lat is required'), + location_lng: Yup.string().required('lng is required'), + contact_number1: Yup.string().required('contact_number1 is required'), + contact_number2: Yup.string().required('contact_number2 is required'), + username: Yup.string().required('username is required'), + area_id: Yup.mixed().required('area_id is required'), + }); +}; + + +export const getInitialValuesEdit = (objectToEdit: Partial) => { + const location = objectToEdit?.location || { lat: 0, lng: 0 }; + + return { + id: objectToEdit?.id ?? 0, + first_name: objectToEdit?.first_name ?? null, + last_name: objectToEdit?.last_name ?? null, + location_lat: location.lat, + location_lng: location.lng, + contact_number1: objectToEdit?.contact_number1 ?? null, + contact_number2: objectToEdit?.contact_number2 ?? null, + card_number: objectToEdit?.card_number ?? null, + username: objectToEdit?.user?.username ?? null, + area_id: objectToEdit?.area_id ?? null, + }; +}; \ No newline at end of file diff --git a/src/Pages/Admin/Notifications/AddNotification/Page.tsx b/src/Pages/Admin/Notifications/AddNotification/Page.tsx index f600b15..e4e2e99 100644 --- a/src/Pages/Admin/Notifications/AddNotification/Page.tsx +++ b/src/Pages/Admin/Notifications/AddNotification/Page.tsx @@ -8,6 +8,7 @@ import FilterLayout from "../../../../Layout/Dashboard/FilterLayout"; import FilterForm from "./Model/FilterForm"; import { canAddNotification } from "../../../../utils/hasAbilityFn"; import { useDeleteNotification } from "../../../../api/notification"; +import { ABILITIES_ENUM } from "../../../../enums/abilities"; const Table = lazy(() => import("./Table")); const AddModalForm = lazy(() => import("./Model/AddModel")); @@ -30,14 +31,16 @@ const TableHeader = () => { }> } filterTitle="table.notification" />
- + {/* */} import("./Pages/Admin/User/Page")); const QuestionBank = React.lazy(() => import("./Pages/Admin/QuestionBank/Page")); const AllNotifications = React.lazy(() => import("./Pages/Admin/Notifications/Page")); const Notifications = React.lazy(() => import("./Pages/Admin/Notifications/AddNotification/Page")); +const AddNotification = React.lazy(() => import("./Pages/Admin/Notifications/AddNotification/Add/Page")); + const Profile = React.lazy(() => import("./Pages/Admin/Profile/Page")); const Setting = React.lazy(() => import("./Pages/Admin/Setting/Page")); @@ -401,6 +403,16 @@ export const CrudRoute: TCrudRoute[] = [ // abilities_value: ABILITIES_VALUES_ENUM.INDEX, // prevPath: 0, // }, + + { + header: "page_header.add_notification", + element: , + path: `/${ABILITIES_ENUM?.NOTIFICATIONS}/add`, + abilities: ABILITIES_ENUM?.NOTIFICATIONS, + abilities_value: ABILITIES_VALUES_ENUM.INDEX, + prevPath: 0, + }, + //// RE_SELLER { header: "page_header.notifications", diff --git a/src/translate/ar.json b/src/translate/ar.json index 95a2dc7..d354c29 100644 --- a/src/translate/ar.json +++ b/src/translate/ar.json @@ -154,7 +154,9 @@ "show_preview":"عرض المعاينة", "show_MMl":" MML عرض", "financial_collection":"التحصيلات", - "change_direction":"تغيير الاتجاه" + "change_direction":"تغيير الاتجاه", + "notification_details":"تفاصيل الإشعار", + "users":"المستخدمون" }, "columns": { "id": "الرقم التعريفي", @@ -971,7 +973,8 @@ "Coupon":"قسيمة", "financial_collection":"التحصيلات", "show_collection":"حصيلة", - "notification":"إدارة الاشعارات" + "notification":"إدارة الاشعارات", + "manage_notification":"إدارة الإشعارات" }, "page_header": { "home": "لوحة القيادة", From 8eeb3b6d0368c3e8718fc0e6c7cdb37cfdfa4343 Mon Sep 17 00:00:00 2001 From: Moaz Dawalibi Date: Tue, 12 Nov 2024 15:13:59 +0300 Subject: [PATCH 4/7] fix add notification section --- .../AddNotification/Add/Page.tsx | 4 ++-- .../Form/PersonalDetailsForm.tsx | 6 ++--- .../AddNotification/Form/TitleDetailsForm.tsx | 23 +++++++++++++++---- .../question/Model/EditForm/FormContainer.tsx | 3 +-- src/Styles/Pages/reSeller.scss | 12 +++++++--- src/translate/ar.json | 6 +++-- 6 files changed, 37 insertions(+), 17 deletions(-) diff --git a/src/Pages/Admin/Notifications/AddNotification/Add/Page.tsx b/src/Pages/Admin/Notifications/AddNotification/Add/Page.tsx index 229e064..f476457 100644 --- a/src/Pages/Admin/Notifications/AddNotification/Add/Page.tsx +++ b/src/Pages/Admin/Notifications/AddNotification/Add/Page.tsx @@ -51,12 +51,12 @@ const TableHeader = () => { > {({ dirty }) => (
- +
- : ""} -
- + return ( +
+
+ +
+ {status} +

{name}

- ) -} - -export default InfoCard - +
+ +
+ {data?.map((student: any) => ( + +

{student?.key}

+

{student?.value}

+ + ))} + {withButton + ? canAddReSeller && ( + + ) + : ""} +
+
+ ); +}; +export default InfoCard; diff --git a/src/Components/Cards/ParamInfo.ts b/src/Components/Cards/ParamInfo.ts index 542abbc..76e82e7 100644 --- a/src/Components/Cards/ParamInfo.ts +++ b/src/Components/Cards/ParamInfo.ts @@ -1,27 +1,30 @@ export const StudentParamInfo = [ - {key:"الحنس" , value:"male"}, - {key:"sex" , value:"male"}, - {key:"sex" , value:"male"}, - {key:"sex" , value:"male"}, - {key:"sex" , value:"male"}, - {key:"sex" , value:"male"} -] + { key: "الحنس", value: "male" }, + { key: "sex", value: "male" }, + { key: "sex", value: "male" }, + { key: "sex", value: "male" }, + { key: "sex", value: "male" }, + { key: "sex", value: "male" }, +]; export const ReSellerParamInfo = [ - {key:"رقم الهوية" , value:"12i9128921019"}, - {key:"تاريخ الإضافة", value:"1/10/2010"}, - {key:"تاريخ الإضافة", value:"1/10/2010"}, - {key:"تاريخ الإضافة", value:"1/10/2010"}, - {key:"تاريخ الإضافة", value:"1/10/2010"}, - {key:"تاريخ الإضافة", value:"1/10/2010"}, - {key:"تاريخ الإضافة", value:"1/10/2010"}, -] + { key: "رقم الهوية", value: "12i9128921019" }, + { key: "تاريخ الإضافة", value: "1/10/2010" }, + { key: "تاريخ الإضافة", value: "1/10/2010" }, + { key: "تاريخ الإضافة", value: "1/10/2010" }, + { key: "تاريخ الإضافة", value: "1/10/2010" }, + { key: "تاريخ الإضافة", value: "1/10/2010" }, + { key: "تاريخ الإضافة", value: "1/10/2010" }, +]; export const StudentAddressInfo = [ - {key:"address" , value:"moa moamasom aoms omaosm oasm oasm oasm asm aom"}, -] + { key: "address", value: "moa moamasom aoms omaosm oasm oasm oasm asm aom" }, +]; export const ReSellerAddressInfo = [ - {key:"governorate" , value:"moa moamasom aoms omaosm oasm oasm oasm asm aom"}, - {key:"address" , value:"moa moamasom aoms omaosm oasm oasm oasm asm aom"}, -] \ No newline at end of file + { + key: "governorate", + value: "moa moamasom aoms omaosm oasm oasm oasm asm aom", + }, + { key: "address", value: "moa moamasom aoms omaosm oasm oasm oasm asm aom" }, +]; diff --git a/src/Components/Columns/ColumnsImage.tsx b/src/Components/Columns/ColumnsImage.tsx index 95b7638..36e7507 100644 --- a/src/Components/Columns/ColumnsImage.tsx +++ b/src/Components/Columns/ColumnsImage.tsx @@ -16,10 +16,10 @@ const ColumnsImage = ({ src }: any) => { if (hasError) { // If there is an error, display the fallback icon - return ; + return ; } - if(!imageUrl){ - return ; + if (!imageUrl) { + return ; } return ( { const value = getNestedValue(formik?.values, name); const [imagePreview, setImagePreview] = useState(null); const fileInputRef = useRef(null); - const [t] = useTranslation() + const [t] = useTranslation(); useEffect(() => { if (value instanceof File) { generateImagePreview(value, setImagePreview); @@ -27,14 +27,14 @@ const ImageBoxField = ({ name }: any) => { const handleFileChange = (event: any) => { const file = event.target.files[0]; - + if (file) { - const maxSize = 2 * 1024 * 1024; + const maxSize = 2 * 1024 * 1024; if (file.size > maxSize) { - alert(t('validation.File_size_exceeds_2_MB_limit.')); - event.target.value = ''; - return; + alert(t("validation.File_size_exceeds_2_MB_limit.")); + event.target.value = ""; + return; } // Process the file @@ -42,7 +42,7 @@ const ImageBoxField = ({ name }: any) => { if (file) { generateImagePreview(file, setImagePreview); - + formik.setFieldValue(name, file); } }; @@ -63,7 +63,7 @@ const ImageBoxField = ({ name }: any) => { } }; console.log(name); - + return (
@@ -81,9 +81,9 @@ const ImageBoxField = ({ name }: any) => {
{imagePreview ? ( - Preview + Preview ) : ( - + )}
{ - const {values,setFieldValue} = form - const {name} = field; +const ImageBoxFieldMemo = memo( + ({ form, field }: any) => { + const { values, setFieldValue } = form; + const { name } = field; const value = getNestedValue(values, name); const [imagePreview, setImagePreview] = useState(null); const fileInputRef = useRef(null); @@ -28,14 +29,14 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual"; const handleFileChange = (event: any) => { const file = event.target.files[0]; - + if (file) { - const maxSize = 2 * 1024 * 1024; + const maxSize = 2 * 1024 * 1024; if (file.size > maxSize) { - alert(t('validation.File_size_exceeds_2_MB_limit.')); - event.target.value = ''; - return; + alert(t("validation.File_size_exceeds_2_MB_limit.")); + event.target.value = ""; + return; } // Process the file @@ -43,7 +44,7 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual"; if (file) { generateImagePreview(file, setImagePreview); - + setFieldValue(name, file); } }; @@ -64,8 +65,8 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual"; } }; - console.log(name); - + console.log(name); + return (
@@ -83,9 +84,9 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
{imagePreview ? ( - Preview + Preview ) : ( - + )}
); - }, (prevProps, nextProps) => { - return areFieldPropsEqual(prevProps, nextProps) - }); + }, + (prevProps, nextProps) => { + return areFieldPropsEqual(prevProps, nextProps); + }, +); - export default ImageBoxFieldMemo; +export default ImageBoxFieldMemo; diff --git a/src/Components/CustomFields/MathComponent.tsx b/src/Components/CustomFields/MathComponent.tsx index b3688ba..ef89a2a 100644 --- a/src/Components/CustomFields/MathComponent.tsx +++ b/src/Components/CustomFields/MathComponent.tsx @@ -1,22 +1,15 @@ -import React from 'react'; -import { BlockMath } from 'react-katex'; -import 'katex/dist/katex.min.css'; - +import React from "react"; +import { BlockMath } from "react-katex"; +import "katex/dist/katex.min.css"; const LatexPreview = ({ latex }: { latex: string }) => { // console.log(latex); - - // const sanitizedLatex = latex.replace(/\\_/g, '_'); - + + // const sanitizedLatex = latex.replace(/\\_/g, '_'); + return ( -
- - - - {latex} - - - +
+ {latex}
); }; diff --git a/src/Components/CustomFields/SelectTag.tsx b/src/Components/CustomFields/SelectTag.tsx index 96fc9db..3f03699 100644 --- a/src/Components/CustomFields/SelectTag.tsx +++ b/src/Components/CustomFields/SelectTag.tsx @@ -9,32 +9,31 @@ const SelectTag: React.FC = () => { const [searchValue, setSearchValue] = useState(""); const [fieldValue, setFieldValue] = useState(""); - const [NewAdditionalData, setNewAdditionalData] = useState({}) + const [NewAdditionalData, setNewAdditionalData] = useState({}); const formik = useFormikContext(); - const handleChange = (value: any,option:any) => { + const handleChange = (value: any, option: any) => { console.log(option); console.log(value); - const newSelectedOption = option?.pop() + const newSelectedOption = option?.pop(); console.log(newSelectedOption); const newObject = { - id:newSelectedOption?.id, - name:newSelectedOption?.name - } - setNewAdditionalData(newObject) + id: newSelectedOption?.id, + name: newSelectedOption?.name, + }; + setNewAdditionalData(newObject); formik.setFieldValue("tags", value); setSearchValue(""); setFieldValue(""); }; const handleSearch = useDebounce((value: string) => { - console.log(value,"value"); - + console.log(value, "value"); + setSearchValue(value); }); const handleFieldChange = (value: string) => { - setFieldValue(value); }; @@ -48,33 +47,34 @@ const SelectTag: React.FC = () => { }); const [t] = useTranslation(); - const initialData = formik?.values?.tags?.filter((item:any)=>{ - return item?.id - - }) ?? [] - - + const initialData = + formik?.values?.tags?.filter((item: any) => { + return item?.id; + }) ?? []; const options = data?.data ?? []; const additionalData = options.length < 1 && searchValue.length > 1 && !isLoading ? [{ id: searchValue, name: searchValue }] : []; - + const value = formik?.values?.tags?.map((item: any) => item?.id ?? item) ?? []; - const AllOptions = [...options, ...additionalData,NewAdditionalData, ...(initialData)]; - + const AllOptions = [ + ...options, + ...additionalData, + NewAdditionalData, + ...initialData, + ]; + const uniqueOptions = Array.from( new Map( - AllOptions - .filter(item => Object.keys(item).length > 0) // Filter out empty objects - .map(item => [item.id, item]) // Create [id, item] pairs to ensure uniqueness - ).values() + AllOptions.filter((item) => Object.keys(item).length > 0) // Filter out empty objects + .map((item) => [item.id, item]), // Create [id, item] pairs to ensure uniqueness + ).values(), ); - return (
diff --git a/src/Components/CustomFields/SelectTagV2.tsx b/src/Components/CustomFields/SelectTagV2.tsx index 6bfc4b6..399e298 100644 --- a/src/Components/CustomFields/SelectTagV2.tsx +++ b/src/Components/CustomFields/SelectTagV2.tsx @@ -13,21 +13,22 @@ const SelectTagV2: React.FC = () => { // Fetch tags based on search value const { data, isLoading } = useGetAllTag({ name: searchValue }); const { t } = useTranslation(); - - + // Get selected tags from Formik const CurrentTags = formik.values.tags ?? []; // Assuming tags are stored as array of objects - console.log(CurrentTags,"CurrentTags"); - - const NewShapeTags = CurrentTags?.map((item:any)=> {return item?.name ?? item }) - - const handleChange = (_value: any[],option:any) => { + console.log(CurrentTags, "CurrentTags"); + + const NewShapeTags = CurrentTags?.map((item: any) => { + return item?.name ?? item; + }); + + const handleChange = (_value: any[], option: any) => { // console.log(option,"option"); console.log(_value); - - // const NewShapeOption = option?.map((item:any)=> {return ({name:item?.name,id:item?.id})}) + + // const NewShapeOption = option?.map((item:any)=> {return ({name:item?.name,id:item?.id})}) // console.log(NewShapeOption); - + // formik.setFieldValue("tags", NewShapeOption); // setSearchValue(""); // setFieldValue(""); @@ -43,14 +44,13 @@ const SelectTagV2: React.FC = () => { }; const options = data?.data ?? []; - - const additionalData = - options.length < 1 && searchValue.length >= 1 && !isLoading - ? [{ id: searchValue, name: searchValue }] - : options; - console.log(additionalData); - + const additionalData = + options.length < 1 && searchValue.length >= 1 && !isLoading + ? [{ id: searchValue, name: searchValue }] + : options; + + console.log(additionalData); return (
@@ -76,11 +76,10 @@ const SelectTagV2: React.FC = () => { handleBlur(); } }} - value={NewShapeTags} - + value={NewShapeTags} />
); }; -export default SelectTagV2; \ No newline at end of file +export default SelectTagV2; diff --git a/src/Components/DataTable/SearchField.tsx b/src/Components/DataTable/SearchField.tsx index c263c58..6a34cc5 100644 --- a/src/Components/DataTable/SearchField.tsx +++ b/src/Components/DataTable/SearchField.tsx @@ -14,16 +14,15 @@ const SearchField: React.FC = ({ placeholder, searchBy }) => { const [searchQuery, setSearchQuery] = useState(""); const inputRef = useRef(null); - const { setFilter,Filter } = useFilterStateState(); + const { setFilter, Filter } = useFilterStateState(); const { page } = PaginationParams(location); const handleInputChange = (value: string) => { setSearchQuery(value); }; - + const handleInputChangeWithDebounce = useDebounce((value: string) => { - if(Number(page) > 1){ - + if (Number(page) > 1) { } setFilter({ [searchBy]: value, diff --git a/src/Components/DataTable/SearchFieldWithSelect.tsx b/src/Components/DataTable/SearchFieldWithSelect.tsx index 0585e81..c6e7dc9 100644 --- a/src/Components/DataTable/SearchFieldWithSelect.tsx +++ b/src/Components/DataTable/SearchFieldWithSelect.tsx @@ -58,7 +58,7 @@ const SearchFieldWithSelect: React.FC = ({ const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()), ); - const Type = localStorage.getItem('type'); + const Type = localStorage.getItem("type"); return (
@@ -78,7 +78,7 @@ const SearchFieldWithSelect: React.FC = ({
{filteredOptions.map((option) => { console.log(option); - return( + return (
= ({
{option.label}
{/* {withIcon && } */}
- ) + ); })}
diff --git a/src/Components/Filter/PaginationColumn.tsx b/src/Components/Filter/PaginationColumn.tsx index ccdf4b8..5ac209e 100644 --- a/src/Components/Filter/PaginationColumn.tsx +++ b/src/Components/Filter/PaginationColumn.tsx @@ -8,15 +8,14 @@ import { useFilterStateState } from "../../zustand/Filter"; const PaginationColumn = () => { const { t } = useTranslation(); const navigate = useNavigate(); - const { Filter ,setFilter } = useFilterStateState(); - + const { Filter, setFilter } = useFilterStateState(); const handleChange = (value: string) => { navigate(`?per_page=${value}`); setFilter({ - per_page:value - }) + per_page: value, + }); }; return ( diff --git a/src/Components/FilterField/components/useFilter.tsx b/src/Components/FilterField/components/useFilter.tsx index c0919c1..319ffb4 100644 --- a/src/Components/FilterField/components/useFilter.tsx +++ b/src/Components/FilterField/components/useFilter.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useState } from "react"; -import '../styles/index.scss'; +import "../styles/index.scss"; import CustomInput from "../design-system/CustomInput"; import { Button } from "antd"; import { useTranslation } from "react-i18next"; @@ -24,37 +24,40 @@ const useFilter = () => { }; const FilterBody = ({ children }: IFilterBody) => { - const [values, setValues] = useState({ name1: '', name2: '' }); - const handleChange = useCallback((e: React.ChangeEvent) => { - const { name, value } = e.target; - setValues((prev) => ({ ...prev, [name]: value })); - }, []); + const [values, setValues] = useState({ name1: "", name2: "" }); + const handleChange = useCallback( + (e: React.ChangeEvent) => { + const { name, value } = e.target; + setValues((prev) => ({ ...prev, [name]: value })); + }, + [], + ); - const handleSubmit = (event:React.FormEvent) => { - event.preventDefault(); - console.log(values,"values"); - + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + console.log(values, "values"); }; - - const [t] = useTranslation() + const [t] = useTranslation(); return ( -
- - {children} - - - - - +
+
+ {children} + + + +
); }; diff --git a/src/Components/FilterField/design-system/CustomInput.tsx b/src/Components/FilterField/design-system/CustomInput.tsx index 6a3ce24..7ed0b29 100644 --- a/src/Components/FilterField/design-system/CustomInput.tsx +++ b/src/Components/FilterField/design-system/CustomInput.tsx @@ -1,5 +1,5 @@ -import { Input } from 'antd'; -import React from 'react'; +import { Input } from "antd"; +import React from "react"; interface CustomInputProps { name: string; @@ -7,16 +7,11 @@ interface CustomInputProps { onChange: (e: React.ChangeEvent) => void; } -const CustomInput: React.FC = React.memo(({ name, value, onChange }) => { - console.log(`Rendering ${name}`); // For debugging purposes - return ( - - ); -}); +const CustomInput: React.FC = React.memo( + ({ name, value, onChange }) => { + console.log(`Rendering ${name}`); // For debugging purposes + return ; + }, +); export default CustomInput; diff --git a/src/Components/FilterField/styles/index.scss b/src/Components/FilterField/styles/index.scss index 7f8934a..1f8c99d 100644 --- a/src/Components/FilterField/styles/index.scss +++ b/src/Components/FilterField/styles/index.scss @@ -1,33 +1,34 @@ .filter_body { - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out; - opacity: 0; - transform: translateY(-20px); - display: flex; - flex-wrap: wrap; - gap: 20px; - - } - - .filter_body.visible { - max-height: 200px; - opacity: 1; - transform: translateY(0); - } - - .filter_body.hidden { - max-height: 0; - opacity: 0; - transform: translateY(-20px); - } - - .DummyHomePage { - display: flex; - flex-direction: column; - align-items: center; - gap: 40px; - width: 70%; - padding: 50px; - } - \ No newline at end of file + max-height: 0; + overflow: hidden; + transition: + max-height 0.3s ease-out, + opacity 0.3s ease-out, + transform 0.3s ease-out; + opacity: 0; + transform: translateY(-20px); + display: flex; + flex-wrap: wrap; + gap: 20px; +} + +.filter_body.visible { + max-height: 200px; + opacity: 1; + transform: translateY(0); +} + +.filter_body.hidden { + max-height: 0; + opacity: 0; + transform: translateY(-20px); +} + +.DummyHomePage { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; + width: 70%; + padding: 50px; +} diff --git a/src/Components/LatextInput/AddLaTexModal.tsx b/src/Components/LatextInput/AddLaTexModal.tsx index 5d52352..051382a 100644 --- a/src/Components/LatextInput/AddLaTexModal.tsx +++ b/src/Components/LatextInput/AddLaTexModal.tsx @@ -1,83 +1,89 @@ -import { Modal } from 'antd' -import TextArea from 'antd/es/input/TextArea' -import { useFormikContext } from 'formik'; -import React, { useState } from 'react' -import { convertMathMLToLaTeX } from '../../utils/convertMathMLToLaTeX'; -import { useTranslation } from 'react-i18next'; -import { toast } from 'react-toastify'; - -const AddLaTexModal = ({name,setLatex,Latex,setIsModalOpen,isModalOpen,setCurrentValue}:{ - name:string, - setLatex: (value:string)=> void, - Latex:string, - setIsModalOpen: (value:boolean)=> void , - isModalOpen:boolean, - setCurrentValue:(value:string)=> void +import { Modal } from "antd"; +import TextArea from "antd/es/input/TextArea"; +import { useFormikContext } from "formik"; +import React, { useState } from "react"; +import { convertMathMLToLaTeX } from "../../utils/convertMathMLToLaTeX"; +import { useTranslation } from "react-i18next"; +import { toast } from "react-toastify"; +const AddLaTexModal = ({ + name, + setLatex, + Latex, + setIsModalOpen, + isModalOpen, + setCurrentValue, +}: { + name: string; + setLatex: (value: string) => void; + Latex: string; + setIsModalOpen: (value: boolean) => void; + isModalOpen: boolean; + setCurrentValue: (value: string) => void; }) => { - const {values,setFieldValue,getFieldProps} = useFormikContext() + const { values, setFieldValue, getFieldProps } = useFormikContext(); - const currentValue = getFieldProps(name).value - const handleOk = () => { - const oldValue = currentValue ?? ""; - const newLatex = convertMathMLToLaTeX(Latex); - console.log(oldValue); - - if(newLatex){ - setFieldValue(name, oldValue + " $$ " +newLatex +" $$ "); - setCurrentValue(oldValue + " $$ " +newLatex +" $$ ") - setLatex("") + const currentValue = getFieldProps(name).value; + const handleOk = () => { + const oldValue = currentValue ?? ""; + const newLatex = convertMathMLToLaTeX(Latex); + console.log(oldValue); + + if (newLatex) { + setFieldValue(name, oldValue + " $$ " + newLatex + " $$ "); + setCurrentValue(oldValue + " $$ " + newLatex + " $$ "); + setLatex(""); setIsModalOpen(false); - }else{ - setFieldValue(name, oldValue + " $$ " +Latex +" $$ "); - setCurrentValue(oldValue + " $$ " +Latex +" $$ ") - setLatex("") + } else { + setFieldValue(name, oldValue + " $$ " + Latex + " $$ "); + setCurrentValue(oldValue + " $$ " + Latex + " $$ "); + setLatex(""); setIsModalOpen(false); } - }; - - const handleCancel = () => { - setIsModalOpen(false); - setLatex("") - }; + }; - const handleChangeInputLatex = ( - e: React.ChangeEvent, - ) => { - const newValue = e.target.value; - setLatex(newValue) - }; + const handleCancel = () => { + setIsModalOpen(false); + setLatex(""); + }; - const [t] = useTranslation() + const handleChangeInputLatex = ( + e: React.ChangeEvent, + ) => { + const newValue = e.target.value; + setLatex(newValue); + }; + + const [t] = useTranslation(); return ( - - -
- -