Merge pull request #24686 from qmonmert/fix/23848

[Vue] Vue frontend doesn't detect custom primary key names
jhipster · Dec 30, 2023 · 8a8b25f · 8a8b25f
2 parents 9a3edcc + f5ca452
commit 8a8b25f
Show file tree

Hide file tree

Showing 13 changed files with 58 additions and 50 deletions.
diff --git a/.blueprint/generate-sample/support/generate-sample.js b/.blueprint/generate-sample/support/generate-sample.js
@@ -69,7 +69,7 @@ export const generateSample = async (
       const files = globSync('*', { cwd: jdlEntitiesSamplesFolder });
       copyJdlEntitySamples(destProjectFolder, ...files);
     } else {
-      copyJdlEntitySamples(destProjectFolder, jdlEntity.split(','));
+      copyJdlEntitySamples(destProjectFolder, ...jdlEntity.split(','));
     }
   }
 

diff --git a/...es/src/main/webapp/app/entities/_entityFolder_/_entityFile_-details.component.spec.ts.ejs b/...es/src/main/webapp/app/entities/_entityFolder_/_entityFile_-details.component.spec.ts.ejs
@@ -39,7 +39,7 @@ vitest.mock('vue-router', () => ({
   useRouter: () => ({ go: routerGoMock }),
 }));
 
-const <%= entityInstance %>Sample = { id: <%- tsKeyId %> };
+const <%= entityInstance %>Sample = { <%= primaryKey.name %>: <%- tsKeyId %> };
 
 describe('Component Tests', () => {
   let alertService: AlertService;

diff --git a/...mplates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-details.component.ts.ejs b/...mplates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-details.component.ts.ejs
@@ -33,9 +33,9 @@ export default defineComponent({
     const previousState = () => router.go(-1);
     const <%= entityInstance %>: Ref<I<%= entityAngularName %>> = ref({});
 
-    const retrieve<%= entityAngularName %> = async <%= entityInstance %>Id => {
+    const retrieve<%= entityAngularName %> = async <%= entityInstance %><%= primaryKey.nameCapitalized %> => {
       try {
-        const res = await <%= entityInstance %>Service().find(<%= entityInstance %>Id);
+        const res = await <%= entityInstance %>Service().find(<%= entityInstance %><%= primaryKey.nameCapitalized %>);
         <%= entityInstance %>.value = res;
       } catch (error) {
         alertService.showHttpError(error.response);

diff --git a/...rs/vue/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-details.vue.ejs b/...rs/vue/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-details.vue.ejs
@@ -2,7 +2,7 @@
     <div class="row justify-content-center">
         <div class="col-8">
             <div v-if="<%= entityInstance %>">
-                <h2 class="jh-entity-heading" data-cy="<%= entityInstance %>DetailsHeading"><span v-text="t$('<%= i18nKeyPrefix %>.detail.title')"><%= entityAngularName %></span> {{<%= entityInstance %>.id}}</h2>
+                <h2 class="jh-entity-heading" data-cy="<%= entityInstance %>DetailsHeading"><span v-text="t$('<%= i18nKeyPrefix %>.detail.title')"><%= entityAngularName %></span> {{<%= entityInstance %>.<%= primaryKey.name %>}}</h2>
                 <dl class="row jh-entity-details">
 <%_ for (field of fields.filter(field => !field.id)) {
     const fieldName = field.fieldName;
@@ -49,20 +49,20 @@
                     <dd>
     <%_ if (relationship.otherEntityUser) { _%>
       <%_ if (relationship.relationshipManyToMany) { _%>
-                        <span v-for="(<%= relationshipFieldName %>, i) in <%= entityInstance %>.<%= relationshipFieldNamePlural %>" :key="<%= relationshipFieldName %>.id">{{i > 0 ? ', ' : ''}}
+                        <span v-for="(<%= relationshipFieldName %>, i) in <%= entityInstance %>.<%= relationshipFieldNamePlural %>" :key="<%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>">{{i > 0 ? ', ' : ''}}
                             {{<%= relationshipFieldName %>.<%= otherEntityField %>}}
                         </span>
       <%_ } else { _%>
                         {{<%= entityInstance + "." + relationshipFieldName %> ? <%= entityInstance + "." + relationshipFieldName + "." + otherEntityField%> : ''}}
       <%_ } _%>
     <%_ } else { _%>
       <%_ if (relationship.relationshipManyToMany) { _%>
-                        <span v-for="(<%= relationshipFieldName %>, i) in <%= entityInstance %>.<%= relationshipFieldNamePlural %>" :key="<%= relationshipFieldName %>.id">{{i > 0 ? ', ' : ''}}
-                            <router-link :to="{name: '<%= otherEntityAngularName %>View', params: {<%= otherEntityName %>Id: <%= relationshipFieldName %>.id}}">{{<%= relationshipFieldName + "." + otherEntityField %>}}</router-link>
+                        <span v-for="(<%= relationshipFieldName %>, i) in <%= entityInstance %>.<%= relationshipFieldNamePlural %>" :key="<%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>">{{i > 0 ? ', ' : ''}}
+                            <router-link :to="{name: '<%= otherEntityAngularName %>View', params: {<%= otherEntityName %>Id: <%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>}}">{{<%= relationshipFieldName + "." + otherEntityField %>}}</router-link>
                         </span>
       <%_ } else { _%>
                         <div v-if="<%= entityInstance + '.' + relationshipFieldName %>">
-                            <router-link :to="{name: '<%= otherEntityAngularName %>View', params: {<%= otherEntityName %>Id: <%= entityInstance + "." + relationshipFieldName %>.id}}">{{<%= entityInstance + "." + relationshipFieldName + "." + otherEntityField %>}}</router-link>
+                            <router-link :to="{name: '<%= otherEntityAngularName %>View', params: {<%= otherEntityName %>Id: <%= entityInstance + "." + relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>}}">{{<%= entityInstance + "." + relationshipFieldName + "." + otherEntityField %>}}</router-link>
                         </div>
       <%_ } _%>
     <%_ } _%>
@@ -77,7 +77,7 @@
                     <font-awesome-icon icon="arrow-left"></font-awesome-icon>&nbsp;<span v-text="t$('entity.action.back')"> Back</span>
                 </button>
 <%_ if (!readOnly) { _%>
-                <router-link v-if="<%= entityInstance %>.id" :to="{name: '<%= entityAngularName %>Edit', params: {<%= entityInstance %>Id: <%= entityInstance %>.id}}" custom v-slot="{ navigate }">
+                <router-link v-if="<%= entityInstance %>.<%= primaryKey.name %>" :to="{name: '<%= entityAngularName %>Edit', params: {<%= entityInstance %>Id: <%= entityInstance %>.<%= primaryKey.name %>}}" custom v-slot="{ navigate }">
                     <button @click="navigate" class="btn btn-primary">
                         <font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span v-text="t$('entity.action.edit')"> Edit</span>
                     </button>

diff --git a/...tes/src/main/webapp/app/entities/_entityFolder_/_entityFile_-update.component.spec.ts.ejs b/...tes/src/main/webapp/app/entities/_entityFolder_/_entityFile_-update.component.spec.ts.ejs
@@ -55,7 +55,7 @@ vitest.mock('vue-router', () => ({
   useRouter: () => ({ go: routerGoMock }),
 }));
 
-const <%= entityInstance %>Sample = { id: <%- tsKeyId %> };
+const <%= entityInstance %>Sample = { <%= primaryKey.name %>: <%- tsKeyId %> };
 
 describe('Component Tests', () => {
   let mountOptions: MountingOptions<<%= entityAngularName %>UpdateComponentType>['global'];

diff --git a/...emplates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-update.component.ts.ejs b/...emplates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-update.component.ts.ejs
@@ -64,9 +64,9 @@ export default defineComponent({
 
     const previousState = () => router.go(-1);
 
-    const retrieve<%= entityAngularName %> = async <%= entityInstance %>Id => {
+    const retrieve<%= entityAngularName %> = async <%= entityInstance %><%= primaryKey.nameCapitalized %> => {
       try {
-        const res = await <%= entityInstance %>Service().find(<%= entityInstance %>Id);
+        const res = await <%= entityInstance %>Service().find(<%= entityInstance %><%= primaryKey.nameCapitalized %>);
 <%_
         for (field of fields.filter(field => !field.id)) {
             const fieldName = field.fieldName;
@@ -190,15 +190,15 @@ _%>
           const fieldName = field.fieldName;
           const fieldType = field.fieldType;
     } _%>
-    if (this.<%= entityInstance %>.id) {
+    if (this.<%= entityInstance %>.<%= primaryKey.name %>) {
         this.<%= entityInstance %>Service().update(this.<%= entityInstance %>).then((param) => {
           this.isSaving = false;
           this.previousState();
           this.alertService.showInfo(
 <%_ if (enableTranslation) { _%>
-            this.t$('<%= i18nAlertHeaderPrefix %>.updated', { 'param' : param.id })
+            this.t$('<%= i18nAlertHeaderPrefix %>.updated', { 'param' : param.<%= primaryKey.name %> })
 <%_ } else {_%>
-            'A <%= entityAngularName %> is updated with identifier ' + param.id
+            'A <%= entityAngularName %> is updated with identifier ' + param.<%= primaryKey.name %>
 <%_ } _%>
           );
         }).catch(error => {
@@ -211,9 +211,9 @@ _%>
           this.previousState();
           this.alertService.showSuccess(
 <%_ if (enableTranslation) { _%>
-            this.t$('<%= i18nAlertHeaderPrefix %>.created', { param: param.id }).toString()
+            this.t$('<%= i18nAlertHeaderPrefix %>.created', { param: param.<%= primaryKey.name %> }).toString()
 <%_ } else {_%>
-            'A <%= entityAngularName %> is created with identifier ' + param.id
+            'A <%= entityAngularName %> is created with identifier ' + param.<%= primaryKey.name %>
 <%_ } _%>
           );
         }).catch(error => {
@@ -240,9 +240,9 @@ _%>
 
   <%_ } _%>
   <%_ if (relationshipsContainManyToOne) { _%>
-    getSelected(selectedVals, option) : any {
+    getSelected(selectedVals, option, pkField = 'id') : any {
       if (selectedVals) {
-        return selectedVals.find(value => option.id === value.id) ?? option;
+        return selectedVals.find(value => option[pkField] === value[pkField]) ?? option;
       }
       return option;
     },

diff --git a/...ors/vue/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-update.vue.ejs b/...ors/vue/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-update.vue.ejs
@@ -4,10 +4,10 @@
             <form name="editForm" role="form" novalidate v-on:submit.prevent="save()" >
                 <h2 id="<%= i18nKeyPrefix %>.home.createOrEditLabel" data-cy="<%= entityClass %>CreateUpdateHeading" v-text="t$('<%= i18nKeyPrefix %>.home.createOrEditLabel')">Create or edit a <%= entityAngularName %></h2>
                 <div>
-                    <div class="form-group" v-if="<%= entityInstance %>.id">
-                        <label for="id" v-text="t$('global.field.id')">ID</label>
-                        <input type="text" class="form-control" id="id" name="id"
-                               v-model="<%= entityInstance %>.id" readonly />
+                    <div class="form-group" v-if="<%= entityInstance %>.<%= primaryKey.name %>">
+                        <label for="id" v-text="t$('global.field.id')"><%= primaryKey.nameCapitalized %></label>
+                        <input type="text" class="form-control" id="id" name="<%= primaryKey.name %>"
+                               v-model="<%= entityInstance %>.<%= primaryKey.name %>" readonly />
                     </div>
 <%_ for (field of fields.filter(field => !field.id)) {
   const fieldName = field.fieldName;
@@ -139,14 +139,14 @@ _%>
     <%_ } else { _%>
                             <option v-if="!<%= entityInstance %>.<%= relationshipName %>" v-bind:value="null" selected></option>
     <%_ } _%>
-                            <option v-bind:value="<%= entityInstance %>.<%=relationshipFieldName %> && <%=otherEntityName %>Option.id === <%= entityInstance %>.<%=relationshipFieldName %>.id ? <%= entityInstance %>.<%=relationshipFieldName %> : <%=otherEntityName %>Option" v-for="<%=otherEntityName %>Option in <%=otherEntityNamePlural %>" :key="<%=otherEntityName %>Option.id">{{<%=otherEntityName %>Option.<%=otherEntityField %>}}</option>
+                            <option v-bind:value="<%= entityInstance %>.<%=relationshipFieldName %> && <%=otherEntityName %>Option.<%= relationship.otherEntity.primaryKey.name %> === <%= entityInstance %>.<%=relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %> ? <%= entityInstance %>.<%=relationshipFieldName %> : <%=otherEntityName %>Option" v-for="<%=otherEntityName %>Option in <%=otherEntityNamePlural %>" :key="<%=otherEntityName %>Option.<%= relationship.otherEntity.primaryKey.name %>">{{<%=otherEntityName %>Option.<%=otherEntityField %>}}</option>
                         </select>
                     </div>
   <%_ } else if (relationship.persistableRelationship) { _%>
                     <div class="form-group">
                         <label v-text="t$('<%= translationKey %>')" for="<%= entityFileName %>-<%= relationshipName %>"><%= relationshipNameHumanized %></label>
                         <select class="form-control" id="<%= entityFileName %>-<%= relationshipFieldNamePlural %>" data-cy="<%= relationshipFieldName %>" multiple name="<%= relationshipName %>" v-if="<%=entityInstance %>.<%=relationshipFieldNamePlural %> !== undefined" v-model="<%=entityInstance %>.<%=relationshipFieldNamePlural %>"<% if (relationshipRequired) { %> required<% } %>>
-                            <option v-bind:value="getSelected(<%=entityInstance %>.<%=relationshipFieldNamePlural %>, <%=otherEntityName %>Option)" v-for="<%=otherEntityName %>Option in <%=otherEntityNamePlural %>" :key="<%=otherEntityName %>Option.id">{{<%=otherEntityName %>Option.<%=otherEntityField %>}}</option>
+                            <option v-bind:value="getSelected(<%=entityInstance %>.<%=relationshipFieldNamePlural %>, <%=otherEntityName %>Option, '<%= relationship.otherEntity.primaryKey.name %>')" v-for="<%=otherEntityName %>Option in <%=otherEntityNamePlural %>" :key="<%=otherEntityName %>Option.<%= relationship.otherEntity.primaryKey.name %>">{{<%=otherEntityName %>Option.<%=otherEntityField %>}}</option>
                         </select>
                     </div>
   <%_ } _%>

diff --git a/.../templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_.component.spec.ts.ejs b/.../templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_.component.spec.ts.ejs
@@ -86,7 +86,7 @@ describe('Component Tests', () => {
     describe('Mount', () => {
       it('Should call load all on init', async () => {
         // GIVEN
-        <%= entityInstance %>ServiceStub.retrieve.resolves({ headers: {}, data: [{ id: <%- tsKeyId %> }] });
+        <%= entityInstance %>ServiceStub.retrieve.resolves({ headers: {}, data: [{ <%= primaryKey.name %>: <%- tsKeyId %> }] });
 
         // WHEN
         const wrapper = shallowMount(<%= entityAngularName %>, { global: mountOptions });
@@ -95,7 +95,7 @@ describe('Component Tests', () => {
 
         // THEN
         expect(<%= entityInstance %>ServiceStub.retrieve.calledOnce).toBeTruthy();
-        expect(comp.<%= entityInstancePlural %>[0]).toEqual(expect.objectContaining({id: <%- tsKeyId %>}));
+        expect(comp.<%= entityInstancePlural %>[0]).toEqual(expect.objectContaining({<%= primaryKey.name %>: <%- tsKeyId %>}));
       });
 <%_ if (!paginationNo) { _%>
 
@@ -126,15 +126,15 @@ describe('Component Tests', () => {
 
       it('should load a page', async () => {
         // GIVEN
-        <%= entityInstance %>ServiceStub.retrieve.resolves({ headers: {}, data: [{ id: <%- tsKeyId %> }] });
+        <%= entityInstance %>ServiceStub.retrieve.resolves({ headers: {}, data: [{ <%= primaryKey.name %>: <%- tsKeyId %> }] });
 
         // WHEN
         comp.page = 2;
         await comp.$nextTick();
 
         // THEN
         expect(<%= entityInstance %>ServiceStub.retrieve.called).toBeTruthy();
-        expect(comp.<%= entityInstancePlural %>[0]).toEqual(expect.objectContaining({id: <%- tsKeyId %>}));
+        expect(comp.<%= entityInstancePlural %>[0]).toEqual(expect.objectContaining({<%= primaryKey.name %>: <%- tsKeyId %>}));
     });
   <%_ if (!paginationInfiniteScroll) { _%>
 
@@ -152,7 +152,7 @@ describe('Component Tests', () => {
         comp.page = 2;
         await comp.$nextTick();
         <%= entityInstance %>ServiceStub.retrieve.reset();
-        <%= entityInstance %>ServiceStub.retrieve.resolves({ headers: {}, data: [{ id: <%- tsKeyId %> }] });
+        <%= entityInstance %>ServiceStub.retrieve.resolves({ headers: {}, data: [{ <%= primaryKey.name %>: <%- tsKeyId %> }] });
 
         // WHEN
         comp.clear();
@@ -161,7 +161,7 @@ describe('Component Tests', () => {
         // THEN
         expect(comp.page).toEqual(1);
         expect(<%= entityInstance %>ServiceStub.retrieve.callCount).toEqual(1);
-        expect(comp.<%= entityInstancePlural %>[0]).toEqual(expect.objectContaining({id: <%- tsKeyId %>}));
+        expect(comp.<%= entityInstancePlural %>[0]).toEqual(expect.objectContaining({<%= primaryKey.name %>: <%- tsKeyId %>}));
       });
 
       it('should calculate the sort attribute for a non-id attribute', async () => {
@@ -182,7 +182,7 @@ describe('Component Tests', () => {
         <%= entityInstance %>ServiceStub.delete.resolves({});
 
         // WHEN
-        comp.prepareRemove({id: <%- tsKeyId %>});
+        comp.prepareRemove({<%= primaryKey.name %>: <%- tsKeyId %>});
 
         comp.remove<%= entityAngularName %>();
         await comp.$nextTick(); // clear components

diff --git a/...s/vue/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_.component.ts.ejs b/...s/vue/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_.component.ts.ejs
@@ -134,7 +134,7 @@ export default defineComponent({
     const removeId: Ref<<%- primaryKey.tsType %>> = ref(null);
     const removeEntity = ref<any>(null);
     const prepareRemove = (instance: I<%= entityAngularName %>) => {
-      removeId.value = instance.id;
+      removeId.value = instance.<%= primaryKey.name %>;
       removeEntity.value.show();
     };
     const closeDialog = () => {

diff --git a/...ue/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_.service.spec.ts.ejs b/...ue/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_.service.spec.ts.ejs
@@ -123,7 +123,7 @@ describe('Service Tests', () => {
 <%_ if (!readOnly) { _%>
       it('should create a <%= entityAngularName %>', async () => {
         const returnedFromService = Object.assign({
-          id: <%- this.generateTestEntityId(primaryKey.type) %>,
+          <%= primaryKey.name %>: <%- this.generateTestEntityId(primaryKey.type) %>,
   <%_ fields.filter(field => !field.id).forEach((field) => { _%>
     <%_ if (field.fieldTypeLocalDate) { _%>
           <%= field.fieldName%>: dayjs(currentDate).format(DATE_FORMAT),

diff --git a/...ors/vue/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_.service.ts.ejs b/...ors/vue/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_.service.ts.ejs
@@ -20,9 +20,9 @@ export default class <%= entityAngularName %>Service {
   }
 <%_ } _%>
 
-  public find(id: <%- this.getTypescriptKeyType(primaryKey) %>) : Promise<I<%= entityAngularName %>> {
+  public find(<%= primaryKey.name %>: <%- this.getTypescriptKeyType(primaryKey) %>) : Promise<I<%= entityAngularName %>> {
     return new Promise<I<%= entityAngularName %>>((resolve, reject) => {
-      axios.get(`${baseApiUrl}/${id}`).then(res => {
+      axios.get(`${baseApiUrl}/${<%= primaryKey.name %>}`).then(res => {
         resolve(res.data);
       }).catch(err => { reject(err); });
     });
@@ -37,9 +37,9 @@ export default class <%= entityAngularName %>Service {
   }
 <%_ if (!readOnly) { _%>
 
-  public delete(id: <%- this.getTypescriptKeyType(primaryKey) %>) : Promise<any> {
+  public delete(<%= primaryKey.name %>: <%- this.getTypescriptKeyType(primaryKey) %>) : Promise<any> {
     return new Promise<any>((resolve, reject) => {
-      axios.delete(`${baseApiUrl}/${id}`).then(res => {
+      axios.delete(`${baseApiUrl}/${<%= primaryKey.name %>}`).then(res => {
         resolve(res);
       }).catch(err => { reject(err); });
     });