-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #266 from ucdavis/cyd/importing-flow
import page 1
- Loading branch information
Showing
9 changed files
with
204 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
Finjector.Web/ClientApp/src/components/Import/ImportListFolderRow.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import React from "react"; | ||
| import { Folder } from "../../types"; | ||
| import { faFileLines, faFileExport } from "@fortawesome/free-solid-svg-icons"; | ||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
| import FinjectorButton from "../Shared/FinjectorButton"; | ||
|
|
||
| interface ImportListFolderRowProps { | ||
| folder: Folder; | ||
| } | ||
|
|
||
| const ImportListFolderRow = (props: ImportListFolderRowProps) => { | ||
| return ( | ||
| <div className="import-folder-row d-flex align-items-center justify-content-between"> | ||
| <div className="col-7"> | ||
| <h3 className="mb-0 ms-2">{props.folder.name}</h3> | ||
| </div> | ||
| <div className="col-2"> | ||
| <div className="stat-icon"> | ||
| <FontAwesomeIcon | ||
| title="Chart string count in folder" | ||
| icon={faFileLines} | ||
| /> | ||
| {props.folder.coas.length} | ||
| </div> | ||
| </div> | ||
| <div className="col-3 text-end"> | ||
| <FinjectorButton className="ms-2 btn-borderless" to={`#`}> | ||
| <FontAwesomeIcon icon={faFileExport} /> | ||
| Import Folder | ||
| </FinjectorButton> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ImportListFolderRow; |
45 changes: 45 additions & 0 deletions
45
Finjector.Web/ClientApp/src/components/Import/ImportListTeamRow.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import React from "react"; | ||
| import { TeamGroupedCoas } from "../../types"; | ||
| import { faFileLines, faFileExport } from "@fortawesome/free-solid-svg-icons"; | ||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
| import FinjectorButton from "../Shared/FinjectorButton"; | ||
| import ImportListFolderRow from "./ImportListFolderRow"; | ||
|
|
||
| interface ImportListTeamRowProps { | ||
| teamGroup: TeamGroupedCoas; | ||
| } | ||
|
|
||
| const ImportListTeamRow = (props: ImportListTeamRowProps) => { | ||
| return ( | ||
| <li className="fin-row saved-list-item"> | ||
| <div className="fin-info d-flex justify-content-between align-items-center"> | ||
| <div className="col-7 ms-2"> | ||
| <h3 className="row-title">{props.teamGroup.team.name}</h3> | ||
| </div> | ||
| <div className="col-2"> | ||
| <div className="stat-icon team-coa-counter"> | ||
| <FontAwesomeIcon | ||
| title="Chart string count in team" | ||
| icon={faFileLines} | ||
| /> | ||
| {props.teamGroup.folders.reduce( | ||
| (acc, folder) => acc + folder.coas.length, | ||
| 0 | ||
| )} | ||
| </div> | ||
| </div> | ||
| <div className="col-3 text-end"> | ||
| <FinjectorButton to={`#`} className="me-1"> | ||
| <FontAwesomeIcon icon={faFileExport} /> | ||
| Import Team | ||
| </FinjectorButton> | ||
| </div> | ||
| </div> | ||
| {props.teamGroup.folders.map((folder) => { | ||
| return <ImportListFolderRow key={folder.id} folder={folder} />; | ||
| })} | ||
| </li> | ||
| ); | ||
| }; | ||
|
|
||
| export default ImportListTeamRow; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import React from "react"; | ||
| import { useGetSavedCharts } from "../queries/storedChartQueries"; | ||
| import ImportListTeamRow from "../components/Import/ImportListTeamRow"; | ||
|
|
||
| // Main landing screen for popup | ||
|
|
||
| const Import = () => { | ||
| const [search, setSearch] = React.useState(""); | ||
|
|
||
| const teamGroups = useGetSavedCharts(); | ||
|
|
||
| const filterLowercase = search.toLowerCase(); | ||
| const filteredTeamsInfo = teamGroups.data?.filter((teamInfo) => { | ||
| return teamInfo.team.name.toLowerCase().includes(filterLowercase); | ||
| }); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="page-title pb-2 mb-3 row justify-content-between align-items-center"> | ||
| <div className="col-12 col-md-4"> | ||
| <h1>Import Team or Folder</h1> | ||
| </div> | ||
| </div> | ||
| <div className="mb-3"> | ||
| <input | ||
| type="search" | ||
| className="form-control searchbar" | ||
| placeholder="Search Teams or Folders to import" | ||
| value={search} | ||
| onChange={(e) => setSearch(e.target.value)} | ||
| /> | ||
| </div> | ||
| <ul className="list-group"> | ||
| {filteredTeamsInfo?.map((teamGroup) => { | ||
| return ( | ||
| <ImportListTeamRow key={teamGroup.team.id} teamGroup={teamGroup} /> | ||
| ); | ||
| })} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Import; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters