format
This commit is contained in:
karimaldeen
parent
1a78474120
commit
398d1e8f07
8623
pnpm-lock.yaml
8623
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -1,12 +1,11 @@
|
|||
.ImageBoxField {
|
||||
|
||||
.ImageBox {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: max(1.5px,.1vw) dashed #a9c3f1;
|
||||
border: max(1.5px, 0.1vw) dashed #a9c3f1;
|
||||
margin-block: 10px;
|
||||
border-radius: 5px;
|
||||
.ImageBoxIcon {
|
||||
|
|
@ -19,15 +18,12 @@
|
|||
object-fit: contain;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.ImageHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
|
||||
}
|
||||
|
||||
.ImageCancelIcon {
|
||||
|
|
@ -38,5 +34,4 @@
|
|||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { useFormikContext } from "formik";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import './ImageBoxField.scss';
|
||||
import "./ImageBoxField.scss";
|
||||
import ImageIcon from "./ImageIcon";
|
||||
import ImageCancelIcon from "./ImageCancelIcon";
|
||||
import { getNestedValue } from "../../../utils/getNestedValue";
|
||||
|
|
@ -8,7 +8,6 @@ import { generateImagePreview } from "./generateImagePreview";
|
|||
|
||||
// Helper function to generate image preview from a File
|
||||
|
||||
|
||||
const ImageBoxField = ({ name }: any) => {
|
||||
const formik = useFormikContext<any>();
|
||||
const value = getNestedValue(formik.values, name);
|
||||
|
|
@ -21,7 +20,7 @@ const ImageBoxField = ({ name }: any) => {
|
|||
useEffect(() => {
|
||||
if (value instanceof File) {
|
||||
generateImagePreview(value, setImagePreview);
|
||||
} else if (typeof value === 'string') {
|
||||
} else if (typeof value === "string") {
|
||||
setImagePreview(value);
|
||||
} else {
|
||||
setImagePreview(null);
|
||||
|
|
@ -57,13 +56,14 @@ const ImageBoxField = ({ name }: any) => {
|
|||
<div className="ImageHeader">
|
||||
{imagePreview ? (
|
||||
<>
|
||||
<ImageCancelIcon onClick={handleCancel} className="ImageCancelIcon" />
|
||||
<ImageCancelIcon
|
||||
onClick={handleCancel}
|
||||
className="ImageCancelIcon"
|
||||
/>
|
||||
<ImageIcon onClick={handleButtonClick} className="ImageBoxIcon" />
|
||||
</>
|
||||
) : (
|
||||
<div className="VisibleHidden">
|
||||
hidden
|
||||
</div>
|
||||
<div className="VisibleHidden">hidden</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="ImageBox">
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
return (
|
||||
<div {...props}>
|
||||
<svg
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<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;
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
return (
|
||||
<div {...props}>
|
||||
<svg
|
||||
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<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"
|
||||
|
|
@ -19,9 +13,6 @@ const ImageIcon: React.FC<ImageIconProps> = (props) => {
|
|||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default ImageIcon;
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
reader.onloadend = () => {
|
||||
setImagePreview(reader.result as string);
|
||||
|
|
|
|||
|
|
@ -1,36 +1,33 @@
|
|||
import React, { useState, useMemo } from 'react';
|
||||
import { Select, Spin } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDebounce } from '../../utils/useDebounce';
|
||||
import { useGetAllTag } from '../../api/tags';
|
||||
import { useFormikContext } from 'formik';
|
||||
import React, { useState, useMemo } from "react";
|
||||
import { Select, Spin } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDebounce } from "../../utils/useDebounce";
|
||||
import { useGetAllTag } from "../../api/tags";
|
||||
import { useFormikContext } from "formik";
|
||||
|
||||
const SelectTag: React.FC = () => {
|
||||
const [searchValue, setSearchValue] = useState<string>('');
|
||||
const [fieldValue, setFieldValue] = useState<string>('');
|
||||
const formik = useFormikContext<any>()
|
||||
const [searchValue, setSearchValue] = useState<string>("");
|
||||
const [fieldValue, setFieldValue] = useState<string>("");
|
||||
const formik = useFormikContext<any>();
|
||||
const handleChange = (value: string[]) => {
|
||||
console.log(value);
|
||||
|
||||
formik.setFieldValue("tags",value)
|
||||
setSearchValue('');
|
||||
setFieldValue('');
|
||||
|
||||
formik.setFieldValue("tags", value);
|
||||
setSearchValue("");
|
||||
setFieldValue("");
|
||||
};
|
||||
|
||||
const handleSearch = useDebounce((value: string) => {
|
||||
setSearchValue(value);
|
||||
|
||||
});
|
||||
|
||||
const handleFieldChange = (value: string) => {
|
||||
setFieldValue(value);
|
||||
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
setSearchValue('');
|
||||
setFieldValue('');
|
||||
setSearchValue("");
|
||||
setFieldValue("");
|
||||
};
|
||||
|
||||
const { data, isLoading } = useGetAllTag({
|
||||
|
|
@ -39,21 +36,21 @@ const SelectTag: React.FC = () => {
|
|||
|
||||
const [t] = useTranslation();
|
||||
|
||||
const options = data?.data ?? []
|
||||
const additionalData = options?.length < 1 && searchValue.length > 1 && !isLoading ? [{id:`${searchValue}`,name:searchValue}] :[];
|
||||
const options = data?.data ?? [];
|
||||
const additionalData =
|
||||
options?.length < 1 && searchValue.length > 1 && !isLoading
|
||||
? [{ id: `${searchValue}`, name: searchValue }]
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className='SelectTag'>
|
||||
|
||||
<label htmlFor="">
|
||||
{t("models.tag")}
|
||||
</label>
|
||||
<div className="SelectTag">
|
||||
<label htmlFor="">{t("models.tag")}</label>
|
||||
<Select
|
||||
mode="multiple"
|
||||
allowClear
|
||||
style={{ width: '100%' ,height:"40px"}}
|
||||
style={{ width: "100%", height: "40px" }}
|
||||
placeholder=""
|
||||
fieldNames={{ label: 'name', value: 'id' }}
|
||||
fieldNames={{ label: "name", value: "id" }}
|
||||
onChange={handleChange}
|
||||
options={[...options, ...additionalData]}
|
||||
filterOption={false}
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@ interface Props {
|
|||
options: Option[];
|
||||
placeholder: string;
|
||||
onSelect?: (option: Option) => void;
|
||||
withIcon?:boolean
|
||||
withIcon?: boolean;
|
||||
}
|
||||
|
||||
const SearchFieldWithSelect: React.FC<Props> = ({
|
||||
options,
|
||||
placeholder,
|
||||
onSelect,
|
||||
withIcon=false
|
||||
withIcon = false,
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedOption, setSelectedOption] = useState<Option | null>(null);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React, { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Divider, Select } from 'antd';
|
||||
import SearchFieldWithSelect from '../../Components/DataTable/SearchFieldWithSelect';
|
||||
import { translateOptions } from '../../utils/translatedOptions';
|
||||
import { search_array } from '../../Routes';
|
||||
import { useFilterStateState } from '../../zustand/Filter';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Divider, Select } from "antd";
|
||||
import SearchFieldWithSelect from "../../Components/DataTable/SearchFieldWithSelect";
|
||||
import { translateOptions } from "../../utils/translatedOptions";
|
||||
import { search_array } from "../../Routes";
|
||||
import { useFilterStateState } from "../../zustand/Filter";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { TbReorder } from "react-icons/tb";
|
||||
|
||||
const OrderBySelect = () => {
|
||||
|
|
@ -13,7 +13,7 @@ const OrderBySelect = () => {
|
|||
const { Filter, setFilter } = useFilterStateState();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
|
||||
const type_param = searchParams.get('type');
|
||||
const type_param = searchParams.get("type");
|
||||
const [type, setType] = useState(type_param);
|
||||
const translateArray = translateOptions(search_array, t);
|
||||
const handleChange = (value: string) => {
|
||||
|
|
@ -23,7 +23,7 @@ const OrderBySelect = () => {
|
|||
{ name: value, index: Filter.length, select: true },
|
||||
]);
|
||||
if (type_param) {
|
||||
searchParams.delete('type');
|
||||
searchParams.delete("type");
|
||||
setSearchParams(searchParams);
|
||||
}
|
||||
setType(value);
|
||||
|
|
@ -33,12 +33,16 @@ const OrderBySelect = () => {
|
|||
// type: type,
|
||||
// page: currentPage,
|
||||
return (
|
||||
<div className='order_by_filter'>
|
||||
<div className="order_by_filter">
|
||||
<Select
|
||||
className='order_by_select'
|
||||
className="order_by_select"
|
||||
style={{ width: 200 }}
|
||||
size="large"
|
||||
placeholder={<div><TbReorder className='addition_select_icon'/> {t("ترتيب حسب")} </div>}
|
||||
placeholder={
|
||||
<div>
|
||||
<TbReorder className="addition_select_icon" /> {t("ترتيب حسب")}{" "}
|
||||
</div>
|
||||
}
|
||||
onChange={handleChange}
|
||||
options={[
|
||||
{ value: "تصاعديا", label: t("تصاعديا") },
|
||||
|
|
@ -48,7 +52,7 @@ const OrderBySelect = () => {
|
|||
]}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default OrderBySelect
|
||||
export default OrderBySelect;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
import React, { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Divider, Select } from 'antd';
|
||||
import SearchFieldWithSelect from '../../Components/DataTable/SearchFieldWithSelect';
|
||||
import { translateOptions } from '../../utils/translatedOptions';
|
||||
import { search_array } from '../../Routes';
|
||||
import { useFilterStateState } from '../../zustand/Filter';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Divider, Select } from "antd";
|
||||
import SearchFieldWithSelect from "../../Components/DataTable/SearchFieldWithSelect";
|
||||
import { translateOptions } from "../../utils/translatedOptions";
|
||||
import { search_array } from "../../Routes";
|
||||
import { useFilterStateState } from "../../zustand/Filter";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
|
||||
const PaginationColumn = () => {
|
||||
|
||||
const { t } = useTranslation();
|
||||
const { Filter, setFilter } = useFilterStateState();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
|
||||
const type_param = searchParams.get('type');
|
||||
const type_param = searchParams.get("type");
|
||||
const [type, setType] = useState(type_param);
|
||||
const translateArray = translateOptions(search_array, t);
|
||||
const handleChange = (value: string) => {
|
||||
|
|
@ -23,7 +22,7 @@ const PaginationColumn = () => {
|
|||
{ name: value, index: Filter.length, select: true },
|
||||
]);
|
||||
if (type_param) {
|
||||
searchParams.delete('type');
|
||||
searchParams.delete("type");
|
||||
setSearchParams(searchParams);
|
||||
}
|
||||
setType(value);
|
||||
|
|
@ -33,9 +32,9 @@ const PaginationColumn = () => {
|
|||
// type: type,
|
||||
// page: currentPage,
|
||||
return (
|
||||
<div className='pagination_column'>
|
||||
<div className="pagination_column">
|
||||
<Select
|
||||
className='pagination_select'
|
||||
className="pagination_select"
|
||||
style={{ width: 70 }}
|
||||
size="large"
|
||||
defaultValue={"10"}
|
||||
|
|
@ -49,7 +48,7 @@ const PaginationColumn = () => {
|
|||
]}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default PaginationColumn
|
||||
export default PaginationColumn;
|
||||
|
|
|
|||
|
|
@ -26,11 +26,28 @@ const NavBarRightSide = () => {
|
|||
};
|
||||
return (
|
||||
<article>
|
||||
|
||||
<span className="header_icons">
|
||||
<TooltipComp note="change_language" 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} /> </>}/>
|
||||
<TooltipComp
|
||||
note="change_language"
|
||||
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>
|
||||
<div className="header_profile">
|
||||
{/* <span>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,21 @@
|
|||
import React from 'react'
|
||||
import React from "react";
|
||||
import { Tooltip } from "antd";
|
||||
import { ModalEnum } from '../../../enums/Model';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { CiCirclePlus } from 'react-icons/ci';
|
||||
import useModalHandler from '../../../utils/useModalHandler';
|
||||
|
||||
const TooltipComp = ({note,color,icon,className=""}:{note:string,color:string,icon:any,className?:string}) => {
|
||||
import { ModalEnum } from "../../../enums/Model";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { CiCirclePlus } from "react-icons/ci";
|
||||
import useModalHandler from "../../../utils/useModalHandler";
|
||||
|
||||
const TooltipComp = ({
|
||||
note,
|
||||
color,
|
||||
icon,
|
||||
className = "",
|
||||
}: {
|
||||
note: string;
|
||||
color: string;
|
||||
icon: any;
|
||||
className?: string;
|
||||
}) => {
|
||||
const [t] = useTranslation();
|
||||
const { handel_open_model } = useModalHandler();
|
||||
|
||||
|
|
@ -17,19 +26,13 @@ const TooltipComp = ({note,color,icon,className=""}:{note:string,color:string,ic
|
|||
<div className={className}>
|
||||
<Tooltip
|
||||
placement="top"
|
||||
title={
|
||||
<div onClick={handleEdit}>
|
||||
{t(`header.${note}`)}
|
||||
</div>
|
||||
}
|
||||
title={<div onClick={handleEdit}>{t(`header.${note}`)}</div>}
|
||||
color={color}
|
||||
>
|
||||
<div className={`gear `}>
|
||||
{icon}
|
||||
</div>
|
||||
<div className={`gear `}>{icon}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default TooltipComp
|
||||
export default TooltipComp;
|
||||
|
|
|
|||
|
|
@ -21,17 +21,23 @@ export const MenuItem = ({ item, location, index, isOpen }: any) => {
|
|||
>
|
||||
<i>{item.icon}</i>
|
||||
{/* 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)}
|
||||
</span>
|
||||
{item?.children && (
|
||||
<>
|
||||
{isDropdownOpen ? (
|
||||
<div className="DropDownIcon" onClick={() => handleDropdown(index)}>
|
||||
<div
|
||||
className="DropDownIcon"
|
||||
onClick={() => handleDropdown(index)}
|
||||
>
|
||||
<MdExpandLess />
|
||||
</div>
|
||||
) : (
|
||||
<div className="DropDownIcon" onClick={() => handleDropdown(index)}>
|
||||
<div
|
||||
className="DropDownIcon"
|
||||
onClick={() => handleDropdown(index)}
|
||||
>
|
||||
<MdExpandMore />
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,11 +1,15 @@
|
|||
import React from 'react';
|
||||
import Lottie from 'lottie-react'; // Default import
|
||||
import animationData from './Loading.json'; // Import your Lottie JSON animation
|
||||
import React from "react";
|
||||
import Lottie from "lottie-react"; // Default import
|
||||
import animationData from "./Loading.json"; // Import your Lottie JSON animation
|
||||
|
||||
const LoadingLottie = () => {
|
||||
return (
|
||||
<div className="cc">
|
||||
<Lottie animationData={animationData} loop={true} style={{ width: 300, height: 300 }} />
|
||||
<Lottie
|
||||
animationData={animationData}
|
||||
loop={true}
|
||||
style={{ width: 300, height: 300 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,11 +1,15 @@
|
|||
import React from 'react';
|
||||
import Lottie from 'lottie-react'; // Default import
|
||||
import animationData from './NotFound.json'; // Import your Lottie JSON animation
|
||||
import React from "react";
|
||||
import Lottie from "lottie-react"; // Default import
|
||||
import animationData from "./NotFound.json"; // Import your Lottie JSON animation
|
||||
|
||||
const NotFoundLottie = () => {
|
||||
return (
|
||||
<div className="cc">
|
||||
<Lottie animationData={animationData} loop={true} style={{ width: 300, height: 300 }} />
|
||||
<Lottie
|
||||
animationData={animationData}
|
||||
loop={true}
|
||||
style={{ width: 300, height: 300 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -48,11 +48,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
|
|||
|
||||
{canDelete && (
|
||||
// <Tooltip placement="top" title={t(deleteTooltipTitle)} color="#E0E0E0">
|
||||
<GoTrash
|
||||
onClick={onDelete}
|
||||
size={22}
|
||||
style={{ color: "#A098AE" }}
|
||||
/>
|
||||
<GoTrash onClick={onDelete} size={22} style={{ color: "#A098AE" }} />
|
||||
// </Tooltip>
|
||||
)}
|
||||
{canShow && (
|
||||
|
|
|
|||
|
|
@ -104,7 +104,6 @@ const SearchField = ({
|
|||
console.log(AllPagesOption);
|
||||
console.log(option, "option");
|
||||
|
||||
|
||||
return (
|
||||
<div className="ValidationField w-100">
|
||||
<ValidationFieldLabel
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
//// upload
|
||||
.ant-upload-select {
|
||||
width: 100%;
|
||||
|
|
@ -35,7 +34,6 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
//// number input
|
||||
///
|
||||
.ant-input-number-affix-wrapper-lg {
|
||||
|
|
@ -50,13 +48,11 @@
|
|||
height: var(--fieldHeight);
|
||||
}
|
||||
|
||||
|
||||
//// date picker
|
||||
.ant-picker-large {
|
||||
height: var(--fieldHeight);
|
||||
}
|
||||
|
||||
|
||||
/// text area
|
||||
///
|
||||
|
||||
|
|
@ -64,10 +60,8 @@
|
|||
.ant-form-item-control-input-content {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ant-input-textarea-affix-wrapper.ant-input-affix-wrapper {
|
||||
|
||||
height: 120px;
|
||||
}
|
||||
|
|
@ -68,9 +68,9 @@ const DeleteModels: React.FC<ModalFormProps> = ({
|
|||
open={isOpen === ModelEnum}
|
||||
onCancel={handleCancel}
|
||||
>
|
||||
<header>{t("practical.delete_this_item")}
|
||||
<header>
|
||||
{t("practical.delete_this_item")}
|
||||
<MdCancel onClick={handleCancel} />
|
||||
|
||||
</header>
|
||||
|
||||
<main className="main_modal">
|
||||
|
|
|
|||
|
|
@ -1,17 +1,23 @@
|
|||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Divider } from 'antd';
|
||||
import SearchFieldWithSelect from '../../Components/DataTable/SearchFieldWithSelect';
|
||||
import { translateOptions } from '../../utils/translatedOptions';
|
||||
import { search_array } from '../../Routes';
|
||||
import PaginationColumn from '../../Components/Filter/PaginationColumn';
|
||||
import OrderBySelect from '../../Components/Filter/OrderBySelect';
|
||||
import LayoutFilterModal from './LayoutFilterModal';
|
||||
import { BiFilterAlt } from 'react-icons/bi';
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Divider } from "antd";
|
||||
import SearchFieldWithSelect from "../../Components/DataTable/SearchFieldWithSelect";
|
||||
import { translateOptions } from "../../utils/translatedOptions";
|
||||
import { search_array } from "../../Routes";
|
||||
import PaginationColumn from "../../Components/Filter/PaginationColumn";
|
||||
import OrderBySelect from "../../Components/Filter/OrderBySelect";
|
||||
import LayoutFilterModal from "./LayoutFilterModal";
|
||||
import { BiFilterAlt } from "react-icons/bi";
|
||||
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 translateArray = translateOptions(search_array, t);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
|
@ -20,25 +26,30 @@ const FilterLayout = ({filterTitle, sub_children}:{filterTitle:string,sub_childr
|
|||
// page: currentPage,
|
||||
|
||||
return (
|
||||
<div className='filter_header'>
|
||||
<div className='filter_header_top'>
|
||||
<div className="filter_header">
|
||||
<div className="filter_header_top">
|
||||
<h4>{t(filterTitle)}</h4>
|
||||
<div className='filter_and_order_by'>
|
||||
<div className="filter_and_order_by">
|
||||
<span>
|
||||
<LayoutFilterModal
|
||||
ModelClassName='filter_model_direction'
|
||||
children={<div className='model_sub_children'>{sub_children}</div>}
|
||||
isOpen={isOpen} setIsOpen={setIsOpen}
|
||||
ModelClassName="filter_model_direction"
|
||||
children={
|
||||
<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>
|
||||
<BiFilterAlt className='addition_select_icon'/>
|
||||
<BiFilterAlt className="addition_select_icon" />
|
||||
{t("ترتيب حسب")}
|
||||
</span>
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
</span>
|
||||
<span><OrderBySelect/></span>
|
||||
<span>
|
||||
<OrderBySelect />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
|
|
@ -49,14 +60,11 @@ const FilterLayout = ({filterTitle, sub_children}:{filterTitle:string,sub_childr
|
|||
<p>{t("ادخالات")}</p>
|
||||
</span>
|
||||
<div className="header_search">
|
||||
<SearchField
|
||||
searchBy=''
|
||||
placeholder={t("practical.search_here")}
|
||||
/>
|
||||
<SearchField searchBy="" placeholder={t("practical.search_here")} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterLayout
|
||||
export default FilterLayout;
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@ interface LayoutFilterModalProps {
|
|||
ModelClassName?: string;
|
||||
width?: string;
|
||||
isLoading?: boolean;
|
||||
isOpen:any,
|
||||
setIsOpen:any
|
||||
isOpen: any;
|
||||
setIsOpen: any;
|
||||
}
|
||||
|
||||
const LayoutFilterModal = ({
|
||||
|
|
@ -30,7 +30,7 @@ const LayoutFilterModal = ({
|
|||
width = "28vw",
|
||||
isLoading = false,
|
||||
setIsOpen,
|
||||
isOpen
|
||||
isOpen,
|
||||
}: LayoutFilterModalProps) => {
|
||||
const { setObjectToEdit } = useObjectToEdit();
|
||||
// useEffect(() => {
|
||||
|
|
@ -46,9 +46,9 @@ const LayoutFilterModal = ({
|
|||
setObjectToEdit({});
|
||||
};
|
||||
const handleOpen = () => {
|
||||
setIsOpen(true)
|
||||
setObjectToEdit({})
|
||||
}
|
||||
setIsOpen(true);
|
||||
setObjectToEdit({});
|
||||
};
|
||||
|
||||
const [t] = useTranslation();
|
||||
return (
|
||||
|
|
@ -69,16 +69,18 @@ const LayoutFilterModal = ({
|
|||
initialValues={getInitialValues}
|
||||
validationSchema={getValidationSchema}
|
||||
>
|
||||
<header>
|
||||
{t("models.filter")}
|
||||
</header>
|
||||
<header>{t("models.filter")}</header>
|
||||
<Divider />
|
||||
<main className="main_modal">
|
||||
{isLoading ? <SpinContainer /> : children}
|
||||
<Divider />
|
||||
|
||||
<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")}
|
||||
</div>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -16,13 +16,13 @@ const PageHeader = ({
|
|||
ModelAbility,
|
||||
pageTitle,
|
||||
openModel = true,
|
||||
locationToNavigate
|
||||
locationToNavigate,
|
||||
}: {
|
||||
canAdd:any,
|
||||
ModelAbility:any,
|
||||
pageTitle:string,
|
||||
openModel?:boolean,
|
||||
locationToNavigate?: string | any
|
||||
canAdd: any;
|
||||
ModelAbility: any;
|
||||
pageTitle: string;
|
||||
openModel?: boolean;
|
||||
locationToNavigate?: string | any;
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
const { handel_open_model } = useModalHandler();
|
||||
|
|
@ -37,19 +37,25 @@ const PageHeader = ({
|
|||
navigate(deletePathSegments(location.pathname, PrevPath));
|
||||
};
|
||||
const handleNavigateToPage = (location: string) => {
|
||||
navigate(location)
|
||||
}
|
||||
navigate(location);
|
||||
};
|
||||
return (
|
||||
<div className="page_header">
|
||||
<header className="d-flex justify-content-between">
|
||||
<span className="page_header_links" onClick={handelNavigate}>
|
||||
<h1 className="page_title">{t(`sidebar.${pageTitle}`)}</h1>
|
||||
<span className="page_links"><MdOutlineArrowForwardIos /> {PageTitle}</span>
|
||||
<span className="page_links">
|
||||
<MdOutlineArrowForwardIos /> {PageTitle}
|
||||
</span>
|
||||
</span>
|
||||
{canAdd && (
|
||||
<div className="Selects">
|
||||
<button
|
||||
onClick={() => openModel ? handel_open_model(ModelAbility): handleNavigateToPage(locationToNavigate)}
|
||||
onClick={() =>
|
||||
openModel
|
||||
? handel_open_model(ModelAbility)
|
||||
: handleNavigateToPage(locationToNavigate)
|
||||
}
|
||||
className="add_button"
|
||||
>
|
||||
<BsPlusCircleFill />
|
||||
|
|
@ -57,7 +63,6 @@ const PageHeader = ({
|
|||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
import React, { lazy, Suspense } from "react";
|
||||
import {
|
||||
useAddKeyToData,
|
||||
Table,
|
||||
useTranslation,
|
||||
usePagination,
|
||||
} from ".";
|
||||
import { useAddKeyToData, Table, useTranslation, usePagination } from ".";
|
||||
import { DataTableProps } from "../../../types/Table";
|
||||
const NotFoundLottie = React.lazy(() => import("../../../Components/Lottie/NotFound/NotFoundLottie"));
|
||||
const LoadingLottie = React.lazy(() => import("../../../Components/Lottie/Loading/LoadingLottie"));
|
||||
const NotFoundLottie = React.lazy(
|
||||
() => import("../../../Components/Lottie/NotFound/NotFoundLottie"),
|
||||
);
|
||||
const LoadingLottie = React.lazy(
|
||||
() => import("../../../Components/Lottie/Loading/LoadingLottie"),
|
||||
);
|
||||
|
||||
const DataTable: React.FC<DataTableProps> = ({
|
||||
response,
|
||||
|
|
@ -34,21 +33,20 @@ const DataTable: React.FC<DataTableProps> = ({
|
|||
className="DataTable"
|
||||
loading={{
|
||||
spinning: isLoading || isRefetching,
|
||||
indicator:<Suspense fallback={<></>}>
|
||||
indicator: (
|
||||
<Suspense fallback={<></>}>
|
||||
<LoadingLottie />
|
||||
</Suspense> ,
|
||||
</Suspense>
|
||||
),
|
||||
size: "large",
|
||||
}}
|
||||
locale={{
|
||||
emptyText: (
|
||||
isLoading || isRefetching ?
|
||||
emptyText:
|
||||
isLoading || isRefetching ? (
|
||||
<></>
|
||||
:
|
||||
|
||||
) : (
|
||||
<Suspense fallback={<></>}>
|
||||
<NotFoundLottie
|
||||
|
||||
/>
|
||||
<NotFoundLottie />
|
||||
</Suspense>
|
||||
),
|
||||
}}
|
||||
|
|
@ -57,8 +55,7 @@ const DataTable: React.FC<DataTableProps> = ({
|
|||
onChange: handlePageChange,
|
||||
nextIcon: <>{t("practical.next")}</>,
|
||||
prevIcon: <> {t("practical.prev")} </>,
|
||||
className:"pagination_antd"
|
||||
|
||||
className: "pagination_antd",
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,4 @@ import { useAddKeyToData } from "../../../Hooks/useAddKeyToData";
|
|||
import usePagination from "../usePagination";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export {
|
||||
Table,
|
||||
useAddKeyToData,
|
||||
usePagination,
|
||||
useTranslation,
|
||||
};
|
||||
export { Table, useAddKeyToData, usePagination, useTranslation };
|
||||
|
|
|
|||
|
|
@ -14,7 +14,9 @@ const Layout = ({
|
|||
|
||||
return (
|
||||
<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} />
|
||||
<div className="Layout_Children">{children}</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,13 @@ import { CiMenuBurger, CiSettings } from "react-icons/ci";
|
|||
import { IoIosMenu } from "react-icons/io";
|
||||
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 navigate = useNavigate();
|
||||
const { logout } = useAuthState();
|
||||
|
|
@ -21,7 +27,7 @@ const SideBar = ({isOpen,setIsOpen}:{isOpen:boolean,setIsOpen:any}) => {
|
|||
const branch_name = getLocalStorage(BRANCH_OBJECT_KEY)?.name;
|
||||
|
||||
const toggleSidebar = () => {
|
||||
setIsOpen((prev: boolean) => prev === true ? false : true);
|
||||
setIsOpen((prev: boolean) => (prev === true ? false : true));
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -31,7 +37,11 @@ const SideBar = ({isOpen,setIsOpen}:{isOpen:boolean,setIsOpen:any}) => {
|
|||
<HiMenuAlt3 onClick={toggleSidebar} />
|
||||
</div>
|
||||
{/* <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">
|
||||
<p>{t("sidebar.main_menu")}</p>
|
||||
{menuItems.map((item, index) => {
|
||||
|
|
@ -49,7 +59,6 @@ const SideBar = ({isOpen,setIsOpen}:{isOpen:boolean,setIsOpen:any}) => {
|
|||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
</div>
|
||||
<div className="side_bar_setting">
|
||||
<p>{t("sidebar.setting")}</p>
|
||||
|
|
@ -62,7 +71,8 @@ const SideBar = ({isOpen,setIsOpen}:{isOpen:boolean,setIsOpen:any}) => {
|
|||
onClick={() => {
|
||||
logout();
|
||||
navigate("/auth");
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<MdLogout />
|
||||
<span>{t("sidebar.logout")}</span>
|
||||
</div>
|
||||
|
|
@ -72,5 +82,3 @@ const SideBar = ({isOpen,setIsOpen}:{isOpen:boolean,setIsOpen:any}) => {
|
|||
};
|
||||
|
||||
export default SideBar;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import ValidationField from '../../../../Components/ValidationField/ValidationField'
|
||||
import React from "react";
|
||||
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
||||
import { Col, Row } from "reactstrap";
|
||||
|
||||
const FilterForm = () => {
|
||||
|
|
@ -9,17 +9,14 @@ const FilterForm = () => {
|
|||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterForm
|
||||
export default FilterForm;
|
||||
|
|
|
|||
|
|
@ -55,10 +55,12 @@ const TableHeader = () => {
|
|||
<PageHeader
|
||||
pageTitle="curriculum"
|
||||
ModelAbility={ModalEnum?.CURRICULUM_ADD}
|
||||
canAdd={canAddCurriculum}/>
|
||||
canAdd={canAddCurriculum}
|
||||
/>
|
||||
<FilterLayout
|
||||
sub_children={<FilterForm />}
|
||||
filterTitle="sidebar.curriculum"/>
|
||||
filterTitle="sidebar.curriculum"
|
||||
/>
|
||||
<Table />
|
||||
<AddModalForm />
|
||||
<EditModalForm />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import ValidationField from '../../../../Components/ValidationField/ValidationField'
|
||||
import React from "react";
|
||||
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
||||
import { Col, Row } from "reactstrap";
|
||||
|
||||
const FilterForm = () => {
|
||||
|
|
@ -9,17 +9,14 @@ const FilterForm = () => {
|
|||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterForm
|
||||
export default FilterForm;
|
||||
|
|
|
|||
|
|
@ -25,14 +25,15 @@ const TableHeader = () => {
|
|||
return (
|
||||
<div className="TableWithHeader">
|
||||
<Suspense fallback={<Spin />}>
|
||||
|
||||
<PageHeader
|
||||
pageTitle="grade"
|
||||
ModelAbility={ModalEnum?.GRADE_ADD}
|
||||
canAdd={canAddGrade}/>
|
||||
canAdd={canAddGrade}
|
||||
/>
|
||||
<FilterLayout
|
||||
sub_children={<FilterForm />}
|
||||
filterTitle="sidebar.grade"/>
|
||||
filterTitle="sidebar.grade"
|
||||
/>
|
||||
<Table />
|
||||
<AddModalForm />
|
||||
<EditModalForm />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import ValidationField from '../../../../Components/ValidationField/ValidationField'
|
||||
import React from "react";
|
||||
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
||||
import { Col, Row } from "reactstrap";
|
||||
|
||||
const FilterForm = () => {
|
||||
|
|
@ -9,17 +9,14 @@ const FilterForm = () => {
|
|||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterForm
|
||||
export default FilterForm;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@ import FilterForm from "./Model/FilterForm";
|
|||
const Table = lazy(() => import("./Table"));
|
||||
const AddModalForm = lazy(() => import("./Model/AddModel"));
|
||||
const EditModalForm = lazy(() => import("./Model/EditModel"));
|
||||
const DeleteModalForm = lazy(() => import("../../../Layout/Dashboard/DeleteModels"));
|
||||
const DeleteModalForm = lazy(
|
||||
() => import("../../../Layout/Dashboard/DeleteModels"),
|
||||
);
|
||||
const SearchField = lazy(
|
||||
() => import("../../../Components/DataTable/SearchField"),
|
||||
);
|
||||
|
|
@ -21,9 +23,7 @@ const SearchField = lazy(
|
|||
const TableHeader = () => {
|
||||
const { handel_open_model } = useModalHandler();
|
||||
const [t] = useTranslation();
|
||||
useSetPageTitle(
|
||||
t(`page_header.report`),
|
||||
);
|
||||
useSetPageTitle(t(`page_header.report`));
|
||||
const deleteMutation = useDeleteTag();
|
||||
return (
|
||||
<div className="TableWithHeader">
|
||||
|
|
@ -31,10 +31,12 @@ const TableHeader = () => {
|
|||
<PageHeader
|
||||
pageTitle="report"
|
||||
ModelAbility={ModalEnum?.REPORT_ADD}
|
||||
canAdd={canAddReport}/>
|
||||
canAdd={canAddReport}
|
||||
/>
|
||||
<FilterLayout
|
||||
sub_children={<FilterForm />}
|
||||
filterTitle="sidebar.report"/>
|
||||
filterTitle="sidebar.report"
|
||||
/>
|
||||
<Table />
|
||||
<DeleteModalForm
|
||||
deleteMutation={deleteMutation}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import ValidationField from '../../../../Components/ValidationField/ValidationField'
|
||||
import React from "react";
|
||||
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
||||
import { Col, Row } from "reactstrap";
|
||||
|
||||
const FilterForm = () => {
|
||||
|
|
@ -9,17 +9,14 @@ const FilterForm = () => {
|
|||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterForm
|
||||
export default FilterForm;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,11 @@ import { ModalEnum } from "../../../enums/Model";
|
|||
import { useTranslation } from "react-i18next";
|
||||
import { lazy, Suspense } from "react";
|
||||
import { Spin } from "antd";
|
||||
import { canAddReport, canAddReseller, canAddTags } from "../../../utils/hasAbilityFn";
|
||||
import {
|
||||
canAddReport,
|
||||
canAddReseller,
|
||||
canAddTags,
|
||||
} from "../../../utils/hasAbilityFn";
|
||||
import useSetPageTitle from "../../../Hooks/useSetPageTitle";
|
||||
import { useDeleteTag } from "../../../api/tags";
|
||||
import PageHeader from "../../../Layout/Dashboard/PageHeader";
|
||||
|
|
@ -13,7 +17,9 @@ import FilterForm from "./Model/FilterForm";
|
|||
const Table = lazy(() => import("./Table"));
|
||||
const AddModalForm = lazy(() => import("./Model/AddModel"));
|
||||
const EditModalForm = lazy(() => import("./Model/EditModel"));
|
||||
const DeleteModalForm = lazy(() => import("../../../Layout/Dashboard/DeleteModels"));
|
||||
const DeleteModalForm = lazy(
|
||||
() => import("../../../Layout/Dashboard/DeleteModels"),
|
||||
);
|
||||
const SearchField = lazy(
|
||||
() => import("../../../Components/DataTable/SearchField"),
|
||||
);
|
||||
|
|
@ -21,9 +27,7 @@ const SearchField = lazy(
|
|||
const TableHeader = () => {
|
||||
const { handel_open_model } = useModalHandler();
|
||||
const [t] = useTranslation();
|
||||
useSetPageTitle(
|
||||
t(`page_header.reseller`),
|
||||
);
|
||||
useSetPageTitle(t(`page_header.reseller`));
|
||||
const deleteMutation = useDeleteTag();
|
||||
return (
|
||||
<div className="TableWithHeader">
|
||||
|
|
@ -31,10 +35,12 @@ const TableHeader = () => {
|
|||
<PageHeader
|
||||
pageTitle="reseller"
|
||||
ModelAbility={ModalEnum?.RESELLER_ADD}
|
||||
canAdd={canAddReseller}/>
|
||||
canAdd={canAddReseller}
|
||||
/>
|
||||
<FilterLayout
|
||||
sub_children={<FilterForm />}
|
||||
filterTitle="sidebar.reseller"/>
|
||||
filterTitle="sidebar.reseller"
|
||||
/>
|
||||
<Table />
|
||||
<DeleteModalForm
|
||||
deleteMutation={deleteMutation}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,12 @@ import { ModalEnum } from "../../../enums/Model";
|
|||
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
|
||||
import { useModalState } from "../../../zustand/Modal";
|
||||
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";
|
||||
|
||||
export const useColumns = () => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import ValidationField from '../../../../Components/ValidationField/ValidationField'
|
||||
import React from "react";
|
||||
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
||||
import { Col, Row } from "reactstrap";
|
||||
|
||||
const FilterForm = () => {
|
||||
|
|
@ -9,17 +9,14 @@ const FilterForm = () => {
|
|||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterForm
|
||||
export default FilterForm;
|
||||
|
|
|
|||
|
|
@ -5,37 +5,52 @@ import { useValidationValidationParamState } from "../../../../Components/Valida
|
|||
|
||||
const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
|
||||
const { ValidationParamState } = useValidationValidationParamState();
|
||||
const {
|
||||
GradeName, GradeCurrentPage,
|
||||
} = ValidationParamState;
|
||||
|
||||
const { GradeName, GradeCurrentPage } = ValidationParamState;
|
||||
|
||||
const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({
|
||||
name: GradeName,
|
||||
page: GradeCurrentPage
|
||||
page: GradeCurrentPage,
|
||||
});
|
||||
const GradeOption = Grade?.data ?? []
|
||||
const GradeOption = Grade?.data ?? [];
|
||||
const canChangeGradePage = !!Grade?.links?.next;
|
||||
const GradePage = Grade?.meta?.currentPage;
|
||||
|
||||
const sex = [
|
||||
{ name: "male", id: "male" },
|
||||
{name:"female" , id :"female"}
|
||||
]
|
||||
{ name: "female", id: "female" },
|
||||
];
|
||||
return (
|
||||
<Row className="w-100">
|
||||
<Col>
|
||||
<ValidationField name="first_name" placeholder="first_name" label="first_name" />
|
||||
<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" />
|
||||
}
|
||||
|
||||
|
||||
<ValidationField
|
||||
name="first_name"
|
||||
placeholder="first_name"
|
||||
label="first_name"
|
||||
/>
|
||||
<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>
|
||||
<ValidationField name="phone_number" placeholder="contact_number1" label="contact_number1" />
|
||||
<ValidationField
|
||||
name="phone_number"
|
||||
placeholder="contact_number1"
|
||||
label="contact_number1"
|
||||
/>
|
||||
<ValidationField
|
||||
searchBy="GradeName"
|
||||
name="grade_id"
|
||||
|
|
@ -46,10 +61,8 @@ const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
|
|||
canChangePage={canChangeGradePage}
|
||||
PageName={"GradeCurrentPage"}
|
||||
page={GradePage}
|
||||
|
||||
/>
|
||||
<ValidationField type="Select" name="sex" option={sex} />
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ export const getInitialValues = (
|
|||
grade_id: objectToEdit?.grade_id,
|
||||
// image: objectToEdit?.image ?? "",
|
||||
sex: objectToEdit?.sex,
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -28,10 +28,12 @@ const TableHeader = () => {
|
|||
<PageHeader
|
||||
pageTitle="student"
|
||||
ModelAbility={ModalEnum?.STUDENT_ADD}
|
||||
canAdd={canAddStudent}/>
|
||||
canAdd={canAddStudent}
|
||||
/>
|
||||
<FilterLayout
|
||||
sub_children={<FilterForm />}
|
||||
filterTitle="table.student"/>
|
||||
filterTitle="table.student"
|
||||
/>
|
||||
<Table />
|
||||
<AddModalForm />
|
||||
<EditModalForm />
|
||||
|
|
|
|||
|
|
@ -10,4 +10,3 @@ const App: React.FC = () => {
|
|||
};
|
||||
|
||||
export default App;
|
||||
|
||||
|
|
|
|||
|
|
@ -65,7 +65,6 @@ export const useColumns = () => {
|
|||
render: (_text, record) => record?.sex,
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: "",
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import ValidationField from '../../../../Components/ValidationField/ValidationField'
|
||||
import React from "react";
|
||||
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
||||
import { Col, Row } from "reactstrap";
|
||||
|
||||
const FilterForm = () => {
|
||||
|
|
@ -9,17 +9,14 @@ const FilterForm = () => {
|
|||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterForm
|
||||
export default FilterForm;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@ import FilterForm from "./Model/FilterForm";
|
|||
const Table = lazy(() => import("./Table"));
|
||||
const AddModalForm = lazy(() => import("./Model/AddModel"));
|
||||
const EditModalForm = lazy(() => import("./Model/EditModel"));
|
||||
const DeleteModalForm = lazy(() => import("../../../Layout/Dashboard/DeleteModels"));
|
||||
const DeleteModalForm = lazy(
|
||||
() => import("../../../Layout/Dashboard/DeleteModels"),
|
||||
);
|
||||
const SearchField = lazy(
|
||||
() => import("../../../Components/DataTable/SearchField"),
|
||||
);
|
||||
|
|
@ -21,9 +23,7 @@ const SearchField = lazy(
|
|||
const TableHeader = () => {
|
||||
const { handel_open_model } = useModalHandler();
|
||||
const [t] = useTranslation();
|
||||
useSetPageTitle(
|
||||
t(`page_header.tags`),
|
||||
);
|
||||
useSetPageTitle(t(`page_header.tags`));
|
||||
const deleteMutation = useDeleteTag();
|
||||
return (
|
||||
<div className="TableWithHeader">
|
||||
|
|
@ -31,10 +31,12 @@ const TableHeader = () => {
|
|||
<PageHeader
|
||||
pageTitle="tags"
|
||||
ModelAbility={ModalEnum?.TAGS_ADD}
|
||||
canAdd={canAddTags}/>
|
||||
canAdd={canAddTags}
|
||||
/>
|
||||
<FilterLayout
|
||||
sub_children={<FilterForm />}
|
||||
filterTitle="sidebar.tags"/>
|
||||
filterTitle="sidebar.tags"
|
||||
/>
|
||||
<Table />
|
||||
<DeleteModalForm
|
||||
deleteMutation={deleteMutation}
|
||||
|
|
|
|||
|
|
@ -16,9 +16,12 @@ import { useParams } from "react-router-dom";
|
|||
import { ParamsEnum } from "../../../enums/params";
|
||||
import { useGetAllUnit, useUpdateUnitOrder } from "../../../api/unit";
|
||||
|
||||
const NotFoundLottie = React.lazy(() => import("../../../Components/Lottie/NotFound/NotFoundLottie"));
|
||||
const LoadingLottie = React.lazy(() => import("../../../Components/Lottie/Loading/LoadingLottie" ));
|
||||
|
||||
const NotFoundLottie = React.lazy(
|
||||
() => import("../../../Components/Lottie/NotFound/NotFoundLottie"),
|
||||
);
|
||||
const LoadingLottie = React.lazy(
|
||||
() => import("../../../Components/Lottie/Loading/LoadingLottie"),
|
||||
);
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useColumns } from "./useTableColumns";
|
||||
|
|
@ -52,7 +55,6 @@ export const DragHandleUnit: React.FC = () => {
|
|||
);
|
||||
};
|
||||
|
||||
|
||||
interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
||||
"data-row-key": string;
|
||||
}
|
||||
|
|
@ -96,7 +98,7 @@ const DrapableTable: React.FC = () => {
|
|||
response?.data?.data?.map((item: any, index: number) => ({
|
||||
id: item.id, // Ensure this is a unique identifier
|
||||
order: index + 1, // Assign order based on index
|
||||
...item
|
||||
...item,
|
||||
})) ?? [];
|
||||
|
||||
const [dataSource, setDataSource] = React.useState<DataType[]>(data);
|
||||
|
|
@ -107,9 +109,12 @@ const DrapableTable: React.FC = () => {
|
|||
setDataSource(sortedData);
|
||||
}, [response?.data?.data]);
|
||||
|
||||
const {mutate:orderUnit} = useUpdateUnitOrder({},{
|
||||
retry:false
|
||||
})
|
||||
const { mutate: orderUnit } = useUpdateUnitOrder(
|
||||
{},
|
||||
{
|
||||
retry: false,
|
||||
},
|
||||
);
|
||||
const onDragEnd = ({ active, over }: DragEndEvent) => {
|
||||
if (active.id !== over?.id) {
|
||||
setDataSource((prevState) => {
|
||||
|
|
@ -129,17 +134,17 @@ const DrapableTable: React.FC = () => {
|
|||
order: index + 1, // Update the order based on the new index
|
||||
}));
|
||||
// Update the order based on the new positions
|
||||
const orderedNewStateWithNewChape = orderedNewState?.map((item:any)=>{
|
||||
const orderedNewStateWithNewChape = orderedNewState?.map(
|
||||
(item: any) => {
|
||||
return {
|
||||
"unit_id":item?.id,
|
||||
"order":item?.order
|
||||
}
|
||||
})
|
||||
orderUnit({units: orderedNewStateWithNewChape, _method:"PUT"})
|
||||
return orderedNewState
|
||||
unit_id: item?.id,
|
||||
order: item?.order,
|
||||
};
|
||||
},
|
||||
);
|
||||
orderUnit({ units: orderedNewStateWithNewChape, _method: "PUT" });
|
||||
return orderedNewState;
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -147,7 +152,7 @@ const DrapableTable: React.FC = () => {
|
|||
return index % 2 === 0 ? "even-row" : "odd-row";
|
||||
};
|
||||
const isLoading = response?.isLoading;
|
||||
const [t] = useTranslation()
|
||||
const [t] = useTranslation();
|
||||
const columns = useColumns();
|
||||
const sortedDataSource = dataSource.sort((a, b) => a.order - b.order);
|
||||
console.log(sortedDataSource, "sortedDataSource");
|
||||
|
|
@ -169,21 +174,19 @@ const DrapableTable: React.FC = () => {
|
|||
className="DataTable"
|
||||
loading={{
|
||||
spinning: isLoading,
|
||||
indicator:<Suspense fallback={<></>}>
|
||||
indicator: (
|
||||
<Suspense fallback={<></>}>
|
||||
<LoadingLottie />
|
||||
</Suspense> ,
|
||||
</Suspense>
|
||||
),
|
||||
size: "large",
|
||||
}}
|
||||
locale={{
|
||||
emptyText: (
|
||||
isLoading ?
|
||||
emptyText: isLoading ? (
|
||||
<></>
|
||||
:
|
||||
|
||||
) : (
|
||||
<Suspense fallback={<></>}>
|
||||
<NotFoundLottie
|
||||
|
||||
/>
|
||||
<NotFoundLottie />
|
||||
</Suspense>
|
||||
),
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ const AddModel: React.FC = () => {
|
|||
handleSubmit={handleSubmit}
|
||||
getInitialValues={getInitialValues({})}
|
||||
getValidationSchema={getValidationSchema}
|
||||
|
||||
>
|
||||
<ModelForm />
|
||||
</LayoutModel>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ const EditModel: React.FC = () => {
|
|||
getInitialValues={getInitialValues(objectToEdit)}
|
||||
getValidationSchema={getValidationSchema}
|
||||
isAddModal={false}
|
||||
|
||||
>
|
||||
<ModelForm />
|
||||
</LayoutModel>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import ValidationField from '../../../../Components/ValidationField/ValidationField'
|
||||
import React from "react";
|
||||
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
||||
import { Col, Row } from "reactstrap";
|
||||
|
||||
const FilterForm = () => {
|
||||
|
|
@ -9,17 +9,14 @@ const FilterForm = () => {
|
|||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterForm
|
||||
export default FilterForm;
|
||||
|
|
|
|||
|
|
@ -63,10 +63,12 @@ const TableHeader = () => {
|
|||
<PageHeader
|
||||
pageTitle="unit"
|
||||
ModelAbility={ModalEnum?.UNIT_ADD}
|
||||
canAdd={canAddUnit}/>
|
||||
canAdd={canAddUnit}
|
||||
/>
|
||||
<FilterLayout
|
||||
sub_children={<FilterForm />}
|
||||
filterTitle="sidebar.unit"/>
|
||||
filterTitle="sidebar.unit"
|
||||
/>
|
||||
<Table />
|
||||
<AddModalForm />
|
||||
<EditModalForm />
|
||||
|
|
|
|||
|
|
@ -42,7 +42,12 @@ export const useColumns = () => {
|
|||
const [t] = useTranslation();
|
||||
|
||||
const columns: TableColumnsType<Unit> = [
|
||||
{ key: "sort", align: "center", width: 80, render: () => <DragHandleUnit /> },
|
||||
{
|
||||
key: "sort",
|
||||
align: "center",
|
||||
width: 80,
|
||||
render: () => <DragHandleUnit />,
|
||||
},
|
||||
|
||||
{
|
||||
title: t("columns.id"),
|
||||
|
|
@ -68,7 +73,6 @@ export const useColumns = () => {
|
|||
},
|
||||
|
||||
{
|
||||
|
||||
title: t("columns.procedure"),
|
||||
key: "actions",
|
||||
align: "center",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import ValidationField from '../../../../Components/ValidationField/ValidationField'
|
||||
import React from "react";
|
||||
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
||||
import { Col, Row } from "reactstrap";
|
||||
|
||||
const FilterForm = () => {
|
||||
|
|
@ -9,17 +9,14 @@ const FilterForm = () => {
|
|||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterForm
|
||||
export default FilterForm;
|
||||
|
|
|
|||
|
|
@ -5,10 +5,13 @@ const Form = () => {
|
|||
return (
|
||||
<Row className="w-100">
|
||||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" type="Number" />
|
||||
|
||||
<ValidationField
|
||||
placeholder="name"
|
||||
label="name"
|
||||
name="name"
|
||||
type="Number"
|
||||
/>
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@ import FilterForm from "./Model/FilterForm";
|
|||
const Table = lazy(() => import("./Table"));
|
||||
const AddModalForm = lazy(() => import("./Model/AddModel"));
|
||||
const EditModalForm = lazy(() => import("./Model/EditModel"));
|
||||
const DeleteModalForm = lazy(() => import("../../../Layout/Dashboard/DeleteModels"));
|
||||
const DeleteModalForm = lazy(
|
||||
() => import("../../../Layout/Dashboard/DeleteModels"),
|
||||
);
|
||||
|
||||
const TableHeader = () => {
|
||||
const [t] = useTranslation();
|
||||
useSetPageTitle(
|
||||
t(`page_header.user`),
|
||||
);
|
||||
useSetPageTitle(t(`page_header.user`));
|
||||
const deleteMutation = useDeleteTag();
|
||||
return (
|
||||
<div className="TableWithHeader">
|
||||
|
|
@ -25,10 +25,12 @@ const TableHeader = () => {
|
|||
<PageHeader
|
||||
pageTitle="user"
|
||||
ModelAbility={ModalEnum?.USER_ADD}
|
||||
canAdd={canAddUser}/>
|
||||
canAdd={canAddUser}
|
||||
/>
|
||||
<FilterLayout
|
||||
sub_children={<FilterForm />}
|
||||
filterTitle="sidebar.user"/>
|
||||
filterTitle="sidebar.user"
|
||||
/>
|
||||
<Table />
|
||||
<DeleteModalForm
|
||||
deleteMutation={deleteMutation}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ const App: React.FC = () => {
|
|||
const response = useGetAllUser({
|
||||
name: searchQuery,
|
||||
pagination: true,
|
||||
|
||||
});
|
||||
|
||||
return <DataTable response={response} useColumns={useColumns} />;
|
||||
|
|
|
|||
|
|
@ -16,10 +16,12 @@ import { useParams } from "react-router-dom";
|
|||
import { ParamsEnum } from "../../../enums/params";
|
||||
import { useGetAllLesson, useUpdateLessonOrder } from "../../../api/lesson";
|
||||
|
||||
|
||||
const NotFoundLottie = React.lazy(() => import("../../../Components/Lottie/NotFound/NotFoundLottie"));
|
||||
const LoadingLottie = React.lazy(() => import("../../../Components/Lottie/Loading/LoadingLottie" ));
|
||||
|
||||
const NotFoundLottie = React.lazy(
|
||||
() => import("../../../Components/Lottie/NotFound/NotFoundLottie"),
|
||||
);
|
||||
const LoadingLottie = React.lazy(
|
||||
() => import("../../../Components/Lottie/Loading/LoadingLottie"),
|
||||
);
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useColumns } from "./useTableColumns";
|
||||
|
|
@ -53,7 +55,6 @@ export const DragHandleLesson: React.FC = () => {
|
|||
);
|
||||
};
|
||||
|
||||
|
||||
interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
||||
"data-row-key": string;
|
||||
}
|
||||
|
|
@ -90,14 +91,17 @@ const Row: React.FC<RowProps> = (props) => {
|
|||
|
||||
const DrapableTable: React.FC = () => {
|
||||
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
|
||||
const data =
|
||||
response?.data?.data?.map((item: any, index: number) => ({
|
||||
id: item.id, // Ensure this is a unique identifier
|
||||
order: index + 1, // Assign order based on index
|
||||
...item
|
||||
...item,
|
||||
})) ?? [];
|
||||
|
||||
const [dataSource, setDataSource] = React.useState<DataType[]>(data);
|
||||
|
|
@ -108,7 +112,7 @@ const DrapableTable: React.FC = () => {
|
|||
setDataSource(sortedData);
|
||||
}, [response?.data?.data]);
|
||||
|
||||
const {mutate:orderLesson} = useUpdateLessonOrder()
|
||||
const { mutate: orderLesson } = useUpdateLessonOrder();
|
||||
const onDragEnd = ({ active, over }: DragEndEvent) => {
|
||||
if (active.id !== over?.id) {
|
||||
setDataSource((prevState) => {
|
||||
|
|
@ -128,28 +132,28 @@ const DrapableTable: React.FC = () => {
|
|||
order: index + 1, // Update the order based on the new index
|
||||
}));
|
||||
// Update the order based on the new positions
|
||||
const orderedNewStateWithNewChape = orderedNewState?.map((item:any)=>{
|
||||
const orderedNewStateWithNewChape = orderedNewState?.map(
|
||||
(item: any) => {
|
||||
return {
|
||||
"lesson_id":item?.id,
|
||||
"order":item?.order
|
||||
}
|
||||
})
|
||||
orderLesson({lessons: orderedNewStateWithNewChape, _method:"PUT"})
|
||||
return orderedNewState
|
||||
lesson_id: item?.id,
|
||||
order: item?.order,
|
||||
};
|
||||
},
|
||||
);
|
||||
orderLesson({ lessons: orderedNewStateWithNewChape, _method: "PUT" });
|
||||
return orderedNewState;
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const getRowClassName = (record: any, index: number): string => {
|
||||
return index % 2 === 0 ? "even-row" : "odd-row";
|
||||
};
|
||||
const [t] = useTranslation()
|
||||
const [t] = useTranslation();
|
||||
const columns = useColumns();
|
||||
const sortedDataSource = dataSource.sort((a, b) => a.order - b.order);
|
||||
console.log(sortedDataSource, "sortedDataSource");
|
||||
const isLoading = response?.isLoading
|
||||
const isLoading = response?.isLoading;
|
||||
return (
|
||||
<DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
|
||||
<SortableContext
|
||||
|
|
@ -167,21 +171,19 @@ const DrapableTable: React.FC = () => {
|
|||
className="DataTable"
|
||||
loading={{
|
||||
spinning: isLoading,
|
||||
indicator:<Suspense fallback={<></>}>
|
||||
indicator: (
|
||||
<Suspense fallback={<></>}>
|
||||
<LoadingLottie />
|
||||
</Suspense> ,
|
||||
</Suspense>
|
||||
),
|
||||
size: "large",
|
||||
}}
|
||||
locale={{
|
||||
emptyText: (
|
||||
isLoading ?
|
||||
emptyText: isLoading ? (
|
||||
<></>
|
||||
:
|
||||
|
||||
) : (
|
||||
<Suspense fallback={<></>}>
|
||||
<NotFoundLottie
|
||||
|
||||
/>
|
||||
<NotFoundLottie />
|
||||
</Suspense>
|
||||
),
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import ValidationField from '../../../../Components/ValidationField/ValidationField'
|
||||
import React from "react";
|
||||
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
||||
import { Col, Row } from "reactstrap";
|
||||
|
||||
const FilterForm = () => {
|
||||
|
|
@ -9,17 +9,14 @@ const FilterForm = () => {
|
|||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterForm
|
||||
export default FilterForm;
|
||||
|
|
|
|||
|
|
@ -71,10 +71,12 @@ const TableHeader = () => {
|
|||
<PageHeader
|
||||
pageTitle="lesson"
|
||||
ModelAbility={ModalEnum?.LESSON_ADD}
|
||||
canAdd={canAddLesson}/>
|
||||
canAdd={canAddLesson}
|
||||
/>
|
||||
<FilterLayout
|
||||
sub_children={<FilterForm />}
|
||||
filterTitle="sidebar.lesson"/>
|
||||
filterTitle="sidebar.lesson"
|
||||
/>
|
||||
<Table />
|
||||
<AddModalForm />
|
||||
<EditModalForm />
|
||||
|
|
|
|||
|
|
@ -38,7 +38,12 @@ export const useColumns = () => {
|
|||
const [t] = useTranslation();
|
||||
|
||||
const columns: TableColumnsType<Lesson> = [
|
||||
{ key: "sort", align: "center", width: 80, render: () => <DragHandleLesson /> },
|
||||
{
|
||||
key: "sort",
|
||||
align: "center",
|
||||
width: 80,
|
||||
render: () => <DragHandleLesson />,
|
||||
},
|
||||
{
|
||||
title: t("columns.id"),
|
||||
dataIndex: "id",
|
||||
|
|
|
|||
|
|
@ -128,9 +128,9 @@ const AddPage: React.FC = () => {
|
|||
const answers = item?.answers?.map((item: any, index: number) => {
|
||||
return {
|
||||
order: index,
|
||||
...item
|
||||
}
|
||||
})
|
||||
...item,
|
||||
};
|
||||
});
|
||||
console.log(answers);
|
||||
|
||||
mutate({
|
||||
|
|
@ -139,7 +139,7 @@ const AddPage: React.FC = () => {
|
|||
subject_id: subject_id,
|
||||
tags,
|
||||
lessons_ids: [lesson_id],
|
||||
answers
|
||||
answers,
|
||||
});
|
||||
});
|
||||
console.log(newBseQuestionId, "newBseQuestionId");
|
||||
|
|
@ -150,18 +150,18 @@ const AddPage: React.FC = () => {
|
|||
const answers = values?.answers?.map((item: any, index: number) => {
|
||||
return {
|
||||
order: index,
|
||||
...item
|
||||
}
|
||||
})
|
||||
...item,
|
||||
};
|
||||
});
|
||||
const NewQuestion = {
|
||||
...values,
|
||||
subject_id: subject_id,
|
||||
tags,
|
||||
lessons_ids: [lesson_id],
|
||||
canAnswersBeShuffled,
|
||||
answers
|
||||
}
|
||||
console.clear()
|
||||
answers,
|
||||
};
|
||||
console.clear();
|
||||
console.log(NewQuestion, "NewQuestion");
|
||||
|
||||
mutate(NewQuestion);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import ValidationField from '../../../Components/ValidationField/ValidationField'
|
||||
import React from "react";
|
||||
import ValidationField from "../../../Components/ValidationField/ValidationField";
|
||||
import { Col, Row } from "reactstrap";
|
||||
|
||||
const FilterForm = () => {
|
||||
|
|
@ -9,17 +9,14 @@ const FilterForm = () => {
|
|||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterForm
|
||||
export default FilterForm;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,11 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
|
|||
<TextField
|
||||
className="textarea_exercise"
|
||||
placeholder={"choice"}
|
||||
label2={t(`input.choice`) + ` ` +`( ${t(`alphabet.${getCharFromNumber(index)}`)} )`}
|
||||
label2={
|
||||
t(`input.choice`) +
|
||||
` ` +
|
||||
`( ${t(`alphabet.${getCharFromNumber(index)}`)} )`
|
||||
}
|
||||
name={index}
|
||||
id={`choice_${index + 1}`}
|
||||
type="TextArea"
|
||||
|
|
@ -40,22 +44,23 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
|
|||
<ImageBoxField name={`answers.${index}.content_image`} />
|
||||
|
||||
<div className="answer_status">
|
||||
|
||||
<CheckboxField
|
||||
className=""
|
||||
label="The_correct_answer"
|
||||
name={index}
|
||||
type="Checkbox"
|
||||
|
||||
/>
|
||||
<p className="delete_question_options">
|
||||
{t("header.delete_choice")}
|
||||
<GoTrash className="trash_icon" onClick={handleDeleteChoice} size={17} />
|
||||
<GoTrash
|
||||
className="trash_icon"
|
||||
onClick={handleDeleteChoice}
|
||||
size={17}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="exercise_form_width">
|
||||
|
||||
<ValidationField
|
||||
className=" "
|
||||
placeholder="_"
|
||||
|
|
|
|||
|
|
@ -37,8 +37,7 @@ const Choices = () => {
|
|||
<Droppable droppableId="choices">
|
||||
{(provided) => (
|
||||
<div {...provided.droppableProps} ref={provided.innerRef}>
|
||||
{formik?.values?.answers?.map(
|
||||
(item: Choice, index: number) => {
|
||||
{formik?.values?.answers?.map((item: Choice, index: number) => {
|
||||
// Use a unique identifier for draggableId
|
||||
const draggableId = item.name
|
||||
? item.name.toString()
|
||||
|
|
@ -61,8 +60,7 @@ const Choices = () => {
|
|||
)}
|
||||
</Draggable>
|
||||
);
|
||||
},
|
||||
)}
|
||||
})}
|
||||
{provided.placeholder} {/* Placeholder for spacing */}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -106,8 +106,8 @@ const Form = () => {
|
|||
|
||||
<Choices parent_index={parent_index} />
|
||||
|
||||
{formik?.values?.Questions?.[parent_index]?.answers
|
||||
?.length < 5 && (
|
||||
{formik?.values?.Questions?.[parent_index]?.answers?.length <
|
||||
5 && (
|
||||
<p className="add_new_button">
|
||||
<FaCirclePlus
|
||||
onClick={() => handleAddChoice(parent_index)}
|
||||
|
|
|
|||
|
|
@ -16,10 +16,9 @@ const CheckboxField = ({
|
|||
const formik = useFormikContext<any>();
|
||||
const [t] = useTranslation();
|
||||
const CheckboxhandleChange = (value: any) => {
|
||||
|
||||
const allAreZero = formik?.values?.Questions?.[
|
||||
parent_index
|
||||
]?.answers?.some((item: any) => item.isCorrect === 1);
|
||||
const allAreZero = formik?.values?.Questions?.[parent_index]?.answers?.some(
|
||||
(item: any) => item.isCorrect === 1,
|
||||
);
|
||||
if (allAreZero) {
|
||||
formik?.values?.Questions?.[parent_index]?.answers.forEach(
|
||||
(item: any, index: number) => {
|
||||
|
|
|
|||
|
|
@ -27,8 +27,7 @@ const ChoiceFields = ({
|
|||
const [t] = useTranslation();
|
||||
|
||||
const handleDeleteChoice = () => {
|
||||
const arrayLength =
|
||||
formik.values.Questions?.[parent_index].answers?.length;
|
||||
const arrayLength = formik.values.Questions?.[parent_index].answers?.length;
|
||||
|
||||
console.log(arrayLength);
|
||||
|
||||
|
|
@ -42,10 +41,7 @@ const ChoiceFields = ({
|
|||
const updatedAnswers = formik.values.Questions?.[
|
||||
parent_index
|
||||
].answers.filter((_: any, i: any) => i !== index);
|
||||
formik.setFieldValue(
|
||||
`Questions[${parent_index}].answers`,
|
||||
updatedAnswers,
|
||||
);
|
||||
formik.setFieldValue(`Questions[${parent_index}].answers`, updatedAnswers);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
|
|
@ -53,16 +49,21 @@ const ChoiceFields = ({
|
|||
<TextField
|
||||
className="textarea_exercise"
|
||||
placeholder={"choice"}
|
||||
label2={t(`input.choice`) + ` ` + `( ${t(`alphabet.${getCharFromNumber(index)}`)} )`}
|
||||
label2={
|
||||
t(`input.choice`) +
|
||||
` ` +
|
||||
`( ${t(`alphabet.${getCharFromNumber(index)}`)} )`
|
||||
}
|
||||
name={index}
|
||||
parent_index={parent_index}
|
||||
type="TextArea"
|
||||
/>
|
||||
|
||||
<ImageBoxField name={`Questions.${parent_index}.answers.${index}.answer_image`} />
|
||||
<ImageBoxField
|
||||
name={`Questions.${parent_index}.answers.${index}.answer_image`}
|
||||
/>
|
||||
|
||||
<div className="answer_status">
|
||||
|
||||
<CheckboxField
|
||||
className=""
|
||||
label="The_correct_answer"
|
||||
|
|
@ -72,14 +73,15 @@ const ChoiceFields = ({
|
|||
/>
|
||||
<p className="delete_question_options">
|
||||
{t("header.delete_choice")}
|
||||
<GoTrash className="trash_icon" onClick={handleDeleteChoice} size={17} />
|
||||
<GoTrash
|
||||
className="trash_icon"
|
||||
onClick={handleDeleteChoice}
|
||||
size={17}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="exercise_form_width">
|
||||
<ValidationField
|
||||
className=" "
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@ const Choices = ({ parent_index }: { parent_index: number }) => {
|
|||
console.log(formik?.values?.Questions?.[parent_index]?.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);
|
||||
// Remove the item from the original position
|
||||
const [reorderedItem] = items.splice(result.source.index, 1);
|
||||
|
|
@ -46,8 +48,8 @@ const Choices = ({ parent_index }: { parent_index: number }) => {
|
|||
{(provided) => (
|
||||
<div {...provided.droppableProps} ref={provided.innerRef}>
|
||||
{(
|
||||
(formik?.values as any)?.Questions?.[parent_index]
|
||||
?.answers || []
|
||||
(formik?.values as any)?.Questions?.[parent_index]?.answers ||
|
||||
[]
|
||||
).map((item: Choice, index: number) => {
|
||||
const draggableId = item.name
|
||||
? item.name.toString()
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ const File = ({
|
|||
|
||||
const { formik, t, isError, errorMsg } = useFormField(newName, props);
|
||||
let imageUrl =
|
||||
formik?.values?.Questions?.[parent_index]?.answers[name]
|
||||
?.answer_image ?? null;
|
||||
formik?.values?.Questions?.[parent_index]?.answers[name]?.answer_image ??
|
||||
null;
|
||||
// console.log(imageUrl);
|
||||
|
||||
const fileList: UploadFile[] = useMemo(() => {
|
||||
|
|
|
|||
|
|
@ -102,8 +102,8 @@ const Form = () => {
|
|||
</div>
|
||||
|
||||
{(
|
||||
(formik?.values as any)?.Questions?.[parent_index]
|
||||
?.answers || []
|
||||
(formik?.values as any)?.Questions?.[parent_index]?.answers ||
|
||||
[]
|
||||
).map((item: Choice, index: number) => {
|
||||
return (
|
||||
<ChoiceFields
|
||||
|
|
@ -114,8 +114,8 @@ const Form = () => {
|
|||
/>
|
||||
);
|
||||
})}
|
||||
{formik?.values?.Questions?.[parent_index]?.answers
|
||||
?.length < 5 && (
|
||||
{formik?.values?.Questions?.[parent_index]?.answers?.length <
|
||||
5 && (
|
||||
<p className="add_new_button">
|
||||
<FaCirclePlus
|
||||
onClick={() => handleAddChoice(parent_index)}
|
||||
|
|
|
|||
|
|
@ -72,8 +72,12 @@ const Form = () => {
|
|||
return (
|
||||
<Row className="w-100 exercise_form_container">
|
||||
<div className="exercise_form">
|
||||
|
||||
<ValidationField className="textarea_exercise" name="content" label="main_question" type="TextArea" />
|
||||
<ValidationField
|
||||
className="textarea_exercise"
|
||||
name="content"
|
||||
label="main_question"
|
||||
type="TextArea"
|
||||
/>
|
||||
<ImageBoxField name="image" />
|
||||
|
||||
<div></div>
|
||||
|
|
@ -94,8 +98,8 @@ const Form = () => {
|
|||
|
||||
<Choices parent_index={parent_index} />
|
||||
|
||||
{formik?.values?.Questions?.[parent_index]?.answers
|
||||
?.length < 5 && (
|
||||
{formik?.values?.Questions?.[parent_index]?.answers?.length <
|
||||
5 && (
|
||||
<p className="add_new_button">
|
||||
<FaCirclePlus
|
||||
onClick={() => handleAddChoice(parent_index)}
|
||||
|
|
@ -105,9 +109,7 @@ const Form = () => {
|
|||
</p>
|
||||
)}
|
||||
|
||||
|
||||
<div className="exercise_form_width">
|
||||
|
||||
<ValidationField
|
||||
className=" "
|
||||
placeholder="_"
|
||||
|
|
|
|||
|
|
@ -36,13 +36,16 @@ const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className="exercise_forms">
|
||||
<div className="ChoiceFields">
|
||||
<TextField
|
||||
className="textarea_exercise"
|
||||
placeholder={"question"}
|
||||
label2={t(`input.question`) + ` ` + `( ${t(`alphabet.${getCharFromNumber(index)}`)} )`}
|
||||
label2={
|
||||
t(`input.question`) +
|
||||
` ` +
|
||||
`( ${t(`alphabet.${getCharFromNumber(index)}`)} )`
|
||||
}
|
||||
name={index}
|
||||
id={`question_${index + 1}`}
|
||||
type="TextArea"
|
||||
|
|
@ -51,18 +54,16 @@ const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
|
|||
<ImageBoxField name={`Questions.${index}.image`} />
|
||||
|
||||
<div className="answer_status">
|
||||
|
||||
<p className="delete_question_options">
|
||||
{t("header.delete_question")}
|
||||
<GoTrash className="trash_icon" onClick={handleDeleteQuestion} size={17} />
|
||||
<GoTrash
|
||||
className="trash_icon"
|
||||
onClick={handleDeleteQuestion}
|
||||
size={17}
|
||||
/>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,35 +1,32 @@
|
|||
import React, { useState, useMemo } from 'react';
|
||||
import { Select, Spin } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useFormikContext } from 'formik';
|
||||
import { useDebounce } from '../../../../../../utils/useDebounce';
|
||||
import { useGetAllTag } from '../../../../../../api/tags';
|
||||
import React, { useState, useMemo } from "react";
|
||||
import { Select, Spin } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useFormikContext } from "formik";
|
||||
import { useDebounce } from "../../../../../../utils/useDebounce";
|
||||
import { useGetAllTag } from "../../../../../../api/tags";
|
||||
|
||||
const MaltySelectTag = ({ parent_index }: { parent_index: number }) => {
|
||||
const [searchValue, setSearchValue] = useState<string>('');
|
||||
const [fieldValue, setFieldValue] = useState<string>('');
|
||||
const [searchValue, setSearchValue] = useState<string>("");
|
||||
const [fieldValue, setFieldValue] = useState<string>("");
|
||||
const formik = useFormikContext<any>();
|
||||
const values = formik?.values?.Questions?.[parent_index]?.tags;
|
||||
const handleChange = (value: string[]) => {
|
||||
formik.setFieldValue(`Questions.[${parent_index}].tags`,value)
|
||||
setSearchValue('');
|
||||
setFieldValue('');
|
||||
|
||||
formik.setFieldValue(`Questions.[${parent_index}].tags`, value);
|
||||
setSearchValue("");
|
||||
setFieldValue("");
|
||||
};
|
||||
|
||||
const handleSearch = useDebounce((value: string) => {
|
||||
setSearchValue(value);
|
||||
|
||||
});
|
||||
|
||||
const handleFieldChange = (value: string) => {
|
||||
setFieldValue(value);
|
||||
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
setSearchValue('');
|
||||
setFieldValue('');
|
||||
setSearchValue("");
|
||||
setFieldValue("");
|
||||
};
|
||||
|
||||
const { data, isLoading } = useGetAllTag({
|
||||
|
|
@ -38,21 +35,21 @@ const MaltySelectTag = ({parent_index}:{parent_index:number}) => {
|
|||
|
||||
const [t] = useTranslation();
|
||||
|
||||
const options = data?.data ?? []
|
||||
const additionalData = options?.length < 1 && searchValue.length > 1 && !isLoading ? [{id:`new_${searchValue}`,name:searchValue}] :[];
|
||||
const options = data?.data ?? [];
|
||||
const additionalData =
|
||||
options?.length < 1 && searchValue.length > 1 && !isLoading
|
||||
? [{ id: `new_${searchValue}`, name: searchValue }]
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className='SelectTag'>
|
||||
|
||||
<label htmlFor="">
|
||||
{t("models.tag")}
|
||||
</label>
|
||||
<div className="SelectTag">
|
||||
<label htmlFor="">{t("models.tag")}</label>
|
||||
<Select
|
||||
mode="multiple"
|
||||
allowClear
|
||||
style={{ width: '100%' ,height:"40px"}}
|
||||
style={{ width: "100%", height: "40px" }}
|
||||
placeholder=""
|
||||
fieldNames={{ label: 'name', value: 'id' }}
|
||||
fieldNames={{ label: "name", value: "id" }}
|
||||
onChange={handleChange}
|
||||
options={[...options, ...additionalData]}
|
||||
filterOption={false}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,12 @@ const Form = () => {
|
|||
return (
|
||||
<Row className="w-100 exercise_form_container">
|
||||
<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" />
|
||||
</div>
|
||||
|
||||
|
|
@ -60,7 +65,6 @@ const Form = () => {
|
|||
)}
|
||||
|
||||
<div className="exercise_form_width">
|
||||
|
||||
<ValidationField
|
||||
className=" "
|
||||
placeholder="_"
|
||||
|
|
|
|||
|
|
@ -79,10 +79,12 @@ const TableHeader = () => {
|
|||
ModelAbility={ModalEnum?.QUESTION_ACCEPT}
|
||||
canAdd={canAddQuestion}
|
||||
locationToNavigate={`${ABILITIES_ENUM?.QUESTION}/add`}
|
||||
openModel={false}/>
|
||||
openModel={false}
|
||||
/>
|
||||
<FilterLayout
|
||||
sub_children={<FilterForm />}
|
||||
filterTitle="sidebar.question"/>
|
||||
filterTitle="sidebar.question"
|
||||
/>
|
||||
<Table />
|
||||
</Suspense>
|
||||
<DeleteModels
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export const useColumns = () => {
|
|||
},
|
||||
|
||||
{
|
||||
title: '#',
|
||||
title: "#",
|
||||
key: "actions",
|
||||
align: "center",
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import ValidationField from '../../../../Components/ValidationField/ValidationField'
|
||||
import React from "react";
|
||||
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
||||
import { Col, Row } from "reactstrap";
|
||||
|
||||
const FilterForm = () => {
|
||||
|
|
@ -9,17 +9,14 @@ const FilterForm = () => {
|
|||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
<Col>
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
<ValidationField placeholder="name" label="name" name="name" />
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterForm
|
||||
export default FilterForm;
|
||||
|
|
|
|||
|
|
@ -45,10 +45,12 @@ const TableWithHeader = () => {
|
|||
<PageHeader
|
||||
pageTitle="subjects"
|
||||
ModelAbility={ModalEnum?.SUBJECT_ADD}
|
||||
canAdd={canAddSubject}/>
|
||||
canAdd={canAddSubject}
|
||||
/>
|
||||
<FilterLayout
|
||||
sub_children={<FilterForm />}
|
||||
filterTitle="sidebar.subjects"/>
|
||||
filterTitle="sidebar.subjects"
|
||||
/>
|
||||
<Table />
|
||||
|
||||
<AddModalForm />
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@ import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
|
|||
import { useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
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 { Subject } from "../../../../types/Subject";
|
||||
|
||||
|
|
|
|||
|
|
@ -55,11 +55,7 @@ const FormField = ({ isLoading }: FormFieldType) => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
disabled={isLoading}
|
||||
type="submit"
|
||||
className="auth_submit_button"
|
||||
>
|
||||
<button disabled={isLoading} type="submit" className="auth_submit_button">
|
||||
{t("practical.login")}
|
||||
</button>
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -26,19 +26,16 @@ const LoginForm = () => {
|
|||
|
||||
const LocalType = getLocalStorage(USER_KEY)?.type ?? false;
|
||||
useEffect(() => {
|
||||
|
||||
if (isSuccess) {
|
||||
login(LoginData?.data as any)
|
||||
|
||||
login(LoginData?.data as any);
|
||||
}
|
||||
}, [isSuccess])
|
||||
}, [isSuccess]);
|
||||
|
||||
useEffect(() => {
|
||||
if (LocalType) {
|
||||
window.location.href = ("/")
|
||||
window.location.href = "/";
|
||||
}
|
||||
}, [LocalType])
|
||||
|
||||
}, [LocalType]);
|
||||
|
||||
return (
|
||||
<div className="LoginForm">
|
||||
|
|
|
|||
|
|
@ -7,11 +7,7 @@ const Dummy = () => {
|
|||
const [t] = useTranslation();
|
||||
useSetPageTitle(`${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t("dashboard")}`);
|
||||
|
||||
return (
|
||||
<div className="DummyHomePage">
|
||||
|
||||
</div>
|
||||
);
|
||||
return <div className="DummyHomePage"></div>;
|
||||
};
|
||||
|
||||
export default Dummy;
|
||||
|
|
|
|||
|
|
@ -12,8 +12,12 @@ const Unit = React.lazy(() => import("./Pages/Admin/Unit/Page"));
|
|||
const Lesson = React.lazy(() => import("./Pages/Admin/lesson/Page"));
|
||||
|
||||
const Question = React.lazy(() => import("./Pages/Admin/question/Page"));
|
||||
const AddQuestionPage = React.lazy(() => import("./Pages/Admin/question/AddPage"));
|
||||
const EditQuestionPage = React.lazy(() => import("./Pages/Admin/question/EditPage"));
|
||||
const AddQuestionPage = React.lazy(
|
||||
() => import("./Pages/Admin/question/AddPage"),
|
||||
);
|
||||
const EditQuestionPage = React.lazy(
|
||||
() => import("./Pages/Admin/question/EditPage"),
|
||||
);
|
||||
|
||||
const Report = React.lazy(() => import("./Pages/Admin/Report/Page"));
|
||||
const Student = React.lazy(() => import("./Pages/Admin/Student/Page"));
|
||||
|
|
|
|||
|
|
@ -48,7 +48,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.pagination_antd {
|
||||
margin-inline: 16px !important;
|
||||
}
|
||||
|
|
@ -17,7 +17,9 @@
|
|||
margin: 10px 0;
|
||||
}
|
||||
header {
|
||||
display: flex; justify-content: space-between;align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
padding: 16px;
|
||||
z-index: 10;
|
||||
|
|
@ -29,7 +31,7 @@
|
|||
}
|
||||
svg {
|
||||
font-size: 30px;
|
||||
color: #6A7287;
|
||||
color: #6a7287;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,7 +74,6 @@
|
|||
label {
|
||||
color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
}
|
||||
.ant-modal-root .ant-modal-centered .ant-modal {
|
||||
width: 45vw;
|
||||
|
|
@ -80,4 +81,3 @@
|
|||
.ant-modal .ant-modal-body {
|
||||
padding-inline: 1vw !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@ svg {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/* Username */
|
||||
#username {
|
||||
font-size: 1vw;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
:root {
|
||||
--primary: #3D5EE1;
|
||||
--primary: #3d5ee1;
|
||||
--secondary: #303972;
|
||||
--field: #b0d9ff;
|
||||
--text: black;
|
||||
|
|
@ -11,8 +11,8 @@
|
|||
--border-color: #b0d9ff;
|
||||
--shadow: rgba(0, 0, 0, 0.15);
|
||||
--white: white;
|
||||
--bgSideBar: #0F0C1C;
|
||||
--textSideBar: #FFFFFF;
|
||||
--bgSideBar: #0f0c1c;
|
||||
--textSideBar: #ffffff;
|
||||
--sideBarWidth: 17.5vw;
|
||||
--sideBarWidthClosed: 80px;
|
||||
--sideBarMinWidth: 250px;
|
||||
|
|
@ -29,8 +29,8 @@
|
|||
--presence: #31ce83;
|
||||
--absence: #ce3131;
|
||||
--lateArrival: #f0e43b;
|
||||
--earlyDeparture: #3D5EE1;
|
||||
--warning: #E93553;
|
||||
--earlyDeparture: #3d5ee1;
|
||||
--warning: #e93553;
|
||||
|
||||
--bg4: #e6e5e5;
|
||||
--borderColor: #ffffff91;
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
}
|
||||
|
||||
:root:has(.dark) {
|
||||
--primary: #3D5EE1;
|
||||
--primary: #3d5ee1;
|
||||
--secondary: #303972;
|
||||
--field: #b0d9ff;
|
||||
--text: white;
|
||||
|
|
@ -51,8 +51,8 @@
|
|||
--border-color: #b0d9ff;
|
||||
--shadow: rgba(0, 0, 0, 0.15);
|
||||
--white: white;
|
||||
--bgSideBar: #0F0C1C;
|
||||
--textSideBar: #FFFFFF;
|
||||
--bgSideBar: #0f0c1c;
|
||||
--textSideBar: #ffffff;
|
||||
--sideBarWidth: 14vw;
|
||||
--sideBarMinWidth: 14vw;
|
||||
--sideBarSpace: 1%;
|
||||
|
|
@ -68,5 +68,5 @@
|
|||
--presence: #31ce83;
|
||||
--absence: #ce3131;
|
||||
--lateArrival: #f0e43b;
|
||||
--earlyDeparture: #3D5EE1;
|
||||
--earlyDeparture: #3d5ee1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,11 +48,8 @@
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.FormCard {
|
||||
// background: var(--bg);
|
||||
border-radius: var(--border-radius);
|
||||
|
|
@ -258,7 +255,6 @@ button:disabled {
|
|||
.h1 {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
.buttonAction {
|
||||
|
|
@ -292,13 +288,10 @@ button:disabled {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.cc {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.VisibleHidden {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
|
||||
@import "../Antd/index.scss";
|
||||
|
||||
|
||||
@import "../DataTable/index.scss";
|
||||
|
||||
@import "../Pages/index.scss";
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
width: 40vw;
|
||||
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);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -66,7 +66,8 @@
|
|||
}
|
||||
.auth_submit_button {
|
||||
width: 100%;
|
||||
@include Flex;text-align: center;
|
||||
@include Flex;
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
background: var(--primary);
|
||||
margin-top: 10px;
|
||||
|
|
@ -78,7 +79,7 @@
|
|||
}
|
||||
.form-label {
|
||||
font-size: 1vw;
|
||||
color: #202C4B;
|
||||
color: #202c4b;
|
||||
}
|
||||
}
|
||||
/* Remove autofill background color */
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@
|
|||
// box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.001);
|
||||
width: 220px;
|
||||
// direction: ltr;
|
||||
color: #6A7287B2;
|
||||
|
||||
color: #6a7287b2;
|
||||
}
|
||||
.NavBar {
|
||||
.search-header {
|
||||
|
|
@ -50,7 +49,8 @@
|
|||
.search__input_text {
|
||||
color: var(--white);
|
||||
position: absolute;
|
||||
top: 0;left: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 30px;
|
||||
width: 100px !important;
|
||||
}
|
||||
|
|
@ -143,10 +143,8 @@
|
|||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
color: #fff !important;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.NavBar {
|
||||
.header_search {
|
||||
.search-field {
|
||||
|
|
@ -155,6 +153,5 @@
|
|||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
.DataTable {
|
||||
width: 100%;
|
||||
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 {
|
||||
|
|
@ -37,13 +37,21 @@
|
|||
font-size: 0.9vw;
|
||||
}
|
||||
|
||||
|
||||
.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:last-child,
|
||||
.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:first-child{
|
||||
.ant-table-wrapper
|
||||
.ant-table-container
|
||||
table
|
||||
> thead
|
||||
> tr:first-child
|
||||
> *:last-child,
|
||||
.ant-table-wrapper
|
||||
.ant-table-container
|
||||
table
|
||||
> thead
|
||||
> tr:first-child
|
||||
> *:first-child {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.TableWithHeader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -3,18 +3,22 @@
|
|||
border-radius: 10px 10px 0 0;
|
||||
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.1);
|
||||
> div {
|
||||
display: flex;align-items: center;justify-content: space-between;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.filter_and_order_by {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
.filter_button {
|
||||
display: flex;justify-content: space-between;align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 190px;
|
||||
padding-inline: 20px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--opacity) !important;
|
||||
transition: ease-in-out .4s;
|
||||
transition: ease-in-out 0.4s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: var(--bg4);
|
||||
|
|
@ -25,8 +29,9 @@
|
|||
}
|
||||
}
|
||||
span {
|
||||
display: flex;align-items: center;
|
||||
color: #6A7287;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #6a7287;
|
||||
.pagination_select,
|
||||
.order_by_select,
|
||||
.filter_modal_select {
|
||||
|
|
@ -51,12 +56,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.pagination_column,
|
||||
.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-customize-input):not(.ant-pagination-size-changer):hover .ant-select-selector{
|
||||
transition: ease-in-out .4s !important;
|
||||
.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-customize-input
|
||||
):not(.ant-pagination-size-changer):hover
|
||||
.ant-select-selector {
|
||||
transition: ease-in-out 0.4s !important;
|
||||
cursor: pointer !important;
|
||||
&:hover {
|
||||
background: var(--bg4) !important;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
|
||||
}
|
||||
|
||||
.Layout_Body {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.NavBar {
|
||||
display: flex;
|
||||
justify-content: space-between;align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: var(--navBarHeight);
|
||||
// gap: 30px;
|
||||
|
|
@ -109,8 +110,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.NotificationsIcon {
|
||||
position: relative;
|
||||
&::after {
|
||||
|
|
@ -118,7 +117,7 @@
|
|||
top: 20%;
|
||||
left: 20%;
|
||||
content: "";
|
||||
background: #E93553;
|
||||
background: #e93553;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
.page_header {
|
||||
margin-bottom: 20px !important;
|
||||
.page_header_links {
|
||||
display: flex; flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.page_title {
|
||||
font-weight: bolder;
|
||||
font-size: 24px;
|
||||
|
|
@ -12,9 +13,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.filter_header_top {
|
||||
color: #202C4B;
|
||||
|
||||
|
||||
color: #202c4b;
|
||||
}
|
||||
|
|
@ -19,10 +19,11 @@
|
|||
flex-direction: column;
|
||||
z-index: 2;
|
||||
|
||||
|
||||
.side_bar_header {
|
||||
height: var(--navBarHeight);
|
||||
display: flex;align-items: center;justify-content: space-between;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--primary);
|
||||
padding-inline: 15px;
|
||||
border-left: 1px solid var(--borderColor);
|
||||
|
|
@ -106,7 +107,9 @@
|
|||
color: var(--borderColor);
|
||||
}
|
||||
div {
|
||||
display: flex;align-items: center;justify-content: start;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
background: inherit;
|
||||
font-size: 0.8vw;
|
||||
height: 2.5vw;
|
||||
|
|
@ -120,7 +123,6 @@
|
|||
font-size: 16px;
|
||||
span {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
svg {
|
||||
border-radius: 5px;
|
||||
|
|
@ -129,7 +131,6 @@
|
|||
background: #ffffff2f;
|
||||
font-size: 30px;
|
||||
margin-left: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -196,12 +197,14 @@
|
|||
}
|
||||
}
|
||||
.side_bar_links {
|
||||
display: flex;align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.active {
|
||||
background: inherit !important;
|
||||
}
|
||||
.link {
|
||||
align-items: center;justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100% !important;
|
||||
padding: 0vw 0vw !important;
|
||||
i {
|
||||
|
|
@ -240,5 +243,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -18,4 +18,3 @@
|
|||
.Unit_Page {
|
||||
padding-inline: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
}
|
||||
.exercise_form,
|
||||
.ChoiceFields {
|
||||
|
||||
.upload_image_button {
|
||||
.ant-btn {
|
||||
min-height: 15.6vh !important;
|
||||
|
|
@ -129,7 +128,7 @@
|
|||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 14px 10px;
|
||||
background: #F2F4F8;
|
||||
background: #f2f4f8;
|
||||
border-radius: 10px 10px 0 0;
|
||||
margin: 0 !important;
|
||||
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -148,7 +147,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.answer_status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -162,7 +160,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.exercise_add_header {
|
||||
article {
|
||||
display: flex;
|
||||
|
|
@ -177,7 +174,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.SelectTag {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -190,10 +186,7 @@
|
|||
max-width: 50vw;
|
||||
> * {
|
||||
width: 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.exercise_forms {
|
||||
|
|
|
|||
|
|
@ -142,12 +142,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.ant-table-wrapper .ant-table-thead >tr>th, .ant-table-wrapper .ant-table-thead >tr>td{
|
||||
background: #F2F4F8!important;
|
||||
.ant-table-wrapper .ant-table-thead > tr > th,
|
||||
.ant-table-wrapper .ant-table-thead > tr > td {
|
||||
background: #f2f4f8 !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;
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
export const BaseURL = "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
Loading…
Reference in New Issue
Block a user