feat(): update endpoint

apps/mix-cms/src/app/components/user-avatar/user-avatar.component.html

@@ -0,0 +1,5 @@
+<tui-avatar [autoColor]="true"
+            [rounded]="true"
+            [size]="size"
+            [text]="userInfo.userName || userInfo.email || ''"
+            [tp]="userInfo.userName || userInfo.email || ''"></tui-avatar>

apps/mix-cms/src/app/components/user-avatar/user-avatar.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: inline-block;
+  border-radius: 50%;
+  z-index: 1;
+}

apps/mix-cms/src/app/components/user-avatar/user-avatar.component.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TuiAvatarModule } from '@taiga-ui/kit';
+import { TippyDirective } from '@ngneat/helipopper';
+import { UserListVm } from '@mixcore/lib/model';
+
+@Component({
+  selector: 'mix-user-avatar',
+  standalone: true,
+  imports: [CommonModule, TuiAvatarModule, TippyDirective],
+  templateUrl: './user-avatar.component.html',
+  styleUrls: ['./user-avatar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserAvatarComponent {
+  @Input() public userInfo!: UserListVm;
+  @Input() public size: 'l' | 's' | 'xs' = 'l';
+}

apps/mix-cms/src/app/components/user-select/user-select.component.html

@@ -9,6 +9,7 @@
               tuiOption>
         <div class="d-flex align-items-center gap-2">
           <tui-avatar [autoColor]="true"
+                      [rounded]="true"
                       [text]="item.userName || item.email || ''"
                       size="xs"></tui-avatar>
 
@@ -24,6 +25,7 @@
   <div class="d-flex align-items-center gap-2">
     <ng-container *ngIf="userDataMap[item] as item">
       <tui-avatar [autoColor]="true"
+                  [rounded]="true"
                   [text]="item.userName || item.email || ''"
                   size="xs"></tui-avatar>
 

apps/mix-cms/src/app/pages/portal/task-manage/components/task-card/task-card.component.html

@@ -8,10 +8,8 @@
     <div class="d-flex">
       <span *ngIf="userInfo"
             class="me-2">
-        <tui-avatar [autoColor]="true"
-                    [rounded]="true"
-                    [text]="userInfo.userName || userInfo.email || ''"
-                    size="xs"></tui-avatar>
+        <mix-user-avatar [userInfo]="userInfo"
+                         size="xs"></mix-user-avatar>
       </span>
 
       <span class="text-uppercase text-secondary">

apps/mix-cms/src/app/pages/portal/task-manage/components/task-card/task-card.component.ts

@@ -13,16 +13,16 @@ import {
   UserListVm,
 } from '@mixcore/lib/model';
 import { DialogService } from '@ngneat/dialog';
-import { TuiAvatarModule } from '@taiga-ui/kit';
 import { take } from 'rxjs';
+import { UserAvatarComponent } from '../../../../../components/user-avatar/user-avatar.component';
 import { UserInfoStore } from '../../../../../stores/user-info.store';
 import { TaskDetailModalComponent } from '../task-detail-modal/task-detail-modal.component';
 import { TaskPriorityComponent } from '../task-priority/task-priority.component';
 
 @Component({
   selector: 'mix-task-card',
   standalone: true,
-  imports: [CommonModule, TaskPriorityComponent, TuiAvatarModule],
+  imports: [CommonModule, TaskPriorityComponent, UserAvatarComponent],
   templateUrl: './task-card.component.html',
   styleUrls: ['./task-card.component.scss'],
 })

apps/mix-cms/src/app/pages/portal/task-manage/components/task-filter/task-filter.component.html

@@ -10,13 +10,11 @@
     </ng-container>
 
     <ng-container *ngFor="let user of vm.data">
-      <tui-avatar class="avatar"
-                  [class.--active]="isUserActive(userIds, user.id)"
-                  [autoColor]="true"
-                  [rounded]="true"
-                  [text]="user.userName || user.email || ''"
-                  (click)="filterStore.toggleUserIds(user.id)"
-                  size="s"></tui-avatar>
+      <mix-user-avatar class="avatar"
+                       [class.--active]="isUserActive(userIds, user.id)"
+                       [userInfo]="user"
+                       (click)="filterStore.toggleUserIds(user.id)"
+                       size="s"></mix-user-avatar>
     </ng-container>
   </div>
 

apps/mix-cms/src/app/pages/portal/task-manage/components/task-filter/task-filter.component.ts

@@ -1,21 +1,22 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   DestroyRef,
   OnInit,
   inject,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MixInputComponent } from '@mixcore/ui/input';
-import { MixButtonComponent } from '@mixcore/ui/button';
-import { UserInfoStore } from '../../../../../stores/user-info.store';
-import { TuiAvatarModule, TuiFilterModule } from '@taiga-ui/kit';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { TaskStore } from '../../store/task.store';
+import { MixButtonComponent } from '@mixcore/ui/button';
+import { MixInputComponent } from '@mixcore/ui/input';
+import { SkeletonLoadingComponent } from '@mixcore/ui/skeleton';
 import { tuiPure } from '@taiga-ui/cdk';
-import { TaskFilterStore } from '../../store/filter.store';
 import { TuiLinkModule } from '@taiga-ui/core';
-import { SkeletonLoadingComponent } from '@mixcore/ui/skeleton';
+import { TuiFilterModule } from '@taiga-ui/kit';
+import { UserAvatarComponent } from '../../../../../components/user-avatar/user-avatar.component';
+import { UserInfoStore } from '../../../../../stores/user-info.store';
+import { TaskFilterStore } from '../../store/filter.store';
+import { TaskStore } from '../../store/task.store';
 
 @Component({
   selector: 'mix-task-filter',
@@ -25,7 +26,7 @@ import { SkeletonLoadingComponent } from '@mixcore/ui/skeleton';
     ReactiveFormsModule,
     MixInputComponent,
     MixButtonComponent,
-    TuiAvatarModule,
+    UserAvatarComponent,
     TuiFilterModule,
     TuiLinkModule,
     SkeletonLoadingComponent,

apps/mix-cms/src/app/pages/portal/user/components/user-detail-dialog/user-detail-dialog.component.html

@@ -0,0 +1 @@
+<p>user-detail-dialog works!</p>

apps/mix-cms/src/app/pages/portal/user/components/user-detail-dialog/user-detail-dialog.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'mix-user-detail-dialog',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './user-detail-dialog.component.html',
+  styleUrls: ['./user-detail-dialog.component.scss'],
+})
+export class UserDetailDialogComponent {}

apps/mix-cms/src/app/pages/portal/user/user.component.ts

@@ -18,6 +18,7 @@ import { MixSubToolbarComponent } from '../../../components/sub-toolbar/sub-tool
 import { UserStore } from '../../../stores/user.store';
 import { CreateUserDialogComponent } from './components/create-user-dialog/create-user-dialog.component';
 import { UserService } from './services/user.service';
+import { UserDetailDialogComponent } from './components/user-detail-dialog/user-detail-dialog.component';
 
 @Component({
   selector: 'mix-user',
@@ -51,22 +52,24 @@ export class UserComponent extends BaseComponent {
   public contextMenus: TableContextMenu<UserListVm>[] = [
     {
       label: 'Edit',
-      action: (item: UserListVm) => {
-        //
-      },
       icon: 'edit',
+      action: (item: UserListVm) => this.editUser(item),
     },
     {
       label: 'Delete',
-      action: (item: UserListVm) => this.userService.deleteUser(item.id),
       icon: 'delete',
+      action: (item: UserListVm) => this.userService.deleteUser(item.id),
     },
   ];
 
   public showDialog(): void {
     this.dialog.open(CreateUserDialogComponent);
   }
 
+  public editUser(item: UserListVm): void {
+    this.dialog.open(UserDetailDialogComponent);
+  }
+
   @tuiPure
   public getNameFromMail(name: string) {
     const lasta = name.lastIndexOf('@');

apps/mix-cms/src/app/stores/user-info.store.ts

@@ -3,7 +3,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { PaginationRequestModel, UserListVm } from '@mixcore/lib/model';
 import { MixApiFacadeService } from '@mixcore/share/api';
 import { ComponentStore } from '@ngrx/component-store';
-import { delay, filter, map, switchMap, tap } from 'rxjs';
+import { filter, map, switchMap, tap } from 'rxjs';
 import { BaseState, DEFAULT_DATA } from './base-crud.store';
 
 @Injectable({ providedIn: 'root' })

apps/mix-cms/src/assets/styles/dialog.scss

@@ -14,10 +14,22 @@ ngneat-dialog {
   .ngneat-dialog-backdrop {
     .ngneat-dialog-content {
       padding: 18px;
-      animation: dialog-open 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      animation: unset !important;
+      box-shadow: unset !important;
     }
 
-    animation: dialog-open-backdrop 0.2s !important;
+    animation: unset !important;
+  }
+}
+
+@keyframes dialog-open-2 {
+  0% {
+    opacity: 0.5;
+    transform: scale(0.7);
+  }
+  100% {
+    transform: none;
+    opacity: 1;
   }
 }
 

apps/mix-cms/src/assets/styles/tippy.scss

@@ -1,5 +1,7 @@
-.tippy-content {
-  padding: 5px 0px !important;
+.tippy-variation-popper {
+  .tippy-content {
+    padding: 5px 0px !important;
+  }
 }
 
 .tippy-arrow {

apps/mix-cms/src/assets/styles/ultilities.scss

@@ -2,13 +2,13 @@
   cursor: default;
   font-weight: 500;
   margin-bottom: 4px !important;
-  font-size: 14px;
+  font-size: var(--text-size-s);
   display: block;
 }
 
 .content-sub-label {
   opacity: 0.7;
-  font-size: 12px;
+  font-size: var(--text-size-xs);
   line-height: 5px;
 }