Refactor route building for list based controllers.

This also fixes the dashboard empty state page.
getredash · Jan 31, 2019 · 7c3fcd3 · 7c3fcd3
1 parent caa52c6
commit 7c3fcd3
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 174 deletions.
diff --git a/client/app/lib/list-ctrl.js b/client/app/lib/list-ctrl.js
@@ -1,9 +1,37 @@
-import { bind } from 'lodash';
+import { bind, each } from 'lodash';
 import $ from 'jquery';
 import { LivePaginator } from '@/lib/pagination';
+import { Query } from '@/services/query';
+import { Dashboard } from '@/services/dashboard';
+import { User } from '@/services/user';
+
+export function buildListRoutes(name, routes, template) {
+  const listRoutes = {};
+  each(routes, (route) => {
+    listRoutes[route.path] = {
+      template,
+      reloadOnSearch: false,
+      title: route.title,
+      resolve: {
+        currentPage: () => route.page,
+        resource: () => {
+          // services that are using the ListCtrl class
+          const listServices = {
+            query: Query,
+            dashboard: Dashboard,
+            user: User,
+          };
+          return listServices[name].query.bind(listServices[name]);
+        },
+      },
+    };
+  });
+  return listRoutes;
+}
 
-export default class ListCtrl {
-  constructor($scope, $location, currentUser, clientConfig, defaultOrder = '-created_at') {
+export class ListCtrl {
+  constructor($scope, $location, $route, currentUser, clientConfig, defaultOrder = '-created_at') {
+    this.title = $route.current.title; // will make it available as $ctrl.title
     this.searchTerm = $location.search().q || '';
 
     this.page = parseInt($location.search().page || 1, 10);

diff --git a/client/app/pages/dashboards/dashboard-list.html b/client/app/pages/dashboards/dashboard-list.html
@@ -1,6 +1,5 @@
 <div class="container">
-  <page-header title="'Dashboards'"></page-header>
-
+  <page-header title="$ctrl.title"></page-header>
   <div class="row">
     <div class="col-md-3 list-control-t">
       <div class="m-b-10">
@@ -37,22 +36,22 @@
     </div>
 
     <div ng-if="$ctrl.loaded && $ctrl.showEmptyState" class="col-md-9 list-content">
-      <div ng-if="($ctrl.currentPage == 'all') && ($ctrl.searchText.length == 0 || $ctrl.searchText === undefined)">
-        <empty-state
-          icon="'zmdi zmdi-view-quilt'"
-          description="'See the big picture'"
-          illustration="'dashboard'"
-          help-link="'https://help.redash.io/category/22-dashboards'"
-          show-dashboard-step="true"
-        ></empty-state>
+      <div ng-switch="$ctrl.emptyType">
+        <div ng-switch-when="default">
+          <empty-state
+            icon="'zmdi zmdi-view-quilt'"
+            description="'See the big picture'"
+            illustration="'dashboard'"
+            help-link="'https://help.redash.io/category/22-dashboards'"
+            show-dashboard-step="true"
+          ></empty-state>
+        </div>
+
+        <big-message ng-switch-when="favorites" message="'Mark dashboards as Favorite to list them here.'" icon="'fa-star'" />
+        <big-message ng-switch-when="search" message="'Sorry, we couldn\'t find anything.'" icon="'fa-search'"></big-message>
+        <no-tagged-objects-found ng-switch-when="tags" object-type="'dashboards'" tags="$ctrl.selectedTags" />
       </div>
 
-      <big-message ng-if="($ctrl.currentPage == 'favorites') && ($ctrl.searchTerm === undefined || $ctrl.searchTerm.length == 0) && $ctrl.selectedTags.size === 0"
-        message="'Mark dashboards as Favorite to list them here.'" icon="'fa-star'" />
-
-      <big-message message="'Sorry, we couldn\'t find anything.'" icon="'fa-search'" ng-if="$ctrl.searchTerm.length > 0"></big-message>
-
-      <no-tagged-objects-found object-type="'dashboards'" tags="$ctrl.selectedTags" ng-if="$ctrl.selectedTags.size > 0" />
     </div>
 
     <div ng-if="$ctrl.loaded && !$ctrl.showEmptyState" class="col-md-9 list-content">

diff --git a/client/app/pages/dashboards/dashboard-list.js b/client/app/pages/dashboards/dashboard-list.js
@@ -1,19 +1,29 @@
-import { extend } from 'lodash';
-
-import ListCtrl from '@/lib/list-ctrl';
+import { buildListRoutes, ListCtrl } from '@/lib/list-ctrl';
 import template from './dashboard-list.html';
 import './dashboard-list.css';
 
 class DashboardListCtrl extends ListCtrl {
-  constructor($scope, $location, currentUser, clientConfig, Dashboard) {
-    super($scope, $location, currentUser, clientConfig);
+  constructor($scope, $location, $route, currentUser, clientConfig, Dashboard) {
+    super($scope, $location, $route, currentUser, clientConfig);
     this.Type = Dashboard;
   }
 
   processResponse(data) {
     super.processResponse(data);
     const rows = data.results.map(d => new this.Type(d));
     this.paginator.updateRows(rows, data.count);
+
+    if (data.count === 0) {
+      if (this.isInSearchMode()) {
+        this.emptyType = 'search';
+      } else if (this.selectedTags.size > 0) {
+        this.emptyType = 'tags';
+      } else if (this.currentPage === 'favorites') {
+        this.emptyType = 'favorites';
+      } else {
+        this.emptyType = 'default';
+      }
+    }
     this.showEmptyState = data.count === 0;
   }
 }
@@ -23,42 +33,20 @@ export default function init(ngModule) {
     template,
     controller: DashboardListCtrl,
   });
-
-  const route = {
-    template: '<page-dashboard-list></page-dashboard-list>',
-    reloadOnSearch: false,
-  };
-
-  return {
-    '/dashboards': extend(
-      {
-        title: 'Dashboards',
-        resolve: {
-          currentPage: () => 'all',
-          resource(Dashboard) {
-            'ngInject';
-
-            return Dashboard.query.bind(Dashboard);
-          },
-        },
-      },
-      route,
-    ),
-    '/dashboards/favorites': extend(
-      {
-        title: 'Favorite Dashboards',
-        resolve: {
-          currentPage: () => 'favorites',
-          resource(Dashboard) {
-            'ngInject';
-
-            return Dashboard.favorites.bind(Dashboard);
-          },
-        },
-      },
-      route,
-    ),
-  };
+  const routes = [
+    {
+      page: 'all',
+      title: 'All Dashboards',
+      path: '/dashboards',
+    },
+    {
+      page: 'favorites',
+      title: 'Favorite Dashboards',
+      path: '/dashboards/favorites',
+    },
+  ];
+
+  return buildListRoutes('dashboard', routes, '<page-dashboard-list></page-dashboard-list>');
 }
 
 init.init = true;
diff --git a/client/app/pages/queries-list/index.js b/client/app/pages/queries-list/index.js
@@ -1,14 +1,13 @@
 import moment from 'moment';
-import { extend } from 'lodash';
 
-import ListCtrl from '@/lib/list-ctrl';
+import { buildListRoutes, ListCtrl } from '@/lib/list-ctrl';
 import template from './queries-list.html';
 import './queries-list.css';
 
 
 class QueriesListCtrl extends ListCtrl {
-  constructor($scope, $location, currentUser, clientConfig, Query) {
-    super($scope, $location, currentUser, clientConfig);
+  constructor($scope, $location, $route, currentUser, clientConfig, Query) {
+    super($scope, $location, $route, currentUser, clientConfig);
     this.Type = Query;
     this.showMyQueries = currentUser.hasPermission('create_query');
   }
@@ -48,71 +47,29 @@ export default function init(ngModule) {
     controller: QueriesListCtrl,
   });
 
-  const route = {
-    template: '<page-queries-list></page-queries-list>',
-    reloadOnSearch: false,
-  };
-
-  return {
-    '/queries': extend(
-      {
-        title: 'Queries',
-        resolve: {
-          currentPage: () => 'all',
-          resource(Query) {
-            'ngInject';
-
-            return Query.query.bind(Query);
-          },
-        },
-      },
-      route,
-    ),
-    '/queries/my': extend(
-      {
-        title: 'My Queries',
-        resolve: {
-          currentPage: () => 'my',
-          resource: (Query) => {
-            'ngInject';
-
-            return Query.myQueries.bind(Query);
-          },
-        },
-      },
-      route,
-    ),
-    '/queries/favorites': extend(
-      {
-        title: 'Favorite Queries',
-        resolve: {
-          currentPage: () => 'favorites',
-          resource: (Query) => {
-            'ngInject';
-
-            return Query.favorites.bind(Query);
-          },
-        },
-      },
-      route,
-    ),
-    '/queries/archive': extend(
-      {
-        title: 'Archived Queries',
-        resolve: {
-          currentPage: () => 'archive',
-          resource: (Query) => {
-            'ngInject';
-
-            return Query.archive.bind(Query);
-          },
-        },
-      },
-      route,
-    ),
-    // TODO: setup redirect?
-    // '/queries/search': _.extend(
-  };
+  const routes = [
+    {
+      page: 'all',
+      title: 'All Queries',
+      path: '/queries',
+    },
+    {
+      page: 'my',
+      title: 'My Queries',
+      path: '/queries/my',
+    },
+    {
+      page: 'favorites',
+      title: 'Favorite Queries',
+      path: '/queries/favorites',
+    },
+    {
+      page: 'archive',
+      title: 'Archived Queries',
+      path: '/queries/archive',
+    },
+  ];
+  return buildListRoutes('query', routes, '<page-queries-list></page-queries-list>');
 }
 
 init.init = true;
diff --git a/client/app/pages/queries-list/queries-list.html b/client/app/pages/queries-list/queries-list.html
@@ -1,10 +1,5 @@
 <div class="container">
-  <div ng-switch="$ctrl.currentPage">
-    <div ng-switch-when="my"><page-header title="My queries"></page-header></div>
-    <div ng-switch-when="all"><page-header title="All queries"></page-header></div>
-    <div ng-switch-when="archive"><page-header title="Archived queries"></page-header></div>
-    <div ng-switch-when="favorites"><page-header title="Favorite queries"></page-header></div>
-  </div>
+  <page-header title="$ctrl.title"></page-header>
   <div class="row">
     <div class="col-md-3 list-control-t">
       <div class="m-b-10">

diff --git a/client/app/pages/users/list.js b/client/app/pages/users/list.js
@@ -1,12 +1,12 @@
-import { extend } from 'lodash';
 import { policy } from '@/services/policy';
-import ListCtrl from '@/lib/list-ctrl';
+import { buildListRoutes, ListCtrl } from '@/lib/list-ctrl';
 import settingsMenu from '@/services/settingsMenu';
 import template from './list.html';
 
+
 class UsersListCtrl extends ListCtrl {
-  constructor($scope, $location, currentUser, clientConfig, User) {
-    super($scope, $location, currentUser, clientConfig);
+  constructor($scope, $location, $route, currentUser, clientConfig, User) {
+    super($scope, $location, $route, currentUser, clientConfig);
     this.policy = policy;
     this.enableUser = user => User.enableUser(user).then(this.update);
     this.disableUser = user => User.disableUser(user).then(this.update);
@@ -43,41 +43,20 @@ export default function init(ngModule) {
     template,
   });
 
-  const route = {
-    template: '<users-list-page></users-list-page>',
-    reloadOnSearch: false,
-  };
-
-  return {
-    '/users': extend(
-      {
-        title: 'Users',
-        resolve: {
-          currentPage: () => 'all',
-          resource(User) {
-            'ngInject';
-
-            return User.query.bind(User);
-          },
-        },
-      },
-      route,
-    ),
-    '/users/disabled': extend(
-      {
-        resolve: {
-          currentPage: () => 'disabled',
-          resource(User) {
-            'ngInject';
-
-            return User.query.bind(User);
-          },
-        },
-        title: 'Disabled Users',
-      },
-      route,
-    ),
-  };
+  const routes = [
+    {
+      page: 'all',
+      title: 'All Users',
+      path: '/users',
+    },
+    {
+      page: 'disabled',
+      title: 'Disabled Users',
+      path: '/users/disabled',
+    },
+  ];
+
+  return buildListRoutes('user', routes, '<users-list-page></users-list-page>');
 }
 
 init.init = true;