Feature/alexzhang1618/types dropdown

client/src/components/CSVParser.js

@@ -34,7 +34,7 @@ function CSVParser({
   setVisiblity,
   CSVFlowVisible,
   setCSVFlowVisible,
-  forceNewGroup
+  forceNewGroup,
 }) {
   const { CSVReader } = useCSVReader();
   const { CSVDownloader, Type } = useCSVDownloader();
@@ -45,7 +45,7 @@ function CSVParser({
   const [createCSVGroup, setCreateCSVGroup] = useState(false); // tracks if group creation from csv is toggled
 
   React.useEffect(async () => {
-    if(group) {
+    if (group) {
       await fetch(`${process.env.REACT_APP_BACKEND_URI}/rows?group=` + group.id).then(
         async (response) => {
           if (response.ok) {
@@ -146,7 +146,7 @@ function CSVParser({
           onUploadAccepted={async (results) => {
             // if we create group from CSV
             setCSVData(results.data);
-            
+
             let headers = Object.keys(results.data[0]);
             headers = headers.map((value) => {
               return { name: value, type: "Text" };
@@ -196,7 +196,7 @@ function CSVParser({
                   </div>
                 ) : null}
                 <div className="radio-div">
-                 {forceNewGroup ?
+                  {forceNewGroup ? (
                     <input
                       type="checkbox"
                       className="create-group-csv-button"
@@ -206,19 +206,19 @@ function CSVParser({
                       checked
                       disabled
                     />
-                    :
+                  ) : (
                     <input
                       type="checkbox"
                       className="create-group-csv-button"
                       id="create-group-csv"
                       value="create-group-csv"
                       onClick={() => setCreateCSVGroup(!createCSVGroup)}
                     />
-                  }
+                  )}
                   <label htmlFor="create-group-csv" className="create-group-csv-label">
                     Create a new group from CSV
                   </label>
-                </div>  
+                </div>
                 <div className="csv-submit-div">
                   <button
                     className="modal-white csv-cancel"
@@ -260,25 +260,25 @@ function CSVParser({
         </CSVReader>
       ) : null}
 
-      {!forceNewGroup && 
-      <div className="csv-parser">
-        <button type="button" onClick={() => setCSVFlowVisible(true)} className="csv-button">
-          <AiOutlineCloudUpload className="csv-icon cloud" /> Upload CSV
-        </button>
-        <CSVDownloader
-          type={Type.Button}
-          className="csv-button download"
-          filename="data"
-          bom
-          config={{
-            delimiter: ";",
-          }}
-          data={tableData}
-        >
-          <AiOutlineDownload className="csv-icon download" /> Download
-        </CSVDownloader>
-      </div>
-      }
+      {!forceNewGroup && (
+        <div className="csv-parser">
+          <button type="button" onClick={() => setCSVFlowVisible(true)} className="csv-button">
+            <AiOutlineCloudUpload className="csv-icon cloud" /> Upload CSV
+          </button>
+          <CSVDownloader
+            type={Type.Button}
+            className="csv-button download"
+            filename="data"
+            bom
+            config={{
+              delimiter: ";",
+            }}
+            data={tableData}
+          >
+            <AiOutlineDownload className="csv-icon download" /> Download
+          </CSVDownloader>
+        </div>
+      )}
     </div>
   );
 }

client/src/components/CreateGroup.js

@@ -65,7 +65,6 @@ function CreateGroup({ onConfirm, onCancel, editGroup, onDelete, CSVFields }) {
   const [groupNameInvalid, setGroupNameInvalid] = useState(false);
   const fieldsListDiv = useRef(null);
 
-
   /**
    * `fields` is an array of objects representing the group's fields. Each object has a `name` and
    * a `type`, both strings. Each object may also have a boolean `invalid` field, denoting whether
@@ -174,7 +173,7 @@ function CreateGroup({ onConfirm, onCancel, editGroup, onDelete, CSVFields }) {
               />
             ))}
           </div>
-          {!CSVFields ?
+          {!CSVFields ? (
             <button
               className="add-field-button"
               type="button"
@@ -186,9 +185,9 @@ function CreateGroup({ onConfirm, onCancel, editGroup, onDelete, CSVFields }) {
               <img src={AddFieldIcon} className="add-field-svg" alt="add field button icon" />
               Add new field
             </button>
-            :
+          ) : (
             <br />
-          }
+          )}
           <div className="group-submit-div">
             <button className="modal-blue" type="submit">
               {editGroup ? "Save" : "Create"}

client/src/components/CreateGroupFieldRow.js

@@ -38,7 +38,7 @@ function CreateGroupFieldRow({ index, fieldName, fieldType, invalid, changeDispa
         <option value="Number">Number</option>
         <option value="Email">Email</option>
       </select>
-      {(index !== 0 && !CSVFields) && (
+      {index !== 0 && !CSVFields && (
         <button
           className="group-field-delete"
           type="button"

client/src/components/TableRow.js

@@ -1,6 +1,6 @@
 /**
  * Table row component that displays information in table. Allows for editing, deleting, and row selection.
- * 
+ *
  * @summary table row
  * @author  Navid Boloorian
  */
@@ -36,11 +36,11 @@ export default function TableRow({
     if (newRow) {
       setEditActivated(true);
 
-      // sets the default width of input field to 5 
+      // sets the default width of input field to 5
       setFieldDefaultSize(5);
 
       // sets a blank default value for columns to allow for empty columns
-      for(let i = 0; i < groupFields.length; i++) {
+      for (let i = 0; i < groupFields.length; i++) {
         cellData[groupFields[i].name] = "";
       }
     }

client/src/components/TypeDropdown.js

@@ -0,0 +1,70 @@
+/**
+ * Dropdown menu to manage and select custom types.
+ * Allows to select the current type, edit types, add new types, and delete types.
+ *
+ * @summary Custom type dropdown menu.
+ * @author Alex Zhang
+ */
+
+import React, { useState } from "react";
+import AddIcon from "../images/AddIcon.svg";
+import Pencil from "../images/Pencil";
+import TypeDropdownOption from "./TypeDropdownOption";
+import "../css/TypeDropdown.css";
+
+/**
+ * Renders the type dropdown.
+ * @returns
+ */
+function TypeDropdown() {
+  const [typeField, setTypeField] = useState(false);
+  const [typeFieldValue, setTypeFieldValue] = useState("");
+  const [dropdownItems, setDropdownItems] = useState([]);
+  const onKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      setDropdownItems((items) => [...items, event.target.value]);
+      setTypeField(false);
+      setTypeFieldValue("");
+    }
+  };
+  const deleteType = (option) => {
+    setDropdownItems(
+      dropdownItems.filter((item) => {
+        return item !== option;
+      })
+    );
+  };
+  return (
+    <div className="type-dropdown-div-wrapper">
+      <div className="type-dropdown-div">
+        <button
+          className="add-type-dropdown-button"
+          type="button"
+          onClick={() => setTypeField(true)}
+        >
+          <img src={AddIcon} className="type-dropdown-add-icon-svg" alt="plus icon on add button" />
+          Add Type
+        </button>
+        {dropdownItems.map((item) => (
+          <TypeDropdownOption value={item} deleteType={deleteType} />
+        ))}
+        {typeField ? (
+          <div className="type-dropdown-option">
+            <input
+              className="type-dropdown-field empty"
+              value={typeFieldValue}
+              placeholder="Type here..."
+              onKeyDown={onKeyDown}
+              onChange={(event) => setTypeFieldValue(event.target.value)}
+              autoFocus="autofocus"
+            />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export default TypeDropdown;

client/src/components/TypeDropdownOption.js

@@ -0,0 +1,79 @@
+/**
+ * Components representing rows in the TypeDropdown menu.
+ *
+ * @summary Table display for dashboard page.
+ * @author Alex Zhang
+ */
+
+import React, { useState, useRef, useEffect } from "react";
+import Pencil from "../images/Pencil";
+import TrashCan from "../images/TrashCan.svg";
+
+/**
+ * Renders the dropdown option for the custom type menu.
+ * @param {string} value The string value of the type option
+ * @param {function} deleteType Function to remove the type option from the dropdown.
+ * @returns
+ */
+function TypeDropdownOption({ value, deleteType }) {
+  const [fieldValue, setFieldValue] = useState(value);
+  const [editOption, setEditOption] = useState(false);
+  const [editFieldValue, setEditFieldValue] = useState(value);
+  // This useEffect hook manages clicks outside the menu and minimizes the window.
+  const editOptionRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (editOption && editOptionRef.current && !editOptionRef.current.contains(event.target)) {
+        setEditFieldValue(fieldValue);
+        setEditOption(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  });
+
+  const onKeyDown = (event) => {
+    // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      setFieldValue(editFieldValue);
+      setEditOption(false);
+    }
+  };
+  return (
+    <div className="type-dropdown-option">
+      <button className="type-dropdown-field">{fieldValue}</button>
+      <button
+        className="pencil-button"
+        onClick={() => {
+          setEditOption(true);
+          setEditFieldValue(fieldValue);
+        }}
+      >
+        <Pencil className="type-dropdown-pencil" />
+      </button>
+      {editOption ? (
+        <div className="type-dropdown-edit-div" ref={editOptionRef}>
+          <h1 className="type-dropdown-edit-header">Edit Option</h1>
+          <hr className="type-dropdown-edit-divider" />
+          <input
+            className="type-dropdown-edit-field"
+            value={editFieldValue}
+            onKeyDown={onKeyDown}
+            onChange={(event) => setEditFieldValue(event.target.value)}
+            autoFocus="autofocus"
+          />
+          <button className="type-dropdown-delete-option" onClick={() => deleteType(value)}>
+            <img src={TrashCan} className="type-dropdown-trash-can-svg" alt="Delete Option" />
+            <p className="type-dropdown-delete-option-text">Delete Option</p>
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default TypeDropdownOption;

client/src/css/CSVParser.css

@@ -165,4 +165,4 @@
   width: max-content;
   margin-bottom: -20px;
   margin-top: 10px;
-}
+}

client/src/css/Dashboard.css

@@ -182,4 +182,4 @@
 
 .no-groups-info-wrapper {
   text-align: center;
-}
+}