Compare commits
2 Commits
d3ab2a8f7d
...
c1e2718e14
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c1e2718e14 | ||
|
|
39a910d9ca |
|
|
@ -43,13 +43,11 @@ const SelectTag: React.FC = () => {
|
||||||
: [];
|
: [];
|
||||||
|
|
||||||
|
|
||||||
console.log(options);
|
|
||||||
console.log(formik?.values?.tags);
|
|
||||||
const value = formik?.values?.tags?.map((item: any) => item?.id ?? item) ?? [];
|
const value = formik?.values?.tags?.map((item: any) => item?.id ?? item) ?? [];
|
||||||
|
|
||||||
|
|
||||||
const AllOptions = [...options, ...additionalData]
|
const AllOptions = [...options, ...additionalData]
|
||||||
console.log(AllOptions);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="SelectTag">
|
<div className="SelectTag">
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,6 @@ import useSetPageTitle from "../../../Hooks/useSetPageTitle";
|
||||||
import { ModalEnum } from "../../../enums/Model";
|
import { ModalEnum } from "../../../enums/Model";
|
||||||
import { useDeleteUnit } from "../../../api/unit";
|
import { useDeleteUnit } from "../../../api/unit";
|
||||||
import { useGetAllGrade } from "../../../api/grade";
|
import { useGetAllGrade } from "../../../api/grade";
|
||||||
import { useGetAllCurriculum } from "../../../api/curriculum";
|
|
||||||
import PageHeader from "../../../Layout/Dashboard/PageHeader";
|
import PageHeader from "../../../Layout/Dashboard/PageHeader";
|
||||||
import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
|
import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
|
||||||
import FilterForm from "./Model/FilterForm";
|
import FilterForm from "./Model/FilterForm";
|
||||||
|
|
@ -34,13 +33,10 @@ const TableHeader = () => {
|
||||||
const { data: grade } = useGetAllGrade({
|
const { data: grade } = useGetAllGrade({
|
||||||
show: grade_id,
|
show: grade_id,
|
||||||
});
|
});
|
||||||
const { data: Curriculum } = useGetAllCurriculum({
|
|
||||||
show: curriculum_id,
|
|
||||||
});
|
|
||||||
const gradeName = grade?.data?.name ?? "";
|
const gradeName = grade?.data?.name ?? "";
|
||||||
|
|
||||||
const SubjectName = Subject?.data?.name ?? "";
|
const SubjectName = Subject?.data?.name ?? "";
|
||||||
const CurriculumName = Curriculum?.data?.name ?? "";
|
|
||||||
useSetPageTitle(
|
useSetPageTitle(
|
||||||
t(`page_header.grade`) +
|
t(`page_header.grade`) +
|
||||||
"/" +
|
"/" +
|
||||||
|
|
@ -50,10 +46,6 @@ const TableHeader = () => {
|
||||||
"/" +
|
"/" +
|
||||||
SubjectName +
|
SubjectName +
|
||||||
"/" +
|
"/" +
|
||||||
t("PageTitle.curriculum") +
|
|
||||||
"/" +
|
|
||||||
CurriculumName +
|
|
||||||
"/" +
|
|
||||||
t("PageTitle.unit"),
|
t("PageTitle.unit"),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -36,13 +36,10 @@ const TableHeader = () => {
|
||||||
const { data: grade } = useGetAllGrade({
|
const { data: grade } = useGetAllGrade({
|
||||||
show: grade_id,
|
show: grade_id,
|
||||||
});
|
});
|
||||||
const { data: Curriculum } = useGetAllCurriculum({
|
|
||||||
show: curriculum_id,
|
|
||||||
});
|
|
||||||
|
|
||||||
const gradeName = grade?.data?.name ?? "";
|
const gradeName = grade?.data?.name ?? "";
|
||||||
const SubjectName = Subject?.data?.name ?? "";
|
const SubjectName = Subject?.data?.name ?? "";
|
||||||
const CurriculumName = Curriculum?.data?.name ?? "";
|
|
||||||
const unitName = unit?.data?.name ?? "";
|
const unitName = unit?.data?.name ?? "";
|
||||||
|
|
||||||
useSetPageTitle(
|
useSetPageTitle(
|
||||||
|
|
@ -54,10 +51,6 @@ const TableHeader = () => {
|
||||||
"/" +
|
"/" +
|
||||||
SubjectName +
|
SubjectName +
|
||||||
"/" +
|
"/" +
|
||||||
t("PageTitle.curriculum") +
|
|
||||||
"/" +
|
|
||||||
CurriculumName +
|
|
||||||
"/" +
|
|
||||||
t("PageTitle.unit") +
|
t("PageTitle.unit") +
|
||||||
"/" +
|
"/" +
|
||||||
unitName +
|
unitName +
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { Suspense, lazy, useEffect } from "react";
|
import React, { Suspense, lazy } from "react";
|
||||||
import { Modal, Spin } from "antd";
|
import { Spin } from "antd";
|
||||||
import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
|
import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
|
||||||
import {
|
import {
|
||||||
getInitialValues,
|
getInitialValues,
|
||||||
|
|
@ -27,14 +27,12 @@ const AddPage: React.FC = () => {
|
||||||
const {
|
const {
|
||||||
isBseQuestion,
|
isBseQuestion,
|
||||||
setTagsSearch,
|
setTagsSearch,
|
||||||
setObjectToEdit,
|
|
||||||
objectToEdit,
|
objectToEdit,
|
||||||
} = useObjectToEdit();
|
} = useObjectToEdit();
|
||||||
|
|
||||||
const { setIsOpen } = useModalState((state) => state);
|
|
||||||
|
|
||||||
const [t] = useTranslation();
|
const [t] = useTranslation();
|
||||||
const { unit_id, curriculum_id, grade_id, subject_id, lesson_id } =
|
const { subject_id, lesson_id } =
|
||||||
useParams<ParamsEnum>();
|
useParams<ParamsEnum>();
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React from "react";
|
||||||
import { Input, Modal, Spin } from "antd";
|
import { Modal } from "antd";
|
||||||
import { useModalState } from "../../../../zustand/Modal";
|
import { useModalState } from "../../../../zustand/Modal";
|
||||||
import { ModalEnum } from "../../../../enums/Model";
|
import { ModalEnum } from "../../../../enums/Model";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
|
|
||||||
import { QUESTION_OBJECT_KEY } from "../../../../config/AppKey";
|
import { QUESTION_OBJECT_KEY } from "../../../../config/AppKey";
|
||||||
|
|
||||||
const AcceptModal: React.FC = () => {
|
const AcceptModal: React.FC = () => {
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,9 @@
|
||||||
import { Row } from "reactstrap";
|
import { Row } from "reactstrap";
|
||||||
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
||||||
import { useFormikContext } from "formik";
|
import { useFormikContext } from "formik";
|
||||||
import ChoiceFields from "./Field/ChoiceFields";
|
|
||||||
import { FaCirclePlus } from "react-icons/fa6";
|
import { FaCirclePlus } from "react-icons/fa6";
|
||||||
import { Choice } from "../../../../types/Item";
|
import { Choice } from "../../../../types/Item";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import DynamicTags from "./Tags/DynamicTags";
|
|
||||||
import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
|
import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import Choices from "./Field/Choices";
|
import Choices from "./Field/Choices";
|
||||||
|
|
|
||||||
|
|
@ -1,91 +0,0 @@
|
||||||
import { useFormikContext } from "formik";
|
|
||||||
import React from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { FaCirclePlus } from "react-icons/fa6";
|
|
||||||
import Tag from "./Tag";
|
|
||||||
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
|
|
||||||
import { useGetAllTag } from "../../../../../api/tags";
|
|
||||||
|
|
||||||
const DynamicTags = () => {
|
|
||||||
const formik = useFormikContext<any>();
|
|
||||||
const [t] = useTranslation();
|
|
||||||
const { TagsSearch, setTagsSearch, currentTag } = useObjectToEdit();
|
|
||||||
const { data } = useGetAllTag({
|
|
||||||
name: TagsSearch,
|
|
||||||
});
|
|
||||||
const suggests = data?.data;
|
|
||||||
|
|
||||||
const handleAddChoice = () => {
|
|
||||||
const length = formik?.values?.tags.length;
|
|
||||||
const lastElement = formik?.values?.tags[length - 1]?.name;
|
|
||||||
setTagsSearch;
|
|
||||||
if (lastElement !== "") {
|
|
||||||
formik.setFieldValue("tags", [
|
|
||||||
...((formik?.values as any)?.tags as any[]),
|
|
||||||
|
|
||||||
{
|
|
||||||
id: length + "_new",
|
|
||||||
name: "",
|
|
||||||
key: length,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
} else {
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// console.log(formik?.values);
|
|
||||||
// console.log(currentTag);
|
|
||||||
|
|
||||||
const handleChoice = (item: any) => {
|
|
||||||
const length = formik.values.tags.length;
|
|
||||||
console.log(currentTag);
|
|
||||||
|
|
||||||
formik.setFieldValue(`tags[${currentTag}]`, { ...item, key: length });
|
|
||||||
setTagsSearch(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
// console.log(formik?.values?.tags?.length);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="DynamicTags">
|
|
||||||
{formik?.values?.tags?.length < 1 && (
|
|
||||||
<p className="add_new_button">
|
|
||||||
<FaCirclePlus size={23} onClick={handleAddChoice} />{" "}
|
|
||||||
{t("header.add_tag")}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="tag_container">
|
|
||||||
<div className="tags">
|
|
||||||
{(((formik?.values as any)?.tags as any[]) || []).map(
|
|
||||||
(item: any, index: number) => {
|
|
||||||
return <Tag key={index} index={index} data={item} />;
|
|
||||||
},
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{formik?.values?.tags?.length > 0 && (
|
|
||||||
<p className="add_new_button">
|
|
||||||
<FaCirclePlus onClick={handleAddChoice} size={20} />
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{TagsSearch && (
|
|
||||||
<div className="suggests">
|
|
||||||
{suggests?.map((item: any, index: number) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="suggested"
|
|
||||||
key={index}
|
|
||||||
onClick={() => handleChoice(item)}
|
|
||||||
>
|
|
||||||
{item?.name}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DynamicTags;
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
import { useFormikContext } from "formik";
|
|
||||||
import React, { useRef, useEffect } from "react";
|
|
||||||
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
|
|
||||||
import { FaTrash } from "react-icons/fa";
|
|
||||||
|
|
||||||
const Tag = ({ data, index }: { data: any; index: number }) => {
|
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
|
||||||
const formik = useFormikContext<any>();
|
|
||||||
const { setTagsSearch, setCurrentTag } = useObjectToEdit();
|
|
||||||
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
||||||
const DEBOUNCE_DELAY = 500;
|
|
||||||
useEffect(() => {
|
|
||||||
if (inputRef.current) {
|
|
||||||
inputRef.current.style.width = `${(formik?.values?.tags[index]?.name?.length + 1) * 8}px`;
|
|
||||||
}
|
|
||||||
}, [formik?.values?.tags[index]?.name]);
|
|
||||||
|
|
||||||
const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
// console.log(e.target.value);
|
|
||||||
formik.setFieldValue(`tags[${index}].name`, e.target.value);
|
|
||||||
// setTagsSearch(e.target.value)
|
|
||||||
formik.setFieldValue(`tags.[${index}]`, {
|
|
||||||
key: index,
|
|
||||||
name: e.target.value,
|
|
||||||
id: `${index}_key`,
|
|
||||||
});
|
|
||||||
|
|
||||||
setCurrentTag(index);
|
|
||||||
if (timeoutRef.current) {
|
|
||||||
clearTimeout(timeoutRef.current);
|
|
||||||
}
|
|
||||||
|
|
||||||
timeoutRef.current = setTimeout(() => {
|
|
||||||
setTagsSearch(e.target.value);
|
|
||||||
}, DEBOUNCE_DELAY);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleInputBlur = () => {
|
|
||||||
// setTagsSearch(null)
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteChoice = () => {
|
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
// Create a copy of current tags array
|
|
||||||
const currentTags = [...formik.values.tags];
|
|
||||||
|
|
||||||
// Remove the item at the specified index from the array
|
|
||||||
currentTags.splice(index, 1);
|
|
||||||
|
|
||||||
console.log(currentTags); // Log the updated tags array
|
|
||||||
|
|
||||||
// Update formik field value with the updated tags array
|
|
||||||
formik.setFieldValue("tags", currentTags);
|
|
||||||
|
|
||||||
// Reset search state if needed
|
|
||||||
setTagsSearch(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="tag">
|
|
||||||
<input
|
|
||||||
ref={inputRef}
|
|
||||||
className="tagInput"
|
|
||||||
type="text"
|
|
||||||
value={formik?.values?.tags[index]?.name}
|
|
||||||
onChange={handleEditInputChange}
|
|
||||||
onBlur={handleInputBlur}
|
|
||||||
/>
|
|
||||||
<FaTrash onClick={handleDeleteChoice} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Tag;
|
|
||||||
|
|
@ -7,7 +7,6 @@ export const getInitialValues = (objectToEdit: Question): any => {
|
||||||
const tags = objectToEdit?.tags?.map((item: any, index: number) => {
|
const tags = objectToEdit?.tags?.map((item: any, index: number) => {
|
||||||
return { ...item };
|
return { ...item };
|
||||||
});
|
});
|
||||||
console.log(tags);
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
id: objectToEdit?.id ?? null,
|
id: objectToEdit?.id ?? null,
|
||||||
|
|
|
||||||
|
|
@ -7,9 +7,7 @@ export const RoleByType = (item: { type?: string }):boolean=>{
|
||||||
const LocalType = getLocalStorage(USER_KEY)?.type ?? undefined ;
|
const LocalType = getLocalStorage(USER_KEY)?.type ?? undefined ;
|
||||||
const isAdmin = LocalType === UserTypeEnum.ADMIN ;
|
const isAdmin = LocalType === UserTypeEnum.ADMIN ;
|
||||||
const isReSeller = LocalType === UserTypeEnum.RE_SELLER;
|
const isReSeller = LocalType === UserTypeEnum.RE_SELLER;
|
||||||
const isAdminRoute = type === UserTypeEnum.ADMIN ;
|
|
||||||
const isReSellerRoute = type === UserTypeEnum.RE_SELLER;
|
const isReSellerRoute = type === UserTypeEnum.RE_SELLER;
|
||||||
console.log(LocalType);
|
|
||||||
|
|
||||||
if(!LocalType){
|
if(!LocalType){
|
||||||
return false
|
return false
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user