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.

2018-01-09 16:25:52 +01:00
parent e64d88bfdf
commit 262093d196
2 changed files with 321 additions and 183 deletions
--- a/client/app/components/admin/Sidebar.jsx
+++ b/client/app/components/admin/Sidebar.jsx
@@ -15,7 +15,10 @@ class SidebarComponent extends Component {
         filterQuery: '',
         requestItemsToBeDisplayed: [],
         listItemSelected: '',
+         height: '0',
      }
+
+      this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
   }

   // Where we wait for api response to be delivered from parent through props
@@ -24,6 +27,19 @@ class SidebarComponent extends Component {
      this.displayRequestedElementsInfo(props.requested_objects);
   }

+   componentDidMount() {
+      this.updateWindowDimensions();
+      window.addEventListener('resize', this.updateWindowDimensions);
+   }
+
+   componentWillUnmount() {
+      window.removeEventListener('resize', this.updateWindowDimensions);
+   }
+
+   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;
@@ -67,6 +83,7 @@ class SidebarComponent extends Component {
            return this.generateListElements(index, item);
      })

+      console.log(filteredByQuery)
      this.setState({
         requestItemsToBeDisplayed: filteredByQuery,
         filterQuery: query,
@@ -74,97 +91,117 @@ class SidebarComponent extends Component {
   }


-	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> 
-		)
-	}
-
-	generateFilterSearchbar() {
+   generateFilterSearch() {
      return (
+         <div style={sidebarCSS.searchSidebar}>
+            <div style={sidebarCSS.searchInner}>
               <input
                  type="text" 
                  id="search"
-				placeholder="Filter by name..." 
+                  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>
      )
   }

-	// A colored bar indicating the status of a item by color.
-	generateRequestIndicator(status) {
-		let statusColor;
-
-		switch (status) {
-			case 'requested':
-				// Yellow
-				statusColor = '#ffe14d';
-				break;
-			case 'downloading':
-				// Blue
-				statusColor = '#3fc3f3';
-				break;
-			case 'downloaded':
-				// Green
-				statusColor = '#6be682';
-				break;
-			default:
-				statusColor = 'grey';
-		}
-
-		const indicatorCSS = {
-			width: '100%',
-			height: '4px',
-			marginTop: '3px',
-			backgroundColor: statusColor,
-		}
+   generateNav() {
+      let filterValue = this.state.filterValue;

      return (
-			<div style={indicatorCSS}></div> 
+         <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>
+
+               <li>
+                  <span style={sidebarCSS.aFilterSelectors} onClick = { event => this.filterItems('requested') }>Requested</span>
+                  { filterValue === 'requested' && <span style={sidebarCSS.spanFilterSelectors}></span> }
+               </li>
+
+               <li>
+                  <span style={sidebarCSS.aFilterSelectors} onClick = { event => this.filterItems('downloading') }>Downloading</span>
+                  { filterValue === 'downloading' && <span style={sidebarCSS.spanFilterSelectors}></span> }
+               </li>
+
+               <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}>
+      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) }
+      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' }
+      }
+
+      statusBar.listStyleType = 'none';
+
+      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}>
+
+                  <h2 style={sidebarCSS.titleCard}>
+                     <span>{ item.name }</span>
+                  </h2>
+
+                  <p style={sidebarCSS.pCard}>
+                     <span>Requested:
+                        <time>
+                        &nbsp;{ this.convertDateToDaysSince(item.requested_date) }
+                        </time>
+                     </span>
+                  </p>
               </Interactive>
+            </li>
         </Link>
      )
   }
@@ -177,32 +214,30 @@ class SidebarComponent extends Component {
               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);
      })

      this.setState({
-			requestItemsToBeDisplayed: requestedElement,
+         requestItemsToBeDisplayed: this.generateBody(requestedElement)
      })
   }

   render() {
-		let bodyCSS = sidebarCSS.body;
-		if (typeof InstallTrigger !== 'undefined')
-			bodyCSS.width = '-moz-min-content';
+      // if (typeof InstallTrigger !== 'undefined')
+      //    bodyCSS.width = '-moz-min-content';

      return (
         <div>
-				<h1>Hello from the sidebar: </h1>
-				{ this.generateFilterDropdown() }
-				{ this.generateFilterSearchbar() }
-				<div key='requestedTable' style={bodyCSS}>
+            <h1 style={sidebarCSS.header}>Requested items</h1>
+            { this.generateFilterSearch() }
+            { this.generateNav() }
+
+            <div key='requestedTable' style={sidebarCSS.body}>
               { this.state.requestItemsToBeDisplayed }
            </div>
         </div>
--- a/client/app/components/styles/adminSidebar.jsx
+++ b/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',
+   },
 }