Compatibility with JHipster 3.0

[babaknaddaf]

hi is the current issue solved in available jhipster 3.0 or not? i mean we have to wait until the next update? thanks

[sundd99]

Updated the script as following for supporting 3.0

After the generation, need to manually add '$.material.init();' to app.module.js

'use strict'; var yeoman = require('yeoman-generator'); var chalk = require('chalk'); var yosay = require('yosay'); var fs = require('fs');

// Stores JHipster variables var jhipsterVar = {moduleName: 'bootstrap-material-design'};

// Stores JHipster functions var jhipsterFunc = {};

module.exports = yeoman.generators.Base.extend({

templates: function () {
    this.composeWith('jhipster:modules', {
        options: {
            jhipsterVar: jhipsterVar, jhipsterFunc: jhipsterFunc
        }
    });
},

prompting: function () {
    var done = this.async();

    // Have Yeoman greet the user.
    this.log(yosay(
        'Welcome to the ' + chalk.red('JHipster Bootstrap Material design') + ' generator!'
    ));

    var prompts = [
        {
            type: 'confirm',
            name: 'installDesign',
            message: 'Do you want to install Bootstrap Material design?',
            default: false
        }
    ];

    this.prompt(prompts, function (props) {
        this.props = props;
        // To access props later use this.props.someOption;

        done();
    }.bind(this));
},

writing: function () {
    var done = this.async();

    this.baseName = jhipsterVar.baseName;
    this.packageName = jhipsterVar.packageName;
    this.angularAppName = jhipsterVar.angularAppName;
    this.frontendBuilder = jhipsterVar.frontendBuilder;
    this.useSass = jhipsterVar.useSass;

    this.installDesign = this.props.installDesign;

    if (!this.installDesign) {
        return;
    }

    // Add dependencies
    jhipsterFunc.addBowerDependency('bootstrap', '3.3.6');
    jhipsterFunc.addBowerDependency('arrive', '2.3.0');
    jhipsterFunc.addBowerDependency('bootstrap-material-design', '0.5.6');

    // Add AngularJs config
    // var config = "$.material.init();";
    // jhipsterFunc.addAngularJsConfig([''], config, 'Initialize material design');

    // Fix navbar menu display
    var navbarFullPath = 'src/main/webapp/app/layouts/navbar/navbar.html';
    var file = fs.readFileSync(navbarFullPath, 'utf8');
    file = file.replace(/class="dropdown pointer"/g, 'dropdown');
    file = file.replace(/class="dropdown-toggle" data-toggle="dropdown"/g, 'dropdown-toggle');
    fs.writeFileSync(navbarFullPath, file);

    // Fix error field display
    var style = '.form-group .help-block {\n' +
        '    position: static;\n' +
        '}';
    jhipsterFunc.addMainCSSStyle(this.useSass, style, 'Fix error field display');

    done();
},

install: function () {
    var injectDependenciesAndConstants = function () {
        switch (this.frontendBuilder) {
            case 'gulp':
                this.spawnCommand('gulp', ['ngconstant:dev', 'wiredep:test', 'wiredep:app']);
                break;
            case 'grunt':
                this.spawnCommand('grunt', ['ngconstant:dev', 'wiredep']);
                break;
            default:
                this.spawnCommand('gulp', ['ngconstant:dev', 'wiredep:test', 'wiredep:app']);
                break;
        }
    };

    this.installDependencies({
            callback: injectDependenciesAndConstants.bind(this)
        }
    );
}

});

[pabloyokese]

great , it works!

[moifort]

thank you very much @sundd99 for the answer!

[babaknaddaf]

Thank u very much, it also worked for me ......

[PuiuCS]

~ add '$.material.init();' to app.module.js ~ where exactly? i can't seem to make this to work.

[ghost]

@moifort, @sundd99 I can't find the file app.module.js on generator-jhipster-bootstrap-material-design module. The file app.module.js of app generated have a different content.

[ghost]

Hey @PuiuCS | @moifort | @sundd99 I'm using Jhipster 3.4.2, to resolve the problem follow this:

Edit file: "%AppData%\Roaming\npm\node_modules\generator-jhipster-bootstrap-material-design\generators\app\index.js", commenting the lines:

// var config = "$.material.init();";
// jhipsterFunc.addAngularJsConfig([''], config, 'Initialize material design');

After, change the navbarFullPath variable:

var navbarFullPath = 'src/main/webapp/app/layouts/navbar/navbar.html';

I didn't need add '$.material.init();'.

[JustynaJPL]

I've had the same problem and rraraujop idea worked. Thanks man:P

[ghost]

@JustynaJPL You're welcome.

[sarjerav]

Guys I'm facing same problem but can't resolved from this resolution. so can any one tell me ?