Pwa Contributing ?

[MInesGomes]

I am going to change the generator for generate more screens like these, https://youtu.be/9_yXxz-EJIk 1-That can be responsive (Hide columns according to screen size or organize div blocks), 2-Can order and search. 3-And have a custom component header with logout button.

Do you think it can be useful to someone else?

If so, what is the best way to not have conflicts with the master? Also I have a left Menu instead of tabs ? So Maybe I need to create a starter with left Menu & Header component?

(My kids are tired of being my generators :-) and copying the code for me and I have more 10 list and edit pages to do and maybe more changes in the future ... So I think is worth while for me to do this, but if could help the community -> win, win :-) )

[mraible]

We'd love your contribution! I'd try forking the generator and making your changes. Search is definitely something I'd like to add when the backend uses Elasticsearch. Left menu vs tabs would be cool too. We could add it as a question when you're creating your project.

[fleboulch]

+1 for left menu/tabs question ! I will go even further with a 3rd option : combining both
This 3rd option should be good for admin section (I will try to implement this section like angular/react/vuejs apps if I have time)

Link: https://ionicacademy.com/ionic-4-tabs-side-menu/

[MInesGomes]

@fleboulch @mraible Great! I made an example app here https://github.com/Entrecampos/Ionic-hipster-pwa with Left Menu & Tabs

[MInesGomes]

@fleboulch @mraible How do I make a link to the app generator and not only to the entity generator?

I will need to change these files: app-routing.module.ts app.component.ts

and I implemented a Header Component in generator-jhipster-ionic/generators/app/templates/src/app

I forked here https://github.com/Entrecampos/generator-jhipster-ionic

[fleboulch]

@Entrecampos app-routing.module.ts and app.component.ts files are in the starter repo. You need to fork it too.

To build this project you can follow the contributing guide.

To test on local you have to update the index.js in the generator with your local path. I did it here

Once your PR has been merged, you will be able to update the ionic-team-starters. Matt described the process here

If you need help, I can help you

[MInesGomes]

Thanks @fleboulch. There is no package.json. How did you install node modules?

What does const cmd = 'cp ma gueule'; do?

const cmd = 'cp ma gueule';
        this.log(`\nCreating Ionic app with command: ${chalk.green(`${cmd}`)}`);
        const params = [
            '-R',
            '/media/florent/DATA/git_projects/ionic/fork/starters/build/angular-community-fleboulch-jhipster',
            '/media/florent/DATA/git_projects/jhipster-ionic/sample/test1'
        ];

        spawn.sync('cp', params, { stdio: 'inherit' });
        spawn.sync(
            'mv',
            [
                `${params[2]}/angular-community-fleboulch-jhipster`,
                `${params[2]}/${this.ionicAppName}`
            ], { stdio: 'inherit' }
        );

[fleboulch]

Following the contributing guide you have to run npm run starters:build -- angular/community/oktadeveloper/jhipster command to build the project

Cmd is just for printing a log. I put a raw string in french to be sure that the local install will be used (and not the global one)

[MInesGomes]

Thanks @fleboulch

I think I need a package.json ...

After 'cloning' I did npm i

and get

npm WARN saveError ENOENT: no such file or directory, open '/Users/mirg/Workspace/gener/ionic-jhipster-starter/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/mirg/Workspace/gener/ionic-jhipster-starter/package.json'
npm WARN ionic-jhipster-starter No description
npm WARN ionic-jhipster-starter No repository field.
npm WARN ionic-jhipster-starter No README data
npm WARN ionic-jhipster-starter No license field.

and tried

ionic-jhipster-starter mirg$ npm run starters:build
npm ERR! path /Users/mirg/Workspace/gener/ionic-jhipster-starter/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open '/Users/mirg/Workspace/gener/ionic-jhipster-starter/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mirg/.npm/_logs/2019-07-25T13_53_38_731Z-debug.log

and now

ionic-jhipster-starter mirg$ npm run starters:build -- angular/community/oktadeveloper/jhipster
npm ERR! path /Users/mirg/Workspace/gener/ionic-jhipster-starter/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open '/Users/mirg/Workspace/gener/ionic-jhipster-starter/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mirg/.npm/_logs/2019-07-25T15_52_09_827Z-debug.log

[fleboulch]

npm i is not sufficient. You need also to run npm run src:build :)

After that, all should be fine

[MInesGomes]

Thanks @fleboulch

Do I have to run this in other directory?

I am running in the cloned directory ionic-jhipster-starter

It gives the same error ...

ionic-jhipster-starter mirg$ npm run src:build
npm ERR! path /Users/mirg/Workspace/gener/ionic-jhipster-starter/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open '/Users/mirg/Workspace/gener/ionic-jhipster-starter/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mirg/.npm/_logs/2019-07-25T16_24_33_684Z-debug.log

[fleboulch]

These commands have to be run on the ionic-starter repo and not on the ionic jhipster repo. You don't need to run any command in the ionic-jhipster starter repo.

I will try to add a documentation for this purpose because there is couple things to do.

[MInesGomes]

@mraible, @fleboulch, @pmverma, @pascalgrimaud How can I solve conflicts In index.js ?

I add this

// This adds support for `--list` flag -> generates list Page
        this.option('list', {
            desc: 'Generte list Pages',
            type: String
        });

        // This adds support for `--edit` flag -> generates Edit Page
        this.option('edit', {
            desc: 'Generte edit Page',
            type: String
        });

        // This adds support for `--inline` flag -> generating Inline Page
        this.option('inline', {
            desc: 'Generte inline Page',
            type: String
        });

and line 122

     ```
   context.genListPage = this.options.list;
            context.genEditPage = this.options.edit;
            context.genInlinePage = this.options.inline;
            context.genPwa = this.options.inline || this.options.edit || this.options.list;

and at line 420

                context.fieldsContainActive = false;

and at line 745

  if (field.fieldName.length > 1) { 

                            if (field.fieldName === 'active') { context.fieldsContainActive = true; }

[mraible]

@Entrecampos Did you figure out how to solve your conflicts? It's tough to know how to resolve them without looking at the actual conflict.

[MInesGomes]

If I remove these changes from index.js doesn't give any conflict

. / / This adds support for --list flag -> generates list Page this.option('list', { desc: 'Generte list Pages', type: String });

    // This adds support for `--edit` flag -> generates Edit Page
    this.option('edit', {
        desc: 'Generte edit Page',
        type: String
    });

    // This adds support for `--inline` flag -> generating Inline Page
    this.option('inline', {
        desc: 'Generte inline Page',
        type: String
    });

and line 122

 ```

context.genListPage = this.options.list; context.genEditPage = this.options.edit; context.genInlinePage = this.options.inline; context.genPwa = this.options.inline || this.options.edit || this.options.list;

and at line 420

            context.fieldsContainActive = false;

and at line 745

if (field.fieldName.length > 1) {

                        if (field.fieldName === 'active') { context.fieldsContainActive = true; }

[mraible]

I haven't seen any of this code before, so I'm not sure what you're referring to. Is this code you wrote? Is there a PR that shows the conflict so I can take a closer look?

[MInesGomes]

Yes.I wrote this code is in the pr for pwa

[MInesGomes]

https://github.com/oktadeveloper/generator-jhipster-ionic/pull/140

[MInesGomes]

@mraible Example of generated code:

[MInesGomes]

@mraible The idea is to generate the smallest code for app. Sometimes I only need a list and not edit page or detail page (that is giving an error with -prod option). And sometimes I have a table with 3 fields that would be better to edit inline. I am still implementing it.

[MInesGomes]

@mraible

[MInesGomes]

The starter is here https://github.com/Entrecampos/Ionic-hipster-pwa

[MInesGomes]

Need help @mraible! I can't run my own changes. I did npm link in my local clone: ~/.nvm/versions/node/v10.14.2/lib/node_modules/generator-jhipster-ionic -> ~/Workspace/gener/generator-jhipster-ionic

but when I do yo jhipster-ionic:entity MyEntity --list --edit --force It runs the master content and not my pwa branch changes.

Am I doing something wrong?

[mraible]

I would try running npm unlink in your project or npm uninstall -g generator-jhipster-ionic to make sure you have it fully uninstalled. Then try npm link again. Another technic is to run npm pack and then npm install -g /path/to/tar.gz.

On Sep 16, 2019, at 03:09, Ines Gomes notifications@github.com wrote:

Need help @mraible! I can't run my own changes. I did npm link in my local clone: ~/.nvm/versions/node/v10.14.2/lib/node_modules/generator-jhipster-ionic -> ~/Workspace/gener/generator-jhipster-ionic

but when I do yo jhipster-ionic:entity MyEntity --list --edit --force It runs the master content and not my pwa branch changes.

Am I doing something wrong?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[MInesGomes]

Thanks for you help @mraible .

How do I now is calling clien4 templates and not client or jdl folder?

I started clean uninstall & install -g generator-jhipster-ionic

Everything looks all right!

• generator-jhipster-ionic@4.1.0

And with no link Just : yo jhipster-ionic:entity MyEntity

generated also this extra file that was deleted in July src/app/pages/entities/nms-tenant/my-entity-detail.module.ts

When I tried with my changes it gave this warning ... and still generates detail.module.ts

npm link npm WARN eslint-config-airbnb-base@13.2.0 requires a peer of eslint@^4.19.1 || ^5.3.0 but none is installed. You must install peer dependencies yourself.

audited 14218 packages in 3.839s found 208 vulnerabilities (207 high, 1 critical) run npm audit fix to fix them, or npm audit for details /Users/mirg/.nvm/versions/node/v10.14.2/bin/ionic4j:entity -> /Users/mirg/.nvm/versions/node/v10.14.2/lib/node_modules/generator-jhipster-ionic/cli/ionic4j.js /Users/mirg/.nvm/versions/node/v10.14.2/bin/ionic4j -> /Users/mirg/.nvm/versions/node/v10.14.2/lib/node_modules/generator-jhipster-ionic/cli/ionic4j.js /Users/mirg/.nvm/versions/node/v10.14.2/lib/node_modules/generator-jhipster-ionic -> /Users/mirg/Workspace/gener/generator-jhipster-ionic GoTop:generator-jhipster-ionic mirg$ cd ../../NmsIonic/

[mraible]

You might try merging the master branch into your branch. This line looks funny since I removed “ionic4j:entity” as a mapping for the CLI.

/Users/mirg/.nvm/versions/node/v10.14.2/bin/ionic4j:entity -> /Users/mirg/.nvm/versions/node/v10.14.2/lib/node_modules/generator-jhipster-ionic/cli/ionic4j.js

On Sep 16, 2019, at 7:00 AM, Ines Gomes notifications@github.com wrote:

Thanks for you help @mraible https://github.com/mraible .

How do I now is calling clien4 templates and not client or jdl folder?

I started clean uninstall & install -g generator-jhipster-ionic

Everything looks all right!

generator-jhipster-ionic@4.1.0 And with no link Just : yo jhipster-ionic:entity MyEntity

generated also this extra file that was deleted in July src/app/pages/entities/nms-tenant/my-entity-detail.module.ts

When I tried with my changes it gave this warning ... and still generates detail.module.ts

npm link npm WARN eslint-config-airbnb-base@13.2.0 requires a peer of eslint@^4.19.1 || ^5.3.0 but none is installed. You must install peer dependencies yourself.

audited 14218 packages in 3.839s found 208 vulnerabilities (207 high, 1 critical) run npm audit fix to fix them, or npm audit for details /Users/mirg/.nvm/versions/node/v10.14.2/bin/ionic4j:entity -> /Users/mirg/.nvm/versions/node/v10.14.2/lib/node_modules/generator-jhipster-ionic/cli/ionic4j.js /Users/mirg/.nvm/versions/node/v10.14.2/bin/ionic4j -> /Users/mirg/.nvm/versions/node/v10.14.2/lib/node_modules/generator-jhipster-ionic/cli/ionic4j.js /Users/mirg/.nvm/versions/node/v10.14.2/lib/node_modules/generator-jhipster-ionic -> /Users/mirg/Workspace/gener/generator-jhipster-ionic GoTop:generator-jhipster-ionic mirg$ cd ../../NmsIonic/

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/oktadeveloper/generator-jhipster-ionic/issues/130?email_source=notifications&email_token=AAAELZCWMQNZ53FH57HTSWDQJ57PZA5CNFSM4IFGOMLKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6ZBYMY#issuecomment-531766323, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAELZCIEW6YDAYJHX6RFI3QJ57PZANCNFSM4IFGOMLA.

[MInesGomes]

Thanks @mraible I manage to have the most recent version!

index.js changed a lot ...

fieldsContainImageBlob used to be set there ... Where are they set now?

[mraible]

Not much changed in the templates, we just changed to use the same entity generator as JHipster. See the following for available variables.

https://github.com/jhipster/generator-jhipster/blob/master/generators/entity/index.js

On Sep 16, 2019, at 10:52, Ines Gomes notifications@github.com wrote:

Thanks @mraible I manage to have the most recent version!

index.js changed a lot ...

fieldsContainImageBlob used to be set there ... Where are they set now?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[tayfundogdas]

I created https://virtuallyhelper.com and https://real-estate.virtuallyhelper.com with ionic-jhipster with PWA enabled, if you want please test sites by looking network tab of developer tools, prefetching is great! I strongly recommend angular version update as in here,

https://ionicframework.com/blog/massive-updates-with-version-11-of-angular/

[mraible]

@MInesGomes You can keep maintaining your branch in this repo, but I'm closing this PR. Please let me know if you'd like to reopen it.