Merge pull request #67 from elixir-europe/elixir-bsc

Elixir bsc
elixir-europe · Feb 21, 2024 · af54168 · af54168
2 parents 515576d + 83b0af0
commit af54168
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 17 deletions.
diff --git a/frontend/src/components/FilteringTerms/FilteringTerms.css b/frontend/src/components/FilteringTerms/FilteringTerms.css
@@ -4,8 +4,27 @@
   width: 100%;
 }
 
-.search-tr {
+.search-tr1 {
   display: flex;
+  width: 34%;
+}
+
+.search-tr2 {
+  display: flex;
+  width: 60%;
+}
+
+
+.inputTerm {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.inputLabel {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
 }
 
 thead {
@@ -19,24 +38,33 @@ thead {
   position: sticky;
   top: 0px;
   z-index: 2;
+  width: 100%;
+}
+
+tbody{
+  width: 60vw !important;
 }
 
 .thead2 {
   position: sticky;
   top: 61.4px;
   z-index: 2;
+  width: 100%;
 }
 
 #table {
-  margin-left: 78px;
-  margin-right: 78px;
+  display: flex;
+
   font-size: 15px;
-  width: 90%;
+  /* width: 90%; */
+  flex-direction: column;
+  margin-left: 1vw;
+
 }
 
 .tableWrapper {
   height: 100vh;
-  width: 95vw;
+  width: 85vw;
   overflow: scroll;
   display: flex;
 
@@ -53,7 +81,7 @@ thead {
 
 .th1 {
   display: flex;
-  width: 50%;
+  width: 65%;
   /* height: 100%; */
   /* justify-content: center; */
   margin-top: 12px;
@@ -78,7 +106,7 @@ thead {
 }
 .th2 {
   display: flex;
-  width: 50%;
+  width: 35%;
   /* height: 100%; */
   /* justify-content: center; */
   margin-top: 12px;
@@ -133,7 +161,7 @@ thead {
 
 .th2 {
   display: flex;
-  width: 50%;
+  width: 30%;
   /* height: 100%; */
   /* justify-content: center; */
   margin-top: 12px;
@@ -161,7 +189,7 @@ thead {
 
 .th4 {
   display: flex;
-  width: 50%;
+  width: 32%;
   /* height: 100%; */
   /* justify-content: center; */
   margin-top: 12px;
@@ -223,21 +251,30 @@ thead {
 }
 
 .searchTermInput1 {
-  margin: 5px;
   width: 60%;
   height: 28px;
+  margin-left: 23px;
 }
 
 tr {
   display: flex;
   width: 100%;
+  align-items: center;
+  justify-content: flex-start;
 }
 
 .terms1 {
   background-color: #e7eef5;
   border-bottom: solid #3d72a6;
+  width: 100%;
+}
+
+.terms2 {
+
+  width: 100%;
 }
 
+
 .checkbox {
   margin-right: -25px;
 }

diff --git a/frontend/src/components/FilteringTerms/FilteringTerms.js b/frontend/src/components/FilteringTerms/FilteringTerms.js
@@ -20,7 +20,7 @@ function FilteringTerms (props) {
   const [state, setstate] = useState({
     query: '',
     list:
-      props.filteringTerms !== false
+      props.filteringTerms.data !== undefined
         ? props.filteringTerms.data.response.filteringTerms
         : 'error'
   })
@@ -93,8 +93,10 @@ function FilteringTerms (props) {
   const [ID, setId] = useState('')
 
   useEffect(() => {
+    console.log(props.filteringTerms)
     if (state.list === 'error') {
       setError(true)
+      console.log("holi")
     } else {
       setError(false)
     }
@@ -304,7 +306,7 @@ function FilteringTerms (props) {
         <div className='tableWrapper'>
           <table id='table'>
             <thead className='thead1'>
-              <tr className='search-tr'>
+              <tr className='search-tr1'>
                 <th
                   className='search-box sorting'
                   tabIndex='0'
@@ -314,7 +316,7 @@ function FilteringTerms (props) {
                   aria-sort='ascending'
                   aria-label=': activate to sort column descending'
                 >
-                  <form>
+                  <form className='inputTerm'>
                     <input
                       className='searchTermInput1'
                       type='search'
@@ -325,7 +327,7 @@ function FilteringTerms (props) {
                   </form>
                 </th>
               </tr>
-              <tr className='search-tr'>
+              <tr className='search-tr2'>
                 <th
                   className='search-box sorting'
                   tabIndex='0'
@@ -335,7 +337,7 @@ function FilteringTerms (props) {
                   aria-sort='ascending'
                   aria-label=': activate to sort column descending'
                 >
-                  <form>
+                  <form className='inputLabel'>
                     <input
                       className='searchTermInput'
                       type='search'

diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js
@@ -62,7 +62,7 @@ function Layout (props) {
 
   const [showFilteringTerms, setShowFilteringTerms] = useState(false)
   const [filteringTerms, setFilteringTerms] = useState(false)
-
+  const [filteringTermsButton,  setShowFilteringTermsButton] = useState(false)
   const [showVariants, setShowVariants] = useState(false)
 
   const [showResultsVariants, setShowResultsVariants] = useState(true)
@@ -183,6 +183,8 @@ function Layout (props) {
 
   const handleSeeFilteringTerms = () => {
     setShowFilteringTerms(true)
+    setResults(null)
+    setTimeOut(true)
   }
 
   const handleExQueries = () => {
@@ -474,6 +476,7 @@ function Layout (props) {
       } catch (error) {
         console.log(error)
       }
+      setShowFilteringTermsButton(true)
     }
 
     // call the function
@@ -708,9 +711,12 @@ function Layout (props) {
                     </div>
                   </div>
                 )}
-              {props.collection !== '' && showBar === true && (
+              {props.collection !== '' && showBar === true && filteringTermsButton && (
                 <button className='filters' onClick={handleSeeFilteringTerms}>Filtering Terms </button>
               )}
+               {props.collection !== '' && showBar === true && !filteringTermsButton && (
+                <button className='filters'>Filtering Terms </button>
+              )}
             </div>
           </div>
         )}
@@ -1819,6 +1825,16 @@ function Layout (props) {
             query={query}
             setQuery={setQuery}
           />
+        )}
+            {results !== null && timeOut === true && showFilteringTerms && (
+          <FilteringTerms
+            filteringTerms={filteringTerms}
+            collection={props.collection}
+            setPlaceholder={setPlaceholder}
+            placeholder={placeholder}
+            query={query}
+            setQuery={setQuery}
+          />
         )}
         {timeOut === true && error && <h5>{error}</h5>}
       </div>