Add note view to student details

pharmd-app/package.json

@@ -55,7 +55,7 @@
     "@storybook/addon-links": "^5.3.13",
     "@storybook/addons": "^5.3.13",
     "@storybook/preset-create-react-app": "^1.5.2",
-    "@storybook/react": "^5.3.13",
+    "@storybook/react": "^5.3.21",
     "@svgr/webpack": "^5.1.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-macros": "^2.8.0",

pharmd-app/src/App.js

@@ -11,6 +11,7 @@ import { AuthProvider, DataProvider } from "./services";
 import createLigthTheme from "./themes/light-theme";
 import DashboardLayout from "./components/Layout/DashboardLayout";
 import customRoutes from "./config/customRoutes";
+import customReducers from './redux/reducers';
 
 const App = () => {
   return (
@@ -23,6 +24,7 @@ const App = () => {
             authProvider={AuthProvider}
             dashboard={Dashboard}
             theme={theme}
+            customReducers={customReducers}
             customRoutes={customRoutes}
           >
             <Resource name="users" {...profile} />

pharmd-app/src/components/Basic/BasicTag.js

@@ -0,0 +1,27 @@
+import React from "react";
+import tw, { styled } from "twin.macro";
+import Chip from "@material-ui/core/Chip";
+
+// ${props => props.theme.typography.size4}
+const Pill = styled(Chip)`
+
+   ${tw`rounded-lg capitalize w-16 fontStyle-4 text-xs font-bold tracking-wider`}
+   margin: 3px;
+   color: ${props => props.color};
+   background-color: #b5c7f8;
+`;
+
+const Field = styled.a`
+  ${tw`p-0`}
+`;
+
+const BasicTag = ({ text, color }) => {
+    const tagColor = color || '#f2994a'
+    return (
+        <Field>
+            <Pill label={text} color={tagColor} />
+        </Field>
+    );
+};
+
+export default BasicTag;

pharmd-app/src/components/Basic/NoteIcon.js

@@ -16,6 +16,12 @@ const SVG = styled(SvgIcon)`
       color: black;
     `}
 
+    ${props =>
+    props.color === "red" &&
+    css`
+      color: red;
+    `}
+
     ${props =>
       props.primary &&
       css`

pharmd-app/src/components/Fields/NoteBoxField.js

@@ -0,0 +1,78 @@
+import React from 'react'
+import tw, { styled } from "twin.macro";
+import MuiPaper from "@material-ui/core/Paper";
+import {NOTE} from "../../constants/apiObjects";
+import CardHeader from "@material-ui/core/CardHeader";
+import CardContent from "@material-ui/core/CardContent";
+import BasicTag from "../Basic/BasicTag";
+import {DeleteButton} from 'react-admin';
+
+const CardRoot = styled.div`
+    flex-grow: 1;
+    margin: 15px;
+`
+
+const Paper = styled(MuiPaper)`
+  ${tw`rounded-xl h-64 w-56 shadow-cardLight`}
+  padding: 7px;
+  margin: auto;
+
+`;
+
+const Tags = styled.div`
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-around;
+`
+
+const MAX_TITLE_LENGTH = 25;
+const MAX_BODY_LENGTH = 30;
+
+const NoteBoxField = ({ record, studentId, onDelete }) => {
+    const id = record[NOTE.ID];
+    const title = record[NOTE.TITLE];
+    const body = record[NOTE.BODY];
+    const tags = record[NOTE.TAGS];
+    const date = new Date(record[NOTE.DATE]).toLocaleDateString();
+
+    function truncate(str, n){
+        return (str.length > n) ? str.substr(0, n-1) + '…' : str;
+    }
+
+    return (
+        <CardRoot>
+            <Paper>
+
+                    <CardHeader
+                        action={
+                            <div>
+                                <DeleteButton label="" onClick={onDelete} basePath={`/students/${studentId}/details`} record={record} resource="notes" />
+                            </div>
+                        }
+                        title={truncate(title, MAX_TITLE_LENGTH)}
+                        subheader={date}
+                    />
+                    <CardContent>
+                        <p>
+                            {truncate(body, MAX_BODY_LENGTH)}
+                        </p>
+                        <Tags>
+                            {tags.map((tag, ind) => {
+                                if (ind < 2) {
+                                    return <BasicTag text={tag}/>;
+                                } else {
+                                    const more = `${tags.length - 2} more`
+                                    return <BasicTag text={more} />
+                                }
+
+                            })}
+                        </Tags>
+
+                    </CardContent>
+            </Paper>
+        </CardRoot>
+    )
+}
+
+export default NoteBoxField;

pharmd-app/src/components/Fields/NoteListField.js

@@ -1,7 +1,12 @@
 import React from "react";
-import { Error, Loading, useQuery } from "react-admin";
+import { useDispatch } from "react-redux";
+import { setNotesModal } from "../../redux/actions";
+import { useQuery, Loading, Error } from "react-admin";
 import tw, { styled } from "twin.macro";
 import NoteField from "./NoteField";
+import IconButton from "@material-ui/core/IconButton";
+import AddCircleOutlineOutlinedIcon from '@material-ui/icons/AddCircleOutlineOutlined';
+import NoteIcon from "../Basic/NoteIcon";
 
 const Label = styled.h1`
   ${tw`fontStyle-6 font-medium inline-flex`}
@@ -32,16 +37,26 @@ const NoteListField = ({ record = {}, source }) => {
     }
   });
 
+  const dispatch = useDispatch();
+
+  function addNote() {
+    dispatch(setNotesModal({ isOpen: true }))
+  }
+
   if (loading) return <Loading />;
   if (error) return <Error />;
   if (!data) return null;
 
   return (
     <Notes>
       <Label>Recent Notes</Label>
-      {data.map(note => {
-        return <NoteField source="id" record={note} />;
-      })}
+      <IconButton onClick={addNote}>
+        <NoteIcon src={AddCircleOutlineOutlinedIcon} size="small" isPrimary="primary" />
+      </IconButton>
+      {data.map((note, ind) => {
+        return <NoteField source='id' record={note} key={ind}/>
+      })
+      }
     </Notes>
   );
 };

pharmd-app/src/components/Layout/NoteCreate.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Create, TextInput, SimpleForm, required } from 'react-admin';
+
+const NoteCreate = props => {
+    // Input --> Record
+    const parseInput = input => input && input.split(" ")
+
+    // Record --> Input
+    const formatInput = record => record && record.join(" ")
+
+    return (
+        <Create {...props} resource="notes" onSuccess={props.onSuccess} basePath="notes">
+            <SimpleForm initialValues={ {student: props.match.params.id} }>
+                <TextInput label="Note Title" source="title" validate={required()} />
+                <TextInput label="Note Content" source="body" validate={required()} />
+                <TextInput label="Tags" source="tags" validate={required()} format={formatInput} parse={parseInput} />
+            </SimpleForm>
+        </Create>
+    )
+}
+
+export default NoteCreate;

pharmd-app/src/components/Layout/PharmDModal.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import Modal from '@material-ui/core/Modal';
+import { styled } from "twin.macro";
+import PropTypes from "prop-types";
+
+const ModalFrame = styled(Modal)`
+    margin-top: 10%;
+    margin-bottom: 10%;
+    margin-left: 15%;
+    margin-right: 15%;
+
+`
+
+const InnerModal = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: ${props => props.theme.palette.primary.main};
+    background-color: white;
+    padding: 20px;
+`
+
+const PharmDModal = props => {
+
+    return (
+        <ModalFrame open={props.open}
+                    onBackdropClick={props.onClose}
+                    aria-labelledby={props.title}
+                    aria-describedby="PharmD Modal View"
+        >
+            <InnerModal>
+                {typeof props.title === "string" ?
+                    <h2>{props.title}</h2>
+                    : props.title
+                }
+                {props.children}
+            </InnerModal>
+        </ModalFrame>
+    )
+}
+
+PharmDModal.propTypes = {
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    open: PropTypes.bool,
+    onClose: PropTypes.func,
+}
+
+PharmDModal.defaultProps = {
+    title: "",
+    open: false,
+    onClose: null
+}
+
+export default PharmDModal;

pharmd-app/src/redux/actions/index.js

@@ -0,0 +1,5 @@
+import { UI_NOTES_MODAL } from "../constants/action-types";
+
+export function setNotesModal(payload) {
+  return { type: UI_NOTES_MODAL, payload}
+}

pharmd-app/src/redux/constants/action-types.js

@@ -0,0 +1 @@
+export const UI_NOTES_MODAL = "UI_MODAL";

pharmd-app/src/redux/reducers/index.js

@@ -0,0 +1,7 @@
+import studentSideBarReducer from "./studentSideBarReducer";
+import notesModalReducer from "./notesModalReducer";
+
+export default {
+    studentSidebarOpen: studentSideBarReducer,
+    notesModalOpen: notesModalReducer
+}

pharmd-app/src/redux/reducers/notesModalReducer.js

@@ -0,0 +1,8 @@
+import { UI_NOTES_MODAL} from "../constants/action-types";
+
+export default (previousState = [false, () => {}],  {type, payload}) => {
+    if (type === UI_NOTES_MODAL) {
+        return [payload.isOpen, payload.onClose]
+    }
+    return previousState;
+}