feat: Tag Box and feedback

tzixi · Feb 10, 2023 · 42d7487 · 42d7487
1 parent be8d6db
commit 42d7487
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 47 deletions.
diff --git a/components/TagBox/TagBox.module.css b/components/TagBox/TagBox.module.css
@@ -1,5 +1,5 @@
 .main {
-  width: 700px;
+  width: 40%;
   height: 1000px;
   font-family: "Roboto", sans-serif;
 }
@@ -21,11 +21,16 @@
   width: 100%;
   justify-content: center;
   flex-direction: row;
-  margin: 0px 5px;
+  margin: 10px 5px;
 }
 
-.positive .negative {
+.positive {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  align-items: center;
+}
+.negative {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
diff --git a/components/TagBox/TagBox.tsx b/components/TagBox/TagBox.tsx
@@ -1,7 +1,8 @@
-import { Fab } from "@mui/material";
+import { Fab, TextField } from "@mui/material";
 import TagField from "components/TagField/TagField";
 import styles from "./TagBox.module.css";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import { use, useEffect, useState } from "react";
 
 const BannerText = [
   "1/4 VISUAL TEST",
@@ -95,6 +96,19 @@ const NTags = [
 ];
 
 const TagBox = (props: { stage: number }) => {
+  const [selectedTags, setSelectedTags] = useState([] as string[]);
+  const [NTagsArr, setNTags] = useState([] as string[]);
+  const [PTagsArr, setPTags] = useState([] as string[]);
+  useEffect(() => {
+    setSelectedTags(() => [...PTagsArr, ...NTagsArr]);
+  }, [PTagsArr, NTagsArr]);
+
+  const handlePTagChange = (tags: string[]) => {
+    setPTags(tags);
+  };
+  const handleNTagChange = (tags: string[]) => {
+    setNTags(tags);
+  };
   return (
     <div className={styles.main}>
       <div className={styles.banner}>
@@ -109,17 +123,47 @@ const TagBox = (props: { stage: number }) => {
       </div>
       <div className={styles.tagtray}>
         <div className={styles.positive}>
-          <h3>Positive</h3>
-          <TagField tags={PTags[props.stage]} isPositive />
+          <h2>Positive</h2>
+          <TagField
+            onChange={handlePTagChange}
+            defaultTags={PTags[props.stage]}
+            isPositive
+          />
         </div>
         <div className={styles.negative}>
-          <h3>Negative</h3>
-          <TagField tags={NTags[props.stage]} isPositive={false} />
+          <h2>Negative</h2>
+          <TagField
+            onChange={handleNTagChange}
+            defaultTags={NTags[props.stage]}
+            isPositive={false}
+          />
         </div>
       </div>
+      {selectedTags.length !== 0 ? (
+        <h3>
+          You have selected:
+          {" " + selectedTags.join(", ")}
+        </h3>
+      ) : (
+        ""
+      )}
+      <hr
+        style={{
+          width: "100%",
+          height: "10px",
+          backgroundColor: "#17475F",
+          margin: "15px 0px",
+        }}
+      ></hr>
       <div className={styles.combinedtray}></div>
       <div className={styles.remarkbox}>
-        <h3>Remarks</h3>
+        <h2>Additional Remarks:</h2>
+        <TextField
+          placeholder="Enter Remarks here"
+          sx={{ width: "100%" }}
+          multiline
+          variant="outlined"
+        />
       </div>
     </div>
   );

diff --git a/components/TagField/TagField.tsx b/components/TagField/TagField.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import type { Property } from "csstype";
+import { Tooltip } from "@mui/material";
 
 const tagInput = {
   backgroundColor: "transparent",
@@ -16,48 +17,48 @@ const tagContainer = {
   flexWrap: "wrap" as Property.FlexWrap,
   padding: "0.5em",
   borderRadius: "3px",
-  width: "300px",
+  width: "100%",
   marginTop: "1em",
   display: "flex",
   alignItems: "center",
-  gap: "1em",
+  gap: "5px",
 };
 
 interface Props {
   onChange: (tags: string[]) => void;
+  defaultTags: string[];
+  isPositive: boolean;
 }
 
-const TagField = (props: { tags: string[]; isPositive: boolean }) => {
-  const [tags, setTags] = useState(props.tags);
-
-  //   useEffect(() => {
-  //     onChange(tags);
-  //   }, [tags, onChange]);
-
-  const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
-    const target = e.target as HTMLInputElement;
-    if (e.code === "Enter") {
-      setTags((tags) => [...tags, target.value]);
-      target.value = "";
-    }
-    if (e.code === "Backspace" && target.value === "") {
-      setTags((tags) => tags.slice(0, -1));
-    }
-    if (!e.key.trim()) return;
-  };
-
-  const removeTag = (index: number) => {
-    setTags((tags) => [...tags.slice(0, index), ...tags.slice(index + 1)]);
-  };
+const TagField = ({ onChange, defaultTags, isPositive }: Props) => {
+  const [tags, setTags] = useState(defaultTags);
+  const [selectedTags, setSelectedTags] = useState([] as string[]);
+  useEffect(() => {
+    onChange(selectedTags);
+  }, [selectedTags]);
   return (
     <div style={tagContainer}>
       {tags.map((tags, index) => (
         <div
+          title="asdasdasasdasd"
+          onClick={() => {
+            if (!selectedTags.includes(tags)) {
+              setSelectedTags(() => [...selectedTags, tags]);
+            } else {
+              setSelectedTags(selectedTags.filter((tag) => tag !== tags));
+            }
+            return;
+          }}
           style={{
-            backgroundColor: props.isPositive ? "#21A25C" : "#E23737",
+            backgroundColor: isPositive ? "#21A25C" : "#E23737",
+            filter: selectedTags.includes(tags) ? "brightness(1.1)" : "",
             display: "inline-block",
-            padding: "0.5em 0.75em",
+            padding: "0.3em 0.5em",
+            border: selectedTags.includes(tags)
+              ? "5px solid #17475F"
+              : "5px solid transparent",
             borderRadius: "20px",
+            cursor: "pointer",
           }}
           key={index}
         >
@@ -69,17 +70,6 @@ const TagField = (props: { tags: string[]; isPositive: boolean }) => {
           </span>
         </div>
       ))}
-      <input
-        onKeyDown={handleKeyDown}
-        disabled={tags.length >= 6}
-        type="text"
-        style={tagInput}
-        placeholder={
-          tags.length >= 6
-            ? ""
-            : "Include up to " + (6 - { tags }.tags.length) + " tag(s)"
-        }
-      />
     </div>
   );
 };