diff --git a/app/javascript/components/QuestionnaireForm/styles.js b/app/javascript/components/QuestionnaireForm/styles.js
index 5fdf8795..25b3b082 100644
--- a/app/javascript/components/QuestionnaireForm/styles.js
+++ b/app/javascript/components/QuestionnaireForm/styles.js
@@ -21,6 +21,19 @@ const styles = () => ({
questionnaireEntry: {
marginBottom: 20,
},
+ questionnaireLabel: {
+ marginBottom: '0px',
+ },
+ radioGroup: {
+ marginTop: '5px',
+ },
+ selectMenu: {
+ minWidth: 200,
+ marginTop: '8px',
+ },
+ selectLabelText: {
+ marginLeft: '2px',
+ },
});
export default styles;
diff --git a/app/javascript/components/QuestionnaireModal/index.js b/app/javascript/components/QuestionnaireModal/index.js
index 0efce3ec..b0758911 100644
--- a/app/javascript/components/QuestionnaireModal/index.js
+++ b/app/javascript/components/QuestionnaireModal/index.js
@@ -1,9 +1,3 @@
-/**
- *
- * QuestionnaireModal
- *
- */
-
import React, { memo, useState } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
@@ -21,7 +15,8 @@ function QuestionnaireModal({
userType,
}) {
const [open, setOpen] = useState(false);
- const qType = questionnaireType.toUpperCase();
+ const qType =
+ questionnaireType.charAt(0).toUpperCase() + questionnaireType.slice(1);
let content;
if (userType === 'staff') {
@@ -57,7 +52,9 @@ function QuestionnaireModal({
classes={{ paper: classes.dialog }}
>
- {qType} INFORMATION
+
+ {qType} Information
+
{content}
diff --git a/app/javascript/components/QuestionnaireModal/styles.js b/app/javascript/components/QuestionnaireModal/styles.js
index 4f72479b..bd309d38 100644
--- a/app/javascript/components/QuestionnaireModal/styles.js
+++ b/app/javascript/components/QuestionnaireModal/styles.js
@@ -6,12 +6,16 @@
const styles = theme => ({
dialog: {
- borderRadius: 20,
+ borderRadius: theme.shape.borderRadius,
},
title: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
- padding: '56px 114px 56px 56px',
+ padding: '20px 145px 20px 25px',
+ marginBottom: '30px',
+ },
+ titleText: {
+ fontSize: '24px',
},
});
diff --git a/app/javascript/components/StaffDashboard/index.js b/app/javascript/components/StaffDashboard/index.js
index 58486250..97911ce1 100644
--- a/app/javascript/components/StaffDashboard/index.js
+++ b/app/javascript/components/StaffDashboard/index.js
@@ -71,6 +71,12 @@ class StaffDashboard extends React.Component {
label: 'Casenotes',
sortable: true,
},
+ {
+ id: 'assignmentsCompleted',
+ disablePadding: false,
+ label: 'Assignments',
+ sortable: true,
+ },
{
id: 'form_status',
disablePadding: false,
diff --git a/app/javascript/components/StudioAssessmentCard/index.js b/app/javascript/components/StudioAssessmentCard/index.js
index c6fc461e..5a6aeeda 100644
--- a/app/javascript/components/StudioAssessmentCard/index.js
+++ b/app/javascript/components/StudioAssessmentCard/index.js
@@ -1,9 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
-import styles from './styles';
import TableCell from '@material-ui/core/TableCell';
-
+import styles from './styles';
class StudioAssessmentCard extends React.Component {
constructor(props) {
@@ -59,13 +58,19 @@ class StudioAssessmentCard extends React.Component {
>
{vc}
-
+
{react}
-
+
{db}
-
+
{node}
({
containerStyle: {
padding: '18px 28px',
- borderRadius: 10,
+ borderRadius: theme.shape.borderRadius,
marginLeft: 0,
marginRight: 0,
},
diff --git a/app/javascript/components/StudioAssessmentModal/styles.js b/app/javascript/components/StudioAssessmentModal/styles.js
index b6a7c042..a4287a58 100644
--- a/app/javascript/components/StudioAssessmentModal/styles.js
+++ b/app/javascript/components/StudioAssessmentModal/styles.js
@@ -6,7 +6,7 @@
const styles = theme => ({
dialog: {
- borderRadius: theme.shape.borderRadius
+ borderRadius: theme.shape.borderRadius,
},
title: {
backgroundColor: theme.palette.primary.main,
diff --git a/app/javascript/components/StudioAssessmentQuestion/questions.js b/app/javascript/components/StudioAssessmentQuestion/questions.js
index 01f2870b..7f50a991 100644
--- a/app/javascript/components/StudioAssessmentQuestion/questions.js
+++ b/app/javascript/components/StudioAssessmentQuestion/questions.js
@@ -1,98 +1,95 @@
export const questions = [
- 'Understands the Big Picture of the Full Stack',
- 'JavaScript Fundamentals',
- 'Understands Version Control',
- 'React Core Competencies',
- 'NodeJs Core Competencies',
- 'Database Core Competencies',
- 'Problem Solving: Whiteboarding',
- ];
-
+ 'Understands the Big Picture of the Full Stack',
+ 'JavaScript Fundamentals',
+ 'Understands Version Control',
+ 'React Core Competencies',
+ 'NodeJs Core Competencies',
+ 'Database Core Competencies',
+ 'Problem Solving: Whiteboarding',
+];
+
export const questionContent = [
- [
- 'Describe the roles of Html,Javascript, and CSS in a webpage.',
- 'What distinguishes a web application from a static webpage?',
- 'In a full stack web application, what is the client-side code typically responsible for? The server side code?',
- 'Name a few ways in which data can be sent to a server from a web browser.',
- 'What frameworks might be used on the client to help manage modifying the DOM?',
- 'What technologies might be used on the server to deliver web pages to the browser?'
- ],
- [
- 'Explain the difference between var, let, and const?',
- 'What is a closure?',
- 'What is a prototype?',
- 'How are apply, call, and bind methods on the function prototype used? Why would you use them?',
- 'In a class method, what does "this" keyword refer to? In a top-level function?',
- 'What is an anonymous function? An arrow function? What is "this" in each?'
- ],
- [
- 'What is Git?',
- 'What are some advantages of using Git?'
- ],
- [
- 'What is a component?',
- 'Name two ways you might define a component?',
- 'Compare component properties versus state? How is each modified?',
- 'What do we mean by the lifecycle" of a component? Talk about some lifecycle methods and what they are used for.'
- ],
- [
- 'What is a module?',
- 'How does a module expose its public interface?',
- 'Are there different kinds of interfaces a module can expose?',
- 'When/how is asynchronous code executed? (getting at the event loop)'
- ],
- [
- 'Describe the difference between a relational DB and a json store such as Mongo.',
- 'Describe the use of keys in both.',
- 'How are relations between tables/collections established in either?',
- 'Write a SQL query to return the top 5 results from a “People” table, sorted alphabetically by name, selecting “Name”, “Dob”, and “Email” fields.'
- ],
- [
- 'Write a function in pseudocode that will format a string.',
- 'It will take in two parameters, a format string, and an array of string replacements.'
- ],
- ];
-
+ [
+ 'Describe the roles of Html,Javascript, and CSS in a webpage.',
+ 'What distinguishes a web application from a static webpage?',
+ 'In a full stack web application, what is the client-side code typically responsible for? The server side code?',
+ 'Name a few ways in which data can be sent to a server from a web browser.',
+ 'What frameworks might be used on the client to help manage modifying the DOM?',
+ 'What technologies might be used on the server to deliver web pages to the browser?',
+ ],
+ [
+ 'Explain the difference between var, let, and const?',
+ 'What is a closure?',
+ 'What is a prototype?',
+ 'How are apply, call, and bind methods on the function prototype used? Why would you use them?',
+ 'In a class method, what does "this" keyword refer to? In a top-level function?',
+ 'What is an anonymous function? An arrow function? What is "this" in each?',
+ ],
+ ['What is Git?', 'What are some advantages of using Git?'],
+ [
+ 'What is a component?',
+ 'Name two ways you might define a component?',
+ 'Compare component properties versus state? How is each modified?',
+ 'What do we mean by the lifecycle" of a component? Talk about some lifecycle methods and what they are used for.',
+ ],
+ [
+ 'What is a module?',
+ 'How does a module expose its public interface?',
+ 'Are there different kinds of interfaces a module can expose?',
+ 'When/how is asynchronous code executed? (getting at the event loop)',
+ ],
+ [
+ 'Describe the difference between a relational DB and a json store such as Mongo.',
+ 'Describe the use of keys in both.',
+ 'How are relations between tables/collections established in either?',
+ 'Write a SQL query to return the top 5 results from a “People” table, sorted alphabetically by name, selecting “Name”, “Dob”, and “Email” fields.',
+ ],
+ [
+ 'Write a function in pseudocode that will format a string.',
+ 'It will take in two parameters, a format string, and an array of string replacements.',
+ ],
+];
+
export const rubricItems = [
- [
- 'While they may recognize technologies, the student cannot articulate roles of varying technologies, let alone be able to decide what technology to use for a particular need or how it fits into the bigger picture.',
- 'The student articulates that there are different technologies with varied roles, can name the technologies involved with different roles, but struggles to decide what technology or role is involved in a particular domain. Also struggles with understanding how the technologies fit together.',
- 'The student articulates the varied technologies in a web stack, their roles, the roles of the client and server, how these technologies/roles fit together and can (mostly) decided where to implement varied needs such as authorization, validation, persistence, etc.',
- ],
-
- [
- 'Can clearly articulate hoisting, scope, closures. Knows the role of “this” and can describe the value under varied circumstances. Knows OOP and FP features. May be squishy on the “...” operator, but recognizes it and has an idea of its use.',
- 'Understands scope and this binding. May not know the hoisting difference between var and let, but knows what hoisting is. May not know closure or be able to articulate the concept (function plus context), but understands captured variables. Understands object encapsulation via classes/prototypes, but may not understand inheritance or clearly articulate the concepts.',
- 'Does not understand core javascript concepts. May be able to say what is output in the sample code, but does not have an understanding of why. Does not know about classes/prototypes.',
- ],
-
- [
- 'Understands that git is a version control system (should use this exact term) in order to manage the history of versions of a code/package/repository',
- 'Understands the role of Git but is fuzzy on the nature/purpose of continuous deployment',
- 'Does not understand the role of Git nor CD.',
- ],
-
- [
- 'Has a solid grasp of components, how to manage state, component lifecycle, event callbacks, and lifting state. May not fully understand state management, but does understand that it’s immutable though may not know the word.',
- 'Understands what components are and has an idea of their lifecycle. Has limited understanding of managing state, data binding, callbacks, and state lifting.',
- 'Fails to understand any of: what a component is, that there are lifecycle methods, what the difference between props and state is, or how to hook up an event callback',
- ],
-
- [
- 'Is able to describe various methods of declaring async code and can describe when they run. Understands what EventEmitters and streams are and how to use them. Begins',
- 'Has an understanding of modules, async code, and node-core. May miss that these are patterns established by Node’s runtime environment, may not be able to enumerate async methods or fully grasp when it runs.',
- 'Does not understand patterns. May know that async is code executed concurrently at a (possibly) later time, but does not know how and cannot write asynchronous code or identify when code is asynchronous.',
- ],
+ [
+ 'While they may recognize technologies, the student cannot articulate roles of varying technologies, let alone be able to decide what technology to use for a particular need or how it fits into the bigger picture.',
+ 'The student articulates that there are different technologies with varied roles, can name the technologies involved with different roles, but struggles to decide what technology or role is involved in a particular domain. Also struggles with understanding how the technologies fit together.',
+ 'The student articulates the varied technologies in a web stack, their roles, the roles of the client and server, how these technologies/roles fit together and can (mostly) decided where to implement varied needs such as authorization, validation, persistence, etc.',
+ ],
+
+ [
+ 'Can clearly articulate hoisting, scope, closures. Knows the role of “this” and can describe the value under varied circumstances. Knows OOP and FP features. May be squishy on the “...” operator, but recognizes it and has an idea of its use.',
+ 'Understands scope and this binding. May not know the hoisting difference between var and let, but knows what hoisting is. May not know closure or be able to articulate the concept (function plus context), but understands captured variables. Understands object encapsulation via classes/prototypes, but may not understand inheritance or clearly articulate the concepts.',
+ 'Does not understand core javascript concepts. May be able to say what is output in the sample code, but does not have an understanding of why. Does not know about classes/prototypes.',
+ ],
+
+ [
+ 'Understands that git is a version control system (should use this exact term) in order to manage the history of versions of a code/package/repository',
+ 'Understands the role of Git but is fuzzy on the nature/purpose of continuous deployment',
+ 'Does not understand the role of Git nor CD.',
+ ],
+
+ [
+ 'Has a solid grasp of components, how to manage state, component lifecycle, event callbacks, and lifting state. May not fully understand state management, but does understand that it’s immutable though may not know the word.',
+ 'Understands what components are and has an idea of their lifecycle. Has limited understanding of managing state, data binding, callbacks, and state lifting.',
+ 'Fails to understand any of: what a component is, that there are lifecycle methods, what the difference between props and state is, or how to hook up an event callback',
+ ],
+
+ [
+ 'Is able to describe various methods of declaring async code and can describe when they run. Understands what EventEmitters and streams are and how to use them. Begins',
+ 'Has an understanding of modules, async code, and node-core. May miss that these are patterns established by Node’s runtime environment, may not be able to enumerate async methods or fully grasp when it runs.',
+ 'Does not understand patterns. May know that async is code executed concurrently at a (possibly) later time, but does not know how and cannot write asynchronous code or identify when code is asynchronous.',
+ ],
- [
- 'Knows the difference between organization of data in document stores and relational DBs. Can successfully write a basic SQL query. Has a notion of ACID principles and how that relates to transactions.',
- 'Understands organization of data and relations between data entities in databases.',
- 'Does not understand how data is organized in a database.',
- ],
+ [
+ 'Knows the difference between organization of data in document stores and relational DBs. Can successfully write a basic SQL query. Has a notion of ACID principles and how that relates to transactions.',
+ 'Understands organization of data and relations between data entities in databases.',
+ 'Does not understand how data is organized in a database.',
+ ],
- [
- 'Gives a correct solution with no bugs (eventually). If their solution started with bugs, can figure out that those bugs exist.May have bugs initially but ought to be able to test their functions by walking through line by line with mock data and find the bugs.',
- 'Gives a plausible solution but may have remaining bugs even after some hinting.',
- 'Can’t arrive at a solution that even remotely prints out what’s required, even with subtle proctor hints and intervention.',
- ],
- ];
\ No newline at end of file
+ [
+ 'Gives a correct solution with no bugs (eventually). If their solution started with bugs, can figure out that those bugs exist.May have bugs initially but ought to be able to test their functions by walking through line by line with mock data and find the bugs.',
+ 'Gives a plausible solution but may have remaining bugs even after some hinting.',
+ 'Can’t arrive at a solution that even remotely prints out what’s required, even with subtle proctor hints and intervention.',
+ ],
+];
diff --git a/app/javascript/components/ViewMoreModal/index.js b/app/javascript/components/ViewMoreModal/index.js
new file mode 100644
index 00000000..8579f872
--- /dev/null
+++ b/app/javascript/components/ViewMoreModal/index.js
@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MUIRichTextEditor from 'mui-rte';
+import 'draft-js/dist/Draft.css';
+import 'draftail/dist/draftail.css';
+import { withStyles } from '@material-ui/core/styles';
+import {
+ Dialog,
+ Grid,
+ Paper,
+ Input,
+ Fab,
+ Typography,
+} from '@material-ui/core/';
+import styles from './styles';
+
+function ViewMoreModal({
+ classes,
+ description,
+ title,
+ category,
+ dueDate,
+ isCaseNote,
+ open,
+ handleClose,
+}) {
+ const renderRichText = desc => (
+
+ );
+ const renderReadOnlyTextField = desc => (
+
+ );
+ const renderCategory = categorySelected => (
+
+
+
+ {categorySelected.toUpperCase()}
+
+
+
+ );
+ const renderDueDate = date => {
+ if (dueDate) {
+ return (
+
+