Create / Edit / View your Organizations Question Sets

src/actions/actionTypes.js

@@ -64,11 +64,11 @@ export const CREATE_QUESTION_SUCCESS = 'CREATE_QUESTION_SUCCESS';
 export const DELETE_QUESTION_SUCCESS = 'DELETE_QUESTION_SUCCESS';
 
 // questionsets
-export const LOAD_QUESTIONSETS_SUCCESS = 'LOAD_QUESTIONS_SUCCESS';
+export const LOAD_QUESTIONSETS_SUCCESS = 'LOAD_QUESTIONSETS_SUCCESS';
 export const LOAD_QUESTIONSET_SCHEMA_SUCCESS = 'LOAD_QUESTIONSET_SCHEMA_SUCCESS';
-export const UPDATE_QUESTIONSET_SUCCESS = 'UPDATE_QUESTION_SUCCESS';
-export const CREATE_QUESTIONSET_SUCCESS = 'CREATE_QUESTION_SUCCESS';
-export const DELETE_QUESTIONSET_SUCCESS = 'DELETE_QUESTION_SUCCESS';
+export const UPDATE_QUESTIONSET_SUCCESS = 'UPDATE_QUESTIONSET_SUCCESS';
+export const CREATE_QUESTIONSET_SUCCESS = 'CREATE_QUESTIONSET_SUCCESS';
+export const DELETE_QUESTIONSET_SUCCESS = 'DELETE_QUESTIONSET_SUCCESS';
 
 // tasks
 export const LOAD_TASKS_SUCCESS = 'LOAD_TASKS_SUCCESS';

src/actions/questionSetActions.js

@@ -21,10 +21,10 @@ export function loadQuestionSetSchemaSuccess(questionSetFormSchema) {
   return {type: types.LOAD_QUESTIONSET_SCHEMA_SUCCESS, questionSetFormSchema};
 }
 
-export function loadQuestionSetSchema() {
+export function loadQuestionSetSchema(questionSetId) {
   // make async call to api, handle promise, dispatch action when promise is resolved
   return function (dispatch) {
-    return questionSetApi.getQuestionSetSchema().then(questionSetFormSchema => {
+    return questionSetApi.getQuestionSetSchema(questionSetId).then(questionSetFormSchema => {
       dispatch(loadQuestionSetSchemaSuccess(questionSetFormSchema));
     }).catch(error => {
       throw(error);

src/api/QuestionApi.js

@@ -2,6 +2,20 @@ import {questionUrl, requestHeaders} from './apiBase';
 
 class QuestionApi {
 
+  static getQuestionSchema() {
+      const headers = requestHeaders;
+      const request = new Request(questionUrl + 'schema', {
+        method: 'GET',
+        headers: headers
+      });
+
+      return fetch(request).then(response => {
+        return response.json();
+      }).catch(error => {
+        throw(error);
+      });
+  }
+
   static getAllQuestions() {
     const headers = requestHeaders;
     const request = new Request(questionUrl, {

src/api/QuestionSetApi.js

@@ -2,9 +2,9 @@ import {questionSetUrl, requestHeaders} from './apiBase';
 
 class QuestionSetApi {
 
-  static getQuestionSetSchema() {
+  static getQuestionSetSchema(questionSetId) {
     const headers = requestHeaders;
-    const request = new Request(questionSetUrl + 'schemaform?id=1', {
+    const request = new Request(questionSetUrl + 'schemaform?id=' + `${questionSetId}`, {
       method: 'GET',
       headers: headers
     });
@@ -18,7 +18,7 @@ class QuestionSetApi {
 
   static getAllQuestionSets() {
     const headers = requestHeaders;
-    const request = new Request(questionSetUrl, {
+    const request = new Request(questionSetUrl + '?populate=true', {
       method: 'GET',
       headers: headers
     });
@@ -73,6 +73,18 @@ class QuestionSetApi {
       return error;
     });
   }
+
+  static getQuestionSetQuestions(questionSet) {
+    return
+  }
+
+  static addQuestionSetQuestion(questionSet, question) {
+    return
+  }
+
+  static deleteQuestionSetQuestion(questionSet, question) {
+    return 
+  }
 }
 
 export default QuestionSetApi;

src/components/App.js

@@ -1,6 +1,6 @@
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import withWidth, {LARGE, SMALL} from 'material-ui/utils/withWidth';
-import React, {PropTypes} from 'react';
+import React from 'react';
 import Data from '../data';
 import ThemeDefault from '../theme-default';
 import Header from './base/Header';
@@ -10,6 +10,7 @@ import {bindActionCreators} from 'redux';
 import * as userActions from '../actions/userActions';
 import * as employeeActions from '../actions/employeeActions';
 import * as organizationActions from '../actions/organizationActions';
+import PropTypes from 'prop-types'
 
 class App extends React.Component {
 

src/components/questionset/QuestionSetQuestionsPage.js

@@ -0,0 +1,65 @@
+import Paper from 'material-ui/Paper';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {connect} from 'react-redux';
+import {withRouter} from 'react-router';
+import {bindActionCreators} from 'redux';
+import * as actions from '../../actions/questionSetActions';
+import globalStyles from '../../styles';
+
+class QuestionSetQuestionsPage extends React.Component {
+  state = {
+    saved: true,
+    questionSetId: this.props.params.id
+  }
+
+  componentWillMount() {
+    if (this.state.questionSetId) {
+      this.props.actions.loadQuestionSetSchema(this.state.questionSetId);
+    }
+  }
+
+  saveQuestionSet = (questionSet) => {
+    this.setState({saved: true});
+    if (questionSet.id) {
+      return this.props.actions.updateQuestionSet(questionSet).then(this.props.actions.loadQuestionSetSchema(questionSet.id));
+    } else {
+      return this.props.actions.createQuestionSet(questionSet).then(this.props.actions.loadQuestionSetSchema(questionSet.id));
+    }
+  }
+
+  updateSaveQuestionSet = (saved) => {
+    this.setState({
+      saved: saved
+    });
+  };
+
+  render() {
+    let { questionSetFormSchema } = this.props;
+    console.log(questionSetFormSchema)
+    return (
+      <Paper style={globalStyles.paper}>
+
+      </Paper>
+    )
+  }
+
+}
+
+QuestionSetQuestionsPage.propTypes = {
+  questionSetFormSchema: PropTypes.object.isRequired
+}
+
+function mapStateToProps(state, ownProps) {
+  return {
+    questionSetFormSchema: state.questionSetFormSchema
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch)
+  };
+}
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(QuestionSetQuestionsPage));

src/components/questionset/QuestionSetTable.js

@@ -0,0 +1,32 @@
+import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow} from 'material-ui/Table';
+import PropTypes from 'prop-types';
+import React from 'react';
+import QuestionSetTableRow from './QuestionSetTableRow';
+
+const QuestionSetTable = (props) => {
+  return (
+    <div>
+      <Table>
+        <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
+        <TableRow>
+          <TableHeaderColumn>Name</TableHeaderColumn>
+          <TableHeaderColumn>Owner</TableHeaderColumn>
+          <TableHeaderColumn></TableHeaderColumn>
+          <TableHeaderColumn></TableHeaderColumn>
+        </TableRow>
+        </TableHeader>
+      <TableBody showRowHover={true} stripedRows={true}>
+        {props.questionSets.map(questionSet =>
+          <QuestionSetTableRow key={questionSet.id} questionSet={questionSet} deleteQuestionSet={props.deleteQuestionSet}/>
+        )}
+      </TableBody>
+    </Table>
+    </div>
+  );
+};
+
+QuestionSetTable.propTypes = {
+  questionSets: PropTypes.array.isRequired
+};
+
+export default QuestionSetTable

src/components/questionset/QuestionSetTablePage.js

@@ -0,0 +1,57 @@
+import Paper from 'material-ui/Paper';
+import RaisedButton from 'material-ui/RaisedButton';
+import {Toolbar, ToolbarGroup} from 'material-ui/Toolbar';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import * as actions from '../../actions/questionSetActions';
+import globalStyles from '../../styles';
+import QuestionSetTable from './QuestionSetTable';
+
+
+class QuestionSetTablePage extends React.Component {
+  componentWillMount() {
+    this.props.actions.loadQuestionSets();
+  }
+
+  deleteQuestionSet = (questionSet) => {
+    this.props.actions.deleteQuestionSet(questionSet);
+  };
+
+  render() {
+    const questionSets = this.props.questionSets;
+    return (
+      <Paper style={globalStyles.paper}>
+        <Toolbar>
+          <ToolbarGroup>
+            <RaisedButton
+              label="Create new"
+              primary={true}
+              href="/questionsets/new"
+            />
+          </ToolbarGroup>
+        </Toolbar>
+        <QuestionSetTable questionSets={questionSets} deleteQuestionSet={this.deleteQuestionSet}/>
+      </Paper>
+    );
+  }
+}
+
+QuestionSetTablePage.propTypes = {
+  questionSets: PropTypes.array.isRequired
+};
+
+function mapStateToProps(state, ownProps) {
+  return {
+    questionSets: state.questionSets
+  };
+}
+
+function mapDispatchToProps(dispatch){
+  return {
+    actions: bindActionCreators(actions, dispatch)
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(QuestionSetTablePage)

src/components/questionset/QuestionSetTableRow.js

@@ -0,0 +1,46 @@
+import RaisedButton from 'material-ui/RaisedButton'
+import {TableRow, TableRowColumn} from 'material-ui/Table'
+import PropTypes from 'prop-types'
+import React from 'react';
+import {questionSetPath} from '../../api/apiBase'
+
+class QuestionSetTableRow extends React.Component {
+
+  render(){
+    const questionSet = this.props.questionSet;
+    const isNotSetOwner = (questionSet.organization === null);
+
+    return (
+      <TableRow>
+        <TableRowColumn width={20}>{questionSet.title}</TableRowColumn>
+        <TableRowColumn width={20}>{(questionSet.organization&&questionSet.organization.name) || 'Cemartian'}</TableRowColumn>
+        <TableRowColumn width={10}>
+          <RaisedButton
+            label="delete"
+            secondary={true}
+            disabled={isNotSetOwner}
+            disabledBackgroundColor="#dddddd"
+            disabledLabelColor="#000000"
+            onTouchTap={() => this.props.deleteQuestionSet(questionSet)}
+          />
+        </TableRowColumn>
+        <TableRowColumn width={10}>
+          <RaisedButton
+            label="edit"
+            primary={true}
+            disabled={isNotSetOwner}
+            disabledBackgroundColor="#dddddd"
+            disabledLabelColor="#000000"
+            href={questionSetPath + questionSet.id}
+          />
+        </TableRowColumn>
+      </TableRow>
+    );
+  }
+}
+
+QuestionSetTableRow.propTypes = {
+  questionSet: PropTypes.object.isRequired
+};
+
+export default QuestionSetTableRow;

src/data.js

@@ -10,7 +10,8 @@ const data = {
   menus: [
     {text: 'Welcome', icon: <Assessment/>, link: '/home'},
     {text: 'Referrals', icon: <PermIdentity/>, link: '/referrals'},
-    {text: 'Intakes', icon: <PermIdentity/>, link: '/intakes'}
+    {text: 'Intakes', icon: <PermIdentity/>, link: '/intakes'},
+    {text: 'Question Sets', icon: <PermIdentity/>, link: '/questionsets/'}
   ],
   adminmenus: [
     {text: 'Permissions', icon: <Assessment/>, link: '/dash'},

src/reducers/index.js

@@ -6,6 +6,8 @@ import messages from './messageReducer';
 import notifications from './notificationReducer';
 import organizations, {organizationReducer as organization} from './organizationReducer';
 import {questionSetSchemaReducer as questionSetFormSchema} from './questionSetReducer';
+import questionSets from './questionSetReducer';
+import questions from './questionReducer';
 import tasks from './taskReducer';
 import users, {userReducer as user} from './userReducer';
 
@@ -24,7 +26,9 @@ const rootReducer = combineReducers({
   tasks,
   users,
   user,
-  questionSetFormSchema
+  questionSetFormSchema,
+  questionSets,
+  questions
 });
 
 export default rootReducer;

src/reducers/initialState.js

@@ -19,5 +19,7 @@ export default {
       properties: []
     }, form: []
   },
+  questions: [],
+  questionSets: [],
   session: !!localStorage.jwt
 };

src/routes.js

@@ -8,8 +8,10 @@ import WelcomePage from './components/base/WelcomePage';
 import EmployeeTablePage from './components/employee/EmployeeTablePage';
 import IntakePage from './components/intake/IntakePage';
 import IntakeTablePage from './components/intake/IntakeTablePage';
+import QuestionSetTablePage from './components/questionset/QuestionSetTablePage';
+import QuestionSetQuestionsPage from './components/questionset/QuestionSetQuestionsPage';
 import AuthService from './utils/AuthService';
-import {dashPath, employeePath, homePath, intakePath} from './utils/pathsHelper';
+import {dashPath, employeePath, homePath, intakePath, questionSetPath} from './utils/pathsHelper';
 
 const auth = new AuthService(`${process.env.REACT_APP_AUTH0CLIENTID}`, `${process.env.REACT_APP_AUTH0DOMAIN}`, 'login');
 
@@ -45,6 +47,11 @@ export const makeMainRoutes = () => {
           <Route path=":id" component={IntakePage} onEnter={requireAuth}/>
           <Redirect from="*" to={intakePath}/>
         </Route>
+        <Route path={questionSetPath}>
+          <IndexRoute component={QuestionSetTablePage}/>
+          <Route path=":id" component={QuestionSetQuestionsPage} onEnter={requireAuth}/>
+          <Redirect from="*" to={questionSetPath}/>
+        </Route>
         <Redirect from="*" to={homePath}/>
       </Route>
     </Route>

src/utils/pathsHelper.js

@@ -10,4 +10,5 @@ export const notificationPath = '/notifications/';
 export const organizationPath = '/organizations/';
 export const organizationrolePath = '/organizationroles/';
 export const questionPath = '/questions/';
+export const questionSetPath = '/questionsets/';
 export const taskPath = '/tasks/';