Hi Noura,

I've solved the problem, when the patch version release it'll fixed.

You can track the detail at here

https://github.com/abpframework/abp/pull/17981 here's PR

Hi Can,

I've reproduced your case, you right it should also check with ; semicolon at the end. But when the app opening first time at the cookies, only have 2 item. That's why we should also check for without ; I've updated code as below

protected checkCookieConsent() {
  const decodedCookies = decodeURIComponent(this.document.cookie);
  this.showCookieConsent = !decodedCookies.includes(`${this.cookieKey}=true`);
}

It'll solve problem at 7.4.1 I've refunded your credit

Hello we've created issue https://github.com/abpframework/abp/issues/17923 we'll fix. I'll refund your credit after reproduce

Hello sudhakiran,

With the 7.4 version we're using authorization code flow which means auth process will be continue on the browser (server side), If you still want to use client side (password code flow) I'll try to re-produce and I'll reply the solution.

You can check the detail on Our YouTube live session

Hello jtallon,

I've re-produced your case, we've created a issue, I also refunded your credit,

You can fix the problem with the giving correct service. ServiceNameDetailViewService extended an abstract service and in this service there is a injected service as public readonly proxyService = inject(OrderService); can you please use this service in the template for the lookup-select components

Example

<abp-lookup-select
  cid="order-situation-id"
  formControlName="situationId"
  [getFn]="service.proxyService.getSituationLookup"
></abp-lookup-select>

[UPDATED 10/17/23]

Alternatively you can use this way

product-detail.abstract.service.ts

 public readonly proxyService = inject(ProductService);
 
 public readonly getSituationLookup = this.proxyService.getSituationsLookup();

Hello devpayoff,

Can you please send your package.json file's content. We are using version ~16.0.0 for @angular/* and @angular-* packages. That's why can you please normalize your angular packages. Also @abp/* & @volo/* package's version must be the same for example: ~7.3.0 it will install latest patch version because of ~ sign.

You can check version matrix with @abp and @angular packages at the templates folder.

If you sent me your package.json file I'll try to re-produce your case

I dont want to patch the user name property, I want to show a different property in there , instead of user name

Then you need to follow my 2.Way description. In that way you will be customize toolbar component

Hello mohammedalqaisi,

You can't create CRUD page for module in created app template project,

Instead you need to create module separately and give the application project with local reference with that way you can make module development.

I've refunded your credit

Hello,

You can use UserProfileService from @volo/ngx-lepton-x.core package for the patch userName property but it's not a good way

Example

import { Component, inject } from '@angular/core';
import { UserProfileService } from '@volo/ngx-lepton-x.core';

@Component({
  selector: 'app-root',
  template: `
    <abp-loader-bar></abp-loader-bar>
    <abp-dynamic-layout></abp-dynamic-layout>
    <abp-gdpr-cookie-consent></abp-gdpr-cookie-consent>
  `,
})
export class AppComponent {
  protected readonly userProfileService = inject(UserProfileService);

  constructor() {
    this.userProfileService.patchUser({
      userName: 'Masum ULU',
    });
  }
}

2.Way

You can extend toolbar-container and toolbar component and customize template

Step 1 (Create extended ToolbarContainerComponent)

import { Component } from '@angular/core';
import { AsyncPipe, NgFor, NgIf } from '@angular/common';
import {
  LpxCoreModule,
  LpxNavbarModule,
  LpxAvatarModule,
  LpxClickOutsideModule,
} from '@volo/ngx-lepton-x.core';
import { LpxContextMenuModule } from '@volosoft/ngx-lepton-x';
import { ToolbarContainerComponent } from '@volosoft/ngx-lepton-x/layouts';
import { MyToolbarComponent } from './toolbar.component';

@Component({
  standalone: true,
  selector: 'app-toolbar-container',
  template: `
    <lpx-toolbar [profileRef]="profileRef$" (profileClick)="toggleCtxMenu()">
      <ng-container
        *ngIf="{
          user: userProfileService.user$ | async,
          profileRef: profileRef$ | async
        } as data"
      >
        <lpx-context-menu
          *ngIf="data.profileRef"
          #menu="lpx-context-menu"
          (lpxClickOutside)="menu.close()"
          [exceptedRefs]="[data.profileRef]"
        >
          <lpx-context-menu-header>
            <div class="lpx-user-ctx-header">
              <div class="lpx-user-ctx-img">
                <lpx-avatar [avatar]="data.user?.avatar"></lpx-avatar>
              </div>
              <div class="lpx-user-ctx-info">
                <span class="lpx-context-menu-user-name">{{
                  data.user?.fullName || data.user?.userName
                }}</span>
                <span
                  *ngIf="data.user?.tenant?.name as tenantName"
                  class="lpx-context-menu-user-tenant"
                >
                  {{ tenantName }}
                </span>
                <span class="lpx-context-menu-user-email">{{ data.user?.email }}</span>
              </div>
            </div>
          </lpx-context-menu-header>

          <ng-container *ngFor="let actions of data.user?.userActionGroups">
            <lpx-context-menu-action-group>
              <lpx-navbar-routes [navbarItems]="actions" [routerItem]="false"></lpx-navbar-routes>
            </lpx-context-menu-action-group>
          </ng-container>
        </lpx-context-menu>
      </ng-container>
    </lpx-toolbar>
  `,
  imports: [
    NgIf,
    NgFor,
    AsyncPipe,
    LpxAvatarModule,
    LpxClickOutsideModule,
    LpxContextMenuModule,
    LpxCoreModule,
    LpxNavbarModule,
    MyToolbarComponent,
  ],
})
export class MyToolbarContainerComponent extends ToolbarContainerComponent {}

Step 2 (Create extended ToolbarComponent)

import { Component, ViewEncapsulation } from '@angular/core';
import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common';
import { LpxAvatarModule } from '@volo/ngx-lepton-x.core';
import { ToolbarComponent, LpxToolbarModule } from '@volosoft/ngx-lepton-x/layouts';

@Component({
  selector: 'lpx-toolbar',
  standalone: true,
  template: `
    <div class="lpx-toolbar">
      <ng-container *ngIf="userProfileService.user$ | async as user">
        <ng-content></ng-content>
        <nav class="lpx-toolbar">
          <ul class="lpx-nav-menu">
            <li
              *ngIf="authService.isUserExists$ | async; else loginBlock"
              #profileLink
              class="outer-menu-item lpx-user-menu"
              (click)="profileClick.emit()"
            >
              <a class="lpx-menu-item-link">
                <lpx-avatar [avatar]="user.avatar"></lpx-avatar>
                <!--UPDATE HERE-->
                <span class="lpx-menu-item-text">{{ user.fullName || user.userName }}</span>
                <!--UPDATE HERE-->
              </a>
            </li>
            <ng-template #loginBlock>
              <li class="outer-menu-item lpx-user-menu text-center">
                <a class="lpx-menu-item-link" (click)="navigateToLogin()">
                  <i class="bi bi-box-arrow-right"></i>
                </a>
              </li>
            </ng-template>
          </ul>

          <ng-container
            *ngTemplateOutlet="
              itemsTmp || defaultItemsTmp;
              context: { $implicit: toolbarService.items$ | async }
            "
          ></ng-container>
        </nav>
      </ng-container>
      <ng-template #defaultItemsTmp let-items>
        <lpx-toolbar-items [items]="items"></lpx-toolbar-items>
      </ng-template>
    </div>
  `,
  imports: [NgIf, AsyncPipe, NgTemplateOutlet, LpxAvatarModule, LpxToolbarModule],
  encapsulation: ViewEncapsulation.None,
})
export class MyToolbarComponent extends ToolbarComponent {}

Step 3 (Replace component in app.component.ts)

import { Component, inject } from '@angular/core';
import { ReplaceableComponentsService } from '@abp/ng.core';
import { eThemeLeptonXComponents } from '@volosoft/abp.ng.theme.lepton-x';
import { MyToolbarContainerComponent } from './lepton-x/components/toolbar/toolbar-container.component';

@Component({
  selector: 'app-root',
  template: `
    <abp-loader-bar></abp-loader-bar>
    <abp-dynamic-layout></abp-dynamic-layout>
    <abp-gdpr-cookie-consent></abp-gdpr-cookie-consent>
  `,
})
export class AppComponent {
  protected readonly replaceableService = inject(ReplaceableComponentsService);

  constructor() {
    this.replaceableService.add({
      key: eThemeLeptonXComponents.Toolbar,
      component: MyToolbarContainerComponent,
    });
  }
}