angular-ui: improve inactive user ux

npm/ng-packs/packages/identity/src/lib/defaults/default-users-entity-props.ts

@@ -1,5 +1,7 @@
+import { LocalizationService } from '@abp/ng.core';
 import { IdentityUserDto } from '@abp/ng.identity/proxy';
 import { EntityProp, ePropType } from '@abp/ng.theme.shared/extensions';
+import { of } from 'rxjs';
 
 export const DEFAULT_USERS_ENTITY_PROPS = EntityProp.createMany<IdentityUserDto>([
   {
@@ -8,6 +10,20 @@ export const DEFAULT_USERS_ENTITY_PROPS = EntityProp.createMany<IdentityUserDto>
     displayName: 'AbpIdentity::UserName',
     sortable: true,
     columnWidth: 250,
+    valueResolver: data => {
+      const l10n = data.getInjected(LocalizationService);
+      const t = l10n.instant.bind(l10n);
+
+      const inactiveIcon = `<i title="${t(
+        'AbpIdentity::ThisUserIsNotActiveMessage',
+      )}" class="fas fa-ban text-danger mr-1"></i>`;
+
+      return of(
+        `
+        ${!data.record.isActive ? inactiveIcon : ''}
+        <span class="${!data.record.isActive ? 'text-muted' : ''}">${data.record.userName}</span>`,
+      );
+    },
   },
   {
     type: ePropType.String,