Skip to content
Snippets Groups Projects
Commit a261bd8d authored by stvoutsin's avatar stvoutsin
Browse files

Added Advanced Search form [IDA]

parent 5e2a674d
No related branches found
No related tags found
1 merge request!87Issue/96 advanced search
Hide whitespace changes
Inline Side-by-side
src/assets/Interactive.css
+ 45
− 5
View file @ a261bd8d
......@@ -29,7 +29,7 @@
position: relative;
}
.ida input[type=text] {
.workflow-search {
height: 5rem;
width: 60%;
border: 2px solid black;
......@@ -37,17 +37,17 @@
margin-bottom:30px;
}
.ida input[type=text]:focus{
.ida .workflow-search:focus{
outline: none;
border-color: blue;
}
.ida input[type=text]:focus + .placeholder-text .text, :not(input[value=""]) + .placeholder-text .text{
.ida .workflow-search:focus + .placeholder-text .text, :not(input[value=""]) + .placeholder-text .text{
background-color: white;
font-size: 1.1rem;
color: black;
transform: translate(0, -170%);
}
.ida input[type=text]:focus + .placeholder-text .text{
.ida .workflow-search:focus + .placeholder-text .text{
border-color: blueviolet;
color: blue;
}
......@@ -72,7 +72,7 @@
transition: transform 0.15s ease-out, font-size 0.15s ease-out, background-color 0.2s ease-out, color 0.15s ease-out;
}
.ida input[type=text], .placeholder-text{
.ida .workflow-search, .placeholder-text{
font-size: 1.4rem;
padding: 0 1.2rem;
......@@ -201,3 +201,43 @@
width: 60%;
margin-bottom:80px;
}
.advanced-search {
border: 1px solid black;
padding-bottom: 20px;
border-radius: 5px;
padding-right:30px;
padding-left:30px;
}
.search-button {
float:right;
margin-right:20px;
}
.form {
display: table;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.advanced-form > li {
display: table-row;
}
.advanced-form > li > div {
display: table-cell;
padding-bottom: 5px;
}
.advanced-form > li > div:first-child {
padding-right: 10px;
}
.advanced-float-right {
float:right;
}
.advanced-form-div {
width:50%;
margin-left:200px;
}
src/components/services/Interactive.js
+ 149
− 6
View file @ a261bd8d
......@@ -11,10 +11,18 @@ export default function Interactive() {
const {idaSystemURL, setIdaSystemURL, workflowURL, setWorkflowURL, batchsystemsURL, setBatchsystemsURL, list_of_workflows, setList_of_workflows, list_of_idaSystems, setList_of_idaSystems} = useContext(IDAContext);
const {api_host } = useContext(GlobalContext);
const [searchTerm, setSearchTerm] = React.useState("");
const [searchType, setSearchType] = React.useState("");
const [searchTypeFilter, setSearchTypeFilter] = React.useState("");
const [searchAuthor, setSearchAuthor] = React.useState("");
const [searchAuthorFilter, setSearchAuthorFilter] = React.useState("");
const [searchPlatform, setSearchPlatform] = React.useState("");
const [searchPlatformFilter, setSearchPlatformFilter] = React.useState("");
const [showFacilities, setShowFacilities] = React.useState(false);
const [showNext, setShowNext] = React.useState(false);
const [showSkip, setShowSkip] = React.useState(true);
const [showBack, setShowBack] = React.useState(false);
const [showAdvanced, setShowAdvanced] = React.useState(false);
const [advancedClicked, setAdvancedClicked] = React.useState(false);
const [showMoreButton, setShowMoreButton] = React.useState(true);
const [showDeploy, setShowDeploy] = React.useState(false);
const [numberOfitemsShown, setNumberOfitemsShown] = React.useState(3)
......@@ -83,15 +91,22 @@ export default function Interactive() {
};
const workflow_results = !searchTerm
? list_of_workflows
let workflow_results = !searchTerm
?
!advancedClicked
? list_of_workflows
: list_of_workflows.filter(workflow =>
((typeof workflow.keywords === 'string') && workflow.keywords.toLowerCase().includes(searchTypeFilter.toLocaleLowerCase())) &&
((typeof workflow.runtimePlatform === 'string') && workflow.runtimePlatform.toLowerCase().includes(searchPlatformFilter.toLocaleLowerCase())) &&
((typeof workflow.author === 'string') && workflow.author.toLowerCase().includes(searchAuthorFilter.toLocaleLowerCase())))
: list_of_workflows.filter(workflow =>
(typeof workflow.name === 'string') && workflow.name.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ||
(typeof workflow.name === 'string') && workflow.name.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ||
(typeof workflow.keywords === 'string') && workflow.keywords.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ||
(typeof workflow.author === 'string') && workflow.author.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ||
(typeof workflow.runtimePlatform === 'string') && workflow.runtimePlatform.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ||
(typeof workflow.author === 'string') && workflow.author.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ||
(typeof workflow.runtimePlatform === 'string') && workflow.runtimePlatform.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ||
(typeof workflow.description === 'string') && workflow.description.toLowerCase().includes(searchTerm.toLocaleLowerCase())
);
);
const facility_results = !searchTerm
? list_of_idaSystems
......@@ -116,8 +131,66 @@ export default function Interactive() {
setSearchTerm("");
setShowFacilities(true);
setShowBack(true);
setAdvancedClicked(false);
setSearchAuthor("");
setSearchAuthorFilter("");
setSearchPlatform("");
setSearchPlatformFilter("");
setSearchType("");
setSearchTypeFilter("");
};
const onClickAdvanced = e => {
e.preventDefault();
if (showAdvanced) {
setShowAdvanced(false);
} else {
setShowAdvanced(true);
}
setAdvancedClicked(false);
setSearchAuthor("");
setSearchAuthorFilter("");
setSearchType("");
setSearchTypeFilter("");
setSearchPlatform("");
setSearchPlatformFilter("");
}
const onClickAdvancedSearch = e => {
e.preventDefault();
if (searchType.toLowerCase()!="all") {
setSearchTypeFilter(searchType.toLowerCase());
}
if (searchAuthor.toLowerCase()!="") {
setSearchAuthorFilter(searchAuthor.toLowerCase());
}
if (searchAuthor.toLowerCase()!="all") {
setSearchPlatformFilter(searchPlatform.toLowerCase());
}
setAdvancedClicked(true);
setShowAdvanced(false);
}
const handleRecordTypeChange = e => {
e.preventDefault();
setSearchType(e.target.value);
}
const handleRecordAuthorChange = e => {
e.preventDefault();
setSearchAuthor(e.target.value);
}
const handlePlatformChange = e => {
e.preventDefault();
setSearchPlatform(e.target.value);
}
const onClickBack = e => {
e.preventDefault();
setSearchTerm("")
......@@ -128,6 +201,13 @@ export default function Interactive() {
setShowMoreButton(true);
setShowSkip(true);
setWorkflowURL(defaultWorkflow);
setAdvancedClicked(false);
setSearchAuthor("");
setSearchAuthorFilter("");
setSearchType("");
setSearchTypeFilter("");
setSearchPlatform("");
setSearchPlatformFilter("");
};
......@@ -160,12 +240,14 @@ export default function Interactive() {
<div class="search-buttons">
<input
className="workflow-search"
type="text"
placeholder="Search for Workflows"
value={searchTerm}
onChange={handleChange}
/>
{ showSkip ?
<Button className="skip-button" onClick={onClickNext}>Skip</Button>
: null }
......@@ -173,10 +255,71 @@ export default function Interactive() {
{ showNext ?
<Button className="next-button" onClick={onClickNext}>Next</Button>
: null }
<br/>
<a href="" onClick={onClickAdvanced}>Advanced Search</a>
<br/>
{ showAdvanced ?
<div className="advanced-search">
<Form className="advanced-form">
<br/>
<h3>Search By:</h3>
<hr/>
<ul className="advanced-form-ul">
<li>
<div className="advanced-form-div"><label>User Interface type:</label>
<select class="form-select advanced-float-right" aria-label="record-type" id="record-type" name="record-type" onChange={handleRecordTypeChange}>
<option value="all">All</option>
<option value="desktop">Desktop Software</option>
<option value="cli">Command Line</option>
<option value="jupyter-notebook">Notebook</option>
</select>
</div>
</li>
<li>
<div className="advanced-form-div"><label>Author:</label>
<input
type="text"
className="advanced-float-right"
placeholder="Author name"
value={searchAuthor}
onChange={handleRecordAuthorChange}
/>
</div>
</li>
<li>
<div className="advanced-form-div"><label>Runtime Platform:</label>
<select class="form-select advanced-float-right" aria-label="record-type" id="record-type" name="record-type" onChange={handlePlatformChange}>
<option value="all">All</option>
<option value="Python">Python</option>
<option value="R">R</option>
<option value="Java">Java</option>
</select>
</div>
</li>
</ul>
<br/><br/>
<Button onClick={onClickAdvancedSearch} className="search-button">Search</Button>
<br/><br/>
</Form>
</div>
: null }
</div>
<ul class="workflow-ul">
{workflow_results_sliced.map(item => (
<li class="workflow-li">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment