Infinite-scroll pagination not generated

HJK181 commented 4 years ago

Overview of the issue

The pagination option infinite-scroll does not have any effect.

Reproduce the error

First create the application via jhipster --blueprints vuejs, than run either jhipster import-jdl some-entities.jdl or jhipster entity Picture.

JHipster Version(s)

gateway@0.0.0 C:\foo\bar\gateway
`-- generator-jhipster-vuejs@1.3.0
  `-- generator-jhipster@6.5.1

JHipster configuration, a `.yo-rc.json` file generated in the root folder

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "de.foo",
      "nativeLanguage": "de"
    },
    "jhipsterVersion": "6.6.0",
    "applicationType": "gateway",
    "baseName": "gateway",
    "packageName": "de.fo",
    "packageFolder": "de/foo",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "hazelcast",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": "eureka",
    "buildTool": "maven",
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "cool",
    "embeddableLaunchScript": false,
    "creationTimestamp": 1580197134739,
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "otherModules": [
      {
        "name": "generator-jhipster-vuejs",
        "version": "1.3.0"
      }
    ],
    "enableTranslation": true,
    "clientPackageManager": "npm",
    "nativeLanguage": "de",
    "languages": [
      "de",
      "en"
    ],
    "blueprints": [
      {
        "name": "generator-jhipster-vuejs",
        "version": "1.3.0"
      }
    ]
  },
  "generator-jhipster-vuejs": {
    "jhipsterVersion": "6.5.1",
    "applicationType": "gateway",
    "baseName": "gateway",
    "useSass": true,
    "clientPackageManager": "npm",
    "clientFramework": "vue",
    "clientTheme": "materia",
    "clientThemeVariant": "light"
  }
}

Entity configuration(s) `entityName.json` files generated in the `.jhipster` directory

Picture.json

{
    "name": "Picture",
    "fields": [
        {
            "fieldName": "title",
            "fieldType": "String",
            "fieldValidateRules": [
                "required",
                "maxlength"
            ],
            "fieldValidateRulesMaxlength": 150
        },
        {
            "fieldName": "uri",
            "fieldType": "String",
            "fieldValidateRules": [
                "required"
            ]
        },
        {
            "fieldName": "visibility",
            "fieldType": "Visibility",
            "fieldValues": "ALL,PACK,NONE",
            "fieldValidateRules": [
                "required"
            ]
        },
        {
            "fieldName": "approved",
            "fieldType": "Boolean",
            "fieldValidateRules": [
                "required"
            ]
        },
        {
            "fieldName": "data",
            "fieldType": "byte[]",
            "fieldTypeBlobContent": "image"
        }
    ],
    "relationships": [],
    "changelogDate": "20200129073108",
    "javadoc": "The Picture entity.\\n@author hjk",
    "entityTableName": "picture",
    "dto": "no",
    "pagination": "infinite-scroll",
    "service": "no",
    "jpaMetamodelFiltering": false,
    "fluentMethods": true,
    "readOnly": false,
    "clientRootFolder": "",
    "applications": "*"
}

Browsers and Operating System

[X ] Checking this box is mandatory (this is just to show you read everything)

HJK181 commented 4 years ago

Updated to newest 1.4.0 release, with the same outcome.

pascalgrimaud commented 4 years ago

Confirmed the issue I wanted to do a new release of Vue.js but this one should be easy to fix, so I postpone the release, so if someone want to fix this ?

pascalgrimaud commented 4 years ago

I'm changing the label as in fact, it's not a bug. It's simply something which was not implemented initialy.

skmaingi commented 4 years ago

I'm using Vue-infinite-loading plugin.

Installation

npm install vue-infinite-loading --save

Usage

main.ts

import InfiniteLoading from 'vue-infinite-loading';
Vue.component('infinite-loading', InfiniteLoading);

Entity Vue

Insert code before table closing tag ""

                <infinite-loading
                    v-if="entityarray && entityarray.length > 0 && links != {} && page < links['last']"
                    :identifier="infiniteId"
                    slot="append"
                    @infinite="loadPage"
                    force-use-infinite-wrapper=".el-table__body-wrapper"
                    :distance='50'>
                    <template slot="no-more">No more data</template>
                </infinite-loading>

JhiDataUtils method to parse header links to get maximum loading count

  parseLinks(header) {
    if (header.length === 0) {
      throw new Error('input must not be of zero length');
    }

    // Split parts by comma
    var parts = header.split(',');
    var links = {};
    // Parse each part into a named link
    parts.forEach((p) => {
      var section = p.split('>;');
      if (section.length !== 2) {
        throw new Error('section could not be split on ">;"');
      }
      var url = section[0].replace(/<(.*)/, '$1').trim();
      var queryString = {page:null};
      url.replace(
        new RegExp('([^?=&]+)(=([^&]*))?', 'g'),
        function($0, $1, $2, $3) { queryString[$1] = $3; }
      );
      var page = queryString.page;
      if (typeof page  == 'string') {
        page = parseInt(page);
      }
      var name = section[1].replace(/rel="(.*)"/, '$1').trim();
      links[name] = page;
    });
    return links;
  }

Entity component changes

Changes in entity service then callback function

          for (var i = 0; i < res.data.length; i++) {
            this.entityarray.push(res.data[i]);
          }
          this.totalItems = Number(res.headers['x-total-count']);
          this.links = this.parseLinks(res.headers.link);
          this.isFetching = false;
          if(this.state != null) {
            this.state.loaded();
            if(this.page == this.links['last'])
              this.state.complete();
          }

Method load next page on scrolling

  public loadPage($state): void {
    this.state = $state;
    if(this.page >= this.links['last'])
      this.state.complete();
    if(!this.isFetching) {
      this.page++;
      this.retrieveAllEntities();
    }
  }

skmaingi commented 4 years ago

@pascalgrimaud is the bug-bounty still there? I'm in dire need of funding for my 4 social projects.

mispers: Project to find missing persons
mfadhili: (Swahili: donor) platform to help patients get blood donations
fichua: (Swahili: expose) Whistleblowers platform
itracker CE: Platform to track incidents such as locusts invasion and coronavirus Bitcoin - 34Zzu9RUEBGTYk3DRpXazpndUquirVxA5X Paypal - mispersproject [at] gmail [dot] com

pascalgrimaud commented 4 years ago

@skmaingi : yes, the bounty is still there. You seem to know how to fix it, so would you like to contribute ? Don't hesitate to ask me if you need help

skmaingi commented 4 years ago

@pascalgrimaud yes, I would like to contribute.

skmaingi commented 4 years ago

@pascalgrimaud I need access to commit the code for infinite-scroll feature

pascalgrimaud commented 4 years ago

@skmaingi : for contributing to Open Source project, you need:

fork this project
clone your fork locally: git clone https://github.com/skmaingi/jhipster-vuejs
go into your fork locally, add upstream: git remote add upstream https://github.com/jhipster/jhipster-vuejs
develop the fix
then, the most important part: git push origin <your branch> -> so you'll push to your fork and not to main project
so in GitHub, you'll be able to submit the pull request

skmaingi commented 4 years ago

@pascalgrimaud : I have added the new feature.

The v-if directive in infinite-loading component is optional. One can omit it to display the component's template if there is no more data to load.

pascalgrimaud commented 4 years ago

@skmaingi : nice ! waiting your pull request so we can review :)

pascalgrimaud commented 4 years ago

@skmaingi : I'm increasing the bounty as I saw you spent a lot of time to achieve your 1st contribution to the project, so it is well deserved !

skmaingi commented 4 years ago

@pascalgrimaud Thank you so much

jhipster / jhipster-vuejs