\n );\n return (\n \n \n {edit ? (\n \n ) : (\n \n )}\n \n {assignment && edit ? (\n \n {\n mutation({\n variables: {\n id,\n description: convertedEditContent,\n attachments: data?.upload?.id\n }\n });\n }}\n >\n {l1.edit}\n \n \n ) : (\n \"\"\n )}\n {assignment || noUpload ? (\n \"\"\n ) : (\n \n {\n if (file)\n uploadFile({\n variables: {\n file\n }\n });\n }}\n startIcon={loading ? : }\n type=\"upload\"\n >\n setFile(e.target.files[0])} />\n {l1.add}\n \n \n \n \n\n {edit ? (\n \n {\n mutation({\n variables: {\n id,\n content: convertedEditContent,\n attachments: data?.upload?.id\n }\n });\n }}\n >\n {l1.edit}\n \n \n ) : (\n {\n mutation({\n variables: {\n writer: user.id,\n content: convertedContent,\n class: id,\n attachments: data?.upload?.id\n }\n });\n }}\n >\n {l1.post}\n \n )}\n \n \n )}\n \n );\n}\n\nexport default Drafter2;\n","import React from 'react'\nimport {useState, useReducer, useEffect} from 'react'\nimport {\n makeStyles,\n Box,\n Paper,\n Popper,\n TextField,\n RadioGroup,\n Radio,\n Checkbox,\n FormControlLabel,\n Button,\n IconButton,\n ClickAwayListener,\n MenuList,\n MenuItem,\n Typography,\n Divider,\n Grid,\n} from '@material-ui/core'\nimport {similarityScore} from './common/utils'\n\nimport {FaPlus, FaMinus, FaTimes, FaTrashAlt, FaCheck} from 'react-icons/fa';\nimport {IoText} from 'react-icons/io5';\nimport {TiSortNumerically} from 'react-icons/ti';\nimport {BsCheck2Circle, BsCheck2Square} from 'react-icons/bs';\n\nimport { l1 } from './local.json';\nfunction makeArrayOf(value, length) {\n var arr = [],\n i = length;\n while (i--) {\n arr[i] = value;\n }\n return arr;\n}\nconst arabicIndex = 'أبجدهوزحطيكلمنسعفصقرشتثخذ';\n\nconst useStyles = makeStyles((theme) => ({\n container: {\n margin: theme.spacing(2, 0),\n padding: theme.spacing(2),\n },\n title: {\n fontSize: theme.spacing(5),\n fontWieght: 'bold',\n // color: theme.palette.primary.main,\n },\n description: {\n fontSize: theme.spacing(3),\n lineHeight: '1.5',\n color: '#3c3c3c',\n },\n descriptionContainer: {\n marginTop: theme.spacing(2),\n },\n divider: {\n flexGrow: 1,\n margin: theme.spacing(2, 0),\n },\n alert: {\n fontSize: theme.spacing(1.6),\n color: theme.palette.grey[600],\n },\n iconContainer: {\n backgroundColor: theme.palette.primary.main,\n marginTop: theme.spacing(1.4),\n marginLeft: theme.spacing(-7),\n },\n menuItem: {\n paddingRight: theme.spacing(10),\n },\n addQuestionMenu: {\n zIndex: '1',\n },\n questionContainer: {\n marginTop: theme.spacing(2),\n border: 0,\n padding: theme.spacing(2),\n boxShadow: '0 3px 3px gray',\n borderRadius: 4,\n \"& .MuiTextField-root\":{\n background: \"#fff\",\n borderRadius: 4,\n },\n '& .MuiFormControlLabel-root .MuiTextField-root': {\n marginTop: 0,\n },\n QuestionText: {\n margin: '0 0 16px 0',\n },\n },\n sectionTitle: {\n marginTop: theme.spacing(4),\n marginBottom: theme.spacing(2),\n },\n correctAnswer: {\n color:\"green\",\n display: \"flex\",\n alignItems: \"center\",\n gap: theme.spacing(1),\n },\n incorrectAnswer: {\n color:\"red\",\n display: \"flex\",\n alignItems: \"center\",\n gap: theme.spacing(1),\n }\n}));\n\nconst questionTypes = {\n text: {label:l1.shortAnswer, icon: },\n number: {label:l1.numberInput, icon: },\n radio: {label:l1.multipleChoice, icon: },\n checkboxes: {label: l1.checkboxes, icon: },\n}\n\nfunction renderWidgetForType(type, id, props, answerUpdateCallback, validity, readOnly, correctAnswer, initialValue ){\n switch (type){\n case 'text':\n return \n case 'number':\n return \n case 'radio':\n return \n case 'checkboxes':\n return \n default:\n return No answer widget of type '{type}' exists
;\n }\n}\n\nexport const QuizModes = {\n EDIT: 0,\n PREVIEW: 1,\n VIEW: 2,\n RESULTS: 3,\n};\n\nfunction EditQuiz({quiz}) {\n // Force update when called\n\n const c = useStyles();\n const [, forceUpdate] = useReducer((x) => x + 1, 0);\n const deleteQuestion = (index) => {\n delete quiz.correctAnswers[quiz.questions[index].id]\n quiz.questions.splice(index, 1)\n }\n\n return(\n \n {quiz.title = event.target.value; forceUpdate()}} error={!Boolean(quiz.title)} helperText={Boolean(quiz.title) ? '' : l1.quizTitleCannotBeEmpty } />\n {quiz.description = event.target.value}} />\n\n {l1.instructions}\n \n \n \n\n {l1.theQuestions}\n \n \n {quiz.questions.map(\n (question, index)=> )\n }\n
\n \n )\n}\n\nfunction ViewQuiz({quiz, preview=false, readOnly=false, studentAnswers, submitAction=null }) {\n const c = useStyles()\n var answers = studentAnswers\n const answerUpdateCallback = (id, answer, isValid) => {\n answers[id] = JSON.parse(JSON.stringify(answer))\n validity[id] = isValid\n }\n const showAnswers = readOnly && quiz.correctAnswers\n const totalQuestions = Object.keys(quiz.questions).length\n const totalCorrect = showAnswers ? similarityScore(quiz.correctAnswers, studentAnswers): null\n\n var validity = {};\n console.log(\"view quiz answers\", answers)\n return (\n \n {quiz.title}\n\n {quiz.description}\n\n { readOnly || (quiz.instructions && !quiz.instructions.join('').length === 0)\n ? null\n : \n
{l1.instructions}\n
\n {quiz.instructions.map((instruction, index) => (instruction.length > 0) ? - {instruction}
: null)}\n
\n
\n {\n correctAnswer && value !== correctAnswer\n ? \n {l1.answerIncorrect}\n \n : null\n }\n \n {choices.map((choice, index)=>\n setTouched(true)}*/ onClick={readOnly ? null : ()=>{handleChange(index)}} color=\"primary\"/>\n } label={\n \n {arabicIndex[index] + '. ' + choice}\n {\n correctAnswer\n ? (\n correctAnswer === index\n ? \n {l1.correctAnswer}\n \n : null\n )\n : null\n }\n } />\n \n )} \n \n {/* touched && !valid ? {l1.pleaseChooseOneOption} : null */}\n
\n );\n}\n\nfunction CheckboxesAnswer({id, choices, min=null, max=null, initialValue=null, answerUpdateCallback, correctAnswer=null, readOnly=false}){\n\n const c = useStyles();\n // const answer = makeArrayOf(0, choices.length)\n const [answer, updateAnswer] = useReducer(\n (answer, toggleIndex) => {\n let newAnswer = Array.from(answer)\n newAnswer [toggleIndex] = 1 - answer[toggleIndex];\n return newAnswer\n },\n initialValue || makeArrayOf(0, choices.length)\n )\n \n const [valid, setValid] = useState(false);\n const [touched, setTouched] = useState(false);\n const handleChange = (index) => {\n let newAnswer = [...answer]\n newAnswer[index] = 1 - newAnswer[index]\n let totalChecked = newAnswer.reduce((previous, current) => previous + current);\n let validity = (min === null || totalChecked >= min) && (max === null || totalChecked <= max);\n \n answerUpdateCallback(id, newAnswer, validity);\n updateAnswer(index)\n setValid(validity);\n };\n useEffect(()=>{\n console.log('answer', answer)\n })\n\n return (\n \n {\n correctAnswer && answer !== correctAnswer\n ? \n {l1.answerIncorrect}\n \n : null\n }\n \n {choices.map((choice, index)=>\n setTouched(true)}*/ onClick={()=>{ handleChange(index)}} color=\"primary\" checked={answer[index]}/>\n } label={\n \n {arabicIndex[index] + '. ' + choice}\n {\n correctAnswer ? (\n correctAnswer[index]\n ? \n {l1.answerCorrect}\n \n : null\n )\n : null\n }\n } />\n )}\n \n
\n );\n}\n\nexport default function Quiz({mode, quiz, submitAction=null, updateAnswers, studentAnswers={}}){\n // console.log(\"student Answers : \", studentAnswers)\n switch(mode){\n case QuizModes.EDIT: return ;\n case QuizModes.PREVIEW: return ;\n case QuizModes.VIEW: return ;\n case QuizModes.RESULTS: return ;\n default: return \"Unsupported quiz mode\";\n }\n}\n\nfunction Question({index, question, correctAnswers={}, forceUpdate, deleteQuestion}){\n const c = useStyles()\n const updateQuestion = (key, value) => {\n question[key] = value;\n };\n const setCorrectAnswer = (event) => {\n correctAnswers[question.id] = event.target.type === 'number' ? parseInt(event.target.value) : event.target.value;\n };\n const setWidgetProp = (propName, value) => {\n question.widgetProps = question.answerProps || {};\n question.widgetProps[propName] = value;\n };\n\n const [text, setText] = useState(question.text);\n\n return (\n \n \n {questionTypes[question.type].icon}\n {questionTypes[question.type].label}\n \n \n {\n deleteQuestion(index);\n forceUpdate();\n }}\n >\n \n \n \n \n\n \n {\n updateQuestion('text', event.target.value);\n setText(event.target.value);\n }}\n error={!Boolean(text)}\n helperText={Boolean(text) ? '' : l1.questionTextCannotBeEmpty}\n fullWidth\n />\n
\n {\n updateQuestion('helpText', event.target.value);\n }}\n fullWidth\n />\n\n \n\n {question.type === 'text' ? (\n \n ) : question.type === 'number' ? (\n \n \n
\n\n {l1.answerOptions}\n \n \n {\n setWidgetProp('min', parseInt(event.target.value));\n }}\n />\n \n \n {\n setWidgetProp('max', parseInt(event.target.value));\n }}\n />\n \n \n
\n ) : question.type === 'radio' ? (\n \n ) : question.type === 'checkboxes' ? (\n \n
\n
\n {l1.requiredNumber}\n\n \n \n {\n setWidgetProp('min', parseInt(event.target.value));\n }}\n fullWidth\n />\n \n \n {\n setWidgetProp('max', parseInt(event.target.value));\n }}\n fullWidth\n />\n \n \n
\n
\n
}\n color=\"primary\"\n variant=\"contained\"\n ref={anchorRef}\n aria-controls={open ? 'menu-list-grow' : undefined}\n aria-haspopup=\"true\"\n onClick={handleToggle}\n >\n {l1.addNewQuestion}\n \n
\n {\n \n \n \n \n \n }\n \n \n {itemCollection.map((item, index) => (\n
\n {\n updateItem(index, event.target.value);\n }}\n />\n deleteItem(index)}>\n \n \n
\n ))}\n
\n \n \n \n \n
\n
\n {l1.enterListOfAnswers}
\n {l1.toAddItems}
\n {l1.toDeleteItems}
\n {l1.specifyTheCorrectAnswer}
\n
\n\n {itemCollection.map((item, index) => (\n \n {\n setCorrectAnswer(index);\n setChoice(index);\n }}\n color=\"primary\"\n />\n }\n label={\n {\n updateItem(index, event.target.value);\n }}\n />\n }\n />\n deleteItem(index)}>\n \n \n
\n ))}\n \n } label={} />\n \n \n \n
\n \n );\n}\n\nfunction CheckboxOptionIterator({ id, itemCollection = [], newItemText, forceUpdate, correctAnswers }) {\n const [choice, setChoice] = React.useState(correctAnswers[id]);\n\n const updateCorrectAnswer = (index) => {\n correctAnswers[id][index] = 1 - correctAnswers[id][index];\n };\n const updateItem = (index, value) => {\n itemCollection[index] = value;\n };\n const addItem = () => {\n itemCollection.push(newItemText);\n correctAnswers[id].push(0);\n forceUpdate();\n };\n const deleteItem = (index) => {\n itemCollection.splice(index, 1);\n correctAnswers[id].splice(index, 1);\n forceUpdate();\n };\n\n correctAnswers[id] = correctAnswers[id] || makeArrayOf(0, itemCollection.length);\n\n return (\n \n
\n {l1.answerOptions}\n \n {l1.enterListOfAnswers}
\n {l1.toAddItems}
\n {l1.toDeleteItems}
\n {l1.specifyTheCorrectAnswers}
\n
\n {itemCollection.map((item, index) => (\n \n {\n updateCorrectAnswer(index);\n setChoice(index);\n }}\n color=\"primary\"\n />\n }\n label={\n {\n updateItem(index, event.target.value);\n }}\n />\n }\n />\n deleteItem(index)}>\n \n \n
\n ))}\n \n } label={} />\n \n \n \n
\n \n
\n {\n setAnswer(e.target.value);\n }}\n />\n \n {l1.handIn}\n \n
\n )}\n \n \n \n \n );\n}\n","import React, { useState, useReducer } from \"react\";\nimport {\n Box,\n Button,\n makeStyles,\n Typography,\n Paper,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n CircularProgress,\n Link\n} from \"@material-ui/core\";\nimport { CgAttachment } from \"react-icons/cg\";\nimport { l1 } from \"./local.json\";\nimport { gql, useMutation } from \"@apollo/client\";\n\nconst UPDATE_STUDENTWORK = gql`\n mutation updateStudentWork($id: ID!, $data: editStudentWorkInput!) {\n updateStudentWork(input: { where: { id: $id }, data: $data }) {\n studentWork {\n id\n }\n }\n }\n`;\nconst UPLOAD = gql`\n mutation($file: Upload!) {\n upload(file: $file) {\n name\n id\n url\n }\n }\n`;\nconst useStyles = makeStyles(theme => ({\n container: {\n padding: \"20px\",\n margin: \"20px 0\"\n },\n questionBox: {\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"center\",\n alignItems: \"baseline\"\n },\n questionHeader: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n width: \"100%\"\n },\n questionInput: {\n margin: \"20px 0\",\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\"\n },\n answerView: {\n background: \"#eee\",\n padding: \"10px\",\n margin: \"20px 0\",\n width: \"100%\"\n }\n}));\nexport default function Assignement({ data, refetch }) {\n const [file, setFile] = useState();\n const [uploadedFile, setUploadedFile] = useState();\n // Confirmation Dialog Logic\n const [confirmationState, reverseConfirmationState] = useReducer(\n state => !state,\n false\n );\n const [uploadFile, { loading }] = useMutation(UPLOAD, {\n onError: error => {\n console.log(\"error in uploading\", error);\n },\n onCompleted: res => {\n setUploadedFile(res);\n }\n });\n const classes = useStyles();\n const [editStudentWorkMutation, { loading: editLoading }] = useMutation(\n UPDATE_STUDENTWORK,\n {\n onError: error => {\n console.log(\"error in edit student work\", error);\n },\n onCompleted: response => {\n console.log(\"Mutation update student work\", response);\n refetch();\n }\n }\n );\n const edtiStudentWork = () => {\n editStudentWorkMutation({\n variables: {\n id: data[0].id,\n data: {\n status: \"submitted\",\n file: uploadedFile?.upload.url\n }\n }\n });\n };\n return (\n <>\n \n \n \n {l1.yourAnswer}\n \n {data[0]?.status !== \"assigned\" ? l1.handedIn : l1.assigned}\n \n \n {data[0]?.status !== \"assigned\" ? (\n \n {data?.[0]?.submission}\n \n {l1.downloadTheFile}\n \n \n ) : (\n \n {\n if (file)\n uploadFile({\n variables: {\n file\n }\n });\n }}\n startIcon={loading ? : }\n type=\"upload\"\n className={classes.questionInput}\n >\n setFile(e.target.files[0])}\n />\n {l1.add}\n \n \n {l1.handIn}\n \n
\n )}\n \n \n \n \n );\n}\n","import React, { useReducer, useState, useContext, useEffect } from \"react\";\n\nimport {\n Avatar,\n Box,\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Divider,\n Grid,\n IconButton,\n makeStyles,\n Menu,\n MenuItem,\n Typography,\n Snackbar,\n Container,\n TextField,\n Paper,\n Chip\n} from \"@material-ui/core\";\nimport TopBar from \"./common/TopBar\";\nimport { BiDotsVerticalRounded } from \"react-icons/bi\";\nimport { MdAssignment, MdPeople } from \"react-icons/md\";\nimport { l1 } from \"./local.json\";\nimport MuiAlert from \"@material-ui/lab/Alert\";\n\nimport { gql, useMutation, useQuery, useLazyQuery } from \"@apollo/client\";\nimport { useHistory, useParams, Link } from \"react-router-dom\";\nimport Loading from \"./common/Loading\";\nimport CreateComment from \"./common/CreateComment\";\nimport Comment from \"./common/Comment\";\nimport Drafter2 from \"./common/Drafter2\";\nimport Quiz, { QuizModes } from \"./Quiz\";\nimport moment from \"moment\";\nimport { Navigation } from \"../Context\";\nimport { RequireClassAccess, RequireForTheMemberOnly } from \"../Auth/gates\";\nimport Question from \"./Question\";\nimport Assignement from \"./AssignmentSubmission\";\nconst useStyles = makeStyles(theme => ({\n container: {\n margin: theme.spacing(2, 0)\n // padding: theme.spacing(2),\n },\n title: {\n fontSize: theme.spacing(5),\n color: theme.palette.primary.main,\n paddingLeft: theme.spacing(2)\n },\n options: {\n color: theme.palette.primary.dark,\n fontSize: theme.spacing(3)\n },\n divider: {\n background: theme.palette.primary.main,\n flexGrow: 1,\n margin: theme.spacing(2, 0)\n },\n alert: {\n fontSize: theme.spacing(1.6),\n color: theme.palette.grey[600]\n },\n\n iconContainer: {\n backgroundColor: theme.palette.primary.main,\n marginTop: theme.spacing(1.4),\n marginLeft: theme.spacing(-7)\n },\n teacherContainer: {\n \"&>*\": {\n color: theme.palette.grey[600],\n marginRight: theme.spacing(0.3)\n }\n },\n exDivider: {\n flexGrow: 1,\n height: \"2px\",\n background: theme.palette.grey[200],\n marginTop: theme.spacing(2)\n },\n\n midSection: {\n marginBottom: theme.spacing(2)\n },\n stats: {\n width: \"max-content\",\n padding: theme.spacing(2), \n display: 'inline-block',\n },\n statsNumber: {\n textAlign: \"center\",\n fontWeigh: 900,\n fontSize: theme.spacing(5),\n },\n statsIcon: {\n color: theme.palette.grey[700],\n fontSize: theme.spacing(3),\n margin: theme.spacing(0, 1)\n },\n statsText: {\n fontWeight: 600,\n color: theme.palette.grey[700],\n marginTop: theme.spacing(2),\n },\n midNameBox: {\n gap: theme.spacing(1.4)\n },\n avatar: {\n margin: theme.spacing(2)\n },\n name: {\n fontWeight: 600\n },\n date: {\n fontSize: theme.spacing(1.6),\n color: theme.palette.grey[600]\n },\n post: {\n marginLeft: theme.spacing(2),\n \"&>*\": {}\n },\n inputContainer: {\n border: `1px solid lightgrey`,\n borderRadius: theme.spacing(4),\n marginRight: theme.spacing(4)\n },\n input: {\n marginLeft: theme.spacing(2)\n },\n inputIcon: {\n transform: \"scaleX(-1)\",\n margin: theme.spacing(0, 1),\n fontSize: theme.spacing(3),\n cursor: \"pointer\",\n color: theme.palette.grey[500]\n },\n points: {\n fontWeight: 600,\n marginTop: theme.spacing(1)\n },\n studentGrade: {\n fontSize: theme.spacing(2.5)\n },\n menuItem: {\n paddingRight: theme.spacing(10)\n },\n quizContainer: {\n border: \"solid 1px lightgray\",\n borderRadius: theme.spacing(2)\n }\n}));\nconst QUERY_ASSIGNMENT = gql`\n query QueryAssignment($id: ID!, $userId: ID!) {\n assignment(id: $id) {\n title\n class {\n id\n }\n writer {\n id\n fullname\n }\n createdAt\n type\n description\n grade\n comments {\n writer {\n id\n fullname\n email\n }\n id\n content\n createdAt\n }\n quiz {\n id\n }\n evaluationsInfo{\n coach\n date\n location\n }\n studentWorks(where: { student: { id: $userId } }) {\n id\n student {\n id\n }\n file\n status\n submission\n submittedAt\n grade\n gradedBy {\n id\n }\n gradedAt\n }\n }\n }\n`;\nconst EDIT_ASSIGNMENT = gql`\n mutation EditAssignment($id: ID!, $description: String!) {\n updateAssignment(\n input: { where: { id: $id }, data: { description: $description } }\n ) {\n assignment {\n description\n }\n }\n }\n`;\nconst DELETE_ASSIGNMENT = gql`\n mutation DeleteAssignment($id: ID!) {\n deleteAssignment(input: { where: { id: $id } }) {\n assignment {\n description\n }\n }\n }\n`;\n\nconst QUERY_QUIZ = gql`\n query QueryQuiz($id: ID!) {\n quiz(id: $id) {\n id\n title\n description\n instructions\n questions\n }\n }\n`;\n\nconst QUERY_QUIZ_WITH_ANSWERS = gql`\n query QueryQuizWithAnswers($id: ID!) {\n quiz(id: $id) {\n id\n title\n description\n questions\n correctAnswers\n }\n }\n`;\nconst SUBMIT_STUDENT_WORK = gql`\n mutation SubmitStudentWork($id: ID!, $fields: editStudentWorkInput!) {\n updateStudentWork(input: { where: { id: $id }, data: $fields }) {\n studentWork {\n id\n status\n }\n }\n }\n`;\nconst QUERY_STUDENT_WORKS = gql`\n query StudentWorks($assignmentId: ID!){\n studentWorks(where: { assignment: { id: $assignmentId } }) {\n id\n student {\n id\n }\n file\n status\n submission\n submittedAt\n grade\n gradedBy {\n id\n }\n gradedAt\n }\n }\n`;\n\nfunction Assignment({ state, reverse }) {\n const { id, slug } = useParams();\n const history = useHistory();\n const { user } = useContext(Navigation);\n // Apollo\n const { loading, data, refetch } = useQuery(QUERY_ASSIGNMENT, {\n variables: { id, userId: user.id },\n onError: error => console.log(\"QueryAssignmentError: \", error),\n onCompleted: data => {\n console.log(\"QueryAssignmentSuccess: \", data);\n if (data.assignment.type === \"quiz\") {\n if (data.assignment.studentWorks?.[0]?.status === \"assigned\") {\n loadQuiz({ variables: { id: data.assignment.quiz.id } });\n } else {\n loadQuizWithAnswers({ variables: { id: data.assignment.quiz.id } });\n }\n updateStudentAnswers(\n data.assignment.studentWorks?.[0]?.submission || {}\n );\n } else if(data.assignment.type = 'evaluations'){\n loadStudentWorks({variables:{\n assignmentId: id\n }})\n }\n },\n notifyOnNetworkStatusChange: true\n });\n const [loadStudentWorks, { loading: loadingStudentWorks, data: worksData }] = useLazyQuery(QUERY_STUDENT_WORKS, {\n onError: error => {\n console.log(\"QueryQuizError: \", error);\n return [];\n },\n });\n\n\n const [editAssignment, { loading: loadingEdit }] = useMutation(\n EDIT_ASSIGNMENT,\n {\n onError: () => setAlertFailure(l1.failure),\n onCompleted: () => {\n setAlertSuccess(l1.editsuccess);\n reverseEditState();\n refetch();\n }\n }\n );\n\n const [deleteAssignment, { loading: loadingDelete }] = useMutation(\n DELETE_ASSIGNMENT,\n {\n onError: () => setAlertFailure(l1.failure),\n onCompleted: () => history.push(`/class/${slug}/classwork`)\n }\n );\n\n const [\n submitStudentWork /*{ loading: loadingSubmitStudentWork }*/\n ] = useMutation(SUBMIT_STUDENT_WORK, {\n onError: () => {\n setAlertFailure(l1.failure);\n },\n onCompleted: response => {\n let studentWork = data.assignment.studentWorks[0];\n studentWork.status = response.updateStudentWork.studentWork.status;\n studentWork.submission =\n response.updateStudentWork.studentWork.submission;\n setAlertSuccess(l1.submitsuccess);\n updateStudentAnswers(studentWork.submission);\n console.log(\"existing quiz\", quiz);\n loadQuizWithAnswers({ variables: { id: quiz.id } });\n }\n });\n\n const [quiz, setQuiz] = useState(null);\n const [studentAnswers, updateStudentAnswers] = useReducer((prev, answers) => {\n console.log(\n \"prev: \",\n JSON.stringify(prev),\n \"next:\",\n JSON.stringify(answers)\n );\n return { ...prev, ...answers };\n }, {});\n const [loadQuiz, { loading: loadingQuiz }] = useLazyQuery(QUERY_QUIZ, {\n onError: error => {\n console.log(\"QueryQuizError: \", error);\n },\n onCompleted: response => {\n console.log(\"QueryQuizSuccess: \", response);\n setQuiz(response.quiz);\n }\n });\n\n const [\n loadQuizWithAnswers,\n { loading: loadingQuizWithAnswers }\n ] = useLazyQuery(QUERY_QUIZ_WITH_ANSWERS, {\n onError: error => {\n console.log(\"QueryQuizWithAnswersError: \", error);\n },\n onCompleted: response => {\n console.log(\"QueryQuizWithAnswersSuccess: \", response);\n setQuiz(response.quiz);\n }\n });\n\n // Edit State Indicator\n const [editState, reverseEditState] = useReducer(s => !s, false);\n\n // Options Logic\n const [anchor, setAnchor] = useState(null);\n const openMenu = event => {\n setAnchor(event.currentTarget);\n };\n const closeMenu = () => {\n setAnchor(null);\n };\n // Confirmation Dialog Logic\n const [confirmationState, reverseConfirmationState] = useReducer(\n state => !state,\n false\n );\n\n // Alert Logic\n const [alertSuccess, setAlertSuccess] = useState(false);\n const [alertFailure, setAlertFailure] = useState(false);\n\n const classes = useStyles();\n // useEffect(() => {\n // console.log(\"student answers = \", studentAnswers);\n // });\n if (\n loadingEdit ||\n loading ||\n loadingDelete ||\n loadingQuiz ||\n loadingQuizWithAnswers ||\n loadingStudentWorks\n ) {\n return ;\n } else {\n return (\n <>\n {\" \"}\n \n \n \n \n \n \n \n \n \n \n \n {data.assignment.title}\n \n \n \n \n \n \n \n \n {\n reverseEditState();\n }}\n >\n {l1.edit}\n \n \n {l1.delete}\n \n \n \n {/* \n {data.assignment.writer.fullname}\n •\n {moment(data.assignment.sub).fromNow()}\n */}\n {data?.assignment?.type === 'material' ? null\n : data?.assignment?.type === 'evaluations' ?(\n <>\n \n \n {l1.evaluationsCoach}: {data.assignment?.evaluationsInfo.coach}\n \n \n {l1.evaluationsDate}: {data.assignment?.evaluationsInfo?.date}\n \n \n {l1.evaluationsLocation}: {data.assignment.evaluationsInfo.location}\n \n \n \n ) : (\n <>\n \n {data?.assignment?.studentWorks?.[0]?.grade &&\n data?.assignment?.grade !== null &&\n data?.assignment?.studentWorks?.[0]?.grade !== null ? (\n <>\n \n {data.assignment.studentWorks[0].grade *\n data.assignment.grade}\n {\" \"}\n {l1.slash}{\" \"}\n \n ) : null}\n {data.assignment.grade\n ? data.assignment.grade + \" \" + l1.points2\n : l1.noPoints}{\" \"}\n \n \n )}\n \n\n {editState ? (\n \n \n \n ) : (\n \n )}\n {data.assignment.type !== \"question\" ? (\n \"\"\n ) : (\n \n )}\n {data.assignment.type !== \"assignment\" ? (\n \"\"\n ) : (\n \n )}\n\n \n {\n data.assignment.type === 'quiz'\n ? (\n quiz ? (\n \n {data.assignment.studentWorks?.[0]?.status &&\n data.assignment.studentWorks?.[0].status === \"assigned\" ? (\n {\n submitStudentWork({\n variables: {\n id: data.assignment.studentWorks[0].id,\n fields: {\n submission: answers,\n status: \"submitted\"\n }\n }\n });\n refetch();\n }}\n />\n ) : (\n \n )}\n \n ) : (\n \"Quiz not loaded correctly\"\n )\n )\n : data.assignment.type === 'evaluations'\n ? (<>\n \n \n \n \n \n {worksData?.studentWorks?.length ?? 0}\n \n \n {l1.studentCount}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {l1.myEvaluation} \n {data?.assignment?.studentWorks?.[0]?.submission?.student ? l1.ready : l1.notReady}}\n color='secondary'\n /> \n { data?.assignment?.studentWorks?.[0]?.submission?.student && } \n \n \n {l1.myCoachEvaluation} \n {data?.assignment?.studentWorks?.[0]?.submission?.coach ? l1.done : l1.notYet}}\n color='secondary'\n /> \n \n \n \n \n \n {l1.myTrainingEvaluation} \n {data?.assignment?.studentWorks?.[0]?.submission?.training ? l1.done : l1.notYet}}\n color='secondary'\n /> \n \n \n \n \n \n \n )\n : (<>\n \n \n \n {data.assignment.comments.length} {l1.comment}\n \n \n {data.assignment.comments.map(item => (\n setAlertSuccess(c)}\n failure={c => setAlertFailure(c)}\n createdAt={item.createdAt}\n writerEmail={item.writer.email}\n />\n ))}\n setAlertSuccess(c)}\n failure={c => setAlertFailure(c)}\n query={QUERY_ASSIGNMENT}\n id={id}\n />\n )\n }\n \n \n \n \n \\\n {\n setAlertSuccess(false);\n }}\n autoHideDuration={3000}\n >\n \n {alertSuccess}\n \n \n {\n setAlertFailure(false);\n }}\n >\n \n {alertFailure}\n \n \n \n );\n }\n}\n\nexport default Assignment;\n","import React, { useContext, useEffect, useState } from 'react';\nimport { Box, IconButton, makeStyles, Typography } from '@material-ui/core';\nimport TopBar from './common/TopBar';\nimport moment from 'moment';\nimport 'moment/locale/ar-dz';\nimport { FaAngleRight, FaAngleLeft } from 'react-icons/fa';\nimport Loading from './common/Loading';\nimport { useQuery, gql } from '@apollo/client';\nimport { l1 } from './local.json';\nimport { IoMdArrowDropdown } from 'react-icons/io';\nimport { useHistory } from 'react-router-dom';\nimport { Navigation } from '../Context';\n\nconst GET_DAY_ONE = gql`\n query GetDayOne($due: Date!, $centerId: ID!) {\n assignments(where: { center: $centerId, due: $due }) {\n title\n id\n type\n class {\n slug\n }\n }\n }\n`;\n\nconst GET_DAY_TWO = gql`\n query GetDayTwo($due: Date!, $centerId: ID!) {\n assignments(where: { center: $centerId, due: $due }) {\n title\n id\n type\n class {\n slug\n }\n }\n }\n`;\nconst GET_DAY_THREE = gql`\n query GetDayThree($due: Date!, $centerId: ID!) {\n assignments(where: { center: $centerId, due: $due }) {\n title\n id\n type\n class {\n slug\n }\n }\n }\n`;\nconst GET_DAY_FOUR = gql`\n query GetDayFour($due: Date!, $centerId: ID!) {\n assignments(where: { center: $centerId, due: $due }) {\n title\n id\n type\n class {\n slug\n }\n }\n }\n`;\nconst GET_DAY_FIVE = gql`\n query GetDayFive($due: Date!, $centerId: ID!) {\n assignments(where: { center: $centerId, due: $due }) {\n title\n id\n type\n class {\n slug\n }\n }\n }\n`;\nconst GET_DAY_SIX = gql`\n query GetDaySix($due: Date!, $centerId: ID!) {\n assignments(where: { center: $centerId, due: $due }) {\n title\n id\n type\n class {\n slug\n }\n }\n }\n`;\nconst GET_DAY_SEVEN = gql`\n query GetDaySeven($due: Date!, $centerId: ID!) {\n assignments(where: { center: $centerId, due: $due }) {\n title\n id\n type\n class {\n slug\n }\n }\n }\n`;\n\nconst useStyles = makeStyles((theme) => ({\n container: {\n alignItems: 'center',\n },\n calendarContainer: {\n width: 'min-content',\n minHeight: '80vh',\n border: `1px solid lightgrey`,\n borderRadius: theme.spacing(2),\n overflow: 'auto',\n justifyContent: 'center',\n },\n dayContainer: {\n '&>*': {},\n borderLeft: `1px solid lightgrey`,\n width: '12vw',\n padding: theme.spacing(1),\n },\n dayText: {\n color: theme.palette.grey[500],\n fontSize: theme.spacing(1.4),\n },\n dayNumber: {\n color: theme.palette.grey[600],\n fontSize: theme.spacing(3.5),\n },\n assignmentsContainer: {\n marginTop: theme.spacing(3),\n width: '10vw',\n },\n toggleWeek: {\n //marginRight: theme.spacing(30),\n },\n assignment: {\n marginBottom: theme.spacing(1),\n background: '#1967d2',\n padding: theme.spacing(1),\n width: 'inherit',\n cursor: 'pointer',\n borderRadius: '3px',\n '&>*': {\n color: 'white',\n fontWeight: '600',\n fontSize: theme.spacing(1.6),\n },\n },\n select: {\n width: '20%',\n padding: theme.spacing(1.5, 2),\n margin: theme.spacing(1, 0),\n borderRadius: theme.spacing(1),\n border: '1px solid lightgrey',\n cursor: 'pointer',\n '&:hover': {\n background: theme.palette.grey[50],\n },\n color: theme.palette.grey[700],\n },\n}));\n\nfunction Calendar() {\n const { centerId } = useContext(Navigation);\n const history = useHistory();\n moment.locale('ar-dz');\n const [startDate, setStartDate] = useState(moment().startOf('week'));\n const [dates, setDates] = useState([]);\n const [state, reverseState] = useState(true);\n useEffect(() => {\n const tempDates = [];\n for (let i = 0; i < 7; i++) {\n tempDates.push(moment(startDate).add(i, 'days'));\n }\n setDates(tempDates);\n reverseState(false);\n }, [startDate]);\n const preWeek = () => setStartDate(startDate.clone().subtract(7, 'days'));\n const postWeek = () => setStartDate(startDate.clone().add(7, 'days'));\n // console.log('dates', dates[0].format('YYYY-DD-MM'));\n const { loading: loadingDayOne, data: dataDayOne } = useQuery(GET_DAY_ONE, {\n skip: state,\n variables: {\n due: state ? null : dates[0].format('YYYY-MM-DD'),\n centerId,\n },\n });\n const { loading: loadingDayTwo, data: dataDayTwo } = useQuery(GET_DAY_TWO, {\n skip: state,\n variables: {\n due: state ? null : dates[1].format('YYYY-MM-DD'),\n centerId,\n },\n });\n const { loading: loadingDayThree, data: dataDayThree } = useQuery(GET_DAY_THREE, {\n skip: state,\n variables: {\n due: state ? null : dates[2].format('YYYY-MM-DD'),\n centerId,\n },\n });\n const { loading: loadingDayFour, data: dataDayFour } = useQuery(GET_DAY_FOUR, {\n skip: state,\n variables: {\n due: state ? null : dates[3].format('YYYY-MM-DD'),\n centerId,\n },\n });\n const { loading: loadingDayFive, data: dataDayFive } = useQuery(GET_DAY_FIVE, {\n skip: state,\n variables: {\n due: state ? null : dates[4].format('YYYY-MM-DD'),\n centerId,\n },\n });\n const { loading: loadingDaySix, data: dataDaySix } = useQuery(GET_DAY_SIX, {\n skip: state,\n variables: {\n due: state ? null : dates[5].format('YYYY-MM-DD'),\n centerId,\n },\n });\n const { loading: loadingDaySeven, data: dataDaySeven } = useQuery(GET_DAY_SEVEN, {\n skip: state,\n variables: {\n due: state ? null : dates[6].format('YYYY-MM-DD'),\n centerId,\n },\n });\n const arType = (type) => {\n switch (type) {\n case 'question':\n return l1.question;\n case 'material':\n return l1.material;\n default:\n return l1.assignment;\n }\n };\n const classes = useStyles();\n if (\n state ||\n loadingDayOne ||\n loadingDayTwo ||\n loadingDayThree ||\n loadingDayFour ||\n loadingDayFive ||\n loadingDaySix ||\n loadingDaySeven\n )\n return ;\n if (!state) {\n const dayOne = dataDayOne.assignments;\n const dayTwo = dataDayTwo.assignments;\n const dayThree = dataDayThree.assignments;\n const dayFour = dataDayFour.assignments;\n const dayFive = dataDayFive.assignments;\n const daySix = dataDaySix.assignments;\n const daySeven = dataDaySeven.assignments;\n\n return (\n <>\n \n\n \n \n {/* \n {l1.allClasses}\n \n */}\n \n \n \n \n {startDate.format('MMMM YYYY')}\n \n \n \n \n \n \n {/* DAY ONE */}\n \n \n {Boolean(dates[0].format('ddd')) ? dates[0].format('ddd') : 0}\n \n \n {Boolean(dates[0].format('D')) ? dates[0].format('D') : 0}\n \n \n {dayOne.length === 0\n ? ''\n : dayOne.map((i) => (\n history.push(`/class/${i.class.slug}/classwork/${i.id}/details`)}\n key={i.id}\n >\n \n {arType(i.type)} : {i.title}\n \n \n ))}\n \n \n {/* DAY TWO */}\n \n \n {Boolean(dates[1].format('ddd')) ? dates[1].format('ddd') : 1}\n \n \n {Boolean(dates[1].format('D')) ? dates[1].format('D') : 1}\n \n \n {dayTwo.length === 0\n ? ''\n : dayTwo.map((i) => (\n history.push(`/class/${i.class.slug}/classwork/${i.id}/details`)}\n key={i.id}\n >\n \n {arType(i.type)} : {i.title}\n \n \n ))}\n \n \n {/* DAY THREE */}\n \n \n {Boolean(dates[2].format('ddd')) ? dates[2].format('ddd') : 2}\n \n \n {Boolean(dates[2].format('D')) ? dates[2].format('D') : 2}\n \n \n {dayThree.length === 0\n ? ''\n : dayThree.map((i) => (\n history.push(`/class/${i.class.slug}/classwork/${i.id}/details`)}\n key={i.id}\n >\n \n {arType(i.type)} : {i.title}\n \n \n ))}\n \n \n {/* DAY FOUR */}\n \n \n {Boolean(dates[3].format('ddd')) ? dates[3].format('ddd') : 3}\n \n \n {Boolean(dates[3].format('D')) ? dates[3].format('D') : 3}\n \n \n {dayFour.length === 0\n ? ''\n : dayFour.map((i) => (\n history.push(`/class/${i.class.slug}/classwork/${i.id}/details`)}\n key={i.id}\n >\n \n {arType(i.type)} : {i.title}\n \n \n ))}\n \n \n {/* DAY FIVE */}\n \n \n {Boolean(dates[4].format('ddd')) ? dates[4].format('ddd') : 4}\n \n \n {Boolean(dates[4].format('D')) ? dates[4].format('D') : 4}\n \n \n {dayFive.length === 0\n ? ''\n : dayFive.map((i) => (\n history.push(`/class/${i.class.slug}/classwork/${i.id}/details`)}\n key={i.id}\n >\n \n {arType(i.type)} : {i.title}\n \n \n ))}\n \n \n {/* DAY SIX */}\n \n \n {Boolean(dates[5].format('ddd')) ? dates[5].format('ddd') : 5}\n \n \n {Boolean(dates[5].format('D')) ? dates[5].format('D') : 5}\n \n \n {daySix.length === 0\n ? ''\n : daySix.map((i) => (\n history.push(`/class/${i.class.slug}/classwork/${i.id}/details`)}\n key={i.id}\n >\n \n {arType(i.type)} : {i.title}\n \n \n ))}\n \n \n {/* DAY SEVEN */}\n \n \n {Boolean(dates[6].format('ddd')) ? dates[6].format('ddd') : 6}\n \n \n {Boolean(dates[6].format('D')) ? dates[6].format('D') : 6}\n \n \n {daySeven.length === 0\n ? ''\n : daySeven.map((i) => (\n history.push(`/class/${i.class.slug}/classwork/${i.id}/details`)}\n key={i.id}\n >\n \n {arType(i.type)} : {i.title}\n \n \n ))}\n \n \n \n \n \n );\n }\n}\n\nexport default Calendar;\n","import React, { useReducer } from \"react\";\nimport PropTypes from \"prop-types\";\nimport Button from \"@material-ui/core/Button\";\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\nimport DialogContent from \"@material-ui/core/DialogContent\";\nimport DialogActions from \"@material-ui/core/DialogActions\";\nimport Dialog from \"@material-ui/core/Dialog\";\nimport { l1 } from \"../local.json\";\nimport { makeStyles } from \"@material-ui/styles\";\n\nexport function useConfirmationDialog() {\n const [dialogProps, dispatch] = useReducer(\n (current, action) => {\n let next = { ...current };\n Object.entries(action).forEach(([key, value]) => {\n next[key] = value;\n });\n return next;\n },\n {\n open: false,\n title: null,\n content: null,\n onConfirm: () => {},\n onClose: () => {\n dispatch({ open: false, title: null, content: null });\n },\n }\n );\n\n const confirmationDialog = ({ title, content, onConfirm }) => {\n dispatch({\n open: true,\n title,\n content,\n onConfirm,\n });\n };\n return { dialogProps, confirmationDialog };\n}\n\nconst useStyles = makeStyles({\n dialog: {\n \"MuiBackdrop-root\": {\n backgroundColor: \"transparent\",\n },\n },\n});\nexport default function ConfirmationDialog(props) {\n const classes = useStyles();\n const { onClose, onConfirm, open, title, content, ...dialogProps } = props;\n\n const handleCancel = () => {\n onClose();\n };\n\n const handleOk = () => {\n onConfirm();\n onClose();\n };\n\n return (\n \n {title}\n {content}\n \n \n \n \n \n );\n}\n\nConfirmationDialog.propTypes = {\n open: PropTypes.bool.isRequired,\n title: PropTypes.string,\n content: PropTypes.node,\n onConfirm: PropTypes.func.isRequired,\n onClose: PropTypes.func.isRequired,\n};\n","export default function sparseUpdate(obj, ...updates) {\n updates.forEach((props) => {\n for (let prop in props) {\n if (typeof props[prop] === \"object\" && !Array.isArray(props[prop]) && props[prop] !== null) {\n if (!obj.hasOwnProperty(prop)) {\n obj[prop] = {};\n }\n sparseUpdate(obj[prop], props[prop]);\n } else {\n obj[prop] = props[prop];\n }\n }\n })\n return obj;\n}\n","import { Box, Typography, makeStyles } from \"@material-ui/core\";\nimport React from \"react\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n height: \"80vh\",\n },\n}));\n\nfunction NotFound() {\n const classes = useStyles();\n return (\n \n Wrong Place, Wrong Time! 404\n \n );\n}\n\nexport default NotFound;\n","export default function capitalizeFirstLetter(str) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\n","import { gql, useMutation, useQuery } from \"@apollo/client\";\nimport {\n Box,\n Button,\n CircularProgress,\n LinearProgress,\n Typography,\n} from \"@material-ui/core\";\nimport { Formik, useFormikContext } from \"formik\";\nimport { createContext, useContext } from \"react\";\nimport { useHistory, useParams } from \"react-router-dom\";\nimport * as Yup from \"yup\";\nimport { Navigation } from \"../../Context\";\nimport { FloatingAlertContext } from \"../../components/common/FloatingAlert\";\nimport NotFound from \"../../components/common/NotFound\";\nimport { l1 } from \"../../components/local.json\";\nimport capitalizeFirstLetter from \"../../helpers/capitalizeFirstLetter\";\n\nexport const FormDefinition = createContext();\nexport const FormContext = createContext();\n\nexport function FormDefinitionProvider({ form, children }) {\n return (\n {children}\n );\n}\n\nexport function CreateFormContextProvider({ options, children }) {\n const form = useContext(FormDefinition);\n const { centerId } = useContext(Navigation);\n const context = useContext(FormContext) ?? {};\n const history = useHistory();\n const floatingAlert = useContext(FloatingAlertContext);\n const MUTATION_CREATE = gql`\n mutation createItem($data: ${capitalizeFirstLetter(form.itemName)}Input) {\n create${capitalizeFirstLetter(form.itemName)}(input: { data: $data } ) {\n ${form.itemName} {\n ${form.getSingleQuerySelection()}\n }\n }\n }\n `;\n const [createItem, { loading: creating, error: creationError }] = useMutation(\n MUTATION_CREATE,\n\n {\n onCompleted: (data) => {\n floatingAlert({\n message: \"تم إنشاء الاستمارة بنجاح!\",\n severity: \"success\",\n });\n form.postMutation.created({ data, history });\n },\n onError: (error) => {\n floatingAlert({\n message:\n \"حصل خطأ أثناء محاولة إنشاء الاستمارة. رجاءً أعد المحاولة لاحقًا\",\n severity: \"error\",\n });\n },\n ...options,\n }\n );\n const create = (data) => {\n return createItem({\n variables: { data: { ...form.cleanedFormData(data, 'add'), center: centerId } },\n });\n }\n\n return (\n \n \n {children}\n \n \n );\n}\n\nexport function UpdateFormContextProvider({ options, children }) {\n const form = useContext(FormDefinition);\n const { id } = useParams();\n const context = useContext(FormContext) ?? {};\n const history = useHistory();\n const floatingAlert = useContext(FloatingAlertContext);\n\n // Mutation to update an existing form item\n const MUTATION_UPDATE = gql`\n mutation updateItem($data: edit${capitalizeFirstLetter(\n form.itemName\n )}Input) {\n update${capitalizeFirstLetter(\n form.itemName\n )}(input: { where: { id: \"${id}\" }, data: $data }) {\n ${form.itemName} {\n ${form.getSingleQuerySelection()}\n }\n }\n }\n `;\n const [updateItem, { loading: updating, error: updateError }] = useMutation(\n MUTATION_UPDATE,\n {\n onCompleted: (data) => {\n floatingAlert({\n message: \"تم حفظ الاستمارة بنجاح!\",\n severity: \"success\",\n });\n form.postMutation.updated({ data, history });\n },\n onError: (error) => {\n floatingAlert({\n message:\n \"حصل خطأ أثناء محاولة حفظ الاستمارة. رجاءً أعد المحاولة لاحقًا\",\n severity: \"error\",\n });\n },\n ...options,\n }\n );\n const update = (data) => {\n updateItem({ variables: { data: form.cleanedFormData(data, 'edit') } });\n };\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nexport function ViewFormContextProvider({ options, children }) {\n const form = useContext(FormDefinition);\n const { centerId } = useContext(Navigation);\n const { id } = useParams();\n const context = useContext(FormContext) ?? {};\n\n // Query to a single form item\n const QUERY_SINGLE = gql`\n query {\n ${\n form.collectionName\n }(where: { center: \"${centerId}\", id: \"${id}\" }, sort: \"createdAt:desc\") {\n id createdAt ${form.getSingleQuerySelection()}\n }\n }\n `;\n const { loading, error, data, refetch } = useQuery(QUERY_SINGLE, options);\n let values = data?.[form.collectionName]?.[0];\n\n if (loading) return ;\n if (error) return Error loading ;\n if (!values) return ;\n return (\n \n \n {children}\n \n \n );\n}\n\nconst contextProviderMap = {\n add: CreateFormContextProvider,\n edit: UpdateFormContextProvider,\n view: ViewFormContextProvider,\n};\n\nexport function FormContextProvider({ children, mode = \"view\" }) {\n const ModeContextProvider = contextProviderMap[mode];\n return (\n \n {children}\n \n );\n}\nexport function FormikProvider({children}){\n const form = useContext(FormDefinition);\n const context = useContext(FormContext) ?? {};\n const { user } = useContext(Navigation);\n const initialValues = form.compiledValues(context?.values ?? {}, context.mode, { user });\n const formikConfig = {\n initialValues,\n validationSchema: Yup.object().shape(\n form.views[context.mode].validationSchema\n ),\n validateOnMount: true,\n onSubmit: (data) => {\n context.mutate(data);\n },\n };\n return {children};\n}\nexport function FormWrapper({ children }) {\n const context = useContext(FormContext) ?? {};\n const formik = useFormikContext();\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n formik.handleSubmit();\n };\n const SubmitButton = () => {\n return (\n }\n >\n {l1[context.mode === \"edit\" ? \"saveChanges\" : \"create\"]}\n \n )\n };\n return (\n \n \n \n );\n}\n","import { useContext } from \"react\";\nimport { FormContext, FormDefinition } from \"./context\";\nimport { Navigation } from \"../../Context\";\n\nexport default function FormField({\n // common properties\n name,\n type,\n label: originalLabel,\n permissions,\n Component,\n // Whether it's a single field\n singleField = false,\n helperText,\n valueFor,\n aggregate,\n // calculated field props\n requiredFields,\n calculate,\n ...otherProps\n}) {\n const form = useContext(FormDefinition);\n const {user} = useContext(Navigation)\n const {\n mode,\n handleChange,\n handleBlur,\n errors,\n touched,\n values,\n initialValues,\n\n } = useContext(FormContext);\n\n let fieldPermissions = permissions[mode]\n let label = `${singleField ? (fieldPermissions.read && !fieldPermissions.write ? helperText ?? '' : '') : originalLabel}${fieldPermissions.write && fieldPermissions.required ? \" (مطلوب)\" : \"\"}`;\n let calculatedValue = (type !== 'calculated')\n ? null \n : ((requiredFields ?? []).every((fieldName) => values[fieldName] !== null)\n ? valueFor.view(calculate(values), {values, user})\n : null);\n\n // do not render if it's a field that should be filled later (in edit)\n if(!fieldPermissions.show){\n return null;\n }\n return (\n \n );\n}\n","import { Box, makeStyles, Typography } from \"@material-ui/core\";\n\nconst useStyles = makeStyles({\n level1: {\n backgroundColor: \"lightgrey\",\n },\n level2: {\n textDecoration: \"underline\",\n },\n});\nexport default function FormSection({ title, level, children }) {\n const classes = useStyles();\n return (\n \n \n {title}\n \n {children}\n \n );\n}\n","import { Divider } from \"antd\";\nimport { useContext } from \"react\";\nimport { FormContext, FormDefinition } from \"./context\";\nimport FormField from \"./FormField\";\nimport FormSection from \"./FormSection\";\n\nexport default function FormLayout({ root = null, level = 0 }) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const form = useContext(FormDefinition);\n const { mode } = useContext(FormContext);\n root = root ?? form.views[mode].layout;\n return root.map((element, index) => {\n if (element.type === \"separator\") {\n return ;\n } else if (element.type === \"section\") {\n return (\n \n {element.singleField ? (\n \n ) : (\n <>\n \n \n )}\n \n );\n } else {\n return ;\n }\n });\n}\n","import IconButton from \"@material-ui/core/IconButton\";\nimport TablePagination from \"@material-ui/core/TablePagination\";\nimport FirstPageIcon from \"@material-ui/icons/FirstPage\";\nimport KeyboardArrowLeft from \"@material-ui/icons/KeyboardArrowLeft\";\nimport KeyboardArrowRight from \"@material-ui/icons/KeyboardArrowRight\";\nimport LastPageIcon from \"@material-ui/icons/LastPage\";\n\nfunction getNumberOfPages(count, rowsPerPage) {\n return Math.ceil(count / rowsPerPage);\n}\n\nfunction TablePaginationActions({ count, page, rowsPerPage, onChangePage }) {\n const handleFirstPageButtonClick = () => {\n onChangePage(1);\n };\n\n // RDT uses page index starting at 1, MUI starts at 0\n // i.e. page prop will be off by one here\n const handleBackButtonClick = () => {\n onChangePage(page);\n };\n\n const handleNextButtonClick = () => {\n onChangePage(page + 2);\n };\n\n const handleLastPageButtonClick = () => {\n onChangePage(getNumberOfPages(count, rowsPerPage));\n };\n\n return (\n <>\n \n \n \n \n \n \n = getNumberOfPages(count, rowsPerPage) - 1}\n aria-label=\"الصفحة التالية\"\n >\n \n \n = getNumberOfPages(count, rowsPerPage) - 1}\n aria-label=\"الصفحة الاخيرة\"\n >\n \n \n \n );\n}\n\nconst FormListPagination = ({\n rowsPerPage,\n rowCount,\n onChangePage,\n onChangeRowsPerPage,\n currentPage,\n}) => (\n \n onChangeRowsPerPage(Number(target.value))\n }\n ActionsComponent={TablePaginationActions}\n labelRowsPerPage={\"عدد النتائج في الصفحة\"}\n labelDisplayedRows={({ from, to, count, page }) =>\n `${from}${\n from !== to ? ` - ${to}` : \"\"\n } من ${count} نتيجة \\u00A0\\u00A0\\u00A0\\u00A0\\u00A0 الصفحة ${page + 1}`\n }\n />\n);\n\nexport default FormListPagination;\n","import { gql, useMutation, useQuery } from \"@apollo/client\";\nimport { Box, Button, Typography } from \"@material-ui/core\";\nimport { createContext, useContext, useState } from \"react\";\nimport DataTable from \"react-data-table-component\";\nimport { BiPlusCircle } from \"react-icons/bi\";\nimport { useHistory } from \"react-router-dom\";\nimport { Navigation } from \"../../Context\";\nimport ConfirmationDialog, {\n useConfirmationDialog,\n} from \"../../components/common/ConfirmationDialog\";\nimport { FloatingAlertContext } from \"../../components/common/FloatingAlert\";\nimport Loading from \"../../components/common/Loading\";\nimport { l1 } from \"../../components/local.json\";\nimport capitalizeFirstLetter from \"../../helpers/capitalizeFirstLetter\";\nimport FormListPagination from \"./FormListPagination\";\nimport { FormDefinition } from \"./context\";\nexport const FormActionsContext = createContext();\n\nfunction FormList() {\n // get form and center id from context\n const form = useContext(FormDefinition);\n const { centerId, user, membershipRole } = useContext(Navigation);\n const [itemsPerPage, setItemsPerPage] = useState(10);\n const [page, setPage] = useState(0);\n // listing query\n const QUERY_LIST = gql`\n query {\n ${\n form.collectionName\n }(where: { center: \"${centerId}\"}, sort: \"createdAt:desc\") {\n id createdAt ${form.getSingleQuerySelection(form.views.list.requiredFields ?? [])}\n }\n }\n `;\n\n const { data, loading, error, refetch } = useQuery(QUERY_LIST);\n\n // delete form mutation\n const DELETE_MUTATION = gql`\n mutation deleteItem($id: ID!) {\n delete${capitalizeFirstLetter(\n form.itemName\n )}(input: { where: { id: $id } }) {\n ${form.itemName} {\n id\n }\n }\n }\n `;\n const [deleteItem, { loading: deleting, error: deleteError }] = useMutation(\n DELETE_MUTATION,\n {\n onCompleted(data) {\n form.postMutation.deleted(data);\n floatingAlert({\n message: \"تم حذف الاستمارة بنجاح!\",\n severity: \"success\",\n });\n refetch();\n },\n onError: (error) => {\n floatingAlert({\n message:\n \"حصل خطأ أثناء محاولة حذف الاستمارة. رجاءً أعد المحاولة لاحقًا\",\n severity: \"error\",\n });\n },\n }\n );\n const { dialogProps, confirmationDialog } = useConfirmationDialog();\n const floatingAlert = useContext(FloatingAlertContext);\n const history = useHistory();\n const availableItems = data?.[form.collectionName]?.filter((item)=> form.availableActions.view(item, {user, membershipRole})) ?? []\n return loading ? (\n \n ) : (\n \n }\n style={{ fontWeight: 700, marginBottom: 20 }}\n onClick={() => {\n history.push(form.routes.add.path);\n }}\n >\n {l1.add}\n \n \n {\n await setItemsPerPage(perPage);\n }}\n paginationComponent={FormListPagination}\n onChangePage={(page) => {\n setPage(page);\n }}\n striped\n highlightOnHover\n noDataComponent={\n لا توجد أي نتائج\n }\n customStyles={{\n rows: {\n style: {\n minHeight: 64, // override the row height\n },\n },\n headCells: {\n style: {\n fontWeight: 700,\n fontSize: 18,\n paddingLeft: 8, // override the cell padding for head cells\n paddingRight: 8,\n },\n },\n cells: {\n style: {\n fontSize: 18,\n paddingLeft: 8, // override the cell padding for data cells\n paddingRight: 8,\n },\n },\n }}\n />\n \n \n \n );\n}\n\nFormList.propTypes = {};\n\nexport default FormList;\n","import { Box, Button, CircularProgress } from \"@material-ui/core\";\nimport { useContext } from \"react\";\nimport { generatePath, useHistory } from \"react-router-dom\";\nimport { l1 } from \"../../components/local.json\";\nimport { FormActionsContext } from \"./FormList\";\nimport { Navigation } from \"../../Context\";\n\nfunction FormListActions({ id }) {\n const { form, confirmationDialog, deleteItem, deleting, data } =\n useContext(FormActionsContext);\n const { membershipRole, user } = useContext(Navigation);\n const item = data.find(item => item.id === id)\n const history = useHistory();\n return (\n \n {form.enabledRoutes.includes(\"view\") && form.availableActions.view(item, {user, membershipRole}) && ( \n {\n history.push(generatePath(form.routes.view.path, { id }));\n }}\n disabled={deleting}\n >\n {l1.view}\n \n )}\n {form.enabledRoutes.includes(\"edit\") && form.availableActions.edit(item, {user, membershipRole}) && (\n {\n history.push(generatePath(form.routes.edit.path, { id }));\n }}\n disabled={deleting}\n >\n {l1.edit}\n \n )}\n {\n form.availableActions.delete(item, {user, membershipRole}) && (\n }\n color=\"secondary\"\n variant=\"outlined\"\n style={{ fontWeight: 700 }}\n onClick={() => {\n confirmationDialog({\n title: l1.deleteItem,\n content: l1.confirmation,\n onConfirm: () => {\n deleteItem({\n variables: {\n id,\n },\n });\n },\n });\n }}\n disabled={deleting}\n >\n {l1.delete}\n \n )}\n \n );\n}\n\nFormListActions.propTypes = {};\n\nexport default FormListActions;\n","import {\n Box,\n Breadcrumbs,\n Button,\n Container,\n makeStyles,\n Paper,\n Typography,\n} from \"@material-ui/core\";\nimport PropTypes from \"prop-types\";\nimport { useContext, useEffect } from \"react\";\nimport { BiPrinter } from \"react-icons/bi\";\nimport { Link } from \"react-router-dom\";\nimport TopBar from \"../../components/common/TopBar\";\nimport { Navigation } from \"../../Context\";\nimport { FormContext, FormDefinition } from \"./context\";\n\nconst useStyles = makeStyles({\n paper: {\n border: \"solid 1px black\",\n boxShadow: \"2px 3px 4px rgba(20,20,20,0.4);\",\n borderRadius: 8,\n padding: 24,\n marginTop: 24,\n },\n noPadding: {\n paddingTop: 0,\n },\n noShadow: {\n boxShadow: \"unset !important\",\n },\n});\nfunction FormPageLayout({ view, children }) {\n const classes = useStyles();\n const form = useContext(FormDefinition);\n const formContext = useContext(FormContext);\n const { info } = useContext(Navigation);\n const printing = window.location.search.includes(\"print\");\n useEffect(() => {\n if (printing) {\n window.addEventListener(\"afterprint\", (e) => {\n window.close();\n });\n window.print();\n }\n }, []);\n return (\n <>\n {!printing && }\n \n \n {!printing && (\n \n \n {form.name}\n \n \n )}\n \n {!printing && (\n \n \n {info.centerName}\n الملفات\n {view === \"list\" ? (\n {form.name}\n ) : (\n \n {form.name}\n \n )}\n \n {\n form.views[view === \"list\" ? \"list\" : formContext.mode]\n ?.title\n }\n \n \n {formContext?.mode === \"view\" && (\n }\n onClick={() => {\n window.open(`${window.location.href}?print`);\n }}\n variant=\"contained\"\n color=\"primary\"\n >\n طباعة\n \n )}\n \n )}\n \n {form.views[view === \"list\" ? \"list\" : formContext.mode]?.title}\n \n {children}\n \n \n \n \n );\n}\n\nFormPageLayout.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node,\n ]),\n form: PropTypes.object,\n};\nFormPageLayout.defaultProps = {};\n\nexport default FormPageLayout;\n","import { Box, TextField as MuiTextField, Typography } from \"@material-ui/core\";\n\nexport default function TextField({\n // field properties\n name,\n type,\n label,\n edit,\n readOnly,\n required,\n // data properties\n touched,\n error,\n value,\n handleChange,\n handleBlur,\n inputProps,\n minRows = 3,\n ...other\n}) {\n if (!edit) {\n return (\n \n {label && {label}:}\n {value ?? \"(غير محدد)\"}\n \n );\n } else {\n return (\n \n );\n }\n}\n","import React, { useState, useEffect } from \"react\";\nimport {\n Avatar,\n Typography,\n Box,\n Dialog,\n DialogContent,\n LinearProgress,\n makeStyles,\n TextField,\n DialogActions,\n Button,\n} from \"@material-ui/core\";\nimport { gql, useQuery } from \"@apollo/client\";\nimport { l1 } from \"../../../components/local.json\";\n\nconst GET_CENTER_MEMBERS = gql`\n query QueryCenterMembers($id: ID!) {\n centersLists(where: { id: $id }) {\n memberships(where: { status: \"ACTIVE\" }) {\n id\n user {\n id\n fullname\n avatar\n }\n role\n }\n }\n }\n`;\n\nconst useStyles = makeStyles((theme) => ({\n dialogContent: {\n margin: theme.spacing(2),\n },\n search: {\n margin: theme.spacing(2, 30),\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n },\n nameContainer: {\n marginBottom: theme.spacing(1),\n border: \"1px solid lightgrey\",\n padding: theme.spacing(1),\n borderRadius: theme.spacing(1),\n \"&:not(.selected):hover\": {\n backgroundColor: \"#ddd\",\n cursor: \"pointer\",\n },\n \"&.selected\": {\n backgroundColor: \"#eee\",\n border: \"solid 1px\" + theme.palette.primary.main,\n },\n },\n avatar: {\n marginRight: theme.spacing(2),\n },\n}));\n\nfunction SearchMember({\n name,\n ready,\n setReady,\n centerId,\n handleChange,\n initialSelected = null,\n}) {\n const [search, setSearch] = useState(\"\");\n const [result, setResult] = useState([]);\n const [selected, setSelected] = useState(initialSelected);\n\n const { loading, data } = useQuery(GET_CENTER_MEMBERS, {\n onError: (error) => console.error(\"QueryMembershipError: \", error),\n variables: {\n id: centerId,\n },\n onCompleted: () => {\n setResult(\n data?.centersLists[0]?.memberships?.filter(({ user }) =>\n user.fullname?.includes(search)\n )\n );\n },\n });\n\n useEffect(() => {\n setResult(\n data?.centersLists[0]?.memberships?.filter(({ user }) =>\n user.fullname?.includes(search)\n )\n );\n }, [search]);\n\n const choices =\n result?.filter(({ user }) => !selected || selected.id !== user.id) ?? [];\n const classes = useStyles();\n return (\n {\n setReady(false);\n }}\n maxWidth=\"lg\"\n fullWidth\n >\n \n \n {loading ? (\n \n ) : (\n {\n setSearch(e.target.value);\n }}\n />\n )}\n \n\n {selected && (\n \n \n \n \n {selected.fullname}\n \n \n setSelected(null)}\n >\n {l1.delete}\n \n \n )}\n \n {!choices?.length ? (\n \n {l1.noMember}\n \n ) : (\n choices?.map((membership) => (\n {\n setSelected(membership.user);\n }}\n >\n \n \n {membership.user.fullname}\n \n \n ))\n )}\n {selected ? (\n \n ) : null}\n \n \n {\n handleChange(selected);\n setReady(false);\n }}\n >\n {l1.confirm}\n \n {\n setSelected(initialSelected ?? null);\n setReady(false);\n }}\n >\n {l1.cancel}\n \n \n \n );\n}\nexport default SearchMember;\n","import { Box, Button, IconButton, Table, TableBody, TableCell, TableFooter, TableHead, TableRow, Typography } from \"@material-ui/core\";\nimport React from \"react\";\nimport { FaMinus, FaPlus } from 'react-icons/fa';\nimport FormField from \"../FormField\";\nimport { useField } from \"formik\";\nimport sparseUpdate from \"../../../helpers/sparseUpdate\";\nexport default function TableField({\n // field properties\n name,\n type,\n label,\n // data properties\n edit,\n columns,\n value: rows,\n emptyLabel,\n singleField,\n ...other\n}) {\n const aggregate = columns?.some(({aggregate}) => typeof aggregate === 'function');\n const [props, meta, helpers] = useField(name);\n return ( \n { label && !singleField && \n \n {label}\n \n }\n \n \n \n {edit && }\n { columns.map((col, index) => (\n \n {col.label}\n \n ))}\n \n \n \n {rows.length === 0\n ? \n \n \n {emptyLabel}\n \n \n \n : rows.map((_, rowIndex) => (\n \n {edit && (\n \n { \n const remainingRows = rows;\n remainingRows.splice(rowIndex, 1);\n helpers.setValue(remainingRows);\n } }>\n \n \n \n )}\n {columns.map((column, columnIndex) => (\n \n {column.type === 'calculated'\n ? {column.calculate({ rowIndex, rows })}\n : }\n \n ))}\n \n ))}\n\n \n \n\n {aggregate && (\n \n {edit && }\n {columns.map((column, columnIndex) => {\n return (\n \n \n {typeof column.aggregate === 'function' ? column.aggregate({ rows, rowIndex: column.rowIndex }) : null}\n \n \n );\n })}\n \n )}\n {edit && \n \n }\n variant=\"contained\"\n color=\"primary\"\n style={{ width: \"100%\", textAlign: 'center' }}\n onClick={() => { helpers.setValue(rows.concat([Array.from(columns, () => null)])); } }\n >\n إضافة سطر\n \n \n }\n \n
\n )\n}\n\nfunction TableCellFormField({tableName, rowIndex, columnIndex, definition}){\n const fieldName = `${tableName}[${rowIndex}][${columnIndex}]`;\n const [props] = useField(fieldName);\n\n \n return ;\n}","\nimport * as Yup from \"yup\";\nimport camelCase from \"../helpers/camelCase\";\nimport sparseUpdate from \"../helpers/sparseUpdate\";\nimport FormLayout from \"./components/FormLayout\";\nimport FormList from \"./components/FormList\";\nimport FormListActions from \"./components/FormListActions\";\nimport FormPageLayout from \"./components/FormPageLayout\";\nimport { FormContext, FormContextProvider, FormDefinitionProvider } from \"./components/context\";\nimport CheckBoxField from \"./components/fields/CheckBoxField\";\nimport TextField from \"./components/fields/TextField\";\nimport UserField from \"./components/fields/UserField\";\nimport TableField from \"./components/fields/TableField\";\n\nclass Form {\n type = \"form\";\n static required = [\"slug\", \"name\"];\n static basePath = \"/forms\";\n static inputTypeMap = {\n string: \"text\",\n number: \"number\",\n date: \"date\",\n };\n static routeMap = {\n list: \"\",\n add: \"add\",\n edit: \":id/edit\",\n view: \":id/view\",\n };\n static validationRuleMap = {\n string: Yup.string(),\n select: Yup.string(),\n number: Yup.number().integer().min(0),\n date: Yup.date(),\n user: Yup.object().nullable(),\n };\n static fieldDefaultsByType = {\n number: {\n valueFor: {\n save: (value) => Number(value ?? 0)\n },\n inputProps: {\n min: 0,\n }\n },\n user: {\n valueFor: {\n save: (user) => user ? user.id : null,\n },\n Component: UserField,\n },\n timestamp: {\n valueFor:{\n edit: Boolean,\n save: (value) => value ? new Date() : null,\n view: (value) => value ? `تم بتاريخ ${new Date(value).toISOString()}` : null\n },\n emptyLabel: 'لم يتم بعد',\n Component: CheckBoxField,\n },\n table: {\n Component: TableField,\n emptyLabel: 'لم تدخل أي شيء بعد',\n }\n //Component: CheckBoxField,\n\n };\n static defaultFieldPermissions = {\n add: {\n show: true,\n write: true,\n autoWrite: false,\n required: false,\n },\n edit: {\n show: true,\n write: true,\n autoWrite: false,\n required: false,\n },\n view: {\n show: true,\n write: false,\n },\n }\n\n static fieldPermissionProfiles = {\n readOnly: {\n add: { write: false },\n edit: { write: false }\n },\n fillFirst: {\n add: { required: true },\n edit: { write: false },\n },\n fillLater: {\n add: { show: false, write: false},\n edit: { write: true},\n },\n fillOnce: {\n add: { write: false, writeOnce: true},\n edit: { write: true}\n },\n static: {\n add: {write: false},\n edit: {write: false}\n },\n autoFillFirst: {\n add: { required: true, write: false, autoWrite: true },\n edit: { write: false}\n },\n autoFillOnce: {\n add: { required: true, write: false, autoWriteOnce: true },\n edit: { write: false}\n }\n }\n\n slug = null;\n name = null;\n roles = [\"owner\", \"assistant\", \"moderator\"];\n enabledRoutes = [\"list\", \"add\", \"edit\", \"view\"];\n availableActions = {\n // callback format (item: ItemType, context: {user, ...}) => Boolean,\n add: () => true,\n edit: () => true,\n view: () => true, // includes showing the item in the listing view.\n delete: () => true,\n }\n postMutation = {\n created: ({ history }) => {\n console.log(\"item created!\");\n history.push(this.routes.list.path);\n },\n updated: ({ history }) => {\n console.log(\"item updated!\");\n history.push(this.routes.list.path);\n },\n deleted: () => {\n console.log(\"item deleted!\");\n },\n };\n /** populate this with custom model fields, no default strapi fields, such as id, createdAt, updatedAt\n * follow a similar schema\n *\n * fields = {\n * name: {\n * type: 'string',\n * label: 'الاسم',\n * permissions: 'readonly',\n * nullable: false;\n * },\n * start:{\n * label: 'تاريخ البداية',\n * type: 'date',\n * },\n * end: {\n * label: 'تاريخ النهاية',\n * },\n * budget: {\n * label: 'الميزانية ($)',\n * type: 'number',\n * }\n * }\n *\n * `permissions` can be one of\n * - static: data comes from a `data` attribute, and follows the exact type of the field\n * - read-write [default]: can be filled anytime.\n * - read-only: cannot be filled\n * - fillLater: fillable during creation, then readonly in modification.\n * - fillLater: fillLater: not visible during creation, then fillable in modification.\n *\n * if `nullable` is true:\n * - the field's default value is initially null-like (renders empty string or 0)\n * - when a field's value is null-like it's set to null on save\n *\n */\n\n fields = {\n id: {\n type: \"text\",\n label: \"الرقم\",\n permissions: 'readOnly',\n },\n createdAt: {\n type: \"date\",\n label: \"تاريخ الإنشاء\",\n permissions: 'readOnly',\n },\n updatedAt: {\n type: \"date\",\n label: \"تاريخ أخر تحديث\",\n permissions: 'readOnly',\n },\n };\n layout = [];\n views = {\n list: {\n title: \"قائمة الاستمارات\",\n /**\n * list of fields to fetch in order to display the rows\n * no need to add 'id' and 'createdAt',\n */\n fields: [],\n /**\n *\n */\n columns: [\"id\", \"actions\"],\n pageSize: 20,\n },\n add: {\n title: \"إضافة عنصر جديد\",\n },\n edit: {\n title: \"استمارة التعديل\",\n },\n view: {\n title: \"مشاهدة الاستمارة\",\n },\n };\n /** Constructor */\n constructor(props = {}) {\n this.constructor.required.forEach((requiredProp) => {\n if (!(requiredProp in props)) {\n throw new TypeError(\n `'${requiredProp}' is a required property to instantiate a Form class`\n );\n }\n });\n // Initialize item and collection names for GraphQL queries and mutations\n this.itemName = camelCase(props.slug);\n this.collectionName = this.itemName + \"s\";\n // populate object\n this.update(props);\n // Bind instance to component methods\n this.DefinitionProvider = this.DefinitionProvider.bind(this);\n this.ContextProvider = this.ContextProvider.bind(this);\n this.List = this.List.bind(this);\n this.Single = this.Single.bind(this);\n\n // Add enabled routes\n this.routes = Object.fromEntries(\n this.enabledRoutes.map((routeName) => [\n routeName,\n {\n path: [\n this.constructor.basePath,\n this.slug,\n this.constructor.routeMap[routeName],\n ].join(\"/\"),\n Component:\n routeName === \"list\"\n ? this.List\n : () => this.Single({ mode: routeName }),\n },\n ])\n );\n\n // add actions column to data table\n this.views.list.columns = this.views.list.columns.concat([\n { name: \"خيارات\", cell: FormListActions },\n ]);\n\n // compile defined layouts to remove string field name references\n this.compileLayouts();\n this.compileValidationSchemas();\n }\n\n /** Sparse update of the object's attributes */\n update(props) {\n for (let prop in props) {\n if (\n typeof props[prop] === \"object\" &&\n !Array.isArray(props[prop]) &&\n props[prop] !== null\n ) {\n if (!this.hasOwnProperty(prop)) {\n this[prop] = {};\n }\n sparseUpdate(this[prop], props[prop]);\n } else {\n this[prop] = props[prop];\n }\n }\n }\n\n getField(name) {\n const definition = this.fields[name];\n if (!definition) {\n throw new TypeError(`No definition found for field '${name}'`);\n }\n \n if(definition.type === 'table'){\n for(let index in definition.columns){\n definition.columns[index] = sparseUpdate(\n this.buildField(`${name}[${index}]`,definition.columns[index]),\n { singleField: true } \n );\n }\n }\n\n return this.buildField(name, definition);\n }\n\n buildField(name, definition){\n const fieldDefaults = {\n valueFor: {\n view: (value) => value,\n edit: (value) => value,\n save: (value) => value,\n },\n Component: TextField,\n };\n let field = sparseUpdate(\n { name, ...fieldDefaults },\n definition,\n this.constructor.fieldDefaultsByType?.[ definition.type] ?? {}\n );\n let permissions = JSON.parse(JSON.stringify(this.constructor.defaultFieldPermissions));\n field.permissions = sparseUpdate(permissions, this.constructor.fieldPermissionProfiles?.[definition.permissions] ?? {}); \n return field\n }\n\n DefinitionProvider({ children }) {\n return (\n {children}\n );\n }\n\n ContextProvider({ mode, children }) {\n return {children};\n }\n\n List() {\n const { DefinitionProvider } = this;\n return (\n \n \n \n \n \n );\n }\n\n /** @type Single React.Component */\n Single({ mode }) {\n const { DefinitionProvider, ContextProvider} = this;\n return (\n \n \n \n \n \n {({ SubmitButton }) => {\n return SubmitButton && ;\n }}\n \n \n \n \n );\n }\n\n getSingleQuerySelection(requestedFields) {\n const fields = Array.isArray(requestedFields) ? requestedFields : Object.keys(this.fields);\n let selection = [];\n fields.forEach((fieldName) => {\n const field = this.getField(fieldName);\n const { type, permissions, requiredFields, ...fieldProps } = field;\n\n // exclude the field if it's static content used in form but not fetched from db\n let subSelection = \"\";\n if (type === \"user\") {\n subSelection = \"{ id fullname avatar }\";\n } else if (type === 'select'){\n const {options, otherOptions} = fieldProps;\n if(otherOptions || options.some(({details})=> details)){\n subSelection = `${fieldName}__details`;\n }\n } else if (type === \"calculated\") {\n selection.push(this.getSingleQuerySelection(requiredFields ?? []));\n // prevent adding calculated field to selection\n return;\n }\n selection.push(fieldName)\n if(subSelection){\n selection.push(subSelection);\n };\n });\n return selection.join(\" \");\n }\n\n /** Compile Yup validation schemas for add and edit forms */\n compileValidationSchemas() {\n [\"add\", \"edit\"].forEach((mode) => {\n //const schemaOverrides = this.views[mode]?.validationSchema ?? {};\n this.views[mode].validationSchema = this.getValidationSchema(mode);\n //sparseUpdate(this.views[mode].validationSchema, schemaOverrides);\n });\n }\n\n /** Get the default Yup form validation schema for a specific mode */\n getValidationSchema(mode, root = null) {\n let validationSchema = {};\n const layout = root ?? this.views[mode].layout;\n layout.forEach(\n ({\n name,\n type,\n permissions,\n children,\n singleField,\n validationRule,\n ...layoutProps\n }) => {\n // Ensure this field or section should be accessed\n if (!permissions?.[mode] || permissions[mode].write) {\n // recurse validation rule resolving with children for section\n if (type === \"section\") {\n validationSchema = {\n ...validationSchema,\n ...this.getValidationSchema(\n mode,\n singleField ? [singleField] : children ?? []\n ),\n };\n } else {\n let rule = validationRule ?? this.constructor.validationRuleMap?.[type];\n if (rule) {\n if(type === 'select' ){\n const {options, otherOption} = layoutProps;\n const valuesRequiringDetails = (otherOption ? ['other'] : []).concat(\n options.map(({details}, index) => details ? String(index+1) : null).filter(Boolean)\n )\n if(valuesRequiringDetails.length > 0){\n validationSchema[`${name}__details`] = this.constructor.validationRuleMap['string'].when(name, {\n is: (value) => valuesRequiringDetails.includes(value),\n then: (rule) => rule.required(),\n otherwise: (rule) => rule.nullable(),\n });\n rule.oneOf((otherOption ? ['other'] : []).concat(\n options.map((_, index) => String(index+1))\n ))\n }\n }\n validationSchema[name] = permissions[mode].required ? rule.required() : rule.nullable();\n }\n }\n }\n }\n );\n return validationSchema;\n }\n\n /** Compile all layouts */\n compileLayouts() {\n this.compileLayout();\n [\"add\", \"edit\", \"view\"].forEach((mode) => {\n if (this.views[mode]?.layout) {\n this.compileLayout(this.views[mode].layout);\n } else {\n this.views[mode].layout = this.layout;\n }\n });\n }\n\n /** Compile layout specified in root.\n * otherwise compiles default layout\n */\n compileLayout(root = null) {\n root = root ?? this.layout;\n for (let i in root) {\n if (typeof root[i] === \"string\") {\n root[i] = this.getField(root[i]);\n } else if (typeof root[i]?.singleField === \"string\") {\n root[i].singleField = this.getField(root[i].singleField);\n } else if (root[i]?.children?.length) {\n this.compileLayout(root[i].children);\n }\n }\n }\n\n getInputType(fieldType) {\n return this.constructor.inputTypeMap?.[fieldType] ?? \"text\";\n }\n\n cleanedFormData(data, mode) {\n const cleanedData = {};\n for (let fieldName in data) {\n if(fieldName.endsWith('__details') && this.getField(fieldName.replace('__details', ''))?.type === 'select'){\n cleanedData[fieldName] = data[fieldName];\n } else {\n const field = this.getField(fieldName);\n if (['write', 'writeOnce', 'autoWrite', 'autoWriteOnce'].some((perm) => field.permissions[mode][perm])) {\n cleanedData[fieldName] = field.valueFor.save(data[fieldName]);\n }\n }\n }\n return cleanedData;\n }\n\n compiledValues(values, mode, context) {\n const compiledValues = {};\n for (let fieldName in this.fields) {\n const {\n name,\n type,\n permissions,\n value: staticValue,\n valueFor,\n requiredFields,\n calculate,\n ...fieldProps\n } = this.getField(fieldName);\n const fieldPermissions = permissions[mode];\n let value = staticValue;\n if(type !== 'calculated') {\n value = valueFor?.[\n (fieldPermissions.show && fieldPermissions.write)\n || fieldPermissions.autoWrite ? \"edit\" : \"view\"\n ](values[name], {values, ...context}) ?? value;\n if (type === \"table\" && !value){\n value = value ?? [ Array.from(fieldProps.columns, () => null ) ]\n } \n }\n compiledValues[fieldName] = value;\n if(type === 'select'){\n const {options, otherOptions} = fieldProps;\n if(otherOptions || options.some(({details})=> details)){\n compiledValues[`${fieldName}__details`] = null;\n }\n\n }\n }\n return compiledValues;\n }\n} \nexport default Form;\n","export default function camelCase(str) {\n const words = str.split(/[-_]/);\n const camelCaseWords = words.map((word, index) => {\n if(index) return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();\n return word.toLowerCase();\n });\n return camelCaseWords.join(\"\");\n}\n","import {\n Avatar,\n Box,\n Button,\n InputAdornment,\n Typography,\n} from \"@material-ui/core\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { Navigation } from \"../../../Context\";\nimport SearchMember from \"./SearchMember\";\nimport TextField from \"./TextField\";\n\nexport default function UserField(props) {\n const { name, label, edit, value, handleChange } = props;\n const { centerId, user } = useContext(Navigation);\n const [ready, setReady] = useState(false);\n\n if (!edit) {\n return (\n \n {label && {label}:}\n {value?.fullname ?? value?.username ?? \"(غير محدد)\"}\n \n );\n }\n \n return (\n <>\n \n \n \n ),\n endAdornment: (\n \n {\n setReady(true);\n }}\n >\n اختيار\n \n \n ),\n }}\n />\n {\n handleChange({\n target: {\n name,\n value,\n },\n });\n }}\n />\n \n );\n}\n","import { Box, Checkbox, FormControlLabel, Typography } from \"@material-ui/core\";\n\nexport default function CheckBoxField({\n // field properties\n name,\n type,\n label,\n // data properties\n edit,\n touched,\n error,\n value,\n handleChange,\n handleBlur,\n inputProps,\n emptyLabel,\n ...other\n}) {\n if (!edit) {\n return (\n \n {label && {label}:}\n {value && value?.length ? value : emptyLabel}\n \n );\n } else {\n return (\n \n }\n label={label}\n />\n );\n }\n}\n","import Form from \"./Form\";\n\nconst BusinessPlan = {\n slug: \"business-plan\",\n name: \"نموذج كتابة تقرير لمشروع إعداد قيادي\",\n availableActions:{\n view: (item, {membershipRole, user}) => item.submittedAt && membershipRole === 'owner' || item.author.id === user.id,\n edit: (item, {user}) => item.author.id === user.id && !item.submittedAt,\n delete: (item, {membershipRole, user}) => item.submittedAt ? membershipRole === 'owner' : item.author.id === user.id,\n },\n fields:{\n name:{\n label: 'اسم المشروع',\n type: 'string',\n },\n introduction:{\n label: 'تعريف',\n helperText: 'ابدأ بتعريف بسسيط عن التقرير',\n type: 'string',\n multiline: true,\n },\n team:{\n label: 'فريق المشروع',\n helperText: 'يتألف الفريق من عدة تخصصات\\nاكتب عن هيكلة الفريق',\n type: 'string',\n multiline: true,\n },\n management:{\n label: 'إدارة المشروع المشروع',\n helperText: 'اكتب عن عملية إدارة المشروع، و دور كل أعضاء الفريق في العملية الإدارية',\n type: 'string',\n multiline: true,\n },\n time:{\n label: 'المدة و الأطر الزمنية',\n helperText: 'اكتب عن مدة تميد المشروع مع الإشارة لأي تأجيل في التنفيذ، او على العكس أي أعمال أنجزت في وقت قصير',\n type: 'string',\n multiline: true,\n },\n risks:{\n label: 'مخاطر المشروع',\n helperText: 'اكتب عن أي مخاطر واجهتكم أثناء تنفيذ المشروع',\n type: 'string',\n multiline: true,\n },\n expenses:{\n label: \"المصاريف\",\n type:'table',\n columns: [\n {\n label: 'البيان',\n type: 'string',\n multiline: true,\n minRows: 1,\n aggregate: ()=> \"الإجمالي\",\n },\n {\n label: 'تكلفة الفرد',\n type: 'number',\n },\n {\n label: 'العدد',\n type: 'number',\n },\n {\n label: '$',\n type: 'calculated',\n calculate: ({rows, rowIndex}) => {\n const [value,quantity] = rows[rowIndex].slice(1,3).map(Number);\n return ([value, quantity].includes(NaN) ? 0 : value * quantity)\n },\n aggregate: ({rows}) => rows.reduce((sum, row) => {\n const [value,quantity] = row.slice(1,3).map(Number);\n return sum + ([value, quantity].includes(NaN) ? 0 : value * quantity)\n }, 0),\n },\n {\n label: 'ملاحظات',\n type: 'string',\n multiline: true,\n minRows: 1,\n },\n ],\n // aggregate: false if none of the columns has an aggregate function\n },\n revenue:{\n label: \"الإيرادات\",\n type:'table',\n columns: [\n {\n label: 'البيان',\n type: 'string',\n multiline: true,\n minRows: 1,\n aggregate: ()=> \"الإجمالي\",\n },\n {\n label: 'تكلفة الفرد',\n type: 'number',\n },\n {\n label: 'العدد',\n type: 'number',\n },\n {\n label: '$',\n type: 'calculated',\n calculate: ({rows, rowIndex}) => {\n const [value,quantity] = rows[rowIndex].slice(1,3).map(Number);\n return ([value, quantity].includes(NaN) ? 0 : value * quantity)\n },\n aggregate: ({rows}) => rows.reduce((sum, row) => {\n const [value,quantity] = row.slice(1,3).map(Number);\n return sum + ([value, quantity].includes(NaN) ? 0 : value * quantity)\n }, 0),\n },\n {\n label: 'ملاحظات',\n type: 'string',\n multiline: true,\n minRows: 1,\n },\n ],\n // aggregate: false if none of the columns has an aggregate function\n },\n totalRevenue:{\n label: 'إجمالي الإيرادات',\n type: 'calculated',\n requiredFields: ['revenue'],\n calculate: ({revenue}) => revenue.reduce((sum, row) => {\n const [value,quantity] = row.slice(1,3).map(Number);\n return sum + ([value, quantity].includes(NaN) ? 0 : value * quantity)\n }, 0),\n permissions: 'readOnly',\n },\n totalExpenses: {\n label: 'إجمالي المصاريف',\n type: 'calculated',\n requiredFields: ['expenses'],\n calculate: ({expenses}) => expenses.reduce((sum, row) => {\n const [value,quantity] = row.slice(1,3).map(Number);\n return sum + ([value, quantity].includes(NaN) ? 0 : value * quantity)\n }, 0),\n permissions: 'readOnly',\n },\n netProfit: {\n label: 'صافي الربح',\n type: 'calculated',\n requiredFields: ['revenue', 'expenses'],\n calculate: ({expenses, revenue}) => (\n revenue.reduce((sum, row) => {\n const [value,quantity] = row.slice(1,3).map(Number);\n return sum + ([value, quantity].includes(NaN) ? 0 : value * quantity)\n }, 0)\n - expenses.reduce((sum, row) => {\n const [value,quantity] = row.slice(1,3).map(Number);\n return sum + ([value, quantity].includes(NaN) ? 0 : value * quantity)\n }, 0)\n ),\n permissions: 'readOnly',\n },\n author: {\n label: \"قام بإعداد التقرير\",\n type: \"user\",\n permissions: 'autoFillFirst',\n valueFor: {\n view: (value, context) => value ?? context.user,\n edit: (value, context) => value ?? context.user,\n },\n },\n submittedAt: {\n label: \"رفع التقرير للمسؤول\",\n type: \"timestamp\",\n permissions: 'fillOnce',\n }\n },\n layout:[\n {\n type: 'section',\n singleField: 'name'\n },\n {\n type: 'section',\n singleField: 'introduction'\n },\n {\n type: 'section',\n singleField: 'team'\n },\n {\n type: 'section',\n singleField: 'management'\n },\n {\n type: 'section',\n singleField: 'time'\n },\n {\n type: 'section',\n singleField: 'risks'\n },\n {\n type: 'section',\n label: 'المالية',\n children: [\n 'revenue',\n 'expenses',\n 'totalRevenue',\n 'totalExpenses',\n 'netProfit'\n ],\n },\n {\n type: \"section\",\n label: \"معلومات عن التقرير\",\n children:[\n 'author',\n 'submittedAt',\n ]\n },\n ],\n views:{\n list: {\n title: 'قائمة التقارير',\n requiredFields: ['name', 'createdAt', 'submittedAt', 'author'],\n columns: [\n {\n name: \"العنوان\",\n selector: ({ name }) => name ?? '(غير محدد)',\n searchable: true,\n sortable: true,\n },\n {\n name: \"انشئ بتاريخ\",\n selector: ({ createdAt }) => createdAt,\n searchable: true,\n sortable: true,\n },\n {\n name: \"كاتب التقرير\",\n selector: ({ author }) => author ? author?.fullname : '(غير محدد)' ,\n searchable: true,\n sortable: true,\n },\n {\n name: \"تم رفعه بتاريخ\",\n selector: ({ submittedAt }) => submittedAt ?? 'ليس بعد',\n searchable: true,\n sortable: true,\n },\n ],\n },\n add: {\n title: 'تقرير جديد',\n },\n edit: {\n title: 'تعديل التقرير',\n },\n view: {\n title: 'تقرير المشروع'\n }\n }\n};\n\nexport default new Form(BusinessPlan);\n","import Form from \"./Form\";\n\nconst ComplaintAboutSuperior = {\n slug: \"complaint-about-superior\",\n name: \"نموذج تقديم الموظف شكوى عن مديره\",\n availableActions:{\n edit: () => false,\n view: (item, {user, membershipRole}) => membershipRole === 'owner' || item.employee.id === user.id,\n delete: (_, {membershipRole}) => membershipRole === 'owner',\n },\n fields:{\n employee:{\n label: 'الموظف',\n type: 'user',\n permissions: 'autoFillFirst',\n valueFor: {\n view: (value, context) => value ?? context.user,\n edit: (value, context) => value ?? context.user,\n },\n },\n job:{\n type: 'string',\n label: 'الوظيفة',\n permissions: 'fillFirst',\n },\n unit: {\n type: 'string',\n label: 'الوحدة التنظيمية',\n permissions: 'fillFirst',\n },\n employedSince: {\n type: 'date',\n label: 'تم التوظيف بتاريخ',\n permissions: 'fillFirst',\n },\n superior:{\n label: 'المدير المشتكى منه',\n type: 'string',\n permissions: 'fillFirst',\n },\n behavior:{\n label: 'تصرف المدير',\n type: 'string',\n multiline: true,\n minRows: 5,\n permissions: 'fillFirst',\n },\n reasons:{\n label: 'أسباب الشكوى',\n type: 'string',\n permissions: 'fillFirst',\n multiline: true,\n minRows: 5,\n }\n },\n layout:[\n {\n type: 'section',\n label: 'معلومات المشتكي',\n children: [\n 'employee',\n 'job',\n 'unit',\n 'employedSince'\n ]\n },\n {\n type: 'section',\n label: 'تفاصيل الشكوى',\n children: [\n 'superior',\n 'behavior',\n 'reasons',\n ]\n },\n ],\n views:{\n list: {\n title: 'قائمة الشكاوى',\n requiredFields: ['employee', 'createdAt', 'superior'],\n columns: [\n {\n name: \"الموظف\",\n selector: ({ employee }) => employee ? employee?.fullname : '(غير محدد)',\n searchable: true,\n sortable: true,\n },\n {\n name: \"تاريخ الشكوى\",\n selector: ({ createdAt }) => createdAt,\n searchable: true,\n sortable: true,\n },\n {\n name: \"المشتكى منه\",\n selector: ({ superior }) => superior,\n searchable: true,\n sortable: true,\n },\n ],\n },\n add: {\n title: 'شكوى جديدة',\n },\n view: {\n title: 'تفاصيل الشكوى'\n }\n }\n};\nexport default new Form(ComplaintAboutSuperior);\n","import Form from \"./Form\";\n\nconst EmployeeAbsence = {\n slug: \"employee-absence\",\n name: \"سجل غياب الموظفين\",\n fields:{\n employee:{\n label: 'الموظف',\n type: 'user',\n permissions: 'fillFirst',\n },\n job:{\n type: 'string',\n label: 'الوظيفة',\n permissions: 'fillFirst',\n\n },\n unit: {\n type: 'string',\n label: 'الوحدة التنظيمية',\n permissions: 'fillFirst',\n },\n absences:{\n label: \"الجدول\",\n type:'table',\n columns: [\n {\n label: '#',\n type: 'calculated',\n calculate: ({rowIndex}) => rowIndex + 1,\n },\n {\n label: 'عدد أيام الغياب',\n type: 'number',\n min: 1,\n },\n {\n label: 'تاريخ الغياب',\n type: 'date',\n },\n {\n label: 'الأسباب',\n type: 'string',\n multiline: true,\n minRows: 1,\n },\n {\n label: 'الإجراء الإداري',\n type: 'string',\n multiline: true,\n minRows: 1,\n },\n ],\n \n // aggregate: false if none of the columns has an aggregate function\n },\n },\n layout:[\n {\n type: 'section',\n label: 'معلومات السجل',\n children: [\n 'employee',\n 'job',\n 'unit'\n ]\n },\n {\n type: 'section',\n singleField:'absences',\n }\n ],\n views:{\n list: {\n title: 'قائمة السجلات',\n requiredFields: ['employee'],\n columns: [\n\n {\n name: \"الموظف\",\n selector: ({ employee }) => employee ? employee?.fullname : '(غير محدد)',\n searchable: true,\n sortable: true,\n },\n {\n name: \"الوظيفة\",\n selector: ({ employee }) => employee ? employee?.fullname : '(غير محدد)',\n searchable: true,\n sortable: true,\n },\n {\n name: \"آخر تحديث\",\n selector: ({ updatedAt, createdAt }) => updatedAt ?? createdAt,\n searchable: true,\n sortable: true,\n },\n ],\n },\n add: {\n title: 'إنشاء سجل غياب جديد',\n },\n edit: {\n title: 'تعديل سجل الغياب',\n },\n view: {\n title: 'سجل غيابات الموظف'\n }\n }\n};\n\nexport default new Form(EmployeeAbsence);\n","import Form from \"./Form\";\n\nconst EventPlan = {\n slug: \"event-plan\",\n name: \"نموذج تخطيط فعالية / نشاط\",\n fields: {\n name: {\n label: \"اسم النشاط\",\n type: \"string\",\n },\n guests: {\n label: \"الضيوف\",\n type: \"string\",\n multiline: true,\n },\n date: {\n label: \"التاريخ\",\n type: \"string\",\n },\n time: {\n label: \"الوقت\",\n type: \"string\",\n },\n location: {\n label: \"تفاصيل المكان\",\n type: \"string\",\n multiline: true,\n },\n manager: {\n label: \"مدير المشروع\",\n type: \"string\",\n },\n whatTheyShouldKnow: {\n label: \"ماذا تريد لهم أن يعرفوا\",\n type: \"string\",\n multiline: true,\n },\n revenueTarget: {\n label: \"العائد من المشروع لصالح من؟\",\n type: \"string\",\n multiline: true,\n },\n programme: {\n label: \"شرح عام لما سيحدث\",\n type: \"string\",\n multiline: true,\n },\n funding : {\n label: \"التمويل\",\n helperText: \"اكتب بالتفصيل ما هي تكاليف النشاط و كيف تقترح تعطيتها (اشتراكات، ميزانية مخصصة، من الرعاه، النشاط سيغطي نفسه بنفسه) \",\n type: \"string\",\n multiline: true,\n },\n },\n layout: [\n {\n type: \"section\",\n singleField: \"name\",\n },\n {\n type: \"section\",\n singleField: \"guests\",\n },\n {\n label: \"الإطار الزماني و المكاني\",\n type: \"section\",\n children: ['date', 'time', 'location']\n },\n {\n type: \"section\",\n singleField: \"manager\",\n },\n {\n type: \"section\",\n singleField: \"whatTheyShouldKnow\",\n },\n {\n type: \"section\",\n singleField: \"programme\",\n },\n {\n type: \"section\",\n singleField: \"revenueTarget\",\n },\n {\n type: \"section\",\n singleField: \"funding\",\n },\n\n\n\n\n ],\n\n views: {\n list: {\n title: \"قائمة الأنشطة\",\n requiredFields: [\"name\", \"date\"],\n columns: [\n {\n name: \"اسم النشاط\",\n selector: ({ name }) => {name},\n searchable: true,\n sortable: true,\n },\n {\n name: \"تاريخ النشاط\",\n selector: ({ date }) => date,\n searchable: true,\n sortable: true,\n },\n ],\n },\n add: {\n title: \"نشاط جديد\",\n },\n edit: {\n title: \"تعديل ورقة تخطيط النشاط\",\n },\n view: {\n title: \"ورقة تخطيط نشاط\",\n },\n },\n};\n\n\nexport default new Form(EventPlan);\n","import Form from \"./Form\";\n\nconst MeetingSchedule = {\n slug: \"meeting-schedule\",\n name: \"نموذج جدول الزيارات و اللقاءات\",\n fields:{\n name:{\n label: 'عنوان الجدول',\n type: 'string',\n },\n schedule:{\n label: \"الجدول\",\n type:'table',\n columns: [\n {\n label: 'اليوم',\n type: 'date',\n },\n {\n label: 'الزيارات',\n type: 'string',\n multiline: true,\n minRows: 1,\n },\n {\n label: 'اللقاءات',\n type: 'string',\n multiline: true,\n minRows: 1,\n },\n ],\n // aggregate: false if none of the columns has an aggregate function\n },\n },\n layout:[\n 'name',\n 'schedule',\n ],\n views: {\n list: {\n title: \"قائمة الجداول\",\n requiredFields: [\"name\", 'createdAt'],\n columns: [\n {\n name: \"العنوان\",\n selector: ({ name }) => {name},\n searchable: true,\n sortable: true,\n },\n {\n name: \"بتاريخ\",\n selector: ({ createdAt }) => createdAt ,\n searchable: true,\n sortable: true,\n },\n ],\n },\n add: {\n title: \"جدول جديد\",\n },\n edit: {\n title: \"تعديل الجدول\",\n },\n view: {\n title: \"جدول الزيارات و اللقاءات\",\n },\n },\n};\n\nexport default new Form(MeetingSchedule);\n","import { Box, Typography } from \"@material-ui/core\";\nimport lineSeparatedValues from \"../../../helpers/lineSparatedValues\";\nimport TextField from \"./TextField\";\n\nexport default function TextListField(props) {\n const { edit, label, value } = props;\n\n if (!edit) {\n const list = lineSeparatedValues(value);\n return (\n \n {label && {label}:}\n {list.length > 0 ? (\n \n {list.map((item, index) => (\n - {item}
\n ))}\n
\n ) : (\n (غير محدد)\n )}\n \n );\n }\n return (\n \n );\n}\n","/** Turns a multiline text into an array */\nexport default function lineSeparatedValues(text = \"\") {\n return Array.isArray(text)\n ? text\n : (text?.split(\"\\n\") ?? [])\n .map((part) => part.trim())\n .filter((part) => part?.length > 0);\n}\n","import sparseUpdate from \"../helpers/sparseUpdate\";\nimport TextListField from \"./components/fields/TextListField\";\nimport Form from \"./Form\";\n\nconst staticFieldPermissions = sparseUpdate(\n JSON.parse(JSON.stringify(Form.defaultFieldPermissions)),\n Form.fieldPermissionProfiles.static,\n)\nconst ProjectSheet = {\n slug: \"project-sheet\",\n name: \"نموذج استمارة مشروع\",\n fields: {\n manager: {\n label: \"مدير المشروع\",\n type: \"user\",\n },\n name: {\n label: \"اسم المشروع\",\n type: \"string\",\n },\n shortDescription: {\n label: \"وصف مختصر\",\n type: \"string\",\n },\n budget: {\n label: \"الميزانية التقديرية للمشروع ($)\",\n type: \"number\",\n },\n start: {\n label: \"تاريخ البداية\",\n type: \"date\",\n },\n end: {\n label: \"تاريخ النهاية\",\n type: \"date\",\n },\n duration: {\n label: \"المدة التقديرية (أيام)\",\n type: \"calculated\",\n requiredFields: [\"start\", \"end\"],\n // calculate date difference in days\n calculate: ({ start, end }) =>\n (new Date(end) - new Date(start)) / 86400000,\n permissions: 'readOnly',\n },\n goals: {\n label: \"الاهداف\",\n type: \"string\",\n Component: TextListField,\n },\n successCriteria: {\n label: \"معايير النجاح الخاصة بالمشروع\",\n type: \"string\",\n Component: TextListField,\n },\n managerPrivileges: {\n label: \"صلاحيات مدير المشروع\",\n type: \"string\",\n Component: TextListField,\n },\n },\n layout: [\n {\n label: \"معلومات عامة\",\n type: \"section\",\n children: [\n \"manager\",\n \"name\",\n \"shortDescription\",\n \"budget\",\n \"start\",\n \"end\",\n \"duration\",\n ],\n },\n {\n type: \"section\",\n singleField: \"goals\",\n },\n {\n label: \"معايير نجاح المشروع\",\n type: \"section\",\n children: [\n {\n type: \"section\",\n singleField: {\n name: \"commonSuccessCriteria\",\n label: \"معايير النجاح العامة لكل المشاريع\",\n type: \"string\",\n permissions: staticFieldPermissions,\n value: [\n \"تحقيق أهداف المشروع كاملة\",\n \"إنهاء المشروع في الوقت المحدد\",\n ],\n Component: TextListField,\n },\n },\n {\n type: \"section\",\n singleField: \"successCriteria\",\n },\n ],\n },\n {\n type: \"section\",\n singleField: \"managerPrivileges\",\n },\n ],\n\n views: {\n list: {\n title: \"قائمة المشاريع\",\n requiredFields: [\"name\", \"start\", \"end\", \"budget\"],\n columns: [\n {\n name: \"اسم المشروع\",\n selector: ({ name }) => {name},\n searchable: true,\n sortable: true,\n },\n {\n name: \"تاريخ البداية\",\n selector: ({ start }) => start,\n searchable: true,\n sortable: true,\n },\n {\n name: \"تاريخ النهاية\",\n selector: ({ end }) => end,\n searchable: true,\n sortable: true,\n },\n {\n name: \"الميزانية\",\n selector: ({ budget }) => budget,\n searchable: true,\n sortable: true,\n },\n ],\n },\n add: {\n title: \"استمارة مشروع جديد\",\n },\n edit: {\n title: \"تعديل استمارة مشروع\",\n },\n view: {\n title: \"استمارة مشروع\",\n },\n },\n};\n\nexport default new Form(ProjectSheet);\n","import Form from \"./Form\";\n\nconst Suggestion = {\n slug: \"suggestion\",\n name: \"نموذج اقتراح / ملاحظة / شكوى\",\n availableActions:{\n edit: () => false,\n view: (item, {user, membershipRole}) => membershipRole === 'owner' || item.author.id === user.id,\n delete: (_, {membershipRole}) => membershipRole === 'owner',\n },\n fields:{\n author:{\n label: 'صاحب الاقتراح / الملاحظة / الشكوى',\n type: 'user',\n permissions: 'autoFillFirst',\n valueFor: {\n edit: (_, context) => context.user,\n view: (value) => value,\n },\n },\n subject:{\n label: \"الموضوع\",\n type: \"string\",\n permissions: 'fillFirst'\n },\n to: {\n label: 'الجهة المعنية', \n type: 'string',\n permissions: 'fillFirst'\n },\n details: {\n label: 'التفاصيل',\n type: \"string\",\n multiline: true,\n minRows: 5,\n }\n },\n layout:[\n {\n type: 'section',\n label: 'معلومات سريعة',\n children:[\n 'author',\n 'to',\n 'subject',\n ]\n },\n {\n type: 'section',\n singleField: 'details'\n }\n ],\n views: {\n list: {\n title: \"قائمة الرسائل\",\n requiredFields: [\"subject\", \"author\", 'createdAt'],\n columns: [\n {\n name: \"الموضوع\",\n selector: ({ subject }) => {subject},\n searchable: true,\n sortable: true,\n },\n {\n name: \"من طرف\",\n selector: ({ author }) => author ? author?.fullname : '(غير محدد)',\n searchable: true,\n sortable: true,\n },\n {\n name: \"بتاريخ\",\n selector: ({ createdAt }) => createdAt ,\n searchable: true,\n sortable: true,\n },\n ],\n },\n add: {\n title: \"رسالة جديدة\",\n },\n view: {\n title: \"اقتراح / ملاحظة / شكوى\",\n },\n },\n\n};\n\nexport default new Form(Suggestion);\n","import Form from \"./Form\";\n\nconst TrainingProgram = {\n slug: \"training-program\",\n name: \"نموذج توزيع المواد التدريبية والأنشطة\",\n fields:{\n name:{\n label: 'اسم الدورة',\n type: 'string',\n },\n program:{\n label: \"الجدول\",\n type:'table',\n columns: [\n {\n label: 'اليوم',\n type: 'calculated',\n calculate: ({rowIndex}) => rowIndex + 1,\n },\n {\n label: 'التاريخ',\n type: 'date',\n },\n {\n label: 'صباحا',\n type: 'string',\n multiline: true,\n minRows: 1,\n },\n {\n label: 'عصرا',\n type: 'string',\n multiline: true,\n minRows: 1,\n },\n {\n label: 'ملاحظة',\n type: 'string',\n multiline: true,\n minRows: 1,\n },\n ],\n // aggregate: false if none of the columns has an aggregate function\n },\n },\n layout:[\n 'name',\n 'program',\n ],\n views: {\n list: {\n title: \"قائمة الجداول\",\n requiredFields: [\"name\", 'createdAt'],\n columns: [\n {\n name: \"العنوان\",\n selector: ({ name }) => {name},\n searchable: true,\n sortable: true,\n },\n {\n name: \"أنشئ بتاريخ\",\n selector: ({ createdAt }) => createdAt ,\n searchable: true,\n sortable: true,\n },\n ],\n },\n add: {\n title: \"جدول توزيع جديد\",\n },\n edit: {\n title: \"تعديل جدول التوزيع\",\n },\n view: {\n title: \"توزيع المواد التدريبية والأنشطة\",\n },\n },\n};\n\nexport default new Form(TrainingProgram);","import Form from \"./Form\";\n\nconst TripFinancialEstimation = {\n slug: \"trip-financial-estimation\",\n name: \"نموذج تقدير مصاريف وإيرادات الرحلات\",\n fields:{\n name:{\n label: 'الرحلة',\n type: 'string',\n },\n numberOfPeople:{\n label: \"عدد الأشخاص\",\n type: 'number',\n },\n expenses:{\n label: \"المصاريف\",\n type:'table',\n columns: [\n {\n label: 'البيان',\n type: 'string',\n multiline: true,\n minRows: 1,\n aggregate: ()=> \"الإجمالي\",\n },\n {\n label: 'تكلفة الفرد',\n type: 'number',\n },\n {\n label: 'العدد',\n type: 'number',\n },\n {\n label: '$',\n type: 'calculated',\n calculate: ({rows, rowIndex}) => {\n const [value,quantity] = rows[rowIndex].slice(1,3).map(Number);\n return ([value, quantity].includes(NaN) ? 0 : value * quantity)\n },\n aggregate: ({rows}) => rows.reduce((sum, row) => {\n const [value,quantity] = row.slice(1,3).map(Number);\n return sum + ([value, quantity].includes(NaN) ? 0 : value * quantity)\n }, 0),\n },\n {\n label: 'ملاحظات',\n type: 'string',\n multiline: true,\n minRows: 1,\n },\n ],\n // aggregate: false if none of the columns has an aggregate function\n },\n revenue:{\n label: \"الإيرادات\",\n type:'table',\n columns: [\n {\n label: 'البيان',\n type: 'string',\n multiline: true,\n minRows: 1,\n aggregate: ()=> \"الإجمالي\",\n },\n {\n label: 'تكلفة الفرد',\n type: 'number',\n },\n {\n label: 'العدد',\n type: 'number',\n },\n {\n label: '$',\n type: 'calculated',\n calculate: ({rows, rowIndex}) => {\n const [value,quantity] = rows[rowIndex].slice(1,3).map(Number);\n return ([value, quantity].includes(NaN) ? 0 : value * quantity)\n },\n aggregate: ({rows}) => rows.reduce((sum, row) => {\n const [value,quantity] = row.slice(1,3).map(Number);\n return sum + ([value, quantity].includes(NaN) ? 0 : value * quantity)\n }, 0),\n },\n {\n label: 'ملاحظات',\n type: 'string',\n multiline: true,\n minRows: 1,\n },\n ],\n // aggregate: false if none of the columns has an aggregate function\n },\n averageCostPerPerson: {\n label: 'متوسط التكلفة للشخص',\n type: 'calculated',\n requiredFields: ['expenses', 'numberOfPeople'],\n calculate: ({expenses, numberOfPeople}) => numberOfPeople > 0\n ? expenses.reduce((sum, row) => {\n const [value,quantity] = row.slice(1,3).map(Number);\n return sum + ([value, quantity].includes(NaN) ? 0 : value * quantity)\n }, 0) / numberOfPeople\n : 0,\n permissions: 'readOnly',\n },\n totalRevenue:{\n label: 'إجمالي الإيرادات',\n type: 'calculated',\n requiredFields: ['revenue'],\n calculate: ({revenue}) => revenue.reduce((sum, row) => {\n const [value,quantity] = row.slice(1,3).map(Number);\n return sum + ([value, quantity].includes(NaN) ? 0 : value * quantity)\n }, 0),\n permissions: 'readOnly',\n },\n totalExpenses: {\n label: 'إجمالي المصاريف',\n type: 'calculated',\n requiredFields: ['expenses'],\n calculate: ({expenses}) => expenses.reduce((sum, row) => {\n const [value,quantity] = row.slice(1,3).map(Number);\n return sum + ([value, quantity].includes(NaN) ? 0 : value * quantity)\n }, 0),\n permissions: 'readOnly',\n },\n remainingExpenses: {\n label: 'المصاريف المتبقية بعد خصم الإيرادات',\n type: 'calculated',\n requiredFields: ['revenue', 'expenses'],\n calculate: ({expenses, revenue}) => (\n expenses.reduce((sum, row) => {\n const [value,quantity] = row.slice(1,3).map(Number);\n return sum + ([value, quantity].includes(NaN) ? 0 : value * quantity)\n }, 0)\n - revenue.reduce((sum, row) => {\n const [value,quantity] = row.slice(1,3).map(Number);\n return sum + ([value, quantity].includes(NaN) ? 0 : value * quantity)\n }, 0)\n ),\n permissions: 'readOnly',\n },\n },\n layout:[\n 'name',\n {\n type: 'section',\n label: 'المصاريف',\n children: [\n 'expenses',\n 'numberOfPeople',\n 'averageCostPerPerson'\n ],\n },\n {\n type: 'section',\n singleField: 'revenue',\n },\n {\n type: 'section',\n label: 'النتيجة',\n children: [\n 'totalRevenue',\n 'totalExpenses',\n 'remainingExpenses',\n ]\n }\n ],\n views: {\n list: {\n title: \"قائمة الرحلات\",\n requiredFields: [\"name\", 'createdAt'],\n columns: [\n {\n name: \"الرحلة\",\n selector: ({ name }) => {name},\n searchable: true,\n sortable: true,\n },\n {\n name: \"أنشئ بتاريخ\",\n selector: ({ createdAt }) => createdAt ,\n searchable: true,\n sortable: true,\n },\n ],\n },\n add: {\n title: \"نموذج جديد\",\n },\n edit: {\n title: \"تعديل النموذج\",\n },\n view: {\n title: \"تقدير مصاريف و إيرادات الرحلة\",\n },\n },\n};\n\nexport default new Form(TripFinancialEstimation);\n","import Form from \"./Form\";\n\nconst TripOrMeetingReport = {\n slug: \"trip-or-meeting-report\",\n name: \"نموذج كتابة تقرير الرحلات و اللقاءات\",\n availableActions:{\n view: (item, {membershipRole, user}) => item.submittedAt && membershipRole === 'owner' || item.author.id === user.id,\n edit: (item, {user}) => item.author.id === user.id && !item.submittedAt,\n delete: (item, {membershipRole, user}) => item.submittedAt ? membershipRole === 'owner' : item.author.id === user.id,\n },\n fields: {\n name: {\n label: \"العنوان\",\n type: \"string\",\n },\n about: {\n label: \"تعريف عن الرحلة أو اللقاء\",\n type: \"string\",\n multiline: true,\n },\n team: {\n label: \"فريق الرحلات و اللقاءت\",\n type: \"string\",\n multiline: true,\n },\n met: {\n label: \"بمن التقوا\",\n type: \"string\",\n multiline: true,\n },\n topic: {\n label: \"ماذا كان محور اللقاء؟\",\n type: \"string\",\n multiline: true,\n },\n duration: {\n label: \"كم استغرق من الوقت؟\",\n type: \"string\",\n multiline: true,\n },\n outcomes: {\n label: \"ماذا كانت مخرجات اللقاء؟\",\n type: \"string\",\n multiline: true,\n },\n author: {\n label: \"قام بإعداد التقرير\",\n type: \"user\",\n permissions: 'autoFillFirst',\n valueFor: {\n view: (value, context) => value ?? context.user,\n edit: (value, context) => value ?? context.user,\n },\n },\n submittedAt: {\n label: \"رفع التقرير للمسؤول\",\n type: \"timestamp\",\n permissions: 'fillOnce',\n }\n },\n layout: [\n {\n type: \"section\",\n singleField: \"name\",\n },\n {\n type: \"section\",\n singleField: \"about\",\n },\n {\n type: \"section\",\n singleField: \"team\",\n },\n {\n type: \"section\",\n singleField: \"met\",\n },\n {\n type: \"section\",\n singleField: \"topic\",\n },\n {\n type: \"section\",\n singleField: \"duration\",\n },\n {\n type: \"section\",\n singleField: \"outcomes\",\n },\n {\n type: \"section\",\n label: \"معلومات عن التقرير\",\n children:[\n 'author',\n 'submittedAt',\n ]\n },\n ],\n\n views: {\n list: {\n title: \"قائمة التقارير\",\n requiredFields: [\"name\", \"author\", 'submittedAt'],\n columns: [\n {\n name: \"عنوان التقرير\",\n selector: ({ name }) => {name},\n searchable: true,\n sortable: true,\n },\n {\n name: \"انشئ بتاريخ\",\n selector: ({ createdAt }) => createdAt,\n searchable: true,\n sortable: true,\n },\n {\n name: \"كاتب التقرير\",\n selector: ({ author }) => author ? author?.fullname : '(غير محدد)' ,\n searchable: true,\n sortable: true,\n },\n {\n name: \"تم رفعه بتاريخ\",\n selector: ({ submittedAt }) => submittedAt ?? 'ليس بعد',\n searchable: true,\n sortable: true,\n },\n ],\n },\n add: {\n title: \"تقرير جديد\",\n },\n edit: {\n title: \"تعديل تقرير\",\n },\n view: {\n title: \"تقرير رحلة أو لقاء\",\n },\n },\n};\n\n\nexport default new Form(TripOrMeetingReport);\n","\nimport Form from \"./Form\";\nimport SelectField from \"./components/fields/SelectField\";\n\nconst WarningLetter = {\n slug: \"warning-letter\",\n name: \"خطاب إنذار\",\n availableActions:{\n edit: () => false,\n view: (item, {user, membershipRole}) => membershipRole === 'owner' || item.employee.id === user.id,\n delete: (_, {membershipRole}) => membershipRole === 'owner',\n },\n fields:{\n employee:{\n label: 'الموظف',\n type: 'user',\n permissions: 'fillFirst',\n },\n job:{\n type: 'string',\n label: 'الوظيفة',\n permissions: 'fillFirst',\n },\n unit: {\n type: 'string',\n label: 'الوحدة التنظيمية',\n permissions: 'fillFirst',\n },\n date:{\n type: 'date',\n label: 'تاريخ المخالفة',\n permissions: 'fillFirst',\n },\n infraction:{\n type: 'select',\n label: 'المخالفة التي ارتكبها',\n permissions: 'fillFirst',\n Component: SelectField,\n options: [\n {\n label: 'التأخر في الحضور للعمل حسب الأوقات الرسمية المقررة لمدة',\n details: {\n label: 'حدد المدة',\n }\n },\n {\n label: 'الخروج من مكان العمل بدون إذن لمدة',\n details: {\n label: 'حدد المدة',\n }\n },\n {\n label: 'مغادرة مكان العمل قبل نهاية الدوام الرسمي بمدة',\n details: {\n label: 'حدد المدة',\n }\n },\n { label: 'الغياب عن العمل بدون موافقة المسؤول' },\n { label: 'ادعاء المرض بقصد الغياب عن العمل' },\n { label: 'العودة إلى مكان العمل بعد انتهاء الدوام بدون الحصول على موافقة' },\n { label: 'التسكع في المكاتب بقصد إضاعة الوقت' },\n { label: 'استقبال الزوار خلال ساعات العمل الرسمية مخالفاً أنظمة وتعليمات الشركة' },\n { label: 'الأكل في مكان العمل خلال الدوام' },\n { label: 'مطالعة الجرائد والمجلات أثناء الدوام الرسمي' },\n { label: 'التدخين في الأماكن المحظورة' },\n { label: 'استخدام هاتف الشركة للأغراض الشخصية' },\n { label: 'التوقيع نيابة عن الآخرين في سجل الدوام' },\n { label: 'التزوير في سجل الدوام لإثبات مواعيد حضورك' },\n { label: 'الإهمال المتعمد في استعمال المواد بغرض إيقاع الضرر' },\n { label: 'تعريض مكان العمل وممتلكات الشركة للخطر نتيجة للإهمال المتعمد في العمل' },\n { label: 'استخدامك ممتلكات الشركة لأغراض خاصة' },\n { label: 'عدم إطاعة تعليمات وتوجيهات المدير المسؤول' },\n { label: 'الامتناع عن العمل بدون مبرر' },\n { label: 'اختلاق المشاجرات والنزاعات مع الموظفين خلال أوقات العمل' },\n { label: 'تجاوزك للصلاحيات الممنوحة لك' },\n { label: 'إخفاء معلومات خاصة بالشركة بقصد الإضرار بمصلحة العمل' },\n ],\n otherOption:{\n label: \"سبب أخر\"\n }\n },\n recidiveConsequence:{\n type: 'string',\n label: 'الإجراء المتخذ في حال تكرار المخالفة',\n permissions: 'fillFirst',\n },\n },\n layout:[\n {\n type: 'section',\n label: 'معلومات الموظف',\n children: [\n 'employee',\n 'job',\n 'unit'\n ]\n },\n {\n type: 'section',\n label: 'معلومات المخالفة',\n children:[\n 'date',\n 'infraction',\n 'recidiveConsequence',\n ]\n },\n ],\n views:{\n list: {\n title: 'قائمة الإنذارات',\n requiredFields: ['employee', 'date', 'createdAt'],\n columns: [\n\n {\n name: \"الموظف\",\n selector: ({ employee }) => employee ? employee?.fullname : '(غير محدد)',\n searchable: true,\n sortable: true,\n },\n {\n name: \"تاريخ المخالفة\",\n selector: ({ date }) => date,\n searchable: true,\n sortable: true,\n },\n {\n name: \"تاريخ الإرسال\",\n selector: ({ createdAt }) => createdAt,\n searchable: true,\n sortable: true,\n },\n ],\n },\n add: {\n title: 'خطاب إنذار جديد',\n }, \n view: {\n title: 'خطاب إنذار'\n }\n }\n};\n\nexport default new Form(WarningLetter);\n","import { Box, FormControl, InputLabel, MenuItem, Select, Typography } from \"@material-ui/core\";\nimport { useField } from \"formik\";\nimport TextField from \"./TextField\";\n\nexport default function SelectField({\n // field properties\n name,\n label,\n edit,\n required,\n options,\n otherOption,\n // data properties\n touched,\n error,\n value,\n handleChange,\n}) {\n const selectedOption = value === 'other' ? otherOption : options.find((_, index) => value === String(index+1));\n const [props] = useField(`${name}__details`);\n if (!edit) {\n return (\n \n {label && {label}:}\n \n {selectedOption ? selectedOption.label : '(غير محدد)'}\n {props.value}\n \n \n );\n } else {\n return (\n\n \n\n \n {label}\n \n { options.map((option, index) => ) }\n { otherOption && }\n \n \n { selectedOption && selectedOption.details && }\n \n );\n }\n}\n","import BusinessPlan from \"./BusinessPlan\";\nimport ComplaintAboutSuperior from \"./ComplaintAboutSuperior\";\nimport EmployeeAbsence from \"./EmployeeAbsence\";\nimport EventPlan from \"./EventPlan\";\nimport MeetingSchedule from \"./MeetingSchedule\";\nimport ProjectSheet from \"./ProjectSheet\";\nimport Suggestion from \"./Suggestion\";\nimport TrainingProgram from \"./TrainingProgram\";\nimport TripFinancialEstimation from \"./TripFinancialEstimation\";\nimport TripOrMeetingReport from \"./TripOrMeetingReport\";\nimport WarningLetter from \"./WarningLetter\";\n\nexport {\n EmployeeAbsence,\n WarningLetter,\n Suggestion,\n ComplaintAboutSuperior,\n BusinessPlan,\n TrainingProgram,\n EventPlan,\n TripFinancialEstimation,\n MeetingSchedule,\n TripOrMeetingReport,\n ProjectSheet,\n};\n\nconst forms = {\n EmployeeAbsence,\n WarningLetter,\n Suggestion,\n ComplaintAboutSuperior,\n BusinessPlan,\n TrainingProgram,\n EventPlan,\n TripFinancialEstimation,\n MeetingSchedule,\n TripOrMeetingReport,\n ProjectSheet,\n};\n\nexport default forms;\n","import React, { useContext, useReducer } from \"react\";\nimport { l1 } from \"./local.json\";\nimport {\n Box,\n Button,\n Container,\n makeStyles,\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableRow,\n Typography,\n} from \"@material-ui/core\";\nimport TopBar from \"./common/TopBar\";\nimport { Navigation } from \"../Context\";\nimport { useHistory } from \"react-router-dom\";\nimport ConfirmationDialog, {\n useConfirmationDialog,\n} from \"./common/ConfirmationDialog\";\nimport { BallotOutlined, Group, GroupOutlined, Map, MoneyOutlined } from \"@material-ui/icons\";\nimport { BiDownload } from \"react-icons/bi\";\nimport { BusinessPlan, ComplaintAboutSuperior, EmployeeAbsence, EventPlan, MeetingSchedule, ProjectSheet, Suggestion, TrainingProgram, TripFinancialEstimation, TripOrMeetingReport, WarningLetter } from \"../forms\";\nimport { gql, useQuery } from \"@apollo/client\";\nimport Loading from \"./common/Loading\";\nconst useStyles = makeStyles((theme) => ({\n highOrder: {\n margin: theme.spacing(10, 30),\n },\n headContainer: {\n //margin: theme.spacing(0, 10),\n padding: theme.spacing(2),\n marginBottom: theme.spacing(2),\n border: `1px solid ${theme.palette.grey[100]}`,\n background: `${theme.palette.grey[\"50\"]}30`,\n borderRadius: theme.spacing(2),\n },\n text: {\n color: theme.palette.primary.main,\n fontWeight: 600,\n },\n iconHead: {\n color: \"#44566c\",\n margin: theme.spacing(0, 1),\n },\n container: {\n border: `1px solid ${theme.palette.grey[300]}`,\n borderRadius: theme.spacing(1),\n padding: theme.spacing(1),\n background: \"white\",\n marginBottom: theme.spacing(1),\n },\n avatar: {\n margin: theme.spacing(0, 1),\n },\n nameText: {},\n nameName: {\n color: \"#44566c\",\n },\n menuItem: {\n paddingRight: theme.spacing(10),\n },\n nameTitle: {\n color: \"#44566c\",\n fontSize: theme.spacing(1.4),\n },\n idId: {\n color: \"#8697a8\",\n },\n address: {\n color: \"#44566c\",\n },\n icon: {\n fontSize: theme.spacing(3),\n color: \"#8697a8\",\n marginLeft: theme.spacing(3),\n },\n title: {\n fontSize: theme.spacing(3),\n fontWeight: 600,\n color: theme.palette.grey[700],\n },\n label: {\n marginLeft: theme.spacing(4),\n },\n paper: {\n padding: theme.spacing(3),\n margin: theme.spacing(4),\n },\n}));\n\nconst fileSections = [\n {\n name: \"استمارات الترشح\",\n roles: [\"owner\", \"assistant\"],\n Icon: BallotOutlined,\n files: [\n {\n name: \"استمارة نموذج ترشيح العضوية مركز\",\n type: \"pdf\",\n key: \"memberNomination\"\n },\n {\n name: \"نموذج أسئلة و معايير الترشيح أثناء المقابلة\",\n type: \"pdf\",\n key: \"interviewQuestionsAndCriteria\"\n },\n ],\n },\n {\n name: \"المالية و التسويق\",\n roles: [\"owner\", \"assistant\"],\n Icon: MoneyOutlined,\n files: [\n {\n name: \"تقدير التكاليف المالية\",\n type: \"pdf\",\n key: \"costEstimation\"\n },\n {\n name: \"نموذج خطوات كتابة الخطة التسويقية\",\n type: \"pdf\",\n key: \"sampleMarketingPlan\"\n },\n ],\n },\n {\n name: \"ملفات الموظفين\",\n Icon: GroupOutlined,\n files: [\n {\n name: \"نموذج محضر اجتماع\",\n type: \"pdf\",\n key: \"meetingMinutes\"\n },\n {\n name: \"نموذج عقد عمل\",\n type: \"pdf\",\n key: \"employmentContract\",\n roles: ['admin', 'assistant']\n },\n {\n name: \"نموذج تقييم الاداء الوظيفي\",\n type: \"pdf\",\n key: \"jobPerformanceEvaluation\"\n },\n {\n name: \"ترشيح الموظف للدورة التدريبية\",\n type: \"pdf\",\n key: \"employeeNominationForTraining\",\n roles: ['admin', 'assistant']\n },\n EmployeeAbsence,\n WarningLetter,\n Suggestion,\n ComplaintAboutSuperior,\n ],\n },\n {\n name: \"الخطط\",\n Icon: Map,\n files: [\n BusinessPlan,\n TrainingProgram,\n EventPlan,\n TripFinancialEstimation,\n MeetingSchedule,\n TripOrMeetingReport,\n ProjectSheet,\n ],\n },\n];\n\nconst QUERY_FORMS = gql`\nquery{\n form{\n memberNomination {file {url}}\n interviewQuestionsAndCriteria{file {url}}\n costEstimation{file {url}}\n sampleMarketingPlan{file {url}}\n meetingMinutes{file {url}}\n employmentContract{file {url}}\n jobPerformanceEvaluation{file {url}}\n employeeNominationForTraining{file {url}}\n }\n}\n`\nexport default function Files() {\n const {loading, data, error} = useQuery(QUERY_FORMS,{});\n //Apollo\n return (\n error ? 'ERROR'\n : loading ? \n : <>\n \n\n \n \n \n الملفات\n \n {fileSections.map((section, index) => (\n \n ))}\n \n \n \n );\n}\n\nfunction FileSection({ section: { name, Icon, files}, data }) {\n const forms = data.form;\n const history = useHistory();\n return (\n \n \n \n \n {name}\n \n \n \n \n اسم الملف\n النوع\n خيارات\n \n \n \n {files.map((file, index) => (\n \n {file?.name}\n {l1[file.type] ?? file.type}\n \n {file.type !== \"form\" ? (\n forms?.[file.key]?.file?.url\n ? \n {l1.download}\n \n : غير متوفر\n ) : (\n history.push(file.routes.list.path)}\n >\n تفاصيل\n \n )}\n \n \n ))}\n \n
\n \n );\n}\n","import React from \"react\";\n// import { Row } from \"antd\";\nimport \"./Styling.scss\";\n// import bg1 from './assets/img/bg1.png';\nimport { useHistory } from 'react-router-dom';\nexport default function ActivityCard({\n title = \"\",\n cover = \"\",\n description = \"\",\n url = \"\"\n}) {\n const history = useHistory();\n return (\n \n \n \n
{\n history.push(url);\n }}\n style={{ textDecoration: \"none\", cursor: \"pointer\" }}\n >\n {title}
\n \n {description}
\n
\n \n {centerEvent?.title}\n \n \n نشر بتاريخ {date}\n \n \n
\n \n {\n history.push('/events')\n }}\n endIcon={}\n >\n العودة الى النشاطات\n \n \n \n \n \n \n );\n}\n","export default __webpack_public_path__ + \"static/media/bg1.8a118507.png\";","export default __webpack_public_path__ + \"static/media/default.27ee7586.png\";","import React, { useState, useContext, useEffect } from \"react\";\nimport {\n Facebook,\n Instagram,\n YouTube,\n LinkedIn,\n Twitter\n} from \"@material-ui/icons/\";\nimport ArrowBackIcon from \"@material-ui/icons/ArrowBack\"\nimport ActivityCard from \"./rel/Landing/ActivityCard\";\nimport { gql, useLazyQuery } from \"@apollo/client\";\nimport Loading from \"./common/Loading\";\nimport { useHistory } from 'react-router-dom';\nimport { Navigation } from \"../Context\";\nimport logo from \"./rel/Landing/assets/img/ONTWNC1-11.png\";\nimport bg from \"./rel/Landing/assets/img/image-slider.png\";\nimport bg1 from \"./rel/Landing/assets/img/bg1.png\";\nimport defasult from \"./rel/Landing/assets/img/default.png\";\nimport { Typography, Container, Button, Grid } from \"@material-ui/core\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport { ThemeProvider, createTheme } from \"@material-ui/core/styles\";\nimport CssBaseline from \"@material-ui/core/CssBaseline\";\nimport { RequireAuthentication } from \"../Auth/gates\";\n\nconst theme = createTheme({\n palette: {\n primary: {\n main: \"#002366\"\n },\n secondary: {\n main: \"#b23434\"\n }\n },\n typography: {\n fontFamily: ['\"Open Sans\"', \"Cairo\", \"Roboto\"].join(\",\"),\n h1: {\n fontSize: \"40px\"\n }\n },\n});\nconst useStyles = makeStyles(theme => ({\n title: {\n fontSize: \"50px\",\n padding: theme.spacing(4, 0, 6)\n // fontFamily: \"Helvetica\"\n },\n buttonPrimary: {\n color: theme.primary\n },\n buttonSecondary: {\n color: theme.secondary\n },\n login: {\n padding: theme.spacing(2, 4, 2),\n fontSize: \"18px;\",\n color: theme.primary\n },\n item: {\n marginBottom: theme.spacing(3)\n },\n eventTitle: {\n margin: theme.spacing(4, 0),\n textAlign: \"left\"\n },\n eventsContainer: {\n marginBottom: theme.spacing(20)\n }\n}));\n\nconst GET_INTERFACE = gql`\n query GetInterface($subdomain: String!, $limit: Int!) {\n centersLists(where: { subdomain: $subdomain }) {\n events(sort: \"createdAt:desc\", limit: $limit) {\n id\n title\n excerpt\n image {\n url\n }\n }\n info {\n logo {\n url\n }\n name\n }\n }\n }\n`;\nexport default function FrontEvents() {\n const { sub } = useContext(Navigation);\n const classes = useStyles(theme);\n const [loading, setLoading] = useState(false);\n const [events, setEvents] = useState(() => []);\n const [limit, setLimit] = useState(4);\n const history = useHistory();\n\n const [getEvents, { loading: loadingEvents, data }] = useLazyQuery(\n GET_INTERFACE,\n {\n onError: err => console.log(\"err get interface\", err),\n onCompleted: data => {\n console.log(\"get Events completed\");\n setEvents(data.centersLists[0]?.events);\n setLoading(false);\n }\n }\n );\n\n const center = data?.centersLists[0]?.info;\n const centerLogo = center?.logo\n ? `url(${process.env.REACT_APP_STRAPI_URL}${center?.logo?.url})`\n : `url(${logo})`;\n const loadMore = () => {\n setLoading(true);\n getEvents({ variables: { subdomain: sub, limit: limit } });\n };\n\n useEffect(() => {\n loadMore();\n }, [limit]);\n // if (firstLoading) return ;\n return (\n <>\n \n \n \n \n \n \n {center?.name}\n \n\n
\n {\n history.push('/')\n }}\n endIcon={}\n style={{ float: \"left\" }}\n >\n العودة الى الرئيسية\n \n \n {\" \"}\n نشاطات المركز\n \n \n {console.log(\"events\", events)}\n {events &&\n events.map((centerEvent, index) => {\n return (\n \n \n \n );\n })}\n \n {\n setLimit(limit + 4);\n }}\n >\n {loading ? \"تحميل...\" : \"حمل المزيد\"}\n \n \n \n \n \n \n );\n}\n","import React from 'react';\n\n// Material-UI\nimport { makeStyles, Typography, Box, Link } from '@material-ui/core';\nimport { l1 } from '../local.json';\nimport { gql, useQuery } from '@apollo/client';\nimport moment from 'moment';\n// Styles\nconst useStyles = makeStyles((theme) => ({\n contentContainer: {\n margin: theme.spacing(2),\n },\n contentLink: {\n fontSize: theme.spacing(1.4),\n cursor: 'pointer',\n color: theme.palette.common.black,\n '&:hover': {\n color: theme.palette.primary.main,\n },\n },\n contentTitle: {\n color: theme.palette.grey[600],\n },\n}));\nconst QUERY_TOMORROW_DUE = gql`\n query TomorrowDue($id: ID!, $due: Date!) {\n classes(where: { id: $id }) {\n assignments(where: { due: $due }) {\n id\n due\n title\n }\n }\n }\n`;\n\nfunction Due({ id, slug }) {\n const { data } = useQuery(QUERY_TOMORROW_DUE, {\n variables: { id, due: moment().add(1, 'days').format('YYYY-MM-DD') },\n });\n const classes = useStyles();\n const due = data?.classes[0]?.assignments;\n return due?.length ? (\n \n \n {l1.dueTomorrow}\n \n {due.map(({ id, title }) => (\n \n {title}\n \n ))}\n \n ) : null;\n}\n\nexport default Due;\n","import React, { useContext, useReducer, useRef, useState } from \"react\";\nimport {\n Box,\n Typography,\n makeStyles,\n Divider,\n Menu,\n MenuItem,\n Dialog,\n DialogTitle,\n DialogActions,\n DialogContent,\n TextField,\n Button\n} from \"@material-ui/core\";\n\n// Icons\nimport { MdTrendingUp, MdFolderOpen } from \"react-icons/md\";\nimport { BiDotsVerticalRounded } from \"react-icons/bi\";\nimport Due from \"./Due\";\nimport { l1 } from \"../local.json\";\nimport { Link } from \"react-router-dom\";\nimport { gql, useMutation } from \"@apollo/client\";\nimport { ClassAnchor, Navigation } from \"../../Context\";\nimport Loading from \"./Loading\";\nimport { RequireClassAccess } from \"../../../src/Auth/gates\";\nconst useStyles = makeStyles(theme => ({\n root: {\n height: theme.spacing(40),\n backgroundColor: \"#fff\",\n border: \"1px solid #dadce0\",\n borderRadius: theme.spacing(1.5),\n margin: theme.spacing(0, 3, 6, 3)\n },\n backgroundContainer: {\n height: theme.spacing(13),\n borderTopLeftRadius: theme.spacing(1.5),\n borderTopRightRadius: theme.spacing(1.5),\n backgroundImage: 'url(\"https://gstatic.com/classroom/themes/Physics.jpg\")',\n backgroundSize: \"cover\"\n },\n background: {\n height: \"inherit\"\n },\n optionContainer: {},\n optionIcon: {\n color: \"white\",\n fontSize: theme.spacing(3),\n margin: theme.spacing(2, 2, 1, 0.5),\n cursor: \"pointer\"\n },\n titleContainer: {\n width: \"min-content\",\n margin: theme.spacing(2),\n flex: 1\n },\n cardTitle: {\n textDecoration: \"none\",\n color: theme.palette.common.white\n },\n dueContainer: { flexGrow: 1, padding: 0 },\n bottom: {\n height: \"min-content\",\n fontSize: theme.spacing(3),\n margin: theme.spacing(1),\n \"& > *\": {\n margin: theme.spacing(0, 1.5),\n color: theme.palette.grey[700]\n }\n },\n options: {\n fontSize: theme.spacing(3.3),\n margin: theme.spacing(2),\n cursor: \"pointer\",\n color: \"white\"\n },\n menuItem: {\n paddingRight: theme.spacing(10)\n },\n muiAlert: {\n width: \"max-content\"\n }\n}));\n\nconst EDIT_CLASS = gql`\n mutation EditClass(\n $name: String!\n $section: String\n $slug: String!\n $subject: String\n $room: String\n $id: ID!\n ) {\n updateClass(\n input: {\n where: { id: $id }\n data: {\n name: $name\n section: $section\n slug: $slug\n subject: $subject\n room: $room\n }\n }\n ) {\n class {\n name\n section\n slug\n }\n }\n }\n`;\n\nconst CLONE_CLASS = gql`\n mutation CreateClass(\n $name: String!\n $section: String!\n $subject: String!\n $slug: String!\n $center: ID!\n ) {\n createClass(\n input: {\n data: {\n name: $name\n section: $section\n subject: $subject\n slug: $slug\n center: $center\n }\n }\n ) {\n class {\n name\n id\n section\n slug\n isArchived\n center {\n id\n }\n }\n }\n }\n`;\n\nconst ARCHIVE_CLASS = gql`\n mutation ArchiveClass($id: ID!) {\n updateClass(input: { where: { id: $id }, data: { isArchived: true } }) {\n class {\n isArchived\n }\n }\n }\n`;\n\nconst ClassCard = ({ classData, refetch, alert, failure }) => {\n const { centerId } = useContext(Navigation);\n\n // Apollo\n const [editClass, { loading: loadingEditClass }] = useMutation(EDIT_CLASS, {\n onError: () => failure(l1.failure),\n onCompleted: () => {\n refetch();\n alert(l1.editsuccess);\n }\n });\n const [cloneClass, { loading: loadingCloneClass }] = useMutation(\n CLONE_CLASS,\n {\n onError: () => failure(l1.failure),\n onCompleted: data => {\n console.log(\"class clone\", data);\n refetch();\n alert(l1.clonesuccess);\n }\n }\n );\n const [archiveClass, { loading: loadingArchiveClass }] = useMutation(\n ARCHIVE_CLASS,\n {\n onError: () => failure(l1.failure),\n onCompleted: () => {\n refetch();\n alert(l1.archivesuccess);\n }\n }\n );\n // Edit Class Dialog Logic\n const [editClassState, reverseEditClassState] = useReducer(\n state => !state,\n false\n );\n // Clone Class Dialog Logic\n const [cloneClassState, reverseCloneClassState] = useReducer(\n state => !state,\n false\n );\n // Edit & clone Class Mutation Logic\n const [name, setName] = useState(classData.name);\n const nameRef = useRef();\n const [section, setSection] = useState(classData.section);\n const sectionRef = useRef();\n const [subject, setSubject] = useState(classData.subject);\n const subjectRef = useRef();\n\n const [slug, setSlug] = useState(classData.slug);\n const slugRef = useRef();\n\n // Options Menu Logic\n const [anchorEl, setAnchorEl] = useState(null);\n const openMenu = event => {\n setAnchorEl(event.currentTarget);\n };\n const closeMenu = () => {\n setAnchorEl(null);\n };\n\n // Confirmation Dialog Logic\n const [confirmationState, reverseConfirmationState] = useReducer(\n state => !state,\n false\n );\n\n const { setClassAnchor } = useContext(ClassAnchor);\n const classes = useStyles();\n return loadingEditClass || loadingCloneClass || loadingArchiveClass ? (\n \n ) : (\n setClassAnchor(classData.id)}\n >\n \n \n \n \n {classData.name}\n \n \n\n \n {classData.section}\n \n \n \n \n \n \n \n \n {l1.edit}\n \n \n {l1.clone}\n \n \n {l1.archive}\n \n \n \n \n \n \n \n \n \n \n \n \n {/* //Edit Class //////////////////////////////////////////////////////// */}\n \n {`${l1.edit} ${name}`}\n \n {\n setName(nameRef.current.value);\n }}\n />\n {\n setSlug(slugRef.current.value);\n console.log(\"slug\", slugRef.current.value);\n }}\n />\n {\n setSection(sectionRef.current.value);\n }}\n />\n {\n setSubject(subjectRef.current.value);\n }}\n />\n \n \n {\n editClass({\n variables: {\n id: classData.id,\n name,\n section,\n subject,\n slug\n }\n });\n\n reverseEditClassState();\n }}\n >\n {l1.edit}\n \n \n \n \n\n {/* //Clone Class //////////////////////////////////////////////////////// */}\n \n {`${l1.clone} ${name}`}\n \n {\n setName(nameRef.current.value);\n }}\n />\n {\n setSlug(slugRef.current.value);\n }}\n />\n {\n setSection(sectionRef.current.value);\n }}\n />\n {\n setSubject(subjectRef.current.value);\n }}\n />\n \n \n {\n cloneClass({\n variables: {\n center: centerId,\n name,\n section,\n subject,\n slug\n }\n });\n\n reverseCloneClassState();\n }}\n >\n {l1.clone}\n \n \n \n \n\n \n \n );\n};\n\nexport default ClassCard;\n","import React from \"react\";\nimport { makeStyles, Button, Typography, Container } from \"@material-ui/core\";\nimport { l1 } from \"../local.json\";\nimport { BiCalendarAlt } from \"react-icons/bi\";\nimport { BsCardChecklist } from \"react-icons/bs\";\nimport { useHistory } from 'react-router-dom';\nimport { RequireTeacherAccess } from \"../../../src/Auth/gates\";\nconst useStyles = makeStyles(theme => ({\n root: {\n margin: theme.spacing(2, 0)\n },\n topButtonIcon: {\n color: theme.palette.grey[700]\n },\n topButtonTypography: {\n color: theme.palette.primary.light,\n fontWeight: 600\n }\n}));\nfunction TopSection() {\n const history = useHistory();\n const classes = useStyles();\n return (\n \n }\n style={{ textTransform: \"none\" }}\n onClick={() => history.push(\"/calendar\")}\n >\n \n {l1.calendar}\n \n \n \n }\n style={{ textTransform: \"none\" }}\n onClick={() => history.push(\"/review\")}\n >\n \n {l1.toReview}\n \n \n \n \n );\n}\n\nexport default TopSection;\n","import React, { useState, useContext } from \"react\";\nimport ClassCard from \"./common/ClassCard\";\nimport TopSection from \"./common/TopSection\";\nimport { Grid, makeStyles, Snackbar } from \"@material-ui/core\";\nimport TopBar from \"./common/TopBar\";\nimport { gql, useQuery } from \"@apollo/client\";\nimport Loading from \"./common/Loading\";\nimport MuiAlert from \"@material-ui/lab/Alert\";\nimport { Navigation } from \"../Context\";\nimport { RequireClassAccess } from \"../../src/Auth/gates\";\nconst useStyles = makeStyles(theme => ({}));\nconst QUERY_CLASSES = gql`\n query QueryClasses($centerId: ID!) {\n centersList(id: $centerId) {\n classes {\n id\n name\n section\n slug\n subject\n room\n isArchived\n }\n }\n }\n`;\n\nfunction Home() {\n const { centerId } = useContext(Navigation);\n\n //QUERY CLASS\n const { loading, data: dataQueryClass, refetch } = useQuery(QUERY_CLASSES, {\n onError: error => console.log(\"QueryClassError: \", error),\n notifyOnNetworkStatusChange: true,\n variables: {\n centerId\n }\n });\n const classes = useStyles();\n // Alert Logic\n const [alertSuccess, setAlertSuccess] = useState(false);\n const [alertFailure, setAlertFailure] = useState(false);\n\n return (\n <>\n {loading ? (\n \n ) : (\n <>\n setAlertSuccess(content)}\n failure={content => setAlertFailure(content)}\n />\n \n \n {dataQueryClass.centersList.classes.map(item => {\n if (item.isArchived === true) return null;\n return (\n \n \n setAlertSuccess(c)}\n failure={c => setAlertFailure(c)}\n />\n \n \n );\n })}\n \n {\n setAlertSuccess(false);\n }}\n autoHideDuration={3000}\n >\n \n {alertSuccess}\n \n \n {\n setAlertFailure(false);\n }}\n >\n \n {alertFailure}\n \n \n \n )}\n \n );\n}\n\nexport default Home;\n","export default __webpack_public_path__ + \"static/media/user.default.0e48206d.jpg\";","import React from \"react\";\nimport { TwitterOutlined, InstagramOutlined } from \"@ant-design/icons\";\nimport { Avatar, Box, Paper } from \"@material-ui/core\";\nimport \"./Styling.scss\";\nimport HighlightOff from \"@material-ui/icons/HighlightOff\";\nimport { useHistory } from \"react-router\";\nimport defaultAvatar from \"./assets/img/user.default.jpg\";\n\nexport default function MemberCard({\n index,\n deleteMember,\n picture,\n name,\n role,\n twitter,\n instagram,\n facebook,\n}) {\n const history = useHistory();\n\n // console.log(picture);\n return (\n \n {history.location.pathname === \"/\" ? null : (\n deleteMember(index)}\n />\n )}\n \n {picture ? (\n \n ) : (\n \n )}\n {name}\n {role}
\n \n {Boolean(instagram) &&\n
\n \n \n }\n { Boolean(facebook) &&\n
\n \n \n \n \n }\n { Boolean(twitter) &&\n
\n \n \n }\n
\n
{\n //inactive\n if (carouselIndex.members + 1 > 4) {\n Memberscarousel.current.goTo(0);\n setcarouselIndex({ ...carouselIndex, members: 1 });\n } else {\n Memberscarousel.current.slideNext();\n setcarouselIndex({\n ...carouselIndex,\n members: carouselIndex.members + 1,\n });\n }\n }}\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 16 16\"\n className=\"bi bi-chevron-right arrow\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n \n \n Memberscarousel.current.slidePrev()}\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 16 16\"\n className=\"bi bi-chevron-left arrow\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n \n \n \n \n إضافة عضو جديد\n \n {/* \n إضافة عضو جديد\n */}\n
\n )}\n\n \n \n );\n}\n","export default __webpack_public_path__ + \"static/media/center.default.a97a5edb.jpg\";","import React, { useState, createRef, useContext } from \"react\";\nimport { Row, Col } from \"antd\";\nimport Carousel from \"react-elastic-carousel\";\nimport SmsFailedIcon from \"@material-ui/icons/SmsFailed\";\nimport {\n Facebook,\n Instagram,\n YouTube,\n LinkedIn,\n Twitter\n} from \"@material-ui/icons/\";\nimport ActivityCard from \"./rel/Landing/ActivityCard\";\nimport Gallery from \"react-grid-gallery\";\nimport ListMembers from \"./rel/Landing/ListMembers\";\nimport { gql, useQuery } from \"@apollo/client\";\nimport Loading from \"./common/Loading\";\nimport { useHistory } from 'react-router-dom';\nimport { Navigation } from \"../Context\";\nimport logo from \"./rel/Landing/assets/img/center.default.jpg\";\nimport bg from \"./rel/Landing/assets/img/image-slider.png\";\nimport defaultImg from \"./rel/Landing/assets/img/default.png\";\nimport {\n Typography,\n Container,\n Button,\n Modal,\n Box,\n Link,\n Chip\n} from \"@material-ui/core\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport { ThemeProvider, createTheme } from \"@material-ui/core/styles\";\nimport CssBaseline from \"@material-ui/core/CssBaseline\";\nimport { RequireAuthentication, RequireCenterAdmin, RequireCenterMembership } from \"../Auth/gates\";\n\nconst theme = createTheme({\n palette: {\n primary: {\n main: \"#002366\"\n },\n secondary: {\n main: \"#b23434\"\n }\n },\n typography: {\n fontFamily: ['\"Open Sans\"', \"Cairo\", \"Roboto\"].join(\",\"),\n h1: {\n fontSize: \"40px\"\n }\n }\n});\nconst useStyles = makeStyles(theme => ({\n title: {\n fontSize: \"50px\",\n padding: theme.spacing(8, 0, 6)\n },\n buttonPrimary: {\n color: theme.primary\n },\n buttonSecondary: {\n color: theme.secondary\n },\n login: {\n padding: theme.spacing(2, 4, 2),\n fontSize: \"18px;\",\n color: theme.primary\n },\n modalBox: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n width: 400,\n backgroundColor: \"white\",\n border: \"2px solid #000\",\n boxShadow: 24,\n p: 4\n }\n}));\nconst DefaultImages = [\n {\n src: \"https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg\",\n thumbnail:\n \"https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg\",\n thumbnailWidth: 320,\n thumbnailHeight: 174,\n caption: \"عنوان الصورة\"\n },\n {\n src: \"https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_b.jpg\",\n thumbnail:\n \"https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_n.jpg\",\n thumbnailWidth: 320,\n thumbnailHeight: 183,\n caption: \"عنوان الصورة\"\n },\n {\n src: \"https://c7.staticflickr.com/9/8106/28941228886_86d1450016_b.jpg\",\n thumbnail:\n \"https://c7.staticflickr.com/9/8106/28941228886_86d1450016_n.jpg\",\n thumbnailWidth: 271,\n thumbnailHeight: 320,\n caption: \"عنوان الصورة\"\n },\n {\n src: \"https://c6.staticflickr.com/9/8342/28897193381_800db6419e_b.jpg\",\n thumbnail:\n \"https://c6.staticflickr.com/9/8342/28897193381_800db6419e_n.jpg\",\n thumbnailWidth: 320,\n thumbnailHeight: 213,\n caption: \"عنوان الصورة\"\n },\n {\n src: \"https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_b.jpg\",\n thumbnail:\n \"https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_n.jpg\",\n thumbnailWidth: 320,\n thumbnailHeight: 213,\n caption: \"عنوان الصورة\"\n },\n {\n src: \"https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_b.jpg\",\n thumbnail:\n \"https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_n.jpg\",\n thumbnailWidth: 320,\n thumbnailHeight: 213,\n caption: \"عنوان الصورة\"\n },\n {\n src: \"https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_b.jpg\",\n thumbnail:\n \"https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_n.jpg\",\n thumbnailWidth: 320,\n thumbnailHeight: 213,\n caption: \"عنوان الصورة\"\n },\n {\n src: \"https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_b.jpg\",\n thumbnail:\n \"https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_n.jpg\",\n thumbnailWidth: 257,\n thumbnailHeight: 320,\n caption: \"عنوان الصورة\"\n }\n];\n\nconst GET_INTERFACE = gql`\n query GetInterface($subdomain: String!) {\n centersLists(where: { subdomain: $subdomain }) {\n events {\n id\n title\n excerpt\n image {\n url\n }\n }\n info {\n openToRegistration\n logo {\n url\n }\n name\n vision\n message\n values {\n name\n content\n }\n gallery {\n name\n caption\n width\n height\n url\n }\n video\n description\n alertSignup\n contact {\n address\n email\n phoneNumbers {\n id\n number\n }\n }\n socialMediaLinks {\n facebook\n twitter\n linkedin\n instagram\n youtube\n }\n teamMember {\n picture {\n url\n }\n fullName\n role\n picture {\n id\n }\n facebook\n instagram\n twitter\n }\n }\n }\n }\n`; export default function Landing() {\n const [open, setOpen] = React.useState(false);\n const handleOpen = () => setOpen(true);\n const handleClose = () => setOpen(false);\n const classes = useStyles(theme);\n const { sub } = useContext(Navigation);\n const history = useHistory();\n const { loading, data } = useQuery(GET_INTERFACE, {\n onError: err => console.log(\"err get interface\", err),\n variables: {\n subdomain: sub\n },\n onCompleted: () => {\n console.log(\"loading completed\");\n }\n });\n const breakPoints = [\n { width: 1, itemsToShow: 1 },\n { width: 550, itemsToShow: 2, itemsToScroll: 2 },\n { width: 768, itemsToShow: 3 },\n { width: 1200, itemsToShow: 4 }\n ];\n\n\n const carouselActivities = createRef();\n const [carouselIndex, setcarouselIndex] = useState(0);\n const center = data?.centersLists[0]?.info;\n const events = data?.centersLists[0]?.events;\n const centerLogo = center?.logo\n ? `url(${process.env.REACT_APP_STRAPI_URL}${center?.logo?.url})`\n : `url(${logo})`;\n const IMAGES = (center?.gallery || DefaultImages).map(image => {\n if (image.url)\n return {\n src: `${process.env.REACT_APP_STRAPI_URL}${image.url}`,\n thumbnail: `${process.env.REACT_APP_STRAPI_URL}${image.url}`,\n width: 'auto',\n };\n\n return {\n src: image.src,\n thumbnail: image.thumbnail,\n width: 'auto',\n }\n });\n if (!loading)\n return (\n \n \n \n {center?.name}\n \n\n
\n\n \n \n {\" \"}\n \n (window.location.href = `${process.env.REACT_APP_ACCOUNTS_URL}/?center&redirect_to=${window.location.href}`)\n }\n // style={{ color: \"white\", cursor: \"pointer\" }}\n >\n دخول\n \n \n (window.location.href = `${process.env.REACT_APP_ACCOUNTS_URL}/register/?center&redirect_to=${window.location.href}`)\n }\n // style={{ color: \"white\", cursor: \"pointer\" }}\n >\n انضم إلينا\n {\" \"}\n \n }\n >\n \n history.push(\"/home\")}\n className={classes.login}\n >\n الالتحاق بالصفوف\n \n \n \n \n \n \n \n \n \n {\n center.openToRegistration\n ? {\n history.push('/request-membership')\n }}\n >\n الالتحاق بالصفوف\n \n : \n }\n \n \n
\n \n \n \n \n الرؤية\n \n \n {center?.vision}\n \n {/* {center.vision}
*/}\n \n \n \n الرسالة\n \n \n {center?.message}\n \n \n\n \n \n القيم\n \n {center?.values.map(({ name, content }, index) => (\n \n {name} :\n {content}\n
\n ))}\n \n
\n \n \n \n {center?.description}\n \n \n
\n\n \n {\n !open\n ? \n \n \n \n \n : \n }\n \n\n {\n center.openToRegistration &&\n \n
\n تم فتح باب التسجيل{\" \"}\n
\n
{center?.alertSignup}
\n
\n \n
\n
\n \n أحدث النشاطات\n \n
\n \n\n \n
{\n if (carouselIndex.courses + 1 > 4) {\n carouselActivities.current.goTo(0);\n setcarouselIndex({ ...carouselIndex, courses: 1 });\n } else {\n carouselActivities.current.slideNext();\n setcarouselIndex({\n ...carouselIndex,\n courses: carouselIndex.courses + 1\n });\n }\n }}\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 16 16\"\n className=\"bi bi-chevron-right arrow\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n \n \n {\n if (carouselIndex.courses - 1 < 1) {\n carouselActivities.current.goTo(4);\n setcarouselIndex({ ...carouselIndex, courses: 4 });\n } else {\n carouselActivities.current.slidePrev();\n setcarouselIndex({\n ...carouselIndex,\n courses: carouselIndex.courses - 1\n });\n }\n }}\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 16 16\"\n className=\"bi bi-chevron-left arrow\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n \n \n \n
معرض الصور
\n
\n \n \n \n
\n \n \n\n \n \n
معلومات الإتصال
\n
\n \n\n \n \n العنوان
\n {center?.contact?.address}
\n الايميل
\n {center?.contact?.email}
\n\n أرقام الهواتف
\n {center?.contact?.phoneNumbers?.map(({ id, number }) => {\n return (\n \n {number}\n
\n );\n })}\n \n {\n Object.values(center?.socialMediaLinks).some(Boolean) &&\n \n مواقع التواصل
\n \n {center?.socialMediaLinks?.youtube &&\n \n \n \n }\n {center?.socialMediaLinks?.twitter &&\n \n \n \n }\n {center?.socialMediaLinks?.linkedin &&\n \n \n \n }\n {center?.socialMediaLinks?.instagram &&\n \n \n \n }\n {center?.socialMediaLinks?.facebook &&\n \n \n \n }\n
\n \n }\n
\n \n \n \n \n \n );\n return ;\n}\n\nfunction youtubeEmbedUrl(input) {\n function parseYoutubeVideoID(input) {\n var regExp = /^.*((youtu.be\\/)|(v\\/)|(\\/u\\/\\w\\/)|(embed\\/)|(watch\\?))\\??v?=?([^#&?]*).*/;\n var match = input.match(regExp);\n return (match && match[7].length == 11) ? match[7] : input;\n }\n return `https://www.youtube.com/embed/${parseYoutubeVideoID(input)}`\n}","import React, {useState, useReducer} from 'react'\nimport Quiz, {QuizModes} from './Quiz';\nimport {\n Grid, Box, Button, Typography,\n Dialog, DialogTitle, DialogContent, DialogActions,\n Divider,\n} from '@material-ui/core';\nimport TopBar from './common/TopBar';\nimport {useParams} from 'react-router-dom';\nimport { gql, useQuery, useMutation } from '@apollo/client';\nimport {l1} from './local.json';\nimport Loading from './common/Loading';\n\nconst GET_QUIZ = gql`\n query Quiz($id: ID!) {\n quiz(id: $id) {\n title\n description\n instructions\n questions\n correctAnswers\n }\n }\n`;\n\nconst UPDATE_QUIZ = gql`\n mutation UpdateQuiz($id: ID!, $title: String!, $description: String, $instructions: JSON, $questions: JSON, $correctAnswers: JSON) {\n updateQuiz(\n input: {\n where: { id: $id }\n data: {\n title: $title\n description: $description\n instructions: $instructions\n questions: $questions\n correctAnswers: $correctAnswers\n }\n }) \n {\n quiz {\n title,\n description,\n instructions\n questions\n correctAnswers\n }\n }\n }\n`;\n\nconst DELETE_QUIZ = gql`\n mutation DeleteQuiz($id: ID!) {\n deleteQuiz(input: { where: { id: $id } }) {\n quiz {\n id\n title\n }\n }\n }\n`;\n\n\n\nexport default function QuizEditor() {\n const {id} = useParams()\n const [ready, setReady] = useState(false)\n const [quiz, setQuiz] = useState({})\n const [loadingError, setLoadingError] = useState(null)\n const { loading: loadingQuiz} = useQuery(\n GET_QUIZ, \n {\n variables:{\n id\n },\n onError: (error) => console.log('GetQuizError: ', error),\n onCompleted: (data) => {\n console.log('QuizData: ', data)\n setQuiz(data.quiz)\n setSavedQuiz(JSON.parse(JSON.stringify(data.quiz)))\n setReady(true)\n },\n fetchPolicy: 'no-cache',\n }\n );\n \n const [savedQuiz, setSavedQuiz] = useState(JSON.parse(JSON.stringify(quiz)));\n const [close, setClose] = useState(false)\n\n\n const [saveQuiz, { loading: savingQuiz }] = useMutation(\n UPDATE_QUIZ,\n {\n onError: (error) => {\n console.warn('MutationSaveQuiz error: ', error);\n setLoadingError(error)\n },\n onCompleted: (data) => {\n console.log('MutationSaveQuiz data: ', data);\n setSavedQuiz(data.updateQuiz.quiz)\n if(close){\n window.close();\n }\n },\n }\n );\n\n const saveQuizIfModified = ({closeOnFinish}) => {\n console.log(quiz, savedQuiz)\n if (JSON.stringify(quiz) !== JSON.stringify(savedQuiz)){\n saveQuiz(\n {\n variables:{\n id,\n ...quiz\n },\n\n })\n }\n else if (closeOnFinish){\n window.close()\n }\n }\n\n const [deleteConfirmationVisible, toggleDeleteConfirmationVisible] = useReducer((state) => !state, false);\n const [deleteQuiz, { loading: deletingQuiz }] = useMutation(\n DELETE_QUIZ,\n {\n onError: (error) => {\n console.warn('MutationDeleteQuiz error: ', error);\n },\n onCompleted: (data) => {\n console.log('MutationDeleteQuiz data: ', data);\n alert(l1.quizSuccessfullyDeleted)\n window.close()\n },\n }\n );\n\n // TODO: do api calls needed to load the quiz.\n let [quizMode, setQuizMode] = useState(\"EDIT\")\n return (\n ready\n ? \n
\n
\n \n \n \n \n \n \n {savingQuiz ? l1.saving + \"...\" : null}\n \n \n \n \n \n \n \n \n \n {\n true ?\n
\n \n : null\n }\n
\n {iconChanger()}\n \n {type === 'evaluations' && (l1.evaluations + ': ')}{title}\n \n
\n {scope === \"review\"? \"\" : \n \n \n \n }\n \n \n {\n // setEditCommentState(true);\n // console.log(\"edit\");\n // closeComponentMenu();\n history.push(redirect);\n }}\n >\n {l1.edit}\n \n {\n reverseConfirmationState();\n closeComponentMenu();\n // reverseAccordionState();\n }}\n >\n {l1.delete}\n \n \n {\n reverseConfirmationState();\n reverseAccordionState();\n }}\n >\n \n \n \n {l1.confirmation}\n \n \n \n {\n deleteComponent({\n variables: {\n id\n }\n });\n reverseAccordionState();\n window.location.reload(false);\n }}\n >\n {l1.confirm}\n \n {\n reverseConfirmationState();\n reverseAccordionState();\n }}\n >\n {l1.cancel}\n \n \n \n \n \n \n \n \n { type === 'evaluations' && <>\n \n {l1.evaluationsCoach}: {evaluationsInfo.coach}\n \n \n {l1.evaluationsDate}: {evaluationsInfo.date}\n \n \n {l1.evaluationsLocation}: {evaluationsInfo.location}\n \n \n }\n \n {moment(createdAt).fromNow()}\n \n \n \n \n \n {type === \"material\" ? (\n \"\"\n ) : (\n \n \n { type === 'evaluations'\n ? <>\n \n \n {statistics ? statistics.all || '' : 0}\n \n \n {l1.studentCount}\n \n \n \n \n {statistics ? statistics.trainingEvaluations : 0}\n \n \n {l1.trainingEvaluations}\n \n \n \n \n {statistics ? statistics.coachEvaluations : 0}\n \n \n {l1.coachEvaluations}\n \n \n \n \n {statistics ? statistics.studentEvaluations : 0}\n \n \n {l1.studentEvaluations}\n \n \n \n : <>\n \n \n {statistics ? statistics.assigned : 0}\n \n \n {l1.assigned}\n \n \n \n \n {statistics ? statistics.submitted : 0}\n \n \n {l1.handedIn}\n \n \n \n \n {statistics ? statistics.graded : 0}\n \n \n {l1.workgraded}\n \n \n \n }\n \n \n )}\n \n \n {\n history.push(redirect);\n }}\n >\n {l1.moredetails}\n \n \n \n \n \n );\n}\n\nexport default TopicRow;\n","import React, { useState, useReducer, useRef } from \"react\";\nimport {\n Box,\n Divider,\n IconButton,\n makeStyles,\n Typography,\n Menu,\n MenuItem,\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n TextField\n} from \"@material-ui/core\";\nimport { MdAdd } from \"react-icons/md\";\nimport { BiDotsVerticalRounded } from \"react-icons/bi\";\nimport { RequireClassAccess, RequireTeacherAccess } from \"../../../../Auth/gates\";\nimport { l1 } from \"../../../local.json\";\nimport { gql, useMutation } from \"@apollo/client\";\nimport Loading from \"../../../common/Loading\";\n\nconst DELETE_TOPIC = gql`\n mutation DeleteTopic($id: ID!) {\n deleteTopic(input: { where: { id: $id } }) {\n topic {\n id\n }\n }\n }\n`;\nconst UPDATE_TOPIC_NAME = gql`\n mutation updateTopicName($id: ID!, $name: String!) {\n updateTopic(input: { where: { id: $id }, data: { name: $name } }) {\n topic {\n id\n name\n }\n }\n }\n`;\nconst useStyles = makeStyles(theme => ({\n container: {\n margin: theme.spacing(4, 0),\n padding: theme.spacing(2),\n \"&:hover\": {\n borderRadius: theme.spacing(1),\n boxShadow: theme.shadows[1]\n },\n cursor: \"pointer\"\n },\n title: {\n fontSize: theme.spacing(5),\n color: theme.palette.primary.dark,\n paddingLeft: theme.spacing(4)\n },\n options: {\n color: theme.palette.primary.dark,\n fontSize: theme.spacing(3)\n // paddingRight: theme.spacing(4)\n },\n divider: {\n background: theme.palette.primary.main,\n flexGrow: 1,\n margin: theme.spacing(2, 0)\n },\n alert: {\n fontSize: theme.spacing(1.6),\n color: theme.palette.grey[600]\n },\n topicTextFieldContainer: {\n minWidth: \"400px\",\n height: \"150px\"\n }\n}));\n\nfunction TopicSection({\n text,\n children,\n people,\n trigger,\n cid,\n setStudentMode,\n student,\n teacher,\n id,\n scope,\n refetch\n}) {\n const classes = useStyles();\n const [anchorTopic, setAnchorTopic] = useState(null);\n const openDialogTopic = () => {\n console.log(\"open dialog topic\");\n reverseTopicDialogState();\n closeTopicMenu();\n };\n const openTopicMenu = event => {\n console.log(\"open topic menu\", dialogTopicState);\n setAnchorTopic(event.currentTarget);\n };\n const closeTopicMenu = () => {\n console.log(\"close topic menu\", dialogTopicState);\n setAnchorTopic(false);\n };\n const [topicContent, setTopicContent] = useState(null);\n // const topicContentRef = useRef();\n const [updateTopicName, { loading: loadingUpdateTopic }] = useMutation(\n UPDATE_TOPIC_NAME,\n {\n onError: error => {\n console.log(\"update topic error\", error);\n },\n onCompleted: () => {\n console.log(\"Topic updated successfuly\");\n refetch();\n }\n }\n );\n const [dialogTopicState, reverseTopicDialogState] = useReducer(\n state => !state,\n false\n );\n\n const [confirmationState, reverseConfirmationState] = useReducer(\n state => !state,\n false\n );\n const [deleteTopic, { loading: loadingDeleteTopic }] = useMutation(\n DELETE_TOPIC,\n {\n onError: error => {\n console.log(\"mutationDeleteComponent error: \", error);\n // failure(l1.failure);\n },\n onCompleted: () => {\n refetch();\n console.log(\"deleted with success\");\n }\n }\n );\n if (!children)\n return (\n \n \n {text}\n \n \n \n \n \n Empty\n \n );\n if (people)\n return (\n \n \n {text}\n \n {\n if (teacher) setStudentMode(false);\n if (student) setStudentMode(true);\n trigger();\n }}\n >\n \n \n \n \n \n {children}\n \n );\n return (\n \n \n {text}\n {scope === \"review\" ? (\n \"\"\n ) : (\n \n \n \n )}\n\n \n \n\n {\n reverseConfirmationState();\n closeTopicMenu();\n }}\n >\n {l1.deleteTopic}\n \n \n {\n reverseConfirmationState();\n }}\n >\n \n \n \n {l1.confirmation}\n \n \n \n {\n deleteTopic({\n variables: {\n id\n }\n });\n window.location.reload(false);\n reverseConfirmationState();\n }}\n >\n {l1.confirm}\n \n {\n reverseConfirmationState();\n }}\n >\n {l1.cancel}\n \n \n \n \n \n \n {\n setTopicContent(e.target.value);\n }}\n defaultValue={text}\n />\n \n {\n updateTopicName({\n variables: {\n id: id,\n name: topicContent\n }\n });\n }}\n >\n {l1.edit}\n \n \n \n \n \n \n {children}\n \n );\n}\n\nexport default TopicSection;\n","import React, { useContext, useEffect, useState } from \"react\";\nimport {\n Box,\n Button,\n Grid,\n makeStyles,\n Typography,\n Container\n} from \"@material-ui/core\";\n\nimport TopBar from \"./common/TopBar\";\nimport \"moment/locale/ar-dz\";\nimport Loading from \"./common/Loading\";\nimport { useQuery, gql } from \"@apollo/client\";\nimport { l1 } from \"./local.json\";\nimport { useHistory } from 'react-router-dom';\nimport { Navigation } from \"../Context\";\nimport { BiCalendarAlt } from \"react-icons/bi\";\nimport SchoolIcon from \"@material-ui/icons/School\";\nimport TopicRow from \"./rel/class/components/TopicRow\";\nimport TopicSection from \"./rel/class/components/TopicSection\";\nconst QUERY_CLASSWORK = gql`\n query teacherClassworks($id: ID!) {\n classes(where: { teachers: $id , isArchived:false}) {\n id\n slug\n assignments(where: { type_ne: \"material\" }) {\n id\n title\n description\n type\n studentWorks {\n status\n }\n }\n }\n }\n`;\n\nconst useStyles = makeStyles(theme => ({\n Typography: {\n fontFamily: \"Cairo\"\n }\n}));\nfunction Review() {\n const classes = useStyles();\n const history = useHistory();\n const { user } = useContext(Navigation);\n const { loading, data } = useQuery(QUERY_CLASSWORK, {\n variables: { id: user.id },\n onComplete: response => {\n console.log(\"response\", response);\n },\n onError: error => console.log(\"QueryClassworkError: \", error),\n notifyOnNetworkStatusChange: true\n });\n const groupStudentWorks = works => {\n const groups = {\n all: works,\n assigned: works.filter(work => work.status === \"assigned\"),\n submitted: works.filter(work => work.status === \"submitted\"),\n graded: works.filter(work => work.status === \"graded\")\n };\n return {\n statistics: {\n all: works.length,\n assigned: groups.assigned.length,\n submitted: groups.submitted.length,\n graded: groups.graded.length\n },\n groups\n };\n };\n\n console.log(\"data\", data);\n if (loading) return ;\n else {\n const myClasses = data.classes\n // const { assignments, slug } = data.classes;\n return (\n <>\n \n \n \n \n \n \n }\n onClick={() => history.push(\"/calendar\")}\n >\n {l1.calendar}\n \n }\n onClick={() => history.push(\"/home\")}\n >\n الأقسام\n \n \n {!myClasses.length ? (\n \n \n {l1.empty}\n \n \n ) : (\n \n \n امتحانات واسئلة للتصحيح\n \n {\n myClasses.map(\n ({assignments,slug})=>(\n assignments.map(\n ({\n title,\n description,\n type,\n id,\n createdAt,\n studentWorks\n }) => {\n let statistics = groupStudentWorks(studentWorks)\n .statistics;\n let link =\n \"/class/\" + slug + \"/classwork/\" + id + \"/answers\";\n \n return (\n \n );\n }\n ))\n )}\n\n \n )}\n \n \n \n \n \n \n );\n }\n}\n\nexport default Review;\n","export const createImage = url =>\n new Promise((resolve, reject) => {\n const image = new Image();\n image.addEventListener(\"load\", () => resolve(image));\n image.addEventListener(\"error\", error => reject(error));\n image.setAttribute(\"crossOrigin\", \"anonymous\"); // needed to avoid cross-origin issues on CodeSandbox\n image.src = url;\n });\n\nexport function getRadianAngle(degreeValue) {\n return (degreeValue * Math.PI) / 180;\n}\n\n/**\n * Returns the new bounding area of a rotated rectangle.\n */\nexport function rotateSize(width, height, rotation) {\n const rotRad = getRadianAngle(rotation);\n\n return {\n width:\n Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),\n height:\n Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)\n };\n}\n\n/**\n * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop\n */\nexport async function getCroppedImg(\n imageSrc,\n pixelCrop,\n rotation = 0,\n flip = { horizontal: false, vertical: false }\n) {\n const image = await createImage(imageSrc);\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n return null;\n }\n\n const rotRad = getRadianAngle(rotation);\n\n // calculate bounding box of the rotated image\n const { width: bBoxWidth, height: bBoxHeight } = rotateSize(\n image.width,\n image.height,\n rotation\n );\n\n // set canvas size to match the bounding box\n canvas.width = bBoxWidth;\n canvas.height = bBoxHeight;\n\n // translate canvas context to a central location to allow rotating and flipping around the center\n ctx.translate(bBoxWidth / 2, bBoxHeight / 2);\n ctx.rotate(rotRad);\n ctx.scale(flip.horizontal ? -1 : 1, flip.vertical ? -1 : 1);\n ctx.translate(-image.width / 2, -image.height / 2);\n\n // draw rotated image\n ctx.drawImage(image, 0, 0);\n\n // croppedAreaPixels values are bounding box relative\n // extract the cropped image using these values\n const data = ctx.getImageData(\n pixelCrop.x,\n pixelCrop.y,\n pixelCrop.width,\n pixelCrop.height\n );\n\n // set canvas width to final desired crop size - this will clear existing context\n canvas.width = pixelCrop.width;\n canvas.height = pixelCrop.height;\n\n // paste generated rotate image at the top left corner\n ctx.putImageData(data, 0, 0);\n\n // As Base64 string\n // return canvas.toDataURL('image/jpeg');\n\n // As a blob\n // return new Promise((resolve, reject) => {\n // canvas.toBlob((file) => {\n // resolve(URL.createObjectURL(file));\n // }, \"image/jpeg\");\n // });\n return new Promise((resolve, reject) => {\n resolve(canvas.toDataURL(\"image/jpeg\", 0.7));\n });\n}\n\nexport async function getRotatedImage(imageSrc, rotation = 0) {\n const image = await createImage(imageSrc);\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n const orientationChanged =\n rotation === 90 ||\n rotation === -90 ||\n rotation === 270 ||\n rotation === -270;\n if (orientationChanged) {\n canvas.width = image.height;\n canvas.height = image.width;\n } else {\n canvas.width = image.width;\n canvas.height = image.height;\n }\n\n ctx.translate(canvas.width / 2, canvas.height / 2);\n ctx.rotate((rotation * Math.PI) / 180);\n ctx.drawImage(image, -image.width / 2, -image.height / 2);\n\n return new Promise(resolve => {\n canvas.toBlob(file => {\n resolve(URL.createObjectURL(file));\n }, \"image/png\");\n });\n}\n","// To convert dataUrl (which we get from our blob) to a a file object\nexport const dataURLtoFile = (dataurl, filename) => {\n const arr = dataurl.split(\",\");\n const mime = arr[0].match(/:(.*?);/)[1];\n const bstr = atob(arr[1]);\n let n = bstr.length;\n const u8arr = new Uint8Array(n);\n\n while (n--) u8arr[n] = bstr.charCodeAt(n);\n\n return new File([u8arr], filename, { type: mime });\n};\n","import React, { useContext, useRef, useState, useCallback } from \"react\";\nimport {\n Button,\n Slider,\n makeStyles,\n Typography,\n Dialog,\n AppBar,\n Toolbar,\n IconButton,\n Slide,\n Snackbar,\n CircularProgress\n} from \"@material-ui/core\";\nimport MuiAlert from \"@material-ui/lab/Alert\";\nimport Cropper from \"react-easy-crop\";\nimport { getCroppedImg } from \"./utils/cropImage\";\nimport Cookies from \"universal-cookie\";\nimport { ApolloClient, InMemoryCache } from \"@apollo/client\";\nimport { createUploadLink } from \"apollo-upload-client\";\nimport { setContext } from \"@apollo/client/link/context\";\nimport { Navigation } from \"../../Context\";\nimport { gql, useMutation } from \"@apollo/client\";\nimport { dataURLtoFile } from \"./utils/dataURLtoFile\";\nimport CloseIcon from \"@material-ui/icons/Close\";\nimport CloudUploadIcon from \"@material-ui/icons/CloudUpload\";\nimport { l1 } from \"../../components/local.json\";\n\nconst cache = new InMemoryCache();\nconst cookies = new Cookies();\nconst token = cookies.get(\"token\");\nconst uploadLink = createUploadLink({\n uri: process.env.REACT_APP_GRAPHQL_END_POINT\n});\n\nconst authLink = setContext((_, { headers }) => {\n // get the authentication token from local storage if it exists\n // return the headers to the context so httpLink can read them\n return {\n headers: {\n ...headers,\n authorization: token ? `Bearer ${token}` : \"\"\n }\n };\n }),\n client = new ApolloClient({\n cache,\n link: authLink.concat(uploadLink)\n });\nconst UPLOAD = gql`\n mutation($file: Upload!) {\n upload(file: $file) {\n name\n id\n url\n }\n }\n`;\nconst UPDATE_USER = gql`\n mutation UpdateUser($data: editUserInput!, $id: ID!) {\n updateUser(input: { data: $data, where: { id: $id } }) {\n user {\n id\n avatar\n }\n }\n }\n`;\nconst UPDATE_CENTER_INFO = gql`\n mutation updateCenterInfo($id: ID!, $data: editCenterInput!) {\n updateCenter(input: { where: { id: $id }, data: $data }) {\n center {\n id\n }\n }\n }\n`;\n\nconst useStyles = makeStyles(theme => ({\n container: {\n height: \"100vh\",\n width: \"100vw\"\n },\n containerCropper: {\n height: \"90%\",\n padding: \"10px\"\n },\n cropper: {\n position: \"relative\",\n height: \"90%\",\n background: \"#333\"\n },\n slider: {\n height: \"10%\",\n display: \"flex\",\n alignItems: \"center\",\n width: \"60%\",\n margin: \"auto\"\n },\n containerButtons: {\n height: \"10%\",\n border: \"1px solid #f5f5f5\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\"\n },\n sliderLabel: {\n marginRight: \"20px\"\n }\n}));\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return ;\n});\n\nexport default function CropeImage({\n destination = \"userProfile\",\n centerId = null,\n setEventImage = null,\n setEventImageId = null\n}) {\n const { user } = useContext(Navigation);\n const classes = useStyles();\n const [updateCenterInfo] = useMutation(UPDATE_CENTER_INFO, {\n onError: err => {\n setAlertFailure(l1.failure);\n console.log(\"Error upload to logo\", err);\n },\n onCompleted: () => {\n console.log(\"done\");\n setAlertSuccess(l1.editsuccess);\n setTimeout(() => {\n window.location.reload(false);\n }, 2000);\n // setSaveLoading(false);\n // refetch();\n }\n });\n const handleClose = () => {\n setImage(null);\n inputRef.current.value = null;\n };\n\n const inputRef = useRef();\n const triggerFileSelect = () => {\n inputRef.current.click();\n };\n\n const [loading, setLoading] = useState(null);\n const [image, setImage] = useState(null);\n const [croppedArea, setCroppedArea] = useState(null);\n const [crop, setCrop] = useState({ x: 0, y: 0 });\n const [zoom, setZoom] = useState(1);\n const onCropComplete = (croppedAreaPercentage, croppedAreaPixels) => {\n setCroppedArea(croppedAreaPixels);\n // console.log(croppedAreaPercentage, croppedAreaPixels)\n };\n const onSelectFile = event => {\n if (event.target.files && event.target.files.length > 0) {\n const reader = new FileReader();\n reader.readAsDataURL(event.target.files[0]);\n reader.addEventListener(\"load\", () => {\n setImage(reader.result);\n });\n }\n };\n const [alertSuccess, setAlertSuccess] = useState(false);\n const [alertFailure, setAlertFailure] = useState(false);\n const [updateUser, { data, status }] = useMutation(UPDATE_USER, {\n onCompleted: e => {\n console.log(\"updateUser completed\", e);\n setAlertSuccess(l1.editsuccess);\n setTimeout(() => {\n window.location.reload(false);\n }, 2000);\n },\n onError: err => {\n setAlertFailure(l1.failure);\n console.log(\"updateUser error\", err);\n }\n });\n const uploadImage = croppedImage => {\n const file = dataURLtoFile(croppedImage, \"image.jpeg\");\n client\n .mutate({\n mutation: UPLOAD,\n variables: {\n file: file\n }\n })\n .then(res => {\n console.log(\"response appollo\", res);\n if (destination === \"userProfile\") {\n updateUser({\n variables: { data: { avatar: res.data.upload.url }, id: user.id }\n });\n }\n if (destination === \"centerLogo\") {\n updateCenterInfo({\n variables: {\n id: centerId,\n data: { logo: res.data.upload.id }\n }\n });\n }\n if (destination === \"eventImage\") {\n console.log(\"the id of the uploaded image\", res.data.upload.id);\n setAlertSuccess(l1.editsuccess);\n setEventImage(res.data.upload.url);\n setEventImageId(res.data.upload.id);\n handleClose();\n }\n })\n .catch(err => {\n console.error(err);\n })\n .finally(() => {\n setLoading(null);\n });\n };\n const sendCroppedImageToUpload = useCallback(async () => {\n try {\n const croppedImage = await getCroppedImg(image, croppedArea);\n // console.log(\"done\", { croppedImage });\n uploadImage(croppedImage);\n // setCroppedImage(croppedImage)\n } catch (e) {\n console.error(e);\n }\n }, [image, croppedArea]);\n\n const onSubmit = () => {\n setLoading(true);\n sendCroppedImageToUpload(image, croppedArea);\n };\n return (\n <>\n {image ? (\n \n \n \n \n \n \n \n \n {l1.changePicture}\n \n \n \n \n {loading && }\n {!loading && l1.submit}\n \n \n \n \n \n
\n
\n \n
\n
\n \n {l1.zoom}\n \n setZoom(zoom)}\n aria-labelledby=\"Zoom\"\n />\n {console.log(\"status\", updateUser.status)}\n {updateUser.isLoading ? (\n hello\n ) : null}\n
\n
\n
\n \n {loading && }\n {!loading && l1.submit}\n \n \n {l1.close}\n \n
\n
\n }\n >\n {l1.chooseFromComputer}\n \n \n
\n {\n setAlertSuccess(false);\n }}\n autoHideDuration={3000}\n >\n \n {alertSuccess}\n \n \n {\n setAlertFailure(false);\n }}\n autoHideDuration={3000}\n >\n \n {alertFailure}\n \n \n \n );\n}\n","import React, { useContext, useState } from \"react\";\nimport TopBar from \"../common/TopBar\";\nimport {\n Avatar,\n Box,\n makeStyles,\n TextField,\n Button,\n Typography,\n Snackbar\n} from \"@material-ui/core\";\nimport MuiAlert from \"@material-ui/lab/Alert\";\n\nimport { FaEdit, FaTrash, FaSave } from \"react-icons/fa\";\nimport { Navigation } from \"../../Context\";\nimport { l1 } from \"../../components/local.json\";\nimport { gql, useMutation } from \"@apollo/client\";\n// import { InMemoryCache } from \"@apollo/client\";\n// import { createUploadLink } from \"apollo-upload-client\";\n// import { setContext } from \"@apollo/client/link/context\";\n// import Cookies from \"universal-cookie\";\nimport useLayout from \"../common/useLayout\";\nimport CropeImage from \"./ImageCrop\";\n// const cache = new InMemoryCache();\n// const cookies = new Cookies();\n// const token = cookies.get(\"token\");\n// const uploadLink = createUploadLink({\n// uri: process.env.REACT_APP_GRAPHQL_END_POINT\n// });\n\n// const authLink = setContext((_, { headers }) => {\n// // get the authentication token from local storage if it exists\n// // return the headers to the context so httpLink can read them\n// return {\n// headers: {\n// ...headers,\n// authorization: token ? `Bearer ${token}` : \"\"\n// }\n// };\n// }),\n// client = new ApolloClient({\n// cache,\n// link: authLink.concat(uploadLink)\n// });\n\nconst useStyles = makeStyles(theme => ({\n container: {\n margin: theme.spacing(10),\n maxWidth: \"100vw\",\n gap: theme.spacing(5)\n },\n icon: {\n color: theme.palette.primary.main,\n fontSize: theme.spacing(4),\n marginRight: theme.spacing(1)\n },\n\n formSectionPassword: {\n padding: theme.spacing(4),\n marginBottom: 20,\n border: \"solid 1px lightgray\",\n borderRadius: 18,\n boxShadow: \"-5px 5px 5px lightgray\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.spacing(2),\n flexGrow: 1\n },\n formSectionAvatar: {\n padding: theme.spacing(4),\n marginBottom: 20,\n border: \"solid 1px lightgray\",\n borderRadius: 18,\n boxShadow: \"-5px 5px 5px lightgray\",\n width: \"min-content\"\n },\n avatarLarge: {\n width: 150,\n height: 150\n }\n}));\n// const UPLOAD = gql`\n// mutation($file: Upload!) {\n// upload(file: $file) {\n// name\n// id\n// url\n// }\n// }\n// `;\n\nconst UPDATE_USER = gql`\n mutation UpdateUser($data: editUserInput!, $id: ID!) {\n updateUser(input: { data: $data, where: { id: $id } }) {\n user {\n id\n avatar\n }\n }\n }\n`;\n\nexport default function EditProfile() {\n const { user } = useContext(Navigation);\n // console.log(`${process.env.REACT_APP_STRAPI_URL}${user?.avatar}`);\n const [alertSuccess, setAlertSuccess] = useState(false);\n const [alertFailure, setAlertFailure] = useState(false);\n const [updateUser, { data }] = useMutation(UPDATE_USER, {\n onCompleted: e => {\n console.log(\"updateUser completed\", e);\n setAlertSuccess(l1.editsuccess);\n setTimeout(() => {\n window.location.reload(false);\n }, 2000);\n },\n onError: err => {\n setAlertFailure(l1.failure);\n console.log(\"updateUser error\", err);\n }\n });\n const layout = useLayout();\n const classes = useStyles();\n // const [uploadAvatar, { loading: loadingAvatar }] = useMutation(UPLOAD, {\n // onError: err => {\n // console.log(\"upload err\", err);\n // },\n // onCompleted: data => console.log(\"data upload\", data)\n // });\n\n const [fullname, setFullname] = useState(user.fullname);\n const [email, setEmail] = useState(user.email);\n const [password, setPassword] = useState(\"\");\n const [passwordConfirm, setPasswordConfirm] = useState(\"\");\n const [error, setError] = useState(\"\");\n const handleEssentials = () => {\n const fn = fullname === user.fullname;\n const em = email === user.email;\n if (fn && em) return null;\n else updateUser({ variables: { data: { fullname, email }, id: user.id } });\n };\n const handlePassword = () => {\n const pw = password === passwordConfirm;\n if (pw) {\n updateUser({ variables: { data: { password }, id: user.id } });\n } else setError(\"كلمة السر غير متطابقة\");\n };\n // const [avatar, setAvatar] = useState(null);\n // useEffect(() => {\n // uploadAvatar({ variables: { file: avatar } });\n // console.log(avatar);\n // }, [avatar]);\n // const onSubmit = e => {\n // e.preventDefault();\n // console.log(avatar);\n // client\n // .mutate({\n // mutation: UPLOAD,\n // variables: {\n // file: avatar\n // }\n // })\n // .then(res => {\n // updateUser({\n // variables: { data: { avatar: res.data.upload.url }, id: user.id }\n // });\n // })\n // .catch(err => {\n // console.error(err);\n // });\n // };\n return (\n <>\n \n \n \n {l1.profilePicture}
\n \n \n
\n {user.avatarURL ? (\n \n }\n style={{ height: \"auto\" }}\n >\n {l1.edit}\n \n\n }\n style={{ height: \"auto\" }}\n onClick={e => {}}\n >\n {l1.delete}\n \n
\n ) : (\n \n
{l1.updateAvatar}\n {/*
\n {\" \"}\n */}\n
\n
{l1.changeEssentials}
\n setFullname(e.target.value)}\n required\n variant=\"outlined\"\n />\n\n setEmail(e.target.value)}\n required\n variant=\"outlined\"\n />\n\n }\n style={{ width: \"fit-content\" }}\n >\n {l1.save}\n \n \n\n \n {l1.changePassword}
\n setPassword(e.target.value)}\n />\n\n setPasswordConfirm(e.target.value)}\n />\n\n }\n style={{ width: \"fit-content\" }}\n >\n {l1.save}\n \n \n {\n setAlertSuccess(false);\n }}\n autoHideDuration={3000}\n >\n \n {alertSuccess}\n \n \n {\n setAlertFailure(false);\n }}\n autoHideDuration={3000}\n >\n \n {alertSuccess}\n \n \n \n \n );\n}\n","import { Box } from \"@material-ui/core\";\nimport { Typography } from \"@material-ui/core\";\n\nexport default function EvaluationResult({total, max, labels}){\n return (\n \n \n المجموع النهائي:\n \n \n {Math.round(total)}{' '}\n \n \n \\ {max}\n \n \n \n \n التقييم العام:\n {Object.entries(labels).reverse().find(([min]) => total >= min)?.[1]}\n \n \n )\n}","import { Box } from \"@material-ui/core\";\nimport { Typography } from \"@material-ui/core\";\n\nexport default function EvaluationStatistics({submitted, expected}){\n return \n \n عدد التقييمات:\n \n \n {submitted}{' '}\n \n { Boolean (expected) && (\n \n ({Math.round(submitted / expected * 100)}%)\n \n )}\n \n \n \n عدد الطلبة:\n \n \n {expected}\n \n \n \n \n}","import { Typography } from \"@material-ui/core\";\nimport { useField } from \"formik\";\nimport {TextField as MuiTextField} from '@material-ui/core';\n\nexport default function EvaluationTextField({id, label, mode = 'fill', long}) {\n console.log(long);\n const [props] = useField(id);\n return (\n mode === 'fill'\n ? \n : <>\n {label}\n { mode === 'summary'\n ? (\n !props.value?.length\n ? '(لا توجد)'\n : \n { props.value?.map(\n (v) => {v}\n )}\n
\n )\n : {props?.value?.trim().length ? props.value : '(لا توجد)'}\n }\n \n )\n }","import { createContext, useContext } from \"react\";\nimport Loading from \"../../common/Loading\";\nimport { useParams } from \"react-router-dom/cjs/react-router-dom.min\";\nimport { gql, useQuery } from \"@apollo/client\";\n\nexport const AssignmentContext = createContext();\n\nconst QUERY_ASSIGNMENT = gql`\n query QueryAssignment($id: ID!) {\n assignment(id: $id) {\n title\n type\n description\n evaluationsInfo{\n coach\n date\n location\n }\n }\n }\n`;\n\nexport function AssignmentProvider({children}){\n const {id} = useParams();\n const {data, loading, error} = useQuery(QUERY_ASSIGNMENT, {variables: {id}});\n return (\n loading\n ? \n : error || !data?.assignment\n ? 'ERROR'\n : \n {children}\n \n )\n}\n\nexport function useAssignment(){\n console.log('context', useContext(AssignmentContext));\n return useContext(AssignmentContext);\n}","import { Radio, TableCell, TableHead, TableRow, Typography } from \"@material-ui/core\";\nimport { useField, } from \"formik\";\nimport { useHistory, useParams } from \"react-router-dom\";\nimport EvaluationSubject from \"./EvaluationSubject\";\nimport { MdOutlineCheckCircleOutline } from \"react-icons/md\";\n\nconst radio = (props) => ({\n type: 'number',\n format: 'radioNumber',\n min: 1,\n max: 5,\n aggregation: 'count',\n ...props,\n})\n\nconst longText= (props) => ({\n type: 'text',\n long: true,\n aggregation: 'listStrings',\n ...props,\n})\n\nconst TrainingEvaluation = {\n key: 'student',\n listStudents: true,\n permissions:{\n student: {\n view: ['own'],\n },\n teacher: {\n fill: ['own','others'],\n view: ['own','others','summary'],\n },\n },\n questions:{\n q1: radio({ label: \"المواظبة على الحضور والمواعيد المحاضرات\" }),\n q2: radio({ label: \"السلوك العام للمتدرب\" }),\n q3: radio({ label: \"المشاركة داخل قاعة التدريب\" }),\n q4: radio({ label: \"يلتزم بسياسات و إجراءات المركز\" }),\n q5: radio({ label: \"التحفيز الذاتي\" }),\n q6: radio({ label: \"المتدرب لطيف و إيجابي في عمله\" }),\n q7: radio({ label: \"المبادرة في تعلم الجديد\" }),\n q8: radio({ label: \"يقدم ملاحظات واقتراحات\" }),\n q9: radio({ label: \"يعمل بروح الفريق\" }),\n q10: radio({ label: \"مهارات الاتصال مع الآخرين\" }),\n q11: radio({ label: \"سرعة الفهم\" }),\n q12: radio({ label: \"استخدام للوقت\" }),\n q13: radio({ label: \"المبادرة\" }),\n q14: radio({ label: \"التكييف مع اسلوب التدريب\" }),\n q15: radio({ label: \"المظهر الخارجي اللائق\" }),\n q16: radio({ label: \"جودة العمل بشكل عام\" }),\n q17: radio({ label: \"يلتزم بتعليمات المدرب بإيجابية\" }),\n strengthsAndWeaknesses:longText({ label:\"مواطن القوة و الضعف لدى المتدرب من حيث ارتباطها بموضوع التدريب\" }),\n },\n\n layout: [\n {\n label: 'المسؤوليات العامة للمتدرب',\n questions: ['q1', 'q2', 'q3', 'q4', 'q5', 'q6', 'q7', 'q8', 'q9'],\n },\n {\n label: 'تقييم المدرب',\n questions: ['q10', 'q11', 'q12', 'q13', 'q14', 'q15', 'q16', 'q17'],\n },\n {\n singleQuestion: 'strengthsAndWeaknesses',\n table: false,\n },\n ],\n \n usePostSubmit(){\n const {id, slug} = useParams();\n const history = useHistory();\n return function postSubmitAction(){\n history.push(`/class/${slug}/classwork/${id}/details`);\n }\n },\n\n EvaluationTable: {\n Head(){\n return (\n \n \n م\n عنصر التقييم\n {['ممتاز','جيد جدا', 'جيد', 'مقبول', 'ضعيف'].map(label => \n {label}\n )}\n \n \n )\n },\n Row({id, index, mode = 'fill'}){\n const {label} = this.questions[id];\n const [props, _meta, helpers] = useField(id);\n return \n {index}\n {label}\n {[5,4,3,2,1].map(possibleValue => (\n \n { mode === 'summary'\n ? \n {props.value?.[possibleValue] ?? 0}\n \n \n : mode === 'fill'\n ? {helpers.setValue(possibleValue)}} onFocus={()=>{helpers.setValue(possibleValue)}} />\n : props.value === possibleValue && \n }\n \n ))}\n \n }\n }\n}\n\nexport default new EvaluationSubject(TrainingEvaluation);","/* eslint-disable react-hooks/rules-of-hooks */\nimport { useHistory, useParams } from \"react-router-dom/cjs/react-router-dom.min\";\nimport { Navigation } from \"../../../Context\";\nimport sparseUpdate from \"../../../helpers/sparseUpdate\";\nimport { useStudentWork } from \"../context/studentWork\";\nimport { useContext } from \"react\";\n\n// possible permissions :\n// - actors: student, teacher\n// - actions: fill, view\n// targets for each action\n// - fill: own, others\n// - view: own, others, summary\n\nconst DEFAULT_PERMISSIONS = {\n student: {\n fill: ['own'],\n view: ['own'],\n },\n teacher: {\n fill: [],\n view: ['summary'],\n },\n}\n\nclass EvaluationSubject{\n constructor(props = {}) {\n // Initialize item and collection names for GraphQL queries and mutations\n this.update(props);\n // Bind instance to component methods\n this.getPageTitle = this.getPageTitle.bind(this);\n this.useCheckPermissions = this.useCheckPermissions.bind(this);\n this.usePostSubmit = this.usePostSubmit.bind(this);\n this.EvaluationTable.Head = this.EvaluationTable.Head.bind(this);\n this.EvaluationTable.Footer = this.EvaluationTable.Footer.bind(this);\n this.EvaluationTable.Row = this.EvaluationTable.Row.bind(this);\n }\n \n key;\n questions ={};\n layout = [];\n resultLabels = null;\n permissions = DEFAULT_PERMISSIONS;\n listStudents = false;\n\n usePostSubmit(){\n console.log('default post submit');\n return () => { console.log('no action')}\n };\n\n EvaluationTable = {\n Head(){\n return null;\n },\n Footer(){\n return null;\n },\n Row(){\n return null;\n }\n }\n /** Sparse update of the object's attributes */\n update(props) {\n for (let prop in props) {\n if ([null, undefined].includes(this?.[prop])){\n this[prop] = props[prop];\n } else\n if (\n typeof props[prop] === \"object\" &&\n !Array.isArray(props[prop]) &&\n props[prop] !== null\n ) {\n if (!this.hasOwnProperty(prop)) {\n this[prop] = {};\n }\n sparseUpdate(this[prop], props[prop]);\n } else {\n this[prop] = props[prop];\n }\n }\n }\n\n getPageTitle(mode){\n return `${\n mode === 'summary'\n ? \"ملخص تقييمات\"\n :mode === 'view'\n ? 'مشاهدة تقييم'\n : 'تقييم'\n } ${\n this.key === 'student'\n ? (mode === 'summary' ? 'الطلاب' : 'الطالب')\n : this.key === 'coach' ? 'المدرب'\n : 'الدورة التدريبية'\n }`\n }\n\n useCheckPermissions(mode){\n const {id, slug} = useParams();\n const history = useHistory();\n const {user, isCenterAdmin} = useContext(Navigation);\n const isStudent = user.classes.some(c => c.slug === slug);\n const isTeacher = isCenterAdmin || user.teachingClasses.some(c => c.slug === slug);\n const roles = [isStudent && 'student', isTeacher && 'teacher'].filter(Boolean);\n const {studentWork} = useStudentWork();\n const action = mode === 'summary' || studentWork?.submission?.[this.key] ? 'view' : 'fill';\n const isOwnWork = studentWork?.student?.id === user?.id;\n const target = mode === 'summary' ? 'summary' : (isOwnWork ? 'own' : 'others');\n \n for(let role of roles){\n if(this.permissions?.[role]?.[action].includes(target)){\n return;\n }\n }\n history.push(`/class/${slug}/classwork/${id}/details`);\n }\n\n\n \n}\n \nexport default EvaluationSubject","import { TableCell, TableFooter, TableHead, TableRow, TextField, Typography } from \"@material-ui/core\";\nimport { useField, useFormikContext } from \"formik\";\nimport { useHistory, useParams } from \"react-router-dom\";\nimport EvaluationSubject from \"./EvaluationSubject\";\n\nconst number = (props) => ({\n type: 'number',\n format: 'inputNumber',\n aggregation: 'avg',\n ...props\n})\n\nconst longText= (props) => ({\n type: 'text',\n long: true,\n aggregation: 'listStrings',\n ...props,\n})\n\nconst CoachEvaluation = {\n key: 'coach',\n questions:{\n q1: number({\n label: \"هل بدت عليه الثقة و البشاشة؟\",\n max: 20,\n }),\n q2: number({\n label: \"هل كانت البداية مشوقة و مثيرة؟\",\n max: 20,\n }),\n q3: number({\n label: \"هل شرح الأهداف و قسم الموضوع في البداية؟\",\n max: 20,\n }),\n q4: number({\n label: \"هل كانت مدة البداية مناسبة؟\",\n max: 20,\n }),\n q5: number({\n label: \"هل كان المظهر العام مناسبا للموضوع و الحضور؟\",\n max: 20,\n }),\n q6: number({\n label: 'هل كان ارتفاع الصوت مناسبا؟',\n max: 20,\n }),\n q7: number({\n label: 'هل كان تغيير نبرات الصوت مناسبا؟',\n max: 20,\n }),\n q8: number({\n label: 'هل كانت الوقفات مناسبة؟',\n max: 20,\n }),\n q9: number({\n label: 'هل كانت سرعة الحديث مناسبة؟',\n max: 20,\n }),\n q10: number({\n label: 'هل خلا الحديث من اللزمات المكررة Tic؟',\n max: 20,\n }),\n q11: number({\n label: 'هل كانت تعابير وجهه مريحة ودودة دون اصطناع؟',\n max: 10,\n }),\n q12: number({\n label: 'هل كانت تعابير جسده تشجع الانتباه و المشاركة؟',\n max: 20,\n }),\n q13: number({\n label: 'هل كانت حركات يديه مناسبة للموضوع ؟',\n max: 20,\n }),\n q14: number({\n label: 'هل كانت حركات جسده ومشيه ووقفته مناسبة؟',\n max: 15,\n }),\n q15: number({\n label: 'هل خلت حركاته من Tic ( حركة مكررة غير مناسبة )؟',\n max: 10,\n }),\n q16: number({\n label: 'هل كانت نظرات عينيه مناسبة وموزعة بشكل سليم؟',\n max: 15,\n }),\n q17: number({\n label: 'هل خلت تعابيره من الخوف أو التوتر أو الانفعال؟',\n max: 10,\n }),\n q18: number({\n label: 'هل كان المدرب متمكناً من مادته؟',\n max: 50,\n }),\n q19: number({\n label: 'هل كان واضحاً في تقسيم الموضوع إلى نقاط أساسية وفرعية؟',\n max: 15,\n }),\n q20: number({\n label: 'هل كان يربط الجانب النظري بأمثله واقعية',\n max: 15,\n }),\n q21: number({\n label: 'هل كان هناك تذكير مستمر أين وصلنا؟',\n max: 20,\n }),\n q22: number({\n label: 'هل كان يغير الشرائح بسرعة مناسبة؟',\n max: 20,\n }),\n q23: number({\n label: '2.هل التزم بقانون 5 × 5 ( 5 سطور، 5 كلمات )؟',\n max: 20,\n }),\n q24: number({\n label: '3.هل كانت الخطوط وألوانها مناسبة؟',\n max: 20,\n }),\n q25: number({\n label: '4.هل كانت الصور جميلة ومناسبة؟',\n max: 20,\n }),\n q26: number({\n label: '5.هل كانت الشرائح بشكل عام مناسبة وجميلة؟',\n max: 20,\n }),\n q27: number({\n label: '.هل كانت التمارين مناسبة وفعالة لموضوع الدورة؟',\n max: 20,\n }),\n q28: number({\n label: '.هل كانت التمارين مبدعة وجميلة وغير مألوفة؟',\n max: 20,\n }),\n q29: number({\n label: 'هل بذل المدرب جهداً واضحاً في إعدادها؟',\n max: 20,\n }),\n q30: number({\n label: 'هل كانت الإرشادات لاستعمال التمارين جيدة؟',\n max: 20,\n }),\n q31: number({\n label: 'هل كانت الدروس المستفادة جيدة واضحة و فعالة؟',\n max: 20,\n }),\n q32: number({\n label: 'هل كان هناك حوار مع المتدربين؟',\n max: 20,\n }),\n q33: number({\n label: 'هل كان هناك أنشطة جماعية؟',\n max: 20,\n }),\n q34: number({\n label: 'هل كان الجو العام وديا؟',\n max: 20,\n }),\n q35: number({\n label: '.هل أجاب المدرب على الأسئلة بفاعلية؟',\n max: 20,\n }),\n q36: number({\n label: 'هل كان الختام فعالا ومؤثرا؟',\n max: 20,\n }),\n q37: number({\n label: 'هل كانت المادة واضحة التقسيم؟',\n max: 20,\n }),\n q38: number({\n label: 'هل هي مادة جديدة ومبدعة؟',\n max: 20,\n }),\n q39: number({\n label: 'هل يوجد مراجع واستشهادات حديثة؟',\n max: 20,\n }),\n q40: number({\n label: 'هل المادة حسنة الإخراج؟',\n max: 20,\n }),\n q41: number({\n label: 'هل تحوي المادة معاني وعبر ورسائل واضحة؟',\n max: 20,\n }),\n q42: number({\n label: 'التقييم العام لتناسق الأداء',\n max: 100,\n }),\n pros:longText({ label: \"أبرز الإيجابيات\" }),\n cons:longText({ label: \"أبرز السلبيات\" }),\n comment:longText({ label:\"ملاحظات\" }),\n },\n\n layout: [\n {\n label: 'تقييم البداية',\n questions: ['q1', 'q2', 'q3', 'q4', 'q5'],\n },\n {\n label: 'تقييم لغة الحديث',\n questions: ['q6', 'q7', 'q8', 'q9', 'q10'],\n },\n {\n label: 'لغة الجسد',\n questions: ['q11', 'q12', 'q13', 'q14', 'q15', 'q16', 'q17'],\n },\n {\n label: 'الثقة و التمكن',\n questions: ['q18', 'q19', 'q20', 'q21'],\n },\n {\n label: 'شرائح العرض PowerPoint',\n questions: ['q22', 'q23', 'q24', 'q25', 'q26'],\n },\n {\n label: 'التمارين و الوسائل المساعدة',\n questions: ['q27', 'q28', 'q29', 'q30', 'q31'],\n },\n {\n label: 'الجو العام و الختام',\n questions: ['q32', 'q33', 'q34', 'q35', 'q36'],\n },\n {\n label: 'المادة العلمية',\n questions: ['q37', 'q38', 'q39', 'q40', 'q41'],\n },\n {\n label: 'التقييم العام لتناسق الأداء',\n questions: ['q42'],\n },\n /* ... other sections */\n {\n label: 'في الختام',\n questions: ['pros', 'cons', 'comment'],\n table: false,\n },\n ],\n\n resultLabels:{\n 0: 'سيء',\n 600: 'مقبول', \n 700: 'جيد',\n 800: 'ممتاز',\n },\n\n usePostSubmit(){\n const {id, slug} = useParams();\n const history = useHistory();\n return function postSubmitAction(){\n history.push(`/class/${slug}/classwork/${id}/details`);\n }\n },\n\n EvaluationTable: {\n Head(){\n return (\n \n \n م\n عنصر التقييم\n الدرجة\n التقييم\n \n \n )\n },\n Footer({section}){\n const {values} = useFormikContext();\n return (\n \n \n \n مجموع {section.label}\n {section.questions.reduce((prev, cur) => prev + this.questions[cur].max, 0)}\n {Math.round(section.questions.reduce((prev, cur) => prev + values[cur], 0))}\n \n \n );\n },\n Row({id, index, mode = 'fill'}){\n const {label, max} = this.questions[id];\n const [props, meta] = useField(id);\n return \n {index}\n {label}\n {max}\n \n {mode === 'fill' \n ? \n : {Math.round(props.value)}\n }\n \n \n }\n }\n}\n\nexport default new EvaluationSubject(CoachEvaluation);","import { Radio, TableCell, TableHead, TableRow, Typography } from \"@material-ui/core\";\nimport { useField, } from \"formik\";\nimport { useHistory, useParams } from \"react-router-dom\";\nimport EvaluationSubject from \"./EvaluationSubject\";\nimport {MdCheckCircle, MdCheckCircleOutline} from 'react-icons/md';\n\nconst radio = (props) => ({\n type: 'number',\n format: 'radioNumber',\n min: 1,\n max: 5,\n aggregation: 'count',\n ...props,\n})\n\nconst longText= (props) => ({\n type: 'text',\n long: true,\n aggregation: 'listStrings',\n ...props,\n})\n\nconst TrainingEvaluation = {\n key: 'training',\n questions:{\n q1: radio({ label: \"ساعدني البرنامج على اكتساب معلومات ومهارات جديدة أستطيع تطبيقها في حياتي العملية\" }),\n q2: radio({ label: \"توافق البرنامج مع توقعاتي الشخصية\" }),\n q3: radio({ label: \"الأساليب التدريبية المستخدمة تميزت بالفعالية (تمارين،ورش..) خاصة لكل دورة\" }),\n q4: radio({ label: \"عمق وحداثة المادة العلمية للبرنامج\" }),\n q5: radio({ label: \"التقييم العام للبرنامج\" }),\n q6: radio({ label: \"قدرته على إدارة الحوار مع المشاركين\" }),\n q7: radio({ label: \"تمكنه من المادة العلمية\" }),\n q8: radio({ label: \"تمكنه من تغطية أهداف الدورة\" }),\n q9: radio({ label: \"تمكنه من تغطية محتوى الدورة بشكل كامل\" }),\n q10: radio({ label: \"تميز المدرب بمهارات العرض والتقديم\" }),\n q11: radio({ label: \"حافظ المدرب على حيوية البرنامج\" }),\n q12: radio({ label: \"كان المدرب موفقا في استخدام الأساليب التدريبية لتحقيق أهداف البرنامج (ورش-تمارين..)\" }),\n q13: radio({ label: \"إعطاؤه وقتا كافيا للأنشطة المساعدة (تمارين..)\" }),\n q14: radio({ label: \"تكيفه مع مستويات المشاركين\" }),\n q15: radio({ label: \"وُفِّق المدرب في إدارة وقت البرنامج\" }),\n q16: radio({ label: \"مدة البرنامج كانت كافية\" }),\n q17: radio({ label: \"مكان انعقاد البرنامج\" }),\n q18: radio({ label: \"القاعة التدريبية\" }),\n q19: radio({ label: \"تعاون منسق البرنامج والهيئة الادارية\" }),\n q20: radio({ label: \"توافر المستلزمات والقرطاسية والمطبوعات\" }),\n q21: radio({ label: \"خدمات الضيافة\" }),\n pros:longText({ label: \"أبرز الإيجابيات\" }),\n cons:longText({ label: \"أبرز السلبيات\" }),\n comment:longText({ label:\"ملاحظات عامة و اقتراحات للدورات القادمة\" }),\n },\n\n layout: [\n {\n label: 'تقييم الجانب الفني في الدورة',\n questions: ['q1', 'q2', 'q3', 'q4', 'q5'],\n },\n {\n label: 'تقييم المدرب',\n questions: ['q6', 'q7', 'q8', 'q9', 'q10', 'q11', 'q12', 'q13', 'q14', 'q15'],\n },\n {\n label: 'تقييم الجانب الإداري',\n questions: ['q16', 'q17', 'q18', 'q19', 'q20', 'q21'],\n },\n {\n questions: ['pros', 'cons', 'comment'],\n table: false,},\n ],\n \n usePostSubmit(){\n const {id, slug} = useParams();\n const history = useHistory();\n return function postSubmitAction(){\n history.push(`/class/${slug}/classwork/${id}/details`);\n }\n },\n\n EvaluationTable: {\n Head(){\n return (\n \n \n م\n عنصر التقييم\n {['ممتاز','جيد جدا', 'جيد', 'مقبول', 'ضعيف'].map(label => \n {label}\n )}\n \n \n )\n },\n Row({id, index, mode = 'fill'}){\n const {label} = this.questions[id];\n const [props, _meta, helpers] = useField(id);\n return \n {index}\n {label}\n {[5,4,3,2,1].map(possibleValue => (\n \n { mode === 'summary'\n ? \n {props.value?.[possibleValue] ?? 0}\n \n \n : mode === 'fill'\n ? {helpers.setValue(possibleValue)}} onFocus={()=>{helpers.setValue(possibleValue)}} />\n : props.value === possibleValue && \n }\n \n ))}\n \n }\n }\n}\n\nexport default new EvaluationSubject(TrainingEvaluation);","import CoachEvaluation from \"./subjects/coach\";\nimport StudentEvaluation from \"./subjects/student\";\nimport TrainingEvaluation from \"./subjects/training\";\n\nconst subjects = {\n coach: CoachEvaluation,\n student: StudentEvaluation,\n training: TrainingEvaluation,\n}\n\nexport default function useEvaluationSubject(name){\n return subjects[name];\n}","import { gql, useMutation, useQuery } from \"@apollo/client\";\nimport { createContext, useContext } from \"react\";\nimport { useParams } from \"react-router-dom/cjs/react-router-dom.min\";\nimport Loading from \"../../common/Loading\";\nimport useEvaluationSubject from \"../useEvaluationSubject\";\n\nexport const StudentworkContext = createContext();\n\nconst QUERY_STUDENTWORK = gql`\n query QueryStudentWork($studentWorkId: ID!) {\n studentWork(id: $studentWorkId) {\n student {\n id\n fullname\n avatar\n }\n submission\n }\n }\n`;\n\nconst UPDATE_STUDENT_WORK = gql`\nmutation UpdateStudentWork(\n $studentWorkId: ID!\n $submission: JSON!\n) {\n updateStudentWork(\n input: { where: { id: $studentWorkId }, data: { submission: $submission } }\n ) {\n studentWork {\n id\n }\n }\n}\n`;\n\n\nexport function StudentWorkProvider({subject, children}){\n const {studentWorkId} = useParams();\n const {data, loading, error} = useQuery(QUERY_STUDENTWORK, {variables: {studentWorkId}});\n const {usePostSubmit} = useEvaluationSubject(subject);\n const postUpdateCallback = usePostSubmit();\n const [updateStudentWork, { loading: updatingStudentWork, error: studentWorkUpdateError }] = useMutation(\n UPDATE_STUDENT_WORK,\n {\n onCompleted(){\n postUpdateCallback();\n },\n onError(error){console.log(\"mutationUpdateStudentWork Error\", error);},\n }\n );\n return (\n loading || updatingStudentWork\n ? \n : error || !data?.studentWork || studentWorkUpdateError\n ? 'ERROR'\n : \n {children}\n \n )\n}\n\nexport function useStudentWork(){\n return useContext(StudentworkContext) ?? {};\n}","import { number, string } from \"yup\";\n\nconst DEFAULT_FORMAT = 'string';\nfunction requireIf(required = false, schema){\n return required ? schema.required() : schema;\n}\n\nconst validations = {\n inputNumber: ({min=0, max=Infinity, required}) => requireIf(required, number().integer().min(min).max(max)),\n radioNumber: ({min=0, max, required}) => requireIf(required, number().integer().min(min).max(max)),\n string: ({required}) => requireIf(required, string()),\n}\n\nexport function getValidationRule(question){\n return question?.validation ?? validations[question?.format ?? DEFAULT_FORMAT](question);\n}\n\nexport const initialValues = {\n inputNumber: 0,\n radioNumber: ({min, max})=> Math.round((min+max)/2),\n string: '',\n}\n\nexport function getInitalValue(question){\n let value = initialValues[question?.format ?? DEFAULT_FORMAT];\n return question?.initialValue ?? (typeof value === 'function' ? value(question) : value);\n}\n\n","import { createContext, useContext } from \"react\";\nimport Loading from \"../../common/Loading\";\nimport { useParams } from \"react-router-dom/cjs/react-router-dom.min\";\nimport { gql, useQuery } from \"@apollo/client\";\n\nexport const StudentWorksContext = createContext();\n\nconst QUERY_STUDENTWORKS = gql`\n query QueryStudentWorks($id: ID!) {\n studentWorks( where: { assignment: {id: $id}}) {\n id\n student {\n id\n fullname\n avatar\n }\n submission\n }\n }\n`;\n\nexport function StudentWorksProvider({type, children}){\n const {id} = useParams();\n const {data, loading, error} = useQuery(QUERY_STUDENTWORKS, {variables: {id}});\n return (\n loading\n ? \n : error || !data?.studentWorks\n ? 'ERROR'\n : \n {children}\n \n )\n}\n\nexport function useStudentWorks(){\n return useContext(StudentWorksContext) ?? [];\n}","const aggregations = {\n avg:(result, current, aggregatedCount) => (result*aggregatedCount + current) / (aggregatedCount + 1),\n list: (result, current) => ([ ...result, current]),\n listStrings: (result, current) => ([ ...result, ...(current?.trim()?.length ? [current] : [])]),\n count: (result, current) => ({\n ...result,\n [current]: (result?.[current] ?? 0) + 1\n }),\n}\n\nexport const aggregationInitialValues = {\n avg: 0,\n list: [],\n listStrings: [],\n}\n\nexport default function aggregate(evaluations = [], questions){\n const submittedEvaluations = evaluations.filter(Boolean);\n const aggregatedValues = Object.fromEntries(Object.entries(questions).map(([key, {aggregation}]) => ([key, aggregationInitialValues[aggregation] ])))\n console.log(evaluations, submittedEvaluations, aggregatedValues);\n for(let aggregatedCount = 0; aggregatedCount < submittedEvaluations.length; aggregatedCount++){\n Object.entries(questions).forEach(([key, {aggregation}]) => {\n aggregatedValues[key] = aggregations[aggregation](aggregatedValues[key], evaluations[aggregatedCount]?.[key] ?? (key.type === 'number' ? 0 : ''), aggregatedCount);\n })\n }\n aggregatedValues.expected = evaluations.length;\n aggregatedValues.submitted = submittedEvaluations.length;\n console.log(aggregatedValues)\n return aggregatedValues;\n}\n ","import { Avatar, Box, Button, Divider, Grid, Icon, Typography, makeStyles } from \"@material-ui/core\";\nimport { IoArrowBackCircleOutline } from \"react-icons/io5\";\nimport { MdOutlineCheckCircleOutline } from \"react-icons/md\";\nimport { useHistory, useParams } from \"react-router-dom/cjs/react-router-dom.min\";\nimport { useStudentWorks } from \"./context/studentWorks\";\n\nconst useStyles = makeStyles((theme)=>({\n container: {\n width: '100%',\n border: `1px solid ${theme.palette.grey[300]}`,\n borderRadius: theme.spacing(1),\n padding: theme.spacing(1),\n background: 'white',\n marginBottom: theme.spacing(1),\n cursor: 'pointer',\n },\n avatar: {\n margin: theme.spacing(0, 1),\n },\n nameText: {},\n nameName: {\n textTransform:'none'\n },\n menuItem: {\n paddingRight: theme.spacing(10),\n },\n iconPrimary:{\n stroke: theme.palette.primary.main\n },\n iconSecondary:{\n stroke: theme.palette.secondary.main\n }\n}))\n\nexport default function EvaluationList({subjectKey}){\n const classes = useStyles();\n const {id, slug} = useParams();\n const studentWorks = useStudentWorks();\n const history = useHistory();\n console.log({studentWorks});\n if(!studentWorks.length) {\n return null;\n }\n return (<>\n \n \n قائمة الطلاب\n \n \n \n { studentWorks.map( ({id: studentWorkId, student, submission}) => (\n \n \n \n ))}\n \n \n )\n}","import { Box, Button, Divider, Grid, Table, TableBody, Typography } from \"@material-ui/core\";\nimport { Formik } from \"formik\";\nimport { useParams } from \"react-router-dom\";\nimport { object } from \"yup\";\nimport Loading from \"../common/Loading\";\nimport TopBar from \"../common/TopBar\";\nimport EvaluationResult from \"./EvaluationResult\";\nimport EvaluationStatistics from \"./EvaluationStatistics\";\nimport EvaluationTextField from \"./TextField\";\nimport { useAssignment } from \"./context/assignment\";\nimport { useStudentWork } from \"./context/studentWork\";\nimport { getInitalValue, getValidationRule } from \"./questionFormats\";\nimport useEvaluationSubject from \"./useEvaluationSubject\";\nimport { l1 } from \"../local.json\";\nimport { useStudentWorks } from \"./context/studentWorks\";\nimport aggregate from \"./aggregate\";\nimport EvaluationList from \"./EvaluationList\";\nexport default function Evaluation({subject}){\n const { studentWorkId } = useParams();\n const assignment = useAssignment();\n const {key: subjectKey, EvaluationTable, layout, questions, resultLabels, getPageTitle, useCheckPermissions, listStudents} = useEvaluationSubject(subject);\n const {studentWork, updateStudentWork} = useStudentWork();\n const evaluation = studentWork?.submission?.[subjectKey];\n\n const studentworks = useStudentWorks();\n const aggregatedData = aggregate(studentworks?.map((work) => work.submission?.[subjectKey]), questions);\n const mode = aggregatedData?.expected ? 'summary' : (evaluation ? 'view' : 'fill');\n useCheckPermissions(mode);\n \n const formikConfig = {\n initialValues: {\n ...Object.fromEntries(Object.keys(questions).map(questionId => ([questionId, mode === \"summary\" ? aggregatedData?.[questionId] : evaluation?.[questionId] ?? getInitalValue(questions[questionId])]))),\n },\n validationSchema: object().shape({\n ...Object.fromEntries(Object.entries(questions).map(([questionId, question]) => ([questionId, getValidationRule(question)]))),\n }),\n onSubmit(evaluation){\n updateStudentWork({\n variables: {\n studentWorkId,\n submission: {\n ...studentWork.submission,\n [subjectKey]: evaluation,\n }\n }\n })\n },\n enableReinitialize: true,\n }\n return <>\n \n \n {({isSubmitting, handleSubmit, values, isValid, errors}) =>{\n const resultsBlock = resultLabels && prev + (questions[cur].type === 'number' ? values[cur] : 0), 0)}\n max={Object.keys(questions).reduce((prev, cur) => prev + (questions[cur].type === 'number' ? questions[cur].max : 0), 0)}\n labels={resultLabels}\n />\n return (\n isSubmitting\n ? \n : \n \n \n \n {assignment.title}\n \n \n \n \n {l1.evaluationsCoach}: {assignment?.evaluationsInfo?.coach}\n \n \n {l1.evaluationsDate}: {assignment?.evaluationsInfo?.date}\n \n \n {l1.evaluationsLocation}: {assignment?.evaluationsInfo?.location}\n \n \n\n\n {mode === 'summary' && listStudents && }\n\n \n \n \n {getPageTitle(mode)}\n \n {mode !== 'fill' && <>\n {mode === \"summary\" && }\n {resultsBlock}\n \n }\n \n \n \n \n \n )\n }}\n \n \n}","import React, { useContext, useReducer, useState } from \"react\";\nimport { l1 } from \"../../local.json\";\nimport {\n Avatar,\n Box,\n Button,\n Grid,\n makeStyles,\n Typography\n} from \"@material-ui/core\";\nimport TopBar from \"../../common/TopBar\";\nimport { gql, useQuery, useMutation } from \"@apollo/client\";\nimport Loading from \"../../common/Loading\";\nimport { Navigation } from \"../../../Context\";\nimport { onError } from \"apollo-link-error\";\n\nconst useStyles = makeStyles(theme => ({\n highOrder: {\n margin: theme.spacing(10, 30)\n },\n headContainer: {\n //margin: theme.spacing(0, 10),\n padding: theme.spacing(2),\n marginBottom: theme.spacing(2),\n border: `1px solid ${theme.palette.grey[100]}`,\n background: `${theme.palette.grey[\"50\"]}30`,\n borderRadius: theme.spacing(2)\n },\n text: {\n color: theme.palette.primary.main,\n fontWeight: 600\n },\n iconHead: {\n color: \"#44566c\",\n margin: theme.spacing(0, 1)\n },\n container: {\n border: `1px solid ${theme.palette.grey[300]}`,\n borderRadius: theme.spacing(1),\n padding: theme.spacing(1),\n background: \"white\",\n marginBottom: theme.spacing(1),\n cursor: \"pointer\"\n },\n avatar: {\n margin: theme.spacing(0, 1)\n },\n nameText: {},\n nameName: {\n color: \"#44566c\"\n },\n menuItem: {\n paddingRight: theme.spacing(10)\n },\n nameTitle: {\n color: \"#44566c\",\n fontSize: theme.spacing(1.4)\n },\n idId: {\n color: \"#8697a8\"\n },\n address: {\n color: \"#44566c\"\n },\n icon: {\n fontSize: theme.spacing(3),\n color: \"#8697a8\",\n marginLeft: theme.spacing(3)\n }\n}));\n\nconst GET_STUDENTS = gql`\n query GetBannedList($id: ID!) {\n memberships(\n sort: \"createdAt:desc\"\n where: { status: \"BANNED\", center: $id }\n ) {\n id\n fullname\n email\n }\n }\n`;\n\nconst UN_BAN_STUDENT = gql`\n mutation UnBanStudent($id: ID!) {\n updateMembership(input: { where: { id: $id }, data: { status: ACTIVE } }) {\n membership {\n id\n status\n }\n }\n }\n`;\n\nfunction Banned() {\n const { centerId } = useContext(Navigation);\n\n //Apollo\n const { loading, data, refetch } = useQuery(GET_STUDENTS, {\n notifyOnNetworkStatusChange: true,\n variables: {\n id: centerId\n }\n });\n\n const [unBanStudent, { loading: loadingBan }] = useMutation(UN_BAN_STUDENT, {\n onCompleted: () => {\n console.log(\"user has been unbanned\");\n refetch();\n },\n onError: err => {\n console.log(err);\n }\n });\n const classes = useStyles();\n if (loading || loadingBan) return ;\n else {\n const students = data?.memberships;\n return (\n \n \n \n \n \n \n {l1.fullName}\n \n \n \n \n {l1.id}\n \n \n \n \n {l1.email}\n \n \n\n \n \n {students.map(({ fullname, email, id }) => (\n \n ))}\n \n \n );\n }\n\n function TableRow({ name, email, id }) {\n // Options Logic\n const [anchorPost, setAnchorPost] = useState(null);\n const openPostMenu = event => {\n setAnchorPost(event.currentTarget);\n };\n const closePostMenu = () => {\n setAnchorPost(null);\n };\n // Confirmation Dialog Logic\n const [confirmationState, reverseConfirmationState] = useReducer(\n state => !state,\n false\n );\n const [confirmationBanState, reverseConfirmationBanState] = useReducer(\n state => !state,\n false\n );\n const classes = useStyles();\n return (\n \n \n \n \n \n \n {name}\n \n \n \n \n {id}\n \n \n {email}\n \n\n \n {\n unBanStudent({\n variables: {\n id\n }\n });\n }}\n >\n {l1.unBan}\n \n \n \n \n );\n }\n}\nexport default Banned;\n","import React, { useState } from 'react'\nimport {TextField, Button,Typography} from '@material-ui/core'\nimport { l1 } from \"../../../../components/local.json\";\n\n\nexport default function Value(props){\n const [isEditing, setEditing] = useState(false);\n const [newName, setNewName] = useState(props.name);\n const [newContent, setnewContent] = useState(props.content);\n const handleNewNameChange = (e)=>{\n setNewName(e.target.value)\n }\n const handleNewContentChange = (e)=>{\n setnewContent(e.target.value)\n }\n const handleSubmit =(e)=>{\n e.preventDefault();\n props.editValue(props.index, {newName,newContent});\n setNewName(\"\");\n setnewContent(\"\");\n setEditing(false);\n }\n const editingTemplate = (\n \n
\n \n \n
\n
\n \n \n
\n
\n
\n {/* setValues({value: e.target.value})} />\n setValues({value: e.target.value})} /> */}\n {props.name}\n {props.content}\n
\n
\n \n \n
\n
\n
{number}\n
\n \n \n \n
\n
\n
setNumber(e.target.value)}\n />\n \n \n \n \n
\n \n setstate(e.target.value)}\n style={{ width: \"300px\", marginLeft: \"10px\" }}\n />\n \n {\" \"}\n اضافة رقم هاتف\n \n
\n {phoneNumbers &&\n phoneNumbers?.map(({ id, number }, index) => (\n \n ))}\n \n );\n}\n","import React, {\n useState,\n createRef,\n useRef,\n useContext,\n useEffect,\n useReducer\n} from \"react\";\nimport CloudUploadIcon from \"@material-ui/icons/CloudUpload\";\nimport DeleteIcon from \"@material-ui/icons/Delete\";\nimport { Row, Col } from \"antd\";\nimport SmsFailedIcon from \"@material-ui/icons/SmsFailed\";\nimport {\n Facebook,\n Instagram,\n YouTube,\n LinkedIn,\n Twitter\n} from \"@material-ui/icons/\";\nimport Gallery from \"react-grid-gallery\";\nimport ListMembers from \"../../rel/Landing/ListMembers\";\nimport \"../../rel/Landing/Styling.scss\";\nimport { gql, useMutation, useQuery } from \"@apollo/client\";\nimport Loading from \"../../common/Loading\";\nimport { Navigation } from \"../../../Context\";\nimport logo from \"../../rel/Landing/assets/img/center.default.jpg\";\nimport bg from \"../../rel/Landing/assets/img/image-slider.png\";\nimport defaultImg from \"../../rel/Landing/assets/img/default.png\";\nimport {\n Box,\n BottomNavigation,\n BottomNavigationAction,\n Paper,\n InputAdornment,\n TextField,\n Typography,\n CircularProgress,\n Button,\n Snackbar,\n Checkbox,\n FormControlLabel,\n FormGroup\n} from \"@material-ui/core\";\nimport MuiAlert from \"@material-ui/lab/Alert\";\nimport TopBar from \"../../common/TopBar\";\nimport { l1 } from \"../../../components/local.json\";\nimport CropeImage from \"../../UserPages/ImageCrop\";\nimport Values from \"./LandingComponents/Values\";\nimport PhoneNumbers from \"./LandingComponents/PhoneNumbers\";\n\nconst UPLOAD = gql`\n mutation($file: Upload!) {\n upload(file: $file) {\n name\n id\n url\n }\n }\n`;\n\nconst GET_INTERFACE = gql`\n query GetInterface($subdomain: String!) {\n centersLists(where: { subdomain: $subdomain }) {\n info {\n openToRegistration\n logo {\n url\n }\n id\n name\n vision\n message\n values {\n id\n name\n content\n }\n gallery {\n id\n name\n caption\n width\n height\n url\n }\n video\n description\n alertSignup\n contact {\n address\n email\n phoneNumbers {\n id\n number\n }\n }\n socialMediaLinks {\n facebook\n twitter\n linkedin\n instagram\n youtube\n }\n teamMember {\n id\n picture {\n id\n url\n }\n fullName\n role\n facebook\n instagram\n twitter\n }\n }\n }\n }\n`;\nconst UPDATE_INTERFACE = gql`\n mutation updateCenterInfo($id: ID!, $data: editCenterInput!) {\n updateCenter(input: { where: { id: $id }, data: $data }) {\n center {\n id\n }\n }\n }\n`;\nconst UPDATE_VALUES = gql`\n mutation updateCenterInfo(\n $id: ID!\n $data: [editComponentCenterValueInput!]!\n ) {\n updateCenter(input: { where: { id: $id }, data: { values: $data } }) {\n center {\n values {\n name\n content\n }\n }\n }\n }\n`;\nconst UPDATE_PHONE_NUMBERS = gql`\n mutation updateCenterInfo(\n $id: ID!\n $data: [editComponentPhonePhoneNumberInput!]!\n ) {\n updateCenter(\n input: { where: { id: $id }, data: { contact: { phoneNumbers: $data } } }\n ) {\n center {\n id\n }\n }\n }\n`;\nconst UPDATE_TEAM = gql`\n mutation updateCenterInfo($data: [editComponentCenterTeamInput]!, $id: ID!) {\n updateCenter(input: { data: { teamMember: $data }, where: { id: $id } }) {\n center {\n id\n }\n }\n }\n`;\n\nexport default function EditLanding() {\n const [alertSuccess, setAlertSuccess] = useState(false);\n const [alertFailure, setAlertFailure] = useState(false);\n const { centerId, sub } = useContext(Navigation);\n const [saveLoading, setSaveLoading] = useState(null);\n\n const { loading, data, refetch } = useQuery(GET_INTERFACE, {\n onError: err => console.log(\"err get interface\", err),\n onCompleted: data => {\n setGallery(IMAGES);\n setGalleryId(ids);\n setOpenToRegistration(Boolean(data?.centersLists[0]?.info?.openToRegistration))\n },\n variables: {\n subdomain: sub\n },\n notifyOnNetworkStatusChange: true\n });\n const center = data?.centersLists[0]?.info;\n const centerLogo = center?.logo\n ? `url(${process.env.REACT_APP_STRAPI_URL}${center?.logo?.url})`\n : `url(${logo})`;\n // const centerLogo = `url(${process.env.REACT_APP_STRAPI_URL}${center?.logo?.url})`\n // const arr = [];\n const ids = (center?.gallery || []).map(image => {\n return { id: image.id };\n });\n const toggleImageSelected = index => {\n const updatedImages = gallery.map((image, imageIdx) => {\n if (index === imageIdx) {\n return { ...image, isSelected: !image.isSelected };\n }\n return image;\n });\n setGallery(updatedImages);\n };\n const IMAGES = (center?.gallery || []).map(image => {\n if (image.url)\n return {\n id: image.id,\n src: `${process.env.REACT_APP_STRAPI_URL}${image.url}`,\n thumbnail: `${process.env.REACT_APP_STRAPI_URL}${image.url}`,\n isSelected: false\n };\n });\n const [uploadToGallery] = useMutation(UPLOAD, {\n onError: err => console.log(\"error upload to gallery\", err),\n onCompleted: data => {\n const ids = [...galleryId, { id: data.upload.id }];\n postUploadToGallery({\n variables: {\n data: {\n gallery: [...ids].map(id => id.id)\n },\n id: center.id\n }\n });\n const arr = [\n ...gallery,\n {\n src: `${process.env.REACT_APP_STRAPI_URL}${data.upload.url}`,\n thumbnail: `${process.env.REACT_APP_STRAPI_URL}${data.upload.url}`\n }\n ];\n setGallery(arr);\n setUploadGalleryLoading(null);\n }\n });\n const [updateValuesMutation] = useMutation(UPDATE_VALUES, {\n onError: err => {\n console.log(\"update values error\", err);\n },\n onCompleted: () => {\n console.log(\"update values completed\");\n refetch();\n }\n });\n const [updatePhoneNumbersMutation] = useMutation(UPDATE_PHONE_NUMBERS, {\n onError: err => {\n console.log(\"error update phone numbers\", err);\n },\n onCompleted: () => {\n console.log(\"updated phone numbers\");\n refetch();\n }\n });\n const [addPicture, { loading: loadingAddPicture }] = useMutation(UPLOAD, {\n onError: err => console.log(\"error add picture to team member\", err),\n onCompleted: data => {\n setPictureID(data.upload.id);\n }\n });\n const [postUploadToGallery] = useMutation(UPDATE_INTERFACE, {\n onError: err => {\n console.log(\"update gallery\", err);\n setAlertFailure(l1.failure);\n },\n onCompleted: data => {\n setAlertSuccess(l1.editsuccess);\n setDeleteGalleryLoading(false);\n const arr = gallery;\n arr.push({\n src: `${process.env.REACT_APP_STRAPI_URL}${data?.updateCentersList?.centersList?.gallery?.url}`,\n thumbnail: `${process.env.REACT_APP_STRAPI_URL}${data?.updateCentersList?.centersList?.gallery?.url}`\n });\n }\n });\n const [updateInterface] = useMutation(UPDATE_INTERFACE, {\n onError: err => console.log(\"error update center info\", err),\n onCompleted: data => {\n setSaveLoading(false);\n refetch();\n }\n });\n const [updateTeamMembers] = useMutation(UPDATE_TEAM, {\n onError: err => console.log(\"error update team members\", err),\n onCompleted: data => {\n console.log(\"update team members completed\", data);\n refetch();\n }\n });\n const [team, setTeam] = useState(center?.teamMember);\n\n const handleDeleteImages = () => {\n setDeleteGalleryLoading(true);\n let newGallery = gallery.filter(image => image.isSelected !== true);\n postUploadToGallery({\n variables: {\n data: {\n gallery: [...newGallery].map(id => id.id)\n },\n id: center.id\n }\n });\n setGallery(newGallery);\n };\n // const carouselActivities = createRef();\n // const [carouselIndex, setcarouselIndex] = useState(0);\n const [uploadGalleryLoading, setUploadGalleryLoading] = useState();\n const [deleteGalleryLoading, setDeleteGalleryLoading] = useState(false);\n const [gallery, setGallery] = useState();\n const [galleryId, setGalleryId] = useState([]);\n const [name, setName] = useState(center?.name);\n const [vision, setVision] = useState(center?.vision);\n const [message, setMessage] = useState(center?.message);\n const [description, setDescription] = useState(center?.description);\n const [alertSignup, setAlertSignup] = useState(center?.alertSignup);\n const [values, setValues] = useState(null);\n\n const [facebook, setFacebook] = useState(center?.socialMediaLinks?.facebook);\n const [twitter, setTwitter] = useState(center?.socialMediaLinks?.twitter);\n const [instagram, setInstagram] = useState(\n center?.socialMediaLinks?.instagram\n );\n const [youtube, setYoutube] = useState(center?.socialMediaLinks?.youtube);\n const [linkedin, setLinkedin] = useState(center?.socialMediaLinks?.linkedin);\n\n const [video, setVideo] = useState(center?.video);\n\n const [phoneNumbers, setPhoneNumbers] = useState(\n center?.contact?.phoneNumbers\n );\n const [address, setAddress] = useState(center?.contact?.address);\n const [email, setEmail] = useState(center?.contact?.email);\n const [pictureID, setPictureID] = useState(null);\n useEffect(() => { returnGallery() }, [gallery]);\n const [openToRegistration, setOpenToRegistration] = useState(false)\n const returnGallery = () => (\n {\n toggleImageSelected(index);\n }}\n />\n );\n const inputRef = useRef();\n const saveAllChanges = () => {\n if (\n !name &&\n !vision &&\n !message &&\n !description &&\n !video &&\n !address &&\n !email &&\n !alertSignup &&\n !values &&\n !phoneNumbers &&\n !team &&\n !facebook &&\n !youtube &&\n !twitter &&\n !instagram &&\n !linkedin\n && Boolean(openToRegistration) === Boolean(center?.openToRegistration)\n ) {\n console.log(\"nothing to be saved\");\n setSaveLoading(false);\n return;\n }\n setSaveLoading(true);\n if (!phoneNumbers && !values && !team) {\n updateInterface({\n variables: {\n data: {\n name,\n openToRegistration,\n vision,\n message,\n description,\n video,\n contact: { address, email },\n alertSignup,\n socialMediaLinks: {\n facebook,\n instagram,\n linkedin,\n twitter,\n youtube\n }\n },\n id: center.id\n }\n });\n }\n if (values) {\n updateValuesMutation({\n variables: {\n id: center.id,\n data: [...values]\n }\n });\n }\n\n if (phoneNumbers) {\n console.log(\"phonenumbers\", phoneNumbers);\n updatePhoneNumbersMutation({\n variables: {\n id: center.id,\n data: [...phoneNumbers]\n }\n });\n }\n if (team) {\n updateTeamMembers({\n variables: {\n id: center.id,\n data: [...team]\n }\n });\n }\n };\n if (!loading)\n return (\n \n \n \n setName(e.target.value)}\n />\n\n
\n\n \n \n {saveLoading && }\n {!saveLoading && l1.saveChanges}\n \n
\n \n \n التسجيل في المركز
\n setOpenToRegistration(e.target.checked)}\n />} label={l1.centerIsOpenToRegistration} />\n \n\n \n الرؤية
\n setVision(e.target.value)}\n />\n \n \n الرسالة
\n setMessage(e.target.value)}\n />\n \n\n \n القيم
\n \n \n
\n\n \n setDescription(e.target.value)}\n />\n \n \n رابط الفيديو\n \n setVideo(e.target.value)}\n />\n \n \n \n \n \n \n
\n تم فتح باب التسجيل\n
\n
setAlertSignup(e.target.value)}\n />\n \n \n إشترك\n \n
\n \n
أحدث النشاطات
\n
\n */}\n {/* \n \n
{\n if (carouselIndex.courses + 1 > 4) {\n carouselActivities.current.goTo(0);\n setcarouselIndex({ ...carouselIndex, courses: 1 });\n } else {\n carouselActivities.current.slideNext();\n setcarouselIndex({\n ...carouselIndex,\n courses: carouselIndex.courses + 1,\n });\n }\n }}\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 16 16\"\n className=\"bi bi-chevron-right arrow\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n \n \n {\n if (carouselIndex.courses - 1 < 1) {\n carouselActivities.current.goTo(4);\n setcarouselIndex({ ...carouselIndex, courses: 4 });\n } else {\n carouselActivities.current.slidePrev();\n setcarouselIndex({\n ...carouselIndex,\n courses: carouselIndex.courses - 1,\n });\n }\n }}\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 16 16\"\n className=\"bi bi-chevron-left arrow\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n \n \n \n
معرض الصور
\n
\n \n \n {gallery ? returnGallery() : null}\n
\n {\n inputRef.current.click();\n }}\n startIcon={}\n disabled={uploadGalleryLoading}\n style={{ marginLeft: \"10px\" }}\n >\n {uploadGalleryLoading && }\n {!uploadGalleryLoading && l1.chooseFromComputer}\n \n {\n handleDeleteImages();\n }}\n startIcon={}\n disabled={\n deleteGalleryLoading ||\n gallery?.filter(image => image.isSelected === true).length ===\n 0\n }\n >\n {deleteGalleryLoading && }\n {!deleteGalleryLoading && l1.deleteImages}\n \n {\n setUploadGalleryLoading(true);\n uploadToGallery({\n variables: {\n file: e.target.files[0]\n }\n });\n }}\n />\n \n \n\n \n \n
معلومات الإتصال
\n
\n \n\n \n \n العنوان
\n setAddress(e.target.value)}\n />\n\n الايميل
\n setEmail(e.target.value)}\n />\n أرقام الهواتف
\n \n \n \n مواقع التواصل
\n \n setYoutube(e.target.value)}\n InputProps={{\n startAdornment: (\n \n \n \n )\n }}\n />\n setTwitter(e.target.value)}\n InputProps={{\n startAdornment: (\n \n \n \n )\n }}\n />\n setLinkedin(e.target.value)}\n InputProps={{\n startAdornment: (\n \n \n \n )\n }}\n />\n setInstagram(e.target.value)}\n InputProps={{\n startAdornment: (\n \n \n \n )\n }}\n />\n setFacebook(e.target.value)}\n InputProps={{\n startAdornment: (\n \n \n \n )\n }}\n />\n \n \n
\n \n \n {\n setAlertSuccess(false);\n }}\n autoHideDuration={3000}\n >\n \n {alertSuccess}\n \n \n {\n setAlertFailure(false);\n }}\n autoHideDuration={3000}\n >\n \n {alertFailure}\n \n \n \n \n {\n // setValue(newValue);\n // }}\n >\n {/* */}\n \n {saveLoading ? : l1.saveChanges}\n \n \n \n \n );\n return ;\n}\n","import React, { useContext, useReducer, useState } from \"react\";\nimport { l1 } from \"../../local.json\";\nimport {\n Button,\n Dialog,\n Typography,\n AppBar,\n Toolbar,\n IconButton,\n Container,\n TextField,\n BottomNavigation,\n BottomNavigationAction,\n Paper,\n CircularProgress\n} from \"@material-ui/core\";\nimport CloseIcon from \"@material-ui/icons/Close\";\nimport Drafter2 from \"../../common/Drafter2\";\nimport CropeImage from \"../../UserPages/ImageCrop\";\nfunction EditEvent({\n classes,\n create,\n reverseCreate,\n saveAllChanges,\n setEventImageId,\n eventImage,\n setEventImage,\n eventTitle,\n eventContent,\n eventExcerpt,\n setTitle,\n setContent,\n setExcerpt,\n saveLoading,\n edit\n}) {\n console.log(\"eventContent\", eventContent);\n return (\n <>\n {/* dialog for create event */}\n \n {/* dialog for create event */}\n \n );\n}\n\nexport default EditEvent;\n","import React, { useContext, useReducer, useState } from \"react\";\nimport { l1 } from \"../../local.json\";\nimport {\n Avatar,\n Box,\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Grid,\n makeStyles,\n Typography,\n AppBar,\n Toolbar,\n List,\n ListItem,\n ListItemText,\n Devider,\n IconButton,\n Divider,\n Container,\n TextField,\n BottomNavigation,\n BottomNavigationAction,\n Paper,\n CircularProgress,\n Snackbar\n} from \"@material-ui/core\";\nimport MuiAlert from \"@material-ui/lab/Alert\";\n\nimport CloseIcon from \"@material-ui/icons/Close\";\nimport TopBar from \"../../common/TopBar\";\nimport { gql, useQuery, useMutation, useLazyQuery } from \"@apollo/client\";\n\nimport Loading from \"../../common/Loading\";\nimport { Navigation } from \"../../../Context\";\nimport TopicSection from \"../class/components/TopicSection\";\nimport EditEvent from \"./EditEvent\";\n\nconst useStyles = makeStyles(theme => ({\n highOrder: {\n margin: theme.spacing(5, 30)\n },\n headContainer: {\n //margin: theme.spacing(0, 10),\n padding: theme.spacing(2),\n marginBottom: theme.spacing(2),\n border: `1px solid ${theme.palette.grey[100]}`,\n background: `${theme.palette.grey[\"50\"]}30`,\n borderRadius: theme.spacing(2)\n },\n text: {\n color: theme.palette.primary.main,\n fontWeight: 600\n },\n iconHead: {\n color: \"#44566c\",\n margin: theme.spacing(0, 1)\n },\n container: {\n border: `1px solid ${theme.palette.grey[300]}`,\n borderRadius: theme.spacing(1),\n padding: theme.spacing(1),\n background: \"white\",\n marginBottom: theme.spacing(1),\n cursor: \"pointer\"\n },\n avatar: {\n margin: theme.spacing(0, 1)\n },\n nameText: {},\n nameName: {\n color: \"#44566c\"\n },\n menuItem: {\n paddingRight: theme.spacing(10)\n },\n nameTitle: {\n color: \"#44566c\",\n fontSize: theme.spacing(1.4)\n },\n idId: {\n color: \"#8697a8\"\n },\n address: {\n color: \"#44566c\"\n },\n icon: {\n fontSize: theme.spacing(3),\n color: \"#8697a8\",\n marginLeft: theme.spacing(3)\n },\n create: {\n marginLeft: \"240px\",\n marginTop: \"30px\",\n width: \"150px\"\n },\n createDialogContent: {\n marginTop: \"100px\",\n display: \"flex\",\n flexDirection: \"column\"\n },\n eventImage: {\n width: \"100px\",\n marginTop: \"20px\"\n }\n}));\n\nconst CREATE_EVENT = gql`\n mutation createEvent($data: CenterEventInput!) {\n createCenterEvent(input: { data: $data }) {\n centerEvent {\n id\n }\n }\n }\n`;\nconst GET_EVENTS = gql`\n query getEvents($subdomain: String!) {\n centersLists(where: { subdomain: $subdomain }) {\n events {\n id\n title\n content\n image {\n url\n }\n excerpt\n createdAt\n updatedAt\n }\n }\n }\n`;\nconst GET_EVENT = gql`\n query getEvent($id: ID!) {\n centerEvent(id: $id) {\n id\n title\n content\n excerpt\n image {\n id\n url\n }\n }\n }\n`;\nconst UPDATE_EVENT = gql`\n mutation updateEvent($id: ID!, $data: editCenterEventInput!) {\n updateCenterEvent(input: { where: { id: $id }, data: $data }) {\n centerEvent {\n id\n }\n }\n }\n`;\nconst DELETE_EVENT = gql`\n mutation DeleteEvent($id: ID!) {\n deleteCenterEvent(input: { where: { id: $id } }) {\n centerEvent {\n id\n }\n }\n }\n`;\nfunction Events() {\n const [create, setCreate] = useState(null);\n const [edit, setEdit] = useState(false);\n const [eventId, setEventId] = useState(null);\n const [eventTitle, setTitle] = useState(null);\n const [eventContent, setContent] = useState(null);\n const [eventExcerpt, setExcerpt] = useState(null);\n const [saveLoading, setSaveLoading] = useState(null);\n const [eventImageId, setEventImageId] = useState(null);\n const [eventImage, setEventImage] = useState(null);\n const [alertSuccess, setAlertSuccess] = useState(false);\n const [alertFailure, setAlertFailure] = useState(false);\n\n const reverseCreate = () => {\n setCreate(!create);\n };\n const { centerId, sub } = useContext(Navigation);\n //Apollo\n const { loading, data, refetch } = useQuery(GET_EVENTS, {\n notifyOnNetworkStatusChange: true,\n variables: {\n id: centerId,\n subdomain: sub\n }\n });\n const [getEvent, { loading: getEventLoading }] = useLazyQuery(GET_EVENT, {\n onError: err => {\n console.log(\"error when getting one event\", err);\n },\n onCompleted: data => {\n console.log(\"data\", data);\n setTitle(data.centerEvent.title);\n setContent(data.centerEvent.content);\n setExcerpt(data.centerEvent.excerpt);\n setEventImage(data.centerEvent.image.url);\n setEventId(data.centerEvent.id);\n setEventImageId(data.centerEvent.image.id);\n setEdit(true);\n reverseCreate();\n }\n });\n const [deleteEvent, { loading: loadingDelete }] = useMutation(DELETE_EVENT, {\n onError: err => {\n console.log(\"error when deleting event\", err);\n setAlertFailure(l1.failure);\n },\n onCompleted: () => {\n setAlertSuccess(l1.editsuccess);\n refetch();\n }\n });\n const [createEvent, { loading: loadingCreate }] = useMutation(CREATE_EVENT, {\n onError: err => {\n console.log(\"error on creating event\", err);\n setAlertFailure(l1.failure);\n },\n onCompleted: data => {\n console.log(\"created with success\", data);\n setAlertSuccess(l1.editsuccess);\n reverseCreate();\n refetch();\n }\n });\n const [updateEvent, { loading: loadingUpdate }] = useMutation(UPDATE_EVENT, {\n onError: err => {\n console.log(\"error when updating event\", err);\n setAlertFailure(l1.failure);\n },\n onCompleted: data => {\n console.log(\"updated with sucess\", data);\n setAlertSuccess(l1.editsuccess);\n reverseCreate();\n refetch();\n }\n });\n const saveAllChanges = () => {\n console.log(\"save changes\");\n if (edit) {\n updateEvent({\n variables: {\n id: eventId,\n data: {\n title: eventTitle,\n content: eventContent,\n excerpt: eventExcerpt,\n image: eventImageId\n }\n }\n });\n } else {\n createEvent({\n variables: {\n data: {\n title: eventTitle,\n content: eventContent,\n excerpt: eventExcerpt,\n image: eventImageId,\n center: centerId\n }\n }\n });\n }\n };\n const editEvent = id => {\n getEvent({\n variables: { id: id }\n });\n };\n const classes = useStyles();\n if (loading || loadingDelete || getEventLoading || loadingUpdate)\n return ;\n else {\n const events = data?.centersLists[0]?.events;\n return (\n \n \n \n {l1.add}\n \n \n \n \n \n {l1.image}\n \n \n \n \n {l1.title}\n \n \n \n \n {l1.excerpt}\n \n \n\n \n \n {events &&\n events?.map(event => (\n \n ))}\n \n \n {\n setAlertSuccess(false);\n }}\n autoHideDuration={3000}\n >\n \n {alertSuccess}\n \n \n {\n setAlertFailure(false);\n }}\n autoHideDuration={3000}\n >\n \n {alertFailure}\n \n \n \n );\n }\n\n function TableRow({ id, title, image, excerpt }) {\n // Options Logic\n\n // Confirmation Dialog Logic\n const [confirmationState, reverseConfirmationState] = useReducer(\n state => !state,\n false\n );\n const [confirmationBanState, reverseConfirmationBanState] = useReducer(\n state => !state,\n false\n );\n const classes = useStyles();\n return (\n \n \n \n \n \n {/* {id} */}\n \n \n \n \n \n {title}\n \n \n {excerpt}\n \n\n \n {\n editEvent(id);\n }}\n >\n {l1.edit}\n \n \n {l1.delete}\n \n \n \n\n \n \n );\n }\n}\nexport default Events;\n","import React, { useState, useEffect } from \"react\";\nimport {\n Avatar,\n Typography,\n Box,\n Dialog,\n DialogContent,\n LinearProgress,\n makeStyles,\n TextField,\n Checkbox,\n DialogActions,\n Button,\n} from \"@material-ui/core\";\nimport { gql, useMutation, useQuery } from \"@apollo/client\";\nimport { l1 } from \"../local.json\";\n\n// const GET_CENTER_STUDENTS = gql`\n// query QueryCenterPeople($id: ID!) {\n// centersList(id: $id) {\n// students {\n// id\n// fullname\n// avatar\n// }\n// }\n// }\n// `;\nconst GET_CENTER_MEMBERS = gql`\n query QueryCenterMembers($id: ID!) {\n centersLists(where: { id: $id }) {\n memberships(where: { status: \"ACTIVE\", role: \"member\" }) {\n id\n user {\n id\n fullname\n avatar\n }\n role\n }\n }\n }\n`;\n\nconst ADD_ADMINS = gql`\n mutation AddAdmins($ids: [ID!]!) {\n updateMemberships(ids: $ids, data: { role: moderator })\n }\n`;\n\nconst useStyles = makeStyles((theme) => ({\n dialogContent: {\n margin: theme.spacing(2),\n },\n search: {\n margin: theme.spacing(2, 30),\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n },\n nameContainer: {\n marginBottom: theme.spacing(1),\n border: \"1px solid lightgrey\",\n padding: theme.spacing(1),\n borderRadius: theme.spacing(1),\n },\n avatar: {\n marginRight: theme.spacing(2),\n },\n}));\n\nfunction SearchMembers({ refetch, ready, reverseReady, centerId }) {\n const [search, setSearch] = useState(\"\");\n const [result, setResult] = useState([]);\n const [selected, setSelected] = useState([]);\n\n const { loading, data } = useQuery(GET_CENTER_MEMBERS, {\n onError: (error) => console.error(\"QueryMembershipError: \", error),\n variables: {\n id: centerId,\n },\n onCompleted: () => {\n setResult(\n data?.centersLists[0]?.memberships?.filter(({ user, role }) =>\n user.fullname?.includes(search)\n )\n );\n },\n });\n\n const [addAdmins] = useMutation(ADD_ADMINS, {\n onCompleted: (data) => {\n reverseReady();\n setSelected([]);\n refetch();\n },\n });\n console.log({ selected });\n useEffect(() => {\n console.log(\"data\", data?.centersLists[0]?.memberships);\n // data?.centersLists[0].memberships?.forEach((user) => {\n // const foundIt = user?.memberships?.search(search) !== -1;\n // if (search && foundIt) arr.push(user);\n // return arr;\n // });\n // setResult(arr);\n setResult(\n data?.centersLists[0]?.memberships?.filter(({ user }) =>\n user.fullname?.includes(search)\n )\n );\n }, [search]);\n\n const classes = useStyles();\n return (\n \n \n \n {loading ? (\n \n ) : (\n {\n setSearch(e.target.value);\n }}\n />\n )}\n \n \n {!result?.length ? (\n \n {l1.noMember}\n \n ) : (\n result?.map((i) => (\n \n {\n if (e.target.checked) {\n setSelected([...selected, i]);\n } else {\n setSelected(selected.filter((j) => j.id !== i.id));\n }\n }}\n />\n \n \n {i.user.fullname}\n \n \n ))\n )}\n {selected ? (\n \n ) : null}\n {selected.map((i) => (\n \n \n \n {i.fullname}\n \n setSelected(selected.filter((j) => j.id !== i.id))}\n >\n {l1.delete}\n \n \n ))}\n \n \n {\n addAdmins({\n variables: {\n ids: selected.map(({ id }) => id),\n },\n });\n }}\n >\n {l1.add}\n \n \n \n \n );\n}\nexport default SearchMembers;\n","import React from \"react\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport List from \"@material-ui/core/List\";\nimport ListItem from \"@material-ui/core/ListItem\";\nimport ListItemText from \"@material-ui/core/ListItemText\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport Menu from \"@material-ui/core/Menu\";\nimport { l1 } from \"../local.json\";\nimport { Box } from \"@material-ui/core\";\nimport {\n ArrowDropDownCircleSharp,\n ArrowDropUpSharp,\n Edit,\n} from \"@material-ui/icons\";\nimport { BiChevronDown } from \"react-icons/bi\";\n\nexport default function EditableChoice({ choices, initialChoice, onChange }) {\n const [anchorEl, setAnchorEl] = React.useState(null);\n const [selectedOption, setSelectedOption] = React.useState(initialChoice);\n\n const handleClickListItem = (event) => {\n setSelectedOption(selectedOption);\n setAnchorEl(event.currentTarget);\n };\n\n const handleMenuItemClick = (value) => {\n setAnchorEl(null);\n onChange(value);\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n return (\n \n \n \n {choices.find(({ value }) => selectedOption === value)?.label ?? '؟؟؟'}\n \n \n \n
\n \n );\n}\n","import React, { useContext, useReducer } from \"react\";\nimport { l1 } from \"../../local.json\";\nimport {\n Avatar,\n Box,\n Button,\n Grid,\n makeStyles,\n Typography,\n} from \"@material-ui/core\";\nimport TopBar from \"../../common/TopBar\";\nimport { gql, useQuery, useMutation } from \"@apollo/client\";\nimport Loading from \"../../common/Loading\";\nimport { Navigation } from \"../../../Context\";\nimport { RequireCenterAdmin } from \"../../../Auth/gates\";\nimport SearchMembers from \"../../common/SearchMembers\";\nimport EditableChoice from \"../../common/EditableChoice\";\nimport { useHistory } from \"react-router-dom\";\nimport ConfirmationDialog, {\n useConfirmationDialog,\n} from \"../../common/ConfirmationDialog\";\n\nconst useStyles = makeStyles((theme) => ({\n highOrder: {\n margin: theme.spacing(10, 30),\n },\n headContainer: {\n //margin: theme.spacing(0, 10),\n padding: theme.spacing(2),\n marginBottom: theme.spacing(2),\n border: `1px solid ${theme.palette.grey[100]}`,\n background: `${theme.palette.grey[\"50\"]}30`,\n borderRadius: theme.spacing(2),\n },\n text: {\n color: theme.palette.primary.main,\n fontWeight: 600,\n },\n iconHead: {\n color: \"#44566c\",\n margin: theme.spacing(0, 1),\n },\n container: {\n border: `1px solid ${theme.palette.grey[300]}`,\n borderRadius: theme.spacing(1),\n padding: theme.spacing(1),\n background: \"white\",\n marginBottom: theme.spacing(1),\n },\n avatar: {\n margin: theme.spacing(0, 1),\n },\n nameText: {},\n nameName: {\n color: \"#44566c\",\n },\n menuItem: {\n paddingRight: theme.spacing(10),\n },\n nameTitle: {\n color: \"#44566c\",\n fontSize: theme.spacing(1.4),\n },\n idId: {\n color: \"#8697a8\",\n },\n address: {\n color: \"#44566c\",\n },\n icon: {\n fontSize: theme.spacing(3),\n color: \"#8697a8\",\n marginLeft: theme.spacing(3),\n },\n title: {\n fontSize: theme.spacing(3),\n fontWeight: 600,\n color: theme.palette.grey[700],\n },\n label: {\n marginLeft: theme.spacing(4),\n },\n paper: {\n padding: theme.spacing(3),\n margin: theme.spacing(4),\n },\n}));\n\nconst GET_STAFF = gql`\n query GetStaff($id: ID!) {\n centersList(id: $id) {\n memberships(\n sort: \"role:desc\"\n where: { status: \"ACTIVE\", role_ne: \"member\" }\n ) {\n id\n fullname\n school\n specialty\n email\n field\n afterGraduate\n homeTel\n mobileTel\n hobbies\n birthDate\n object\n college\n address\n user {\n id\n username\n }\n status\n role\n }\n }\n }\n`;\n\nconst UPDATE_CENTER_OWNER = gql`\n mutation updateCenterOwner($centerId: ID!, $ownerId: ID!) {\n updateCentersList(\n input: { where: { id: $centerId }, data: { owner: $ownerId } }\n ) {\n centersList {\n id\n }\n }\n }\n`;\n\nconst UPDATE_ROLE = gql`\n mutation updateRole($id: ID!, $role: ENUM_MEMBERSHIP_ROLE!) {\n updateMembership(input: { where: { id: $id }, data: { role: $role } }) {\n membership {\n id\n role\n }\n }\n }\n`;\n\nfunction Staff() {\n //Apollo\n const { centerId } = useContext(Navigation);\n\n const { loading, data, refetch } = useQuery(GET_STAFF, {\n notifyOnNetworkStatusChange: true,\n variables: {\n id: centerId,\n },\n });\n\n const history = useHistory();\n const [updateRole, { loading: loadingUpdateRole }] = useMutation(\n UPDATE_ROLE,\n {\n onCompleted: () => {\n refetch();\n },\n onError: (err) => {\n console.log(err);\n },\n }\n );\n const [updateCenterOwner, { loading: loadingUpdateOwner }] = useMutation(\n UPDATE_CENTER_OWNER,\n {\n onCompleted: () => {\n history.go(0);\n },\n onError: (err) => {\n console.log(err);\n },\n }\n );\n const { dialogProps, confirmationDialog } = useConfirmationDialog();\n const [add, reverseAdd] = useReducer((current) => !current, false);\n const classes = useStyles();\n if (loading || loadingUpdateRole || loadingUpdateOwner) return ;\n else {\n const membership = data.centersList.memberships;\n return (\n \n \n \n \n \n \n \n {l1.add}\n \n \n \n \n \n\n \n \n \n {l1.username}\n \n \n \n \n {l1.id}\n \n \n \n \n {l1.email}\n \n \n \n \n {l1.role}\n \n \n\n \n \n {membership.map(({ id, fullname, email, user, role }) => (\n \n \n \n \n \n ))}\n \n \n \n );\n }\n\n function TableRow({ name, email, id, user, role }) {\n const classes = useStyles();\n return (\n \n \n \n \n \n \n {name}\n \n \n \n \n \n {id}\n \n \n \n \n {email}\n \n \n \n \n \n {role === \"owner\" ? (\n l1[role]\n ) : (\n ({\n value,\n label: l1[value],\n }))}\n initialChoice={role ?? 'moderator'}\n onChange={(newRole) =>\n updateRole({\n variables: {\n id,\n role: newRole,\n },\n })\n }\n />\n )}\n \n \n \n \n \n \n {role !== \"owner\" && (\n <>\n {\n confirmationDialog({\n title: l1.setAsOwner,\n content: l1.confirmation,\n onConfirm: () => {\n updateCenterOwner({\n variables: {\n centerId: centerId,\n ownerId: user.id,\n },\n });\n },\n });\n }}\n >\n {l1.setAsOwner}\n \n\n {\n confirmationDialog({\n title: l1.removeFromStaff,\n content: l1.confirmation,\n onConfirm: () => {\n updateRole({\n variables: {\n id,\n role: \"member\",\n },\n });\n },\n });\n }}\n >\n {l1.removeFromStaff}\n \n \n )}\n \n \n \n \n \n );\n }\n}\n\nexport default Staff;\n","import React, { useContext, useReducer, useState } from 'react';\nimport { l1 } from '../../local.json';\nimport {\n Avatar,\n Box,\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Grid,\n makeStyles,\n Typography,\n} from '@material-ui/core';\nimport TopBar from '../../common/TopBar';\nimport { gql, useQuery, useMutation } from '@apollo/client';\nimport Loading from '../../common/Loading';\nimport { Navigation } from '../../../Context';\nimport TopicSection from '../class/components/TopicSection';\n\nconst useStyles = makeStyles((theme) => ({\n highOrder: {\n margin: theme.spacing(10, 30),\n },\n headContainer: {\n //margin: theme.spacing(0, 10),\n padding: theme.spacing(2),\n marginBottom: theme.spacing(2),\n border: `1px solid ${theme.palette.grey[100]}`,\n background: `${theme.palette.grey['50']}30`,\n borderRadius: theme.spacing(2),\n },\n text: {\n color: theme.palette.primary.main,\n fontWeight: 600,\n },\n iconHead: {\n color: '#44566c',\n margin: theme.spacing(0, 1),\n },\n container: {\n border: `1px solid ${theme.palette.grey[300]}`,\n borderRadius: theme.spacing(1),\n padding: theme.spacing(1),\n background: 'white',\n marginBottom: theme.spacing(1),\n cursor: 'pointer',\n },\n avatar: {\n margin: theme.spacing(0, 1),\n },\n nameText: {},\n nameName: {\n color: '#44566c',\n },\n menuItem: {\n paddingRight: theme.spacing(10),\n },\n nameTitle: {\n color: '#44566c',\n fontSize: theme.spacing(1.4),\n },\n idId: {\n color: '#8697a8',\n },\n address: {\n color: '#44566c',\n },\n icon: {\n fontSize: theme.spacing(3),\n color: '#8697a8',\n marginLeft: theme.spacing(3),\n },\n}));\n\nconst GET_TEACHERS = gql`\n query GetTeachers($id: ID!) {\n centersList(id: $id) {\n classes(where: { isArchived: false }) {\n id\n name\n slug\n teachers {\n id\n fullname\n email\n }\n }\n }\n }\n`;\nconst DELETE_TEACHER = gql`\n mutation DeleteTeacher($id: ID!, $data: editClassInput!) {\n updateClass(input: { data: $data, where: { id: $id } }) {\n class {\n id\n }\n }\n }\n`;\n\nfunction Teachers() {\n const { centerId } = useContext(Navigation);\n\n //Apollo\n const { loading, data, refetch } = useQuery(GET_TEACHERS, {\n notifyOnNetworkStatusChange: true,\n variables: {\n id: centerId,\n },\n });\n const [deleteTeacher, { loading: loadingDelete }] = useMutation(DELETE_TEACHER, {\n onCompleted: () => refetch(),\n });\n const classes = useStyles();\n if (loading || loadingDelete) return ;\n else {\n const centerClasses = data?.centersList?.classes;\n return (\n \n \n \n {centerClasses.map((i) => (\n \n \n \n \n {l1.username}\n \n \n \n \n {l1.id}\n \n \n \n \n {l1.email}\n \n \n\n \n \n {i.teachers.map(({ fullname, email, id }) => (\n \n ))}\n \n ))}\n \n \n );\n }\n\n function TableRow({ name, email, id, data }) {\n // Options Logic\n\n // Confirmation Dialog Logic\n const [confirmationState, reverseConfirmationState] = useReducer((state) => !state, false);\n const [confirmationBanState, reverseConfirmationBanState] = useReducer((state) => !state, false);\n const classes = useStyles();\n return (\n \n \n \n \n \n \n {name}\n \n \n \n \n {id}\n \n \n {email}\n \n\n \n \n \n \n\n \n \n );\n }\n}\nexport default Teachers;\n","import React, { useContext, useReducer } from \"react\";\nimport { l1 } from \"../../local.json\";\nimport {\n Avatar,\n Box,\n Button,\n Dialog,\n Grid,\n makeStyles,\n Paper,\n TextField,\n Typography\n} from \"@material-ui/core\";\nimport TopBar from \"../../common/TopBar\";\nimport { gql, useQuery, useMutation } from \"@apollo/client\";\nimport Loading from \"../../common/Loading\";\nimport { Navigation } from \"../../../Context\";\nimport { onError } from \"apollo-link-error\";\n\nconst useStyles = makeStyles(theme => ({\n highOrder: {\n margin: theme.spacing(10, 30)\n },\n headContainer: {\n //margin: theme.spacing(0, 10),\n padding: theme.spacing(2),\n marginBottom: theme.spacing(2),\n border: `1px solid ${theme.palette.grey[100]}`,\n background: `${theme.palette.grey[\"50\"]}30`,\n borderRadius: theme.spacing(2)\n },\n text: {\n color: theme.palette.primary.main,\n fontWeight: 600\n },\n iconHead: {\n color: \"#44566c\",\n margin: theme.spacing(0, 1)\n },\n container: {\n border: `1px solid ${theme.palette.grey[300]}`,\n borderRadius: theme.spacing(1),\n padding: theme.spacing(1),\n background: \"white\",\n marginBottom: theme.spacing(1),\n cursor: \"pointer\"\n },\n avatar: {\n margin: theme.spacing(0, 1)\n },\n nameText: {},\n nameName: {\n color: \"#44566c\"\n },\n menuItem: {\n paddingRight: theme.spacing(10)\n },\n nameTitle: {\n color: \"#44566c\",\n fontSize: theme.spacing(1.4)\n },\n idId: {\n color: \"#8697a8\"\n },\n address: {\n color: \"#44566c\"\n },\n icon: {\n fontSize: theme.spacing(3),\n color: \"#8697a8\",\n marginLeft: theme.spacing(3)\n },\n title: {\n fontSize: theme.spacing(3),\n fontWeight: 600,\n color: theme.palette.grey[700]\n },\n label: {\n marginLeft: theme.spacing(4)\n },\n paper: {\n padding: theme.spacing(3),\n margin: theme.spacing(4)\n }\n}));\n\nconst GET_WAITING_LIST = gql`\n query GetWaitingList($id: ID!) {\n centersList(id: $id) {\n memberships(sort: \"createdAt:desc\", where: { status: \"REQUESTED\" }) {\n id\n fullname\n school\n specialty\n email\n field\n afterGraduate\n homeTel\n mobileTel\n hobbies\n birthDate\n object\n college\n address\n user {\n id\n username\n }\n status\n }\n }\n }\n`;\n\nconst REJECT = gql`\n mutation Reject($id: ID!) {\n deleteMembership(input: { where: { id: $id } }) {\n membership {\n id\n }\n }\n }\n`;\nconst APPROVE = gql`\n mutation Approve($id: ID!) {\n updateMembership(input: { where: { id: $id }, data: { status: ACTIVE } }) {\n membership {\n id\n status\n }\n }\n }\n`;\n\nfunction Waiting() {\n //Apollo\n const { centerId, info } = useContext(Navigation);\n\n const { loading, data, refetch } = useQuery(GET_WAITING_LIST, {\n notifyOnNetworkStatusChange: true,\n variables: {\n id: centerId\n }\n });\n\n const [reject, { loading: loadingReject }] = useMutation(REJECT, {\n onCompleted: () => refetch()\n });\n const [approve, { loading: loadingApprove }] = useMutation(APPROVE, {\n onCompleted: () => {\n // reject({\n // variables: {\n // id: selected\n // }\n // });\n console.log(\"it has been approved\");\n refetch();\n },\n onError: err => {\n console.log(err);\n }\n });\n const [state, reverseState] = useReducer(s => !s, false);\n const [selected, setSelected] = React.useState(null);\n const classes = useStyles();\n if (loading || loadingReject || loadingApprove) return ;\n else {\n const membership = data.centersList.memberships;\n return (\n \n \n \n \n \n \n {l1.username}\n \n \n \n \n {l1.id}\n \n \n \n \n {l1.email}\n \n \n\n \n \n {membership.map(\n ({\n id,\n fullname,\n school,\n specialty,\n email,\n field,\n afterGraduate,\n homeTel,\n mobileTel,\n hobbies,\n birthDate,\n object,\n college,\n address,\n user,\n status\n }) => (\n <>\n \n \n \n \n \n )\n )}\n \n \n );\n }\n\n function TableRow({ name, email, id, reverse, user }) {\n const classes = useStyles();\n return (\n \n \n \n \n \n \n {name}\n \n \n \n \n {id}\n \n \n {email}\n \n\n \n \n {\n setSelected(id);\n // const ids = [];\n // const raw = info.students;\n\n // raw.map(({ id }) => ids.push(id));\n // console.log(\"raw is \", raw);\n // const target = user.id;\n // ids.push(target);\n console.log(\"id is \", id);\n approve({\n variables: {\n id: id\n }\n });\n }}\n >\n {l1.apporve}\n \n {\n reject({\n variables: {\n id\n }\n });\n }}\n >\n {l1.reject}\n \n \n \n \n \n );\n }\n}\nexport const UserInfo = ({\n state,\n reverseState,\n fullname,\n birthDate,\n school,\n college,\n specialty,\n address,\n homeTel,\n mobileTel,\n email,\n object,\n field,\n hobbies,\n afterGraduate,\n approve,\n id\n}) => {\n const classes = useStyles();\n return (\n \n );\n};\nexport default Waiting;\n","import React, { useContext, useReducer } from \"react\";\nimport { l1 } from \"../../local.json\";\n\nimport {\n Box,\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogContentText,\n Grid,\n makeStyles,\n Paper,\n TextField,\n Typography\n} from \"@material-ui/core\";\nimport { Formik } from \"formik\";\nimport * as Yup from \"yup\";\nimport { gql, useMutation } from \"@apollo/client\";\nimport Loading from \"../../common/Loading\";\nimport { useHistory } from 'react-router-dom';\nimport { Navigation } from \"../../../Context\";\n\nconst useStyles = makeStyles(theme => ({\n container: {},\n paper: {\n padding: theme.spacing(3),\n margin: theme.spacing(4)\n },\n title: {\n fontSize: theme.spacing(3),\n fontWeight: 600,\n color: theme.palette.grey[700]\n },\n label: {\n marginLeft: theme.spacing(4)\n },\n button: {\n margin: theme.spacing(2, 30)\n },\n text: {\n fontSize: theme.spacing(3),\n fontWeight: 600,\n color: theme.palette.primary.main\n }\n}));\n\nconst SEND_TO_WAITING_LIST = gql`\n mutation SendToWaitingList(\n $fullname: String!\n $birthDate: Date!\n $school: String!\n $college: String!\n $specialty: String!\n $address: String!\n $homeTel: String!\n $mobileTel: String!\n $object: String!\n $field: String!\n $hobbies: String!\n $afterGraduate: String!\n $email: String!\n $center: ID!\n $user: ID!\n ) {\n createMembership(\n input: {\n data: {\n fullname: $fullname\n birthDate: $birthDate\n school: $school\n college: $college\n specialty: $specialty\n address: $address\n homeTel: $homeTel\n mobileTel: $mobileTel\n object: $object\n field: $field\n hobbies: $hobbies\n email: $email\n afterGraduate: $afterGraduate\n center: $center\n user: $user\n role: \"member\",\n status: REQUESTED\n }\n }\n ) {\n membership {\n id\n }\n }\n }\n`;\n\nconst validationSchema = Yup.object().shape({\n email: Yup.string()\n .email(l1.validEmail)\n .required(l1.emailRequired),\n fullname: Yup.string().required(l1.fieldRequired),\n birthDate: Yup.string().required(l1.fieldRequired),\n school: Yup.string().required(l1.fieldRequired),\n college: Yup.string().required(l1.fieldRequired),\n specialty: Yup.string().required(l1.fieldRequired),\n address: Yup.string().required(l1.fieldRequired),\n homeTel: Yup.string().required(l1.fieldRequired),\n mobileTel: Yup.string().required(l1.fieldRequired),\n object: Yup.string().required(l1.fieldRequired),\n field: Yup.string().required(l1.fieldRequired),\n hobbies: Yup.string().required(l1.fieldRequired),\n afterGraduate: Yup.string().required(l1.fieldRequired)\n});\nfunction MembershipForm() {\n const { centerId, user } = useContext(Navigation);\n\n const history = useHistory();\n const [state, reverseState] = useReducer(s => !s, false);\n\n // Apollo\n const [SendToWaitingList, { loading }] = useMutation(SEND_TO_WAITING_LIST, {\n onError: err => console.log(\"SEND_TO_WAITING_LIST\", err),\n onCompleted: reverseState\n });\n\n const classes = useStyles();\n if (loading) return ;\n return (\n \n \n \n {\n console.log(\"val\", values);\n SendToWaitingList({\n variables: {\n fullname: values.fullname,\n birthDate: values.birthDate,\n school: values.school,\n college: values.college,\n specialty: values.specialty,\n address: values.address,\n homeTel: values.homeTel,\n mobileTel: values.mobileTel,\n object: values.object,\n field: values.field,\n hobbies: values.hobbies,\n email: values.email,\n afterGraduate: values.afterGraduate,\n center: centerId,\n user: user.id\n }\n });\n }}\n validationSchema={validationSchema}\n validateOnChange={false}\n validateOnBlur={false}\n >\n {({ handleBlur, values, handleChange, errors, handleSubmit }) => (\n \n \n \n {l1.formTitle}\n \n \n {\n e.preventDefault();\n handleSubmit();\n }}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {l1.confirm}\n \n \n \n \n )}\n \n \n \n \n \n );\n}\n\nexport default MembershipForm;\n","import React from 'react';\nimport {\n Box, IconButton,\n FormControl, InputLabel, Select, MenuItem,\n Typography,\n makeStyles\n} from '@material-ui/core';\n\nimport {FaPlus, FaTimes, FaPen} from 'react-icons/fa';\nimport {l1} from '../../../local.json';\n\nimport moment from 'moment'\nimport 'moment/locale/ar-dz';\nmoment.locale('ar-dz');\n\nconst useStyles = makeStyles(theme => ({\n quizSelector:{\n padding: theme.spacing(2)\n },\n quizSelectorItem:{\n borderTop: \"solid 1px lightgray\",\n display:\"flex\",\n flexDirection: \"column\",\n justifyContent: \"flex-start\",\n textAlign: \"left\",\n '& > *':{\n width: \"100%\",\n },\n '& > p':{\n fontSize: 14,\n },\n \"&.add\":{\n display:\"flex\",\n justifyContent: \"center\",\n flexDirection:\"row\",\n gap: theme.spacing(1),\n padding: theme.spacing(2),\n fontWeight: \"bold\",\n '& > *':{\n width: \"auto\",\n }, \n }\n }\n}))\n\n\n\n\nexport default function QuizSelector({quizzes, selectedQuiz, onQuizSelected, newQuiz}) {\n const c = useStyles()\n return (\n \n {l1.chooseOrCreateQuiz}\n \n {l1.selectQuiz}\n \n {\n \n }\n {\n quizzes.map((quiz, index) =>\n \n )\n }\n \n \n \n )\n}","import React, { useContext, useState } from 'react';\nimport { makeStyles, Box, Typography, IconButton, CircularProgress } from '@material-ui/core';\nimport { FaTimes } from 'react-icons/fa';\nimport { MdAssignment } from 'react-icons/md';\nimport { l1 } from '../../../local.json';\n\nimport QuizSelector from './QuizSelector';\nimport { gql, useQuery, useMutation } from '@apollo/client';\n\nimport moment from 'moment';\nimport 'moment/locale/ar-dz';\nimport { Navigation } from '../../../../Context';\nmoment.locale('ar-dz');\n\nconst useStyles = makeStyles((theme) => ({\n quizCard: {\n border: 'solid 1px lightgray',\n borderRadius: theme.spacing(1),\n height: 100,\n gap: 8,\n overflow: 'hidden',\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover h5': {\n color: theme.palette.primary,\n },\n '& > p': {\n fontSize: 14,\n },\n },\n quizIcon: {\n backgroundColor: 'gray',\n color: 'white',\n padding: theme.spacing(2),\n height: '100%',\n },\n quizCardInfo: {\n padding: theme.spacing(1),\n },\n quizCardInner: {\n padding: theme.spacing(1),\n gap: theme.spacing(1),\n },\n}));\n\nconst GET_CENTER_QUIZZES = gql`\n query CenterQuizzes($centerId: ID!) {\n centersList(id: $centerId) {\n quizzes(sort: \"createdAt:desc\") {\n id\n title\n createdAt\n createdBy {\n username\n }\n }\n }\n }\n`;\n// TODO add createdBy user field\nconst NEW_QUIZ = gql`\n mutation NewQuiz($centerId: ID!) {\n createQuiz(\n input: {\n data: {\n title: \"اختبار جديد\"\n description: \"\"\n instructions: []\n questions: []\n correctAnswers: {}\n assignments: []\n center: $centerId\n }\n }\n ) {\n quiz {\n id\n title\n createdAt\n createdBy {\n username\n }\n }\n }\n }\n`;\n\nexport default function QuizCard({ mode, ...props }) {\n const { centerId } = useContext(Navigation);\n const c = useStyles();\n const [quizzes, setQuizzes] = useState([]);\n const [selectedQuiz, selectQuiz] = useState('');\n\n const [errorMessage, setErrorMessage] = useState(null);\n const { loading: loadingQuizzes } = useQuery(GET_CENTER_QUIZZES, {\n onError: (error) => {\n setErrorMessage(error);\n console.log('QueryQuizzesError: ', error);\n },\n onCompleted: (data) => {\n console.log('QueryCenterQuizzesData: ', data);\n setQuizzes(data.centersList.quizzes);\n setQuizSelectorReady(true);\n },\n fetchPolicy: 'cache',\n variables: {\n centerId,\n },\n });\n\n const [quizSelectorReady, setQuizSelectorReady] = useState(false);\n\n const editQuiz = (id) => {\n let path = window.location.protocol + '//' + window.location.host + '/quiz/' + id;\n window.open(path, 'edit-quiz');\n };\n\n const [createNewQuiz, { loading: creatingNewQuiz }] = useMutation(NEW_QUIZ, {\n variables: {\n centerId,\n },\n onError: (error) => {\n console.warn('MutationNewQuiz error: ', error);\n setErrorMessage(error);\n },\n onCompleted: (data) => {\n console.log('MutationNewQuiz data: ', data);\n setQuizzes([data.createQuiz.quiz].concat(...quizzes));\n selectQuiz(data.createQuiz.quiz.id);\n props.setQuiz(data.createQuiz.quiz.id);\n setErrorMessage(null);\n\n editQuiz(data.createQuiz.quiz.id);\n },\n });\n\n const selectOrCreateQuiz = (event) => {\n if (event.target.value === '+') {\n createNewQuiz();\n } else {\n selectQuiz(event.target.value);\n props.setQuiz(event.target.value);\n }\n };\n const quizInfo = selectedQuiz.length > 0 ? quizzes.filter((quiz) => selectedQuiz === quiz.id)[0] : {};\n console.log(selectedQuiz, quizInfo);\n return mode === 'edit' ? (\n selectedQuiz.length > 1 ? (\n {\n editQuiz(selectedQuiz);\n }}\n >\n \n \n \n \n {quizInfo.title}\n \n {l1.createdBy} @{'moatezz' /*quiz.createdBy.username*/}\n \n {moment(quizInfo.createdAt).fromNow()}\n \n \n {\n event.stopPropagation();\n selectQuiz('');\n props.setQuiz('');\n }}\n >\n \n \n \n \n ) : (\n \n {creatingNewQuiz ? (\n \n \n {l1.creatingQuiz}\n \n ) : quizSelectorReady ? (\n \n \n \n ) : loadingQuizzes ? (\n \n \n {l1.loadingQuizList}\n \n ) : errorMessage ? (\n l1.anErrorHappened + '. ' + l1.refreshToRetry\n ) : null}\n \n )\n ) : (\n 'Mode not implemented yet'\n );\n}\n","import React, { useContext, useEffect, useReducer, useRef, useState } from \"react\";\nimport {\n Box,\n Button,\n Dialog,\n DialogContent,\n DialogTitle,\n Divider,\n Grid,\n IconButton,\n makeStyles,\n Menu,\n MenuItem,\n TextField,\n Typography\n} from \"@material-ui/core\";\nimport { FaRegQuestionCircle } from \"react-icons/fa\";\nimport { IoAdd } from \"react-icons/io5\";\nimport { MdAssignment, MdAssignmentTurnedIn } from \"react-icons/md\";\nimport { RiQuestionnaireLine } from \"react-icons/ri\";\nimport { IoMdArrowDropdown } from \"react-icons/io\";\nimport { GrClose } from \"react-icons/gr\";\nimport { BiBookBookmark } from \"react-icons/bi\";\nimport { BsListUl } from \"react-icons/bs\";\nimport { HiMenuAlt3 } from \"react-icons/hi\";\nimport { l1 } from \"../../../local.json\";\nimport { gql, useMutation } from \"@apollo/client\";\nimport { LoadingState, Navigation } from \"../../../../Context\";\nimport { useParams } from \"react-router-dom\";\nimport Drafter2 from \"../../../common/Drafter2\";\nimport QuizCard from \"./QuizCard\";\n\nconst useStyles = makeStyles(theme => ({\n create: {\n padding: theme.spacing(1.4, 3.8),\n borderRadius: theme.spacing(4)\n },\n menu: {\n marginTop: theme.spacing(7.5)\n },\n menuTopics: {\n marginTop: theme.spacing(1),\n height: \"auto\",\n \"&>*\": {\n width: \"inherit\"\n }\n },\n icon: {\n color: theme.palette.primary.main,\n fontSize: theme.spacing(4),\n marginRight: theme.spacing(1)\n },\n menuText: {\n paddingRight: theme.spacing(4)\n },\n // Dialog\n titleContainer: {\n maxHeight: theme.spacing(3)\n },\n title: {\n fontSize: theme.spacing(2.4),\n fontWeight: 600,\n marginLeft: theme.spacing(0.4)\n },\n dialogTitle: {\n borderBottom: `1px ${theme.palette.grey[300]} solid`\n },\n closeContainer: {\n marginTop: theme.spacing(0.7),\n \"&>*\": {\n fontSize: theme.spacing(2)\n }\n },\n dialogContent: {\n padding: 0,\n marginRight: theme.spacing(4)\n },\n dialogContentSubContainer: {\n margin: theme.spacing(2, 0)\n },\n rightContainer: {\n height: \"92vh\",\n borderLeft: `1px ${theme.palette.grey[300]} solid`\n },\n partTitle: {\n textAlign: \"left\",\n // marginLeft: theme.spacing(8),\n color: theme.palette.grey[700],\n fontSize: theme.spacing(2),\n fontWeight: 600,\n marginBottom: theme.spacing(1),\n marginTop: theme.spacing(1)\n },\n select: {\n width: \"100%\",\n padding: theme.spacing(2, 2),\n background: theme.palette.grey[100],\n\n borderRadius: theme.spacing(1),\n cursor: \"pointer\",\n \"&:hover\": {\n background: theme.palette.grey[200]\n },\n color: theme.palette.grey[700]\n },\n marginRight: {\n marginLeft: theme.spacing(8)\n },\n selectFullWidth: {\n margin: theme.spacing(0, 8)\n },\n boxDivider: {\n width: theme.spacing(2)\n },\n\n dialogIcon: {\n fontSize: theme.spacing(4),\n color: theme.palette.grey[700],\n padding: theme.spacing(2)\n },\n\n titleTextField: {\n // padding: theme.spacing(2, 0),\n background: theme.palette.background.default,\n minWidth: 288,\n flexShrink: 0,\n borderTopLeftRadius: theme.spacing(1),\n borderTopRightRadius: theme.spacing(1),\n \"&>*\": {\n padding: theme.spacing(0, 2, 2, 2)\n }\n },\n textField: {\n // padding: theme.spacing(2, 0),\n background: theme.palette.background.default,\n borderRadius: theme.spacing(2),\n \"&>*\": {\n padding: theme.spacing(0, 2, 2, 2)\n }\n },\n contentTextField: {\n background: theme.palette.background.default,\n borderTopLeftRadius: theme.spacing(1),\n borderTopRightRadius: theme.spacing(1),\n \"&>*\": {\n padding: theme.spacing(0, 2, 2, 2)\n },\n margin: theme.spacing(2, 0)\n },\n partContainer: {\n padding: theme.spacing(1, 2)\n },\n optionsContainer: {\n marginTop: theme.spacing(2),\n \"&>*\": {\n fontSize: theme.spacing(3),\n fontWeight: 600,\n color: theme.palette.grey[700]\n }\n },\n topicButtons: {\n margin: theme.spacing(1),\n gap: theme.spacing(2)\n },\n topicTextFieldContainer: {\n minWidth: \"400px\",\n height: \"150px\"\n }\n}));\nconst ADD_TOPIC = gql`\n mutation CreateTopic($name: String!, $class: ID!) {\n createTopic(input: { data: { name: $name, class: $class } }) {\n topic {\n name\n }\n }\n }\n`;\n\nconst CREATE_ASSIGNMENT = gql`\n mutation CreateAssignment(\n $title: String!\n $description: String!\n $topic: ID\n $type: ENUM_ASSIGNMENT_TYPE!\n $class: ID!\n $grade: Float\n $due: Date\n $center: ID!\n $quiz: ID\n $writer: ID!\n $evaluationsInfo: ComponentClassworkEvaluationsInfoInput\n ) {\n createAssignment(\n input: {\n data: {\n center: $center\n title: $title\n description: $description\n type: $type\n topic: $topic\n class: $class\n grade: $grade\n due: $due\n quiz: $quiz\n writer: $writer\n evaluationsInfo: $evaluationsInfo\n }\n }\n ) {\n assignment {\n id\n title\n type\n description\n }\n }\n }\n`;\nfunction Create({ currentClass, topics, query, classID, refetch }) {\n const { reverseLoadingState } = useContext(LoadingState);\n const { slug } = useParams();\n const { user, centerId } = useContext(Navigation);\n const [\n createAssignment,\n { loading: loadingCreateAssignmentMutation }\n ] = useMutation(CREATE_ASSIGNMENT, {\n onError: error => console.log(\"mutationCreateMutation error: \", error),\n onCompleted: data => {\n console.log(\"mutationCreateMutation success: \", data);\n reverseLoadingState();\n reverseDialogState();\n },\n refetchQueries: [\n {\n query: query,\n variables: {\n slug\n }\n }\n ]\n });\n const [createTopic] = useMutation(ADD_TOPIC, {\n onError: error => console.log(\"mutationCreateTopic error: \", error),\n onCompleted: data => {\n console.log(\"mutationCreateTopic success: \", data);\n reverseTopicDialogState();\n refetch();\n }\n });\n const [type, setType] = useState(null);\n const [topic, setTopic] = useState(null);\n const [topicContent, setTopicContent] = useState(null);\n const topicContentRef = useRef();\n const [title, setTitle] = useState(null);\n const titleRef = useRef();\n const [due, setDue] = useState(null);\n const dueRef = useRef();\n const [description, setDescription] = useState(\"\");\n const [evaluationsInfo, setEvaluationsInfo] = useReducer(\n (prev, update) => ({...prev, ...update}),\n {coach: '', date: '', location:''}\n )\n useEffect(()=>{\n console.log(evaluationsInfo);\n }\n ,[evaluationsInfo])\n //////\n const [dialogState, reverseDialogState] = useReducer(state => !state, false);\n const [dialogTopicState, reverseTopicDialogState] = useReducer(\n state => !state,\n false\n );\n\n const [anchor, setAnchor] = useState(null);\n const openMenu = event => {\n setAnchor(event.currentTarget);\n };\n const closeMenu = () => {\n setAnchor(null);\n };\n const [anchorTopic, setAnchorTopic] = useState(null);\n const openTopicMenu = event => {\n setAnchorTopic(event.currentTarget);\n };\n const closeTopicMenu = () => {\n setAnchorTopic(null);\n };\n const [anchorPoints, setAnchorPoints] = useState(null);\n const openPointsMenu = event => {\n setAnchorPoints(event.currentTarget);\n };\n const closePointsMenu = () => {\n setAnchorPoints(null);\n };\n const [topicMenuLabel, setTopicMenuLabel] = useState(l1.choosetopics);\n const [pointsMenuLabel, setPointsMenuLabel] = useState(l1.noPoints);\n ///////\n const [grade, setGrade] = useState(null);\n if (loadingCreateAssignmentMutation) {\n reverseLoadingState();\n }\n\n const [quiz, setQuiz] = useState(\"\");\n const classes = useStyles();\n return (\n <>\n }\n onClick={openMenu}\n >\n {l1.create}\n \n\n {/* Create Menu */}\n \n {\n reverseDialogState();\n setType(\"assignment\");\n }}\n >\n \n \n \n {l1.assignment}\n \n \n \n {\n reverseDialogState();\n setType(\"quiz\");\n }}\n >\n \n \n {l1.quiz}\n \n \n {\n reverseDialogState();\n setType(\"question\");\n }}\n >\n \n \n {l1.question}\n \n \n {\n reverseDialogState();\n setType(\"material\");\n }}\n >\n \n \n {l1.material}\n \n \n {\n reverseDialogState();\n setType(\"evaluations\");\n }}\n >\n \n \n \n {l1.evaluations}\n \n \n \n\n \n \n \n \n {l1.topic}\n \n \n \n {/* ///////////// */}\n \n \n \n \n \n \n \n \n \n {l1[type]}\n \n {\n createAssignment({\n variables: {\n title,\n description,\n type,\n topic,\n due,\n class: classID,\n grade,\n center: centerId,\n quiz: quiz.length > 0 ? quiz : null,\n writer: user.id,\n evaluationsInfo,\n }\n });\n }}\n >\n {l1.create}\n \n \n \n \n \n \n \n \n {l1.options}\n \n \n {/* \n \n \n {l1.for}\n \n \n \n \n {currentClass}\n \n \n \n \n {l1.allstudents}\n \n \n \n */}\n {/* Part 2 */}\n {type === \"material\" ? (\n \"\"\n ) : (\n \n \n \n {l1.points}\n \n \n {\n closePointsMenu();\n setGrade(100);\n setPointsMenuLabel(100 + \" نقطة\");\n }}\n >\n \n 100\n \n \n {\n closePointsMenu();\n setGrade(null);\n setPointsMenuLabel(l1.noPoints);\n }}\n >\n \n {l1.noPoints}\n \n \n \n \n \n \n {pointsMenuLabel}\n \n \n \n \n )}\n {/* Part 4 */}\n \n \n \n {l1.due}\n \n \n \n \n {\n setDue(dueRef.current.value);\n }}\n />\n \n \n \n \n {/* Part 5 */}\n \n \n \n {l1.topic}\n \n {/* Topic Menu */}\n \n {topics.map(({ name, id }) => (\n {\n setTopicMenuLabel(name);\n closeTopicMenu();\n setTopic(id);\n }}\n >\n \n {name}\n \n \n ))}\n \n \n \n \n {topicMenuLabel}\n \n \n \n \n \n \n \n \n {\n setTitle(titleRef.current.value);\n }}\n />\n \n \n \n \n \n {type === \"quiz\" && (\n \n \n \n \n )}\n {type === \"evaluations\" ? (\n \n \n \n {\n setEvaluationsInfo({coach: e.target.value});\n }}\n style={{flexGrow:1}}\n />\n {\n setEvaluationsInfo({date: e.target.value});\n }}\n style={{flexGrow:1}}\n\n />\n {\n setEvaluationsInfo({location: e.target.value});\n }}\n style={{flexGrow:1}}\n\n />\n\n \n ) : null}\n\n \n \n \n \n \n \n {\n setTopicContent(topicContentRef.current.value);\n }}\n />\n \n {\n createTopic({\n variables: {\n class: classID,\n name: topicContent\n }\n });\n }}\n >\n {l1.create}\n \n \n \n \n \n \n );\n}\n\nexport default Create;\n","import React from \"react\";\nimport { Box, Button, Grid, makeStyles, Typography } from \"@material-ui/core\";\nimport { BiCalendarAlt } from \"react-icons/bi\";\nimport TopicRow from \"./components/TopicRow\";\nimport TopicSection from \"./components/TopicSection\";\nimport Create from \"./components/Create\";\nimport { l1 } from \"../../local.json\";\nimport { gql, useQuery } from \"@apollo/client\";\nimport Loading from \"../../common/Loading\";\nimport { useParams, useHistory } from \"react-router-dom\";\nimport TopBar from \"../../common/TopBar\";\nimport { RequireClassAccess, RequireTeacherAccess } from \"../../../Auth/gates\";\nimport { BiDotsVerticalRounded } from \"react-icons/bi\";\nimport SchoolIcon from \"@material-ui/icons/School\";\n\nconst useStyles = makeStyles(theme => ({\n rightContainer: {\n marginTop: theme.spacing(15)\n },\n topicContainer: {\n alignSelf: \"center\",\n width: theme.spacing(15),\n textAlign: \"center\",\n padding: theme.spacing(1.5, 2),\n \"&:hover\": {\n backgroundColor: \"#E8F0FE\",\n cursor: \"pointer\",\n borderRadius: theme.spacing(1)\n },\n \"&>*\": {\n fontSize: theme.spacing(1.6),\n color: theme.palette.grey[500]\n }\n },\n topicTitle: {\n fontWeight: 600,\n color: \"#6785F4\"\n },\n topicTitleContainer: {\n marginBottom: theme.spacing(1)\n },\n\n mainContainer: {\n marginTop: theme.spacing(3)\n },\n\n calendar: {\n color: theme.palette.grey[600],\n padding: theme.spacing(1, 2),\n \"&:hover\": {\n color: \"#6785F4\"\n }\n }\n}));\nconst QUERY_CLASSWORK = gql`\n query QueryClasswork($slug: String!) {\n classes(where: { slug: $slug }) {\n id\n name\n section\n topics(sort: \"createdAt:desc\") {\n name\n id\n assignments(sort: \"createdAt:desc\") {\n id\n title\n description\n type\n createdAt\n evaluationsInfo {\n coach\n date\n location\n }\n studentWorks {\n status\n submission\n }\n }\n }\n }\n }\n`;\nconst QUERY_NULL_TOPIC = gql`\n query QueryClasswork($slug: String!) {\n classes(where: { slug: $slug }) {\n assignments(where: { topic_null: true }, sort: \"createdAt:desc\") {\n id\n type\n title\n description\n createdAt\n evaluationsInfo {\n coach\n date\n location\n }\n studentWorks {\n status\n submission\n }\n }\n }\n }\n`;\nfunction Classwork() {\n const history = useHistory();\n const { slug } = useParams();\n // Apollo\n const { loading, data, refetch } = useQuery(QUERY_CLASSWORK, {\n variables: { slug },\n onError: error => console.log(\"QueryClassworkError: \", error),\n notifyOnNetworkStatusChange: true\n });\n const { loading: loadingNullTopic, data: nullTopicData } = useQuery(\n QUERY_NULL_TOPIC,\n {\n variables: { slug },\n onError: error => console.log(\"QueryNullError: \", error),\n onCompleted: data => console.log(\"QueryNullSuccess: \", data)\n }\n );\n const classes = useStyles();\n const evaluationStatistics = works => ({\n all: works.length,\n trainingEvaluations: works.filter(work => Boolean(work?.submission?.trainingEvaluation)).length,\n coachEvaluations: works.filter(work => Boolean(work?.submission?.coachEvaluation)).length,\n studentEvaluations: works.filter(work => Boolean(work?.submission?.studentEvaluation)).length,\n });\n const groupStudentWorks = works => {\n const groups = {\n all: works,\n assigned: works.filter(work => work.status === \"assigned\"),\n submitted: works.filter(work => work.status === \"submitted\"),\n graded: works.filter(work => work.status === \"graded\")\n };\n return {\n statistics: {\n all: works.length,\n assigned: groups.assigned.length,\n submitted: groups.submitted.length,\n graded: groups.graded.length\n },\n groups\n };\n };\n if (loading || loadingNullTopic) return ;\n else {\n const { name, topics, id } = data.classes[0];\n const nullTopics = nullTopicData.classes[0].assignments;\n\n return (\n <>\n \n \n \n \n \n \n {l1.allTopics}\n \n \n\n {!topics.length ? (\n \n {l1.empty}\n \n ) : (\n topics.map(({ id, name }) => (\n \n {name}\n \n ))\n )}\n \n \n \n \n \n \n \n \n \n }\n onClick={() => history.push(\"/calendar\")}\n >\n {l1.calendar}\n \n \n }\n onClick={() => history.push(\"/home\")}\n >\n {l1.classes}\n \n \n
\n \n {console.log('nullTopics',nullTopics)}\n {nullTopics.length\n ? nullTopics.map(\n ({ title, description, type, id, createdAt, studentWorks, evaluationsInfo }) => {\n console.log('works', studentWorks.filter(work => work));\n let statistics = type === 'evaluations' ? evaluationStatistics(studentWorks) : groupStudentWorks(studentWorks)\n .statistics;\n return (\n \n )}\n )\n : \"\"}\n {console.log(\"topics\", topics)}\n {!topics.length ? (\n \n \n {l1.empty}\n \n \n ) : (\n topics.map(({ id, name, assignments }) => (\n \n {assignments.map(\n ({\n title,\n description,\n type,\n id,\n createdAt,\n studentWorks,\n evaluationsInfo\n }) => {\n let statistics = groupStudentWorks(studentWorks)\n .statistics;\n return (\n \n );\n }\n )}\n \n ))\n )}\n \n \n \n \n \n );\n }\n return ;\n}\n\nexport default Classwork;\n","import React, { useRef, useState } from \"react\";\n\nimport {\n Avatar,\n Box,\n CircularProgress,\n makeStyles,\n TextField,\n Typography\n} from \"@material-ui/core\";\nimport TopBar from \"../../common/TopBar\";\nimport { gql, useMutation, useQuery } from \"@apollo/client\";\nimport { useParams } from \"react-router-dom\";\nimport Loading from \"../../common/Loading\";\nimport l1 from \"../../local.json\";\nimport { StudentWorkGradeEditor } from '../../Answers'\nconst useStyles = makeStyles(theme => ({\n container: {},\n tablesContainer: {\n width: \"100vw\"\n },\n headCell: {\n width: theme.spacing(18),\n height: theme.spacing(12),\n borderColor: theme.palette.grey[300],\n padding: theme.spacing(2)\n },\n bodyCell: {\n width: theme.spacing(18),\n height: theme.spacing(8),\n borderColor: theme.palette.grey[300]\n },\n headCellRight: {\n width: theme.spacing(24),\n height: theme.spacing(12),\n borderColor: theme.palette.grey[300]\n },\n bodyCellRight: {\n width: theme.spacing(24),\n height: theme.spacing(8),\n borderColor: theme.palette.grey[300]\n },\n avatar: {\n margin: theme.spacing(0, 2),\n height: theme.spacing(4),\n width: theme.spacing(4)\n },\n fullname: {\n fontWeight: 600\n },\n TextField: {\n margin: theme.spacing(0, 5)\n },\n input: {\n fontWeight: 600\n },\n title: {\n fontWeight: 600,\n color: theme.palette.primary.main\n }\n}));\n\nconst QUERY_MARKS = gql`\n query QueryClasswork($slug: String!) {\n classes(where: { slug: $slug }) {\n students(sort: \"fullname:asc\") {\n fullname\n id\n }\n assignments(sort: \"createdAt:desc\") {\n id\n title\n description\n type\n grade\n studentWorks (sort:\"student:asc\"){\n id\n status\n student {\n id\n }\n grade\n }\n }\n }\n }\n`;\n// const RETURN_MARK = gql`\n// mutation updateAssignment($id: ID!, $points: Int, $student: ID!) {\n// updateAssignment(\n// input: {\n// where: { id: $id }\n// data: { marks: [{ points: $points, student: $student }] }\n// }\n// ) {\n// assignment {\n// marks {\n// points\n// student {\n// id\n// fullname\n// }\n// }\n// title\n// description\n// }\n// }\n// }\n// `;\n\nfunction Marks() {\n const { slug } = useParams();\n // Apollo\n const { loading, data } = useQuery(QUERY_MARKS, {\n variables: { slug },\n onError: error => console.log(\"QueryMarksError: \", error),\n onCompleted: data => console.log(\"QueryMarksSuccess: \", data)\n });\n // const [returnMark, { loading: loadingReturnMark }] = useMutation(\n // RETURN_MARK,\n // {\n // onError: error => console.log(\"MutationMarkError: \", error),\n // onCompleted: data => console.log(\"MutationMarkSuccess: \", data),\n // refetchQueries: [\n // {\n // query: QUERY_MARKS,\n // variables: {\n // slug\n // }\n // }\n // ]\n // }\n // );\n const [targetField, setTargetField] = useState(null);\n const targetRef = useRef();\n const classes = useStyles();\n if (!loading) {\n const assignments = data.classes[0].assignments;\n const students = data.classes[0].students;\n\n return (\n \n \n {assignments.length === 0 ? (\n \n \n فارغ\n \n \n ) : (\n \n \n \n \n \n \n {students.map(({ fullname, id }) => (\n \n \n \n {fullname}\n \n \n ))}\n \n \n {assignments.map(({ id, title, grade, type, studentWorks }) => {\n if (type != \"material\") {\n return (\n \n {/* {console.log(type)} */}\n \n \n \n {title}\n \n \n \n \n {grade\n ? studentWorks.map((work) => {\n return (\n\n \n \n \n );\n })\n : studentWorks.map(() => {\n return (\n \n );\n })}\n \n \n );\n }\n })}\n \n \n \n \n \n \n \n \n \n )}\n \n );\n }\n return ;\n}\n\nexport default Marks;\n// \n// \n// \n// T\n// \n// \n// \n// \n// B\n// \n// \n// ;\n","import React, { useState, useEffect } from \"react\";\nimport {\n Avatar,\n Typography,\n Box,\n Dialog,\n DialogContent,\n LinearProgress,\n makeStyles,\n TextField,\n Checkbox,\n DialogActions,\n Button\n} from \"@material-ui/core\";\nimport { gql, useMutation, useQuery } from \"@apollo/client\";\nimport { l1 } from \"../local.json\";\n\n// const GET_CENTER_STUDENTS = gql`\n// query QueryCenterPeople($id: ID!) {\n// centersList(id: $id) {\n// students {\n// id\n// fullname\n// avatar\n// }\n// }\n// }\n// `;\nconst GET_CENTER_MEMBERS = gql`\n query QueryClassMembers($id: ID!, $classId: ID!) {\n centersLists(where: { id: $id }) {\n memberships(where: { status: \"ACTIVE\" }) {\n user {\n classes(where: { id: $classId }) {\n id\n }\n teachingClasses(where: { id: $classId }) {\n id\n }\n id\n fullname\n avatar\n }\n }\n }\n }\n`;\n\nconst UPDATE_PEOPLE = gql`\n mutation UpdateInterface($data: editClassInput!, $id: ID!) {\n updateClass(input: { data: $data, where: { id: $id } }) {\n class {\n teachers {\n fullname\n id\n }\n students {\n fullname\n id\n }\n }\n }\n }\n`;\nconst useStyles = makeStyles(theme => ({\n dialogContent: {\n margin: theme.spacing(2)\n },\n search: {\n margin: theme.spacing(2, 30),\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\"\n },\n nameContainer: {\n marginBottom: theme.spacing(1),\n border: \"1px solid lightgrey\",\n padding: theme.spacing(1),\n borderRadius: theme.spacing(1)\n },\n avatar: {\n marginRight: theme.spacing(2)\n }\n}));\n\nfunction Search({\n refetch,\n ready,\n reverseReady,\n centerId,\n classID,\n teachers,\n students,\n studentsMode\n}) {\n const [search, setSearch] = useState(\"\");\n const [result, setResult] = useState([]);\n const [selected, setSelected] = useState([]);\n\n const { loading, data } = useQuery(GET_CENTER_MEMBERS, {\n onError: error => console.log(\"QueryStreamError: \", error),\n variables: {\n id: centerId,\n classId: classID\n },\n onCompleted: () => {\n setResult(\n data?.centersLists[0]?.memberships?.filter(({ user }) =>\n user.fullname?.includes(search)\n )\n );\n }\n });\n const [updatePeople] = useMutation(UPDATE_PEOPLE, {\n onCompleted: data => {\n reverseReady();\n setSelected([]);\n refetch();\n }\n });\n\n useEffect(() => {\n const arr = [];\n console.log(\"data\", data?.centersLists[0]?.memberships);\n // data?.centersLists[0].memberships?.forEach((user) => {\n // const foundIt = user?.memberships?.search(search) !== -1;\n // if (search && foundIt) arr.push(user);\n // return arr;\n // });\n // setResult(arr);\n setResult(\n data?.centersLists[0]?.memberships?.filter(({ user }) =>\n user.fullname?.includes(search)\n )\n );\n }, [search]);\n\n const classes = useStyles();\n return (\n \n \n \n {loading ? (\n \n ) : (\n {\n setSearch(e.target.value);\n }}\n />\n )}\n \n \n {result?.map(i => (\n \n {\n if (e.target.checked) {\n setSelected([...selected, i.user]);\n } else {\n setSelected(selected.filter(j => j.id !== i.user.id));\n }\n }}\n />\n \n {i.user.fullname}\n {console.log(\"studentsMode\", studentsMode)}\n \n {studentsMode\n ? i.user?.classes[0]?.id === classID\n ? l1.alreadyAddedStudent\n : null\n : i.user?.teachingClasses[0]?.id === classID\n ? l1.alreadyAddedTeacher\n : null}\n \n \n ))}\n {selected ? (\n \n ) : null}\n {selected.map(i => (\n \n \n \n {i.fullname}\n \n setSelected(selected.filter(j => j.id !== i.id))}\n >\n {l1.delete}\n \n \n ))}\n \n \n {\n const arr = [];\n if (!studentsMode) {\n teachers.forEach(i => arr.push(i.id));\n selected.forEach(i => {\n arr.push(i.id);\n });\n updatePeople({\n variables: {\n data: {\n teachers: arr\n },\n id: classID\n }\n });\n }\n if (studentsMode) {\n students.forEach(i => arr.push(i.id));\n selected.forEach(i => {\n arr.push(i.id);\n });\n updatePeople({\n variables: {\n data: {\n students: arr\n },\n id: classID\n }\n });\n }\n }}\n >\n {l1.add}\n \n \n \n \n );\n}\nexport default Search;\n","import React, { useContext, useReducer, useState } from 'react';\nimport { Button, Avatar, Box, Grid, makeStyles, Typography } from '@material-ui/core';\nimport TopicSection from './components/TopicSection';\nimport { l1 } from '../../local.json';\nimport { useParams } from 'react-router-dom';\nimport { gql, useMutation, useQuery } from '@apollo/client';\nimport Loading from '../../common/Loading';\nimport TopBar from '../../common/TopBar';\nimport Search from '../../../components/common/Search';\nimport { Navigation } from '../../../Context';\nimport { RequireClassAccess } from '../../../Auth/gates';\n\nconst QUERY_PEOPLE = gql`\n query QueryClasswork($slug: String!) {\n classes(where: { slug: $slug }) {\n id\n name\n section\n teachers {\n fullname\n id\n avatar\n }\n students {\n fullname\n id\n avatar\n }\n }\n }\n`;\n\nconst UPDATE_PEOPLE = gql`\n mutation UpdateInterface($data: editClassInput!, $id: ID!) {\n updateClass(input: { data: $data, where: { id: $id } }) {\n class {\n teachers {\n fullname\n id\n avatar\n }\n students {\n fullname\n id\n avatar\n }\n }\n }\n }\n`;\n\nconst useStyles = makeStyles((theme) => ({\n personContainer: {\n margin: theme.spacing(1),\n },\n nameContainer: {\n gap: theme.spacing(2),\n '$>*': {},\n },\n avatar: {\n height: theme.spacing(5),\n width: theme.spacing(5),\n },\n name: {\n fontWeight: 600,\n },\n optionContainer: {\n marginRight: theme.spacing(4),\n },\n}));\nfunction People() {\n const { centerId } = useContext(Navigation);\n const [updatePeople] = useMutation(UPDATE_PEOPLE, {\n onCompleted: (data) => {\n refetch();\n },\n });\n const { slug } = useParams();\n // Apollo\n const [ready, reverseReady] = useReducer((s) => !s, false);\n const { loading, data, refetch } = useQuery(QUERY_PEOPLE, {\n variables: { slug },\n notifyOnNetworkStatusChange: true,\n });\n\n const [studentMode, setStudentMode] = useState(false);\n\n const classes = useStyles();\n if (!loading) {\n const { teachers, students, id } = data.classes[0];\n return (\n <>\n \n <>\n \n \n \n \n {teachers.map((i) => (\n \n \n {console.log('avatar', i?.avatar)}\n \n {i.fullname}\n \n \n \n {\n const filter = teachers.filter((item) => item.id !== i.id);\n const arr = [];\n filter.forEach((item) => arr.push(item.id));\n updatePeople({\n variables: {\n data: {\n teachers: arr,\n },\n id: data?.classes[0]?.id,\n },\n });\n }}\n >\n {l1.delete}\n \n \n \n \n ))}\n \n \n {students.map((i) => (\n \n \n \n {i.fullname}\n \n \n \n {\n const filter = students.filter((item) => item.id !== i.id);\n const arr = [];\n filter.forEach((item) => arr.push(item.id));\n updatePeople({\n variables: {\n data: {\n students: arr,\n },\n id: data?.classes[0]?.id,\n },\n });\n }}\n >\n {l1.delete}\n \n \n \n \n ))}\n \n \n \n \n {ready ? (\n \n ) : (\n ''\n )}\n \n \n );\n }\n\n if (loading) return ;\n}\n\nexport default People;\n","import {\n Avatar,\n Box,\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Divider,\n Link,\n makeStyles,\n Menu,\n MenuItem,\n Paper,\n Snackbar,\n TextField,\n Typography\n} from \"@material-ui/core\";\nimport React, {\n useEffect,\n useReducer,\n useRef,\n useState,\n useContext\n} from \"react\";\nimport { MdPeople } from \"react-icons/md\";\nimport { l1 } from \"../../../local.json\";\nimport { gql, useMutation } from \"@apollo/client\";\nimport { BiDotsVerticalRounded } from \"react-icons/bi\";\nimport { useParams } from \"react-router-dom\";\nimport Comment from \"../../../common/Comment\";\nimport CreateComment from \"../../../common/CreateComment\";\nimport MuiAlert from \"@material-ui/lab/Alert\";\nimport Loading from \"../../../common/Loading\";\nimport Drafter2 from \"../../../common/Drafter2\";\nimport moment from \"moment\";\nimport { RequireClassAccess } from \"../../../../../src/Auth/gates\";\nimport { Navigation } from \"../../../../Context\";\n\nconst useStyles = makeStyles(theme => ({\n container: {\n borderRadius: theme.spacing(1),\n marginBottom: theme.spacing(2)\n },\n topSection: {\n margin: theme.spacing(1, 2, 2, 1)\n },\n avatar: {\n margin: theme.spacing(2)\n },\n name: {\n fontWeight: 600\n },\n date: {\n fontSize: theme.spacing(1.6),\n color: theme.palette.grey[600]\n },\n post: {\n marginLeft: theme.spacing(2),\n \"&>*\": {}\n },\n midSection: {\n // marginBottom: theme.spacing(2),\n },\n stats: {\n margin: theme.spacing(1, 0)\n },\n statsIcon: {\n color: theme.palette.grey[700],\n fontSize: theme.spacing(3),\n margin: theme.spacing(0, 1)\n },\n statsText: {\n fontWeight: 600,\n color: theme.palette.grey[700]\n },\n midNameBox: {\n gap: theme.spacing(1.4)\n },\n inputContainer: {\n border: `1px solid lightgrey`,\n borderRadius: theme.spacing(4),\n marginRight: theme.spacing(4)\n },\n input: {\n marginLeft: theme.spacing(2)\n },\n inputIcon: {\n transform: \"scaleX(-1)\",\n margin: theme.spacing(0, 1),\n fontSize: theme.spacing(3),\n cursor: \"pointer\",\n color: theme.palette.grey[500]\n },\n options: {\n marginRight: theme.spacing(2)\n },\n menuItem: {\n paddingRight: theme.spacing(10)\n },\n announcement: {\n fontSize: theme.spacing(3),\n // margin: theme.spacing(2),\n cursor: \"pointer\",\n color: \"grey\"\n },\n editPostContainer: {\n margin: theme.spacing(0, 5)\n },\n editPostTextField: {\n background: theme.palette.grey[100],\n marginBottom: theme.spacing(2)\n },\n editPostButtons: {\n gap: theme.spacing(2)\n },\n muiAlert: {\n width: \"max-content\"\n }\n}));\n\nconst EDIT_POST = gql`\n mutation EditPost($id: ID!, $content: String!) {\n updatePost(input: { where: { id: $id }, data: { content: $content } }) {\n post {\n content\n }\n }\n }\n`;\nconst DELETE_POST = gql`\n mutation DeletePost($id: ID!) {\n deletePost(input: { where: { id: $id } }) {\n post {\n content\n }\n }\n }\n`;\n\nfunction Announcement({\n content,\n fullname,\n id,\n comments,\n failure,\n refetch,\n alert,\n createdAt,\n attachments,\n writerEmail\n}) {\n //Apollo\n const [editPost, { loading: loadingEdit }] = useMutation(EDIT_POST, {\n onError: () => failure(l1.failure),\n onCompleted: () => {\n alert(l1.editsuccess);\n reverseEditPostState();\n refetch();\n }\n });\n const [deletePost, { loading: loadingDelete }] = useMutation(DELETE_POST, {\n onError: () => failure(l1.failure),\n onCompleted: () => {\n alert(l1.deletesuccess);\n refetch();\n }\n });\n\n // Edit State Indicator\n const [editPostState, reverseEditPostState] = useReducer(s => !s, false);\n // Upload Tracker\n const [uploadTracker, setUploadTracker] = useState();\n // Options Logic\n const [anchorPost, setAnchorPost] = useState(null);\n const openPostMenu = event => {\n setAnchorPost(event.currentTarget);\n };\n const closePostMenu = () => {\n setAnchorPost(null);\n };\n const [anchorComment, setAnchorComment] = useState(null);\n const openCommentMenu = event => {\n setAnchorComment(event.currentTarget);\n };\n const closeCommentMenu = () => {\n setAnchorComment(null);\n };\n const { user } = useContext(Navigation);\n\n // Confirmation Dialog Logic\n const [confirmationState, reverseConfirmationState] = useReducer(\n state => !state,\n false\n );\n const classes = useStyles();\n\n if (loadingEdit || loadingDelete) return ;\n return (\n \n \n \n \n \n \n {fullname}\n \n {moment(createdAt).fromNow()}\n \n \n \n {user.email === writerEmail ? (\n \n ) : null}\n\n \n \n {l1.edit}\n \n \n {l1.delete}\n \n \n \n \n {editPostState ? (\n \n ) : (\n \n )}\n {attachments ? (\n \n {\" \"}\n تحميل المرفق{\" \"}\n \n ) : null}\n \n \n \n \n \n \n\n \n {comments.length} {l1.comment}\n \n \n {comments.map(item => (\n \n ))}\n \n \n\n \n \n );\n}\n\nexport default Announcement;\n","import React from 'react';\nimport { EditorState, RichUtils, getDefaultKeyBinding, Editor } from 'draft-js';\nimport './Drafter.css';\nimport { l1 } from '../local.json';\nimport {\n MdFormatBold,\n MdFormatItalic,\n MdFormatQuote,\n MdFormatUnderlined,\n} from 'react-icons/md';\nimport { Typography } from '@material-ui/core';\nimport { BiListOl, BiListUl } from 'react-icons/bi';\nclass Drafter extends React.Component {\n constructor(props) {\n super(props);\n this.state = { editorState: EditorState.createEmpty() };\n\n this.focus = () => this.refs.editor.focus();\n this.onChange = (editorState) => this.setState({ editorState });\n\n this.handleKeyCommand = this._handleKeyCommand.bind(this);\n this.mapKeyToEditorCommand = this._mapKeyToEditorCommand.bind(this);\n this.toggleBlockType = this._toggleBlockType.bind(this);\n this.toggleInlineStyle = this._toggleInlineStyle.bind(this);\n }\n\n _handleKeyCommand(command, editorState) {\n const newState = RichUtils.handleKeyCommand(editorState, command);\n if (newState) {\n this.onChange(newState);\n return true;\n }\n return false;\n }\n\n _mapKeyToEditorCommand(e) {\n if (e.keyCode === 9 /* TAB */) {\n const newEditorState = RichUtils.onTab(\n e,\n this.state.editorState,\n 4 /* maxDepth */\n );\n if (newEditorState !== this.state.editorState) {\n this.onChange(newEditorState);\n }\n return;\n }\n return getDefaultKeyBinding(e);\n }\n\n _toggleBlockType(blockType) {\n this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType));\n }\n\n _toggleInlineStyle(inlineStyle) {\n this.onChange(\n RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle)\n );\n }\n\n render() {\n const { editorState } = this.state;\n\n // If the user changes block type before entering any text, we can\n // either style the placeholder or hide it. Let's just hide it now.\n let className = 'RichEditor-editor';\n var contentState = editorState.getCurrentContent();\n if (!contentState.hasText()) {\n if (contentState.getBlockMap().first().getType() !== 'unstyled') {\n className += ' RichEditor-hidePlaceholder';\n }\n }\n console.log('contentState', contentState);\n return (\n \n );\n }\n}\n\n// Custom overrides for \"code\" style.\nconst styleMap = {\n CODE: {\n backgroundColor: 'rgba(0, 0, 0, 0.05)',\n fontFamily: '\"Inconsolata\", \"Menlo\", \"Consolas\", monospace',\n fontSize: 16,\n padding: 2,\n },\n};\n\nfunction getBlockStyle(block) {\n switch (block.getType()) {\n case 'blockquote':\n return 'RichEditor-blockquote';\n default:\n return null;\n }\n}\n\nclass StyleButton extends React.Component {\n constructor() {\n super();\n this.onToggle = (e) => {\n e.preventDefault();\n this.props.onToggle(this.props.style);\n };\n }\n\n render() {\n let className = 'RichEditor-styleButton';\n if (this.props.active) {\n className += ' RichEditor-activeButton';\n }\n return (\n \n {this.props.label}\n \n );\n }\n}\n\nconst BLOCK_TYPES = [\n {\n label: (\n \n H1\n \n ),\n style: 'header-one',\n },\n {\n label: (\n \n H2\n \n ),\n style: 'header-two',\n },\n {\n label: (\n \n H3\n \n ),\n style: 'header-three',\n },\n {\n label: (\n \n H4\n \n ),\n style: 'header-four',\n },\n\n {\n label: ,\n style: 'blockquote',\n },\n {\n label: ,\n style: 'unordered-list-item',\n },\n {\n label: ,\n style: 'ordered-list-item',\n },\n];\n\nconst BlockStyleControls = (props) => {\n const { editorState } = props;\n const selection = editorState.getSelection();\n const blockType = editorState\n .getCurrentContent()\n .getBlockForKey(selection.getStartKey())\n .getType();\n\n return (\n \n {BLOCK_TYPES.map((type, index) => (\n \n ))}\n
\n );\n};\n\nvar INLINE_STYLES = [\n {\n label: ,\n style: 'BOLD',\n },\n {\n label: ,\n style: 'ITALIC',\n },\n {\n label: ,\n style: 'UNDERLINE',\n },\n];\n\nconst InlineStyleControls = (props) => {\n const currentStyle = props.editorState.getCurrentInlineStyle();\n\n return (\n \n {INLINE_STYLES.map((type) => (\n \n ))}\n
\n );\n};\n\nexport default Drafter;\n","import React, { useReducer, useRef, useState } from \"react\";\n\nimport {\n Avatar,\n Box,\n makeStyles,\n Paper,\n Typography,\n IconButton,\n Button,\n TextField,\n Snackbar\n} from \"@material-ui/core\";\n// Icons\nimport { FiMessageSquare } from \"react-icons/fi\";\nimport { MdCropFree, MdMessage } from \"react-icons/md\";\nimport { CgAttachment } from \"react-icons/cg\";\nimport { l1 } from \"../../local.json\";\nimport Due from \"../../common/Due\";\nimport TopicRow from \"./components/TopicRow\";\nimport Announcement from \"./components/Announcement\";\nimport { gql, useMutation, useQuery } from \"@apollo/client\";\nimport { useParams } from \"react-router-dom\";\nimport Loading from \"../../common/Loading\";\nimport TopBar from \"../../common/TopBar\";\nimport MuiAlert from \"@material-ui/lab/Alert\";\nimport Drafter from \"../../common/Editor\";\nimport Drafter2 from \"../../common/Drafter2\";\nimport moment from \"moment\";\nimport useLayout from \"../../common/useLayout\";\nimport { RequireClassAccess } from \"../../../Auth/gates\";\n\n// Styles\nconst useStyles = makeStyles(theme => ({\n head: {\n height: theme.spacing(30),\n width: \"90vw\",\n [theme.breakpoints.up(\"lg\")]: {\n width: \"62vw\"\n },\n backgroundImage:\n \"url(https://gstatic.com/classroom/themes/img_backtoschool.jpg)\",\n backgroundColor: \"black\",\n margin: theme.spacing(2),\n padding: theme.spacing(2),\n borderRadius: theme.spacing(1)\n },\n name: {\n color: theme.palette.common.white,\n fontWeight: 600,\n fontSize: theme.spacing(3.4)\n },\n section: {\n color: theme.palette.common.white,\n fontSize: theme.spacing(3)\n },\n codeContainer: {\n \"& > *\": {\n color: theme.palette.common.white,\n marginRight: theme.spacing(1)\n }\n },\n codePrefix: {\n fontWeight: 600,\n fontSize: theme.spacing(1.7)\n },\n code: {\n fontSize: theme.spacing(1.7)\n },\n scanCodeIconContainer: {\n marginLeft: theme.spacing(-1)\n },\n scanCodeIcon: {\n color: theme.palette.common.white,\n fontSize: theme.spacing(2.5),\n fontWeight: 700\n },\n themeContainer: {\n gap: theme.spacing(0.5)\n },\n uploadContainer: {\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"flex-end\",\n height: \"50%\",\n \"& > *\": {\n color: theme.palette.common.white,\n fontSize: theme.spacing(1.5),\n cursor: \"pointer\"\n }\n },\n main: {\n [theme.breakpoints.up(\"lg\")]: {\n width: \"62vw\"\n },\n width: \"90vw\"\n },\n mainSubContainer: {\n flexGrow: 1\n },\n\n announcementContainer: {\n margin: theme.spacing(2, 0),\n padding: theme.spacing(2),\n borderRadius: theme.spacing(1.5),\n height: \"min-content\"\n // width: \"60%\",\n },\n noAnnouncements: {\n margin: theme.spacing(2, 0, 2, 2),\n padding: theme.spacing(1),\n borderRadius: theme.spacing(1.5),\n height: \"min-content\",\n \"& > *\": {\n margin: theme.spacing(1, 0, 0, 2)\n }\n },\n noAnnouncementsSpecialText: {\n fontSize: theme.spacing(3),\n color: theme.palette.success.dark\n },\n noAnnouncementsBlock: {\n alignItems: \"center\",\n \"& :first-child\": {\n fontSize: theme.spacing(3),\n margin: theme.spacing(1)\n },\n \"& > *\": {\n fontWeight: 600,\n color: theme.palette.grey[700]\n }\n },\n upComingContainer: {\n margin: theme.spacing(2, 2, 2, 0),\n padding: theme.spacing(2),\n borderRadius: theme.spacing(1.5),\n height: \"max-content\",\n minWidth: \"max-content\"\n },\n upComing: {\n fontWeight: 600\n },\n due: {\n margin: theme.spacing(0, 1),\n width: \"max-content\"\n },\n upComingContainerBottom: {\n margin: theme.spacing(1, 1, 0, 1)\n },\n announcementAvatar: {\n margin: theme.spacing(0, 2)\n },\n announcementText: {\n flexGrow: 1,\n cursor: \"pointer\",\n \"&:hover\": {\n color: theme.palette.primary.main\n }\n },\n select: {\n minWidth: theme.spacing(15),\n marginRight: theme.spacing(2)\n },\n postUpperContainer: {\n marginBottom: theme.spacing(3)\n },\n postMiddleContainer: {\n marginBottom: theme.spacing(3)\n },\n postBottomContainer: {\n marginTop: theme.spacing(2)\n }\n}));\nconst UPLOAD = gql`\n mutation($file: Upload!) {\n upload(file: $file) {\n name\n }\n }\n`;\nconst QUERY_STREAM = gql`\n query QueryStream($slug: String!) {\n classes(where: { slug: $slug }) {\n id\n name\n section\n slug\n\n assignments(sort: \"createdAt:desc\") {\n id\n title\n description\n type\n createdAt\n }\n\n posts(sort: \"createdAt:desc\") {\n id\n writer {\n id\n fullname\n email\n }\n content\n createdAt\n attachments {\n url\n }\n comments {\n writer {\n id\n fullname\n email\n }\n id\n content\n createdAt\n }\n }\n }\n }\n`;\n\nconst ADD_POST = gql`\n mutation CreatePost(\n $content: String!\n $class: ID!\n $writer: ID!\n $attachments: ID\n ) {\n createPost(\n input: {\n data: {\n content: $content\n class: $class\n writer: $writer\n attachments: $attachments\n }\n }\n ) {\n post {\n id\n content\n class {\n id\n name\n }\n attachments {\n url\n }\n comments {\n id\n writer {\n id\n fullname\n email\n }\n content\n createdAt\n }\n }\n }\n }\n`;\n\nconst Stream = () => {\n const { slug } = useParams();\n // Apollo\n const { loading: loadingQueryStream, data: queryData, refetch } = useQuery(\n QUERY_STREAM,\n {\n variables: { slug },\n notifyOnNetworkStatusChange: true,\n onError: error => console.log(\"QueryStreamError: \", error)\n }\n );\n const [createPost, { loading: loadingMutationCreatePost }] = useMutation(\n ADD_POST,\n {\n onError: error => console.log(\"mutationCreatePost error: \", error),\n onCompleted: () => {\n setAlertSuccess(l1.postsuccess);\n refetch();\n }\n }\n );\n\n const [postState, reversePostState] = useReducer(\n currentState => !currentState,\n false\n );\n // Alert Logic\n const [alertSuccess, setAlertSuccess] = useState(false);\n const [alertFailure, setAlertFailure] = useState(false);\n\n const classes = useStyles();\n const layout = useLayout();\n const streamItems = (queryData?.classes[0]?.posts ?? []).map(\n ({\n writer,\n content,\n comments,\n createdAt,\n id,\n attachments\n }) => ([\n new Date(createdAt).getTime(), \n setAlertSuccess(content)}\n failure={content => setAlertFailure(content)}\n attachments={attachments}\n writerEmail={writer.email}\n />])\n ).concat(\n (queryData?.classes[0]?.assignments ?? []).map(\n ({ title, description, type, id, createdAt }) => ([\n new Date(createdAt).getTime(),\n \n ])\n )\n ).sort((a, b) => b[0] - a[0]).map(([_,item])=>item)\n return (\n <>\n {loadingQueryStream || loadingMutationCreatePost ? (\n \n ) : (\n <>\n {layout\n ? console.log(\"layout desktop\")\n : console.log(\"layout mobile\")}\n \n \n {\n const sortedArray = queryData?.classes[0]?.sort(\n (a, b) => -moment(b.posts.createdAt).format(\"YYYYMMDD\")\n );\n console.log(sortedArray);\n }}\n >\n \n {queryData.classes[0].name}\n \n \n {queryData.classes[0].section}\n \n\n \n\n \n \n \n {l1.upComing}\n \n \n \n \n {/* */}\n \n \n {l1.communicateWithYourClassHere}\n \n \n \n {l1.createYourAnnouncements}\n \n \n \n {l1.RespondToStudentPost}\n \n \n {/* */}\n \n {postState ? (\n <>\n \n \n ) : (\n // \n \n \n \n {l1.announceSomethingToClass}\n \n {/* \n \n */}\n \n // \n )}\n \n {streamItems}\n \n \n \n {\n setAlertSuccess(false);\n }}\n autoHideDuration={3000}\n >\n \n {alertSuccess}\n \n \n {\n setAlertFailure(false);\n }}\n >\n \n {alertFailure}\n \n \n \n )}\n \n );\n};\n\nexport default Stream;\n","import { BrowserRouter, Redirect, Route, Switch } from \"react-router-dom\";\nimport {\n RequireAuthentication,\n RequireCenterAdmin,\n RequireCenterMembership,\n RequireClassAccess,\n RequireTeacherAccess,\n} from \"./Auth/gates\";\nimport { ClassWrapper } from \"./Context\";\nimport AdminPanel from \"./components/AdminPanel\";\nimport Answers from \"./components/Answers\";\nimport Assignment from \"./components/Assignment\";\nimport Calendar from \"./components/Calendar\";\nimport Files from \"./components/Files\";\nimport FrontEvent from \"./components/FrontEvent\";\nimport FrontEvents from \"./components/FrontEvents\";\nimport Home from \"./components/Home\";\nimport Landing from \"./components/Landing\";\nimport QuizEditor from \"./components/QuizEditor\";\nimport Review from \"./components/Review\";\nimport EditProfile from \"./components/UserPages/EditProfile\";\nimport CropeImage from \"./components/UserPages/ImageCrop\";\nimport Evaluation from \"./components/evaluations/Evaluation\";\nimport { AssignmentProvider } from \"./components/evaluations/context/assignment\";\nimport { StudentWorkProvider } from \"./components/evaluations/context/studentWork\";\nimport { StudentWorksProvider } from \"./components/evaluations/context/studentWorks\";\nimport Banned from \"./components/rel/AdminPanel/Banned\";\nimport EditLanding from \"./components/rel/AdminPanel/EditLanding\";\nimport Events from \"./components/rel/AdminPanel/Events\";\nimport Staff from \"./components/rel/AdminPanel/Staff\";\nimport Teachers from \"./components/rel/AdminPanel/Teachers\";\nimport Waiting from \"./components/rel/AdminPanel/Waiting\";\nimport MembershipForm from \"./components/rel/RequestMembership/MembershipForm\";\nimport Classwork from \"./components/rel/class/Classwork\";\nimport Marks from \"./components/rel/class/Marks\";\nimport People from \"./components/rel/class/People\";\nimport Stream from \"./components/rel/class/Stream\";\nimport forms from \"./forms\";\n\nfunction Router() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {/* Only users not registered in center can request membership, others are redirected */}\n \n \n \n \n \n\n {/* Users not registered in center are redirected to request membership form */}\n \n {/* /home also handles banned & requested memberships */}\n \n \n طلب انضمامك للمركز قيد المراجعة، يرجى العودة لاحقًا.\n \n \n لقد تم تجميد عضويتك في هذا المركز بسبب مخالفتك لشروط\n الخدمة.\n \n \n \n \n \n\n {/* Only active members of center can access these routes */}\n \n \n \n \n \n \n \n \n \n \n لا يمكنك الدخول إلى هذا القسم}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {/* Load form routes from form list */}\n {Object.values(forms).map(({ routes, roles }) =>\n Object.values(routes).map(({ path, Component }) => (\n \n \n \n \n \n ))\n )}\n \n \n \n \n \n }\n >\n \n \n \n \n \n \n );\n}\n\nexport default Router;\n","import React from 'react';\n// Theme\nimport { ThemeProvider, createTheme } from '@material-ui/core';\nimport { create } from 'jss';\nimport rtl from 'jss-rtl';\nimport { StylesProvider, jssPreset } from '@material-ui/core/styles';\n\n// Configure JSS\nconst jss = create({ plugins: [...jssPreset().plugins, rtl()] });\n\n//Theme Provider\nconst theme = createTheme({\n direction: 'rtl',\n palette: {\n primary: {\n main: '#6785F4',\n },\n },\n typography: {\n fontFamily: [\n '-apple-system',\n 'BlinkMacSystemFont',\n '\"Segoe UI\"',\n 'Roboto',\n '\"Helvetica Neue\"',\n 'Arial',\n 'sans-serif',\n '\"Apple Color Emoji\"',\n '\"Segoe UI Emoji\"',\n '\"Segoe UI Symbol\"',\n ].join(','),\n },\n});\nfunction RTL({ children }) {\n return (\n \n \n {children}\n \n
\n );\n}\nexport default RTL;\n","import Apollo from \"./Apollo\";\nimport { FloatingAlertProvider } from \"./components/common/FloatingAlert\";\nimport Context from \"./Context\";\nimport Router from \"./Router\";\nimport RTL from \"./RTL\";\n\nfunction App() {\n return (\n // \n \n \n \n \n \n \n \n \n \n // \n );\n}\n\nexport default App;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport App from \"./App\";\n\nReactDOM.render(, document.getElementById(\"root\"));\n"],"sourceRoot":""}