Merge pull request ckeditor#14 from NextIdeaTechUS/feature/filesTab

Feature/files tab
Talhafayyaz11 · Feb 15, 2021 · 650ba09 · 650ba09
2 parents 919b0ed + c83667b
commit 650ba09
Show file tree

Hide file tree

Showing 24 changed files with 2,035 additions and 61 deletions.
diff --git a/public/static/img/delete.svg b/public/static/img/delete.svg
diff --git a/public/static/img/fileIcon.png b/public/static/img/fileIcon.png
diff --git a/src/components/reports/FileChip.js b/src/components/reports/FileChip.js
@@ -0,0 +1,72 @@
+import React from "react";
+import styled from "styled-components/macro";
+
+const Chip = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0px 10px 0px 10px;
+  height: 72px;
+  border: 1px solid #dadce0;
+  box-sizing: border-box;
+  border-radius: 4px;
+  margin: 14px 0px 20px 0px;
+`;
+
+const FileInfo = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const FileNameWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  p {
+    font-weight: bold;
+    padding-left: 10px;
+    line-height: 0.3px;
+  }
+`;
+
+const IconContainer = styled.div`
+  width: 36px;
+  height: 36px;
+  background: #dcedff;
+  border-radius: 50%;
+`;
+
+const LeftContainer = styled.div`
+  display: flex;
+  align-items: center;
+  display: flex;
+  p {
+    color: #09539e;
+  }
+`;
+
+const DeleteIcon = styled.img`
+  padding-left: 15px;
+`;
+
+const FileChip = ({ name, handleDelete }) => {
+  const today = new Date();
+
+  return (
+    <Chip>
+      <FileInfo>
+        <IconContainer />
+        <FileNameWrapper>
+          <p>{name}</p>
+          <span>{today.toLocaleDateString("en-US")}</span>
+        </FileNameWrapper>
+      </FileInfo>
+      <LeftContainer>
+        <p>Preview</p>
+        <DeleteIcon src="/static/img/delete.svg" onClick={handleDelete} />
+      </LeftContainer>
+    </Chip>
+  );
+};
+
+export default FileChip;
diff --git a/src/components/reports/Input.js b/src/components/reports/Input.js
@@ -2,15 +2,28 @@ import styled from "styled-components/macro";
 import { Input as MuiInput } from "@material-ui/core";
 
 const StyledInput = styled(MuiInput)`
-  width: 72px;
-  height: 38px;
+  width: ${({ size }) => size.width};
+  height: ${({ size }) => size.height};
+  padding-left: 8px;
   background: #f8f9fa;
   border-radius: 4px 4px 0px 0px;
   text-align: center;
 `;
 
-const Input = ({ value, onChange }) => {
-  return <StyledInput value={value} onChange={onChange}></StyledInput>;
+const Input = ({
+  value,
+  onChange,
+  placeholder = "",
+  fieldsize = { width: "72px", height: "38px" },
+}) => {
+  return (
+    <StyledInput
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      size={fieldsize}
+    />
+  );
 };
 
 export default Input;
diff --git a/src/components/reports/Toggle.js b/src/components/reports/Toggle.js
@@ -4,6 +4,7 @@ import {
   ToggleButtonGroup as MuiToggleButtonGroup,
 } from "@material-ui/lab";
 import styled from "styled-components/macro";
+import Input from "./Input";
 
 export const ToggleButtonGroup = styled(MuiToggleButtonGroup)`
   width: 100%;
@@ -37,10 +38,11 @@ const Toggle = ({
     width: "85px",
     height: "38px",
   },
+  exclusive = true,
 }) => (
   <>
     <ToggleButtonGroup
-      exclusive
+      exclusive={exclusive}
       togglesize={togglesize}
       direction={direction}
       name={name}
@@ -50,7 +52,7 @@ const Toggle = ({
       onChange={(e, value) => onChange(value)}
       aria-label={name}
     >
-      {options.map(({ value, title }, index) => (
+      {options.map(({ value, title, addText = false }, index, props) => (
         <ToggleButton value={value} aria-label={value} key={index}>
           {title}
         </ToggleButton>

diff --git a/src/forms/AudioMetery/AucousticForm/index.js b/src/forms/AudioMetery/AucousticForm/index.js
@@ -0,0 +1,153 @@
+import React from "react";
+
+import ReportCard from "components/reports/ReportCard";
+import ReportTable from "components/reports/Table";
+import Cell from "components/reports/Cell";
+import Toggle from "components/reports/Toggle";
+import BodyCell from "components/reports/BodyCell";
+import TextArea from "components/reports/TextArea";
+import { TableRow } from "@material-ui/core";
+import Input from "components/reports/Input";
+
+const AucousticForm = (props) => {
+  const { setFieldValue, values } = props;
+  const data = values["ai"];
+  const aucousticQuestions = [
+    {
+      title: "Tympanogram",
+      key: "tympanogram",
+      direction: "column",
+      options: [
+        {
+          title: "Type A",
+          value: "typeA",
+        },
+        {
+          title: "Type As",
+          value: "typeAs",
+        },
+        {
+          title: "Type Ad",
+          value: "typeAd",
+        },
+        {
+          title: "Type B",
+          value: "typeB",
+        },
+        {
+          title: "Type C",
+          value: "typeC",
+        },
+      ],
+    },
+    {
+      title: "Ispi.Reflexes",
+      key: "ispi",
+      direction: "column",
+      options: [
+        {
+          title: "Present",
+          value: "present",
+        },
+        {
+          title: "Reduced",
+          value: "reduced",
+        },
+        {
+          title: "Absent",
+          value: "absent",
+        },
+      ],
+    },
+    {
+      title: "Contra.Reflexes",
+      key: "contraFlex",
+      direction: "column",
+      options: [
+        {
+          title: "Present",
+          value: "present",
+        },
+        {
+          title: "Reduced",
+          value: "reduced",
+        },
+        {
+          title: "Absent",
+          value: "absent",
+        },
+      ],
+    },
+    {
+      title: "Reflex Decay",
+      key: "reflex",
+      direction: "column",
+      options: [
+        {
+          title: "Negative",
+          value: "negative",
+        },
+        {
+          title: "Positive",
+          value: "positive",
+        },
+      ],
+    },
+  ];
+
+  const rows = [
+    { title: "Right Ear", key: "rightEar" },
+    { title: "Left Ear", key: "leftEar" },
+  ];
+
+  return (
+    <ReportCard
+      cardsize={{ width: "635px" }}
+      title="Auditory Brainstem Response (ABR)"
+    >
+      <ReportTable
+        Columns={() => (
+          <>
+            <Cell align="center" width="15%"></Cell>
+            {aucousticQuestions.map(({ title, key }) => (
+              <Cell align="center" key={key} width="15%">
+                {title}
+              </Cell>
+            ))}
+          </>
+        )}
+      >
+        {rows.map(({ title: rowTitle, key }) => (
+          <TableRow key={key}>
+            <BodyCell>{rowTitle}</BodyCell>
+            {aucousticQuestions.map(({ key: fieldKey, options, direction }) => (
+              <BodyCell key={fieldKey}>
+                <Toggle
+                  direction={direction}
+                  togglesize={{
+                    width: "105px",
+                    height: "38px",
+                  }}
+                  name={`${key}.${fieldKey}`}
+                  value={data[key][fieldKey]}
+                  onChange={(value) =>
+                    setFieldValue(`ai.${key}.${fieldKey}`, value)
+                  }
+                  options={options}
+                />
+              </BodyCell>
+            ))}
+          </TableRow>
+        ))}
+      </ReportTable>
+      <TextArea
+        rowsMin={3}
+        placeholder="Notes"
+        value={data["notes"]}
+        onChange={(value) => setFieldValue(`ai.notes`, value)}
+      />
+    </ReportCard>
+  );
+};
+
+export default AucousticForm;
diff --git a/src/forms/AudioMetery/AudiogramForm/index.js b/src/forms/AudioMetery/AudiogramForm/index.js
@@ -0,0 +1,97 @@
+import React from "react";
+
+import ReportCard from "components/reports/ReportCard";
+import ReportTable from "components/reports/Table";
+import Cell from "components/reports/Cell";
+import Toggle from "components/reports/Toggle";
+import BodyCell from "components/reports/BodyCell";
+import TextArea from "components/reports/TextArea";
+import { TableRow } from "@material-ui/core";
+import Input from "components/reports/Input";
+
+const AudiogramForm = (props) => {
+  const { setFieldValue, values } = props;
+  const data = values["audiogram"];
+  const audiogramQuestions = [
+    {
+      title: "",
+      key: "dpoae",
+      direction: "column",
+      options: [
+        {
+          title: "Normal",
+          value: "normal",
+        },
+        {
+          title: "Conductive",
+          value: "conductive",
+        },
+        {
+          title: "sensorineural",
+          value: "Sensorineural",
+        },
+        {
+          title: "Mixed",
+          value: "mixed",
+        },
+      ],
+    },
+  ];
+
+  const rows = [
+    { title: "Right Ear", key: "rightEar" },
+    { title: "Left Ear", key: "leftEar" },
+  ];
+
+  return (
+    <ReportCard cardsize={{ width: "635px" }} title="Audiogram">
+      <ReportTable
+        Columns={() => (
+          <>
+            <Cell align="center" width="15%"></Cell>
+            {audiogramQuestions.map(({ title, key }) => (
+              <Cell align="center" key={key} width="15%">
+                {title}
+              </Cell>
+            ))}
+            <Cell align="center" width="25%"></Cell>
+          </>
+        )}
+      >
+        {rows.map(({ title: rowTitle, key }) => (
+          <TableRow key={key}>
+            <BodyCell>{rowTitle}</BodyCell>
+            {audiogramQuestions.map(({ key: fieldKey, options, direction }) => (
+              <BodyCell key={fieldKey}>
+                <Toggle
+                  direction={direction}
+                  togglesize={{
+                    width: "105px",
+                    height: "38px",
+                  }}
+                  name={`${key}.${fieldKey}`}
+                  value={data[key][fieldKey]}
+                  onChange={(value) =>
+                    setFieldValue(`audiogram.${key}.${fieldKey}`, value)
+                  }
+                  options={options}
+                />
+              </BodyCell>
+            ))}
+            <BodyCell>
+              <Input fieldsize={{ width: "224px" }} />
+            </BodyCell>
+          </TableRow>
+        ))}
+      </ReportTable>
+      <TextArea
+        rowsMin={3}
+        placeholder="Notes"
+        value={data["notes"]}
+        onChange={(value) => setFieldValue(`ai.notes`, value)}
+      />
+    </ReportCard>
+  );
+};
+
+export default AudiogramForm;