fix question
This commit is contained in:
parent
c08de08790
commit
491e3a88bd
|
|
@ -7,6 +7,7 @@ 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[]) => {
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ const Default = ({
|
||||||
label_icon,
|
label_icon,
|
||||||
...props
|
...props
|
||||||
}: any) => {
|
}: any) => {
|
||||||
const { errorMsg, isError, t } = useFormField(name, props);
|
const { errorMsg, isError, t,formik } = useFormField(name, props);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="ValidationField w-100">
|
<div className="ValidationField w-100">
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@ const FilterLayout = ({
|
||||||
<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("header.filter")}
|
||||||
</span>
|
</span>
|
||||||
<MdKeyboardArrowDown />
|
<MdKeyboardArrowDown />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -63,9 +63,9 @@ const FilterLayout = ({
|
||||||
|
|
||||||
<div className="filter_header_bottom">
|
<div className="filter_header_bottom">
|
||||||
<span>
|
<span>
|
||||||
<p>{t("صف لكل صفحة")}</p>
|
<p>{t("header.per_page")}</p>
|
||||||
<PaginationColumn />
|
<PaginationColumn />
|
||||||
<p>{t("ادخالات")}</p>
|
<p>{t("header.entries")}</p>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div className="header_search">
|
<div className="header_search">
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,6 @@ const PageHeader = ({
|
||||||
const { handel_open_model } = useModalHandler();
|
const { handel_open_model } = useModalHandler();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const { PageTitle } = usePageTitleState((state) => state);
|
|
||||||
const PrevPath = getPrevPathRoute(location.pathname);
|
const PrevPath = getPrevPathRoute(location.pathname);
|
||||||
const handelNavigate = () => {
|
const handelNavigate = () => {
|
||||||
if (PrevPath === 0) {
|
if (PrevPath === 0) {
|
||||||
|
|
@ -39,11 +38,13 @@ const PageHeader = ({
|
||||||
const handleNavigateToPage = (location: string) => {
|
const handleNavigateToPage = (location: string) => {
|
||||||
navigate(location);
|
navigate(location);
|
||||||
};
|
};
|
||||||
|
console.log();
|
||||||
|
const {PageTitle} = usePageTitleState()
|
||||||
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(`PageTitle.${pageTitle}`)}</h1>
|
||||||
<span className="page_links">
|
<span className="page_links">
|
||||||
<MdOutlineArrowForwardIos /> {PageTitle}
|
<MdOutlineArrowForwardIos /> {PageTitle}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -59,7 +60,7 @@ const PageHeader = ({
|
||||||
className="add_button"
|
className="add_button"
|
||||||
>
|
>
|
||||||
<BsPlusCircleFill />
|
<BsPlusCircleFill />
|
||||||
{t(`models.${pageTitle}`)}
|
{t(`practical.add`)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@ const TableHeader = () => {
|
||||||
/>
|
/>
|
||||||
<FilterLayout
|
<FilterLayout
|
||||||
sub_children={<FilterForm />}
|
sub_children={<FilterForm />}
|
||||||
filterTitle="sidebar.grade"
|
filterTitle="table.grade"
|
||||||
/>
|
/>
|
||||||
<Table />
|
<Table />
|
||||||
<AddModalForm />
|
<AddModalForm />
|
||||||
|
|
|
||||||
|
|
@ -5,21 +5,47 @@ import { Suspense } from "react";
|
||||||
import { Spin } from "antd";
|
import { Spin } from "antd";
|
||||||
import { ModalEnum } from "../../../../enums/Model";
|
import { ModalEnum } from "../../../../enums/Model";
|
||||||
import { canAddReSeller } from "../../../../utils/hasAbilityFn";
|
import { canAddReSeller } from "../../../../utils/hasAbilityFn";
|
||||||
|
import PersonalDetailsForm from "../Form/PersonalDetailsForm";
|
||||||
|
import { Formik ,Form} from "formik";
|
||||||
|
import { getInitialValues, getValidationSchema } from "../Form/formUtils";
|
||||||
|
import TitleDetailsForm from "../Form/TitleDetailsForm";
|
||||||
|
import AttachmentForm from "../Form/AttachmentForm";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const TableHeader = () => {
|
const TableHeader = () => {
|
||||||
const [t] = useTranslation();
|
const [t] = useTranslation();
|
||||||
useSetPageTitle(t(`page_header.reseller`));
|
useSetPageTitle(t(`page_header.add_reseller`));
|
||||||
|
const handelSubmit = (values:any)=>{
|
||||||
|
console.log(values,"values");
|
||||||
|
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<div className="TableWithHeader">
|
<div className="TableWithHeader">
|
||||||
<Suspense fallback={<Spin />}>
|
<Suspense fallback={<Spin />}>
|
||||||
<PageHeader
|
<PageHeader
|
||||||
pageTitle="reseller"
|
pageTitle="add_reseller"
|
||||||
ModelAbility={ModalEnum?.RE_SELLER_ADD}
|
ModelAbility={ModalEnum?.RE_SELLER_ADD}
|
||||||
canAdd={false}
|
canAdd={false}
|
||||||
/>
|
/>
|
||||||
|
<div className="bg2" >
|
||||||
|
<Formik initialValues={getInitialValues({})} validationSchema={getValidationSchema} onSubmit={handelSubmit} >
|
||||||
|
<Form>
|
||||||
|
<PersonalDetailsForm/>
|
||||||
|
<TitleDetailsForm/>
|
||||||
|
<AttachmentForm/>
|
||||||
|
<div className="resellerButton">
|
||||||
|
<button type="button">
|
||||||
|
{t("practical.cancel")}
|
||||||
|
</button>
|
||||||
|
<button type="submit">
|
||||||
|
{t("practical.add")} {t("models.reseller")}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</Formik>
|
||||||
|
</div>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
24
src/Pages/Admin/Reseller/Form/AttachmentForm.tsx
Normal file
24
src/Pages/Admin/Reseller/Form/AttachmentForm.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { FaImage } from 'react-icons/fa'
|
||||||
|
import ImageBoxField from './ImageBoxField/ImageBoxField';
|
||||||
|
|
||||||
|
const AttachmentForm = () => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='AttachmentForm'>
|
||||||
|
<header className='header_form'>
|
||||||
|
<FaImage />
|
||||||
|
<h4>{t("header.attachment")}</h4>
|
||||||
|
</header>
|
||||||
|
<main className='main_form_body'>
|
||||||
|
|
||||||
|
<ImageBoxField name="personal_image" />
|
||||||
|
<ImageBoxField name="id_image" />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AttachmentForm
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
.ImageBoxField {
|
||||||
|
.ImageBox {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: max(1.5px, 0.1vw) dashed #a9c3f1;
|
||||||
|
margin-block: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
.ImageBoxIcon {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.imagePreview {
|
||||||
|
max-width: 99%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 99%;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ImageHeader {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ImageCancelIcon {
|
||||||
|
width: 16px !important;
|
||||||
|
height: 16px !important;
|
||||||
|
}
|
||||||
|
.ImageBoxIcon {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
import { useFormikContext } from "formik";
|
||||||
|
import { useState, useRef, useEffect } from "react";
|
||||||
|
import "./ImageBoxField.scss";
|
||||||
|
import ImageIcon from "./ImageIcon";
|
||||||
|
import ImageCancelIcon from "./ImageCancelIcon";
|
||||||
|
import { generateImagePreview } from "./generateImagePreview";
|
||||||
|
import { getNestedValue } from "../../../../../utils/getNestedValue";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
// Helper function to generate image preview from a File
|
||||||
|
|
||||||
|
const ImageBoxField = ({ name }: any) => {
|
||||||
|
const formik = useFormikContext<any>();
|
||||||
|
const value = getNestedValue(formik.values, name);
|
||||||
|
const [imagePreview, setImagePreview] = useState<string | null>(null);
|
||||||
|
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (value instanceof File) {
|
||||||
|
generateImagePreview(value, setImagePreview);
|
||||||
|
} else if (typeof value === "string") {
|
||||||
|
setImagePreview(value);
|
||||||
|
} else {
|
||||||
|
setImagePreview(null);
|
||||||
|
}
|
||||||
|
}, [value]);
|
||||||
|
|
||||||
|
const handleFileChange = (event: any) => {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
if (file) {
|
||||||
|
generateImagePreview(file, setImagePreview);
|
||||||
|
formik.setFieldValue(name, file);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleButtonClick = () => {
|
||||||
|
const fileInput = fileInputRef.current;
|
||||||
|
if (fileInput) {
|
||||||
|
fileInput.click();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setImagePreview("");
|
||||||
|
formik.setFieldValue(name, "");
|
||||||
|
|
||||||
|
if (fileInputRef.current) {
|
||||||
|
fileInputRef.current.value = "";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const [t] = useTranslation()
|
||||||
|
return (
|
||||||
|
<div className="ImageBoxField">
|
||||||
|
<header>{t(`input.${name}`)}</header>
|
||||||
|
<div className="ImageHeader">
|
||||||
|
{imagePreview ? (
|
||||||
|
<>
|
||||||
|
<ImageCancelIcon
|
||||||
|
onClick={handleCancel}
|
||||||
|
className="ImageCancelIcon"
|
||||||
|
/>
|
||||||
|
<ImageIcon onClick={handleButtonClick} className="ImageBoxIcon" />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="VisibleHidden">hidden</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="ImageBox">
|
||||||
|
{imagePreview ? (
|
||||||
|
<img src={imagePreview} alt="Preview" className="imagePreview" />
|
||||||
|
) : (
|
||||||
|
<ImageIcon onClick={handleButtonClick} className="ImageBoxIcon" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
id={`file-input-${name}`}
|
||||||
|
type="file"
|
||||||
|
accept="image/png, image/jpeg, image/webp"
|
||||||
|
style={{ display: "none" }}
|
||||||
|
onChange={handleFileChange}
|
||||||
|
ref={fileInputRef}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ImageBoxField;
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
interface ImageCancelIconProps extends React.HTMLAttributes<HTMLDivElement> {}
|
||||||
|
|
||||||
|
const ImageCancelIcon: React.FC<ImageCancelIconProps> = (props) => {
|
||||||
|
return (
|
||||||
|
<div {...props}>
|
||||||
|
<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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"
|
||||||
|
fill="#515B73"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ImageCancelIcon;
|
||||||
18
src/Pages/Admin/Reseller/Form/ImageBoxField/ImageIcon.tsx
Normal file
18
src/Pages/Admin/Reseller/Form/ImageBoxField/ImageIcon.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
interface ImageIconProps extends React.HTMLAttributes<HTMLDivElement> {}
|
||||||
|
|
||||||
|
const ImageIcon: React.FC<ImageIconProps> = (props) => {
|
||||||
|
return (
|
||||||
|
<div {...props}>
|
||||||
|
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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"
|
||||||
|
fill="#515B73"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ImageIcon;
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
export const generateImagePreview = (
|
||||||
|
file: File,
|
||||||
|
setImagePreview: (result: string) => void,
|
||||||
|
) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onloadend = () => {
|
||||||
|
setImagePreview(reader.result as string);
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
};
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
import { Col, Row } from "reactstrap";
|
|
||||||
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
|
||||||
|
|
||||||
const Form = () => {
|
|
||||||
return (
|
|
||||||
<Row className="w-100">
|
|
||||||
<Col>
|
|
||||||
<ValidationField placeholder="name" label="name" name="name" />
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Form;
|
|
||||||
33
src/Pages/Admin/Reseller/Form/PersonalDetailsForm.tsx
Normal file
33
src/Pages/Admin/Reseller/Form/PersonalDetailsForm.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { FaStore } from 'react-icons/fa'
|
||||||
|
import ValidationField from '../../../../Components/ValidationField/ValidationField';
|
||||||
|
|
||||||
|
const PersonalDetailsForm = () => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='PersonalDetailsForm'>
|
||||||
|
<header className='header_form'>
|
||||||
|
<FaStore />
|
||||||
|
<h4>{t("header.personal_information")}</h4>
|
||||||
|
</header>
|
||||||
|
<main className='main_form_body'>
|
||||||
|
<ValidationField name={"id_number"} placeholder={"_"} label={"ID Number"} />
|
||||||
|
<ValidationField name={"addition_date"} placeholder={"_"} type='Date' label={"Addition Date"} />
|
||||||
|
<ValidationField name={"status"} placeholder={"_"} label={"Status"} type='Select' option={[]} />
|
||||||
|
|
||||||
|
<ValidationField name={"full_name"} placeholder={"_"} label={"Full Name"} />
|
||||||
|
<ValidationField name={"phone_number"} placeholder={"_"} label={"Phone Number"} type='text' />
|
||||||
|
<ValidationField name={"mobile_number"} placeholder={"_"} label={"Mobile Number"} />
|
||||||
|
|
||||||
|
<ValidationField name={"username"} placeholder={"_"} label={"Username"} />
|
||||||
|
<ValidationField name={"password"} placeholder={"_"} label={"Password"} type='text' />
|
||||||
|
<ValidationField name={"seller_percentage"} placeholder={"_"} label={"Seller Percentage"} type='text' />
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PersonalDetailsForm
|
||||||
24
src/Pages/Admin/Reseller/Form/TitleDetailsForm.tsx
Normal file
24
src/Pages/Admin/Reseller/Form/TitleDetailsForm.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { FaRegAddressBook } from 'react-icons/fa'
|
||||||
|
import ValidationField from '../../../../Components/ValidationField/ValidationField';
|
||||||
|
|
||||||
|
const TitleDetailsForm = () => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='TitleDetailsForm'>
|
||||||
|
<header className='header_form'>
|
||||||
|
<FaRegAddressBook />
|
||||||
|
<h4>{t("header.address")}</h4>
|
||||||
|
</header>
|
||||||
|
<main className='main_form_body'>
|
||||||
|
<ValidationField name={"city_id"} placeholder={"_"} label={"city"} type='Select' option={[]} />
|
||||||
|
<ValidationField name={"address"} placeholder={"_"} label={"address"} />
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TitleDetailsForm
|
||||||
|
|
@ -1,13 +1,17 @@
|
||||||
import * as Yup from "yup";
|
import * as Yup from "yup";
|
||||||
export const getInitialValues = (objectToEdit: any): any => {
|
|
||||||
|
export const getInitialValues = (
|
||||||
|
objectToEdit: Partial<any>,
|
||||||
|
) => {
|
||||||
return {
|
return {
|
||||||
id: objectToEdit?.id ?? null,
|
id: objectToEdit?.id ?? null ,
|
||||||
name: objectToEdit?.name ?? null,
|
name: objectToEdit?.name ?? null,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getValidationSchema = () => {
|
export const getValidationSchema = () => {
|
||||||
|
// validate input
|
||||||
return Yup.object().shape({
|
return Yup.object().shape({
|
||||||
name: Yup.string().required("validation.required"),
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
@ -23,7 +23,6 @@ const SearchField = lazy(
|
||||||
);
|
);
|
||||||
|
|
||||||
const TableHeader = () => {
|
const TableHeader = () => {
|
||||||
const { handel_open_model } = useModalHandler();
|
|
||||||
const [t] = useTranslation();
|
const [t] = useTranslation();
|
||||||
useSetPageTitle(t(`page_header.reseller`));
|
useSetPageTitle(t(`page_header.reseller`));
|
||||||
const deleteMutation = useDeleteTag();
|
const deleteMutation = useDeleteTag();
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ const TableHeader = () => {
|
||||||
const [t] = useTranslation();
|
const [t] = useTranslation();
|
||||||
const deleteMutation = useDeleteUnit();
|
const deleteMutation = useDeleteUnit();
|
||||||
|
|
||||||
const { subject_id, grade_id, curriculum_id } = useParams<ParamsEnum>();
|
const { subject_id, grade_id } = useParams<ParamsEnum>();
|
||||||
|
|
||||||
const { data: Subject } = useGetAllSubject({
|
const { data: Subject } = useGetAllSubject({
|
||||||
show: subject_id,
|
show: subject_id,
|
||||||
|
|
@ -39,28 +39,24 @@ const TableHeader = () => {
|
||||||
const SubjectName = Subject?.data?.name ?? "";
|
const SubjectName = Subject?.data?.name ?? "";
|
||||||
useSetPageTitle(
|
useSetPageTitle(
|
||||||
t(`page_header.grade`) +
|
t(`page_header.grade`) +
|
||||||
"/" +
|
" / " +
|
||||||
gradeName +
|
` ${t("header.subject_of_class")} (${gradeName})` +
|
||||||
"/" +
|
" / " +
|
||||||
t(`PageTitle.subject`) +
|
SubjectName
|
||||||
"/" +
|
|
||||||
SubjectName +
|
|
||||||
"/" +
|
|
||||||
t("PageTitle.unit"),
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="TableWithHeader">
|
<div className="TableWithHeader">
|
||||||
<Suspense fallback={<Spin />}>
|
<Suspense fallback={<Spin />}>
|
||||||
<PageHeader
|
<PageHeader
|
||||||
pageTitle="unit"
|
pageTitle="grade"
|
||||||
ModelAbility={ModalEnum?.UNIT_ADD}
|
ModelAbility={ModalEnum?.UNIT_ADD}
|
||||||
canAdd={canAddUnit}
|
canAdd={canAddUnit}
|
||||||
/>
|
/>
|
||||||
<FilterLayout
|
<FilterLayout
|
||||||
sub_children={<FilterForm />}
|
sub_children={<FilterForm />}
|
||||||
filterTitle="sidebar.unit"
|
filterTitle={` ${gradeName} (${SubjectName}) `}
|
||||||
/>
|
/>
|
||||||
<Table />
|
<Table />
|
||||||
<AddModalForm />
|
<AddModalForm />
|
||||||
<EditModalForm />
|
<EditModalForm />
|
||||||
|
|
|
||||||
|
|
@ -44,31 +44,26 @@ const TableHeader = () => {
|
||||||
|
|
||||||
useSetPageTitle(
|
useSetPageTitle(
|
||||||
t(`page_header.grade`) +
|
t(`page_header.grade`) +
|
||||||
"/" +
|
" / " +
|
||||||
gradeName +
|
` ${t("header.subject_of_class")} (${gradeName})` +
|
||||||
"/" +
|
" / " +
|
||||||
t(`PageTitle.subject`) +
|
|
||||||
"/" +
|
|
||||||
SubjectName +
|
SubjectName +
|
||||||
"/" +
|
" / " +
|
||||||
t("PageTitle.unit") +
|
unitName
|
||||||
"/" +
|
|
||||||
unitName +
|
|
||||||
"/" +
|
|
||||||
t("PageTitle.lesson"),
|
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="TableWithHeader">
|
<div className="TableWithHeader">
|
||||||
<Suspense fallback={<Spin />}>
|
<Suspense fallback={<Spin />}>
|
||||||
<PageHeader
|
<PageHeader
|
||||||
pageTitle="lesson"
|
pageTitle="grade"
|
||||||
ModelAbility={ModalEnum?.LESSON_ADD}
|
ModelAbility={ModalEnum?.LESSON_ADD}
|
||||||
canAdd={canAddLesson}
|
canAdd={canAddLesson}
|
||||||
/>
|
/>
|
||||||
<FilterLayout
|
<FilterLayout
|
||||||
sub_children={<FilterForm />}
|
sub_children={<FilterForm />}
|
||||||
filterTitle="sidebar.lesson"
|
filterTitle={` ${SubjectName} (${unitName}) `}
|
||||||
/>
|
/>
|
||||||
<Table />
|
<Table />
|
||||||
<AddModalForm />
|
<AddModalForm />
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { Suspense, lazy } from "react";
|
import React, { Suspense, lazy, useEffect } from "react";
|
||||||
import { Spin } from "antd";
|
import { Spin } from "antd";
|
||||||
import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
|
import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
|
||||||
import {
|
import {
|
||||||
|
|
@ -18,16 +18,19 @@ import Header from "../../../Components/exercise/Header";
|
||||||
import { Question } from "../../../types/Item";
|
import { Question } from "../../../types/Item";
|
||||||
import BaseForm from "./Model/Malty/Form";
|
import BaseForm from "./Model/Malty/Form";
|
||||||
import ModelForm from "./Model/ModelForm";
|
import ModelForm from "./Model/ModelForm";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import { useFormikContext } from "formik";
|
||||||
const AcceptModal = lazy(() => import("./Model/AcceptModal"));
|
const AcceptModal = lazy(() => import("./Model/AcceptModal"));
|
||||||
|
|
||||||
const AddPage: React.FC = () => {
|
const AddPage: React.FC = () => {
|
||||||
|
|
||||||
const { mutateAsync } = useAddQuestionAsync();
|
const { mutateAsync } = useAddQuestionAsync();
|
||||||
const { mutate, isLoading } = useAddQuestion();
|
const { mutate, isLoading ,isSuccess} = useAddQuestion();
|
||||||
const {
|
const {
|
||||||
isBseQuestion,
|
isBseQuestion,
|
||||||
setTagsSearch,
|
setTagsSearch,
|
||||||
objectToEdit,
|
objectToEdit,
|
||||||
|
setSuccess
|
||||||
} = useObjectToEdit();
|
} = useObjectToEdit();
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -35,8 +38,9 @@ const AddPage: React.FC = () => {
|
||||||
const { subject_id, lesson_id } =
|
const { subject_id, lesson_id } =
|
||||||
useParams<ParamsEnum>();
|
useParams<ParamsEnum>();
|
||||||
|
|
||||||
|
console.log(objectToEdit,"objectToEdit");
|
||||||
|
|
||||||
|
|
||||||
const handleSubmit = (
|
const handleSubmit = (
|
||||||
values: any,
|
values: any,
|
||||||
{ resetForm }: { resetForm: () => void },
|
{ resetForm }: { resetForm: () => void },
|
||||||
|
|
@ -70,7 +74,14 @@ const AddPage: React.FC = () => {
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
console.log(answers);
|
console.log(answers);
|
||||||
|
if(answers?.length > 0){
|
||||||
|
const isValidAnswers = answers?.some((answer:any) => answer?.isCorrect === 1)
|
||||||
|
|
||||||
|
if(!isValidAnswers){
|
||||||
|
toast.error(t("validation.at_least_one_answer_should_be_correct"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
mutate({
|
mutate({
|
||||||
...item,
|
...item,
|
||||||
parent_id: newBseQuestionId,
|
parent_id: newBseQuestionId,
|
||||||
|
|
@ -84,13 +95,25 @@ const AddPage: React.FC = () => {
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
const tags = processTags(DataToSend);
|
const tags = processTags(DataToSend);
|
||||||
|
|
||||||
const answers = values?.answers?.map((item: any, index: number) => {
|
const answers = values?.answers?.map((item: any, index: number) => {
|
||||||
|
console.log(item,"item");
|
||||||
|
|
||||||
return {
|
return {
|
||||||
order: index,
|
order: index,
|
||||||
...item,
|
...item,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if(answers?.length > 0){
|
||||||
|
|
||||||
|
const isValidAnswers = answers?.some((answer:any) => answer?.isCorrect === 1)
|
||||||
|
|
||||||
|
if(!isValidAnswers){
|
||||||
|
toast.error(t("validation.at_least_one_answer_should_be_correct"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const NewQuestion = {
|
const NewQuestion = {
|
||||||
...values,
|
...values,
|
||||||
subject_id: subject_id,
|
subject_id: subject_id,
|
||||||
|
|
@ -115,6 +138,13 @@ const AddPage: React.FC = () => {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
console.log("all api success");
|
||||||
|
if(isSuccess){
|
||||||
|
|
||||||
|
setSuccess(true )
|
||||||
|
}
|
||||||
|
}, [isSuccess])
|
||||||
|
|
||||||
if (isBseQuestion) {
|
if (isBseQuestion) {
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -100,7 +100,16 @@ const EditPage: React.FC = () => {
|
||||||
const tags = processTags(updatedObject);
|
const tags = processTags(updatedObject);
|
||||||
const oldAnswers = [] as any;
|
const oldAnswers = [] as any;
|
||||||
const newAnswers = [] as any;
|
const newAnswers = [] as any;
|
||||||
|
|
||||||
|
if(updatedObject?.answers?.length > 0){
|
||||||
|
|
||||||
|
const isValidAnswers = updatedObject?.answers?.some((answer:any) => answer?.isCorrect === 1)
|
||||||
|
|
||||||
|
if(!isValidAnswers){
|
||||||
|
toast.error(t("validation.at_least_one_answer_should_be_correct"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
updatedObject?.answers?.forEach((item: any) => {
|
updatedObject?.answers?.forEach((item: any) => {
|
||||||
if (item?.id) {
|
if (item?.id) {
|
||||||
oldAnswers.push({...item,isCorrect:item?.isCorrect ? 1 : 0});
|
oldAnswers.push({...item,isCorrect:item?.isCorrect ? 1 : 0});
|
||||||
|
|
@ -139,13 +148,21 @@ const EditPage: React.FC = () => {
|
||||||
const updatedObject = removeStringKeys(DataToSend, keysToRemove);
|
const updatedObject = removeStringKeys(DataToSend, keysToRemove);
|
||||||
delete updatedObject["parent_id"];
|
delete updatedObject["parent_id"];
|
||||||
const tags = processTags(updatedObject);
|
const tags = processTags(updatedObject);
|
||||||
if (!updatedObject?.content_image) {
|
if (!values?.content_image) {
|
||||||
updatedObject["content_image"] = "";
|
updatedObject["content_image"] = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
const oldAnswers = [] as any;
|
const oldAnswers = [] as any;
|
||||||
const newAnswers = [] as any;
|
const newAnswers = [] as any;
|
||||||
|
if(updatedObject?.answers?.length > 0){
|
||||||
|
|
||||||
|
const isValidAnswers = updatedObject?.answers?.some((answer:any) => answer?.isCorrect === 1)
|
||||||
|
|
||||||
|
if(!isValidAnswers){
|
||||||
|
toast.error(t("validation.at_least_one_answer_should_be_correct"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
updatedObject?.answers?.forEach((item: any) => {
|
updatedObject?.answers?.forEach((item: any) => {
|
||||||
if (item?.id) {
|
if (item?.id) {
|
||||||
oldAnswers.push({...item,isCorrect:item?.isCorrect ? 1 : 0});
|
oldAnswers.push({...item,isCorrect:item?.isCorrect ? 1 : 0});
|
||||||
|
|
@ -168,12 +185,12 @@ const EditPage: React.FC = () => {
|
||||||
navigate(-1);
|
navigate(-1);
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
if (isSuccess) {
|
// if (isSuccess) {
|
||||||
toast.success(t("validation.the_possess_done_successful"));
|
// toast.success(t("validation.the_possess_done_successful"));
|
||||||
navigate(-1);
|
// navigate(-1);
|
||||||
}
|
// }
|
||||||
}, [isSuccess]);
|
// }, [isSuccess]);
|
||||||
|
|
||||||
if (dataLoading || QuestionsDataLoading) {
|
if (dataLoading || QuestionsDataLoading) {
|
||||||
return <SpinContainer />;
|
return <SpinContainer />;
|
||||||
|
|
|
||||||
|
|
@ -18,13 +18,6 @@ const Form = () => {
|
||||||
const formik = useFormikContext<any>();
|
const formik = useFormikContext<any>();
|
||||||
const { setSuccess, Success, setSavedQuestionData } = useObjectToEdit();
|
const { setSuccess, Success, setSavedQuestionData } = useObjectToEdit();
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (Success) {
|
|
||||||
formik.setErrors({});
|
|
||||||
formik.resetForm({ values: {} });
|
|
||||||
setSuccess(false);
|
|
||||||
}
|
|
||||||
}, [Success]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setSavedQuestionData(formik.values);
|
setSavedQuestionData(formik.values);
|
||||||
|
|
|
||||||
|
|
@ -16,21 +16,10 @@ import { toast } from "react-toastify";
|
||||||
const Form = () => {
|
const Form = () => {
|
||||||
const [t] = useTranslation();
|
const [t] = useTranslation();
|
||||||
const formik = useFormikContext<any>();
|
const formik = useFormikContext<any>();
|
||||||
const { setSuccess, Success, setSavedQuestionData } = useObjectToEdit();
|
const { setSuccess, Success } = useObjectToEdit();
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (Success) {
|
|
||||||
formik.setErrors({});
|
|
||||||
formik.resetForm({ values: {} });
|
|
||||||
setSuccess(false);
|
|
||||||
}
|
|
||||||
}, [Success]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log(formik.values, "formik.values");
|
|
||||||
|
|
||||||
setSavedQuestionData(formik.values);
|
|
||||||
}, [formik?.values]);
|
|
||||||
|
|
||||||
const handleAddChoice = (fromKeyCombination:boolean = false ) => {
|
const handleAddChoice = (fromKeyCombination:boolean = false ) => {
|
||||||
|
|
||||||
|
|
@ -54,8 +43,20 @@ const Form = () => {
|
||||||
handleAddChoice(true)
|
handleAddChoice(true)
|
||||||
|
|
||||||
});
|
});
|
||||||
|
console.log(Success);
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
console.log(Success);
|
||||||
|
|
||||||
|
if(Success){
|
||||||
|
formik?.setValues({})
|
||||||
|
formik.setErrors({})
|
||||||
|
setSuccess(false)
|
||||||
|
console.log(formik.errors);
|
||||||
|
|
||||||
|
}
|
||||||
|
}, [Success])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Row className="w-100 exercise_form_container">
|
<Row className="w-100 exercise_form_container">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import * as Yup from "yup";
|
import * as Yup from "yup";
|
||||||
import { Question } from "../../../../types/Item";
|
import { Question } from "../../../../types/Item";
|
||||||
import { getLocalStorage } from "../../../../utils/LocalStorage";
|
|
||||||
import { QUESTION_OBJECT_KEY } from "../../../../config/AppKey";
|
|
||||||
|
|
||||||
export const getInitialValues = (objectToEdit: Question): any => {
|
export const getInitialValues = (objectToEdit: Question): any => {
|
||||||
const tags = objectToEdit?.tags?.map((item: any, index: number) => {
|
const tags = objectToEdit?.tags?.map((item: any, index: number) => {
|
||||||
|
|
@ -35,7 +34,7 @@ export const getValidationSchema = () => {
|
||||||
isCorrect: Yup.boolean(),
|
isCorrect: Yup.boolean(),
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
.nullable("Params are required"),
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -46,29 +46,21 @@ const TableHeader = () => {
|
||||||
|
|
||||||
useSetPageTitle(
|
useSetPageTitle(
|
||||||
t(`page_header.grade`) +
|
t(`page_header.grade`) +
|
||||||
"/" +
|
" / " +
|
||||||
gradeName +
|
` ${t("header.subject_of_class")} (${gradeName})` +
|
||||||
"/" +
|
" / " +
|
||||||
t(`PageTitle.subject`) +
|
|
||||||
"/" +
|
|
||||||
SubjectName +
|
SubjectName +
|
||||||
"/" +
|
" / " +
|
||||||
t("PageTitle.unit") +
|
unitName +
|
||||||
"/" +
|
" / " +
|
||||||
unitName +
|
LessonName
|
||||||
"/" +
|
|
||||||
t("PageTitle.lesson") +
|
|
||||||
"/" +
|
|
||||||
LessonName +
|
|
||||||
"/" +
|
|
||||||
t("PageTitle.question"),
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="TableWithHeader">
|
<div className="TableWithHeader">
|
||||||
<Suspense fallback={<Spin />}>
|
<Suspense fallback={<Spin />}>
|
||||||
<PageHeader
|
<PageHeader
|
||||||
pageTitle="question"
|
pageTitle="grade"
|
||||||
ModelAbility={ModalEnum?.QUESTION_ACCEPT}
|
ModelAbility={ModalEnum?.QUESTION_ACCEPT}
|
||||||
canAdd={canAddQuestion}
|
canAdd={canAddQuestion}
|
||||||
locationToNavigate={`${ABILITIES_ENUM?.QUESTION}/add`}
|
locationToNavigate={`${ABILITIES_ENUM?.QUESTION}/add`}
|
||||||
|
|
@ -76,8 +68,7 @@ const TableHeader = () => {
|
||||||
/>
|
/>
|
||||||
<FilterLayout
|
<FilterLayout
|
||||||
sub_children={<FilterForm />}
|
sub_children={<FilterForm />}
|
||||||
filterTitle="sidebar.question"
|
filterTitle={` ${unitName} (${LessonName}) `} />
|
||||||
/>
|
|
||||||
<Table />
|
<Table />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
<DeleteModels
|
<DeleteModels
|
||||||
|
|
|
||||||
|
|
@ -59,14 +59,6 @@ export const useColumns = () => {
|
||||||
render: (text, record) =>
|
render: (text, record) =>
|
||||||
record?.isBase ? t("practical.yes") : t("practical.no"),
|
record?.isBase ? t("practical.yes") : t("practical.no"),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: t("columns.canAnswersBeShuffled"),
|
|
||||||
dataIndex: "canAnswersBeShuffled",
|
|
||||||
key: "canAnswersBeShuffled",
|
|
||||||
align: "center",
|
|
||||||
render: (text, record) =>
|
|
||||||
record?.canAnswersBeShuffled ? t("practical.yes") : t("practical.no"),
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
{
|
||||||
title: "#",
|
title: "#",
|
||||||
|
|
|
||||||
|
|
@ -34,22 +34,20 @@ const TableWithHeader = () => {
|
||||||
const gradeName = grade?.data?.name ?? "";
|
const gradeName = grade?.data?.name ?? "";
|
||||||
useSetPageTitle(
|
useSetPageTitle(
|
||||||
t(`page_header.grade`) +
|
t(`page_header.grade`) +
|
||||||
"/" +
|
" / " +
|
||||||
`${gradeName}` +
|
` ${t("header.subject_of_class")} (${gradeName})`
|
||||||
"/" +
|
|
||||||
t(`PageTitle.subject`),
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="TableWithHeader">
|
<div className="TableWithHeader">
|
||||||
<PageHeader
|
<PageHeader
|
||||||
pageTitle="subjects"
|
pageTitle="grade"
|
||||||
ModelAbility={ModalEnum?.SUBJECT_ADD}
|
ModelAbility={ModalEnum?.SUBJECT_ADD}
|
||||||
canAdd={canAddSubject}
|
canAdd={canAddSubject}
|
||||||
/>
|
/>
|
||||||
<FilterLayout
|
<FilterLayout
|
||||||
sub_children={<FilterForm />}
|
sub_children={<FilterForm />}
|
||||||
filterTitle="sidebar.subjects"
|
filterTitle={`${t("header.subject_of_class")} (${gradeName})`}
|
||||||
/>
|
/>
|
||||||
<Table />
|
<Table />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -297,3 +297,26 @@ button:disabled {
|
||||||
.VisibleHidden {
|
.VisibleHidden {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.bg2{
|
||||||
|
background: var(--bg2);
|
||||||
|
}
|
||||||
|
.header_form{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
h4{
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
svg{
|
||||||
|
background: var(--bg);
|
||||||
|
padding: 10px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -79,7 +79,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
gap: 5%;
|
gap: 5%;
|
||||||
padding: 0.7vw 1vw;
|
padding: 12px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
a {
|
a {
|
||||||
font-size: 0.9vw;
|
font-size: 0.9vw;
|
||||||
|
|
@ -98,7 +98,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.side_bar_setting {
|
.side_bar_setting {
|
||||||
gap: 0.5vw;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
padding-inline: 7%;
|
padding-inline: 7%;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|
@ -111,8 +113,8 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: start;
|
justify-content: start;
|
||||||
background: inherit;
|
background: inherit;
|
||||||
font-size: 0.8vw;
|
font-size: 20px;
|
||||||
height: 2.5vw;
|
// height: 2.5vw;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
|
|
@ -121,6 +123,7 @@
|
||||||
border: none;
|
border: none;
|
||||||
color: var(--borderColor);
|
color: var(--borderColor);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,3 +9,4 @@
|
||||||
@import "./subject.scss";
|
@import "./subject.scss";
|
||||||
@import "./Marks.scss";
|
@import "./Marks.scss";
|
||||||
@import "./exercise.scss";
|
@import "./exercise.scss";
|
||||||
|
@import './reSeller.scss';
|
||||||
50
src/Styles/Pages/reSeller.scss
Normal file
50
src/Styles/Pages/reSeller.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
.main_form_body{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
background: var(--bg);
|
||||||
|
padding: 40px 10px;
|
||||||
|
>*{
|
||||||
|
// max-width: 30%;
|
||||||
|
flex-basis: 33%;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.AttachmentForm{
|
||||||
|
.main_form_body{
|
||||||
|
padding: 30px 50px;
|
||||||
|
gap: 40px;
|
||||||
|
>*{
|
||||||
|
// max-width: 30%;
|
||||||
|
flex-basis: 10%;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.resellerButton{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
button{
|
||||||
|
all: unset;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px 26px;
|
||||||
|
font-size: 15px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: var(--primary);
|
||||||
|
color: var(--white);
|
||||||
|
&:first-child{
|
||||||
|
background: #F2F4F8;
|
||||||
|
color: #515B73;
|
||||||
|
box-shadow: 0px 0px 4px rgb(0, 0, 0,.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -19,6 +19,6 @@ export const useAddQuestion = () => useAddMutation(KEY, API.ADD, true);
|
||||||
export const useAddQuestionAsync = () => useAddMutation(KEY2, API.ADD);
|
export const useAddQuestionAsync = () => useAddMutation(KEY2, API.ADD);
|
||||||
|
|
||||||
export const useUpdateQuestion = (params?: any) =>
|
export const useUpdateQuestion = (params?: any) =>
|
||||||
useUpdateMutation(KEY, API.GET, false);
|
useUpdateMutation(KEY, API.GET, true);
|
||||||
export const useDeleteQuestion = (params?: any) =>
|
export const useDeleteQuestion = (params?: any) =>
|
||||||
useDeleteMutation(KEY, API.DELETE);
|
useDeleteMutation(KEY, API.DELETE);
|
||||||
|
|
|
||||||
|
|
@ -23,8 +23,8 @@ function useGetQuery(
|
||||||
const { page, per_page } = PaginationParams(location);
|
const { page, per_page } = PaginationParams(location);
|
||||||
|
|
||||||
const paramToSend = pagination
|
const paramToSend = pagination
|
||||||
? { page: page, per_page: per_page, ...remainingParams , sort_by,name }
|
? { page: page, per_page: per_page, name,...remainingParams , sort_by }
|
||||||
: { ...remainingParams ,sort_by,name};
|
: { name,...remainingParams ,sort_by};
|
||||||
|
|
||||||
const filteredParams = filterParams(paramToSend);
|
const filteredParams = filterParams(paramToSend);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,8 @@
|
||||||
"Due_date_must_be_before_assigning_date": "يجب أن يكون تاريخ الاستحقاق بعد تاريخ التعيين",
|
"Due_date_must_be_before_assigning_date": "يجب أن يكون تاريخ الاستحقاق بعد تاريخ التعيين",
|
||||||
"grade_to_pass_must_be_less_than_max_grade": "يجب أن تكون درجة النجاح أقل من الحد الأقصى للدرجة",
|
"grade_to_pass_must_be_less_than_max_grade": "يجب أن تكون درجة النجاح أقل من الحد الأقصى للدرجة",
|
||||||
"max_mark_must_be_greater_than_min_mark_to_pass": "يجب ان تكون اكبر من علامة النجاح",
|
"max_mark_must_be_greater_than_min_mark_to_pass": "يجب ان تكون اكبر من علامة النجاح",
|
||||||
"Sorry, the question must have at least one option": "عذرًا، يجب أن يحتوي السؤال على خيار واحد على الأقل"
|
"Sorry, the question must have at least one option": "عذرًا، يجب أن يحتوي السؤال على خيار واحد على الأقل",
|
||||||
|
"at_least_one_answer_should_be_correct":"يجب أن تكون إجابة واحدة على الأقل صحيحة"
|
||||||
},
|
},
|
||||||
"header": {
|
"header": {
|
||||||
"register_students": "تسجيل الطلاب",
|
"register_students": "تسجيل الطلاب",
|
||||||
|
|
@ -115,7 +116,14 @@
|
||||||
"add_question": "اضافة سؤال",
|
"add_question": "اضافة سؤال",
|
||||||
"new_choice_have_been_added": "تم إضافة خيار جديد",
|
"new_choice_have_been_added": "تم إضافة خيار جديد",
|
||||||
"new_question_have_been_added": "تم إضافة سؤال جديد",
|
"new_question_have_been_added": "تم إضافة سؤال جديد",
|
||||||
"sort_by":"ترتيب حسب"
|
"sort_by":"ترتيب حسب",
|
||||||
|
"filter":"تصفية",
|
||||||
|
"per_page":"صف لكل صفحة",
|
||||||
|
"entries":"ادخالات",
|
||||||
|
"personal_information":"المعلومات الشخصية",
|
||||||
|
"address":"العنوان",
|
||||||
|
"attachment":"المرفق",
|
||||||
|
"subject_of_class":"مواد الصف"
|
||||||
},
|
},
|
||||||
"columns": {
|
"columns": {
|
||||||
"id": "الرقم التعريفي",
|
"id": "الرقم التعريفي",
|
||||||
|
|
@ -182,7 +190,7 @@
|
||||||
"save": "حفظ",
|
"save": "حفظ",
|
||||||
"enter": "ادخال",
|
"enter": "ادخال",
|
||||||
"delete": "حذف",
|
"delete": "حذف",
|
||||||
"cancel": "إلغاء",
|
"cancel": "إلغاء الأمر",
|
||||||
"search_here": "بحث",
|
"search_here": "بحث",
|
||||||
"details": "تفاصيل",
|
"details": "تفاصيل",
|
||||||
"export_students": "تصدير الطلاب",
|
"export_students": "تصدير الطلاب",
|
||||||
|
|
@ -392,7 +400,17 @@
|
||||||
"hint_question": "شرح السؤال",
|
"hint_question": "شرح السؤال",
|
||||||
"_": "",
|
"_": "",
|
||||||
"key": "المفتاح",
|
"key": "المفتاح",
|
||||||
"canAnswersBeShuffled": "يمكن خلط الإجابات"
|
"canAnswersBeShuffled": "يمكن خلط الإجابات",
|
||||||
|
"ID Number": "رقم الهوية",
|
||||||
|
"Addition Date": "تاريخ الإضافة",
|
||||||
|
"Status": "الحالة",
|
||||||
|
"Full Name": "الاسم الثلاثي",
|
||||||
|
"Phone Number": "رقم الهاتف",
|
||||||
|
"Mobile Number": "رقم الموبايل",
|
||||||
|
"Seller Percentage": "نسبة البائع",
|
||||||
|
"city":"المحافظة",
|
||||||
|
"personal_image":"صورة شخصية",
|
||||||
|
"id_image":"صورة الهوية"
|
||||||
},
|
},
|
||||||
"select": {
|
"select": {
|
||||||
"Payments": {
|
"Payments": {
|
||||||
|
|
@ -739,12 +757,14 @@
|
||||||
"edit": "تعديل",
|
"edit": "تعديل",
|
||||||
"questions": "اسئلة",
|
"questions": "اسئلة",
|
||||||
"lesson": "الدرس",
|
"lesson": "الدرس",
|
||||||
"subject": "مواد",
|
"subjects": "مواد",
|
||||||
"curriculum": "مقرر",
|
"curriculum": "مقرر",
|
||||||
"question": "السؤال",
|
"question": "السؤال",
|
||||||
"user": "مستخدم",
|
"user": "مستخدم",
|
||||||
"param": "معامل",
|
"param": "معامل",
|
||||||
"student_package": "حزمة الطالب"
|
"student_package": "حزمة الطالب",
|
||||||
|
"add_reseller":"إضافة بائع",
|
||||||
|
"grade":"الصفوف"
|
||||||
},
|
},
|
||||||
"page_header": {
|
"page_header": {
|
||||||
"dashboard": "لوحة القيادة / الصفحة الرئيسية",
|
"dashboard": "لوحة القيادة / الصفحة الرئيسية",
|
||||||
|
|
@ -775,16 +795,19 @@
|
||||||
"Question": "لوحة القيادة /اسئلة ",
|
"Question": "لوحة القيادة /اسئلة ",
|
||||||
"add_Question": "لوحة القيادة /إضافة اسئلة ",
|
"add_Question": "لوحة القيادة /إضافة اسئلة ",
|
||||||
"edit_Question": "لوحة القيادة /تعديل اسئلة ",
|
"edit_Question": "لوحة القيادة /تعديل اسئلة ",
|
||||||
"grade": "الصفوف",
|
"grade": "لوحة القيادة / الصفوف",
|
||||||
"report": "تقرير",
|
"report": "تقرير",
|
||||||
"user": "مستخدم",
|
"user": "مستخدم",
|
||||||
"reseller": " لوحة القيادة / البائعين",
|
"reseller": " لوحة القيادة / البائعين",
|
||||||
|
"add_reseller": " لوحة القيادة / البائعين / إضافة بائع ",
|
||||||
"param": "معامل",
|
"param": "معامل",
|
||||||
"student_package": "حزمة الطالب"
|
"student_package": "حزمة الطالب"
|
||||||
},
|
},
|
||||||
"table": {
|
"table": {
|
||||||
"student": "قائمة الطلاب",
|
"student": "قائمة الطلاب",
|
||||||
"reseller": "البائعين"
|
"reseller": "البائعين",
|
||||||
|
"grade":"قائمة الصفوف",
|
||||||
|
"subjects":"مواد الصف"
|
||||||
},
|
},
|
||||||
"alphabet": {
|
"alphabet": {
|
||||||
"A": "A",
|
"A": "A",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user