vue does not display relations in edit view out of box

[atomfrede]

Overview of the issue

Selections for relationships seem to be broken in vue. The for loop uses a non existing property.

Motivation for or Use Case

It should work out of box.

Reproduce the error

Import following JDL:

application {
  config {
    baseName hike
    applicationType monolith
    authenticationType oauth2
    packageName com.github.atomfrede.example.hike
    prodDatabaseType postgresql
    testFrameworks [cypress]
    buildTool gradle
    clientFramework vue
  }
  entities *
}
entity HikingLocation {
    name String required
    description String required
}
entity Hike {
    name String required
    date LocalDate required
    description TextBlob required
    photo ImageBlob required
    type Difficulty required
    length Integer required
}
enum Difficulty {
  EASY,
  MEDIUM,
  HARD,
  ULTRA
}
relationship OneToOne { 
  Hike{startLocation(name)} to HikingLocation,
  Hike{destination(name)} to HikingLocation
}
paginate Hike with pagination
paginate HikingLocation with pagination

Try to edit a Hike. You will notice the location selectors are empty.

Related issues

None.

Suggest a Fix

  <option
                v-bind:value="
                  hike.startLocation && hikingLocationOption.id === hike.startLocation.id ? hike.startLocation : hikingLocationOption
                "
                v-for="hikingLocationOption in startLocations"
                :key="hikingLocationOption.id"
              >
                {{ hikingLocationOption.name }}
              </option>

startLocations does not exist. They correct property would be hikingLocations.

JHipster Version(s)

Latest main.

JHipster configuration

JHipster Version(s)

hike@0.0.0 /home/fred/jug-bonn-jdl-3
└── generator-jhipster@7.0.1 -> /home/fred/git/github/jhipster/generator-jhipster

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

.yo-rc.json file

{
  "generator-jhipster": {
    "authenticationType": "oauth2",
    "cacheProvider": "ehcache",
    "clientFramework": "vue",
    "serverPort": "8080",
    "serviceDiscoveryType": false,
    "skipUserManagement": true,
    "withAdminUi": true,
    "baseName": "hike",
    "buildTool": "gradle",
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "enableHibernateCache": true,
    "enableSwaggerCodegen": false,
    "enableTranslation": true,
    "jhiPrefix": "jhi",
    "languages": ["en"],
    "messageBroker": false,
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "skipClient": false,
    "testFrameworks": ["cypress"],
    "websocket": false,
    "applicationType": "monolith",
    "packageName": "com.github.atomfrede.example.hike",
    "packageFolder": "com/github/atomfrede/example/hike",
    "jhipsterVersion": "7.0.1",
    "skipServer": false,
    "clientPackageManager": "npm",
    "dtoSuffix": "DTO",
    "entitySuffix": "",
    "reactive": false,
    "clientTheme": "none",
    "clientThemeVariant": "",
    "entities": ["HikingLocation", "Hike"],
    "skipCheckLengthOfIdentifier": false,
    "skipFakeData": false,
    "blueprints": [],
    "otherModules": [],
    "pages": [],
    "nativeLanguage": "en",
    "creationTimestamp": 1622047196898,
    "lastLiquibaseTimestamp": 1622047316000
  }
}

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

JDL entity definitions

entity HikingLocation {
  name String required
  description String required
}
entity Hike {
  name String required
  date LocalDate required
  description TextBlob required
  photo ImageBlob required
  type Difficulty required
  length Integer required
}
enum Difficulty {
  EASY,
  MEDIUM,
  HARD,
  ULTRA
}

relationship OneToOne {
  Hike{startLocation(name)} to HikingLocation
  Hike{destination(name)} to HikingLocation
}

paginate HikingLocation, Hike with pagination

Environment and Tools

openjdk version "16.0.1" 2021-04-20 OpenJDK Runtime Environment AdoptOpenJDK-16.0.1+9 (build 16.0.1+9) OpenJDK 64-Bit Server VM AdoptOpenJDK-16.0.1+9 (build 16.0.1+9, mixed mode, sharing)

git version 2.31.1

node: v14.16.1

npm: 7.11.1

Docker version 20.10.6, build 370c28948e

docker-compose version 1.29.2, build unknown

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

Browsers and Operating System

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

[pascalgrimaud]

As it's a bug, adding a bounty on this

[swarajsaaj]

As pointed by @atomfrede the issue is only for one-to-one mapping at:- https://github.com/jhipster/generator-jhipster/blob/717d172efbbe35d0fb862cd11299f6c308bf034b/generators/entity-client/templates/vue/src/main/webapp/app/entities/entity-update.vue.ejs#L192 relationshipFieldNamePlural should be otherEntityNamePlural in v-for loop

Shall i provide a PR if @atomfrede is not already on it?

[DanielFran]

@swarajsaaj Go ahead, I believe @atomfrede only open the ticket.

[atomfrede]

Go ahead. Otherwise I would have looked it this evening.