Merge pull request #282 from ucdavis/RH/create-chartstring-in-folder-id

Rh/create chartstring in folder

Finjector.Web/ClientApp/src/App.tsx

@@ -138,6 +138,11 @@ const router = createBrowserRouter([
                     element: <Entry />,
                     handle: { title: "Entry", hideBreadcrumbs: true },
                   },
+                  {
+                    path: "entry/", // when creating from folder
+                    element: <Entry />,
+                    handle: { title: "Entry", hideBreadcrumbs: false },
+                  },
                   {
                     path: "selected/:chartId/:chartSegmentString",
                     element: <Selected />,

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,
@@ -15,36 +15,43 @@ import { InputGroup, InputGroupText } from "reactstrap";
 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: React.FC<FolderSearchProps> = ({
   updateFolderId,
   selectedFolderId,
+  disabled,
+  currentlySavedInFolderId,
 }) => {
   const [selectedFolder, setSelectedFolder] = useState<Folder | undefined>();
 
   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]);
@@ -58,24 +65,25 @@ const FolderSearch: React.FC<FolderSearchProps> = ({
   };
 
   return (
-    <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
           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={(
             results,
             {
@@ -118,7 +126,16 @@ const FolderSearch: React.FC<FolderSearchProps> = ({
           }}
         />
       </InputGroup>
-    </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>
+      )}
+    </>
   );
 };
 

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>
     </>
   );

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 || "");
 
@@ -165,30 +162,23 @@ const Entry = () => {
         <CoaDisplay chartData={chartData} />
         <hr />
         <div className="row">
-          <FolderSearch
-            selectedFolderId={savedChart.folderId}
-            updateFolderId={(folderId) =>
-              setSavedChart((c) => ({ ...c, folderId }))
-            }
-          />
-          <NameEntry
-            chart={savedChart}
-            updateName={(n) => setSavedChart((c) => ({ ...c, name: n }))}
-          />
-        </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 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} />
         ) : (

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

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;