From d6c8ff64685e5b722c09dee159e31851292e13d5 Mon Sep 17 00:00:00 2001 From: karimaldeen Date: Sun, 15 Sep 2024 14:44:33 +0300 Subject: [PATCH] fix image --- src/Components/Columns/ColumnsImage.tsx | 48 ++---- src/Layout/Dashboard/FilterLayout.tsx | 13 +- src/Layout/Dashboard/FormikFormModel.tsx | 3 - src/Pages/Admin/Grade/useTableColumns.tsx | 15 +- src/Pages/Admin/question/FilterForm.tsx | 144 ++++++++++++++++-- src/Pages/Admin/question/Page.tsx | 2 + src/Pages/Admin/question/Table.tsx | 3 + .../Admin/subject/Table/useTableColumns.tsx | 3 +- src/utils/isValidImage.ts | 9 ++ 9 files changed, 173 insertions(+), 67 deletions(-) create mode 100644 src/utils/isValidImage.ts diff --git a/src/Components/Columns/ColumnsImage.tsx b/src/Components/Columns/ColumnsImage.tsx index 7dc1e80..95b7638 100644 --- a/src/Components/Columns/ColumnsImage.tsx +++ b/src/Components/Columns/ColumnsImage.tsx @@ -1,43 +1,33 @@ import { - DownloadOutlined, RotateLeftOutlined, RotateRightOutlined, SwapOutlined, ZoomInOutlined, ZoomOutOutlined, } from "@ant-design/icons"; -import React from "react"; +import React, { useState } from "react"; import { Image, Space } from "antd"; -import useImageError from "../../Hooks/useImageError"; -import { ErrorImage } from "../../Layout/app/Const"; +import { CiImageOff } from "react-icons/ci"; // Assuming you're using this icon from react-icons const ColumnsImage = ({ src }: any) => { - const imageUrl = src || ErrorImage; + const [hasError, setHasError] = useState(false); // Track if the image has an error - const handleError = useImageError; - // or you can download flipped and rotated image - // https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp - const onDownload = () => { - fetch(src) - .then((response) => response.blob()) - .then((blob) => { - const url = URL.createObjectURL(new Blob([blob])); - const link = document.createElement("a"); - link.href = url; - link.download = "image.png"; - document.body.appendChild(link); - link.click(); - URL.revokeObjectURL(url); - link.remove(); - }); - }; + const imageUrl = src; + if (hasError) { + // If there is an error, display the fallback icon + return ; + } + if(!imageUrl){ + return ; + } return ( setHasError(true)} // Triggered when image fails to load preview={{ toolbarRender: ( _, @@ -54,7 +44,6 @@ const ColumnsImage = ({ src }: any) => { }, ) => ( - {/* */} @@ -64,19 +53,8 @@ const ColumnsImage = ({ src }: any) => { ), }} - onError={handleError} /> ); }; export default ColumnsImage; - -// { -// name: t("image"), -// center: "true", -// cell: (row: any) => { -// return ( -// -// ) -// } -// }, diff --git a/src/Layout/Dashboard/FilterLayout.tsx b/src/Layout/Dashboard/FilterLayout.tsx index 4dd4760..fc3733d 100644 --- a/src/Layout/Dashboard/FilterLayout.tsx +++ b/src/Layout/Dashboard/FilterLayout.tsx @@ -15,12 +15,14 @@ const FilterLayout = ({ filterTitle, sub_children, search_by = "name", - width = "500px" + width = "500px", + haveFilter=true }: { filterTitle: string; sub_children: any; search_by?:string width?:string + haveFilter?:boolean }) => { const { t } = useTranslation(); const translateArray = translateOptions(search_array, t); @@ -46,13 +48,18 @@ const FilterLayout = ({
{sub_children}
-
setIsOpen(true)}> + {haveFilter && + +
setIsOpen(true)}> {t("header.filter")} -
+
+ + } + diff --git a/src/Layout/Dashboard/FormikFormModel.tsx b/src/Layout/Dashboard/FormikFormModel.tsx index c12a9cc..3f99817 100644 --- a/src/Layout/Dashboard/FormikFormModel.tsx +++ b/src/Layout/Dashboard/FormikFormModel.tsx @@ -35,9 +35,6 @@ const FormikFormModel: React.FC = ({ useEffect(() => { if (isOpen === "") { formik.setErrors({}); - } - if (isOpen === "isSuccess") { - formik.setErrors({}); formik.resetForm(); } }, [isOpen]); diff --git a/src/Pages/Admin/Grade/useTableColumns.tsx b/src/Pages/Admin/Grade/useTableColumns.tsx index c48ccef..43f29f3 100644 --- a/src/Pages/Admin/Grade/useTableColumns.tsx +++ b/src/Pages/Admin/Grade/useTableColumns.tsx @@ -15,6 +15,8 @@ import { import ActionButtons from "../../../Components/Table/ActionButtons"; import ColumnsImage from "../../../Components/Columns/ColumnsImage"; import { Grade } from "../../../types/Grade"; +import { CiImageOff } from "react-icons/ci"; +import { isValidImage } from "../../../utils/isValidImage"; export const useColumns = () => { const { handel_open_model } = useModalHandler(); @@ -59,20 +61,11 @@ export const useColumns = () => { align: "center", render: (_text: any, record: Grade) => { let str = record?.icon; - return ; + + return ; }, }, { - // canAddGrade ? ( - // - // ) : ( - // "" - // ), title: t("columns.procedure"), key: "actions", diff --git a/src/Pages/Admin/question/FilterForm.tsx b/src/Pages/Admin/question/FilterForm.tsx index 7aae982..48f546e 100644 --- a/src/Pages/Admin/question/FilterForm.tsx +++ b/src/Pages/Admin/question/FilterForm.tsx @@ -1,27 +1,143 @@ import React from "react"; import ValidationField from "../../../Components/ValidationField/ValidationField"; import { Col, Row } from "reactstrap"; -import useFormatDataToSelect from "../../../utils/useFormatDataToSelect"; +import { useFormikContext } from "formik"; +import { useGetAllGrade } from "../../../api/grade"; +import { useValidationValidationParamState } from "../../../Components/ValidationField/state/ValidationValidationParamState"; +import { useGetAllUnit } from "../../../api/unit"; +import { useGetAllSubject } from "../../../api/subject"; +import { useGetAllLesson } from "../../../api/lesson"; const FilterForm = () => { - const yesNoArray = [ - { id: "لا", name: "لا" }, - { id: "نعم", name: "نعم" }, - ]; + + const { ValidationParamState } = useValidationValidationParamState(); + const { + GradeName, GradeCurrentPage, + SubjectName, SubjectCurrentPage, + UnitName, UnitCurrentPage, + LessonName, LessonCurrentPage + + + } = ValidationParamState; + + + + const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({ + name: GradeName, + page: GradeCurrentPage + }); + const GradeOption = Grade?.data ?? [] + const canChangeGradePage = !!Grade?.links?.next; + const GradePage = Grade?.meta?.currentPage; + + + /// subject_id + const { data: Subject, isLoading: isLoadingSubject } = useGetAllSubject({ + name: SubjectName, + page: SubjectCurrentPage + }); + const SubjectOption = Subject?.data ?? [] + const canChangeSubjectPage = !!Subject?.links?.next; + const SubjectPage = Subject?.meta?.currentPage; + + /// unit_id + const { data: Unit, isLoading: isLoadingUnit } = useGetAllUnit({ + name: UnitName, + page: UnitCurrentPage + }); + const UnitOption = Unit?.data ?? [] + const canChangeUnitPage = !!Unit?.links?.next; + const UnitPage = Unit?.meta?.currentPage; + + /// lessonsIds + const { data: Lesson, isLoading: isLoadingLesson } = useGetAllLesson({ + name: LessonName, + page: LessonCurrentPage + }); + const LessonOption = Lesson?.data ?? [] + const canChangeLessonPage = !!Lesson?.links?.next; + const LessonPage = Lesson?.meta?.currentPage; + return (
- - {/* */} + {/* + grade_id + */} + + + + {/* + subject_id + */} + + + + + + + + + + {/* + unit_id + */} + + + + + {/* + lessonsIds + */} + + - {/* - - */}
); diff --git a/src/Pages/Admin/question/Page.tsx b/src/Pages/Admin/question/Page.tsx index 6584a49..31537df 100644 --- a/src/Pages/Admin/question/Page.tsx +++ b/src/Pages/Admin/question/Page.tsx @@ -65,6 +65,8 @@ const TableHeader = () => { } filterTitle={` ${unitName} (${LessonName}) `} + search_by="content" + haveFilter={false} /> diff --git a/src/Pages/Admin/question/Table.tsx b/src/Pages/Admin/question/Table.tsx index 491377b..d0917ce 100644 --- a/src/Pages/Admin/question/Table.tsx +++ b/src/Pages/Admin/question/Table.tsx @@ -5,15 +5,18 @@ import { useGetAllQuestion } from "../../../api/Question"; import { useParams } from "react-router-dom"; import { ParamsEnum } from "../../../enums/params"; import { useFilterState } from "../../../Components/Utils/Filter/FilterState"; +import { useFilterStateState } from "../../../zustand/Filter"; const App: React.FC = () => { const { lesson_id } = useParams(); const { filterState } = useFilterState(); + const { setFilter,Filter } = useFilterStateState(); const response = useGetAllQuestion({ lessonsIds: [lesson_id], pagination: true, ...filterState, + content:Filter?.content }); return ; }; diff --git a/src/Pages/Admin/subject/Table/useTableColumns.tsx b/src/Pages/Admin/subject/Table/useTableColumns.tsx index d8e26d4..2f3315b 100644 --- a/src/Pages/Admin/subject/Table/useTableColumns.tsx +++ b/src/Pages/Admin/subject/Table/useTableColumns.tsx @@ -14,6 +14,7 @@ import { } from "../../../../utils/hasAbilityFn"; import { ABILITIES_ENUM } from "../../../../enums/abilities"; import { Subject } from "../../../../types/Subject"; +import { CiImageOff } from "react-icons/ci"; export const useColumns = () => { const navigate = useNavigate(); @@ -54,7 +55,7 @@ export const useColumns = () => { align: "center", render: (row: Subject, record) => { let str = record.icon; - return ; + return ; }, }, diff --git a/src/utils/isValidImage.ts b/src/utils/isValidImage.ts new file mode 100644 index 0000000..bc45a00 --- /dev/null +++ b/src/utils/isValidImage.ts @@ -0,0 +1,9 @@ +export const isValidImage = (url: string): Promise => { + return new Promise((resolve) => { + const img = new Image(); + img.src = url; + + img.onload = () => resolve(true); // Image loaded successfully + img.onerror = () => resolve(false); // Error loading image + }); + }; \ No newline at end of file