Refactor admin as a component (part of Issue 2490)

src/test/get-expected-files.js

@@ -176,10 +176,9 @@ export function app(options) {
  'client/app/account/signup/signup.' + markup,
  'client/app/account/signup/index.' + script,
  'client/app/account/signup/signup.controller.' + script,
- 'client/app/admin/index.' + script,
+ 'client/app/admin/admin.component.' + script,
  'client/app/admin/admin.' + markup,
  'client/app/admin/admin.' + stylesheet,
- 'client/app/admin/admin.controller.' + script,
  'client/app/admin/admin.routes.' + script,
  'client/components/auth/auth.module.' + script,
  'client/components/auth/auth.service.' + script,

templates/app/client/app/admin(auth)/admin(html).html

@@ -1,12 +1,12 @@
 <div class="container">
  <p>The delete user and user index api routes are restricted to users with the 'admin' role.</p>
  <ul class="list-group user-list">
- <li class="list-group-item" ng-repeat="user in admin.users">
+ <li class="list-group-item" ng-repeat="user in $ctrl.users">
  <div class="user-info">
  <strong>{{user.name}}</strong><br>
  <span class="text-muted">{{user.email}}</span>
  </div>
- <a ng-click="admin.delete(user)" class="trash"><span class="fa fa-trash fa-2x"></span></a>
+ <a ng-click="$ctrl.delete(user)" class="trash"><span class="fa fa-trash fa-2x"></span></a>
  </li>
  </ul>
 </div>

templates/app/client/app/admin(auth)/admin(pug).pug

@@ -2,9 +2,9 @@
  p
  | The delete user and user index api routes are restricted to users with the 'admin' role.
  ul.list-group
- li.list-group-item(ng-repeat='user in admin.users')
+ li.list-group-item(ng-repeat='user in $ctrl.users')
  strong {{user.name}}
  br
  span.text-muted {{user.email}}
- a.trash(ng-click='admin.delete(user)')
+ a.trash(ng-click='$ctrl.delete(user)')
  span.glyphicon.glyphicon-trash.pull-right

templates/app/client/app/admin(auth)/admin.component.js

@@ -0,0 +1,33 @@
+'use strict';
+import angular from 'angular';<% if (filters.uirouter) { %>
+import uiRouter from 'angular-ui-router';<% } %>
+import routes from './admin.routes';
+
+export class AdminController {
+ <%_ if(filters.ts || filters.flow) { _%>
+ users: Object[];
+
+ <%_ } _%>
+ /*@ngInject*/
+ constructor(User) {
+ this.User = User;
+ }
+
+ $onInit() {
+ this.users = this.User.query(); // Fetch all users
+ }
+
+ delete(user) {
+ user.$remove();
+ this.users.splice(this.users.indexOf(user), 1);
+ }
+}
+
+export default angular.module('<%= scriptAppName %>.admin', ['<%= scriptAppName %>.auth'<% if (filters.ngroute) { %>,
+ 'ngRoute'<% } if (filters.uirouter) { %>, uiRouter<% } %>])
+ .config(routes)
+ .component('admin', {
+ template: require('./admin.<%= templateExt %>'),
+ controller: AdminController
+ })
+ .name;

templates/app/client/app/admin(auth)/admin.routes.js

@@ -5,9 +5,7 @@ export default function routes($routeProvider) {
  'ngInject';
  $routeProvider
  .when('/admin', {
- template: require('./admin.<%= templateExt %>'),
- controller: 'AdminController',
- controllerAs: 'admin',
+ template: '<admin></admin>',
  authenticate: 'admin'
  });
 };<% } %>
@@ -17,9 +15,7 @@ export default function routes($stateProvider) {
  $stateProvider
  .state('admin', {
  url: '/admin',
- template: require('./admin.<%= templateExt %>'),
- controller: 'AdminController',
- controllerAs: 'admin',
+ template: '<admin></admin>',
  authenticate: 'admin'
  });
 };<% } %>

templates/app/client/app/app.js

@@ -22,7 +22,7 @@ import {routeConfig} from './app.config';
 <%_ if(filters.auth) { _%>
 import _Auth from '../components/auth/auth.module';
 import account from './account';
-import admin from './admin';<% } %>
+import admin from './admin/admin.component';<% } %>
 import navbar from '../components/navbar/navbar.component';
 import footer from '../components/footer/footer.component';
 import main from './main/main.component';

templates/app/server/app.js

@@ -10,18 +10,14 @@ mongoose.Promise = require('bluebird');<% } %><% if (filters.sequelize) { %>
 import sqldb from './sqldb';<% } %>
 import config from './config/environment';
 import http from 'http';
+<% if(filters.models) { %>import seedDatabaseIfNeeded from './config/seed';<% } %>
 <% if (filters.mongoose) { %>
 // Connect to MongoDB
 mongoose.connect(config.mongo.uri, config.mongo.options);
 mongoose.connection.on('error', function(err) {
  console.error('MongoDB connection error: ' + err);
  process.exit(-1); // eslint-disable-line no-process-exit
 });
-<% } %><% if(filters.models) { %>
-// Populate databases with sample data
-if(config.seedDB) {
- require('./config/seed');
-}
 <% } %>
 // Setup server
 var app = express();
@@ -41,12 +37,14 @@ function startServer() {
  });
 }
 <% if(filters.sequelize) { %>
-sqldb.sequelize.sync()
+sqldb.sequelize.sync()<% if(filters.models) { %>
+ .then(seedDatabaseIfNeeded)<% } %>
  .then(startServer)
  .catch(function(err) {
  console.log('Server failed to start due to error: %s', err);
  });
-<% } else { %>
+<% } else { %><% if(filters.models) { %>
+seedDatabaseIfNeeded();<% } %>
 setImmediate(startServer);
 <% } %>
 // Expose app

templates/app/server/config/seed(models).js

@@ -6,67 +6,70 @@
 'use strict';<% if (filters.mongooseModels) { %>
 import Thing from '../api/thing/thing.model';<% if (filters.auth) { %>
 import User from '../api/user/user.model';<% } %><% } %><% if (filters.sequelizeModels) { %>
-import sqldb from '../sqldb';
-var Thing = sqldb.Thing;<% if (filters.auth) { %>
-var User = sqldb.User;<% } %><% } %>
+import sqldb from '../sqldb';<% } %>
+import config from './environment/';
 
-<% if (filters.mongooseModels) { %>Thing.find({}).remove()<% }
- if (filters.sequelizeModels) { %>Thing.sync()
- .then(() => {
- return Thing.destroy({ where: {} });
- })<% } %>
- .then(() => {
- <% if (filters.mongooseModels) { %>Thing.create({<% }
- if (filters.sequelizeModels) { %>Thing.bulkCreate([{<% } %>
- name: 'Development Tools',
- info: 'Integration with popular tools such as Webpack, Gulp, Babel, TypeScript, Karma, '
- + 'Mocha, ESLint, Node Inspector, Livereload, Protractor, Pug, '
- + 'Stylus, Sass, and Less.'
- }, {
- name: 'Server and Client integration',
- info: 'Built with a powerful and fun stack: MongoDB, Express, '
- + 'AngularJS, and Node.'
- }, {
- name: 'Smart Build System',
- info: 'Build system ignores `spec` files, allowing you to keep '
- + 'tests alongside code. Automatic injection of scripts and '
- + 'styles into your index.html'
- }, {
- name: 'Modular Structure',
- info: 'Best practice client and server structures allow for more '
- + 'code reusability and maximum scalability'
- }, {
- name: 'Optimized Build',
- info: 'Build process packs up your templates as a single JavaScript '
- + 'payload, minifies your scripts/css/images, and rewrites asset '
- + 'names for caching.'
- }, {
- name: 'Deployment Ready',
- info: 'Easily deploy your app to Heroku or Openshift with the heroku '
- + 'and openshift subgenerators'
- <% if (filters.mongooseModels) { %>});<% }
- if (filters.sequelizeModels) { %>}]);<% } %>
- });
+export default function seedDatabaseIfNeeded() {
+ if(config.seedDB) {
+ <% if (filters.sequelizeModels) { %>let Thing = sqldb.Thing;<% if (filters.auth) { %>
+ let User = sqldb.User;<% } %><% } %>
+
+ <% if (filters.mongooseModels) { %>Thing.find({}).remove()<% }
+ if (filters.sequelizeModels) { %>return Thing.destroy({ where: {} })<% } %>
+ .then(() => {
+ <% if (filters.mongooseModels) { %>Thing.create({<% }
+ if (filters.sequelizeModels) { %>return Thing.bulkCreate([{<% } %>
+ name: 'Development Tools',
+ info: 'Integration with popular tools such as Webpack, Gulp, Babel, TypeScript, Karma, '
+ + 'Mocha, ESLint, Node Inspector, Livereload, Protractor, Pug, '
+ + 'Stylus, Sass, and Less.'
+ }, {
+ name: 'Server and Client integration',
+ info: 'Built with a powerful and fun stack: MongoDB, Express, '
+ + 'AngularJS, and Node.'
+ }, {
+ name: 'Smart Build System',
+ info: 'Build system ignores `spec` files, allowing you to keep '
+ + 'tests alongside code. Automatic injection of scripts and '
+ + 'styles into your index.html'
+ }, {
+ name: 'Modular Structure',
+ info: 'Best practice client and server structures allow for more '
+ + 'code reusability and maximum scalability'
+ }, {
+ name: 'Optimized Build',
+ info: 'Build process packs up your templates as a single JavaScript '
+ + 'payload, minifies your scripts/css/images, and rewrites asset '
+ + 'names for caching.'
+ }, {
+ name: 'Deployment Ready',
+ info: 'Easily deploy your app to Heroku or Openshift with the heroku '
+ + 'and openshift subgenerators'
+ <% if (filters.mongooseModels) { %>});<% }
+ if (filters.sequelizeModels) { %>}]);<% } %>
+ })
+ .then(() => console.log('finished populating things'))
+ .catch(err => console.log('error populating things', err));
 <% if (filters.auth) { %>
-<% if (filters.mongooseModels) { %>User.find({}).remove()<% }
- if (filters.sequelizeModels) { %>User.sync()
- .then(() => User.destroy({ where: {} }))<% } %>
- .then(() => {
- <% if (filters.mongooseModels) { %>User.create({<% }
- if (filters.sequelizeModels) { %>User.bulkCreate([{<% } %>
- provider: 'local',
- name: 'Test User',
- email: '[email protected]',
- password: 'test'
- }, {
- provider: 'local',
- role: 'admin',
- name: 'Admin',
- email: '[email protected]',
- password: 'admin'
- <% if (filters.mongooseModels) { %>})<% }
- if (filters.sequelizeModels) { %>}])<% } %>
- .then(() => {
- console.log('finished populating users');
+ <% if (filters.mongooseModels) { %>User.find({}).remove()<% }
+ if (filters.sequelizeModels) { %>User.destroy({ where: {} })<% } %>
+ .then(() => {
+ <% if (filters.mongooseModels) { %>User.create({<% }
+ if (filters.sequelizeModels) { %>return User.bulkCreate([{<% } %>
+ provider: 'local',
+ name: 'Test User',
+ email: '[email protected]',
+ password: 'test'
+ }, {
+ provider: 'local',
+ role: 'admin',
+ name: 'Admin',
+ email: '[email protected]',
+ password: 'admin'
+ <% if (filters.mongooseModels) { %>})<% }
+ if (filters.sequelizeModels) { %>}])<% } %>
+ .then(() => console.log('finished populating users'))
+ .catch(err => console.log('error populating users', err));<% } %>
  });
- });<% } %>
+ }
+}