Merge pull request #176 from appsembler/matej-work/add-new-views

Add new views - Learners, Courses

frontend/src/App.js

@@ -11,6 +11,8 @@ import SingleUserContent from 'base/views/SingleUserContent';
 import ReportsList from 'base/views/ReportsList';
 import CsvReports from 'base/views/CsvReports';
 import SingleReportContent from 'base/views/SingleReportContent';
+import UsersList from 'base/views/UsersList';
+import CoursesList from 'base/views/CoursesList';
 import 'base/sass/base/_base-overrides.scss';
 import styles from 'base/sass/base/_grid.scss';
 
@@ -38,6 +40,8 @@ class App extends Component {
                   <Route exact path="/figures" component={DashboardContent} />
                   <Route exact path="/figures/mau-history" component={MauDetailsContent} />
                   <Route exact path="/figures/reports" component={ReportsList} />
+                  <Route exact path="/figures/users" component={UsersList} />
+                  <Route exact path="/figures/courses" component={CoursesList} />
                   {(process.env.ENABLE_CSV_REPORTS === "enabled") && <Route exact path="/figures/csv-reports" component={CsvReports} />}
                   <Route path="/figures/course/:courseId" render={({ match }) => <SingleCourseContent courseId={match.params.courseId} />}/>
                   <Route path="/figures/user/:userId" render={({ match }) => <SingleUserContent userId={match.params.userId} />}/>

frontend/src/components/header-views/header-content-static/HeaderContentStatic.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+import styles from './_header-content-static.scss';
+
+let cx = classNames.bind(styles);
+
+class HeaderContentStatic extends Component {
+  render() {
+
+    return (
+      <section className={cx({ 'header-content-static': true, 'container': true})}>
+        <h1 className={styles['title']}>{this.props.title}</h1>
+        <p className={styles['subtitle']}>{this.props.subtitle}</p>
+      </section>
+    );
+  }
+}
+
+HeaderContentStatic.defaultProps = {
+  title: 'Static page header',
+  subtitle: 'Static page header subtitle.'
+}
+
+HeaderContentStatic.propTypes = {
+  title: PropTypes.string,
+  subtitle: PropTypes.string
+};
+
+export default HeaderContentStatic

frontend/src/components/header-views/header-content-static/_header-content-static.scss

@@ -0,0 +1,24 @@
+@import '~base/sass/base/variables';
+@import '~base/sass/base/functions';
+@import '~base/sass/base/grid';
+
+.header-content-static {
+  margin-bottom: calcRem(60);
+  position: relative;
+  padding-bottom: calcRem(40);
+
+  .title {
+    font-weight: 900;
+    color: pick-visible-color($primary-color, #fff, $base-text-color);
+    font-size: calcRem(48);
+    line-height: 120%;
+    margin: calcRem(20) 0 calcRem(10);
+  }
+
+  .subtitle {
+    font-weight: normal;
+    color: pick-visible-color($primary-color, #fff, $base-text-color);
+    font-size: calcRem(18);
+    line-height: 150%;
+  }
+}

frontend/src/components/inputs/ListSearch.js

@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styles from './_list-search.scss';
+import classNames from 'classnames/bind';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
+
+let cx = classNames.bind(styles);
+
+
+class ListSearch extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: '',
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.clearInput = this.clearInput.bind(this);
+    this.passValue = this.passValue.bind(this);
+  }
+
+  onChange = (newValue) => {
+    clearTimeout(this.timer);
+    this.setState({
+      value: newValue
+    });
+    this.timer = setTimeout(this.passValue, this.props.waitInterval);
+  };
+
+  clearInput = () => {
+    this.setState({
+      value: ''
+    }, () => this.props.valueChangeFunction(''))
+  }
+
+  passValue = () => {
+    this.props.valueChangeFunction(this.state.value);
+  }
+
+  componentWillMount() {
+    this.timer = null;
+  }
+
+
+
+  render() {
+
+    return (
+      <div className={styles['list-search']}>
+        <div className={cx({ 'inner-container': true, 'active': (this.state.value !== '')})}>
+          <FontAwesomeIcon icon={faSearch} className={styles['search-icon']} />
+          <input
+            type="text"
+            className={styles['list-search-input']}
+            value={this.state.value}
+            onChange={(e) => this.onChange(e.target.value)}
+            placeholder={this.props.inputPlaceholder}
+          />
+          {this.state.value ? (
+            <button className={styles['clear-button']} onClick={() => this.clearInput()}>
+              <FontAwesomeIcon icon={faTimes} className={styles['clear-icon']} />
+            </button>
+          ) : ''}
+        </div>
+      </div>
+    )
+  }
+}
+
+ListSearch.defaultProps = {
+  waitInterval: 1000,
+  inputPlaceholder: 'Start typing...',
+}
+
+ListSearch.propTypes = {
+  negativeStyleButton: PropTypes.bool,
+  buttonText: PropTypes.string,
+  inputPlaceholder: PropTypes.string
+};
+
+export default ListSearch

frontend/src/components/inputs/_list-search.scss

@@ -0,0 +1,56 @@
+@import '~base/sass/base/variables';
+@import '~base/sass/base/functions';
+@import '~base/sass/base/mixins';
+
+.list-search {
+  display: block;
+  padding: calcRem(15) 0;
+
+  .inner-container {
+    padding: calcRem(15) 0;
+    width: 100%;
+    max-width: calcRem(420);
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    align-items: center;
+
+    &.active {
+      border-bottom: 2px solid $primary-color;
+    }
+  }
+
+  .search-icon {
+    font-size: calcRem(14);
+    margin-right: calcRem(10);
+    color: #ccc;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  .list-search-input {
+    border: none;
+    font-size: calcRem(14);
+    flex: 1 1 100%;
+    outline: none;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .clear-button {
+    border: none;
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .clear-icon {
+    font-size: calcRem(14);
+    border: none;
+    color: $primary-color;
+  }
+}

frontend/src/components/layout/HeaderNav.js

@@ -21,6 +21,18 @@ class HeaderNav extends Component {
         >
           MAU History
         </NavLink>
+        <NavLink
+          to="/figures/users"
+          className={styles['header-nav__link']}
+        >
+          Users
+        </NavLink>
+        <NavLink
+          to="/figures/courses"
+          className={styles['header-nav__link']}
+        >
+          Courses
+        </NavLink>
         {(process.env.ENABLE_CSV_REPORTS === "enabled") && (
           <NavLink
             to="/figures/csv-reports"