Code from demo does not work

[michael-wahler]

I am following the video of the demo (which is excellent, thanks a lot!). I am at the step "Improve the layout", which says: To make the list of entries look like a blog, replace <div class="table-responsive"> with HTML, so it uses a stacked layout in a single column.

The code that is listed in the README does not work for me though: the replacement code uses entries, which are called posts in my original code. Then, there is a problem with entry.date, where IntelliJ reports "Argument type dayjs.Dayjs is not assignable to parameter type Date | string | number". Also, entry.log.user cannot be resolved, which is strange given this relationship is defined in the jdl file. Any help appreciated.

[mraible]

What version of JHipster are you using? It's possible things have changed since I created this video. I'd trust the source code in the repo before the instructions in the README.

[karstengresch]

Thanks for raising the issue (spotted the same problem but was too lazy...)!

Seems @mraible has removed jh-posts from https://github.com/mraible/idea-live-templates

But as he said: Check the code. In your case, https://github.com/mraible/jhipster7-demo/blob/main/src/main/webapp/app/entities/post/list/post.component.html should give you what you need:

  <div class="table-responsive" *ngIf="posts && posts.length > 0">
    <div infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
      <div *ngFor="let post of posts; trackBy: trackId" data-cy="entityTable">
        <a [routerLink]="['/post', post.id, 'view']" data-cy="entityDetailsButton">
          <h2>{{ post.title }}</h2>
        </a>
        <!-- commented out for following in place -->
        <!-- small>Posted on {{ post.date | formatMediumDatetime }} by {{ post.blog?.user?.login }}</small -->
        <div [innerHTML]="post.content"></div>
        <div class="btn-group mb-2 mt-1">
          <button type="submit" [routerLink]="['/post', post.id, 'edit']" class="btn btn-primary btn-sm">
            <fa-icon icon="pencil-alt"></fa-icon>
            <span class="d-none d-md-inline" jhiTranslate="entity.action.edit" data-cy="entityEditButton">Edit</span>
          </button>
          <button type="submit" (click)="delete(post)" class="btn btn-danger btn-sm" data-cy="entityDeleteButton">
            <fa-icon icon="times"></fa-icon>
            <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
          </button>
        </div>
      </div>
    </div>
  </div>

???

[mraible]

Thanks for your help with this issue, @karstengresch! I'll take a look at it and update the tutorial accordingly. It might take me a week or more.

[mraible]

@michael-wahler Does this PR solve the issue? https://github.com/mraible/jhipster7-demo/pull/13

[michael-wahler]

Unfortunately, I am getting this error now:

[INFO] Error: src/main/webapp/app/entities/post/list/post.component.html:37:82 - error TS2339: Property 'user' does not exist on type 'Pick<IBlog, "id" | "name">'.
[INFO] 
[INFO] 37         <small>Posted on {{ post.date | formatMediumDatetime }} by {{ post.blog?.user?.login }}</small>

despite class Blog having the corresponding properties/methods:

    @ManyToOne
    private User user;

   public User getUser() {
        return this.user;
    }

[mraible]

@michael-wahler I'm able to reproduce this problem. It seems it's an issue with the PostResource#getAllPosts() method and the fact that it's not eager-loading posts. Maybe there's something that needs to change in postRepository.findByBlogUserLoginOrderByDateDesc() to make it fetch the user as part of the blog?