[#140657435] [#40] [Refactor] Add admin act as a company bar

assets/css/custom.css

@@ -13,6 +13,10 @@
   color:black;
 }
 
+.item-list {
+  word-wrap: break-word;
+  width: 100%;
+}
 
 .ui.card.register{
 background-color: #EEEEEE;
@@ -155,6 +159,8 @@ card .formRegis{
 
 .ui.pointing.secondary.menu{
   background-color: #ffffff;
+  margin-bottom: 10px;
+  margin-top: 0px;
 }
 
 .extra.extra-company h3{
@@ -237,3 +243,13 @@ card .formRegis{
   margin-left: 10%;
   margin-right: 10%;
 }
+
+
+.admin-bar{
+  margin: 0;
+  padding: 0 10px 0 0;
+  width: 100%;
+  text-align: right;
+  background-color: #304D8A;
+  color: white;
+}
\ No newline at end of file

assets/js/components/TopMenu.jsx

@@ -7,33 +7,55 @@ import Storage from '../lib/Storage';
 
 export default class TopMenu extends React.Component {
 
+  static propTypes = {
+    user: React.PropTypes.object.isRequired,
+  };
+
   constructor(props) {
     super(props);
     /* istanbul ignore next */
     this.state = { activeItem: 'home' };
     this.logout = this.logout.bind(this);
+    this.logoutCompany = this.logoutCompany.bind(this);
   }
 
   handleItemClick = (e, { name }) => this.setState({ activeItem: name });
 
-  logout = () => {
+  logout = (e) => {
+    e.preventDefault();
     Server.get('/api-auth/logout/?next=/', true).then(() => {
       Storage.clear();
       browserHistory.push('/login');
     });
   };
 
+  logoutCompany = /* istanbul ignore next */ (e) => {
+    e.preventDefault();
+    const userData = Storage.get('user-data');
+    userData.company = null;
+    Storage.set('user-data', userData);
+    window.location.replace('/home');
+  };
+
   render() {
     const { activeItem } = this.state;
     return (
-      <Menu color="blue" pointing secondary>
-        <Image as="a" size="small" src="/assets/img/logo.png" href="/" />
-        <Menu.Menu position="right">
-          <Menu.Item as={Link} to="/home" name="home" active={activeItem === 'home'} onClick={this.handleItemClick} />
-          <Menu.Item as={Link} to="/profile" name="profil" active={activeItem === 'profil'} onClick={this.handleItemClick} />
-          <Menu.Item as={Link} onClick={this.logout} name="logout" />
-        </Menu.Menu>
-      </Menu>
+      <div>
+        { this.props.user.data.is_staff && this.props.user.data.company && (
+          <div className="admin-bar">
+            Anda login sebagai perusahaan: {this.props.user.data.company.name} (#{this.props.user.data.company.id}).
+            Untuk keluar, silahkan klik <a href="#" onClick={this.logoutCompany}> link ini</a>
+          </div>
+        )}
+        <Menu color="blue" pointing secondary>
+          <Image as="a" size="small" src="/assets/img/logo.png" href="/" />
+          <Menu.Menu position="right">
+            <Menu.Item as={Link} to="/home" name="home" active={activeItem === 'home'} onClick={this.handleItemClick} />
+            <Menu.Item as={Link} to="/profile" name="profil" active={activeItem === 'profil'} onClick={this.handleItemClick} />
+            <Menu.Item as={Link} onClick={this.logout} name="logout" />
+          </Menu.Menu>
+        </Menu>
+      </div>
     );
   }
 }