From 7f8834fcf3263387577df877f4bcb88bc24abe74 Mon Sep 17 00:00:00 2001
From: River Holstege <laholstege@ucdavis.edu>
Date: Fri, 12 Jan 2024 10:32:08 -0800
Subject: [PATCH 1/7] use folderId from URL if creating in folder

closes #212
---
 Finjector.Web/ClientApp/src/App.tsx                | 5 +++++
 Finjector.Web/ClientApp/src/pages/Entry.tsx        | 7 ++-----
 Finjector.Web/ClientApp/src/pages/Teams/Folder.tsx | 2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/Finjector.Web/ClientApp/src/App.tsx b/Finjector.Web/ClientApp/src/App.tsx
index 4b6bd9e9..a10bd982 100644
--- a/Finjector.Web/ClientApp/src/App.tsx
+++ b/Finjector.Web/ClientApp/src/App.tsx
@@ -138,6 +138,11 @@ const router = createBrowserRouter([
                     element: <Entry />,
                     handle: { title: "Entry", hideBreadcrumbs: true },
                   },
+                  {
+                    path: "entry/",
+                    element: <Entry />,
+                    handle: { title: "Entry", hideBreadcrumbs: false },
+                  },
                   {
                     path: "selected/:chartId/:chartSegmentString",
                     element: <Selected />,
diff --git a/Finjector.Web/ClientApp/src/pages/Entry.tsx b/Finjector.Web/ClientApp/src/pages/Entry.tsx
index 7f6878c0..c8867656 100644
--- a/Finjector.Web/ClientApp/src/pages/Entry.tsx
+++ b/Finjector.Web/ClientApp/src/pages/Entry.tsx
@@ -34,11 +34,8 @@ import { ChartLoadingError } from "../components/Shared/ChartLoadingError";
 import FolderSearch from "../components/Entry/FolderSearch";
 
 const Entry = () => {
-  const { chartId, chartSegmentString } = useParams();
-  const [searchParams] = useSearchParams();
-  const saveInFolderId = searchParams?.get("folderId")
-    ? parseInt(searchParams.get("folderId") || "")
-    : 0;
+  const { chartId, chartSegmentString, folderId } = useParams();
+  const saveInFolderId = parseInt(folderId ?? "0");
 
   const savedChartQuery = useGetSavedChartWithData(chartId || "");
 
diff --git a/Finjector.Web/ClientApp/src/pages/Teams/Folder.tsx b/Finjector.Web/ClientApp/src/pages/Teams/Folder.tsx
index 818b1c16..0f13c4a3 100644
--- a/Finjector.Web/ClientApp/src/pages/Teams/Folder.tsx
+++ b/Finjector.Web/ClientApp/src/pages/Teams/Folder.tsx
@@ -66,7 +66,7 @@ const Folder: React.FC = () => {
           {/* Editors & above can create new chart strings */}
           {combinedPermissions.some((p) => p === "Admin" || p === "Edit") && (
             <FinjectorButton
-              to={`/entry?folderId=${folderModel.data?.folder.id}`}
+              to={`/teams/${teamId}/folders/${folderModel.data?.folder.id}/entry`}
             >
               <FontAwesomeIcon icon={faPlus} />
               New Chart String Here

From ba9fbe6af07a04bedb2ace0431821a0eb40c3f8a Mon Sep 17 00:00:00 2001
From: River Holstege <laholstege@ucdavis.edu>
Date: Fri, 12 Jan 2024 10:36:00 -0800
Subject: [PATCH 2/7] disable changing folder if creating chart string inside
 one

closes #267
---
 .../ClientApp/src/components/Entry/FolderSearch.tsx        | 7 +++++--
 Finjector.Web/ClientApp/src/pages/Entry.tsx                | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx b/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx
index 80a4a5bc..760acd57 100644
--- a/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx
+++ b/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx
@@ -15,11 +15,13 @@ import { InputGroup, InputGroupText } from "reactstrap";
 interface FolderSearchProps {
   updateFolderId: (folderId: number) => void;
   selectedFolderId?: number;
+  disabled?: boolean;
 }
 
 const FolderSearch = ({
   updateFolderId,
   selectedFolderId,
+  disabled,
 }: FolderSearchProps) => {
   const [selectedFolder, setSelectedFolder] = useState<Folder | undefined>();
 
@@ -61,8 +63,8 @@ const FolderSearch = ({
     <div className="col-md-6">
       <h2>Folder</h2>
       <p>Choose where you would like to store your chart string</p>
-      <InputGroup>
-        <InputGroupText>
+      <InputGroup aria-disabled={disabled}>
+        <InputGroupText aria-disabled={disabled}>
           {selectedFolder?.teamName ?? "Personal"}
         </InputGroupText>
         <Typeahead
@@ -76,6 +78,7 @@ const FolderSearch = ({
           onChange={handleSelected}
           options={data || []} // data
           clearButton={true}
+          disabled={disabled}
           renderMenu={(
             results,
             {
diff --git a/Finjector.Web/ClientApp/src/pages/Entry.tsx b/Finjector.Web/ClientApp/src/pages/Entry.tsx
index c8867656..1d4f02b9 100644
--- a/Finjector.Web/ClientApp/src/pages/Entry.tsx
+++ b/Finjector.Web/ClientApp/src/pages/Entry.tsx
@@ -163,6 +163,7 @@ const Entry = () => {
         <hr />
         <div className="row">
           <FolderSearch
+            disabled={saveInFolderId !== 0} // if we came from a folder, lock it
             selectedFolderId={savedChart.folderId}
             updateFolderId={(folderId) =>
               setSavedChart((c) => ({ ...c, folderId }))

From 7c540919d0b9b6649cbac5e243e19c8c22502dba Mon Sep 17 00:00:00 2001
From: River Holstege <laholstege@ucdavis.edu>
Date: Fri, 12 Jan 2024 11:08:35 -0800
Subject: [PATCH 3/7] don't disable when editing inside folder

---
 Finjector.Web/ClientApp/src/App.tsx         | 2 +-
 Finjector.Web/ClientApp/src/pages/Entry.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Finjector.Web/ClientApp/src/App.tsx b/Finjector.Web/ClientApp/src/App.tsx
index a10bd982..8d088e73 100644
--- a/Finjector.Web/ClientApp/src/App.tsx
+++ b/Finjector.Web/ClientApp/src/App.tsx
@@ -139,7 +139,7 @@ const router = createBrowserRouter([
                     handle: { title: "Entry", hideBreadcrumbs: true },
                   },
                   {
-                    path: "entry/",
+                    path: "entry/", // when creating from folder
                     element: <Entry />,
                     handle: { title: "Entry", hideBreadcrumbs: false },
                   },
diff --git a/Finjector.Web/ClientApp/src/pages/Entry.tsx b/Finjector.Web/ClientApp/src/pages/Entry.tsx
index 1d4f02b9..4b5c967b 100644
--- a/Finjector.Web/ClientApp/src/pages/Entry.tsx
+++ b/Finjector.Web/ClientApp/src/pages/Entry.tsx
@@ -163,7 +163,7 @@ const Entry = () => {
         <hr />
         <div className="row">
           <FolderSearch
-            disabled={saveInFolderId !== 0} // if we came from a folder, lock it
+            disabled={saveInFolderId !== 0 && !chartSegmentString && !chartId} // if are creating from Folder, lock it (not on edit)
             selectedFolderId={savedChart.folderId}
             updateFolderId={(folderId) =>
               setSavedChart((c) => ({ ...c, folderId }))

From 21da6c27e7cdc0147aafcd033a09eb358ca6d498 Mon Sep 17 00:00:00 2001
From: River Holstege <laholstege@ucdavis.edu>
Date: Fri, 12 Jan 2024 11:09:31 -0800
Subject: [PATCH 4/7] move subtext into FolderSearch

---
 .../ClientApp/src/components/Entry/FolderSearch.tsx  | 11 +++++++++++
 Finjector.Web/ClientApp/src/pages/Entry.tsx          | 12 ------------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx b/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx
index 760acd57..43968d39 100644
--- a/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx
+++ b/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx
@@ -121,6 +121,17 @@ const FolderSearch = ({
           }}
         />
       </InputGroup>
+      <div className="row mb-5">
+        <div className="col-md-6">
+          {data && (
+            <div className="form-text">
+              Current Team: {selectedFolder?.teamName}
+              <br />
+              Current Folder: {selectedFolder?.name}
+            </div>
+          )}
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/Finjector.Web/ClientApp/src/pages/Entry.tsx b/Finjector.Web/ClientApp/src/pages/Entry.tsx
index 4b5c967b..32db2865 100644
--- a/Finjector.Web/ClientApp/src/pages/Entry.tsx
+++ b/Finjector.Web/ClientApp/src/pages/Entry.tsx
@@ -175,18 +175,6 @@ const Entry = () => {
           />
         </div>
 
-        <div className="row mb-5">
-          <div className="col-md-6">
-            {savedChartQuery.data && (
-              <div className="form-text">
-                Current Team: {savedChartQuery.data.chart.teamName}
-                <br />
-                Current Folder: {savedChartQuery.data.chart.folder?.name}
-              </div>
-            )}
-          </div>
-        </div>
-
         {savedChart.id ? (
           <EntryEditButtons chartData={chartData} savedChart={savedChart} />
         ) : (

From 28853198e6d311680f29a9a221f6a7d1f45b5b49 Mon Sep 17 00:00:00 2001
From: River Holstege <laholstege@ucdavis.edu>
Date: Fri, 12 Jan 2024 11:55:53 -0800
Subject: [PATCH 5/7] display as Personal/Default if no data is returned

---
 .../src/components/Entry/FolderSearch.tsx     | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx b/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx
index 43968d39..e0916314 100644
--- a/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx
+++ b/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import {
   Highlighter,
   Menu,
@@ -28,25 +28,27 @@ const FolderSearch = ({
   const typeaheadRef = useRef<any>();
   const initialFolderId = useRef(selectedFolderId);
 
-  const { data, isFetching } = useGetFolderSearchList();
+  const query = useGetFolderSearchList();
 
   useEffect(() => {
     // when data loads, set the state of the typeahead to the selected folder
     // so that it pre-populates the dropdown with the correct folder
     // only need to do this once, otherwise it causes weird issues on clear
-    if (data) {
-      const folder = data.find((f) => f.id === initialFolderId.current);
+    if (query.data) {
+      const folder = query.data.find((f) => f.id === initialFolderId.current);
       if (!!folder) {
         // if it already has a folder that user has permission to save to, set it to that
         setSelectedFolder(folder);
       } else {
         // otherwise, set it to the default
         setSelectedFolder(
-          data.find((f) => f.teamName === "Personal" && f.name === "Default")
+          query.data.find(
+            (f) => f.teamName === "Personal" && f.name === "Default"
+          )
         );
       }
     }
-  }, [data, initialFolderId]);
+  }, [query.data, initialFolderId]);
 
   const handleSelected = (selected: any[]) => {
     setSelectedFolder(selected[0]);
@@ -71,12 +73,12 @@ const FolderSearch = ({
           id={"typeahead-folder-search"}
           filterBy={["name", "teamName"]}
           ref={typeaheadRef}
-          isLoading={isFetching}
+          isLoading={query.isFetching}
           labelKey="name"
           placeholder="Default"
           selected={selectedFolder ? [selectedFolder] : []}
           onChange={handleSelected}
-          options={data || []} // data
+          options={query.data || []} // data
           clearButton={true}
           disabled={disabled}
           renderMenu={(
@@ -123,13 +125,13 @@ const FolderSearch = ({
       </InputGroup>
       <div className="row mb-5">
         <div className="col-md-6">
-          {data && (
-            <div className="form-text">
-              Current Team: {selectedFolder?.teamName}
-              <br />
-              Current Folder: {selectedFolder?.name}
-            </div>
-          )}
+          <div className="form-text">
+            Current Team:{" "}
+            {query.isFetched && (selectedFolder?.teamName ?? "Personal")}
+            <br />
+            Current Folder:{" "}
+            {query.isFetched && (selectedFolder?.name ?? "Default")}
+          </div>
         </div>
       </div>
     </div>

From 969536ea4079b6544b78abfcb664aaa451f5ceb1 Mon Sep 17 00:00:00 2001
From: Cal Doval <cydoval@mac.com>
Date: Fri, 12 Jan 2024 13:19:32 -0700
Subject: [PATCH 6/7] margin left

---
 Finjector.Web/ClientApp/src/sass/_components.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/Finjector.Web/ClientApp/src/sass/_components.scss b/Finjector.Web/ClientApp/src/sass/_components.scss
index 38ab5fcb..ad616b6e 100644
--- a/Finjector.Web/ClientApp/src/sass/_components.scss
+++ b/Finjector.Web/ClientApp/src/sass/_components.scss
@@ -170,6 +170,9 @@ hr {
   border: 1px solid $borders;
   color: $primary-font;
 }
+.form-control:disabled {
+  margin-left: 1px;
+}
 .form-control:focus {
   background-color: $primary-bg;
   border-color: $primary-color;

From 1744fd72f9a9b7b2240538c04d08886447692dab Mon Sep 17 00:00:00 2001
From: River Holstege <laholstege@ucdavis.edu>
Date: Fri, 12 Jan 2024 14:09:52 -0800
Subject: [PATCH 7/7] revert so currently saved folder is correct, make
 formatting better

---
 .../src/components/Entry/FolderSearch.tsx     | 25 ++++++++--------
 .../src/components/Entry/NameEntry.tsx        | 30 +++++++++----------
 Finjector.Web/ClientApp/src/pages/Entry.tsx   | 28 +++++++++--------
 3 files changed, 43 insertions(+), 40 deletions(-)

diff --git a/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx b/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx
index e0916314..d24961fc 100644
--- a/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx
+++ b/Finjector.Web/ClientApp/src/components/Entry/FolderSearch.tsx
@@ -16,12 +16,15 @@ interface FolderSearchProps {
   updateFolderId: (folderId: number) => void;
   selectedFolderId?: number;
   disabled?: boolean;
+  // where the chart is currently saved (this will not change when the user selects a new folder from the input)
+  currentlySavedInFolderId?: number;
 }
 
 const FolderSearch = ({
   updateFolderId,
   selectedFolderId,
   disabled,
+  currentlySavedInFolderId,
 }: FolderSearchProps) => {
   const [selectedFolder, setSelectedFolder] = useState<Folder | undefined>();
 
@@ -62,7 +65,7 @@ const FolderSearch = ({
   };
 
   return (
-    <div className="col-md-6">
+    <>
       <h2>Folder</h2>
       <p>Choose where you would like to store your chart string</p>
       <InputGroup aria-disabled={disabled}>
@@ -123,18 +126,16 @@ const FolderSearch = ({
           }}
         />
       </InputGroup>
-      <div className="row mb-5">
-        <div className="col-md-6">
-          <div className="form-text">
-            Current Team:{" "}
-            {query.isFetched && (selectedFolder?.teamName ?? "Personal")}
-            <br />
-            Current Folder:{" "}
-            {query.isFetched && (selectedFolder?.name ?? "Default")}
-          </div>
+      {currentlySavedInFolderId && (
+        <div className="form-text">
+          Current Team:{" "}
+          {query.data?.find((f) => f.id === currentlySavedInFolderId)?.teamName}
+          <br />
+          Current Folder:{" "}
+          {query.data?.find((f) => f.id === currentlySavedInFolderId)?.name}
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 };
 
diff --git a/Finjector.Web/ClientApp/src/components/Entry/NameEntry.tsx b/Finjector.Web/ClientApp/src/components/Entry/NameEntry.tsx
index d21194d1..e0f93467 100644
--- a/Finjector.Web/ClientApp/src/components/Entry/NameEntry.tsx
+++ b/Finjector.Web/ClientApp/src/components/Entry/NameEntry.tsx
@@ -10,22 +10,20 @@ interface Props {
 const NameEntry = (props: Props) => {
   return (
     <>
-      <div className="col-md-6">
-        <h2>Name</h2>
-        <div className="chart-type">
-          <form>
-            <p>Give your chart string a name to remember it by</p>
-            <Input
-              required
-              type="text"
-              className="form-control"
-              valid={props.chart.name.length > 0}
-              invalid={props.chart.name.length === 0}
-              value={props.chart.name}
-              onChange={(e) => props.updateName(e.target.value)}
-            />
-          </form>
-        </div>
+      <h2>Name</h2>
+      <div className="chart-type">
+        <form>
+          <p>Give your chart string a name to remember it by</p>
+          <Input
+            required
+            type="text"
+            className="form-control"
+            valid={props.chart.name.length > 0}
+            invalid={props.chart.name.length === 0}
+            value={props.chart.name}
+            onChange={(e) => props.updateName(e.target.value)}
+          />
+        </form>
       </div>
     </>
   );
diff --git a/Finjector.Web/ClientApp/src/pages/Entry.tsx b/Finjector.Web/ClientApp/src/pages/Entry.tsx
index 32db2865..ef2a91a4 100644
--- a/Finjector.Web/ClientApp/src/pages/Entry.tsx
+++ b/Finjector.Web/ClientApp/src/pages/Entry.tsx
@@ -162,19 +162,23 @@ const Entry = () => {
         <CoaDisplay chartData={chartData} />
         <hr />
         <div className="row">
-          <FolderSearch
-            disabled={saveInFolderId !== 0 && !chartSegmentString && !chartId} // if are creating from Folder, lock it (not on edit)
-            selectedFolderId={savedChart.folderId}
-            updateFolderId={(folderId) =>
-              setSavedChart((c) => ({ ...c, folderId }))
-            }
-          />
-          <NameEntry
-            chart={savedChart}
-            updateName={(n) => setSavedChart((c) => ({ ...c, name: n }))}
-          />
+          <div className="col-md-6 mb-3">
+            <FolderSearch
+              disabled={saveInFolderId !== 0 && !chartSegmentString && !chartId} // if are creating from Folder, lock it (not on edit)
+              selectedFolderId={savedChart.folderId}
+              updateFolderId={(folderId) =>
+                setSavedChart((c) => ({ ...c, folderId }))
+              }
+              currentlySavedInFolderId={savedChartQuery.data?.chart.folderId}
+            />
+          </div>
+          <div className="col-md-6 mb-3">
+            <NameEntry
+              chart={savedChart}
+              updateName={(n) => setSavedChart((c) => ({ ...c, name: n }))}
+            />
+          </div>
         </div>
-
         {savedChart.id ? (
           <EntryEditButtons chartData={chartData} savedChart={savedChart} />
         ) : (