[MNOE-978] Refactor Org tables into one code

src/app/components/mnoe-api/admin/organizations.svc.coffee

@@ -29,8 +29,9 @@
     params["offset"] = offset
     return MnoeAdminApiSvc.all("organizations").getList(params)
 
-  @search = (terms) ->
-    MnoeAdminApiSvc.all("organizations").getList({terms: terms})
+  @search = (terms, params = {}) ->
+    params = angular.extend({}, params, {terms: terms})
+    MnoeAdminApiSvc.all("organizations").getList(params)
 
   @inArrears = () ->
     MnoeAdminApiSvc.all('organizations').all('in_arrears').getList()

src/app/components/mnoe-organizations-list/mnoe-organizations-list.coffee

@@ -1,18 +1,22 @@
 #
-# Mnoe organizations List
+# Mnoe Organizations List
+# The organization-local-list is used for organizations that already exist on the frontend, e.g. when uploading a CSV file.
+# Whereas organizations-list is used when organizations must be fetched.
 #
 @App.directive('mnoeOrganizationsList', ($filter, $translate, MnoeOrganizations, MnoeAdminConfig, MnoeCurrentUser) ->
   restrict: 'E'
   scope: {
-    list: '='
+    fields: '<',
+    searchParams: '<',
+    bindings: '<'
   },
   templateUrl: 'app/components/mnoe-organizations-list/mnoe-organizations-list.html',
   link: (scope, elem) ->
 
     # Variables initialization
     scope.organizations =
       search: ''
-      sortAttr: 'created_at'
+      sortAttr: 'created_at.desc'
       nbItems: 10
       page: 1
       pageChangedCb: (nbItems, page) ->
@@ -46,7 +50,7 @@
                 mnoe_admin_panel.dashboard.organization.demo_account_state</em>
               </a>
             """,
-            scope: {organization: organization}}
+            scope: { organization: organization }}
 
           # organization creation date
           { header: locale["mnoe_admin_panel.dashboard.organization.widget.list.table.creation"],
@@ -57,7 +61,7 @@
           render: (organization) ->
             template:
               "<span>{{::organization.created_at | date: 'dd/MM/yyyy'}}</span>"
-            scope: {organization: organization}}
+            scope: { organization: organization }}
         ]
 
         # Add Finance columns if enabled
@@ -71,6 +75,8 @@
           # Currency
           { header: locale['mnoe_admin_panel.dashboard.organization.widget.list.table.currency'],
           attr:'financial_metrics.currency', doNotSort: true, style: width: '110px'}])
+
+        scope.organizations.fields = scope.organizations.fields.concat(scope.fields) if scope.fields
       )
 
     # Smart table callback
@@ -83,13 +89,14 @@
       fetchOrganizations(scope.organizations.nbItems, 0, scope.organizations.sortAttr)
 
     # Fetch organisations
-    fetchOrganizations = (limit, offset, sort = 'created_at') ->
+    fetchOrganizations = (limit, offset, sort = 'created_at.desc') ->
       scope.organizations.loading = true
       MnoeCurrentUser.getUser().then( ->
         params = if MnoeAdminConfig.isAccountManagerEnabled()
           {sub_tenant_id: MnoeCurrentUser.user.mnoe_sub_tenant_id, account_manager_id: MnoeCurrentUser.user.id}
         else
           {}
+        params = angular.extend({}, params, scope.searchParams) if scope.searchParams
         return MnoeOrganizations.list(limit, offset, sort, params).then(
           (response) ->
             scope.organizations.totalItems = response.headers('x-total-count')
@@ -123,12 +130,18 @@
       delete scope.organizations.switchLinkTitle
       search = scope.organizations.search.toLowerCase()
       terms = {'name.like': "%#{search}%"}
-      MnoeOrganizations.search(terms).then(
+      # Custom search parameters are given to the directive. E.g. when we only want to search orgs of a particular user.
+      params = scope.searchParams || {}
+      MnoeOrganizations.search(terms, params).then(
         (response) ->
           scope.organizations.totalItems = response.headers('x-total-count')
           scope.organizations.list = $filter('orderBy')(response.data, 'name')
       ).finally(-> scope.organizations.loading = false)
 
+    init = () ->
+      scope.organizations.loading = true
+      setAllOrganizationsList()
+
     # Initial call
-    displayCurrentState()
+    init()
 )

src/app/components/mnoe-organizations-list/mnoe-organizations-list.html

@@ -9,7 +9,8 @@
     row-collection="organizations.list"
     is-loading="organizations.loading"
     fields="organizations.fields"
-    pipe="pipe(tableState)">
+    pipe="pipe(tableState)"
+    bindings="bindings">
     </mno-sortable-table>
   </mno-widget-body>
   <mno-widget-footer ng-show="organizations.list && !searchMode">

src/app/components/mnoe-organizations-list/mnoe-organizations-list.less

@@ -0,0 +1,6 @@
+mnoe-organizations-list {
+  .role_edit_link {
+    display: inline;
+    cursor: pointer;
+  }
+}

src/app/components/mnoe-organizations-local-list/mnoe-organizations-local-list.coffee

@@ -1,19 +1,16 @@
 #
-# Mnoe Organizations List
-# The organization-local-list is on the user's info page and shows the organizations attached to a user, while
-# the organizations-list is on the homepage and shows all the users.
-
-@App.directive('mnoeOrganizationsLocalList', ($translate, $filter, $log, toastr, UserRoles, MnoeUsers) ->
+# Mnoe Organizations Local List
+# The organization-local-list is used for organizations that already exist on the frontend, e.g. when uploading a CSV file.
+# Whereas organizations-list is used when organizations must be fetched.
+#
+@App.directive('mnoeOrganizationsLocalList', ($filter, $log) ->
   restrict: 'E'
   scope: {
     list: '=',
-    user: '='
   },
   templateUrl: 'app/components/mnoe-organizations-local-list/mnoe-organizations-local-list.html',
   link: (scope, elem, attrs) ->
-    # Only display some info in the context of an user
-    scope.userContext = attrs.user?
-    scope.userRoles = UserRoles
+
     # Variables initialization
     scope.organizations =
       displayList: []
@@ -69,35 +66,6 @@
       else
         setSearchOrganizationsList()
 
-    scope.editRole = (organization) ->
-      # Keep track of old roles when editing organization's roles.
-      organization.beforeEditRole = organization.role
-      organization.editMode = true
-
-    scope.exitEditRole = (organization) ->
-      organization.role = organization.beforeEditRole
-      organization.editMode = false
-
-    scope.updateUserRole = (organization, user) ->
-      user.isUpdatingRole = true
-      # The role must be set on the user for #updateUserRole.
-      user.role = organization.role
-      MnoeUsers.updateUserRole(organization, user).then(
-        () ->
-          $translate(UserRoles.keyFromRole(user.role)).then((tls) ->
-            toastr.success('mnoe_admin_panel.dashboard.users.widget.local_list.role_update_success', {extraData: {user: "#{user.email}", role: tls}})
-          )
-        (error) ->
-          organization.role = organization.beforeEditRole
-          toastr.error('mnoe_admin_panel.dashboard.users.widget.local_list.role_update_error')
-          MnoErrorsHandler.processServerError(error)
-      ).finally( () ->
-        # So that the organization/user reverts back to non-editing view.
-        organization.beforeEditRole = null
-        organization.isUpdatingRole = false
-        organization.editMode = false
-      )
-
     scope.$watch('list', (newVal) ->
       if newVal
         displayNormalState()

src/app/components/mnoe-organizations-local-list/mnoe-organizations-local-list.html

@@ -10,7 +10,6 @@
           <th translate>mnoe_admin_panel.dashboard.organization.widget.local_list.search_organizations.table.name</th>
           <th translate>mnoe_admin_panel.dashboard.organization.uid</th>
           <th style="width: 100px;" translate>mnoe_admin_panel.dashboard.organization.widget.local_list.search_organizations.table.created_at</th>
-          <th style="width: 130px;" ng-if="userContext" translate>mnoe_admin_panel.dashboard.organization.widget.local_list.search_organizations.table.role</th>
         </tr>
       </thead>
       <tbody>
@@ -24,15 +23,6 @@
           </td>
           <td>{{organization.uid}}</td>
           <td>{{organization.created_at | date: 'dd/MM/yyyy'}}</td>
-          <td ng-if="userContext">
-            <select ng-show="organization.editMode" ng-model="organization.role" ng-options="role.value as role.translatedLabel for role in userRoles.availableRolesForOptions"></select>
-            <span ng-show="organization.isUpdatingRole"><i class="fa fa-spinner fa-pulse fa-fw"></i></span>
-            <span ng-click="editRole(organization)" ng-hide="organization.editMode">{{ userRoles.keyFromRole(organization.role) | translate }}</span>
-            <a class="role_edit_link" ng-hide="organization.editMode" ng-click="editRole(organization)"><i class="fa fa-pencil"></i></a>
-            <a class="role_edit_link" ng-show="organization.editMode" ng-click="updateUserRole(organization, user)"><i class="fa fa-check"></i></a>
-            <a class="role_edit_link" ng-show="organization.editMode" ng-click="exitEditRole(organization)"><i class="fa fa-times"></i></a>
-            <span ng-show="vm.isSaving"><i class="fa fa-spinner fa-pulse fa-fw"></i></span>
-          </td>
         </tr>
       </tbody>
     </table>

src/app/components/mnoe-users-list/mno-users-list.coffee

@@ -11,7 +11,7 @@
     # Variables initialization
     scope.users =
       search: ''
-      sortAttr: 'created_at'
+      sortAttr: 'created_at.desc'
       nbItems: 10
       page: 1
       pageChangedCb: (nbItems, page) ->
@@ -79,7 +79,7 @@
       fetchUsers(scope.users.nbItems, 0, scope.users.sortAttr)
 
     # Fetch users
-    fetchUsers = (limit, offset, sort = 'surname') ->
+    fetchUsers = (limit, offset, sort = 'created_at.desc') ->
       scope.users.loading = true
       MnoeCurrentUser.getUser().then( ->
         params = if MnoeAdminConfig.isAccountManagerEnabled()

src/app/views/user/user.controller.coffee

@@ -1,6 +1,8 @@
-@App.controller 'UserController', ($stateParams, MnoeUsers) ->
+@App.controller 'UserController', ($stateParams, MnoeUsers, UserRoles, $translate, toastr, MnoErrorsHandler) ->
   'ngInject'
   vm = this
+  vm.user = {}
+  vm.orgSearchParams = { 'where[users.id]': $stateParams.userId }
 
   # Get the user
   MnoeUsers.get($stateParams.userId).then(
@@ -10,5 +12,73 @@
       phone = vm.user.phone
       if phone && countryCode
         vm.user.phone = '+' + countryCode + phone
+
+      # These bindings are so that we can add additional fields with functionality to the organization table.
+      vm.orgTableBindings = {
+        userRoles: UserRoles
+        user: vm.user
+
+        editRole: (organization) ->
+          # Keep track of old roles when editing organization's roles.
+          organization.beforeEditRole = organization.role
+          organization.editMode = true
+
+        exitEditRole: (organization) ->
+          organization.role = organization.beforeEditRole
+          organization.editMode = false
+
+        updateUserRole: (organization, user) ->
+          user.isUpdatingRole = true
+          # The role must be set on the user for #updateUserRole.
+          user.role = organization.role
+
+          MnoeUsers.updateUserRole(organization, user).then(
+            () ->
+              $translate(UserRoles.keyFromRole(user.role)).then((tls) ->
+                toastr.success('mnoe_admin_panel.dashboard.users.widget.local_list.role_update_success', {extraData: {user: "#{user.email}", role: tls}})
+              )
+            (error) ->
+              organization.role = organization.beforeEditRole
+              toastr.error('mnoe_admin_panel.dashboard.users.widget.local_list.role_update_error')
+              MnoErrorsHandler.processServerError(error)
+            ).finally(() ->
+              # So that the organization/user reverts back to non-editing view.
+              organization.beforeEditRole = null
+              organization.isUpdatingRole = false
+              organization.editMode = false
+            )
+        }
   )
+
+  $translate('mnoe_admin_panel.dashboard.organization.widget.local_list.search_organizations.table.role')
+    .then((translation) ->
+      vm.orgTableFields= [
+        {
+          header: translation
+          style: {
+            width: '130px'
+          }
+          skip_natural: false
+          render: (organization, bindings) ->
+            template: "
+              <select ng-show='organization.editMode' ng-model='organization.role' ng-options='role.value as role.translatedLabel for role in userRoles.availableRolesForOptions'></select>
+              <span ng-show='organization.isUpdatingRole'><i class='fa fa-spinner fa-pulse fa-fw'></i></span>
+              <span ng-click='editRole(organization)' ng-hide='organization.editMode'>{{ userRoles.keyFromRole(organization.role) | translate }}</span>
+              <a class='role_edit_link' ng-hide='organization.editMode' ng-click='editRole(organization)'><i class='fa fa-pencil'></i></a>
+              <a class='role_edit_link' ng-show='organization.editMode' ng-click='updateUserRole(organization, user)'><i class='fa fa-check'></i></a>
+              <a class='role_edit_link' ng-show='organization.editMode' ng-click='exitEditRole(organization)'><i class='fa fa-times'></i></a>
+              <span ng-show='vm.isSaving'><i class='fa fa-spinner fa-pulse fa-fw'></i></span>
+            "
+            scope: {
+              organization: organization
+              user: bindings.user,
+              editRole: bindings.editRole
+              updateUserRole: bindings.updateUserRole
+              exitEditRole: bindings.exitEditRole
+              userRoles: bindings.userRoles
+            }
+        }
+      ]
+    )
+
   return

src/app/views/user/user.html

@@ -83,7 +83,11 @@ <h3 class="panel-title">{{'mnoe_admin_panel.dashboard.user.geo_information_title
     <div class="bs-row">
       <mnoe-impersonate-button wrapper-class-names="col-sm-4 col-sm-offset-4" btn-class-names="btn btn-primary center-block" user="vm.user"></mnoe-impersonate-button>
       <div class="col-sm-12 top-buffer-2">
-        <mnoe-organizations-local-list list="vm.user.organizations" user="vm.user" view="all"></mnoe-organizations-local-list>
+        <mnoe-organizations-list
+          fields="vm.orgTableFields"
+          search-params="vm.orgSearchParams"
+          bindings="vm.orgTableBindings"
+        </mnoe-organizations-list>
       </div>
     </div>
   </div>