feat(): add timeline

mixcore · Dec 14, 2023 · e7c9502 · e7c9502
1 parent 8656839
commit e7c9502
Show file tree

Hide file tree

Showing 23 changed files with 336 additions and 148 deletions.
diff --git a/apps/mix-cms/src/app/pages/portal/order/order.component.html b/apps/mix-cms/src/app/pages/portal/order/order.component.html
@@ -77,10 +77,12 @@
           <ng-template let-data
                        mixColumnCell>
             <div>
-              {{ data.createdDateTime | mixDate | date: 'dd/MM/yyyy, hh:mm a' }}
+              {{
+                data.createdDateTime | mixDate | date : 'dd/MM/yyyy, hh:mm a'
+              }}
             </div>
             <div class="text-sub text-s">
-              {{ data.createdDateTime | mixDate | relativeTime | titlecase }}
+              {{ data.createdDateTime | mixDate | relativeTime }}
             </div>
           </ng-template>
         </div>
@@ -93,7 +95,7 @@
             <div *ngIf="data.total"
                  class="text-600 d-flex gap-2">
               <div>
-                {{ data.total | currency: data.currency }}
+                {{ data.total | currency : data.currency }}
               </div>
             </div>
             <div *ngIf="!data.total"

diff --git a/apps/mix-cms/src/app/pages/portal/post/post.component.html b/apps/mix-cms/src/app/pages/portal/post/post.component.html
@@ -145,7 +145,7 @@
                        mixColumnCell>
             <div class="d-flex align-items-center">
               <img alt="preview"
-                   [src]="data.image | mixImg: 'XS'"
+                   [src]="data.image | mixImg : 'XS'"
                    style="object-fit: cover; height: 40px"
                    width="60"
                    height="30">
@@ -159,11 +159,13 @@
           <ng-template let-data
                        mixColumnCell>
             <div class="text-500">
-              {{ data.createdDateTime | mixDate | date: 'dd/MM/yyyy, hh:mm a' }}
+              {{
+                data.createdDateTime | mixDate | date : 'dd/MM/yyyy, hh:mm a'
+              }}
             </div>
 
             <div class="text-sub text-s">
-              {{ data.createdDateTime | mixDate | relativeTime | titlecase }}
+              {{ data.createdDateTime | mixDate | relativeTime }}
             </div>
           </ng-template>
         </div>

diff --git a/apps/mix-cms/src/app/pages/portal/promotion/promotion-detail/promotion-detail.component.ts b/apps/mix-cms/src/app/pages/portal/promotion/promotion-detail/promotion-detail.component.ts
@@ -102,12 +102,12 @@ export class PromotionDetailComponent extends DetailPageKit {
               if (this.promotionData.fromDate)
                 this.promotionData.fromDate = this.mixDatePipe.transform(
                   this.promotionData.fromDate
-                );
+                ) as string | null;
 
               if (this.promotionData.toDate)
                 this.promotionData.toDate = this.mixDatePipe.transform(
                   this.promotionData.toDate
-                );
+                ) as string | null;
 
               this.promotionForm.patchValue(this.promotionData as any);
 

diff --git a/apps/mix-kanban/src/app/app.component.scss b/apps/mix-kanban/src/app/app.component.scss
@@ -10,118 +10,4 @@
   width: 100%;
   height: 100%;
   background-image: url(https://png.pngtree.com/png-clipart/20220429/original/pngtree-hexagon-abstract-shape-border-blue-tech-png-image_7587896.png) !important;
-  // background-image: radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(160, 51, 255, 0.024) 0,
-  //     rgba(160, 51, 255, 0) 50%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(160, 51, 255, 0.04) 0,
-  //     rgba(160, 51, 255, 0) 75%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(160, 51, 255, 0.064) 0,
-  //     rgba(160, 51, 255, 0) 100%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(24, 119, 242, 0.024) 0,
-  //     rgba(24, 119, 242, 0) 50%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(24, 119, 242, 0.04) 0,
-  //     rgba(24, 119, 242, 0) 75%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(24, 119, 242, 0.064) 0,
-  //     rgba(24, 119, 242, 0) 100%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(255, 108, 92, 0.024) 0,
-  //     rgba(255, 108, 92, 0) 50%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(255, 108, 92, 0.04) 0,
-  //     rgba(255, 108, 92, 0) 75%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(255, 108, 92, 0.064) 0,
-  //     rgba(255, 108, 92, 0) 100%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(245, 206, 51, 0.024) 0,
-  //     rgba(245, 206, 51, 0) 50%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(245, 206, 51, 0.04) 0,
-  //     rgba(245, 206, 51, 0) 75%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(245, 206, 51, 0.064) 0,
-  //     rgba(245, 206, 51, 0) 100%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(37, 211, 102, 0.024) 0,
-  //     rgba(37, 211, 102, 0) 50%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(37, 211, 102, 0.04) 0,
-  //     rgba(37, 211, 102, 0) 75%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(37, 211, 102, 0.064) 0,
-  //     rgba(37, 211, 102, 0) 100%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(24, 119, 242, 0.024) 0,
-  //     rgba(24, 119, 242, 0) 50%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(24, 119, 242, 0.04) 0,
-  //     rgba(24, 119, 242, 0) 75%
-  //   ),
-  //   radial-gradient(
-  //     50% 50% at 50% 50%,
-  //     rgba(24, 119, 242, 0.064) 0,
-  //     rgba(24, 119, 242, 0) 100%
-  //   );
-  // background-size: 156.45vw 99.03vw, 156.45vw 99.03vw, 156.45vw 99.03vw,
-  //   226.86vw 145.44vw, 226.86vw 145.44vw, 226.86vw 145.44vw, 171.96vw 110.31vw,
-  //   171.96vw 110.31vw, 171.96vw 110.31vw, 130.29vw 83.58vw, 130.29vw 83.58vw,
-  //   130.29vw 83.58vw, 198vw 126.9vw, 198vw 126.9vw, 198vw 126.9vw, 300vw 192vw,
-  //   300vw 192vw, 300vw 192vw;
-  // background-attachment: fixed;
-  // background-position: 37.97vw calc(((300vw - 100vh) / 2 - 85.77vw) * -1),
-  //   37.97vw calc(((300vw - 100vh) / 2 - 85.77vw) * -1),
-  //   37.97vw calc(((300vw - 100vh) / 2 - 85.77vw) * -1),
-  //   -100vw calc(((300vw - 100vh) / 2 - 154.56vw) * -1),
-  //   -100vw calc(((300vw - 100vh) / 2 - 154.56vw) * -1),
-  //   -100vw calc(((300vw - 100vh) / 2 - 154.56vw) * -1),
-  //   13.34vw calc(((300vw - 100vh) / 2 - 53.88vw) * -1),
-  //   13.34vw calc(((300vw - 100vh) / 2 - 53.88vw) * -1),
-  //   13.34vw calc(((300vw - 100vh) / 2 - 53.88vw) * -1),
-  //   10.64vw calc(((300vw - 100vh) / 2 - 17.19vw) * -1),
-  //   10.64vw calc(((300vw - 100vh) / 2 - 17.19vw) * -1),
-  //   10.64vw calc(((300vw - 100vh) / 2 - 17.19vw) * -1),
-  //   -49vw calc(((300vw - 100vh) / 2 - 41.1vw) * -1),
-  //   -49vw calc(((300vw - 100vh) / 2 - 41.1vw) * -1),
-  //   -49vw calc(((300vw - 100vh) / 2 - 41.1vw) * -1),
-  //   -100vw calc(((300vw - 100vh) / 2 - 78vw) * -1),
-  //   -100vw calc(((300vw - 100vh) / 2 - 78vw) * -1),
-  //   -100vw calc(((300vw - 100vh) / 2 - 78vw) * -1);
 }
diff --git a/apps/mix-kanban/src/app/app.routes.ts b/apps/mix-kanban/src/app/app.routes.ts
@@ -21,9 +21,21 @@ export const CMS_ROUTES = {
       path: 'dashboard',
       fullPath: 'app/dashboard',
     },
-    task: {
-      path: 'tasks',
-      fullPath: 'app/tasks',
+    workspace: {
+      path: 'workspace',
+      fullPath: 'app/workspace',
+    },
+    board: {
+      path: 'board',
+      fullPath: 'app/workspace/board',
+    },
+    project: {
+      path: 'project',
+      fullPath: 'app/workspace/project',
+    },
+    timeline: {
+      path: 'timeline',
+      fullPath: 'app/workspace/timeline',
     },
   },
 };

diff --git a/apps/mix-kanban/src/app/pages/portal/portal.routes.ts b/apps/mix-kanban/src/app/pages/portal/portal.routes.ts
@@ -11,8 +11,8 @@ export const PortalRoutes: Routes = [
     data: breadcrumbName('Dashboard'),
   },
   {
-    path: CMS_ROUTES.portal.task.path,
-    data: breadcrumbName('Task Management'),
+    path: CMS_ROUTES.portal.workspace.path,
+    data: breadcrumbName('Workspace'),
     loadChildren: () =>
       import('@mixcore/module/task').then((m) => m.taskManagementRoutes),
   },

diff --git a/apps/mix-kanban/src/app/shares/consts/app.menu.ts b/apps/mix-kanban/src/app/shares/consts/app.menu.ts
@@ -14,22 +14,22 @@ export const APP_MENU = [
     ],
   },
   {
-    title: 'Projects',
+    title: 'Project',
     icon: 'view_kanban',
     children: [
       {
-        title: 'Project',
-        url: CMS_ROUTES.portal.task.fullPath,
+        title: 'Setting',
+        url: CMS_ROUTES.portal.project.fullPath,
         icon: 'view_kanban',
       },
       {
         title: 'Board',
-        url: CMS_ROUTES.portal.task.fullPath,
+        url: CMS_ROUTES.portal.board.fullPath,
         icon: 'view_kanban',
       },
       {
         title: 'Timeline',
-        url: CMS_ROUTES.portal.task.fullPath,
+        url: CMS_ROUTES.portal.timeline.fullPath,
         icon: 'view_kanban',
       },
     ],

diff --git a/apps/mix-kanban/src/index.html b/apps/mix-kanban/src/index.html
@@ -20,9 +20,6 @@
       rel="stylesheet"
     />
 
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
-
-
     <link rel="manifest" href="manifest.webmanifest" />
     <meta name="theme-color" content="#1976d2" />
   </head>

diff --git a/libs/mix-share/src/bases/base-appconfig.ts b/libs/mix-share/src/bases/base-appconfig.ts
@@ -103,7 +103,6 @@ export const BaseAppProvider = [
       shouldCoalesceRunChangeDetection: true,
     }),
   },
-
   {
     provide: ERROR_MAP,
     useValue: errorMap,

diff --git a/libs/mix-share/src/modules/task-manage/board/board.component.html b/libs/mix-share/src/modules/task-manage/board/board.component.html
@@ -11,8 +11,7 @@
     <mix-task-filter></mix-task-filter>
 
     <div *ngIf="store.state$$() as vm"
-         class="board__main-view"
-         cdkDropListGroup>
+         class="board__main-view">
       <!-- Header -->
       <mix-task-header></mix-task-header>
 
@@ -25,7 +24,8 @@
       <!-- Loop task -->
       @for (task of tasks; track task.id) {
       <mix-task-group-list [parentTask]="task"
-                           [taskStatuses]="taskStatuses">
+                           [taskStatuses]="taskStatuses"
+                           cdkDropListGroup>
       </mix-task-group-list>
       } } }
     </div>

diff --git a/libs/mix-share/src/modules/task-manage/board/board.component.scss b/libs/mix-share/src/modules/task-manage/board/board.component.scss
@@ -1,5 +1,5 @@
 .board {
-  --task-min-col-w: 200px;
+  --task-min-col-w: 250px;
   --task-col-w: 320px;
   --task-list-bg: rgba(244, 244, 244, 1);
   --task-col-padding: 8px 16px;

diff --git a/...are/src/modules/task-manage/components/task-date-display/task-date-display.component.html b/...are/src/modules/task-manage/components/task-date-display/task-date-display.component.html
@@ -1,3 +1,9 @@
 <div class="task-date-display">
-  {{ task.fromDate | date: 'hh:MM:yyyy' }}
+  <span class="mix-icon me-1">schedule</span>
+  <span>
+    {{ task.fromDate | date : 'dd MMM yyyy' }}
+  </span>
+  <span *ngIf="task.dueDate">
+    &nbsp;- {{ task.dueDate | date : 'dd MMM yyyy' }}
+  </span>
 </div>
diff --git a/...are/src/modules/task-manage/components/task-date-display/task-date-display.component.scss b/...are/src/modules/task-manage/components/task-date-display/task-date-display.component.scss
@@ -1,6 +1,11 @@
 .task-date-display {
   background-color: var(--success-color);
   color: var(--success-color-text);
-  padding: 4px;
+  padding: 4px 6px;
   width: fit-content;
+  height: fit-content;
+  display: flex;
+  align-items: center;
+  border-radius: 2px;
+  line-height: 1;
 }
diff --git a/libs/mix-share/src/modules/task-manage/index.ts b/libs/mix-share/src/modules/task-manage/index.ts
@@ -1 +1 @@
-export * from './task-manange.route';
+export * from './task-manage.route';
diff --git a/...modules/task-manage/task-manange.route.ts → .../modules/task-manage/task-manage.route.ts b/...modules/task-manage/task-manange.route.ts → .../modules/task-manage/task-manage.route.ts
@@ -16,6 +16,13 @@ export const taskManagementRoutes: Routes = [
         loadComponent: () =>
           import('./project/project.component').then((c) => c.ProjectComponent),
       },
+      {
+        path: 'timeline',
+        loadComponent: () =>
+          import('./timeline/timeline.component').then(
+            (c) => c.TimelineComponent
+          ),
+      },
       {
         path: '',
         redirectTo: 'board',

diff --git a/libs/mix-share/src/modules/task-manage/timeline/timeline.component.html b/libs/mix-share/src/modules/task-manage/timeline/timeline.component.html
@@ -0,0 +1,60 @@
+<div *ngIf="loadingState() as loading"
+     class="data-table-page board">
+  <div class="data-table-page__main-container">
+    <mix-sub-toolbar [description]="'View'"
+                     [title]="'Timeline'">
+      <mix-button size="s"><span class="material-symbols-outlined"> add </span>&nbsp;
+        {{ 'New' | transloco }}</mix-button>
+    </mix-sub-toolbar>
+
+    <div class="timeline__toolbar">
+      <form [formGroup]="modeForm">
+        <div class="group"
+             [collapsed]="true"
+             tuiGroup>
+          <tui-radio-block *ngFor="let option of modeOptions"
+                           [hideRadio]="true"
+                           [item]="option"
+                           contentAlign="right"
+                           formControlName="value"
+                           size="s">
+            {{ option | titlecase }}
+          </tui-radio-block>
+        </div>
+      </form>
+    </div>
+
+    <div class="timeline__main-view">
+      <ngx-gantt #gantt
+                 *ngIf="items"
+                 class="h-100 w-100"
+                 [draggable]="true"
+                 [groups]="groups"
+                 [items]="items"
+                 [multiple]="true"
+                 [selectable]="true"
+                 [viewType]="viewType">
+        <ngx-gantt-table>
+          <ngx-gantt-column name="Title"
+                            width="200px">
+            <ng-template #cell
+                         let-item="item"> {{ item.title }} </ng-template>
+          </ngx-gantt-column>
+
+          <ngx-gantt-column name="Info"
+                            width="300px">
+            <ng-template #cell
+                         let-item="item">
+              <div class="h-100 d-flex gap-1 align-items-center">
+                <img alt="type"
+                     [src]="TaskTypeIcon[item.task.type]">
+
+                <task-date-display [task]="item.task"></task-date-display>
+              </div>
+            </ng-template>
+          </ngx-gantt-column>
+        </ngx-gantt-table>
+      </ngx-gantt>
+    </div>
+  </div>
+</div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -103,7 +103,6 @@ export const BaseAppProvider = [ @@
           shouldCoalesceRunChangeDetection: true,
         }),
       },
       {
         provide: ERROR_MAP,
         useValue: errorMap,
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from './task-manange.route';
		export * from './task-manage.route';