This commit is contained in:
karimaldeen 2024-09-10 10:20:21 +03:00
parent 1a78474120
commit 398d1e8f07
139 changed files with 10033 additions and 4638 deletions

File diff suppressed because it is too large Load Diff

View File

@ -1,12 +1,11 @@
.ImageBoxField { .ImageBoxField {
.ImageBox { .ImageBox {
width: 120px; width: 120px;
height: 120px; height: 120px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: max(1.5px,.1vw) dashed #a9c3f1; border: max(1.5px, 0.1vw) dashed #a9c3f1;
margin-block: 10px; margin-block: 10px;
border-radius: 5px; border-radius: 5px;
.ImageBoxIcon { .ImageBoxIcon {
@ -19,15 +18,12 @@
object-fit: contain; object-fit: contain;
border-radius: 5px; border-radius: 5px;
} }
} }
.ImageHeader { .ImageHeader {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
gap: 10px; gap: 10px;
} }
.ImageCancelIcon { .ImageCancelIcon {
@ -38,5 +34,4 @@
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
} }
} }

View File

@ -1,6 +1,6 @@
import { useFormikContext } from "formik"; import { useFormikContext } from "formik";
import { useState, useRef, useEffect } from "react"; import { useState, useRef, useEffect } from "react";
import './ImageBoxField.scss'; import "./ImageBoxField.scss";
import ImageIcon from "./ImageIcon"; import ImageIcon from "./ImageIcon";
import ImageCancelIcon from "./ImageCancelIcon"; import ImageCancelIcon from "./ImageCancelIcon";
import { getNestedValue } from "../../../utils/getNestedValue"; import { getNestedValue } from "../../../utils/getNestedValue";
@ -8,7 +8,6 @@ import { generateImagePreview } from "./generateImagePreview";
// Helper function to generate image preview from a File // Helper function to generate image preview from a File
const ImageBoxField = ({ name }: any) => { const ImageBoxField = ({ name }: any) => {
const formik = useFormikContext<any>(); const formik = useFormikContext<any>();
const value = getNestedValue(formik.values, name); const value = getNestedValue(formik.values, name);
@ -21,7 +20,7 @@ const ImageBoxField = ({ name }: any) => {
useEffect(() => { useEffect(() => {
if (value instanceof File) { if (value instanceof File) {
generateImagePreview(value, setImagePreview); generateImagePreview(value, setImagePreview);
} else if (typeof value === 'string') { } else if (typeof value === "string") {
setImagePreview(value); setImagePreview(value);
} else { } else {
setImagePreview(null); setImagePreview(null);
@ -57,13 +56,14 @@ const ImageBoxField = ({ name }: any) => {
<div className="ImageHeader"> <div className="ImageHeader">
{imagePreview ? ( {imagePreview ? (
<> <>
<ImageCancelIcon onClick={handleCancel} className="ImageCancelIcon" /> <ImageCancelIcon
onClick={handleCancel}
className="ImageCancelIcon"
/>
<ImageIcon onClick={handleButtonClick} className="ImageBoxIcon" /> <ImageIcon onClick={handleButtonClick} className="ImageBoxIcon" />
</> </>
) : ( ) : (
<div className="VisibleHidden"> <div className="VisibleHidden">hidden</div>
hidden
</div>
)} )}
</div> </div>
<div className="ImageBox"> <div className="ImageBox">

View File

@ -1,27 +1,18 @@
import React from 'react'; import React from "react";
interface ImageCancelIconProps extends React.HTMLAttributes<HTMLDivElement> { interface ImageCancelIconProps extends React.HTMLAttributes<HTMLDivElement> {}
}
const ImageCancelIcon: React.FC<ImageCancelIconProps> = (props) => { const ImageCancelIcon: React.FC<ImageCancelIconProps> = (props) => {
return ( return (
<div {...props}> <div {...props}>
<svg <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path <path
d="M7 5.44469L12.4447 0L14 1.55531L8.55531 7L14 12.4447L12.4436 14L6.9989 8.55531L1.55531 14L0 12.4436L5.44469 6.9989L0 1.55421L1.55531 0.00109986L7 5.44469Z" d="M7 5.44469L12.4447 0L14 1.55531L8.55531 7L14 12.4447L12.4436 14L6.9989 8.55531L1.55531 14L0 12.4436L5.44469 6.9989L0 1.55421L1.55531 0.00109986L7 5.44469Z"
fill="#515B73" fill="#515B73"
/> />
</svg> </svg>
</div> </div>
); );
} };
export default ImageCancelIcon; export default ImageCancelIcon;

View File

@ -1,17 +1,11 @@
import React from 'react'; import React from "react";
interface ImageIconProps extends React.HTMLAttributes<HTMLDivElement> { interface ImageIconProps extends React.HTMLAttributes<HTMLDivElement> {}
}
const ImageIcon: React.FC<ImageIconProps> = (props) => { const ImageIcon: React.FC<ImageIconProps> = (props) => {
return ( return (
<div {...props}> <div {...props}>
<svg <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path <path
d="M11.25 5.625C11.25 7.11684 10.6574 8.54758 9.60248 9.60248C8.54758 10.6574 7.11684 11.25 5.625 11.25C4.13316 11.25 2.70242 10.6574 1.64752 9.60248C0.592632 8.54758 0 7.11684 0 5.625C0 4.13316 0.592632 2.70242 1.64752 1.64752C2.70242 0.592632 4.13316 0 5.625 0C7.11684 0 8.54758 0.592632 9.60248 1.64752C10.6574 2.70242 11.25 4.13316 11.25 5.625ZM6.25 3.125C6.25 2.95924 6.18415 2.80027 6.06694 2.68306C5.94973 2.56585 5.79076 2.5 5.625 2.5C5.45924 2.5 5.30027 2.56585 5.18306 2.68306C5.06585 2.80027 5 2.95924 5 3.125V5H3.125C2.95924 5 2.80027 5.06585 2.68306 5.18306C2.56585 5.30027 2.5 5.45924 2.5 5.625C2.5 5.79076 2.56585 5.94973 2.68306 6.06694C2.80027 6.18415 2.95924 6.25 3.125 6.25H5V8.125C5 8.29076 5.06585 8.44973 5.18306 8.56694C5.30027 8.68415 5.45924 8.75 5.625 8.75C5.79076 8.75 5.94973 8.68415 6.06694 8.56694C6.18415 8.44973 6.25 8.29076 6.25 8.125V6.25H8.125C8.29076 6.25 8.44973 6.18415 8.56694 6.06694C8.68415 5.94973 8.75 5.79076 8.75 5.625C8.75 5.45924 8.68415 5.30027 8.56694 5.18306C8.44973 5.06585 8.29076 5 8.125 5H6.25V3.125ZM16.25 3.75H12.2413C12.1187 3.3183 11.9542 2.89964 11.75 2.5H16.25C17.2446 2.5 18.1984 2.89509 18.9017 3.59835C19.6049 4.30161 20 5.25544 20 6.25V16.25C20 17.2446 19.6049 18.1984 18.9017 18.9017C18.1984 19.6049 17.2446 20 16.25 20H6.25C5.25544 20 4.30161 19.6049 3.59835 18.9017C2.89509 18.1984 2.5 17.2446 2.5 16.25V11.75C2.89667 11.9533 3.31333 12.1171 3.75 12.2413V16.25C3.75 16.7162 3.8775 17.1525 4.1 17.525L9.93625 11.79C10.2869 11.4457 10.7586 11.2528 11.25 11.2528C11.7414 11.2528 12.2131 11.4457 12.5637 11.79L18.4012 17.525C18.6298 17.139 18.7502 16.6986 18.75 16.25V6.25C18.75 5.58696 18.4866 4.95107 18.0178 4.48223C17.5489 4.01339 16.913 3.75 16.25 3.75ZM16.25 8.125C16.25 8.37123 16.2015 8.61505 16.1073 8.84253C16.013 9.07002 15.8749 9.27672 15.7008 9.45083C15.5267 9.62494 15.32 9.76305 15.0925 9.85727C14.865 9.9515 14.6212 10 14.375 10C14.1288 10 13.885 9.9515 13.6575 9.85727C13.43 9.76305 13.2233 9.62494 13.0492 9.45083C12.8751 9.27672 12.737 9.07002 12.6427 8.84253C12.5485 8.61505 12.5 8.37123 12.5 8.125C12.5 7.62772 12.6975 7.15081 13.0492 6.79917C13.4008 6.44754 13.8777 6.25 14.375 6.25C14.8723 6.25 15.3492 6.44754 15.7008 6.79917C16.0525 7.15081 16.25 7.62772 16.25 8.125ZM15 8.125C15 7.95924 14.9342 7.80027 14.8169 7.68306C14.6997 7.56585 14.5408 7.5 14.375 7.5C14.2092 7.5 14.0503 7.56585 13.9331 7.68306C13.8158 7.80027 13.75 7.95924 13.75 8.125C13.75 8.29076 13.8158 8.44973 13.9331 8.56694C14.0503 8.68415 14.2092 8.75 14.375 8.75C14.5408 8.75 14.6997 8.68415 14.8169 8.56694C14.9342 8.44973 15 8.29076 15 8.125ZM4.985 18.4075C5.36871 18.6321 5.80538 18.7504 6.25 18.75H16.25C16.7125 18.75 17.1437 18.625 17.515 18.4075L11.6875 12.6825C11.5707 12.568 11.4136 12.5038 11.25 12.5038C11.0864 12.5038 10.9293 12.568 10.8125 12.6825L4.985 18.4075Z" d="M11.25 5.625C11.25 7.11684 10.6574 8.54758 9.60248 9.60248C8.54758 10.6574 7.11684 11.25 5.625 11.25C4.13316 11.25 2.70242 10.6574 1.64752 9.60248C0.592632 8.54758 0 7.11684 0 5.625C0 4.13316 0.592632 2.70242 1.64752 1.64752C2.70242 0.592632 4.13316 0 5.625 0C7.11684 0 8.54758 0.592632 9.60248 1.64752C10.6574 2.70242 11.25 4.13316 11.25 5.625ZM6.25 3.125C6.25 2.95924 6.18415 2.80027 6.06694 2.68306C5.94973 2.56585 5.79076 2.5 5.625 2.5C5.45924 2.5 5.30027 2.56585 5.18306 2.68306C5.06585 2.80027 5 2.95924 5 3.125V5H3.125C2.95924 5 2.80027 5.06585 2.68306 5.18306C2.56585 5.30027 2.5 5.45924 2.5 5.625C2.5 5.79076 2.56585 5.94973 2.68306 6.06694C2.80027 6.18415 2.95924 6.25 3.125 6.25H5V8.125C5 8.29076 5.06585 8.44973 5.18306 8.56694C5.30027 8.68415 5.45924 8.75 5.625 8.75C5.79076 8.75 5.94973 8.68415 6.06694 8.56694C6.18415 8.44973 6.25 8.29076 6.25 8.125V6.25H8.125C8.29076 6.25 8.44973 6.18415 8.56694 6.06694C8.68415 5.94973 8.75 5.79076 8.75 5.625C8.75 5.45924 8.68415 5.30027 8.56694 5.18306C8.44973 5.06585 8.29076 5 8.125 5H6.25V3.125ZM16.25 3.75H12.2413C12.1187 3.3183 11.9542 2.89964 11.75 2.5H16.25C17.2446 2.5 18.1984 2.89509 18.9017 3.59835C19.6049 4.30161 20 5.25544 20 6.25V16.25C20 17.2446 19.6049 18.1984 18.9017 18.9017C18.1984 19.6049 17.2446 20 16.25 20H6.25C5.25544 20 4.30161 19.6049 3.59835 18.9017C2.89509 18.1984 2.5 17.2446 2.5 16.25V11.75C2.89667 11.9533 3.31333 12.1171 3.75 12.2413V16.25C3.75 16.7162 3.8775 17.1525 4.1 17.525L9.93625 11.79C10.2869 11.4457 10.7586 11.2528 11.25 11.2528C11.7414 11.2528 12.2131 11.4457 12.5637 11.79L18.4012 17.525C18.6298 17.139 18.7502 16.6986 18.75 16.25V6.25C18.75 5.58696 18.4866 4.95107 18.0178 4.48223C17.5489 4.01339 16.913 3.75 16.25 3.75ZM16.25 8.125C16.25 8.37123 16.2015 8.61505 16.1073 8.84253C16.013 9.07002 15.8749 9.27672 15.7008 9.45083C15.5267 9.62494 15.32 9.76305 15.0925 9.85727C14.865 9.9515 14.6212 10 14.375 10C14.1288 10 13.885 9.9515 13.6575 9.85727C13.43 9.76305 13.2233 9.62494 13.0492 9.45083C12.8751 9.27672 12.737 9.07002 12.6427 8.84253C12.5485 8.61505 12.5 8.37123 12.5 8.125C12.5 7.62772 12.6975 7.15081 13.0492 6.79917C13.4008 6.44754 13.8777 6.25 14.375 6.25C14.8723 6.25 15.3492 6.44754 15.7008 6.79917C16.0525 7.15081 16.25 7.62772 16.25 8.125ZM15 8.125C15 7.95924 14.9342 7.80027 14.8169 7.68306C14.6997 7.56585 14.5408 7.5 14.375 7.5C14.2092 7.5 14.0503 7.56585 13.9331 7.68306C13.8158 7.80027 13.75 7.95924 13.75 8.125C13.75 8.29076 13.8158 8.44973 13.9331 8.56694C14.0503 8.68415 14.2092 8.75 14.375 8.75C14.5408 8.75 14.6997 8.68415 14.8169 8.56694C14.9342 8.44973 15 8.29076 15 8.125ZM4.985 18.4075C5.36871 18.6321 5.80538 18.7504 6.25 18.75H16.25C16.7125 18.75 17.1437 18.625 17.515 18.4075L11.6875 12.6825C11.5707 12.568 11.4136 12.5038 11.25 12.5038C11.0864 12.5038 10.9293 12.568 10.8125 12.6825L4.985 18.4075Z"
fill="#515B73" fill="#515B73"
@ -19,9 +13,6 @@ const ImageIcon: React.FC<ImageIconProps> = (props) => {
</svg> </svg>
</div> </div>
); );
} };
export default ImageIcon; export default ImageIcon;

View File

@ -1,4 +1,7 @@
export const generateImagePreview = (file: File, setImagePreview: (result: string) => void) => { export const generateImagePreview = (
file: File,
setImagePreview: (result: string) => void,
) => {
const reader = new FileReader(); const reader = new FileReader();
reader.onloadend = () => { reader.onloadend = () => {
setImagePreview(reader.result as string); setImagePreview(reader.result as string);

View File

@ -1,36 +1,33 @@
import React, { useState, useMemo } from 'react'; import React, { useState, useMemo } from "react";
import { Select, Spin } from 'antd'; import { Select, Spin } from "antd";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { useDebounce } from '../../utils/useDebounce'; import { useDebounce } from "../../utils/useDebounce";
import { useGetAllTag } from '../../api/tags'; import { useGetAllTag } from "../../api/tags";
import { useFormikContext } from 'formik'; import { useFormikContext } from "formik";
const SelectTag: React.FC = () => { const SelectTag: React.FC = () => {
const [searchValue, setSearchValue] = useState<string>(''); const [searchValue, setSearchValue] = useState<string>("");
const [fieldValue, setFieldValue] = useState<string>(''); const [fieldValue, setFieldValue] = useState<string>("");
const formik = useFormikContext<any>() const formik = useFormikContext<any>();
const handleChange = (value: string[]) => { const handleChange = (value: string[]) => {
console.log(value); console.log(value);
formik.setFieldValue("tags",value) formik.setFieldValue("tags", value);
setSearchValue(''); setSearchValue("");
setFieldValue(''); setFieldValue("");
}; };
const handleSearch = useDebounce((value: string) => { const handleSearch = useDebounce((value: string) => {
setSearchValue(value); setSearchValue(value);
}); });
const handleFieldChange = (value: string) => { const handleFieldChange = (value: string) => {
setFieldValue(value); setFieldValue(value);
}; };
const handleBlur = () => { const handleBlur = () => {
setSearchValue(''); setSearchValue("");
setFieldValue(''); setFieldValue("");
}; };
const { data, isLoading } = useGetAllTag({ const { data, isLoading } = useGetAllTag({
@ -39,21 +36,21 @@ const SelectTag: React.FC = () => {
const [t] = useTranslation(); const [t] = useTranslation();
const options = data?.data ?? [] const options = data?.data ?? [];
const additionalData = options?.length < 1 && searchValue.length > 1 && !isLoading ? [{id:`${searchValue}`,name:searchValue}] :[]; const additionalData =
options?.length < 1 && searchValue.length > 1 && !isLoading
? [{ id: `${searchValue}`, name: searchValue }]
: [];
return ( return (
<div className='SelectTag'> <div className="SelectTag">
<label htmlFor="">{t("models.tag")}</label>
<label htmlFor="">
{t("models.tag")}
</label>
<Select <Select
mode="multiple" mode="multiple"
allowClear allowClear
style={{ width: '100%' ,height:"40px"}} style={{ width: "100%", height: "40px" }}
placeholder="" placeholder=""
fieldNames={{ label: 'name', value: 'id' }} fieldNames={{ label: "name", value: "id" }}
onChange={handleChange} onChange={handleChange}
options={[...options, ...additionalData]} options={[...options, ...additionalData]}
filterOption={false} filterOption={false}

View File

@ -11,14 +11,14 @@ interface Props {
options: Option[]; options: Option[];
placeholder: string; placeholder: string;
onSelect?: (option: Option) => void; onSelect?: (option: Option) => void;
withIcon?:boolean withIcon?: boolean;
} }
const SearchFieldWithSelect: React.FC<Props> = ({ const SearchFieldWithSelect: React.FC<Props> = ({
options, options,
placeholder, placeholder,
onSelect, onSelect,
withIcon=false withIcon = false,
}) => { }) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [selectedOption, setSelectedOption] = useState<Option | null>(null); const [selectedOption, setSelectedOption] = useState<Option | null>(null);

View File

@ -1,11 +1,11 @@
import React, { useState } from 'react' import React, { useState } from "react";
import { useTranslation } from 'react-i18next' import { useTranslation } from "react-i18next";
import { Divider, Select } from 'antd'; import { Divider, Select } from "antd";
import SearchFieldWithSelect from '../../Components/DataTable/SearchFieldWithSelect'; import SearchFieldWithSelect from "../../Components/DataTable/SearchFieldWithSelect";
import { translateOptions } from '../../utils/translatedOptions'; import { translateOptions } from "../../utils/translatedOptions";
import { search_array } from '../../Routes'; import { search_array } from "../../Routes";
import { useFilterStateState } from '../../zustand/Filter'; import { useFilterStateState } from "../../zustand/Filter";
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from "react-router-dom";
import { TbReorder } from "react-icons/tb"; import { TbReorder } from "react-icons/tb";
const OrderBySelect = () => { const OrderBySelect = () => {
@ -13,7 +13,7 @@ const OrderBySelect = () => {
const { Filter, setFilter } = useFilterStateState(); const { Filter, setFilter } = useFilterStateState();
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const type_param = searchParams.get('type'); const type_param = searchParams.get("type");
const [type, setType] = useState(type_param); const [type, setType] = useState(type_param);
const translateArray = translateOptions(search_array, t); const translateArray = translateOptions(search_array, t);
const handleChange = (value: string) => { const handleChange = (value: string) => {
@ -23,7 +23,7 @@ const OrderBySelect = () => {
{ name: value, index: Filter.length, select: true }, { name: value, index: Filter.length, select: true },
]); ]);
if (type_param) { if (type_param) {
searchParams.delete('type'); searchParams.delete("type");
setSearchParams(searchParams); setSearchParams(searchParams);
} }
setType(value); setType(value);
@ -33,12 +33,16 @@ const OrderBySelect = () => {
// type: type, // type: type,
// page: currentPage, // page: currentPage,
return ( return (
<div className='order_by_filter'> <div className="order_by_filter">
<Select <Select
className='order_by_select' className="order_by_select"
style={{ width: 200 }} style={{ width: 200 }}
size="large" size="large"
placeholder={<div><TbReorder className='addition_select_icon'/> {t("ترتيب حسب")} </div>} placeholder={
<div>
<TbReorder className="addition_select_icon" /> {t("ترتيب حسب")}{" "}
</div>
}
onChange={handleChange} onChange={handleChange}
options={[ options={[
{ value: "تصاعديا", label: t("تصاعديا") }, { value: "تصاعديا", label: t("تصاعديا") },
@ -48,7 +52,7 @@ const OrderBySelect = () => {
]} ]}
/> />
</div> </div>
) );
} };
export default OrderBySelect export default OrderBySelect;

View File

@ -1,19 +1,18 @@
import React, { useState } from 'react' import React, { useState } from "react";
import { useTranslation } from 'react-i18next' import { useTranslation } from "react-i18next";
import { Divider, Select } from 'antd'; import { Divider, Select } from "antd";
import SearchFieldWithSelect from '../../Components/DataTable/SearchFieldWithSelect'; import SearchFieldWithSelect from "../../Components/DataTable/SearchFieldWithSelect";
import { translateOptions } from '../../utils/translatedOptions'; import { translateOptions } from "../../utils/translatedOptions";
import { search_array } from '../../Routes'; import { search_array } from "../../Routes";
import { useFilterStateState } from '../../zustand/Filter'; import { useFilterStateState } from "../../zustand/Filter";
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from "react-router-dom";
const PaginationColumn = () => { const PaginationColumn = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { Filter, setFilter } = useFilterStateState(); const { Filter, setFilter } = useFilterStateState();
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const type_param = searchParams.get('type'); const type_param = searchParams.get("type");
const [type, setType] = useState(type_param); const [type, setType] = useState(type_param);
const translateArray = translateOptions(search_array, t); const translateArray = translateOptions(search_array, t);
const handleChange = (value: string) => { const handleChange = (value: string) => {
@ -23,7 +22,7 @@ const PaginationColumn = () => {
{ name: value, index: Filter.length, select: true }, { name: value, index: Filter.length, select: true },
]); ]);
if (type_param) { if (type_param) {
searchParams.delete('type'); searchParams.delete("type");
setSearchParams(searchParams); setSearchParams(searchParams);
} }
setType(value); setType(value);
@ -33,9 +32,9 @@ const PaginationColumn = () => {
// type: type, // type: type,
// page: currentPage, // page: currentPage,
return ( return (
<div className='pagination_column'> <div className="pagination_column">
<Select <Select
className='pagination_select' className="pagination_select"
style={{ width: 70 }} style={{ width: 70 }}
size="large" size="large"
defaultValue={"10"} defaultValue={"10"}
@ -49,7 +48,7 @@ const PaginationColumn = () => {
]} ]}
/> />
</div> </div>
) );
} };
export default PaginationColumn export default PaginationColumn;

View File

@ -26,11 +26,28 @@ const NavBarRightSide = () => {
}; };
return ( return (
<article> <article>
<span className="header_icons"> <span className="header_icons">
<TooltipComp note="change_language" color="#E0E0E0" icon={<TbWorld size={25}/>}/> <TooltipComp
<TooltipComp note="add" color="#E0E0E0" icon={<CiCirclePlus size={25}/>}/> note="change_language"
<TooltipComp className="NotificationsIcon" note="notification" color="#E0E0E0" icon={< > <IoIosNotificationsOutline size={25} /> </>}/> color="#E0E0E0"
icon={<TbWorld size={25} />}
/>
<TooltipComp
note="add"
color="#E0E0E0"
icon={<CiCirclePlus size={25} />}
/>
<TooltipComp
className="NotificationsIcon"
note="notification"
color="#E0E0E0"
icon={
<>
{" "}
<IoIosNotificationsOutline size={25} />{" "}
</>
}
/>
</span> </span>
<div className="header_profile"> <div className="header_profile">
{/* <span> {/* <span>

View File

@ -1,12 +1,21 @@
import React from 'react' import React from "react";
import { Tooltip } from "antd"; import { Tooltip } from "antd";
import { ModalEnum } from '../../../enums/Model'; import { ModalEnum } from "../../../enums/Model";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { CiCirclePlus } from 'react-icons/ci'; import { CiCirclePlus } from "react-icons/ci";
import useModalHandler from '../../../utils/useModalHandler'; import useModalHandler from "../../../utils/useModalHandler";
const TooltipComp = ({note,color,icon,className=""}:{note:string,color:string,icon:any,className?:string}) => {
const TooltipComp = ({
note,
color,
icon,
className = "",
}: {
note: string;
color: string;
icon: any;
className?: string;
}) => {
const [t] = useTranslation(); const [t] = useTranslation();
const { handel_open_model } = useModalHandler(); const { handel_open_model } = useModalHandler();
@ -17,19 +26,13 @@ const TooltipComp = ({note,color,icon,className=""}:{note:string,color:string,ic
<div className={className}> <div className={className}>
<Tooltip <Tooltip
placement="top" placement="top"
title={ title={<div onClick={handleEdit}>{t(`header.${note}`)}</div>}
<div onClick={handleEdit}>
{t(`header.${note}`)}
</div>
}
color={color} color={color}
> >
<div className={`gear `}> <div className={`gear `}>{icon}</div>
{icon}
</div>
</Tooltip> </Tooltip>
</div> </div>
) );
} };
export default TooltipComp export default TooltipComp;

View File

@ -21,17 +21,23 @@ export const MenuItem = ({ item, location, index, isOpen }: any) => {
> >
<i>{item.icon}</i> <i>{item.icon}</i>
{/* Conditionally render the text based on sidebar width */} {/* Conditionally render the text based on sidebar width */}
<span style={{ display: isOpen === false ? 'none' : 'inline' }}> <span style={{ display: isOpen === false ? "none" : "inline" }}>
{t(item.text)} {t(item.text)}
</span> </span>
{item?.children && ( {item?.children && (
<> <>
{isDropdownOpen ? ( {isDropdownOpen ? (
<div className="DropDownIcon" onClick={() => handleDropdown(index)}> <div
className="DropDownIcon"
onClick={() => handleDropdown(index)}
>
<MdExpandLess /> <MdExpandLess />
</div> </div>
) : ( ) : (
<div className="DropDownIcon" onClick={() => handleDropdown(index)}> <div
className="DropDownIcon"
onClick={() => handleDropdown(index)}
>
<MdExpandMore /> <MdExpandMore />
</div> </div>
)} )}

File diff suppressed because one or more lines are too long

View File

@ -1,11 +1,15 @@
import React from 'react'; import React from "react";
import Lottie from 'lottie-react'; // Default import import Lottie from "lottie-react"; // Default import
import animationData from './Loading.json'; // Import your Lottie JSON animation import animationData from "./Loading.json"; // Import your Lottie JSON animation
const LoadingLottie = () => { const LoadingLottie = () => {
return ( return (
<div className="cc"> <div className="cc">
<Lottie animationData={animationData} loop={true} style={{ width: 300, height: 300 }} /> <Lottie
animationData={animationData}
loop={true}
style={{ width: 300, height: 300 }}
/>
</div> </div>
); );
}; };

File diff suppressed because one or more lines are too long

View File

@ -1,11 +1,15 @@
import React from 'react'; import React from "react";
import Lottie from 'lottie-react'; // Default import import Lottie from "lottie-react"; // Default import
import animationData from './NotFound.json'; // Import your Lottie JSON animation import animationData from "./NotFound.json"; // Import your Lottie JSON animation
const NotFoundLottie = () => { const NotFoundLottie = () => {
return ( return (
<div className="cc"> <div className="cc">
<Lottie animationData={animationData} loop={true} style={{ width: 300, height: 300 }} /> <Lottie
animationData={animationData}
loop={true}
style={{ width: 300, height: 300 }}
/>
</div> </div>
); );
}; };

View File

@ -48,11 +48,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
{canDelete && ( {canDelete && (
// <Tooltip placement="top" title={t(deleteTooltipTitle)} color="#E0E0E0"> // <Tooltip placement="top" title={t(deleteTooltipTitle)} color="#E0E0E0">
<GoTrash <GoTrash onClick={onDelete} size={22} style={{ color: "#A098AE" }} />
onClick={onDelete}
size={22}
style={{ color: "#A098AE" }}
/>
// </Tooltip> // </Tooltip>
)} )}
{canShow && ( {canShow && (

View File

@ -104,7 +104,6 @@ const SearchField = ({
console.log(AllPagesOption); console.log(AllPagesOption);
console.log(option, "option"); console.log(option, "option");
return ( return (
<div className="ValidationField w-100"> <div className="ValidationField w-100">
<ValidationFieldLabel <ValidationFieldLabel

View File

@ -21,7 +21,6 @@
} }
} }
//// upload //// upload
.ant-upload-select { .ant-upload-select {
width: 100%; width: 100%;
@ -35,7 +34,6 @@
align-items: center; align-items: center;
} }
//// number input //// number input
/// ///
.ant-input-number-affix-wrapper-lg { .ant-input-number-affix-wrapper-lg {
@ -50,13 +48,11 @@
height: var(--fieldHeight); height: var(--fieldHeight);
} }
//// date picker //// date picker
.ant-picker-large { .ant-picker-large {
height: var(--fieldHeight); height: var(--fieldHeight);
} }
/// text area /// text area
/// ///
@ -64,10 +60,8 @@
.ant-form-item-control-input-content { .ant-form-item-control-input-content {
min-height: 120px; min-height: 120px;
} }
} }
.ant-input-textarea-affix-wrapper.ant-input-affix-wrapper { .ant-input-textarea-affix-wrapper.ant-input-affix-wrapper {
height: 120px; height: 120px;
} }

View File

@ -68,9 +68,9 @@ const DeleteModels: React.FC<ModalFormProps> = ({
open={isOpen === ModelEnum} open={isOpen === ModelEnum}
onCancel={handleCancel} onCancel={handleCancel}
> >
<header>{t("practical.delete_this_item")} <header>
{t("practical.delete_this_item")}
<MdCancel onClick={handleCancel} /> <MdCancel onClick={handleCancel} />
</header> </header>
<main className="main_modal"> <main className="main_modal">

View File

@ -1,17 +1,23 @@
import { useState } from 'react' import { useState } from "react";
import { useTranslation } from 'react-i18next' import { useTranslation } from "react-i18next";
import { Divider } from 'antd'; import { Divider } from "antd";
import SearchFieldWithSelect from '../../Components/DataTable/SearchFieldWithSelect'; import SearchFieldWithSelect from "../../Components/DataTable/SearchFieldWithSelect";
import { translateOptions } from '../../utils/translatedOptions'; import { translateOptions } from "../../utils/translatedOptions";
import { search_array } from '../../Routes'; import { search_array } from "../../Routes";
import PaginationColumn from '../../Components/Filter/PaginationColumn'; import PaginationColumn from "../../Components/Filter/PaginationColumn";
import OrderBySelect from '../../Components/Filter/OrderBySelect'; import OrderBySelect from "../../Components/Filter/OrderBySelect";
import LayoutFilterModal from './LayoutFilterModal'; import LayoutFilterModal from "./LayoutFilterModal";
import { BiFilterAlt } from 'react-icons/bi'; import { BiFilterAlt } from "react-icons/bi";
import { MdKeyboardArrowDown } from "react-icons/md"; import { MdKeyboardArrowDown } from "react-icons/md";
import SearchField from '../../Components/DataTable/SearchField'; import SearchField from "../../Components/DataTable/SearchField";
const FilterLayout = ({filterTitle, sub_children}:{filterTitle:string,sub_children:any}) => { const FilterLayout = ({
filterTitle,
sub_children,
}: {
filterTitle: string;
sub_children: any;
}) => {
const { t } = useTranslation(); const { t } = useTranslation();
const translateArray = translateOptions(search_array, t); const translateArray = translateOptions(search_array, t);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@ -20,25 +26,30 @@ const FilterLayout = ({filterTitle, sub_children}:{filterTitle:string,sub_childr
// page: currentPage, // page: currentPage,
return ( return (
<div className='filter_header'> <div className="filter_header">
<div className='filter_header_top'> <div className="filter_header_top">
<h4>{t(filterTitle)}</h4> <h4>{t(filterTitle)}</h4>
<div className='filter_and_order_by'> <div className="filter_and_order_by">
<span> <span>
<LayoutFilterModal <LayoutFilterModal
ModelClassName='filter_model_direction' ModelClassName="filter_model_direction"
children={<div className='model_sub_children'>{sub_children}</div>} children={
isOpen={isOpen} setIsOpen={setIsOpen} <div className="model_sub_children">{sub_children}</div>
}
isOpen={isOpen}
setIsOpen={setIsOpen}
/> />
<div className='filter_button' onClick={()=> setIsOpen(true)}> <div className="filter_button" onClick={() => setIsOpen(true)}>
<span> <span>
<BiFilterAlt className='addition_select_icon'/> <BiFilterAlt className="addition_select_icon" />
{t("ترتيب حسب")} {t("ترتيب حسب")}
</span> </span>
<MdKeyboardArrowDown /> <MdKeyboardArrowDown />
</div> </div>
</span> </span>
<span><OrderBySelect/></span> <span>
<OrderBySelect />
</span>
</div> </div>
</div> </div>
<Divider /> <Divider />
@ -49,14 +60,11 @@ const FilterLayout = ({filterTitle, sub_children}:{filterTitle:string,sub_childr
<p>{t("ادخالات")}</p> <p>{t("ادخالات")}</p>
</span> </span>
<div className="header_search"> <div className="header_search">
<SearchField <SearchField searchBy="" placeholder={t("practical.search_here")} />
searchBy=''
placeholder={t("practical.search_here")}
/>
</div> </div>
</div> </div>
</div> </div>
) );
} };
export default FilterLayout export default FilterLayout;

View File

@ -16,8 +16,8 @@ interface LayoutFilterModalProps {
ModelClassName?: string; ModelClassName?: string;
width?: string; width?: string;
isLoading?: boolean; isLoading?: boolean;
isOpen:any, isOpen: any;
setIsOpen:any setIsOpen: any;
} }
const LayoutFilterModal = ({ const LayoutFilterModal = ({
@ -30,7 +30,7 @@ const LayoutFilterModal = ({
width = "28vw", width = "28vw",
isLoading = false, isLoading = false,
setIsOpen, setIsOpen,
isOpen isOpen,
}: LayoutFilterModalProps) => { }: LayoutFilterModalProps) => {
const { setObjectToEdit } = useObjectToEdit(); const { setObjectToEdit } = useObjectToEdit();
// useEffect(() => { // useEffect(() => {
@ -46,9 +46,9 @@ const LayoutFilterModal = ({
setObjectToEdit({}); setObjectToEdit({});
}; };
const handleOpen = () => { const handleOpen = () => {
setIsOpen(true) setIsOpen(true);
setObjectToEdit({}) setObjectToEdit({});
} };
const [t] = useTranslation(); const [t] = useTranslation();
return ( return (
@ -69,16 +69,18 @@ const LayoutFilterModal = ({
initialValues={getInitialValues} initialValues={getInitialValues}
validationSchema={getValidationSchema} validationSchema={getValidationSchema}
> >
<header> <header>{t("models.filter")}</header>
{t("models.filter")}
</header>
<Divider /> <Divider />
<main className="main_modal"> <main className="main_modal">
{isLoading ? <SpinContainer /> : children} {isLoading ? <SpinContainer /> : children}
<Divider /> <Divider />
<div className="buttons"> <div className="buttons">
<div className="back_button pointer" style={{width:"7vw"}} onClick={handleCancel}> <div
className="back_button pointer"
style={{ width: "7vw" }}
onClick={handleCancel}
>
{t("practical.reset")} {t("practical.reset")}
</div> </div>
<button <button

View File

@ -16,13 +16,13 @@ const PageHeader = ({
ModelAbility, ModelAbility,
pageTitle, pageTitle,
openModel = true, openModel = true,
locationToNavigate locationToNavigate,
}: { }: {
canAdd:any, canAdd: any;
ModelAbility:any, ModelAbility: any;
pageTitle:string, pageTitle: string;
openModel?:boolean, openModel?: boolean;
locationToNavigate?: string | any locationToNavigate?: string | any;
}) => { }) => {
const navigate = useNavigate(); const navigate = useNavigate();
const { handel_open_model } = useModalHandler(); const { handel_open_model } = useModalHandler();
@ -37,19 +37,25 @@ const PageHeader = ({
navigate(deletePathSegments(location.pathname, PrevPath)); navigate(deletePathSegments(location.pathname, PrevPath));
}; };
const handleNavigateToPage = (location: string) => { const handleNavigateToPage = (location: string) => {
navigate(location) navigate(location);
} };
return ( return (
<div className="page_header"> <div className="page_header">
<header className="d-flex justify-content-between"> <header className="d-flex justify-content-between">
<span className="page_header_links" onClick={handelNavigate}> <span className="page_header_links" onClick={handelNavigate}>
<h1 className="page_title">{t(`sidebar.${pageTitle}`)}</h1> <h1 className="page_title">{t(`sidebar.${pageTitle}`)}</h1>
<span className="page_links"><MdOutlineArrowForwardIos /> {PageTitle}</span> <span className="page_links">
<MdOutlineArrowForwardIos /> {PageTitle}
</span>
</span> </span>
{canAdd && ( {canAdd && (
<div className="Selects"> <div className="Selects">
<button <button
onClick={() => openModel ? handel_open_model(ModelAbility): handleNavigateToPage(locationToNavigate)} onClick={() =>
openModel
? handel_open_model(ModelAbility)
: handleNavigateToPage(locationToNavigate)
}
className="add_button" className="add_button"
> >
<BsPlusCircleFill /> <BsPlusCircleFill />
@ -57,7 +63,6 @@ const PageHeader = ({
</button> </button>
</div> </div>
)} )}
</header> </header>
</div> </div>
); );

View File

@ -1,13 +1,12 @@
import React, { lazy, Suspense } from "react"; import React, { lazy, Suspense } from "react";
import { import { useAddKeyToData, Table, useTranslation, usePagination } from ".";
useAddKeyToData,
Table,
useTranslation,
usePagination,
} from ".";
import { DataTableProps } from "../../../types/Table"; import { DataTableProps } from "../../../types/Table";
const NotFoundLottie = React.lazy(() => import("../../../Components/Lottie/NotFound/NotFoundLottie")); const NotFoundLottie = React.lazy(
const LoadingLottie = React.lazy(() => import("../../../Components/Lottie/Loading/LoadingLottie")); () => import("../../../Components/Lottie/NotFound/NotFoundLottie"),
);
const LoadingLottie = React.lazy(
() => import("../../../Components/Lottie/Loading/LoadingLottie"),
);
const DataTable: React.FC<DataTableProps> = ({ const DataTable: React.FC<DataTableProps> = ({
response, response,
@ -34,21 +33,20 @@ const DataTable: React.FC<DataTableProps> = ({
className="DataTable" className="DataTable"
loading={{ loading={{
spinning: isLoading || isRefetching, spinning: isLoading || isRefetching,
indicator:<Suspense fallback={<></>}> indicator: (
<Suspense fallback={<></>}>
<LoadingLottie /> <LoadingLottie />
</Suspense> , </Suspense>
),
size: "large", size: "large",
}} }}
locale={{ locale={{
emptyText: ( emptyText:
isLoading || isRefetching ? isLoading || isRefetching ? (
<></> <></>
: ) : (
<Suspense fallback={<></>}> <Suspense fallback={<></>}>
<NotFoundLottie <NotFoundLottie />
/>
</Suspense> </Suspense>
), ),
}} }}
@ -57,8 +55,7 @@ const DataTable: React.FC<DataTableProps> = ({
onChange: handlePageChange, onChange: handlePageChange,
nextIcon: <>{t("practical.next")}</>, nextIcon: <>{t("practical.next")}</>,
prevIcon: <> {t("practical.prev")} </>, prevIcon: <> {t("practical.prev")} </>,
className:"pagination_antd" className: "pagination_antd",
}} }}
{...props} {...props}
/> />

View File

@ -3,9 +3,4 @@ import { useAddKeyToData } from "../../../Hooks/useAddKeyToData";
import usePagination from "../usePagination"; import usePagination from "../usePagination";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
export { export { Table, useAddKeyToData, usePagination, useTranslation };
Table,
useAddKeyToData,
usePagination,
useTranslation,
};

View File

@ -14,7 +14,9 @@ const Layout = ({
return ( return (
<ProtectedRouteProvider className="Layout"> <ProtectedRouteProvider className="Layout">
<main className={`${className} ${isOpen ?"Layout_Body":"Layout_Body side_bar_close" }`}> <main
className={`${className} ${isOpen ? "Layout_Body" : "Layout_Body side_bar_close"}`}
>
<NavBar isOpen={isOpen} /> <NavBar isOpen={isOpen} />
<div className="Layout_Children">{children}</div> <div className="Layout_Children">{children}</div>
</main> </main>

View File

@ -13,7 +13,13 @@ import { CiMenuBurger, CiSettings } from "react-icons/ci";
import { IoIosMenu } from "react-icons/io"; import { IoIosMenu } from "react-icons/io";
import { HiMenuAlt2, HiMenuAlt3 } from "react-icons/hi"; import { HiMenuAlt2, HiMenuAlt3 } from "react-icons/hi";
const SideBar = ({isOpen,setIsOpen}:{isOpen:boolean,setIsOpen:any}) => { const SideBar = ({
isOpen,
setIsOpen,
}: {
isOpen: boolean;
setIsOpen: any;
}) => {
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const { logout } = useAuthState(); const { logout } = useAuthState();
@ -21,7 +27,7 @@ const SideBar = ({isOpen,setIsOpen}:{isOpen:boolean,setIsOpen:any}) => {
const branch_name = getLocalStorage(BRANCH_OBJECT_KEY)?.name; const branch_name = getLocalStorage(BRANCH_OBJECT_KEY)?.name;
const toggleSidebar = () => { const toggleSidebar = () => {
setIsOpen((prev: boolean) => prev === true ? false : true); setIsOpen((prev: boolean) => (prev === true ? false : true));
}; };
return ( return (
@ -31,7 +37,11 @@ const SideBar = ({isOpen,setIsOpen}:{isOpen:boolean,setIsOpen:any}) => {
<HiMenuAlt3 onClick={toggleSidebar} /> <HiMenuAlt3 onClick={toggleSidebar} />
</div> </div>
{/* <Divider /> */} {/* <Divider /> */}
<HiMenuAlt2 className="side_bar_close_menu" style={isOpen? {display:"none"}: {display:"inline"}} onClick={toggleSidebar} /> <HiMenuAlt2
className="side_bar_close_menu"
style={isOpen ? { display: "none" } : { display: "inline" }}
onClick={toggleSidebar}
/>
<div className="side_bar_links"> <div className="side_bar_links">
<p>{t("sidebar.main_menu")}</p> <p>{t("sidebar.main_menu")}</p>
{menuItems.map((item, index) => { {menuItems.map((item, index) => {
@ -49,7 +59,6 @@ const SideBar = ({isOpen,setIsOpen}:{isOpen:boolean,setIsOpen:any}) => {
/> />
); );
})} })}
</div> </div>
<div className="side_bar_setting"> <div className="side_bar_setting">
<p>{t("sidebar.setting")}</p> <p>{t("sidebar.setting")}</p>
@ -62,7 +71,8 @@ const SideBar = ({isOpen,setIsOpen}:{isOpen:boolean,setIsOpen:any}) => {
onClick={() => { onClick={() => {
logout(); logout();
navigate("/auth"); navigate("/auth");
}}> }}
>
<MdLogout /> <MdLogout />
<span>{t("sidebar.logout")}</span> <span>{t("sidebar.logout")}</span>
</div> </div>
@ -72,5 +82,3 @@ const SideBar = ({isOpen,setIsOpen}:{isOpen:boolean,setIsOpen:any}) => {
}; };
export default SideBar; export default SideBar;

View File

@ -1,5 +1,5 @@
import React from 'react' import React from "react";
import ValidationField from '../../../../Components/ValidationField/ValidationField' import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { Col, Row } from "reactstrap"; import { Col, Row } from "reactstrap";
const FilterForm = () => { const FilterForm = () => {
@ -9,17 +9,14 @@ const FilterForm = () => {
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} };
export default FilterForm export default FilterForm;

View File

@ -55,10 +55,12 @@ const TableHeader = () => {
<PageHeader <PageHeader
pageTitle="curriculum" pageTitle="curriculum"
ModelAbility={ModalEnum?.CURRICULUM_ADD} ModelAbility={ModalEnum?.CURRICULUM_ADD}
canAdd={canAddCurriculum}/> canAdd={canAddCurriculum}
/>
<FilterLayout <FilterLayout
sub_children={<FilterForm />} sub_children={<FilterForm />}
filterTitle="sidebar.curriculum"/> filterTitle="sidebar.curriculum"
/>
<Table /> <Table />
<AddModalForm /> <AddModalForm />
<EditModalForm /> <EditModalForm />

View File

@ -1,5 +1,5 @@
import React from 'react' import React from "react";
import ValidationField from '../../../../Components/ValidationField/ValidationField' import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { Col, Row } from "reactstrap"; import { Col, Row } from "reactstrap";
const FilterForm = () => { const FilterForm = () => {
@ -9,17 +9,14 @@ const FilterForm = () => {
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} };
export default FilterForm export default FilterForm;

View File

@ -25,14 +25,15 @@ const TableHeader = () => {
return ( return (
<div className="TableWithHeader"> <div className="TableWithHeader">
<Suspense fallback={<Spin />}> <Suspense fallback={<Spin />}>
<PageHeader <PageHeader
pageTitle="grade" pageTitle="grade"
ModelAbility={ModalEnum?.GRADE_ADD} ModelAbility={ModalEnum?.GRADE_ADD}
canAdd={canAddGrade}/> canAdd={canAddGrade}
/>
<FilterLayout <FilterLayout
sub_children={<FilterForm />} sub_children={<FilterForm />}
filterTitle="sidebar.grade"/> filterTitle="sidebar.grade"
/>
<Table /> <Table />
<AddModalForm /> <AddModalForm />
<EditModalForm /> <EditModalForm />

View File

@ -1,5 +1,5 @@
import React from 'react' import React from "react";
import ValidationField from '../../../../Components/ValidationField/ValidationField' import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { Col, Row } from "reactstrap"; import { Col, Row } from "reactstrap";
const FilterForm = () => { const FilterForm = () => {
@ -9,17 +9,14 @@ const FilterForm = () => {
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} };
export default FilterForm export default FilterForm;

View File

@ -13,7 +13,9 @@ import FilterForm from "./Model/FilterForm";
const Table = lazy(() => import("./Table")); const Table = lazy(() => import("./Table"));
const AddModalForm = lazy(() => import("./Model/AddModel")); const AddModalForm = lazy(() => import("./Model/AddModel"));
const EditModalForm = lazy(() => import("./Model/EditModel")); const EditModalForm = lazy(() => import("./Model/EditModel"));
const DeleteModalForm = lazy(() => import("../../../Layout/Dashboard/DeleteModels")); const DeleteModalForm = lazy(
() => import("../../../Layout/Dashboard/DeleteModels"),
);
const SearchField = lazy( const SearchField = lazy(
() => import("../../../Components/DataTable/SearchField"), () => import("../../../Components/DataTable/SearchField"),
); );
@ -21,9 +23,7 @@ const SearchField = lazy(
const TableHeader = () => { const TableHeader = () => {
const { handel_open_model } = useModalHandler(); const { handel_open_model } = useModalHandler();
const [t] = useTranslation(); const [t] = useTranslation();
useSetPageTitle( useSetPageTitle(t(`page_header.report`));
t(`page_header.report`),
);
const deleteMutation = useDeleteTag(); const deleteMutation = useDeleteTag();
return ( return (
<div className="TableWithHeader"> <div className="TableWithHeader">
@ -31,10 +31,12 @@ const TableHeader = () => {
<PageHeader <PageHeader
pageTitle="report" pageTitle="report"
ModelAbility={ModalEnum?.REPORT_ADD} ModelAbility={ModalEnum?.REPORT_ADD}
canAdd={canAddReport}/> canAdd={canAddReport}
/>
<FilterLayout <FilterLayout
sub_children={<FilterForm />} sub_children={<FilterForm />}
filterTitle="sidebar.report"/> filterTitle="sidebar.report"
/>
<Table /> <Table />
<DeleteModalForm <DeleteModalForm
deleteMutation={deleteMutation} deleteMutation={deleteMutation}

View File

@ -1,5 +1,5 @@
import React from 'react' import React from "react";
import ValidationField from '../../../../Components/ValidationField/ValidationField' import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { Col, Row } from "reactstrap"; import { Col, Row } from "reactstrap";
const FilterForm = () => { const FilterForm = () => {
@ -9,17 +9,14 @@ const FilterForm = () => {
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} };
export default FilterForm export default FilterForm;

View File

@ -4,7 +4,11 @@ import { ModalEnum } from "../../../enums/Model";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { lazy, Suspense } from "react"; import { lazy, Suspense } from "react";
import { Spin } from "antd"; import { Spin } from "antd";
import { canAddReport, canAddReseller, canAddTags } from "../../../utils/hasAbilityFn"; import {
canAddReport,
canAddReseller,
canAddTags,
} from "../../../utils/hasAbilityFn";
import useSetPageTitle from "../../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../../Hooks/useSetPageTitle";
import { useDeleteTag } from "../../../api/tags"; import { useDeleteTag } from "../../../api/tags";
import PageHeader from "../../../Layout/Dashboard/PageHeader"; import PageHeader from "../../../Layout/Dashboard/PageHeader";
@ -13,7 +17,9 @@ import FilterForm from "./Model/FilterForm";
const Table = lazy(() => import("./Table")); const Table = lazy(() => import("./Table"));
const AddModalForm = lazy(() => import("./Model/AddModel")); const AddModalForm = lazy(() => import("./Model/AddModel"));
const EditModalForm = lazy(() => import("./Model/EditModel")); const EditModalForm = lazy(() => import("./Model/EditModel"));
const DeleteModalForm = lazy(() => import("../../../Layout/Dashboard/DeleteModels")); const DeleteModalForm = lazy(
() => import("../../../Layout/Dashboard/DeleteModels"),
);
const SearchField = lazy( const SearchField = lazy(
() => import("../../../Components/DataTable/SearchField"), () => import("../../../Components/DataTable/SearchField"),
); );
@ -21,9 +27,7 @@ const SearchField = lazy(
const TableHeader = () => { const TableHeader = () => {
const { handel_open_model } = useModalHandler(); const { handel_open_model } = useModalHandler();
const [t] = useTranslation(); const [t] = useTranslation();
useSetPageTitle( useSetPageTitle(t(`page_header.reseller`));
t(`page_header.reseller`),
);
const deleteMutation = useDeleteTag(); const deleteMutation = useDeleteTag();
return ( return (
<div className="TableWithHeader"> <div className="TableWithHeader">
@ -31,10 +35,12 @@ const TableHeader = () => {
<PageHeader <PageHeader
pageTitle="reseller" pageTitle="reseller"
ModelAbility={ModalEnum?.RESELLER_ADD} ModelAbility={ModalEnum?.RESELLER_ADD}
canAdd={canAddReseller}/> canAdd={canAddReseller}
/>
<FilterLayout <FilterLayout
sub_children={<FilterForm />} sub_children={<FilterForm />}
filterTitle="sidebar.reseller"/> filterTitle="sidebar.reseller"
/>
<Table /> <Table />
<DeleteModalForm <DeleteModalForm
deleteMutation={deleteMutation} deleteMutation={deleteMutation}

View File

@ -4,7 +4,12 @@ import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState"; import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useModalState } from "../../../zustand/Modal"; import { useModalState } from "../../../zustand/Modal";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { canDeleteReseller, canDeleteUser, canEditReseller, canEditUser } from "../../../utils/hasAbilityFn"; import {
canDeleteReseller,
canDeleteUser,
canEditReseller,
canEditUser,
} from "../../../utils/hasAbilityFn";
import ActionButtons from "../../../Components/Table/ActionButtons"; import ActionButtons from "../../../Components/Table/ActionButtons";
export const useColumns = () => { export const useColumns = () => {

View File

@ -1,5 +1,5 @@
import React from 'react' import React from "react";
import ValidationField from '../../../../Components/ValidationField/ValidationField' import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { Col, Row } from "reactstrap"; import { Col, Row } from "reactstrap";
const FilterForm = () => { const FilterForm = () => {
@ -9,17 +9,14 @@ const FilterForm = () => {
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} };
export default FilterForm export default FilterForm;

View File

@ -5,37 +5,52 @@ import { useValidationValidationParamState } from "../../../../Components/Valida
const Form = ({ isEdit = false }: { isEdit?: boolean }) => { const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
const { ValidationParamState } = useValidationValidationParamState(); const { ValidationParamState } = useValidationValidationParamState();
const { const { GradeName, GradeCurrentPage } = ValidationParamState;
GradeName, GradeCurrentPage,
} = ValidationParamState;
const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({ const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({
name: GradeName, name: GradeName,
page: GradeCurrentPage page: GradeCurrentPage,
}); });
const GradeOption = Grade?.data ?? [] const GradeOption = Grade?.data ?? [];
const canChangeGradePage = !!Grade?.links?.next; const canChangeGradePage = !!Grade?.links?.next;
const GradePage = Grade?.meta?.currentPage; const GradePage = Grade?.meta?.currentPage;
const sex = [ const sex = [
{ name: "male", id: "male" }, { name: "male", id: "male" },
{name:"female" , id :"female"} { name: "female", id: "female" },
] ];
return ( return (
<Row className="w-100"> <Row className="w-100">
<Col> <Col>
<ValidationField name="first_name" placeholder="first_name" label="first_name" /> <ValidationField
<ValidationField name="last_name" placeholder="last_name" label="last_name" /> name="first_name"
<ValidationField name="username" placeholder="username" label="username" /> placeholder="first_name"
{!isEdit && label="first_name"
<ValidationField name="password" placeholder="password" label="password" /> />
} <ValidationField
name="last_name"
placeholder="last_name"
label="last_name"
/>
<ValidationField
name="username"
placeholder="username"
label="username"
/>
{!isEdit && (
<ValidationField
name="password"
placeholder="password"
label="password"
/>
)}
</Col> </Col>
<Col> <Col>
<ValidationField name="phone_number" placeholder="contact_number1" label="contact_number1" /> <ValidationField
name="phone_number"
placeholder="contact_number1"
label="contact_number1"
/>
<ValidationField <ValidationField
searchBy="GradeName" searchBy="GradeName"
name="grade_id" name="grade_id"
@ -46,10 +61,8 @@ const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
canChangePage={canChangeGradePage} canChangePage={canChangeGradePage}
PageName={"GradeCurrentPage"} PageName={"GradeCurrentPage"}
page={GradePage} page={GradePage}
/> />
<ValidationField type="Select" name="sex" option={sex} /> <ValidationField type="Select" name="sex" option={sex} />
</Col> </Col>
</Row> </Row>
); );

View File

@ -14,7 +14,6 @@ export const getInitialValues = (
grade_id: objectToEdit?.grade_id, grade_id: objectToEdit?.grade_id,
// image: objectToEdit?.image ?? "", // image: objectToEdit?.image ?? "",
sex: objectToEdit?.sex, sex: objectToEdit?.sex,
}; };
}; };

View File

@ -28,10 +28,12 @@ const TableHeader = () => {
<PageHeader <PageHeader
pageTitle="student" pageTitle="student"
ModelAbility={ModalEnum?.STUDENT_ADD} ModelAbility={ModalEnum?.STUDENT_ADD}
canAdd={canAddStudent}/> canAdd={canAddStudent}
/>
<FilterLayout <FilterLayout
sub_children={<FilterForm />} sub_children={<FilterForm />}
filterTitle="table.student"/> filterTitle="table.student"
/>
<Table /> <Table />
<AddModalForm /> <AddModalForm />
<EditModalForm /> <EditModalForm />

View File

@ -10,4 +10,3 @@ const App: React.FC = () => {
}; };
export default App; export default App;

View File

@ -65,7 +65,6 @@ export const useColumns = () => {
render: (_text, record) => record?.sex, render: (_text, record) => record?.sex,
}, },
{ {
title: "", title: "",

View File

@ -1,5 +1,5 @@
import React from 'react' import React from "react";
import ValidationField from '../../../../Components/ValidationField/ValidationField' import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { Col, Row } from "reactstrap"; import { Col, Row } from "reactstrap";
const FilterForm = () => { const FilterForm = () => {
@ -9,17 +9,14 @@ const FilterForm = () => {
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} };
export default FilterForm export default FilterForm;

View File

@ -13,7 +13,9 @@ import FilterForm from "./Model/FilterForm";
const Table = lazy(() => import("./Table")); const Table = lazy(() => import("./Table"));
const AddModalForm = lazy(() => import("./Model/AddModel")); const AddModalForm = lazy(() => import("./Model/AddModel"));
const EditModalForm = lazy(() => import("./Model/EditModel")); const EditModalForm = lazy(() => import("./Model/EditModel"));
const DeleteModalForm = lazy(() => import("../../../Layout/Dashboard/DeleteModels")); const DeleteModalForm = lazy(
() => import("../../../Layout/Dashboard/DeleteModels"),
);
const SearchField = lazy( const SearchField = lazy(
() => import("../../../Components/DataTable/SearchField"), () => import("../../../Components/DataTable/SearchField"),
); );
@ -21,9 +23,7 @@ const SearchField = lazy(
const TableHeader = () => { const TableHeader = () => {
const { handel_open_model } = useModalHandler(); const { handel_open_model } = useModalHandler();
const [t] = useTranslation(); const [t] = useTranslation();
useSetPageTitle( useSetPageTitle(t(`page_header.tags`));
t(`page_header.tags`),
);
const deleteMutation = useDeleteTag(); const deleteMutation = useDeleteTag();
return ( return (
<div className="TableWithHeader"> <div className="TableWithHeader">
@ -31,10 +31,12 @@ const TableHeader = () => {
<PageHeader <PageHeader
pageTitle="tags" pageTitle="tags"
ModelAbility={ModalEnum?.TAGS_ADD} ModelAbility={ModalEnum?.TAGS_ADD}
canAdd={canAddTags}/> canAdd={canAddTags}
/>
<FilterLayout <FilterLayout
sub_children={<FilterForm />} sub_children={<FilterForm />}
filterTitle="sidebar.tags"/> filterTitle="sidebar.tags"
/>
<Table /> <Table />
<DeleteModalForm <DeleteModalForm
deleteMutation={deleteMutation} deleteMutation={deleteMutation}

View File

@ -16,9 +16,12 @@ import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../../enums/params"; import { ParamsEnum } from "../../../enums/params";
import { useGetAllUnit, useUpdateUnitOrder } from "../../../api/unit"; import { useGetAllUnit, useUpdateUnitOrder } from "../../../api/unit";
const NotFoundLottie = React.lazy(() => import("../../../Components/Lottie/NotFound/NotFoundLottie")); const NotFoundLottie = React.lazy(
const LoadingLottie = React.lazy(() => import("../../../Components/Lottie/Loading/LoadingLottie" )); () => import("../../../Components/Lottie/NotFound/NotFoundLottie"),
);
const LoadingLottie = React.lazy(
() => import("../../../Components/Lottie/Loading/LoadingLottie"),
);
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useColumns } from "./useTableColumns"; import { useColumns } from "./useTableColumns";
@ -52,7 +55,6 @@ export const DragHandleUnit: React.FC = () => {
); );
}; };
interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> { interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
"data-row-key": string; "data-row-key": string;
} }
@ -96,7 +98,7 @@ const DrapableTable: React.FC = () => {
response?.data?.data?.map((item: any, index: number) => ({ response?.data?.data?.map((item: any, index: number) => ({
id: item.id, // Ensure this is a unique identifier id: item.id, // Ensure this is a unique identifier
order: index + 1, // Assign order based on index order: index + 1, // Assign order based on index
...item ...item,
})) ?? []; })) ?? [];
const [dataSource, setDataSource] = React.useState<DataType[]>(data); const [dataSource, setDataSource] = React.useState<DataType[]>(data);
@ -107,9 +109,12 @@ const DrapableTable: React.FC = () => {
setDataSource(sortedData); setDataSource(sortedData);
}, [response?.data?.data]); }, [response?.data?.data]);
const {mutate:orderUnit} = useUpdateUnitOrder({},{ const { mutate: orderUnit } = useUpdateUnitOrder(
retry:false {},
}) {
retry: false,
},
);
const onDragEnd = ({ active, over }: DragEndEvent) => { const onDragEnd = ({ active, over }: DragEndEvent) => {
if (active.id !== over?.id) { if (active.id !== over?.id) {
setDataSource((prevState) => { setDataSource((prevState) => {
@ -129,17 +134,17 @@ const DrapableTable: React.FC = () => {
order: index + 1, // Update the order based on the new index order: index + 1, // Update the order based on the new index
})); }));
// Update the order based on the new positions // Update the order based on the new positions
const orderedNewStateWithNewChape = orderedNewState?.map((item:any)=>{ const orderedNewStateWithNewChape = orderedNewState?.map(
(item: any) => {
return { return {
"unit_id":item?.id, unit_id: item?.id,
"order":item?.order order: item?.order,
} };
}) },
orderUnit({units: orderedNewStateWithNewChape, _method:"PUT"}) );
return orderedNewState orderUnit({ units: orderedNewStateWithNewChape, _method: "PUT" });
return orderedNewState;
}); });
} }
}; };
@ -147,7 +152,7 @@ const DrapableTable: React.FC = () => {
return index % 2 === 0 ? "even-row" : "odd-row"; return index % 2 === 0 ? "even-row" : "odd-row";
}; };
const isLoading = response?.isLoading; const isLoading = response?.isLoading;
const [t] = useTranslation() const [t] = useTranslation();
const columns = useColumns(); const columns = useColumns();
const sortedDataSource = dataSource.sort((a, b) => a.order - b.order); const sortedDataSource = dataSource.sort((a, b) => a.order - b.order);
console.log(sortedDataSource, "sortedDataSource"); console.log(sortedDataSource, "sortedDataSource");
@ -169,21 +174,19 @@ const DrapableTable: React.FC = () => {
className="DataTable" className="DataTable"
loading={{ loading={{
spinning: isLoading, spinning: isLoading,
indicator:<Suspense fallback={<></>}> indicator: (
<Suspense fallback={<></>}>
<LoadingLottie /> <LoadingLottie />
</Suspense> , </Suspense>
),
size: "large", size: "large",
}} }}
locale={{ locale={{
emptyText: ( emptyText: isLoading ? (
isLoading ?
<></> <></>
: ) : (
<Suspense fallback={<></>}> <Suspense fallback={<></>}>
<NotFoundLottie <NotFoundLottie />
/>
</Suspense> </Suspense>
), ),
}} }}

View File

@ -34,7 +34,6 @@ const AddModel: React.FC = () => {
handleSubmit={handleSubmit} handleSubmit={handleSubmit}
getInitialValues={getInitialValues({})} getInitialValues={getInitialValues({})}
getValidationSchema={getValidationSchema} getValidationSchema={getValidationSchema}
> >
<ModelForm /> <ModelForm />
</LayoutModel> </LayoutModel>

View File

@ -27,7 +27,6 @@ const EditModel: React.FC = () => {
getInitialValues={getInitialValues(objectToEdit)} getInitialValues={getInitialValues(objectToEdit)}
getValidationSchema={getValidationSchema} getValidationSchema={getValidationSchema}
isAddModal={false} isAddModal={false}
> >
<ModelForm /> <ModelForm />
</LayoutModel> </LayoutModel>

View File

@ -1,5 +1,5 @@
import React from 'react' import React from "react";
import ValidationField from '../../../../Components/ValidationField/ValidationField' import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { Col, Row } from "reactstrap"; import { Col, Row } from "reactstrap";
const FilterForm = () => { const FilterForm = () => {
@ -9,17 +9,14 @@ const FilterForm = () => {
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} };
export default FilterForm export default FilterForm;

View File

@ -63,10 +63,12 @@ const TableHeader = () => {
<PageHeader <PageHeader
pageTitle="unit" pageTitle="unit"
ModelAbility={ModalEnum?.UNIT_ADD} ModelAbility={ModalEnum?.UNIT_ADD}
canAdd={canAddUnit}/> canAdd={canAddUnit}
/>
<FilterLayout <FilterLayout
sub_children={<FilterForm />} sub_children={<FilterForm />}
filterTitle="sidebar.unit"/> filterTitle="sidebar.unit"
/>
<Table /> <Table />
<AddModalForm /> <AddModalForm />
<EditModalForm /> <EditModalForm />

View File

@ -42,7 +42,12 @@ export const useColumns = () => {
const [t] = useTranslation(); const [t] = useTranslation();
const columns: TableColumnsType<Unit> = [ const columns: TableColumnsType<Unit> = [
{ key: "sort", align: "center", width: 80, render: () => <DragHandleUnit /> }, {
key: "sort",
align: "center",
width: 80,
render: () => <DragHandleUnit />,
},
{ {
title: t("columns.id"), title: t("columns.id"),
@ -68,7 +73,6 @@ export const useColumns = () => {
}, },
{ {
title: t("columns.procedure"), title: t("columns.procedure"),
key: "actions", key: "actions",
align: "center", align: "center",

View File

@ -1,5 +1,5 @@
import React from 'react' import React from "react";
import ValidationField from '../../../../Components/ValidationField/ValidationField' import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { Col, Row } from "reactstrap"; import { Col, Row } from "reactstrap";
const FilterForm = () => { const FilterForm = () => {
@ -9,17 +9,14 @@ const FilterForm = () => {
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} };
export default FilterForm export default FilterForm;

View File

@ -5,10 +5,13 @@ const Form = () => {
return ( return (
<Row className="w-100"> <Row className="w-100">
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" type="Number" /> <ValidationField
placeholder="name"
label="name"
name="name"
type="Number"
/>
</Col> </Col>
</Row> </Row>
); );
}; };

View File

@ -11,13 +11,13 @@ import FilterForm from "./Model/FilterForm";
const Table = lazy(() => import("./Table")); const Table = lazy(() => import("./Table"));
const AddModalForm = lazy(() => import("./Model/AddModel")); const AddModalForm = lazy(() => import("./Model/AddModel"));
const EditModalForm = lazy(() => import("./Model/EditModel")); const EditModalForm = lazy(() => import("./Model/EditModel"));
const DeleteModalForm = lazy(() => import("../../../Layout/Dashboard/DeleteModels")); const DeleteModalForm = lazy(
() => import("../../../Layout/Dashboard/DeleteModels"),
);
const TableHeader = () => { const TableHeader = () => {
const [t] = useTranslation(); const [t] = useTranslation();
useSetPageTitle( useSetPageTitle(t(`page_header.user`));
t(`page_header.user`),
);
const deleteMutation = useDeleteTag(); const deleteMutation = useDeleteTag();
return ( return (
<div className="TableWithHeader"> <div className="TableWithHeader">
@ -25,10 +25,12 @@ const TableHeader = () => {
<PageHeader <PageHeader
pageTitle="user" pageTitle="user"
ModelAbility={ModalEnum?.USER_ADD} ModelAbility={ModalEnum?.USER_ADD}
canAdd={canAddUser}/> canAdd={canAddUser}
/>
<FilterLayout <FilterLayout
sub_children={<FilterForm />} sub_children={<FilterForm />}
filterTitle="sidebar.user"/> filterTitle="sidebar.user"
/>
<Table /> <Table />
<DeleteModalForm <DeleteModalForm
deleteMutation={deleteMutation} deleteMutation={deleteMutation}

View File

@ -10,7 +10,6 @@ const App: React.FC = () => {
const response = useGetAllUser({ const response = useGetAllUser({
name: searchQuery, name: searchQuery,
pagination: true, pagination: true,
}); });
return <DataTable response={response} useColumns={useColumns} />; return <DataTable response={response} useColumns={useColumns} />;

View File

@ -16,10 +16,12 @@ import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../../enums/params"; import { ParamsEnum } from "../../../enums/params";
import { useGetAllLesson, useUpdateLessonOrder } from "../../../api/lesson"; import { useGetAllLesson, useUpdateLessonOrder } from "../../../api/lesson";
const NotFoundLottie = React.lazy(
const NotFoundLottie = React.lazy(() => import("../../../Components/Lottie/NotFound/NotFoundLottie")); () => import("../../../Components/Lottie/NotFound/NotFoundLottie"),
const LoadingLottie = React.lazy(() => import("../../../Components/Lottie/Loading/LoadingLottie" )); );
const LoadingLottie = React.lazy(
() => import("../../../Components/Lottie/Loading/LoadingLottie"),
);
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useColumns } from "./useTableColumns"; import { useColumns } from "./useTableColumns";
@ -53,7 +55,6 @@ export const DragHandleLesson: React.FC = () => {
); );
}; };
interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> { interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
"data-row-key": string; "data-row-key": string;
} }
@ -90,14 +91,17 @@ const Row: React.FC<RowProps> = (props) => {
const DrapableTable: React.FC = () => { const DrapableTable: React.FC = () => {
const { subject_id } = useParams<ParamsEnum>(); const { subject_id } = useParams<ParamsEnum>();
const response = useGetAllLesson({ subject_id: subject_id, pagination: false }); const response = useGetAllLesson({
subject_id: subject_id,
pagination: false,
});
// Assuming the response contains a unique id for each item // Assuming the response contains a unique id for each item
const data = const data =
response?.data?.data?.map((item: any, index: number) => ({ response?.data?.data?.map((item: any, index: number) => ({
id: item.id, // Ensure this is a unique identifier id: item.id, // Ensure this is a unique identifier
order: index + 1, // Assign order based on index order: index + 1, // Assign order based on index
...item ...item,
})) ?? []; })) ?? [];
const [dataSource, setDataSource] = React.useState<DataType[]>(data); const [dataSource, setDataSource] = React.useState<DataType[]>(data);
@ -108,7 +112,7 @@ const DrapableTable: React.FC = () => {
setDataSource(sortedData); setDataSource(sortedData);
}, [response?.data?.data]); }, [response?.data?.data]);
const {mutate:orderLesson} = useUpdateLessonOrder() const { mutate: orderLesson } = useUpdateLessonOrder();
const onDragEnd = ({ active, over }: DragEndEvent) => { const onDragEnd = ({ active, over }: DragEndEvent) => {
if (active.id !== over?.id) { if (active.id !== over?.id) {
setDataSource((prevState) => { setDataSource((prevState) => {
@ -128,28 +132,28 @@ const DrapableTable: React.FC = () => {
order: index + 1, // Update the order based on the new index order: index + 1, // Update the order based on the new index
})); }));
// Update the order based on the new positions // Update the order based on the new positions
const orderedNewStateWithNewChape = orderedNewState?.map((item:any)=>{ const orderedNewStateWithNewChape = orderedNewState?.map(
(item: any) => {
return { return {
"lesson_id":item?.id, lesson_id: item?.id,
"order":item?.order order: item?.order,
} };
}) },
orderLesson({lessons: orderedNewStateWithNewChape, _method:"PUT"}) );
return orderedNewState orderLesson({ lessons: orderedNewStateWithNewChape, _method: "PUT" });
return orderedNewState;
}); });
} }
}; };
const getRowClassName = (record: any, index: number): string => { const getRowClassName = (record: any, index: number): string => {
return index % 2 === 0 ? "even-row" : "odd-row"; return index % 2 === 0 ? "even-row" : "odd-row";
}; };
const [t] = useTranslation() const [t] = useTranslation();
const columns = useColumns(); const columns = useColumns();
const sortedDataSource = dataSource.sort((a, b) => a.order - b.order); const sortedDataSource = dataSource.sort((a, b) => a.order - b.order);
console.log(sortedDataSource, "sortedDataSource"); console.log(sortedDataSource, "sortedDataSource");
const isLoading = response?.isLoading const isLoading = response?.isLoading;
return ( return (
<DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}> <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
<SortableContext <SortableContext
@ -167,21 +171,19 @@ const DrapableTable: React.FC = () => {
className="DataTable" className="DataTable"
loading={{ loading={{
spinning: isLoading, spinning: isLoading,
indicator:<Suspense fallback={<></>}> indicator: (
<Suspense fallback={<></>}>
<LoadingLottie /> <LoadingLottie />
</Suspense> , </Suspense>
),
size: "large", size: "large",
}} }}
locale={{ locale={{
emptyText: ( emptyText: isLoading ? (
isLoading ?
<></> <></>
: ) : (
<Suspense fallback={<></>}> <Suspense fallback={<></>}>
<NotFoundLottie <NotFoundLottie />
/>
</Suspense> </Suspense>
), ),
}} }}

View File

@ -1,5 +1,5 @@
import React from 'react' import React from "react";
import ValidationField from '../../../../Components/ValidationField/ValidationField' import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { Col, Row } from "reactstrap"; import { Col, Row } from "reactstrap";
const FilterForm = () => { const FilterForm = () => {
@ -9,17 +9,14 @@ const FilterForm = () => {
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} };
export default FilterForm export default FilterForm;

View File

@ -71,10 +71,12 @@ const TableHeader = () => {
<PageHeader <PageHeader
pageTitle="lesson" pageTitle="lesson"
ModelAbility={ModalEnum?.LESSON_ADD} ModelAbility={ModalEnum?.LESSON_ADD}
canAdd={canAddLesson}/> canAdd={canAddLesson}
/>
<FilterLayout <FilterLayout
sub_children={<FilterForm />} sub_children={<FilterForm />}
filterTitle="sidebar.lesson"/> filterTitle="sidebar.lesson"
/>
<Table /> <Table />
<AddModalForm /> <AddModalForm />
<EditModalForm /> <EditModalForm />

View File

@ -38,7 +38,12 @@ export const useColumns = () => {
const [t] = useTranslation(); const [t] = useTranslation();
const columns: TableColumnsType<Lesson> = [ const columns: TableColumnsType<Lesson> = [
{ key: "sort", align: "center", width: 80, render: () => <DragHandleLesson /> }, {
key: "sort",
align: "center",
width: 80,
render: () => <DragHandleLesson />,
},
{ {
title: t("columns.id"), title: t("columns.id"),
dataIndex: "id", dataIndex: "id",

View File

@ -128,9 +128,9 @@ const AddPage: React.FC = () => {
const answers = item?.answers?.map((item: any, index: number) => { const answers = item?.answers?.map((item: any, index: number) => {
return { return {
order: index, order: index,
...item ...item,
} };
}) });
console.log(answers); console.log(answers);
mutate({ mutate({
@ -139,7 +139,7 @@ const AddPage: React.FC = () => {
subject_id: subject_id, subject_id: subject_id,
tags, tags,
lessons_ids: [lesson_id], lessons_ids: [lesson_id],
answers answers,
}); });
}); });
console.log(newBseQuestionId, "newBseQuestionId"); console.log(newBseQuestionId, "newBseQuestionId");
@ -150,18 +150,18 @@ const AddPage: React.FC = () => {
const answers = values?.answers?.map((item: any, index: number) => { const answers = values?.answers?.map((item: any, index: number) => {
return { return {
order: index, order: index,
...item ...item,
} };
}) });
const NewQuestion = { const NewQuestion = {
...values, ...values,
subject_id: subject_id, subject_id: subject_id,
tags, tags,
lessons_ids: [lesson_id], lessons_ids: [lesson_id],
canAnswersBeShuffled, canAnswersBeShuffled,
answers answers,
} };
console.clear() console.clear();
console.log(NewQuestion, "NewQuestion"); console.log(NewQuestion, "NewQuestion");
mutate(NewQuestion); mutate(NewQuestion);

View File

@ -1,5 +1,5 @@
import React from 'react' import React from "react";
import ValidationField from '../../../Components/ValidationField/ValidationField' import ValidationField from "../../../Components/ValidationField/ValidationField";
import { Col, Row } from "reactstrap"; import { Col, Row } from "reactstrap";
const FilterForm = () => { const FilterForm = () => {
@ -9,17 +9,14 @@ const FilterForm = () => {
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} };
export default FilterForm export default FilterForm;

View File

@ -31,7 +31,11 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
<TextField <TextField
className="textarea_exercise" className="textarea_exercise"
placeholder={"choice"} placeholder={"choice"}
label2={t(`input.choice`) + ` ` +`( ${t(`alphabet.${getCharFromNumber(index)}`)} )`} label2={
t(`input.choice`) +
` ` +
`( ${t(`alphabet.${getCharFromNumber(index)}`)} )`
}
name={index} name={index}
id={`choice_${index + 1}`} id={`choice_${index + 1}`}
type="TextArea" type="TextArea"
@ -40,22 +44,23 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
<ImageBoxField name={`answers.${index}.content_image`} /> <ImageBoxField name={`answers.${index}.content_image`} />
<div className="answer_status"> <div className="answer_status">
<CheckboxField <CheckboxField
className="" className=""
label="The_correct_answer" label="The_correct_answer"
name={index} name={index}
type="Checkbox" type="Checkbox"
/> />
<p className="delete_question_options"> <p className="delete_question_options">
{t("header.delete_choice")} {t("header.delete_choice")}
<GoTrash className="trash_icon" onClick={handleDeleteChoice} size={17} /> <GoTrash
className="trash_icon"
onClick={handleDeleteChoice}
size={17}
/>
</p> </p>
</div> </div>
</div> </div>
<div className="exercise_form_width"> <div className="exercise_form_width">
<ValidationField <ValidationField
className=" " className=" "
placeholder="_" placeholder="_"

View File

@ -37,8 +37,7 @@ const Choices = () => {
<Droppable droppableId="choices"> <Droppable droppableId="choices">
{(provided) => ( {(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}> <div {...provided.droppableProps} ref={provided.innerRef}>
{formik?.values?.answers?.map( {formik?.values?.answers?.map((item: Choice, index: number) => {
(item: Choice, index: number) => {
// Use a unique identifier for draggableId // Use a unique identifier for draggableId
const draggableId = item.name const draggableId = item.name
? item.name.toString() ? item.name.toString()
@ -61,8 +60,7 @@ const Choices = () => {
)} )}
</Draggable> </Draggable>
); );
}, })}
)}
{provided.placeholder} {/* Placeholder for spacing */} {provided.placeholder} {/* Placeholder for spacing */}
</div> </div>
)} )}

View File

@ -106,8 +106,8 @@ const Form = () => {
<Choices parent_index={parent_index} /> <Choices parent_index={parent_index} />
{formik?.values?.Questions?.[parent_index]?.answers {formik?.values?.Questions?.[parent_index]?.answers?.length <
?.length < 5 && ( 5 && (
<p className="add_new_button"> <p className="add_new_button">
<FaCirclePlus <FaCirclePlus
onClick={() => handleAddChoice(parent_index)} onClick={() => handleAddChoice(parent_index)}

View File

@ -16,10 +16,9 @@ const CheckboxField = ({
const formik = useFormikContext<any>(); const formik = useFormikContext<any>();
const [t] = useTranslation(); const [t] = useTranslation();
const CheckboxhandleChange = (value: any) => { const CheckboxhandleChange = (value: any) => {
const allAreZero = formik?.values?.Questions?.[parent_index]?.answers?.some(
const allAreZero = formik?.values?.Questions?.[ (item: any) => item.isCorrect === 1,
parent_index );
]?.answers?.some((item: any) => item.isCorrect === 1);
if (allAreZero) { if (allAreZero) {
formik?.values?.Questions?.[parent_index]?.answers.forEach( formik?.values?.Questions?.[parent_index]?.answers.forEach(
(item: any, index: number) => { (item: any, index: number) => {

View File

@ -27,8 +27,7 @@ const ChoiceFields = ({
const [t] = useTranslation(); const [t] = useTranslation();
const handleDeleteChoice = () => { const handleDeleteChoice = () => {
const arrayLength = const arrayLength = formik.values.Questions?.[parent_index].answers?.length;
formik.values.Questions?.[parent_index].answers?.length;
console.log(arrayLength); console.log(arrayLength);
@ -42,10 +41,7 @@ const ChoiceFields = ({
const updatedAnswers = formik.values.Questions?.[ const updatedAnswers = formik.values.Questions?.[
parent_index parent_index
].answers.filter((_: any, i: any) => i !== index); ].answers.filter((_: any, i: any) => i !== index);
formik.setFieldValue( formik.setFieldValue(`Questions[${parent_index}].answers`, updatedAnswers);
`Questions[${parent_index}].answers`,
updatedAnswers,
);
}; };
return ( return (
<> <>
@ -53,16 +49,21 @@ const ChoiceFields = ({
<TextField <TextField
className="textarea_exercise" className="textarea_exercise"
placeholder={"choice"} placeholder={"choice"}
label2={t(`input.choice`) + ` ` + `( ${t(`alphabet.${getCharFromNumber(index)}`)} )`} label2={
t(`input.choice`) +
` ` +
`( ${t(`alphabet.${getCharFromNumber(index)}`)} )`
}
name={index} name={index}
parent_index={parent_index} parent_index={parent_index}
type="TextArea" type="TextArea"
/> />
<ImageBoxField name={`Questions.${parent_index}.answers.${index}.answer_image`} /> <ImageBoxField
name={`Questions.${parent_index}.answers.${index}.answer_image`}
/>
<div className="answer_status"> <div className="answer_status">
<CheckboxField <CheckboxField
className="" className=""
label="The_correct_answer" label="The_correct_answer"
@ -72,14 +73,15 @@ const ChoiceFields = ({
/> />
<p className="delete_question_options"> <p className="delete_question_options">
{t("header.delete_choice")} {t("header.delete_choice")}
<GoTrash className="trash_icon" onClick={handleDeleteChoice} size={17} /> <GoTrash
className="trash_icon"
onClick={handleDeleteChoice}
size={17}
/>
</p> </p>
</div> </div>
</div> </div>
<div className="exercise_form_width"> <div className="exercise_form_width">
<ValidationField <ValidationField
className=" " className=" "

View File

@ -17,7 +17,9 @@ const Choices = ({ parent_index }: { parent_index: number }) => {
console.log(formik?.values?.Questions?.[parent_index]?.answers); console.log(formik?.values?.Questions?.[parent_index]?.answers);
// Create a new array from the current answers // Create a new array from the current answers
const items = Array.from(formik?.values?.Questions?.[parent_index]?.answers); const items = Array.from(
formik?.values?.Questions?.[parent_index]?.answers,
);
console.log(items); console.log(items);
// Remove the item from the original position // Remove the item from the original position
const [reorderedItem] = items.splice(result.source.index, 1); const [reorderedItem] = items.splice(result.source.index, 1);
@ -46,8 +48,8 @@ const Choices = ({ parent_index }: { parent_index: number }) => {
{(provided) => ( {(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}> <div {...provided.droppableProps} ref={provided.innerRef}>
{( {(
(formik?.values as any)?.Questions?.[parent_index] (formik?.values as any)?.Questions?.[parent_index]?.answers ||
?.answers || [] []
).map((item: Choice, index: number) => { ).map((item: Choice, index: number) => {
const draggableId = item.name const draggableId = item.name
? item.name.toString() ? item.name.toString()

View File

@ -17,8 +17,8 @@ const File = ({
const { formik, t, isError, errorMsg } = useFormField(newName, props); const { formik, t, isError, errorMsg } = useFormField(newName, props);
let imageUrl = let imageUrl =
formik?.values?.Questions?.[parent_index]?.answers[name] formik?.values?.Questions?.[parent_index]?.answers[name]?.answer_image ??
?.answer_image ?? null; null;
// console.log(imageUrl); // console.log(imageUrl);
const fileList: UploadFile[] = useMemo(() => { const fileList: UploadFile[] = useMemo(() => {

View File

@ -102,8 +102,8 @@ const Form = () => {
</div> </div>
{( {(
(formik?.values as any)?.Questions?.[parent_index] (formik?.values as any)?.Questions?.[parent_index]?.answers ||
?.answers || [] []
).map((item: Choice, index: number) => { ).map((item: Choice, index: number) => {
return ( return (
<ChoiceFields <ChoiceFields
@ -114,8 +114,8 @@ const Form = () => {
/> />
); );
})} })}
{formik?.values?.Questions?.[parent_index]?.answers {formik?.values?.Questions?.[parent_index]?.answers?.length <
?.length < 5 && ( 5 && (
<p className="add_new_button"> <p className="add_new_button">
<FaCirclePlus <FaCirclePlus
onClick={() => handleAddChoice(parent_index)} onClick={() => handleAddChoice(parent_index)}

View File

@ -72,8 +72,12 @@ const Form = () => {
return ( return (
<Row className="w-100 exercise_form_container"> <Row className="w-100 exercise_form_container">
<div className="exercise_form"> <div className="exercise_form">
<ValidationField
<ValidationField className="textarea_exercise" name="content" label="main_question" type="TextArea" /> className="textarea_exercise"
name="content"
label="main_question"
type="TextArea"
/>
<ImageBoxField name="image" /> <ImageBoxField name="image" />
<div></div> <div></div>
@ -94,8 +98,8 @@ const Form = () => {
<Choices parent_index={parent_index} /> <Choices parent_index={parent_index} />
{formik?.values?.Questions?.[parent_index]?.answers {formik?.values?.Questions?.[parent_index]?.answers?.length <
?.length < 5 && ( 5 && (
<p className="add_new_button"> <p className="add_new_button">
<FaCirclePlus <FaCirclePlus
onClick={() => handleAddChoice(parent_index)} onClick={() => handleAddChoice(parent_index)}
@ -105,9 +109,7 @@ const Form = () => {
</p> </p>
)} )}
<div className="exercise_form_width"> <div className="exercise_form_width">
<ValidationField <ValidationField
className=" " className=" "
placeholder="_" placeholder="_"

View File

@ -36,13 +36,16 @@ const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
return ( return (
<> <>
<div className="exercise_forms"> <div className="exercise_forms">
<div className="ChoiceFields"> <div className="ChoiceFields">
<TextField <TextField
className="textarea_exercise" className="textarea_exercise"
placeholder={"question"} placeholder={"question"}
label2={t(`input.question`) + ` ` + `( ${t(`alphabet.${getCharFromNumber(index)}`)} )`} label2={
t(`input.question`) +
` ` +
`( ${t(`alphabet.${getCharFromNumber(index)}`)} )`
}
name={index} name={index}
id={`question_${index + 1}`} id={`question_${index + 1}`}
type="TextArea" type="TextArea"
@ -51,18 +54,16 @@ const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
<ImageBoxField name={`Questions.${index}.image`} /> <ImageBoxField name={`Questions.${index}.image`} />
<div className="answer_status"> <div className="answer_status">
<p className="delete_question_options"> <p className="delete_question_options">
{t("header.delete_question")} {t("header.delete_question")}
<GoTrash className="trash_icon" onClick={handleDeleteQuestion} size={17} /> <GoTrash
className="trash_icon"
onClick={handleDeleteQuestion}
size={17}
/>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</> </>
); );

View File

@ -1,35 +1,32 @@
import React, { useState, useMemo } from 'react'; import React, { useState, useMemo } from "react";
import { Select, Spin } from 'antd'; import { Select, Spin } from "antd";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { useFormikContext } from 'formik'; import { useFormikContext } from "formik";
import { useDebounce } from '../../../../../../utils/useDebounce'; import { useDebounce } from "../../../../../../utils/useDebounce";
import { useGetAllTag } from '../../../../../../api/tags'; import { useGetAllTag } from "../../../../../../api/tags";
const MaltySelectTag = ({ parent_index }: { parent_index: number }) => { const MaltySelectTag = ({ parent_index }: { parent_index: number }) => {
const [searchValue, setSearchValue] = useState<string>(''); const [searchValue, setSearchValue] = useState<string>("");
const [fieldValue, setFieldValue] = useState<string>(''); const [fieldValue, setFieldValue] = useState<string>("");
const formik = useFormikContext<any>(); const formik = useFormikContext<any>();
const values = formik?.values?.Questions?.[parent_index]?.tags; const values = formik?.values?.Questions?.[parent_index]?.tags;
const handleChange = (value: string[]) => { const handleChange = (value: string[]) => {
formik.setFieldValue(`Questions.[${parent_index}].tags`,value) formik.setFieldValue(`Questions.[${parent_index}].tags`, value);
setSearchValue(''); setSearchValue("");
setFieldValue(''); setFieldValue("");
}; };
const handleSearch = useDebounce((value: string) => { const handleSearch = useDebounce((value: string) => {
setSearchValue(value); setSearchValue(value);
}); });
const handleFieldChange = (value: string) => { const handleFieldChange = (value: string) => {
setFieldValue(value); setFieldValue(value);
}; };
const handleBlur = () => { const handleBlur = () => {
setSearchValue(''); setSearchValue("");
setFieldValue(''); setFieldValue("");
}; };
const { data, isLoading } = useGetAllTag({ const { data, isLoading } = useGetAllTag({
@ -38,21 +35,21 @@ const MaltySelectTag = ({parent_index}:{parent_index:number}) => {
const [t] = useTranslation(); const [t] = useTranslation();
const options = data?.data ?? [] const options = data?.data ?? [];
const additionalData = options?.length < 1 && searchValue.length > 1 && !isLoading ? [{id:`new_${searchValue}`,name:searchValue}] :[]; const additionalData =
options?.length < 1 && searchValue.length > 1 && !isLoading
? [{ id: `new_${searchValue}`, name: searchValue }]
: [];
return ( return (
<div className='SelectTag'> <div className="SelectTag">
<label htmlFor="">{t("models.tag")}</label>
<label htmlFor="">
{t("models.tag")}
</label>
<Select <Select
mode="multiple" mode="multiple"
allowClear allowClear
style={{ width: '100%' ,height:"40px"}} style={{ width: "100%", height: "40px" }}
placeholder="" placeholder=""
fieldNames={{ label: 'name', value: 'id' }} fieldNames={{ label: "name", value: "id" }}
onChange={handleChange} onChange={handleChange}
options={[...options, ...additionalData]} options={[...options, ...additionalData]}
filterOption={false} filterOption={false}

View File

@ -47,7 +47,12 @@ const Form = () => {
return ( return (
<Row className="w-100 exercise_form_container"> <Row className="w-100 exercise_form_container">
<div className="exercise_form"> <div className="exercise_form">
<ValidationField className="textarea_exercise" name="content" label="answer_content" type="TextArea" /> <ValidationField
className="textarea_exercise"
name="content"
label="answer_content"
type="TextArea"
/>
<ImageBoxField name="content_image" /> <ImageBoxField name="content_image" />
</div> </div>
@ -60,7 +65,6 @@ const Form = () => {
)} )}
<div className="exercise_form_width"> <div className="exercise_form_width">
<ValidationField <ValidationField
className=" " className=" "
placeholder="_" placeholder="_"

View File

@ -79,10 +79,12 @@ const TableHeader = () => {
ModelAbility={ModalEnum?.QUESTION_ACCEPT} ModelAbility={ModalEnum?.QUESTION_ACCEPT}
canAdd={canAddQuestion} canAdd={canAddQuestion}
locationToNavigate={`${ABILITIES_ENUM?.QUESTION}/add`} locationToNavigate={`${ABILITIES_ENUM?.QUESTION}/add`}
openModel={false}/> openModel={false}
/>
<FilterLayout <FilterLayout
sub_children={<FilterForm />} sub_children={<FilterForm />}
filterTitle="sidebar.question"/> filterTitle="sidebar.question"
/>
<Table /> <Table />
</Suspense> </Suspense>
<DeleteModels <DeleteModels

View File

@ -69,7 +69,7 @@ export const useColumns = () => {
}, },
{ {
title: '#', title: "#",
key: "actions", key: "actions",
align: "center", align: "center",

View File

@ -1,5 +1,5 @@
import React from 'react' import React from "react";
import ValidationField from '../../../../Components/ValidationField/ValidationField' import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { Col, Row } from "reactstrap"; import { Col, Row } from "reactstrap";
const FilterForm = () => { const FilterForm = () => {
@ -9,17 +9,14 @@ const FilterForm = () => {
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
<Col> <Col>
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
<ValidationField placeholder="name" label="name" name="name" /> <ValidationField placeholder="name" label="name" name="name" />
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} };
export default FilterForm export default FilterForm;

View File

@ -45,10 +45,12 @@ const TableWithHeader = () => {
<PageHeader <PageHeader
pageTitle="subjects" pageTitle="subjects"
ModelAbility={ModalEnum?.SUBJECT_ADD} ModelAbility={ModalEnum?.SUBJECT_ADD}
canAdd={canAddSubject}/> canAdd={canAddSubject}
/>
<FilterLayout <FilterLayout
sub_children={<FilterForm />} sub_children={<FilterForm />}
filterTitle="sidebar.subjects"/> filterTitle="sidebar.subjects"
/>
<Table /> <Table />
<AddModalForm /> <AddModalForm />

View File

@ -7,7 +7,11 @@ import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import ActionButtons from "../../../../Components/Table/ActionButtons"; import ActionButtons from "../../../../Components/Table/ActionButtons";
import { canDeleteSubject, canEditSubject, canShowSubject } from "../../../../utils/hasAbilityFn"; import {
canDeleteSubject,
canEditSubject,
canShowSubject,
} from "../../../../utils/hasAbilityFn";
import { ABILITIES_ENUM } from "../../../../enums/abilities"; import { ABILITIES_ENUM } from "../../../../enums/abilities";
import { Subject } from "../../../../types/Subject"; import { Subject } from "../../../../types/Subject";

View File

@ -55,11 +55,7 @@ const FormField = ({ isLoading }: FormFieldType) => {
/> />
</div> </div>
<button <button disabled={isLoading} type="submit" className="auth_submit_button">
disabled={isLoading}
type="submit"
className="auth_submit_button"
>
{t("practical.login")} {t("practical.login")}
</button> </button>
</Form> </Form>

View File

@ -26,19 +26,16 @@ const LoginForm = () => {
const LocalType = getLocalStorage(USER_KEY)?.type ?? false; const LocalType = getLocalStorage(USER_KEY)?.type ?? false;
useEffect(() => { useEffect(() => {
if (isSuccess) { if (isSuccess) {
login(LoginData?.data as any) login(LoginData?.data as any);
} }
}, [isSuccess]) }, [isSuccess]);
useEffect(() => { useEffect(() => {
if (LocalType) { if (LocalType) {
window.location.href = ("/") window.location.href = "/";
} }
}, [LocalType]) }, [LocalType]);
return ( return (
<div className="LoginForm"> <div className="LoginForm">

View File

@ -7,11 +7,7 @@ const Dummy = () => {
const [t] = useTranslation(); const [t] = useTranslation();
useSetPageTitle(`${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t("dashboard")}`); useSetPageTitle(`${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t("dashboard")}`);
return ( return <div className="DummyHomePage"></div>;
<div className="DummyHomePage">
</div>
);
}; };
export default Dummy; export default Dummy;

View File

@ -12,8 +12,12 @@ const Unit = React.lazy(() => import("./Pages/Admin/Unit/Page"));
const Lesson = React.lazy(() => import("./Pages/Admin/lesson/Page")); const Lesson = React.lazy(() => import("./Pages/Admin/lesson/Page"));
const Question = React.lazy(() => import("./Pages/Admin/question/Page")); const Question = React.lazy(() => import("./Pages/Admin/question/Page"));
const AddQuestionPage = React.lazy(() => import("./Pages/Admin/question/AddPage")); const AddQuestionPage = React.lazy(
const EditQuestionPage = React.lazy(() => import("./Pages/Admin/question/EditPage")); () => import("./Pages/Admin/question/AddPage"),
);
const EditQuestionPage = React.lazy(
() => import("./Pages/Admin/question/EditPage"),
);
const Report = React.lazy(() => import("./Pages/Admin/Report/Page")); const Report = React.lazy(() => import("./Pages/Admin/Report/Page"));
const Student = React.lazy(() => import("./Pages/Admin/Student/Page")); const Student = React.lazy(() => import("./Pages/Admin/Student/Page"));

View File

@ -48,7 +48,6 @@
} }
} }
.pagination_antd { .pagination_antd {
margin-inline: 16px !important; margin-inline: 16px !important;
} }

View File

@ -17,7 +17,9 @@
margin: 10px 0; margin: 10px 0;
} }
header { header {
display: flex; justify-content: space-between;align-items: center; display: flex;
justify-content: space-between;
align-items: center;
height: 60px; height: 60px;
padding: 16px; padding: 16px;
z-index: 10; z-index: 10;
@ -29,7 +31,7 @@
} }
svg { svg {
font-size: 30px; font-size: 30px;
color: #6A7287; color: #6a7287;
} }
} }
@ -72,7 +74,6 @@
label { label {
color: var(--secondary) !important; color: var(--secondary) !important;
} }
} }
.ant-modal-root .ant-modal-centered .ant-modal { .ant-modal-root .ant-modal-centered .ant-modal {
width: 45vw; width: 45vw;
@ -80,4 +81,3 @@
.ant-modal .ant-modal-body { .ant-modal .ant-modal-body {
padding-inline: 1vw !important; padding-inline: 1vw !important;
} }

View File

@ -74,7 +74,6 @@ svg {
} }
} }
/* Username */ /* Username */
#username { #username {
font-size: 1vw; font-size: 1vw;

View File

@ -1,5 +1,5 @@
:root { :root {
--primary: #3D5EE1; --primary: #3d5ee1;
--secondary: #303972; --secondary: #303972;
--field: #b0d9ff; --field: #b0d9ff;
--text: black; --text: black;
@ -11,8 +11,8 @@
--border-color: #b0d9ff; --border-color: #b0d9ff;
--shadow: rgba(0, 0, 0, 0.15); --shadow: rgba(0, 0, 0, 0.15);
--white: white; --white: white;
--bgSideBar: #0F0C1C; --bgSideBar: #0f0c1c;
--textSideBar: #FFFFFF; --textSideBar: #ffffff;
--sideBarWidth: 17.5vw; --sideBarWidth: 17.5vw;
--sideBarWidthClosed: 80px; --sideBarWidthClosed: 80px;
--sideBarMinWidth: 250px; --sideBarMinWidth: 250px;
@ -29,8 +29,8 @@
--presence: #31ce83; --presence: #31ce83;
--absence: #ce3131; --absence: #ce3131;
--lateArrival: #f0e43b; --lateArrival: #f0e43b;
--earlyDeparture: #3D5EE1; --earlyDeparture: #3d5ee1;
--warning: #E93553; --warning: #e93553;
--bg4: #e6e5e5; --bg4: #e6e5e5;
--borderColor: #ffffff91; --borderColor: #ffffff91;
@ -39,7 +39,7 @@
} }
:root:has(.dark) { :root:has(.dark) {
--primary: #3D5EE1; --primary: #3d5ee1;
--secondary: #303972; --secondary: #303972;
--field: #b0d9ff; --field: #b0d9ff;
--text: white; --text: white;
@ -51,8 +51,8 @@
--border-color: #b0d9ff; --border-color: #b0d9ff;
--shadow: rgba(0, 0, 0, 0.15); --shadow: rgba(0, 0, 0, 0.15);
--white: white; --white: white;
--bgSideBar: #0F0C1C; --bgSideBar: #0f0c1c;
--textSideBar: #FFFFFF; --textSideBar: #ffffff;
--sideBarWidth: 14vw; --sideBarWidth: 14vw;
--sideBarMinWidth: 14vw; --sideBarMinWidth: 14vw;
--sideBarSpace: 1%; --sideBarSpace: 1%;
@ -68,5 +68,5 @@
--presence: #31ce83; --presence: #31ce83;
--absence: #ce3131; --absence: #ce3131;
--lateArrival: #f0e43b; --lateArrival: #f0e43b;
--earlyDeparture: #3D5EE1; --earlyDeparture: #3d5ee1;
} }

View File

@ -48,11 +48,8 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
} }
.FormCard { .FormCard {
// background: var(--bg); // background: var(--bg);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -258,7 +255,6 @@ button:disabled {
.h1 { .h1 {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
.buttonAction { .buttonAction {
@ -292,13 +288,10 @@ button:disabled {
} }
} }
.cc { .cc {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.VisibleHidden { .VisibleHidden {

View File

@ -14,7 +14,6 @@
@import "../Antd/index.scss"; @import "../Antd/index.scss";
@import "../DataTable/index.scss"; @import "../DataTable/index.scss";
@import "../Pages/index.scss"; @import "../Pages/index.scss";

View File

@ -37,7 +37,7 @@
width: 40vw; width: 40vw;
min-width: 300px; min-width: 300px;
box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.2);
background: var(--bg); background: var(--bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -66,7 +66,8 @@
} }
.auth_submit_button { .auth_submit_button {
width: 100%; width: 100%;
@include Flex;text-align: center; @include Flex;
text-align: center;
color: var(--white); color: var(--white);
background: var(--primary); background: var(--primary);
margin-top: 10px; margin-top: 10px;
@ -78,7 +79,7 @@
} }
.form-label { .form-label {
font-size: 1vw; font-size: 1vw;
color: #202C4B; color: #202c4b;
} }
} }
/* Remove autofill background color */ /* Remove autofill background color */

View File

@ -5,8 +5,7 @@
// box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.001); // box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.001);
width: 220px; width: 220px;
// direction: ltr; // direction: ltr;
color: #6A7287B2; color: #6a7287b2;
} }
.NavBar { .NavBar {
.search-header { .search-header {
@ -50,7 +49,8 @@
.search__input_text { .search__input_text {
color: var(--white); color: var(--white);
position: absolute; position: absolute;
top: 0;left: 0; top: 0;
left: 0;
font-size: 30px; font-size: 30px;
width: 100px !important; width: 100px !important;
} }
@ -143,10 +143,8 @@
border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
color: #fff !important; color: #fff !important;
} }
.NavBar { .NavBar {
.header_search { .header_search {
.search-field { .search-field {
@ -155,6 +153,5 @@
color: white !important; color: white !important;
} }
} }
} }
} }

View File

@ -1,7 +1,7 @@
.DataTable { .DataTable {
width: 100%; width: 100%;
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, .1); box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
} }
.ant-table-cell { .ant-table-cell {
@ -37,13 +37,21 @@
font-size: 0.9vw; font-size: 0.9vw;
} }
.ant-table-wrapper
.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:last-child, .ant-table-container
.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:first-child{ table
> thead
> tr:first-child
> *:last-child,
.ant-table-wrapper
.ant-table-container
table
> thead
> tr:first-child
> *:first-child {
border-radius: 0 !important; border-radius: 0 !important;
} }
.TableWithHeader { .TableWithHeader {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@ -3,18 +3,22 @@
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.1);
> div { > div {
display: flex;align-items: center;justify-content: space-between; display: flex;
align-items: center;
justify-content: space-between;
.filter_and_order_by { .filter_and_order_by {
display: flex; display: flex;
gap: 10px; gap: 10px;
.filter_button { .filter_button {
display: flex;justify-content: space-between;align-items: center; display: flex;
justify-content: space-between;
align-items: center;
width: 190px; width: 190px;
padding-inline: 20px; padding-inline: 20px;
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--opacity) !important; border: 1px solid var(--opacity) !important;
transition: ease-in-out .4s; transition: ease-in-out 0.4s;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: var(--bg4); background: var(--bg4);
@ -25,8 +29,9 @@
} }
} }
span { span {
display: flex;align-items: center; display: flex;
color: #6A7287; align-items: center;
color: #6a7287;
.pagination_select, .pagination_select,
.order_by_select, .order_by_select,
.filter_modal_select { .filter_modal_select {
@ -51,12 +56,17 @@
} }
} }
.pagination_column, .pagination_column,
.order_by_filter { .order_by_filter {
.ant-select-outlined:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover .ant-select-selector, .ant-select-outlined:not(.ant-select-disabled):not(
.ant-select-outlined:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover .ant-select-selector{ .ant-select-customize-input
transition: ease-in-out .4s !important; ):not(.ant-pagination-size-changer):hover
.ant-select-selector,
.ant-select-outlined:not(.ant-select-disabled):not(
.ant-select-customize-input
):not(.ant-pagination-size-changer):hover
.ant-select-selector {
transition: ease-in-out 0.4s !important;
cursor: pointer !important; cursor: pointer !important;
&:hover { &:hover {
background: var(--bg4) !important; background: var(--bg4) !important;

View File

@ -9,7 +9,6 @@
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
} }
.Layout_Body { .Layout_Body {

View File

@ -1,6 +1,7 @@
.NavBar { .NavBar {
display: flex; display: flex;
justify-content: space-between;align-items: center; justify-content: space-between;
align-items: center;
width: 100%; width: 100%;
height: var(--navBarHeight); height: var(--navBarHeight);
// gap: 30px; // gap: 30px;
@ -109,8 +110,6 @@
} }
} }
.NotificationsIcon { .NotificationsIcon {
position: relative; position: relative;
&::after { &::after {
@ -118,7 +117,7 @@
top: 20%; top: 20%;
left: 20%; left: 20%;
content: ""; content: "";
background: #E93553; background: #e93553;
width: 7px; width: 7px;
height: 7px; height: 7px;
border-radius: 50%; border-radius: 50%;

View File

@ -1,7 +1,8 @@
.page_header { .page_header {
margin-bottom: 20px !important; margin-bottom: 20px !important;
.page_header_links { .page_header_links {
display: flex; flex-direction: column; display: flex;
flex-direction: column;
.page_title { .page_title {
font-weight: bolder; font-weight: bolder;
font-size: 24px; font-size: 24px;
@ -12,9 +13,6 @@
} }
} }
.filter_header_top { .filter_header_top {
color: #202C4B; color: #202c4b;
} }

View File

@ -19,10 +19,11 @@
flex-direction: column; flex-direction: column;
z-index: 2; z-index: 2;
.side_bar_header { .side_bar_header {
height: var(--navBarHeight); height: var(--navBarHeight);
display: flex;align-items: center;justify-content: space-between; display: flex;
align-items: center;
justify-content: space-between;
background: var(--primary); background: var(--primary);
padding-inline: 15px; padding-inline: 15px;
border-left: 1px solid var(--borderColor); border-left: 1px solid var(--borderColor);
@ -106,7 +107,9 @@
color: var(--borderColor); color: var(--borderColor);
} }
div { div {
display: flex;align-items: center;justify-content: start; display: flex;
align-items: center;
justify-content: start;
background: inherit; background: inherit;
font-size: 0.8vw; font-size: 0.8vw;
height: 2.5vw; height: 2.5vw;
@ -120,7 +123,6 @@
font-size: 16px; font-size: 16px;
span { span {
cursor: pointer; cursor: pointer;
} }
svg { svg {
border-radius: 5px; border-radius: 5px;
@ -129,7 +131,6 @@
background: #ffffff2f; background: #ffffff2f;
font-size: 30px; font-size: 30px;
margin-left: 16px; margin-left: 16px;
} }
} }
} }
@ -196,12 +197,14 @@
} }
} }
.side_bar_links { .side_bar_links {
display: flex;align-items: center; display: flex;
align-items: center;
.active { .active {
background: inherit !important; background: inherit !important;
} }
.link { .link {
align-items: center;justify-content: center; align-items: center;
justify-content: center;
width: 100% !important; width: 100% !important;
padding: 0vw 0vw !important; padding: 0vw 0vw !important;
i { i {
@ -240,5 +243,3 @@
} }
} }
} }

View File

@ -18,4 +18,3 @@
.Unit_Page { .Unit_Page {
padding-inline: 20px; padding-inline: 20px;
} }

View File

@ -10,7 +10,6 @@
} }
.exercise_form, .exercise_form,
.ChoiceFields { .ChoiceFields {
.upload_image_button { .upload_image_button {
.ant-btn { .ant-btn {
min-height: 15.6vh !important; min-height: 15.6vh !important;
@ -129,7 +128,7 @@
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
padding: 14px 10px; padding: 14px 10px;
background: #F2F4F8; background: #f2f4f8;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
margin: 0 !important; margin: 0 !important;
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
@ -148,7 +147,6 @@
} }
} }
.answer_status { .answer_status {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -162,7 +160,6 @@
} }
} }
.exercise_add_header { .exercise_add_header {
article { article {
display: flex; display: flex;
@ -177,7 +174,6 @@
} }
} }
.SelectTag { .SelectTag {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -190,10 +186,7 @@
max-width: 50vw; max-width: 50vw;
> * { > * {
width: 100%; width: 100%;
} }
} }
.exercise_forms { .exercise_forms {

View File

@ -142,12 +142,13 @@
} }
} }
.ant-table-wrapper .ant-table-thead > tr > th,
.ant-table-wrapper .ant-table-thead >tr>th, .ant-table-wrapper .ant-table-thead >tr>td{ .ant-table-wrapper .ant-table-thead > tr > td {
background: #F2F4F8!important; background: #f2f4f8 !important;
color: var(--black) !important; color: var(--black) !important;
} }
.ant-pagination .ant-pagination-prev .ant-pagination-item-link, .ant-pagination .ant-pagination-next .ant-pagination-item-link{ .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
.ant-pagination .ant-pagination-next .ant-pagination-item-link {
rotate: 180deg !important; rotate: 180deg !important;
} }

View File

@ -1,4 +1,3 @@
export const BaseURL = "https://nerd-back.point-dev.net/api/"; export const BaseURL = "https://nerd-back.point-dev.net/api/";
export const ImageBaseURL = "https://nerd-back.point-dev.net/api/"; export const ImageBaseURL = "https://nerd-back.point-dev.net/api/";

Some files were not shown because too many files have changed in this diff Show More