From af0f6f7aee64d3a018e74c43e051155b06ad2816 Mon Sep 17 00:00:00 2001 From: Blaster4385 Date: Fri, 26 Aug 2022 14:56:04 +0530 Subject: Yo Man --- .../EnrollmentRequests/EnrollmentRequests.jsx | 38 ++++-- .../EnrollmentRequests.module.css | 10 ++ admin/src/pages/UpdateRequests/UpdateRequests.jsx | 55 +++++--- .../pages/UpdateRequests/UpdateRequests.module.css | 10 ++ admin/src/pages/VerifiedUsers/VerifiedUsers.jsx | 25 +++- .../pages/VerifiedUsers/VerifiedUsers.module.css | 11 ++ client/src/components/BackButton/BackButton.jsx | 4 +- .../LanguageSelect/locales/en/translation.json | 3 +- .../LanguageSelect/locales/hi/translation.json | 3 +- .../LanguageSelect/locales/te/translation.json | 3 +- .../src/components/SubmitButton/SubmitButton.jsx | 14 ++- client/src/i18nextInit.js | 4 + client/src/pages/Enrollment/Scanner/Scanner.jsx | 139 +++++++++++++++++++++ .../pages/Enrollment/Scanner/Scanner.module.css | 18 +++ 14 files changed, 299 insertions(+), 38 deletions(-) create mode 100644 client/src/pages/Enrollment/Scanner/Scanner.jsx create mode 100644 client/src/pages/Enrollment/Scanner/Scanner.module.css diff --git a/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx index bd2b17b..eed7e64 100644 --- a/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx +++ b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import Accordion from '../../components/Accordion/Accordion'; import Button from '../../components/Button/Button'; import Header from '../../components/Header/Header'; @@ -7,11 +7,12 @@ import { getUnverifiedUsers, updateUser, } from '../../services/apiservice'; -import {useQuery, useMutation} from 'react-query'; -import {useNavigate} from 'react-router-dom'; +import { useQuery, useMutation } from 'react-query'; +import { useNavigate } from 'react-router-dom'; import BackButton from '../../components/BackButton/BackButton'; -import {sendMessage} from '../../services/apiservice'; +import { sendMessage } from '../../services/apiservice'; import Spinner from '../../components/Spinner/Spinner'; +import TextField from '@mui/material/TextField'; import styles from './EnrollmentRequests.module.css'; import MessageModal from '../../components/Modal/MessageModal'; @@ -20,11 +21,11 @@ const EnrollmentRequests = () => { const navigate = useNavigate(); const [open, setOpen] = React.useState(false); const [message, setMessage] = React.useState(''); - const {data, refetch, isLoading} = useQuery('unverified', getUnverifiedUsers); + const { data, refetch, isLoading } = useQuery('unverified', getUnverifiedUsers); const deleteUse = useMutation((payload) => deleteUser(payload)); - const updateUse = useMutation((id) => updateUser(id, {verified: true}), { + const updateUse = useMutation((id) => updateUser(id, { verified: true }), { onSuccess: () => { refetch(); }, @@ -47,6 +48,21 @@ const EnrollmentRequests = () => { }); }; + const [inputText, setInputText] = useState(""); + + const inputHandler = (e) => { + const lowerCase = e.target.value.toLowerCase(); + setInputText(lowerCase); + }; + + const filteredData = data?.data?.filter((el) => { + if (inputText === '') { + return el; + } else { + return el.name.toLowerCase().includes(inputText); + } + }) + if (isLoading) { return ; } @@ -54,11 +70,17 @@ const EnrollmentRequests = () => { return (
+

Search

+ navigate('/')} />

Enrollment Requests

- {data?.data.length !== 0 ? ( - data?.data.map((item) => ( + {data?.data?.length !== 0 ? ( + filteredData?.map((item) => (
+
)) ) : ( diff --git a/admin/src/pages/UpdateRequests/UpdateRequests.module.css b/admin/src/pages/UpdateRequests/UpdateRequests.module.css index 59a1b08..c041f10 100644 --- a/admin/src/pages/UpdateRequests/UpdateRequests.module.css +++ b/admin/src/pages/UpdateRequests/UpdateRequests.module.css @@ -26,3 +26,13 @@ margin: 20px; text-align: center; } + +.input__search { + width: 400px; + height: 60px; + margin: 10px 0px 30px; + padding: 18px 10px; + border: 3px solid; + border-radius: 10px; + font-size: 1.25rem; +} diff --git a/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx b/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx index 12d1317..c03791c 100644 --- a/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx +++ b/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import Accordion from '../../components/Accordion/Accordion'; import Header from '../../components/Header/Header'; import {getVerifiedUsers} from '../../services/apiservice'; @@ -9,13 +9,34 @@ import styles from './VerifiedUsers.module.css'; const VerifiedUsers = () => { const {data} = useQuery('verified', getVerifiedUsers); + const [inputText, setInputText] = useState(""); + + const inputHandler = (e) => { + const lowerCase = e.target.value.toLowerCase(); + setInputText(lowerCase); + }; + + const filteredData = data?.data?.filter((el) => { + if (inputText === '') { + return el; + } else { + return el.name.toLowerCase().includes(inputText); + } + }) + return (
+

Search

+

Verified Users

{data?.data.length !== 0 ? ( - data?.data.map((item) => ( + filteredData?.map((item) => (
diff --git a/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css b/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css index f558e85..242b539 100644 --- a/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css +++ b/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css @@ -2,6 +2,7 @@ display: flex; flex-direction: column; justify-content: center; + align-items: center; } .verified_users__heading { @@ -12,3 +13,13 @@ margin: 20px; text-align: center; } + +.input__search { + width: 400px; + height: 60px; + margin: 10px 0px 30px; + padding: 18px 10px; + border: 3px solid; + border-radius: 10px; + font-size: 1.25rem; +} diff --git a/client/src/components/BackButton/BackButton.jsx b/client/src/components/BackButton/BackButton.jsx index fdb85f1..c6bba82 100644 --- a/client/src/components/BackButton/BackButton.jsx +++ b/client/src/components/BackButton/BackButton.jsx @@ -1,8 +1,10 @@ import { Typography } from '@mui/material' import React from 'react' import styles from './BackButton.module.css' +import { useTranslation } from 'react-i18next' const BackButton = ({ onClick, onChange }) => { + const { t } = useTranslation() return ( <>
diff --git a/client/src/components/LanguageSelect/locales/en/translation.json b/client/src/components/LanguageSelect/locales/en/translation.json index 4cf2201..c25f669 100644 --- a/client/src/components/LanguageSelect/locales/en/translation.json +++ b/client/src/components/LanguageSelect/locales/en/translation.json @@ -143,5 +143,6 @@ "APPROVED": "Approved", "YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED": "Your Aadhaar update status is approved", "ENTER_YOUR_EID_NUMBER": "Enter your EID number", - "PENDING": "Pending" + "PENDING": "Pending", + "SAVE_&_NEXT": "Save & Next" } diff --git a/client/src/components/LanguageSelect/locales/hi/translation.json b/client/src/components/LanguageSelect/locales/hi/translation.json index 3adcc12..12cba40 100644 --- a/client/src/components/LanguageSelect/locales/hi/translation.json +++ b/client/src/components/LanguageSelect/locales/hi/translation.json @@ -142,5 +142,6 @@ "YOUR_AADHAAR_STATUS_IS_APPROVED": "आपका आधार नामांकन अनुरोध स्वीकृत हो गया है", "PENDING": "लंबित", "YOUR_AADHAAR_STATUS_IS_IN_PENDING_STATE": "आपका आधार नामांकन अनुरोध प्रक्रिया में है", - "PLEASE_HAVE_PATIENCE": "कृपया धैर्य रखें, और कम से कम 48 घंटे तक प्रतीक्षा करें" + "PLEASE_HAVE_PATIENCE": "कृपया धैर्य रखें, और कम से कम 48 घंटे तक प्रतीक्षा करें", + "SAVE_&_NEXT": "सहेजें और अगला" } diff --git a/client/src/components/LanguageSelect/locales/te/translation.json b/client/src/components/LanguageSelect/locales/te/translation.json index 14de630..725ba0c 100644 --- a/client/src/components/LanguageSelect/locales/te/translation.json +++ b/client/src/components/LanguageSelect/locales/te/translation.json @@ -143,5 +143,6 @@ "APPROVED": "ఆమోదించబడింది", "YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED": "మీ ఆధార్ అప్‌డేట్ స్థితి ఆమోదించబడింది", "ENTER_YOUR_EID_NUMBER": "మీ EID నంబర్‌ని నమోదు చేయండి", - "PENDING": "పెండింగ్‌లో ఉంది" + "PENDING": "పెండింగ్‌లో ఉంది", + "SAVE_&_NEXT": "భద్రపరచు & తదుపరి" } diff --git a/client/src/components/SubmitButton/SubmitButton.jsx b/client/src/components/SubmitButton/SubmitButton.jsx index df1269f..230f973 100644 --- a/client/src/components/SubmitButton/SubmitButton.jsx +++ b/client/src/components/SubmitButton/SubmitButton.jsx @@ -1,8 +1,10 @@ import React from 'react' import styles from './SubmitButton.module.css' import { Typography } from '@mui/material' +import { useTranslation } from 'react-i18next' const SubmitButton = ({ onClick, onChange, disabled }) => { + const { t } = useTranslation() return ( <> diff --git a/client/src/i18nextInit.js b/client/src/i18nextInit.js index 3ae0848..a6f764b 100644 --- a/client/src/i18nextInit.js +++ b/client/src/i18nextInit.js @@ -4,6 +4,7 @@ import Backend from 'i18next-xhr-backend' import LanguageDetector from 'i18next-browser-languagedetector' import translationEN from '../src/components/LanguageSelect/locales/en/translation.json' import translationHI from '../src/components/LanguageSelect/locales/hi/translation.json' +import translationTE from '../src/components/LanguageSelect/locales/te/translation.json' const fallbackLng = ['en'] const availableLanguages = ['en', 'hi'] @@ -14,6 +15,9 @@ const resources = { }, hi: { translation: translationHI + }, + te: { + translation: translationTE } } diff --git a/client/src/pages/Enrollment/Scanner/Scanner.jsx b/client/src/pages/Enrollment/Scanner/Scanner.jsx new file mode 100644 index 0000000..fb015fe --- /dev/null +++ b/client/src/pages/Enrollment/Scanner/Scanner.jsx @@ -0,0 +1,139 @@ +/* eslint-disable multiline-ternary */ +import React from 'react' +import Webcam from 'react-webcam' +import { useNavigate } from 'react-router-dom' +import Header from '../../../components/Header/Header' +import SubmitButton from '../../../components/SubmitButton/SubmitButton' +import styles from './Scanner.module.css' +import { Button, Grid, Typography } from '@mui/material' +import { t } from 'i18next' +import { userContext } from '../../../context/User' +import PopUpModal from '../../../components/Modal/Modal' +import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay' + +const Scanner = () => { + const navigate = useNavigate() + const { userData, setUserData } = userContext() + const webcamRef = React.useRef(null) + + const capture = React.useCallback(() => { + const imageSrc = webcamRef.current.getScreenshot() + setUserData({ ...userData, photo: imageSrc }) + }) + + const description = [ + 'ENSURE_THAT_YOUR_PHOTO_IS_CLEAR_AND_IN_FOCUS', + 'ALSO_ENSURE_THAT_YOU_ARE_IN_THE_CENTER_OF_YOUR_PHOTO', + 'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO' + ] + + const svgIcon = () => ( + + + + + + + + + + ) + + return ( + <> +
+ + +
    + {description.map((item) => ( +
  • + {t(item)} +
    • + ))} +
+ + } + /> +
+
+ +
+ {svgIcon()} +
+
+ +
+ + + + + + + + +

+
+ + + {t('PLEASE_LOOK_INTO_THE_CAMERA')} +

+ {t('CLICK_CAPTURE_TO_CAPTURE_THE_PHOTO')} +

+ {t('CLICK_RESET_TO_REMOVE_THE_CAPTURED_PHOTO')} + + +
+ navigate('/enrollment/documents')} /> + + ) +} + +export default Scanner diff --git a/client/src/pages/Enrollment/Scanner/Scanner.module.css b/client/src/pages/Enrollment/Scanner/Scanner.module.css new file mode 100644 index 0000000..4a82e8e --- /dev/null +++ b/client/src/pages/Enrollment/Scanner/Scanner.module.css @@ -0,0 +1,18 @@ +.card__container { + display: flex; + justify-content: center; + margin: 10px; +} + +.webcam__container { + position: relative; +} + +.overlay__container { + position: absolute ; + width: 100%; + top: 0 ; + right: 0 ; + bottom: 0 ; + left: 0; +} \ No newline at end of file -- cgit v1.2.3-73-gaa49b