feat(): update task swimlane

mixcore · Nov 8, 2023 · 5658ee0 · 5658ee0
1 parent 23cfb55
commit 5658ee0
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 19 deletions.
diff --git a/libs/mix-share/src/modules/task-manage/components/task-create/task-create.component.html b/libs/mix-share/src/modules/task-manage/components/task-create/task-create.component.html
@@ -1,5 +1,5 @@
 <div class="task-create" [formGroup]="taskForm">
-  <div class="text-l">Create Task</div>
+  <div class="text-l">Add New {{ parentTask ? 'Task' : 'Swimlane' }}</div>
 
   <ng-container *ngIf="parentTask">
     <div class="mt-4 mb-1 text-sub text-500">Task Type</div>

diff --git a/...share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.html b/...share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.html
@@ -3,7 +3,13 @@
     ><span class="mix-icon expand-icon text-xxl">expand_more</span>
   </mix-button>
 
-  <span>
+  <mix-user-avatar
+    *ngIf="userInfo() as info"
+    [userInfo]="info"
+    size="xs"
+  ></mix-user-avatar>
+
+  <span class="task-parent-card__title">
     {{ task.title }}
   </span>
 

diff --git a/...share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.scss b/...share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.scss
@@ -11,6 +11,12 @@
     transform: rotate(-90deg);
   }
 
+  &__title {
+    max-width: 240px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   &.--open {
     color: var(--blue-02, #008aa8);
     border-bottom: unset;

diff --git a/...x-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.ts b/...x-share/src/modules/task-manage/components/task-parent-card/task-parent-card.component.ts
@@ -1,14 +1,24 @@
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
-import { MixTaskNew } from '@mixcore/lib/model';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  signal,
+} from '@angular/core';
+import { MixTaskNew, UserListVm } from '@mixcore/lib/model';
+import { UserAvatarComponent } from '@mixcore/share/components';
+import { UserInfoStore } from '@mixcore/share/stores';
 import { MixButtonComponent } from '@mixcore/ui/button';
 import { DialogService } from '@ngneat/dialog';
+import { take } from 'rxjs';
 import { TaskCreateComponent } from '../task-create/task-create.component';
 
 @Component({
   selector: 'mix-task-parent-card',
   standalone: true,
-  imports: [CommonModule, MixButtonComponent],
+  imports: [CommonModule, MixButtonComponent, UserAvatarComponent],
   templateUrl: './task-parent-card.component.html',
   styleUrls: ['./task-parent-card.component.scss'],
 })
@@ -17,6 +27,8 @@ export class TaskParentCardComponent {
   @Input() public open = true;
   @Output() public expandClick = new EventEmitter();
   public dialog = inject(DialogService);
+  public userInfoStore = inject(UserInfoStore);
+  public userInfo = signal<UserListVm | undefined>(undefined);
 
   public addTask() {
     this.dialog.open(TaskCreateComponent, {
@@ -26,4 +38,13 @@ export class TaskParentCardComponent {
       },
     });
   }
+
+  public ngOnInit() {
+    if (!this.task.reporter) return;
+
+    this.userInfoStore
+      .getUserById(this.task.reporter)
+      .pipe(take(1))
+      .subscribe((info) => this.userInfo.set(info));
+  }
 }
diff --git a/libs/mix-share/src/modules/task-manage/task-manage.component.html b/libs/mix-share/src/modules/task-manage/task-manage.component.html
@@ -13,21 +13,21 @@
 
     <mix-task-filter></mix-task-filter>
 
-    <div class="task-manage__header">
-      <div
-        class="title text-uppercase text-truncate"
-        *ngFor="let status of taskStatuses"
-        [style.--color]="TaskStatusColors[status]"
-      >
-        {{ TaskStatusDisplay[status] }}
-      </div>
-    </div>
-
     <div
       *ngIf="store.vm$ | async as vm"
       class="task-manage__main-view"
       cdkDropListGroup
     >
+      <div class="task-manage__header">
+        <div
+          class="title text-uppercase text-truncate"
+          *ngFor="let status of taskStatuses"
+          [style.--color]="TaskStatusColors[status]"
+        >
+          {{ TaskStatusDisplay[status] }}
+        </div>
+      </div>
+
       <ng-container *ngIf="store.getParentTasks() | async as tasks">
         <mix-task-group-list
           *ngFor="let task of tasks; trackByProp: 'id'"

diff --git a/libs/mix-share/src/modules/task-manage/task-manage.component.scss b/libs/mix-share/src/modules/task-manage/task-manage.component.scss
@@ -8,8 +8,6 @@
     display: flex;
     width: 100%;
     gap: 12px;
-    padding: 0px 16px;
-    margin-top: 16px;
 
     .title {
       --color: #fff;
@@ -24,9 +22,9 @@
   }
 
   &__main-view {
-    width: 100%;
+    width: calc(100% - 28px);
     height: 100%;
-    padding: 0px 16px;
+    margin: 14px;
     display: flex;
     flex-direction: column;
     overflow: auto;