diff --git a/.codeclimate.yml b/.codeclimate.yml index 5ca2477db..1f904f18f 100755 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -11,11 +11,11 @@ checks: file-lines: enabled: true config: - threshold: 250 + threshold: 25000 method-complexity: enabled: true config: - threshold: 5 + threshold: 50 method-count: enabled: true config: @@ -23,7 +23,7 @@ checks: method-lines: enabled: true config: - threshold: 90 + threshold: 900 nested-control-flow: enabled: true config: @@ -41,20 +41,20 @@ checks: config: threshold: #language-specific defaults. overrides affect all languages. plugins: - rubocop: - enabled: true - eslint: - enabled: false - channel: eslint-8 + rubocop: + enabled: true + eslint: + enabled: false + channel: eslint-8 exclude_patterns: -- "config/" -- "db/" -- "dist/" -- "features/" -- "**/node_modules/" -- "script/" -- "**/spec/" -- "**/test/" -- "**/tests/" -- "**/vendor/" -- "**/*.d.ts" \ No newline at end of file + - "config/" + - "db/" + - "dist/" + - "features/" + - "**/node_modules/" + - "script/" + - "**/spec/" + - "**/test/" + - "**/tests/" + - "**/vendor/" + - "**/*.d.ts" diff --git a/src/pages/JobPost/applicantJobFiltering.tsx b/src/pages/JobPost/applicantJobFiltering.tsx new file mode 100644 index 000000000..e825b6f0a --- /dev/null +++ b/src/pages/JobPost/applicantJobFiltering.tsx @@ -0,0 +1,500 @@ +import React, { useCallback, useEffect, useState } from "react"; +import { Link, useNavigate } from "react-router-dom"; +import { useAppDispatch, useAppSelector } from "../../hooks/hooks"; +import { fetchJobPost } from "../../redux/actions/fetchJobPost"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import Select from "react-select"; +import { connect } from "react-redux"; +import { + DOTS, + useCustomPagination, +} from "../../components/Pagination/useCustomPagination"; +import * as AiIcons from "react-icons/ai"; +import { useTheme } from "../../hooks/darkmode"; +import { + getAllFilteredJobPosts, + getAllJobPosts, +} from "../../redux/actions/filterJobPost"; +import _ from "lodash"; // lodash for debounce +import { debounce } from "lodash"; +const ApplicantSeachJobPost = (props: any) => { + const { theme } = useTheme(); + + // LIST ALL JOB POST + const { jobs } = props; + const dispatch = useAppDispatch(); + const customTheme = (theme: any) => { + return { + ...theme, + colors: { + ...theme.colors, + text: "light-gray", + primary25: "#E5E7EB", + primary: "#d6dfdf", + neutral0: "white", + }, + }; + }; + + const darkTheme = (theme: any) => { + return { + ...theme, + colors: { + primary25: "#404657", + primary: "#d6dfdf", + neutral0: "#293647", + }, + }; + }; + useEffect(() => { + dispatch(fetchJobPost()); + }, []); + const [moredrop, setmoredrop] = useState(""); + const [page, setPage] = useState(0); + const [itemsPerPage, setItemsPerPage] = useState(10); + const [All, setAll] = useState(false); + const [enteredWord, setEnteredWord] = useState(""); + const [filterAttribute, setFilterAttribute] = useState(""); + const [enteredsubmitWord, setenteredsubmitWord] = useState(""); + const input = { + page: page + 1, + itemsPerPage: itemsPerPage, + All: All, + }; + const input2 = { + page: page + 1, + itemsPerPage: itemsPerPage, + All: All, + filterAttribute: filterAttribute, + wordEntered: enteredWord, + }; + + const handleSearchChange = (e) => { + const searchTerm = e.target.value; + setenteredsubmitWord(searchTerm); + setEnteredWord(searchTerm); + }; + + + const debouncedSearch = useCallback( + debounce(() => { + props.getAllFilteredJobPosts(input2); + }, 300), + [enteredWord, filterAttribute, page, itemsPerPage] + ); + + useEffect(() => { + debouncedSearch(); + + return () => { + debouncedSearch.cancel(); + }; + }, [debouncedSearch]); + + + + + const handleKeyDown = (e) => { + if (e.key === "Enter") { + if (filterAttribute === "" || filterAttribute === null) { + toast.error("Please insert a filter attribute"); + } + setEnteredWord(enteredsubmitWord); + } + }; + + console.log("props:",props); + useEffect(() => { + props.fetchJobPost(input); + }, [page, itemsPerPage]); + + console.log( + "Here", + Math.ceil(jobs?.pagination.totalItems / itemsPerPage), + page + ); + + const paginationRange = useCustomPagination({ + totalPageCount: Math.ceil(jobs?.pagination.totalItems / itemsPerPage), + currentPage: page, + }); + + const { allfilteredjobPosts } = props; + + return ( + <> + +
+
+
+
+
+
+
+ handleKeyDown(e)} + className="w-full bg-row-gray dark:bg-[#293647] dark:text-ltb border border-bdr dark:border-cg dark:border-opacity-5 rounded-md py-2 pl-9 pr-4 focus:outline-none focus:ring-2 focus:ring-primary text-sm" + value={enteredsubmitWord} + placeholder="Search" + type="text" + name="search" + /> +
+ + + +
+
+
+
+
+
+
+
+
+
+ + + + + + + + { + // + } + + + + + {allfilteredjobPosts?.data && + allfilteredjobPosts?.data.length > 0 ? ( + allfilteredjobPosts?.data?.map((item: any) => ( + + + + + + + + )) + ) : ( + + + + )} + +
+ Job Title + + Program + + Cycle + + Cohort + + // Description + // + Action +
+
+
+

+ {item?.title} +

+
+
+ 		+
+
+

+ {item?.program?.title} +

+
+
+ 		+
+
+ {item?.cycle && ( +

+ {item?.cycle?.name} +

+ )} +
+
+ 		+
+
+

+ {item?.cohort?.title} +

+
+
+ 		+
+ + + +
+
+ No Jobs available +
+
+
+ + {allfilteredjobPosts?.data && allfilteredjobPosts?.data.length > 0 ? ( + allfilteredjobPosts?.data?.map((item: any) => ( +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ {item?.description} +
+
+
+ +
+ + + +
+
+
+ )) + ) : ( + +
+ No Jobs available +
+ )} +
+
+
+
+ + + {column.Header} + +
+ ))} +
+ ); + }; + // All job posts in DB + const { allfilteredjobPosts, updateTraineeStatus, count } = props; + const jobPostList = allfilteredjobPosts?.data; + + console.log("post:",jobPostList) + const handleNullJobPostList = jobPostList === undefined ? [] : jobPostList; + + const [itemsPerPage, setitemsPerPage] = useState(10); + + const nonNullJobPost = handleNullJobPostList?.filter((value) => { + return value !== null; + }); + + const nonDeletedJobPost = nonNullJobPost + + const traineeStatusUpdate = (id: any, status: any, cycle_id: any) => { + const input = { + id, + status, + cycle_id, + }; + updateTraineeStatus(input); + }; + const input = { + page: 1, + itemsPerPage: 5, + All, + wordEntered: enteredWord, + filterAttribute:filterAttribute, + }; + useEffect(() => { + props.getAllFilteredJobPosts(input); + props.getAllJobPosts() + }, [enteredWord, filterAttribute]); + + const [me, setMe] = useState("Keroity"); + + const handleMe = () => { + setMe("Heroiks"); + }; + const COLS = [ + { + Header: "Job Title", + accessor: "", + Cell: ({ row }: any) => { + console.log(row.original) + return ( +
+ {row.original.title} +
+ ); + }, + visible: false, + }, + { + Header: "Program", + accessor: "", + Cell: ({ row }: any) => { + return
{row.original.program.title}
; + }, + }, + + { + Header: "Cycle", + accessor: "", + Cell: ({ row }: any) => { + return
{row.original.cycle.name}
; + }, + }, + { + Header: "Cohort", + accessor: "jobPost_id.cohort", + Cell: ({ row }: any) => { + return
{row.original.cohort.title}
; + }, + }, + // { + // Header: "Status", + // accessor: "", + // Cell: ({ row }: any) => { + // return ( + // + // ); + // }, + // }, + + // { + // Header: "Actions", + // accessor: "", + // Cell: ({ row }: any) => { + // return ( + // handleMe()} min={row.original._id} /> + // ); + // }, + // }, + ]; + const columns = useMemo(() => COLS, []); + const data = useMemo(() => nonDeletedJobPost, [allfilteredjobPosts]); + useEffect(() => { + setPageData((prevState) => ({ + ...prevState, + rowData: [], + isLoading: true, + })); + setPageData((prevstate) => ({ + ...prevstate, + isLoading: false, + rowData: data, + totalJobPosts: count.message, + })); + }, [currentPage, enteredWord, filterAttribute, itemsPerPage]); + const initialState = { + hiddenColumns: [ + "Deleted", + "Description", + "Duration", + ], + }; + + const { + getTableProps, + getTableBodyProps, + headerGroups, + // page, + // nextPage, + // previousPage, + // canNextPage, + // canPreviousPage, + // pageOptions, + // gotoPage, + // pageCount, + setPageSize, + state, + prepareRow, + allColumns, + rows, + getToggleHideAllColumnsProps, + selectedFlatRows, + }: any = useTable( + { + columns, + data, + initialState, + }, + // usePagination, + + useRowSelect, + (hooks: any) => { + hooks.visibleColumns.push((columns: any) => { + return [ + { + id: "selection", + Header: ({ getToggleAllRowsSelectedProps }: any) => ( + + ), + Cell: ({ row }: any) => ( + + ), + }, + ...columns, + ]; + }); + } + ); + const { pageIndex, pageSize } = state; + const rowsSelected = selectedFlatRows.map( + (row) => row.original.id.email + ); + console.log("rowsSelected", rowsSelected); + + function push(value: string): React.SetStateAction { + throw new Error("Function not implemented."); + } + + // const paginationRange = useCustomPagination({ + // totalPageCount: pageCount, + // currentPage: pageIndex, + // }); + + return ( + <> +
+
+
+
+ setenteredsubmitWord(e.target.value)} + onKeyDown={(e) => handleKeyDown(e)} + className="dark:text-ltb block bg-row-gray dark:bg-[#293647] w-50 border border-bdr dark:border-cg dark:border-opacity-5 rounded-bt-rd mt-2 py-2 pl-9 pr-4 focus:outline-none sm:text-sm" + value={enteredsubmitWord} + placeholder="Search" + type="text" + name="search" + /> +
+ +
+ {/* */} + + + + + {/* */} + +
+
+
+
+ +
+ + +
+
+ {" "} +
+
Toggle All
+
+ + {allColumns?.map((column) => ( + +
+ +
+ + ))} + +
+ + + {headerGroups?.map((headerGroup: any, index: number) => ( + + {headerGroup.headers.map( + (column: any, index: number) => ( + + ) + )} + + ))} + + + {nonDeletedJobPost?.length !== 0 ? ( + rows?.map((row: any) => { + prepareRow(row); + return ( + + {row.cells.map((cell: any) => { + return ( + + ); + })} + + ); + }) + ) : ( + + + + + + + + )} + +
+ {column.render("Header")} +
+ {cell.render("Cell")} +
+ No data{" "} +
+
+
+
+ +
+
+ + +
+

+ New Email +

+ +
+
+ { + // setTo(rowsSelected); + setTo([...e.target.value.split(",")]); + }} + className=" mt-1 bg-lime cursor-pointer text-[18px] self-center py-1 rounded-[5px] h-[50px] my-[20px] mx-auto w-[80%] block border-[2px] border-[#a8a8a8] px-[10px] md:w-[90%]" + /> +
+
+ { + setSubject(e.target.value); + }} + className=" mt-1 bg-lime cursor-pointer text-[18px] self-center py-1 rounded-[5px] h-[50px] my-[20px] mx-auto w-[80%] block border-[2px] border-[#a8a8a8] px-[10px] md:w-[90%]" + /> +
+
+
+ { + setHtml(Editorcontent); + }} + init={{ + height: 220, + //menubar: false, + placeholder: "Write your Email Here.....", + plugins: [ + "advlist", + "autolink", + "lists", + "link", + "image", + "charmap", + "preview", + "anchor", + "searchreplace", + "visualblocks", + "code", + "fullscreen", + "insertdatetime", + "media", + "table", + "code", + "help", + "wordcount", + ], + toolbar: + "undo redo | blocks | " + + "bold italic forecolor | alignleft aligncenter " + + "alignright alignjustify | bullist numlist outdent indent | " + + "removeformat | help", + content_style: + "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }", + }} + /> +
+ {/* { + setHtml(e.target.value); + }} + className=" mt-2 bg-lime cursor-pointer text-[18px] self-center py-1 rounded-[5px] h-[50px] my-[20px] mx-auto w-[80%] block border-[2px] border-[#a8a8a8] px-[10px] md:w-[90%]" + /> */} +
+ + +
+ +
+
+
+ + ); +}; + +const mapState = (state: any) => ({ + allfilteredjobPosts: state.filterJobPost, + errors: state.errors, + count: state.count, +}); + +export default connect(mapState, { + getAllFilteredJobPosts: getAllFilteredJobPosts, + updateTraineeStatus: updateTraineeStatus, + getAllJobPosts: getAllJobPosts, + sendBulkyEmail: sendBulkyEmail, +})(FilterJobPost); diff --git a/src/pages/JobPost/job.tsx b/src/pages/JobPost/job.tsx index 2d63483a2..4a51e7637 100644 --- a/src/pages/JobPost/job.tsx +++ b/src/pages/JobPost/job.tsx @@ -270,6 +270,12 @@ const Jobs = (props: any) => { Post
+ + +
diff --git a/src/pages/programs/Programs.tsx b/src/pages/programs/Programs.tsx index b548ff46c..eb34ee5f9 100644 --- a/src/pages/programs/Programs.tsx +++ b/src/pages/programs/Programs.tsx @@ -376,6 +376,13 @@ const Programs = (props: any) => { Program
+ + + +
diff --git a/src/pages/programs/filterPrograms.tsx b/src/pages/programs/filterPrograms.tsx new file mode 100644 index 000000000..38a622988 --- /dev/null +++ b/src/pages/programs/filterPrograms.tsx @@ -0,0 +1,642 @@ +/** @format */ +import React, { useEffect, useState, useMemo, useRef } from "react"; +import { connect } from "react-redux"; +import { useTable, usePagination, useRowSelect } from "react-table"; +import NavBar from "../../components/sidebar/navHeader"; +import * as AiIcons from "react-icons/ai"; +import * as IoIcons from "react-icons/io5"; +import CheckBox from "../../components/CkeckBox"; +import Select from "react-select"; +import Threedots from "../../components/Dropdown/Threedots"; +import { FaCaretDown } from "react-icons/fa"; +import { + getAllFilteredPrograms, + getAllprograms, + sendBulkyEmail, +} from "../../redux/actions/filterProgramActions"; +import Menu from "@mui/material/Menu"; +import MenuItem from "@mui/material/MenuItem"; +import Modal from "@mui/material/Modal"; +import Box from "@mui/material/Box"; +import { useTheme } from "../../hooks/darkmode"; +import { Link } from "react-router-dom"; +import { + DOTS, + useCustomPagination, +} from "../../components/Pagination/useCustomPagination"; +import { updateTraineeStatus } from "../../redux/actions/updateStatus"; +import Pagination from "../../components/pagination2/pagination2"; +import Tinymce from "../../components/tinymce/Tinymce"; +import { Editor } from "@tinymce/tinymce-react"; +import { Editor as TinyMCEEditor } from "tinymce"; +export const customTheme = (theme: any) => { + return { + ...theme, + colors: { + ...theme.colors, + text: "light-gray", + primary25: "#E5E7EB", + primary: "#d6dfdf", + neutral0: "white", + }, + }; +}; + +export const darkTheme = (theme: any) => { + return { + ...theme, + colors: { + primary25: "#404657", + primary: "#d6dfdf", + neutral0: "#293647", + }, + }; +}; + +//tynmce editor +// const editorRef = useRef(); +// const editorRef = useRef(null); + +const FilterProgram = (props: any) => { + const { theme, setTheme } = useTheme(); + console.log(props); + const [filterAttribute, setFilterAttribute] = useState(""); + const [enteredWord, setEnteredWord] = useState(""); + const [enteredsubmitWord, setenteredsubmitWord] = useState(""); + const [All, setAll] = useState(false); + const [anchorEl, setAnchorEl] = useState(null); + const [pageData, setPageData] = useState({ + rowData: [], + isLoading: false, + totalPages: 0, + totalPrograms: 0, + }); + const [openSendModal, setOpenSendModal] = useState(false); + const [to, setTo] = useState([""]); + const [subject, setSubject] = useState(""); + const [html, setHtml] = useState(""); + const [isChecked, setIsChecked] = useState(false); + const [isActive, setIsActive] = useState(false); + const handleOnChange = () => { + setIsChecked(!isChecked); + if (!isChecked) { + setIsActive(!isActive); + } + }; + console.log("to", to); + const handleCloseSendModel = () => { + setOpenSendModal(false); + }; + const handleOpenSendModel = () => { + setOpenSendModal(true); + { + rowsSelected.length != "" ? setTo(rowsSelected) : setTo([]); + } + }; + const [currentPage, setCurrentPage] = useState(1); + + const clearInpunt = () => { + setenteredsubmitWord(""); + setEnteredWord(""); + }; + + const open = Boolean(anchorEl); + const handleClose = () => { + setAnchorEl(null); + }; + const handleKeyDown = (e) => { + if (e.key === "Enter") { + setEnteredWord(enteredsubmitWord); + } + }; + + const handleSendEmail = (e: any) => { + e.preventDefault(); + + const data = { + to, + subject, + html, + }; + + props.sendBulkyEmail(data); + setOpenSendModal(false); + }; + console.log("to", to); + const showTaggleOptions = () => { + return ( +
+
+
+ {" "} +
+
Toggle All
+
+ {allColumns.map((column) => ( +
+ +
+ ))} +
+ ); + }; + // All programs in DB + const { allfilteredPrograms, updateTraineeStatus, count } = props; + const programList = allfilteredPrograms?.data; + const handleNullProgramList = programList === undefined ? [] : programList; + + const [itemsPerPage, setitemsPerPage] = useState(10); + + const nonNullProgram = handleNullProgramList?.filter((value) => { + return value !== null; + }); + + const nonDeletedProgram = nonNullProgram + const input = { + page: 1, + itemsPerPage: 5, + All, + wordEntered: enteredWord, + filterAttribute:filterAttribute, + }; + + useEffect(() => { + // props.getAllFilteredPrograms(input) + props.getAllprograms(); + }, [enteredWord, filterAttribute]); + + const [me, setMe] = useState("Keroity"); + + const handleMe = () => { + setMe("Heroiks"); + }; + + const COLS = [ + { + Header: "Program Name", + accessor: "", + Cell: ({ row }: any) => { + return ( +
+ {row.original.title} +
+ ); + }, + visible: false, + }, + { + Header: "Main Objective", + accessor: "", + Cell: ({ row }: any) => { + return ( +
+ {row.original.mainObjective} +
+ ); + }, + }, + { + Header: "Mode Of Execution", + accessor: "program_id.modeOfExecution", + Cell: ({ row }: any) => { + return ( +
+ {row.original.modeOfExecution} +
+ ); + }, + }, + + { + Header: "Actions", + accessor: "", + Cell: ({ row }: any) => { + return ( + handleMe()} min={row.original._id} /> + ); + }, + }, + ]; + const columns = useMemo(() => COLS, []); + const data = useMemo(() => nonDeletedProgram, [allfilteredPrograms]); + useEffect(() => { + setPageData((prevState) => ({ + ...prevState, + rowData: [], + isLoading: true, + })); + const data23 = { + page: currentPage, + itemsPerPage: itemsPerPage, + All, + wordEntered: enteredWord, + filterAttribute, + }; + + props.getAllFilteredPrograms(data23); + setPageData((prevstate) => ({ + ...prevstate, + isLoading: false, + rowData: data, + totalPrograms: count.message, + })); + }, [currentPage, enteredWord, filterAttribute, itemsPerPage]); + const initialState = { + hiddenColumns: [ + "Deleted", + "Program Description", + "Duration", + ], + }; + + const { + getTableProps, + getTableBodyProps, + headerGroups, + // page, + // nextPage, + // previousPage, + // canNextPage, + // canPreviousPage, + // pageOptions, + // gotoPage, + // pageCount, + setPageSize, + state, + prepareRow, + allColumns, + rows, + getToggleHideAllColumnsProps, + selectedFlatRows, + }: any = useTable( + { + columns, + data, + initialState, + }, + // usePagination, + + useRowSelect, + (hooks: any) => { + hooks.visibleColumns.push((columns: any) => { + return [ + { + id: "selection", + Header: ({ getToggleAllRowsSelectedProps }: any) => ( + + ), + Cell: ({ row }: any) => ( + + ), + }, + ...columns, + ]; + }); + } + ); + const { pageIndex, pageSize } = state; + const rowsSelected = selectedFlatRows.map( + (row) => row.original.id + ); + console.log("rowsSelected", rowsSelected); + + function push(value: string): React.SetStateAction { + throw new Error("Function not implemented."); + } + + // const paginationRange = useCustomPagination({ + // totalPageCount: pageCount, + // currentPage: pageIndex, + // }); + + return ( + <> +
+
+
+
+ setenteredsubmitWord(e.target.value)} + onKeyDown={(e) => handleKeyDown(e)} + className="dark:text-ltb block bg-row-gray dark:bg-[#293647] w-50 border border-bdr dark:border-cg dark:border-opacity-5 rounded-bt-rd mt-2 py-2 pl-9 pr-4 focus:outline-none sm:text-sm" + value={enteredsubmitWord} + placeholder="Search" + type="text" + name="search" + /> +
+ +
+ {/* */} + + + + + {/* */} + +
+
+
+
+ +
+ + +
+
+ {" "} +
+
Toggle All
+
+ + {allColumns?.map((column) => ( + +
+ +
+ + ))} + +
+ + + {headerGroups?.map((headerGroup: any, index: number) => ( + + {headerGroup.headers.map( + (column: any, index: number) => ( + + ) + )} + + ))} + + + {nonDeletedProgram?.length !== 0 ? ( + rows?.map((row: any) => { + prepareRow(row); + return ( + + {row.cells.map((cell: any) => { + return ( + + ); + })} + + ); + }) + ) : ( + + + + + + + + )} + +
+ {column.render("Header")} +
+ {cell.render("Cell")} +
+ No data{" "} +
+
+
+
+ +
+
+ + +
+

+ New Email +

+ +
+
+ { + // setTo(rowsSelected); + setTo([...e.target.value.split(",")]); + }} + className=" mt-1 bg-lime cursor-pointer text-[18px] self-center py-1 rounded-[5px] h-[50px] my-[20px] mx-auto w-[80%] block border-[2px] border-[#a8a8a8] px-[10px] md:w-[90%]" + /> +
+
+ { + setSubject(e.target.value); + }} + className=" mt-1 bg-lime cursor-pointer text-[18px] self-center py-1 rounded-[5px] h-[50px] my-[20px] mx-auto w-[80%] block border-[2px] border-[#a8a8a8] px-[10px] md:w-[90%]" + /> +
+
+
+ { + setHtml(Editorcontent); + }} + init={{ + height: 220, + //menubar: false, + placeholder: "Write your Email Here.....", + plugins: [ + "advlist", + "autolink", + "lists", + "link", + "image", + "charmap", + "preview", + "anchor", + "searchreplace", + "visualblocks", + "code", + "fullscreen", + "insertdatetime", + "media", + "table", + "code", + "help", + "wordcount", + ], + toolbar: + "undo redo | blocks | " + + "bold italic forecolor | alignleft aligncenter " + + "alignright alignjustify | bullist numlist outdent indent | " + + "removeformat | help", + content_style: + "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }", + }} + /> +
+ {/* { + setHtml(e.target.value); + }} + className=" mt-2 bg-lime cursor-pointer text-[18px] self-center py-1 rounded-[5px] h-[50px] my-[20px] mx-auto w-[80%] block border-[2px] border-[#a8a8a8] px-[10px] md:w-[90%]" + /> */} +
+ + +
+ +
+
+
+ + ); +}; + +const mapState = (state: any) => ({ + allfilteredPrograms: state.filterProgram, + errors: state.errors, + count: state.count, +}); + +export default connect(mapState, { + getAllFilteredPrograms: getAllFilteredPrograms, + updateTraineeStatus: updateTraineeStatus, + getAllprograms: getAllprograms, + sendBulkyEmail: sendBulkyEmail, +})(FilterProgram); diff --git a/src/pages/roles&permissions/RolePermission.tsx b/src/pages/roles&permissions/RolePermission.tsx index db1b8ad2a..c0ddf9f29 100644 --- a/src/pages/roles&permissions/RolePermission.tsx +++ b/src/pages/roles&permissions/RolePermission.tsx @@ -6,8 +6,11 @@ import Modal from "@mui/material/Modal"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; import * as BsIcons from "react-icons/bs"; -import * as AiIcons from "react-icons/ai"; import * as IoIcons from "react-icons/io5"; +import * as icons from "react-icons/ai"; +import { Link } from "react-router-dom"; +import { HiDotsVertical } from "react-icons/hi"; +import * as AiIcons from "react-icons/ai"; import NavBar from "../../components/sidebar/navHeader"; import { useForm } from "react-hook-form"; import { @@ -421,6 +424,13 @@ function RolePermission(props: any) { > Add new Role + + + +
{isSingleRole && singleRoleData ? ( diff --git a/src/pages/roles&permissions/filterRolesAccess.tsx b/src/pages/roles&permissions/filterRolesAccess.tsx new file mode 100644 index 000000000..31ce9eb45 --- /dev/null +++ b/src/pages/roles&permissions/filterRolesAccess.tsx @@ -0,0 +1,628 @@ +/** @format */ + +import React, { useEffect, useState, useMemo, useRef } from "react"; +import { connect } from "react-redux"; +import { useTable, usePagination, useRowSelect } from "react-table"; +import NavBar from "../../components/sidebar/navHeader"; +import * as AiIcons from "react-icons/ai"; +import * as IoIcons from "react-icons/io5"; +import CheckBox from "../../components/CkeckBox"; +import Select from "react-select"; +import Threedots from "../../components/Dropdown/Threedots"; +import { FaCaretDown } from "react-icons/fa"; +import { + getAllFilteredRolesAccess, + getAllRoles, + sendBulkyEmail +} from "../../redux/actions/filterRolesAccess" +import Menu from "@mui/material/Menu"; +import MenuItem from "@mui/material/MenuItem"; +import Modal from "@mui/material/Modal"; +import Box from "@mui/material/Box"; +import { useTheme } from "../../hooks/darkmode"; +import { Link } from "react-router-dom"; +import { + DOTS, + useCustomPagination, +} from "../../components/Pagination/useCustomPagination"; +import { updateTraineeStatus } from "../../redux/actions/updateStatus"; +import Pagination from "../../components/pagination2/pagination2"; +import Tinymce from "../../components/tinymce/Tinymce"; +import { Editor } from "@tinymce/tinymce-react"; +import { Editor as TinyMCEEditor } from "tinymce"; +export const customTheme = (theme: any) => { + return { + ...theme, + colors: { + ...theme.colors, + text: "light-gray", + primary25: "#E5E7EB", + primary: "#d6dfdf", + neutral0: "white", + }, + }; +}; + +export const darkTheme = (theme: any) => { + return { + ...theme, + colors: { + primary25: "#404657", + primary: "#d6dfdf", + neutral0: "#293647", + }, + }; +}; + +//tynmce editor +// const editorRef = useRef(); +// const editorRef = useRef(null); + +const FilterRole = (props: any) => { + const { theme, setTheme } = useTheme(); + console.log('props',props); + const [filterAttribute, setFilterAttribute] = useState(""); + const [enteredWord, setEnteredWord] = useState(""); + const [enteredsubmitWord, setenteredsubmitWord] = useState(""); + const [All, setAll] = useState(false); + const [anchorEl, setAnchorEl] = useState(null); + const [pageData, setPageData] = useState({ + rowData: [], + isLoading: false, + totalPages: 0, + totalRoles: 0, + }); + const [openSendModal, setOpenSendModal] = useState(false); + const [to, setTo] = useState([""]); + const [subject, setSubject] = useState(""); + const [html, setHtml] = useState(""); + const [isChecked, setIsChecked] = useState(false); + const [isActive, setIsActive] = useState(false); + const handleOnChange = () => { + setIsChecked(!isChecked); + if (!isChecked) { + setIsActive(!isActive); + } + }; + console.log("to", to); + const handleCloseSendModel = () => { + setOpenSendModal(false); + }; + const handleOpenSendModel = () => { + setOpenSendModal(true); + { + rowsSelected.length != "" ? setTo(rowsSelected) : setTo([]); + } + }; + const [currentPage, setCurrentPage] = useState(1); + + const clearInpunt = () => { + setenteredsubmitWord(""); + setEnteredWord(""); + }; + + const open = Boolean(anchorEl); + const handleClose = () => { + setAnchorEl(null); + }; + const handleKeyDown = (e) => { + if (e.key === "Enter") { + setEnteredWord(enteredsubmitWord); + } + }; + + const handleSendEmail = (e: any) => { + e.preventDefault(); + + const data = { + to, + subject, + html, + }; + + props.sendBulkyEmail(data); + setOpenSendModal(false); + }; + console.log("to", to); + const showTaggleOptions = () => { + return ( +
+
+
+ {" "} +
+
Toggle All
+
+ {allColumns.map((column) => ( +
+ +
+ ))} +
+ ); + }; + // All Roles in DB + const { allfilteredRoles, updateTraineeStatus, count } = props; + const RoleList = allfilteredRoles?.data; + const handleNullRoleList = RoleList === undefined ? [] : RoleList; + + const [itemsPerPage, setitemsPerPage] = useState(10); + + const nonNullRole = handleNullRoleList?.filter((value) => { + return value !== null; + }); + + const nonDeletedRole = nonNullRole + + const traineeStatusUpdate = (id: any, status: any, cycle_id: any) => { + const input = { + id, + status, + cycle_id, + }; + updateTraineeStatus(input); + }; + + const input= { + page:1, + itemsPerPage:1, + All:true, + wordEntered:"reading", + filterAttribute:"title", + } + + useEffect(() => { + props.getAllFilteredRolesAccess(input); + props.getAllRoles(); + }, [enteredWord, filterAttribute]); + + const [me, setMe] = useState("Keroity"); + + const handleMe = () => { + setMe("Heroiks"); + }; + + const COLS = [ + { + Header: "Role Name", + accessor: "", + Cell: ({ row }: any) => { + return ( +
+ {row.original.roleName} +
+ ); + }, + visible: false, + }, + { + Header: "Description", + accessor: "role_id.description", + Cell: ({ row }: any) => { + return ( +
+ {row.original.description} +
+ ); + }, + }, + ]; + const columns = useMemo(() => COLS, []); + const data = useMemo(() => nonDeletedRole, [allfilteredRoles]); + useEffect(() => { + setPageData((prevState) => ({ + ...prevState, + rowData: [], + isLoading: true, + })); + const data23 = { + page: currentPage, + itemsPerPage: itemsPerPage, + All, + wordEntered: enteredWord, + filterAttribute, + }; + + props.getAllFilteredRolesAccess(data23); + setPageData((prevstate) => ({ + ...prevstate, + isLoading: false, + rowData: data, + totalRoles: count.message, + })); + }, [currentPage, enteredWord, filterAttribute, itemsPerPage]); + const initialState = { + hiddenColumns: [ + "Deleted", + ], + }; + + const { + getTableProps, + getTableBodyProps, + headerGroups, + // page, + // nextPage, + // previousPage, + // canNextPage, + // canPreviousPage, + // pageOptions, + // gotoPage, + // pageCount, + setPageSize, + state, + prepareRow, + allColumns, + rows, + getToggleHideAllColumnsProps, + selectedFlatRows, + }: any = useTable( + { + columns, + data, + initialState, + }, + // usePagination, + + useRowSelect, + (hooks: any) => { + hooks.visibleColumns.push((columns: any) => { + return [ + { + id: "selection", + Header: ({ getToggleAllRowsSelectedProps }: any) => ( + + ), + Cell: ({ row }: any) => ( + + ), + }, + ...columns, + ]; + }); + } + ); + const { pageIndex, pageSize } = state; + const rowsSelected = selectedFlatRows.map( + (row) => row.original.role_id.email + ); + console.log("rowsSelected", rowsSelected); + + function push(value: string): React.SetStateAction { + throw new Error("Function not implemented."); + } + + // const paginationRange = useCustomPagination({ + // totalPageCount: pageCount, + // currentPage: pageIndex, + // }); + + return ( + <> +
+ +
+
+
+ setenteredsubmitWord(e.target.value)} + onKeyDown={(e) => handleKeyDown(e)} + className="dark:text-ltb block bg-row-gray dark:bg-[#293647] w-50 border border-bdr dark:border-cg dark:border-opacity-5 rounded-bt-rd mt-2 py-2 pl-9 pr-4 focus:outline-none sm:text-sm" + value={enteredsubmitWord} + placeholder="Search" + type="text" + name="search" + /> +
+ +
+ {/* */} + + + + + {/* */} + +
+
+
+
+ +
+ + +
+
+ {" "} +
+
Toggle All
+
+ + {allColumns?.map((column) => ( + +
+ +
+ + ))} + +
+ + + {headerGroups?.map((headerGroup: any, index: number) => ( + + {headerGroup.headers.map( + (column: any, index: number) => ( + + ) + )} + + ))} + + + {nonDeletedRole?.length !== 0 ? ( + rows?.map((row: any) => { + prepareRow(row); + return ( + + {row.cells.map((cell: any) => { + return ( + + ); + })} + + ); + }) + ) : ( + + + + + + + + )} + +
+ {column.render("Header")} +
+ {cell.render("Cell")} +
+ No data{" "} +
+
+
+
+ +
+
+ + +
+

+ New Email +

+ +
+
+ { + // setTo(rowsSelected); + setTo([...e.target.value.split(",")]); + }} + className=" mt-1 bg-lime cursor-pointer text-[18px] self-center py-1 rounded-[5px] h-[50px] my-[20px] mx-auto w-[80%] block border-[2px] border-[#a8a8a8] px-[10px] md:w-[90%]" + /> +
+
+ { + setSubject(e.target.value); + }} + className=" mt-1 bg-lime cursor-pointer text-[18px] self-center py-1 rounded-[5px] h-[50px] my-[20px] mx-auto w-[80%] block border-[2px] border-[#a8a8a8] px-[10px] md:w-[90%]" + /> +
+
+
+ { + setHtml(Editorcontent); + }} + init={{ + height: 220, + //menubar: false, + placeholder: "Write your Email Here.....", + plugins: [ + "advlist", + "autolink", + "lists", + "link", + "image", + "charmap", + "preview", + "anchor", + "searchreplace", + "visualblocks", + "code", + "fullscreen", + "insertdatetime", + "media", + "table", + "code", + "help", + "wordcount", + ], + toolbar: + "undo redo | blocks | " + + "bold italic forecolor | alignleft aligncenter " + + "alignright alignjustify | bullist numlist outdent indent | " + + "removeformat | help", + content_style: + "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }", + }} + /> +
+ {/* { + setHtml(e.target.value); + }} + className=" mt-2 bg-lime cursor-pointer text-[18px] self-center py-1 rounded-[5px] h-[50px] my-[20px] mx-auto w-[80%] block border-[2px] border-[#a8a8a8] px-[10px] md:w-[90%]" + /> */} +
+ + +
+ +
+
+
+ + ); +}; + +const mapState = (state: any) => ({ + allfilteredRoles: state.filterRole, + errors: state.errors, + count: state.count, +}); + +export default connect(mapState, { + getAllFilteredRolesAccess: getAllFilteredRolesAccess, + updateTraineeStatus: updateTraineeStatus, + getAllRoles: getAllRoles, + sendBulkyEmail: sendBulkyEmail, +})(FilterRole); diff --git a/src/pages/sharedPosts.tsx b/src/pages/sharedPosts.tsx index 9e85be389..ead2cbde6 100644 --- a/src/pages/sharedPosts.tsx +++ b/src/pages/sharedPosts.tsx @@ -71,7 +71,7 @@ function SharedJobPosts(props: any) {
- +