From 21b23ed8c7f8feb8bf340a6f1c896e1bc44145b0 Mon Sep 17 00:00:00 2001
From: Trym Veiby <110395932+TrymVei@users.noreply.github.com>
Date: Tue, 5 Dec 2023 13:31:22 +0100
Subject: [PATCH] Update sidebar to form (#45)

* feat: possible to render different input fields based on selected value on HelpSelect(WIP)

* feat: render fields based on helpSelect

* feat: inputList component

* fix: correct indexing when deleting elements

* feat: list of requirements now works with the prompt

* fix: updated styling for remove requirement button

* fix: requirements colors match select

* feat: validation employee selected

* fix: iconbutton type can now be set

* fix: idepentent iconbutton

* fix: revert button
---
 app/salesGPT/components/employeeSelect.tsx    |   1 +
 .../inputLIst/inputList.module.scss           |   4 +
 .../components/inputLIst/inputList.tsx        |  68 ++++++++
 .../inputListItem/inputListItem.module.scss   |  40 +++++
 .../inputLIst/inputListItem/inputListItem.tsx |  42 +++++
 app/salesGPT/components/salesGPT.tsx          | 163 ++++++++++--------
 .../components/salesGPTIconButton.tsx         |  64 +++++++
 app/salesGPT/types.ts                         |   5 +
 8 files changed, 315 insertions(+), 72 deletions(-)
 create mode 100644 app/salesGPT/components/inputLIst/inputList.module.scss
 create mode 100644 app/salesGPT/components/inputLIst/inputList.tsx
 create mode 100644 app/salesGPT/components/inputLIst/inputListItem/inputListItem.module.scss
 create mode 100644 app/salesGPT/components/inputLIst/inputListItem/inputListItem.tsx
 create mode 100644 app/salesGPT/components/salesGPTIconButton.tsx

diff --git a/app/salesGPT/components/employeeSelect.tsx b/app/salesGPT/components/employeeSelect.tsx
index a4a3a18feb2..682495337b2 100644
--- a/app/salesGPT/components/employeeSelect.tsx
+++ b/app/salesGPT/components/employeeSelect.tsx
@@ -76,6 +76,7 @@ function EmployeeSelect({
 
   return (
     <Select
+      required
       options={options}
       isSearchable={true}
       value={selectedOption}
diff --git a/app/salesGPT/components/inputLIst/inputList.module.scss b/app/salesGPT/components/inputLIst/inputList.module.scss
new file mode 100644
index 00000000000..d0250a6bb2f
--- /dev/null
+++ b/app/salesGPT/components/inputLIst/inputList.module.scss
@@ -0,0 +1,4 @@
+.button-add {
+  background-color: transparent;
+  border: none;
+}
diff --git a/app/salesGPT/components/inputLIst/inputList.tsx b/app/salesGPT/components/inputLIst/inputList.tsx
new file mode 100644
index 00000000000..a740bccd0dc
--- /dev/null
+++ b/app/salesGPT/components/inputLIst/inputList.tsx
@@ -0,0 +1,68 @@
+import styles from "./inputList.module.scss";
+import AddIcon from "../../../icons/add.svg";
+import { InputListValue } from "../../types";
+import InputListItem from "./inputListItem/inputListItem";
+import { SalesGPTIconButton } from "../salesGPTIconButton";
+
+type InputListProps = {
+  inputListValues: InputListValue[];
+  setInputListValues: React.Dispatch<React.SetStateAction<InputListValue[]>>;
+};
+
+const InputList = ({ inputListValues, setInputListValues }: InputListProps) => {
+  function addValue(value: string) {
+    const updatedValues: InputListValue[] = [
+      ...inputListValues,
+      { index: inputListValues.length, value },
+    ];
+    setInputListValues(updatedValues);
+  }
+
+  function updateValue(index: number, newValue: string) {
+    const updatedValues = [...inputListValues];
+    updatedValues[index] = { index, value: newValue };
+    setInputListValues(updatedValues);
+  }
+
+  function deleteValue(valueToDelete: string) {
+    let updatedValues: InputListValue[] = [];
+    inputListValues.map((value) => {
+      if (value.value !== valueToDelete) {
+        updatedValues.push(value);
+      }
+    });
+    updateIndex(updatedValues);
+  }
+
+  function updateIndex(listToUpdate: InputListValue[]) {
+    let updatedIndexValues: InputListValue[] = [];
+    listToUpdate.map((inputListValue, index) => {
+      updatedIndexValues.push({ index: index, value: inputListValue.value });
+    });
+    setInputListValues(updatedIndexValues);
+  }
+
+  return (
+    <>
+      {inputListValues.map((inputListValue) => {
+        return (
+          <InputListItem
+            key={inputListValue.index}
+            updateValue={updateValue}
+            deleteValue={deleteValue}
+            InputListValue={inputListValue}
+          />
+        );
+      })}
+      <SalesGPTIconButton
+        role="button"
+        className={styles["button-add"]}
+        text={""}
+        icon={<AddIcon />}
+        onClick={() => addValue("")}
+      />
+    </>
+  );
+};
+
+export default InputList;
diff --git a/app/salesGPT/components/inputLIst/inputListItem/inputListItem.module.scss b/app/salesGPT/components/inputLIst/inputListItem/inputListItem.module.scss
new file mode 100644
index 00000000000..e900dec24a5
--- /dev/null
+++ b/app/salesGPT/components/inputLIst/inputListItem/inputListItem.module.scss
@@ -0,0 +1,40 @@
+.input-list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.label-input {
+  padding-right: 6px;
+}
+
+@mixin sharedStyle {
+  font-size: 1rem;
+
+  border: 0.5px solid white;
+  padding: 1rem;
+
+  height: 48px;
+
+  color: black;
+  background-color: white;
+}
+
+input[type="text"].input {
+  @include sharedStyle();
+
+  width: 100%;
+
+  border-radius: 10px 0 0 10px;
+
+  text-align: left;
+
+  background-color: white;
+  color: black;
+}
+
+.button-remove {
+  @include sharedStyle();
+
+  border-radius: 0 10px 10px 0;
+}
diff --git a/app/salesGPT/components/inputLIst/inputListItem/inputListItem.tsx b/app/salesGPT/components/inputLIst/inputListItem/inputListItem.tsx
new file mode 100644
index 00000000000..cce6e13276d
--- /dev/null
+++ b/app/salesGPT/components/inputLIst/inputListItem/inputListItem.tsx
@@ -0,0 +1,42 @@
+import { InputListValue } from "@/app/salesGPT/types";
+import styles from "./inputListItem.module.scss";
+import CloseIcon from "../../../../icons/close.svg";
+import { SalesGPTIconButton } from "../../salesGPTIconButton";
+
+type ListInputProps = {
+  InputListValue: InputListValue;
+  updateValue: Function;
+  deleteValue: Function;
+};
+
+const ListInput = ({
+  InputListValue,
+  updateValue,
+  deleteValue,
+}: ListInputProps) => {
+  return (
+    <div className={styles["input-list-item"]}>
+      <label className={styles["label-input"]} htmlFor="requirements">
+        {InputListValue.index + 1}:
+      </label>
+
+      <input
+        className={styles["input"]}
+        type="text"
+        id="requirements"
+        placeholder={""}
+        value={InputListValue.value}
+        onChange={(e) => updateValue(InputListValue.index, e.target.value)}
+      />
+
+      <SalesGPTIconButton
+        role="button"
+        className={styles["button-remove"]}
+        icon={<CloseIcon />}
+        onClick={() => deleteValue(InputListValue.value)}
+      />
+    </div>
+  );
+};
+
+export default ListInput;
diff --git a/app/salesGPT/components/salesGPT.tsx b/app/salesGPT/components/salesGPT.tsx
index 10fc58d10d1..647250a1af2 100644
--- a/app/salesGPT/components/salesGPT.tsx
+++ b/app/salesGPT/components/salesGPT.tsx
@@ -1,7 +1,12 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import { Loading } from "@/app/components/chatHomepage";
-import { EmployeeItem, HelpOption, HelpOptionValue } from "../types";
+import {
+  EmployeeItem,
+  HelpOption,
+  HelpOptionValue,
+  InputListValue,
+} from "../types";
 import EmployeeCVSummary from "./employeeCVSummary";
 import { ErrorBoundary } from "../../components/error";
 import {
@@ -26,6 +31,8 @@ import RightPane from "./rightPane";
 import RequirementsList from "./requirementsList";
 import { SALES_GPT_MASK } from "@/app/masks/no";
 import { projectExperienceToText } from "@/app/function/ProjectExperienceToText";
+import InputList from "./inputLIst/inputList";
+import { SalesGPTIconButton } from "./salesGPTIconButton";
 
 const availableHelp: HelpOption[] = [
   {
@@ -55,7 +62,6 @@ function _SalesGPT() {
     EmployeeItem | undefined
   >(undefined);
 
-  const [requirementText, setRequirementText] = useState("");
   const [requirementResponse, setRequirementResponse] = useState<
     RequirementResponse[]
   >([]);
@@ -64,13 +70,17 @@ function _SalesGPT() {
   const [isAnalysisLoading, setIsAnalysisLoading] = useState(false);
 
   const [selectedHelp, setSelectedHelp] = useState<HelpOption | undefined>(
-    undefined,
+    availableHelp[0],
   );
 
   const [showCVSummary, setShowCVSummary] = useState(false);
   const [showRequirementsList, setShowRequirementsList] = useState(false);
   const [concise, setConcise] = useState(false);
 
+  const [inputListValues, setInputListValues] = useState<InputListValue[]>([
+    { index: 0, value: "" },
+  ]);
+
   function handleSelectEmployee(newValue: EmployeeItem | undefined): void {
     setSelectedEmployee(newValue);
     // TODO: Handle query params later
@@ -202,7 +212,9 @@ function _SalesGPT() {
   async function handleAnalyseButtonClick(): Promise<void> {
     setIsAnalysisLoading(true);
     setRequirementResponse([]);
-    const requirements = requirementText.split("\n").filter((s) => s.length);
+    const requirements = inputListValues.map(
+      (requirement) => requirement.value,
+    );
     const employeeAlias = aliasFromEmail(selectedEmployee?.email);
 
     if (selectedHelp?.value == HelpOptionValue.RequirementList) {
@@ -260,74 +272,81 @@ function _SalesGPT() {
     >
       <SalesSidebar title={title} subtitle={""}>
         <div className={styles["sidebar-content"]}>
-          <div className={styles["input-field"]}>
-            <label htmlFor="choose-help">{Locale.SalesGPT.Help.Choose}</label>
-            <HelpSelect
-              options={availableHelp}
-              selectedHelp={selectedHelp}
-              handleSelectHelp={setSelectedHelp}
-            />
-          </div>
-          <div className={styles["input-field"]}>
-            <label htmlFor="choose-employee">
-              {Locale.SalesGPT.ChooseEmployee}
-            </label>
-            <EmployeeSelect
-              employees={employees}
-              selectedEmployee={selectedEmployee}
-              handleSelectEmployee={handleSelectEmployee}
-              handleClear={handleClearSelectedEmployee}
-            />
-          </div>
-          <div className={styles["input-field"]}>
-            <label htmlFor="requirements">{Locale.SalesGPT.Requirements}</label>
-            <textarea
-              id="requirements"
-              className={styles["text-input"]}
-              placeholder={Locale.SalesGPT.RequirementsPlaceholder}
-              value={requirementText}
-              onChange={(event) => setRequirementText(event.target.value)}
-            ></textarea>
-          </div>
-          <div className={styles["input-field"]}>
-            <label htmlFor="summary">{Locale.SalesGPT.Summary}</label>
-            <textarea
-              id="requirements"
-              className={styles["text-input"]}
-              placeholder={Locale.SalesGPT.SummaryPlaceholder}
-              value={summaryText}
-              onChange={(event) => setSummaryText(event.target.value)}
-            ></textarea>
-          </div>
-          <div className={styles["input-field"]}>
-            <label htmlFor="concise-answer">
-              {Locale.SalesGPT.ConciseOption}
-            </label>
-            <input
-              type="checkbox"
-              id="concise-answer"
-              checked={concise}
-              onChange={(event) => setConcise(event.target.checked)}
-            />
-          </div>
-          <div className={styles["analyse-button-container"]}>
-            <IconButton
-              key="analyse"
-              bordered
-              className={styles["analyse-button"]}
-              text={Locale.SalesGPT.Analyse}
-              onClick={handleAnalyseButtonClick}
-            />
-          </div>
-          <div className={styles["analyse-button-container"]}>
-            <IconButton
-              key="sendToChat"
-              bordered
-              className={styles["analyse-button"]}
-              text={Locale.SalesGPT.FromSalesGptToChat}
-              onClick={handleChatButtonClick}
-            />
-          </div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+            }}
+          >
+            <div className={styles["input-field"]}>
+              <label htmlFor="choose-help">{Locale.SalesGPT.Help.Choose}</label>
+              <HelpSelect
+                options={availableHelp}
+                selectedHelp={selectedHelp}
+                handleSelectHelp={setSelectedHelp}
+              />
+            </div>
+          </form>
+
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleAnalyseButtonClick();
+            }}
+          >
+            <div className={styles["input-field"]}>
+              <label htmlFor="choose-employee">
+                {Locale.SalesGPT.ChooseEmployee}
+              </label>
+              <EmployeeSelect
+                employees={employees}
+                selectedEmployee={selectedEmployee}
+                handleSelectEmployee={handleSelectEmployee}
+                handleClear={handleClearSelectedEmployee}
+              />
+            </div>
+
+            <div className={styles["input-field"]}>
+              <label htmlFor="requirements">
+                {Locale.SalesGPT.Requirements}
+              </label>
+              <InputList
+                inputListValues={inputListValues}
+                setInputListValues={setInputListValues}
+              />
+            </div>
+
+            {/* TODO: Kanskje dele opp koden så vi har en getField som rendrer basert på selectedHelp. lettere hvis vi endrer på value */}
+            {selectedHelp?.value !== "requirementlist" && (
+              <div className={styles["input-field"]}>
+                <label htmlFor="summary">{Locale.SalesGPT.Summary}</label>
+                <textarea
+                  id="requirements"
+                  className={styles["text-input"]}
+                  placeholder={Locale.SalesGPT.SummaryPlaceholder}
+                  value={summaryText}
+                  onChange={(event) => setSummaryText(event.target.value)}
+                ></textarea>
+              </div>
+            )}
+            <div className={styles["analyse-button-container"]}>
+              <SalesGPTIconButton
+                key="analyse"
+                bordered
+                className={styles["analyse-button"]}
+                text={Locale.SalesGPT.Analyse}
+                role="submit"
+              />
+            </div>
+            <div className={styles["analyse-button-container"]}>
+              <IconButton
+                key="sendToChat"
+                bordered
+                className={styles["analyse-button"]}
+                text={Locale.SalesGPT.FromSalesGptToChat}
+                onClick={handleChatButtonClick}
+              />
+            </div>
+          </form>
         </div>
         <IconButton
           text={"Tilbake til chat"}
diff --git a/app/salesGPT/components/salesGPTIconButton.tsx b/app/salesGPT/components/salesGPTIconButton.tsx
new file mode 100644
index 00000000000..3c592bc7c1a
--- /dev/null
+++ b/app/salesGPT/components/salesGPTIconButton.tsx
@@ -0,0 +1,64 @@
+import * as React from "react";
+
+import styles from "../../components/button.module.scss";
+
+export type ButtonType = "primary" | "danger" | null;
+
+interface SalesGPTIconButtonProps {
+  onClick?: () => void;
+  icon?: JSX.Element;
+  type?: ButtonType;
+  text?: string;
+  bordered?: boolean;
+  shadow?: boolean;
+  className?: string;
+  title?: string;
+  disabled?: boolean;
+  tabIndex?: number;
+  autoFocus?: boolean;
+  role?: "button" | "submit" | "reset" | undefined;
+}
+
+export function SalesGPTIconButton({
+  onClick,
+  icon,
+  type,
+  text,
+  bordered,
+  shadow,
+  className,
+  title,
+  disabled,
+  tabIndex,
+  autoFocus,
+  role = "button",
+}: SalesGPTIconButtonProps) {
+  return (
+    <button
+      className={
+        styles["icon-button"] +
+        ` ${bordered && styles.border} ${shadow && styles.shadow} ${
+          className ?? ""
+        } clickable ${styles[type ?? ""]}`
+      }
+      onClick={onClick}
+      title={title}
+      disabled={disabled}
+      type={role}
+      tabIndex={tabIndex}
+      autoFocus={autoFocus}
+    >
+      {icon && (
+        <div
+          className={
+            styles["icon-button-icon"] + ` ${type === "primary" && "no-dark"}`
+          }
+        >
+          {icon}
+        </div>
+      )}
+
+      {text && <div className={styles["icon-button-text"]}>{text}</div>}
+    </button>
+  );
+}
diff --git a/app/salesGPT/types.ts b/app/salesGPT/types.ts
index 4affdd850d6..af5fdec7f0d 100644
--- a/app/salesGPT/types.ts
+++ b/app/salesGPT/types.ts
@@ -78,3 +78,8 @@ export type HelpOption = {
   label: string;
   value: HelpOptionValue | undefined;
 };
+
+export type InputListValue = {
+  index: number;
+  value: string;
+};