mno-enterprise-frontend 2.0.0

data/app/assets/templates/mno_enterprise/dashboard/organization/invoices.html

@@ -0,0 +1,27 @@
+<div class="table-cell">
+  <div class="row th-row hidden-xs">
+    <div class="cell col-sm-3">Period</div>
+    <div class="cell col-sm-3">Amount</div>
+    <div class="cell col-sm-3">Paid</div>
+    <div class="cell col-sm-3 text-center">Download</div>
+  </div>
+
+  <div class="row td-row" ng-repeat="invoice in invoices">
+    <div class="cell col-sm-3">
+      <span class="cell-label visible-xs-inline">Period: <br/></span>
+      {{ invoice.period }}
+    </div>
+
+    <div class="cell col-sm-3">
+      <span class="cell-label visible-xs-inline">Amount: </span>{{ invoice.amount.value | currency: invoice.amount.options.symbol }} ({{ invoice.amount.options.iso_code }})</div>
+
+    <div class="cell col-sm-3"><span class="cell-label visible-xs-inline">Paid: </span>{{ {true: 'Yes', false:'No'}[invoice.paid] }}</div>
+
+    <div class="cell col-sm-3 text-center">
+      <a ng-href="{{invoice.link}}" target="_blank" class="btn btn-sm">
+        <i class="fa fa-cloud-download"></i>
+        <span class="cell-label visible-xs-inline"><br/>Download</span>
+      </a>
+    </div>
+  </div>
+</div>

data/app/assets/templates/mno_enterprise/dashboard/organization/members.html

@@ -0,0 +1,288 @@
+<!-- 
+  List of Members
+-->
+<div class="row" ng-show="isInviteShown()">
+  <button class="btn btn-sm btn-warning" ng-click="inviteMembers()">
+    <i class="fa fa-plus"></i>
+    <i class="fa fa-user"></i>
+    Invite Users
+  </button>
+</div>
+<div class="clearfix"></div>
+<div class="spacer1"></div>
+
+<div class="table-cell">
+  <div class="row th-row hidden-xs">
+    <div class="cell col-sm-2">Name</div>
+    <div class="cell col-sm-2">Surname</div>
+    <div class="cell col-sm-4">Email</div>
+    <div class="cell col-sm-2">Role</div>
+  </div>
+
+  <div class="row td-row" ng-repeat="member in members">
+    <div class="cell col-sm-2">
+      <span class="cell-label visible-xs-inline">Name:</span>
+      {{ member.name }}
+    </div>
+    
+    <div class="cell col-sm-2">
+      <span class="cell-label visible-xs-inline">Surname: </span>
+      {{ member.surname }}
+    </div>
+    
+    <div class="cell col-sm-4">
+      <span class="cell-label visible-xs-inline">Email: <br/></span>
+      {{ member.email }}
+    </div>
+    
+    <div class="cell col-sm-2">
+      <span class="cell-label visible-xs-inline">Role:</span>
+      {{ memberRoleLabel(member) }}
+    </div>
+    
+    <div class="cell col-sm-2">
+      <a ng-click="editMember(member)" class="btn btn-sm edit-member-button-star-ref" ng-show="isEditShown(member)">
+        <i class="fa fa-pencil-square-o"></i>
+        <span class="cell-label visible-xs-inline"><br/>Edit</span>
+      </a>
+      <a ng-click="removeMember(member)" class="btn btn-sm btn-link remove-member-button-star-ref" ng-show="isRemoveShown(member)">
+        <i class="fa fa-remove"></i>
+        <span class="cell-label visible-xs-inline"><br/>Remove</span>
+      </a>
+    </div>
+  </div>
+</div>
+
+
+<!-- 
+  Member Invite modal
+-->
+<script type="text/ng-template" id="dashboard/organization/members/invite-modal.html">
+  <!-- Modal Header -->
+  <div class="modal-header">
+    <div class="close" type="button" ng-click="inviteModal.close()" >×</div>
+    <h3 ng-bind-html="inviteModal.title()"></h3>
+  </div>
+
+  <!-- Modal Body -->
+  <div class="modal-body" ng-switch on="inviteModal.step">
+    
+    <!-- Enter Emails step -->
+    <div ng-switch-when="enterEmails" class="text-center">
+
+      <div class="alert alert-error" ng-show="inviteModal.invalidEmails.length > 0">
+        <ng-pluralize count="inviteModal.invalidEmails.length"
+                      when="{'one': 'The following email address is invalid: ',
+                       'other': 'The following email addresses are invalid: '}">
+        </ng-pluralize> '{{inviteModal.invalidEmails.join("', '")}}'
+      </div>
+
+      <div class="row">
+        <div class="col-sm-12">
+            <p>Enter the email addresses of the people you want to invite in your company</p>
+            <p>
+              One address per line, e.g.:<br>
+              user1@company.com<br>
+              user2@company.com
+            </p>
+          
+          </div>
+      </div>
+    
+      <div class="row">
+        <div class="col-sm-6 col-sm-offset-3">
+          <textarea class="form-control" rows="3" style="color:black;background-color:white;" ng-model="inviteModal.userEmails" required></textarea>
+        </div>
+      </div>
+      
+      <div class="spacer1"></div>
+      
+      <div class="row">
+        <div class="col-sm-12">
+          <p>Please note that for security reasons unaccepted invites will automatically expire after 3 days.</p>
+        </div>
+      </div>
+      
+    </div>
+    
+    <!-- Define Roles step -->
+    <div ng-switch-when="defineRoles">
+      <div class="row">
+        <div class="col-sm-10 col-sm-offset-1">
+          
+          <div class="table-cell inverse">
+            <div class="row th-row hidden-xs">
+              <div class="cell col-sm-4">Email</div>
+              <div class="cell col-sm-3">Role</div>
+              <div class="cell col-sm-3" ng-show="inviteModal.isTeamListShown()">Team</div>
+            </div>
+
+            <div class="row td-row" ng-repeat="member in inviteModal.members">
+              <div class="cell col-sm-4">
+                <span class="cell-label visible-xs-inline">Email: <br/></span>
+                {{ member.email }}
+              </div>
+    
+              <div class="cell col-sm-3">
+                <span class="cell-label visible-xs-inline">Role:</span>
+                <select ng-model="member.role" ng-options="role for role in inviteModal.roleList" class="form-control"></select>
+              </div>
+              <div class="cell col-sm-3" ng-show="inviteModal.isTeamListShown()">
+                <span class="cell-label visible-xs-inline">Team:</span>
+                <select ng-model="member.team_id" ng-options="team.id as team.name for team in inviteModal.teamList" class="form-control">
+                  <option value='' selected>-- Select Team --</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        
+        </div>
+      </div>
+      
+    </div>
+    
+    <!-- End: modal-body -->
+  </div>
+  
+  <!-- Modal Footer -->
+  <div class="modal-footer">
+    <div class="row">
+      <div class="col-md-12">
+        <button class="btn btn-shaded" ng-click="inviteModal.close()">
+          Cancel
+        </button>
+        <button class="btn btn-warning" ng-disabled="!inviteModal.isNextEnabled()" ng-click="inviteModal.next()">
+          <i ng-show="inviteModal.isLoading" class="fa fa-spinner fa-pulse fa-fw"></i>
+          {{inviteModal.labelForAction()}}
+        </button>
+      </div>
+    </div>
+  </div>
+</script>
+
+<!-- 
+  Member edition modal
+-->
+<div>
+  <script type="text/ng-template" id="dashboard/organization/members/edition-modal.html">
+    <!--Modal Header -->
+    <div class="modal-header">
+      <div class="close" type="button" ng-click="editionModal.close()" >×</div>
+      <h4 ng-bind-html="editionModal.title()"></h4>
+    </div>
+
+    <!--Modal Body -->
+    <div class="modal-body">
+      <div class="alert alert-error" ng-show="editionModal.errors">
+        <button class="close" ng-click="editionModal.errors=''">×</button>
+        <ul>
+          <li ng-repeat="error in editionModal.errors">{{error}}</li>
+        </ul>
+      </div>
+      
+      <div class="row role-management">
+      
+        <div class="col-sm-12">
+          
+          <div ng-switch on="editionModal.selectedRole">
+            <div ng-switch-when="Member">
+              <i class="fa fa-cloud fa-4x"></i>
+              <br/><br/>
+              <p>A member can see other members and access the company apps</p>
+            </div>
+            <div ng-switch-when="Power User">
+              <i class="fa fa-cloud fa-4x"></i>
+              <i class="fa fa-power-off fa-4x"></i>
+              <br/><br/>
+              <p>A Power User can see other members and start idle company apps (on per hour plan)</p>
+            </div>
+            <div ng-switch-when="Admin">
+              <i class="fa fa-cloud fa-4x"></i>
+              <i class="fa fa-power-off fa-4x"></i>
+              <i class="fa fa-users fa-4x"></i>
+              <br/><br/>
+              <p>An Admin can manage other members (except Super Admin users) and manage the company apps</p>
+            </div>
+            <div ng-switch-when="Super Admin">
+              <i class="fa fa-cloud fa-4x"></i>
+              <i class="fa fa-power-off fa-4x"></i>
+              <i class="fa fa-users fa-4x"></i>
+              <i class="fa fa-cc-mastercard fa-4x"></i>
+              <br/><br/>
+              <p>A Super Admin has all power within the company including access to billing management</p>
+            </div>
+          </div>
+          
+          <div class="spacer1"></div>
+          
+          <div class="btn-group">
+            <button type="button" class="btn btn-default" ng-click="editionModal.select(role)" ng-class="editionModal.classForRole(role)" ng-repeat="role in editionModal.config.roles">
+              {{role}}
+            </button>
+          </div>
+          
+          <!-- End: col -->
+        </div>
+        
+        <!-- End: Row -->
+      </div>
+      
+      
+      <!-- End: Modal Body -->
+    </div>
+
+    <!--Modal Footer -->
+    <div class="modal-footer">
+      <div class="row">
+        <div class="col-sm-12">
+          <button class="btn btn-lg btn-shaded" ng-click="editionModal.close()" ng-show="!editionModal.isLoading">Cancel</button>
+          <button class="btn btn-lg btn-warning" ng-click="editionModal.change()" ng-show="!editionModal.isLoading" ng-disabled="editionModal.isChangeDisabled()">Change</button>
+          <img ng-src="{{assetPath['mno_enterprise/loader-32x32-bg-main.gif']}}" ng-show="editionModal.isLoading" alt="Loading">
+        </div>
+        
+      </div>
+      
+    </div>
+  </script>
+</div>
+
+
+
+<!-- 
+  Member Removal Modal
+-->
+<script type="text/ng-template" id="dashboard/organization/members/removal-modal.html">
+  <div class="modal-header">
+    <div class="close" type="button" ng-click="deletionModal.close()" >×</div>
+    <h3>Confirm action</h3>
+  </div>
+
+  <div class="modal-body">
+    <div class="row">
+      <div class="col-sm-12">
+        <div class="alert alert-error" ng-show="deletionModal.errors">
+          <button class="close" ng-click="deletionModal.errors=''">×</button>
+          <ul>
+            <li ng-repeat="error in deletionModal.errors">{{error}}</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="col-sm-12">
+        <p class="align-center" ng-bind-html="deletionModal.confirmationText()"></p>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-footer">
+    <div class="row">
+      <div class="col-sm-12">
+        <button class="btn btn-lg btn-info" ng-click="deletionModal.close()" ng-show="!deletionModal.isLoading">Cancel</button>
+        <button class="btn btn-lg btn-danger" ng-click="deletionModal.remove()" ng-show="!deletionModal.isLoading">Remove</button>
+        <img ng-src="{{assetPath['mno_enterprise/loader-32x32-bg-main.gif']}}" ng-show="deletionModal.isLoading" alt="Loading">
+      </div>
+    </div>
+  </div>
+</script>

data/app/assets/templates/mno_enterprise/dashboard/organization/settings.html

@@ -0,0 +1,55 @@
+<!-- 
+  Error messages 
+-->
+<div class="row">
+  <div class="alert alert-error" ng-show="errors">
+    <button class="close" ng-click="errors=''">×</button>
+    <ul>
+      <li ng-repeat="error in errors">{{error}}</li>
+    </ul>
+  </div>
+</div>
+
+
+<div class="row">
+  <form name="forms.settings" role="form" novalidate class="form-horizontal">
+    <div class="form-group">
+      <label class="col-sm-3 control-label">Company name</label>
+      <div class="col-sm-6">
+        <input type="text" class="form-control" ng-model="model.name" required/>
+      </div>
+    </div>
+    
+    <div class="form-group">
+      <label class="col-sm-3 control-label">Connec!™ Data Sharing</label>
+      <div class="col-sm-6">
+        <div class="btn-group btn-group-lg">
+          <a class="btn btn-default" ng-click="connecBtnClickOn('enable')" ng-class="connecBtnClassFor('enable')">
+            On
+          </a>
+          <a class="btn btn-default" ng-click="connecBtnClickOn('disable')" ng-class="connecBtnClassFor('disable')">
+            Off
+          </a>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+
+<!--
+  Action buttons
+-->
+<div class="row text-right" ng-show="isLoading">
+  <img ng-src="{{assetPath['mno_enterprise/loader-32x32-bg-inverse.gif']}}" alt="Loading"/>
+</div>
+<div class="row text-right" ng-show="!isLoading">
+  <div class="col-md-4 col-md-offset-8">
+    <button ng-click="cancel()" class="btn" ng-show="isCancelShown()">
+      Cancel 
+    </button>
+    
+    <button ng-click="save()" href="" class="btn btn-warning" ng-disabled="!isSaveEnabled()">
+      Save
+    </button>
+  </div>
+</div>

data/app/assets/templates/mno_enterprise/dashboard/teams/index.html

@@ -0,0 +1,175 @@
+<div class="row dashboard-teams">
+  <!-- Loader -->
+  <div class="col-md-12 text-center" ng-show="isLoading">
+    <img ng-src="{{assetPath['mno_enterprise/loader-32x32-bg-main.gif']}}" alt="Loading"/>
+  </div>
+  
+  <!-- No teams view -->
+  <div ng-show="!isLoading && !hasTeams()">
+    <div class="row text-bg-inverse">
+      <div class="col-sm-12 text-center">
+        <p>
+          You do not have any teams! Teams are a great way of controlling who has access to applications within your company.
+        </p>
+        
+        <div class="spacer1"></div>
+        
+        <button type="button" class="btn btn-lg btn-grey btn-grey-bordered" ng-click="matrix.addTeam()">
+          <i class="fa fa-plus" style="margin-bottom:-2px;"></i>
+          &nbsp;
+          Add a Team Now!
+        </button>
+      </div>
+    </div>
+  </div>
+  
+  
+  <!-- Regular view -->
+  <div ng-show="!isLoading && hasTeams()">
+    <div class="row">
+      <div class="col-sm-12">
+        <span class="text-left text-muted">
+          <small><em>
+            Admins and Super Admins always have access to all apps. Members unallocated to any team will have access to all apps by default.
+          </em></small>
+        </span>
+      </div>
+    </div>
+    
+    
+    <!-------------------------------------->
+    <!--        Permissions matrix        -->
+    <!-------------------------------------->
+    <div class="permission-matrix-wrapper hidden-xs scrollbar-lightgrey">
+      <div class="row" ng-show="matrix.errors">
+        <div class="alert alert-error">
+          <button class="close" ng-click="matrix.errors=''">×</button>
+          <ul>
+            <li ng-repeat="error in matrix.errors">{{error}}</li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="row">
+        
+        <!-- Matrix: left part (team & 'all' checkbox) -->
+        <div class="col-xs-4 table-left">
+          <table class="permission-matrix">
+            <thead>
+              <tr>
+                <th class="td-first">
+                  <button type="button" class="btn btn-grey btn-grey-bordered" ng-click="matrix.addTeam()">
+                    <i class="fa fa-plus" style="margin-bottom:-2px;"></i>
+                    &nbsp;
+                    add team
+                  </button>
+                </th>
+          
+                <th style="width:6%;">All</th>
+              </tr>
+            </thead>
+        
+            <tbody>
+              <tr ng-repeat="team in teams">
+                
+                <td class="td-first team-name">
+                  <div class="editable-instructions">
+                    <span editable-text="team.name" onaftersave="matrix.updateTeamName(team)" buttons="no">{{ team.name }}</span>
+                  </div>
+                  
+                  
+                  <span class="team-remove">
+                      <button class="btn btn-grey" ng-click="matrix.removeTeam(team)">
+                        <i class="fa fa-remove hidden-xs"></i>
+                      </button>
+                  </span>
+                </td>
+        
+                <td>
+                  <input type="checkbox" ng-checked="matrix.hasAccess(team,'all')" ng-click="matrix.toggleAccess(team,'all')">
+                </td>
+                
+              </tr>
+          
+              <tr class="btn-group-row" ng-show="matrix.isChanged()">
+                <td class="text-center" colspan="2">
+                  <div ng-show="matrix.isChanged() && !matrix.isLoading">
+                    <button type="button" class="btn btn-grey btn-grey-bordered" ng-click="matrix.cancel()">Cancel</button>
+                    <button type="button" class="btn btn-warning" ng-click="matrix.save()">Save</button>
+                  </div>
+                  <div ng-show="matrix.isLoading">
+                    <img ng-src="{{assetPath['mno_enterprise/loader-32x32-bg-main.gif']}}" alt="Loading"/>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+        
+          </table>
+        </div>
+        
+        
+        <!-- Matrix: right part (detailed permissions) -->
+        <div class="col-xs-8 table-right">
+          <div class="text-center" ng-show="!hasApps()">
+            <div class="spacer2"></div>
+            <p>It looks like you do not have any application at the moment.</p>
+            <a type="button" class="btn btn-lg btn-grey btn-grey-bordered" href="#/marketplace">
+              <i class="fa fa-plus" style="margin-bottom:-2px;"></i>
+              &nbsp;
+              Add an App Now!
+            </a>
+          </div>
+          
+          <table class="permission-matrix" ng-show="hasApps()">
+            <thead>
+              <tr>
+                <th ng-repeat="appInstance in appInstances">
+                  <div class="th-content">
+                    <img class="media-object" ng-src="{{appInstance.logo}}" ng-alt="{{appInstance.name}}">
+                    {{ appInstance.name | truncate: 13}}
+                  </div>
+                </th>
+                <th></th>
+              </tr>
+            </thead>
+    
+            <tbody>
+              <tr ng-repeat="team in teams">
+                <td ng-repeat="appInstance in appInstances">
+                  <input type="checkbox" ng-checked="matrix.hasAccess(team,appInstance)" ng-click="matrix.toggleAccess(team,appInstance)">
+                </td>
+                <td></td>
+              </tr>
+            
+              <tr class="btn-group-row">
+                <td ng-repeat="appInstance in appInstances"></td>
+                <td></td>
+              </tr>
+            </tbody>
+      
+            <!-- End: Permissions matrix -->
+          </table>
+        </div>
+        
+        <!-- End: row -->
+      </div>
+      
+      <div class="clearfix"></div>
+      <!-- End: permission matrix wrapper -->
+    </div>
+    
+    
+    
+    <!-------------------------------------->
+    <!--     List of Teams (accordion)    -->
+    <!-------------------------------------->
+    <div dashboard-organization-team-list></div>
+    
+    
+    <!-- End: regular view -->
+  </div>
+  
+  
+  
+  <div class="spacer2"></div>
+</div>