Completely re-wrote our sidebar. Now we can filter by search and category on top and a list of all elements are displayed below in a scrollable list. Each element has a indicator showing if the item is requested, downloading or downloaded. There are several generator functions that are to be pulled out in their seperate components.

client/app/components/admin/Sidebar.jsx

@@ -7,207 +7,242 @@ import sidebarCSS from '../styles/adminSidebar.jsx'
 
 class SidebarComponent extends Component {  
 
-	constructor(props){
-		super(props)
-		// Constructor with states holding the search query and the element of reponse.
-		this.state = {
-			filterValue: '',
-			filterQuery: '',
-			requestItemsToBeDisplayed: [],
-			listItemSelected: '',
-		}
-	}
+   constructor(props){
+      super(props)
+      // Constructor with states holding the search query and the element of reponse.
+      this.state = {
+         filterValue: '',
+         filterQuery: '',
+         requestItemsToBeDisplayed: [],
+         listItemSelected: '',
+         height: '0',
+      }
 
-	// Where we wait for api response to be delivered from parent through props
-	componentWillReceiveProps(props) {
-		this.state.listItemSelected = props.listItemSelected;
-		this.displayRequestedElementsInfo(props.requested_objects);
-	}
+      this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
+   }
 
-	// Inputs a date and returns a text string that matches how long it was since
-	convertDateToDaysSince(date) {
-		var oneDay = 24*60*60*1000;
-		var firstDate = new Date(date);
-		var secondDate = new Date();
+   // Where we wait for api response to be delivered from parent through props
+   componentWillReceiveProps(props) {
+      this.state.listItemSelected = props.listItemSelected;
+      this.displayRequestedElementsInfo(props.requested_objects);
+   }
 
-		var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / oneDay));
-		
-		switch (diffDays) {
-			case 0:
-				return 'Today';
-			case 1:
-				return '1 day ago'
-			default:
-				return diffDays + ' days ago'
-		}
-	}
+   componentDidMount() {
+      this.updateWindowDimensions();
+      window.addEventListener('resize', this.updateWindowDimensions);
+   }
 
-	// Called from our dropdown, receives a filter string and checks it with status field 
-	// of our request objects. 
-	filterItems(filterValue) {
-		let filteredRequestElements = this.props.requested_objects.map((item, index) => {
-			if (item.status === filterValue || filterValue === 'all')
-				return this.generateListElements(index, item);
-		})
+   componentWillUnmount() {
+      window.removeEventListener('resize', this.updateWindowDimensions);
+   }
 
-		this.setState({
-			requestItemsToBeDisplayed: filteredRequestElements,
-			filterValue: filterValue,
-		})
-	}
+   updateWindowDimensions() {
+      this.setState({ height: window.innerHeight });
+   }
+
+   // Inputs a date and returns a text string that matches how long it was since
+   convertDateToDaysSince(date) {
+      var oneDay = 24*60*60*1000;
+      var firstDate = new Date(date);
+      var secondDate = new Date();
+
+      var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / oneDay));
+      
+      switch (diffDays) {
+         case 0:
+            return 'Today';
+         case 1:
+            return '1 day ago'
+         default:
+            return diffDays + ' days ago'
+      }
+   }
+
+   // Called from our dropdown, receives a filter string and checks it with status field 
+   // of our request objects. 
+   filterItems(filterValue) {
+      let filteredRequestElements = this.props.requested_objects.map((item, index) => {
+         if (item.status === filterValue || filterValue === 'all')
+            return this.generateListElements(index, item);
+      })
+
+      this.setState({
+         requestItemsToBeDisplayed: filteredRequestElements,
+         filterValue: filterValue,
+      })
+   }
 
 
-	// Updates the internal state of the query filter and updates the list to only 
-	// display names matching the query. This is real-time filtering.
-	updateFilterQuery(event) {
-		const query = event.target.value;
+   // Updates the internal state of the query filter and updates the list to only 
+   // display names matching the query. This is real-time filtering.
+   updateFilterQuery(event) {
+      const query = event.target.value;
 
-		let filteredByQuery = this.props.requested_objects.map((item, index) => {
-			if (item.name.toLowerCase().indexOf(query.toLowerCase()) != -1)
-				return this.generateListElements(index, item);
-		})
+      let filteredByQuery = this.props.requested_objects.map((item, index) => {
+         if (item.name.toLowerCase().indexOf(query.toLowerCase()) != -1)
+            return this.generateListElements(index, item);
+      })
 
-		this.setState({
-			requestItemsToBeDisplayed: filteredByQuery,
-			filterQuery: query,
-		});
-	}
+      console.log(filteredByQuery)
+      this.setState({
+         requestItemsToBeDisplayed: filteredByQuery,
+         filterQuery: query,
+      });
+   }
 
 
-	generateFilterDropdown() {
-		return (
-			<select onChange={ event => this.filterItems(event.target.value) } value={this.state.filterValue}>
-				<option value='all'>All</option>
-				<option value='requested'>Requested</option>
-				<option value='downloading'>Downloading</option>
-				<option value='downloaded'>Downloaded</option>
-			</select> 
-		)
-	}
+   generateFilterSearch() {
+      return (
+         <div style={sidebarCSS.searchSidebar}>
+            <div style={sidebarCSS.searchInner}>
+               <input
+                  type="text" 
+                  id="search"
+                  style={sidebarCSS.searchTextField}
+                  placeholder="Search requested items" 
+                  onChange={event => this.updateFilterQuery(event)}
+                  value={this.state.filterQuery}/>
+               <span>
+                  <svg id="icon-search" style={sidebarCSS.searchIcon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15">
+                     <g id="search">
+                        <circle style={sidebarCSS.searchSVGIcon} cx="6.055" cy="5.805" r="5.305"></circle>
+                        <path style={sidebarCSS.searchSVGIcon} d="M9.847 9.727l4.166 4.773"></path>
+                     </g>
+                  </svg>
+               </span>
+            </div>
+         </div>
+      )
+   }
 
-	generateFilterSearchbar() {
-		return (
-			<input
-				type="text" 
-				id="search" 
-				placeholder="Filter by name..." 
-	         onChange={event => this.updateFilterQuery(event)}
-	         value={this.state.filterQuery}/>
-		)
-	}
+   generateNav() {
+      let filterValue = this.state.filterValue;
 
-	// A colored bar indicating the status of a item by color.
-	generateRequestIndicator(status) {
-		let statusColor;
+      return (
+         <nav style={sidebarCSS.sidebar_navbar_underline}>
+            <ul style={sidebarCSS.ulFilterSelectors}>
+               <li>
+                  <span style={sidebarCSS.aFilterSelectors} onClick = { event => this.filterItems('all') }>All</span>
+                  { (filterValue === 'all' || filterValue === '') && <span style={sidebarCSS.spanFilterSelectors}></span> }
+               </li>
 
-		switch (status) {
-			case 'requested':
-				// Yellow
-				statusColor = '#ffe14d';
-				break;
-			case 'downloading':
-				// Blue
-				statusColor = '#3fc3f3';
-				break;
-			case 'downloaded':
-				// Green
-				statusColor = '#6be682';
-				break;
-			default:
-				statusColor = 'grey';
-		}
+               <li>
+                  <span style={sidebarCSS.aFilterSelectors} onClick = { event => this.filterItems('requested') }>Requested</span>
+                  { filterValue === 'requested' && <span style={sidebarCSS.spanFilterSelectors}></span> }
+               </li>
 
-		const indicatorCSS = {
-			width: '100%',
-			height: '4px',
-			marginTop: '3px',
-			backgroundColor: statusColor,
-		}
+               <li>
+                  <span style={sidebarCSS.aFilterSelectors} onClick = { event => this.filterItems('downloading') }>Downloading</span>
+                  { filterValue === 'downloading' && <span style={sidebarCSS.spanFilterSelectors}></span> }
+               </li>
 
-		return (
-			<div style={indicatorCSS}></div> 
-		)
-	}
+               <li>
+                  <span style={sidebarCSS.aFilterSelectors} onClick = { event => this.filterItems('downloaded') }>Downloaded</span>
+                  { filterValue === 'downloaded' && <span style={sidebarCSS.spanFilterSelectors}></span> }
+               </li>
+            </ul>
+         </nav>
+      )
+   }
+
+   generateBody(cards) {
+      let style = sidebarCSS.ulCard;
+      style.maxHeight = this.state.height - 160;
+
+      return (
+         <ul style={style}>
+            { cards }
+         </ul>
+      )
+   }
 
 
-	generateListElements(index, item) {
-		if (index == this.state.listItemSelected) {
-			return (
-				<div style={sidebarCSS.parentElement_selected}>
-					<div style={sidebarCSS.contentContainer}>
-						<span style={sidebarCSS.title}> {item.name } </span>
-						<div style={sidebarCSS.rightContainer}>
-							<span>{ this.convertDateToDaysSince(item.requested_date) }</span>
-						</div>
-					</div>
-					<span>Status: { item.status }</span>
-					<br/>
-					<span>Matches found: 0</span>
-					{ this.generateRequestIndicator(item.status) }
-				</div>
-			)
-		}
-		else
-		return (
-			<Link style={sidebarCSS.link} to={{ pathname: '/admin/'+String(index)}}>
-				<Interactive 
-					key={index} 
-					style={sidebarCSS.parentElement}
-					as='div'
-					hover={sidebarCSS.parentElement_hover}
-					focus={sidebarCSS.parentElement_hover}
-					active={sidebarCSS.parentElement_active}>
+   generateListElements(index, item) {
+      let statusBar;
 
-						<span style={sidebarCSS.title}> {item.name } </span>
-						<div style={sidebarCSS.rightContainer}>
-							<span>{ this.convertDateToDaysSince(item.requested_date) }</span>
-						</div>
-						<br/>
-						{ this.generateRequestIndicator(item.status) }
-				</Interactive>
-			</Link>
-		)
-	}
+      switch (item.status) {
+         case 'requested':
+            // Yellow
+            statusBar = { background: 'linear-gradient(to right, rgb(63, 195, 243) 0, rgb(63, 195, 243) 4px, #fff 4px, #fff 100%) no-repeat' }
+            break;
+         case 'downloading':
+            // Blue
+            statusBar = { background: 'linear-gradient(to right, rgb(255, 225, 77) 0, rgb(255, 225, 77) 4px, #fff 4px, #fff 100%) no-repeat' }
+            break;
+         case 'downloaded':
+            // Green
+            statusBar = { background: 'linear-gradient(to right, #39aa56 0, #39aa56 4px, #fff 4px, #fff 100%) no-repeat' }
+            break;
+         default:
+            statusBar = { background: 'linear-gradient(to right, grey 0, grey 4px, #fff 4px, #fff 100%) no-repeat' }
+      }
 
-	// This is our main loader that gets called when we receive api response through props from parent
-	displayRequestedElementsInfo(requested_objects) {
-		let requestedElement = requested_objects.map((item, index) => {
-			if (['requested', 'downloading', 'downloaded'].indexOf(this.state.filterValue) != -1) {
-				if (item.status === this.state.filterValue){
-					return this.generateListElements(index, item);	
-				}
-			}
+      statusBar.listStyleType = 'none';
 
-			else if (this.state.filterQuery !== '') {
-				if (item.name.toLowerCase().indexOf(this.state.filterQuery.toLowerCase()) != -1)
-					return this.generateListElements(index, item);
-			}
+      return (
+         <Link style={sidebarCSS.link} to={{ pathname: '/admin/'+String(index)}} key={index}>
+            <li style={statusBar}>
+               <Interactive 
+                  as='div'
+                  style={ (index != this.state.listItemSelected) ? sidebarCSS.card : sidebarCSS.cardSelected }
+                  hover={sidebarCSS.cardSelected}
+                  focus={sidebarCSS.cardSelected}
+                  active={sidebarCSS.cardSelected}>
 
-			else
-				return this.generateListElements(index, item);
-		})
+                  <h2 style={sidebarCSS.titleCard}>
+                     <span>{ item.name }</span>
+                  </h2>
 
-		this.setState({
-			requestItemsToBeDisplayed: requestedElement,
-		})
-	}
+                  <p style={sidebarCSS.pCard}>
+                     <span>Requested:
+                        <time>
+                        &nbsp;{ this.convertDateToDaysSince(item.requested_date) }
+                        </time>
+                     </span>
+                  </p>
+               </Interactive>
+            </li>
+         </Link>
+      )
+   }
 
-	render() {
-		let bodyCSS = sidebarCSS.body;
-		if (typeof InstallTrigger !== 'undefined')
-			bodyCSS.width = '-moz-min-content';
+   // This is our main loader that gets called when we receive api response through props from parent
+   displayRequestedElementsInfo(requested_objects) {
+      let requestedElement = requested_objects.map((item, index) => {
+         if (['requested', 'downloading', 'downloaded'].indexOf(this.state.filterValue) != -1) {
+            if (item.status === this.state.filterValue){
+               return this.generateListElements(index, item);  
+            }
+         }
+         else if (this.state.filterQuery !== '') {
+            if (item.name.toLowerCase().indexOf(this.state.filterQuery.toLowerCase()) != -1)
+               return this.generateListElements(index, item);
+         }
+         else
+            return this.generateListElements(index, item);
+      })
 
-		return (
-			<div>
-				<h1>Hello from the sidebar: </h1>
-				{ this.generateFilterDropdown() }
-				{ this.generateFilterSearchbar() }
-				<div key='requestedTable' style={bodyCSS}>
-					{ this.state.requestItemsToBeDisplayed }
-				</div>
-			</div>
-	   );
-  	}
+      this.setState({
+         requestItemsToBeDisplayed: this.generateBody(requestedElement)
+      })
+   }
+
+   render() {
+      // if (typeof InstallTrigger !== 'undefined')
+      //    bodyCSS.width = '-moz-min-content';
+
+      return (
+         <div>
+            <h1 style={sidebarCSS.header}>Requested items</h1>
+            { this.generateFilterSearch() }
+            { this.generateNav() }
+
+            <div key='requestedTable' style={sidebarCSS.body}>
+               { this.state.requestItemsToBeDisplayed }
+            </div>
+         </div>
+      );
+   }
 }
 
 export default SidebarComponent;

client/app/components/styles/adminSidebar.jsx

@@ -1,13 +1,15 @@
 export default {
+   header: {
+      textAlign: 'center',
+   },
    body: {
       backgroundColor: 'white',
-      width: 'min-content',
    },
 
    parentElement: {
       display: 'inline-block',
-      width: '300px',
-      border: '1px solid black',
+      width: '100%',
+      border: '1px solid grey',
       borderRadius: '2px',
       padding: '4px',
       margin: '4px',
@@ -16,7 +18,8 @@ export default {
    },
 
    parentElement_hover: {
-      marginLeft: '10px',
+      backgroundColor: '#f8f8f8',
+      pointer: 'hand',
    },
 
    parentElement_active: {
@@ -25,8 +28,8 @@ export default {
 
    parentElement_selected: {
       display: 'inline-block',
-      width: '300px',
-      border: '1px solid black',
+      width: '100%',
+      border: '1px solid grey',
       borderRadius: '2px',
       padding: '4px',
       margin: '4px 0px 4px 4px',
@@ -35,7 +38,7 @@ export default {
    },
 
    title: {
-      maxWidth: '70%',
+      maxWidth: '65%',
       display: 'inline-flex',
    },
 
@@ -47,4 +50,104 @@ export default {
    rightContainer: {
       float: 'right',
    },
+
+
+
+   searchSidebar: {
+      height: '4em',
+   },
+   searchInner: {
+      top: '0',
+      right: '0',
+      left: '0',
+      bottom: '0',
+      margin: 'auto',
+      width: '90%',
+      minWidth: '280px',
+      height: '30px',
+      border: '1px solid #d0d0d0',
+      borderRadius: '4px',
+      overflow: 'hidden'
+   },
+   searchTextField: {
+      display: 'inline-block',
+      width: '90%',
+      padding: '.3em',
+      verticalAlign: 'middle',
+      border: 'none',
+      background: '#fff',
+      fontSize: '14px',
+      marginTop: '-7px',
+   },
+   searchIcon: {
+      width: '15px',
+      height: '16px',
+      marginRight: '4px',
+      marginTop: '7px',
+   },
+   searchSVGIcon: {
+      fill: 'none',
+      stroke: '#9d9d9d',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeMiterlimit: '10',
+   },
+
+
+   ulFilterSelectors: {
+      borderBottom: '2px solid #f1f1f1',
+      display: 'flex',
+      padding: '0',
+      margin: '0',
+      listStyle: 'none',
+      justifyContent: 'space-evenly',
+   },
+   aFilterSelectors: {
+      color: '#3eaaaf',
+      fontSize: '16px',
+      cursor: 'pointer',
+   },
+   spanFilterSelectors: {
+      content: '""',
+      bottom: '-2px',
+      display: 'block',
+      width: '100%',
+      height: '2px',
+      backgroundColor: '#3eaaaa',
+   },
+
+
+   ulCard: {
+      margin: '1em 0 0 0',
+      padding: '0',
+      listStyle: 'none',
+      borderBottom: '.46rem solid #f1f1f',
+      backgroundColor: '#f1f1f1',
+      overflow: 'scroll',
+   },
+
+
+   card: {
+      padding: '.1em .5em .8em 1.5em',
+      marginBottom: '.26rem',
+      height: 'auto',
+      cursor: 'pointer',
+   },
+   cardSelected: {
+      padding: '.1em .5em .8em 1.5em',
+      marginBottom: '.26rem',
+      height: 'auto',
+      cursor: 'pointer',
+
+      backgroundColor: '#f9f9f9',
+   },
+   titleCard: {
+      fontSize: '15px',
+      fontWeight: '400',
+      whiteSpace: 'no-wrap',
+      textDecoration: 'none',
+   },
+   pCard: {
+      margin: '0',
+   },
 }