jhi-item-count Does not change language

[antonioortizpola]

Overview of the issue

The jhi-item-count component does not change the language after the user select other than the default.

Motivation for or Use Case

The translation is in the global.json file, so, it should work.

Reproduce the error

• Create a project with two languages (English and spanish in my case)
• Go to some entity page and change language
• The interface changes but no the component

Related issues

Not that I am aware of

Suggest a Fix

From what I see the span is taking the text from the tag body and not from the $t function, if I chage the

v-bind:html="$t('global.item-count')"

to

v-text="$t('global.item-count')"

Then the label is loaded, but the place holders are not replaced for the actual values.

JHipster Version(s)

v6.3.1

JHipster configuration

v6.3.1

JHipster configuration

INFO! Using JHipster version installed locally in current project's node_modules
INFO! Executing jhipster:info
INFO! Options: from-cli: true
Welcome to the JHipster Information Sub-Generator

JHipster Version(s)

carwash@0.0.0 /home/antonio/Projects/Carwash/project3/carwash
└─┬ generator-jhipster-vuejs@1.1.0
  └── generator-jhipster@6.1.2 

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

.yo-rc.json file

{
  "generator-jhipster": {
    "databaseType": "sql",
    "devDatabaseType": "postgresql",
    "enableHibernateCache": true,
    "enableSwaggerCodegen": false,
    "enableTranslation": true,
    "jhiPrefix": "bjt",
    "languages": ["en", "es"],
    "messageBroker": false,
    "nativeLanguage": "en",
    "packageName": "com.bejoto.carwash",
    "packageFolder": "com/bejoto/carwash",
    "prodDatabaseType": "postgresql",
    "searchEngine": "elasticsearch",
    "serviceDiscoveryType": false,
    "skipClient": false,
    "skipServer": false,
    "testFrameworks": [],
    "websocket": false,
    "baseName": "carwash",
    "buildTool": "gradle",
    "clientFramework": "vuejs",
    "jhipsterVersion": "6.3.1",
    "skipUserManagement": false,
    "clientPackageManager": "npm",
    "applicationType": "monolith",
    "authenticationType": "jwt",
    "cacheProvider": "ehcache",
    "clientTheme": "none",
    "clientThemeVariant": "",
    "serverPort": "8080",
    "useSass": true,
    "jwtSecretKey": "xxx",
    "embeddableLaunchScript": false,
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "otherModules": [
      {
        "name": "generator-jhipster-vuejs",
        "version": "1.1.0"
      }
    ],
    "blueprints": [
      {
        "name": "generator-jhipster-vuejs",
        "version": "1.1.0"
      }
    ]
  },
  "entities": [
    "VehicleType",
    "VehicleColor",
    "VehicleBrand",
    "Vehicle",
    "Product",
    "ServiceForSale",
    "Client",
    "Sale",
    "SaleProductRecord",
    "SaleServiceForSaleRecord",
    "SaleLog"
  ],
  "generator-jhipster-vuejs": {
    "jhipsterVersion": "6.1.2",
    "applicationType": "monolith",
    "baseName": "carwash",
    "useSass": true,
    "enableTranslation": true,
    "clientPackageManager": "npm",
    "clientFramework": "vuejs",
    "clientTheme": "none",
    "clientThemeVariant": "",
    "languages": ["en", "es"]
  }
}

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

JDL entity definitions

entity VehicleType {
  name String required minlength(1) maxlength(500),
  enabled Boolean required
}
entity VehicleColor {
  name String required minlength(1) maxlength(500),
  hexColor String required minlength(6) maxlength(6),
  enabled Boolean required
}
entity VehicleBrand {
  name String required minlength(1) maxlength(500),
  enabled Boolean required
}
entity Vehicle {
  plate String required minlength(1) maxlength(500),
  created Instant required,
  lastUpdate Instant required
}
entity Product {
  name String required minlength(1) maxlength(500),
  code String required minlength(1) maxlength(500),
  price BigDecimal required min(0),
  existence Integer required min(0),
  enabled Boolean required,
  created Instant required,
  lastUpdate Instant required
}
entity ServiceForSale {
  name String required minlength(1) maxlength(500),
  code String required minlength(1) maxlength(500),
  price BigDecimal required min(0),
  enabled Boolean required,
  created Instant required,
  lastUpdate Instant required
}
entity Client {
  name String required minlength(1) maxlength(500),
  email String minlength(1) maxlength(500),
  mobile String minlength(1) maxlength(500),
  enabled Boolean required,
  created Instant required,
  lastUpdate Instant required
}
entity Sale {
  clientName String minlength(1) maxlength(500),
  vehicleDescription String minlength(1) maxlength(500),
  total BigDecimal required min(0),
  status SaleStatus required,
  created Instant required,
  lastUpdate Instant required
}
entity SaleProductRecord {
  quantity Integer required min(0),
  price BigDecimal required min(0),
  name String required minlength(1) maxlength(500),
  code String required minlength(1) maxlength(500)
}
entity SaleServiceForSaleRecord {
  quantity Integer required min(0),
  price BigDecimal required min(0),
  name String required minlength(1) maxlength(500),
  code String required minlength(1) maxlength(500)
}
entity SaleLog {
  updated Instant required,
  observation String required minlength(1) maxlength(500)
}
enum SaleStatus {
  OPEN,
  CLOSED,
  CANCELED
}

relationship OneToMany {
  Client{vehicle} to Vehicle{client},
  Client{sale} to Sale{client},
  Vehicle{sale} to Sale{vehicle},
  Sale{saleProductRecord} to SaleProductRecord{sale},
  Sale{saleServiceForSaleRecord} to SaleServiceForSaleRecord{sale},
  Sale{saleLog} to SaleLog{sale}
}
relationship ManyToOne {
  Vehicle{vehicleType(name)} to VehicleType,
  Vehicle{vehicleColor(name)} to VehicleColor,
  Vehicle{vehicleBrand(name)} to VehicleBrand
}
relationship ManyToMany {
  ServiceForSale{vehicleType} to VehicleType{serviceForSale}
}

dto VehicleType, VehicleColor, VehicleBrand, Vehicle, Product, ServiceForSale, Client, Sale, SaleProductRecord, SaleServiceForSaleRecord, SaleLog with mapstruct
paginate VehicleType, VehicleColor, VehicleBrand, Vehicle, Product, ServiceForSale, Client, Sale, SaleProductRecord, SaleServiceForSaleRecord, SaleLog with pagination
service VehicleType, VehicleColor, VehicleBrand, Vehicle, Product, ServiceForSale, Client, Sale, SaleProductRecord, SaleServiceForSaleRecord, SaleLog with serviceClass
search Vehicle, Product, ServiceForSale, Client with elasticsearch

Environment and Tools

openjdk version "11.0.4" 2019-07-16
OpenJDK Runtime Environment AdoptOpenJDK (build 11.0.4+11)
OpenJDK 64-Bit Server VM AdoptOpenJDK (build 11.0.4+11, mixed mode)

git version 2.17.1

node: v10.16.3

npm: 6.9.0

yeoman: 3.1.0

Docker version 19.03.2, build 6a30dfc

docker-compose version 1.24.1, build 4667896b

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

Browsers and Operating System

Tested with Firefox and chrome in Ubuntu

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

[antonioortizpola]

Ok, after playing a little more, and needing a translation with parameters, I realized that the translate function needs to send the parameters for the placeholders, also I do not know why this particular component uses v-bind:html instead of v-text, so, I did changed the code from

<span v-if="i18nEnabled"
  v-bind:html="$t('global.item-count')">Shosssswing {{first}} - {{second}} of {{total}} items.</span>

To

<span v-if="i18nEnabled"
  v-text="$t('global.item-count', { first: first, second: second, total: total })">Showing {{first}} - {{second}} of {{total}} items.</span>

If this seems the correct way to do it for you, I can prepare the pull request to fix this detail.

[antonioortizpola]

I can confirm, all the i18n fields with parameters are generated incorrectly, for example in the entities:

<small class="form-text text-danger" v-if="!$v.vehicleColor.name.minLength" v-bind:value="$t('entity.validation.minlength')">
    This field is required to be at least 1 characters.
</small>

[pascalgrimaud]

thanks for reporting this.
I need to find time to have a look

About the replace code for translation, it is here: https://github.com/jhipster/jhipster-vuejs/blob/master/generators/utils.js#L103

[antonioortizpola]

I can work in the changes in the week end if you want, seems like a good first issue, I just do not know if i need to repeat the names

{ first: first, second: second, total: total }

Or if there is a more elegant way when the parameters are named as the variables.

Also, is there a reason why you use v-bind:html and not v-text for some cases? I tried and v-text worked fine.