refactor(ui): switch to ant design

ovh · Nov 29, 2020 · 7d7a5fd · 7d7a5fd
1 parent f9df674
commit 7d7a5fd
Show file tree

Hide file tree

Showing 26 changed files with 2,166 additions and 1,959 deletions.
diff --git a/ui/dashboard/angular.json b/ui/dashboard/angular.json
@@ -27,9 +27,15 @@
             "tsConfig": "tsconfig.app.json",
             "aot": true,
             "assets": [
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+                "output": "/assets/"
+              }
             ],
             "styles": [
+              "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
               "src/styles.sass"
             ],
             "scripts": [],
@@ -92,6 +98,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
               "src/styles.sass"
             ],
             "scripts": []

diff --git a/ui/dashboard/package-lock.json b/ui/dashboard/package-lock.json
diff --git a/ui/dashboard/package.json b/ui/dashboard/package.json
@@ -30,7 +30,6 @@
     "@sentry/browser": "5.27.4",
     "@types/lodash-es": "4.17.3",
     "active-interval": "0.0.4",
-    "bluebird": "3.7.2",
     "bootstrap": "4.5.3",
     "brace": "0.11.1",
     "chart.js": "2.9.4",
@@ -41,6 +40,7 @@
     "js-yaml": "3.14.0",
     "lodash-es": "4.17.15",
     "moment": "2.29.1",
+    "ng-zorro-antd": "10.1.2",
     "ngx-chips": "2.2.2",
     "ngx-infinite-scroll": "10.0.0",
     "ngx-toastr": "13.1.0",

diff --git a/ui/dashboard/projects/utask-lib/src/lib/@components/input-tags/input-tags.component.ts b/ui/dashboard/projects/utask-lib/src/lib/@components/input-tags/input-tags.component.ts
@@ -14,17 +14,7 @@ class Suggestion {
 
 @Component({
     selector: 'lib-utask-input-tags',
-    template: `
-    <span #span>
-        <input type="text" #inputPlaceholder class="placeholder" value="" readonly="" autocomplete="off" spellcheck="false" tabindex="-1"/>
-        <input type="text" #inputMain class="main" [placeholder]="displayPlaceholder ? placeholder : ''"/>
-        <ul class="suggestions" *ngIf="suggestions.length && !suggestionsHide">
-            <li *ngFor="let item of suggestions; let index = index;"  [ngClass]="{'selected': suggestionIndex !== -1 && item.word === suggestions[suggestionIndex].word}" (click)="select(index);">
-                {{item.word}}
-            </li>
-        </ul>
-    </span>
-    `,
+    templateUrl: './input-tags.html',
     styleUrls: ['./input-tags.sass'],
 })
 export class InputTagsComponent implements OnChanges, AfterViewInit {
@@ -72,7 +62,7 @@ export class InputTagsComponent implements OnChanges, AfterViewInit {
             this.lastValueUpdated = this.inputMain.nativeElement.value;
         }
     }
-
+    
     ngAfterViewInit() {
         this.inputMain.nativeElement.addEventListener('input', e => {
             setTimeout(() => {

diff --git a/ui/dashboard/projects/utask-lib/src/lib/@components/input-tags/input-tags.html b/ui/dashboard/projects/utask-lib/src/lib/@components/input-tags/input-tags.html
@@ -0,0 +1,9 @@
+<span #span>
+	<input type="text" #inputPlaceholder class="placeholder" value="" readonly="" autocomplete="off" spellcheck="false" tabindex="-1"/>
+	<input type="text" #inputMain class="main" [placeholder]="displayPlaceholder ? placeholder : ''"/>
+	<ul class="suggestions" *ngIf="suggestions.length && !suggestionsHide">
+			<li *ngFor="let item of suggestions; let index = index;"  [ngClass]="{'selected': suggestionIndex !== -1 && item.word === suggestions[suggestionIndex].word}" (click)="select(index);">
+					{{item.word}}
+			</li>
+	</ul>
+</span>
diff --git a/ui/dashboard/projects/utask-lib/src/lib/@components/task-status/task-status.component.ts b/ui/dashboard/projects/utask-lib/src/lib/@components/task-status/task-status.component.ts
@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges } from '@angular/core';
+import Task from '../../@models/task.model';
+
+@Component({
+	selector: 'lib-utask-task-status',
+	templateUrl: './task-status.html',
+	styleUrls: ['./task-status.sass'],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TaskStatusComponent implements OnChanges {
+	@Input() task: Task;
+	percentage: number;
+
+	constructor(
+		private _cd: ChangeDetectorRef
+	) { }
+
+	ngOnChanges(): void {
+		if (!this.task) { return; }
+		this.percentage = Math.round(this.task.steps_done / this.task.steps_total * 100);
+		this._cd.markForCheck();
+	}
+}
diff --git a/ui/dashboard/projects/utask-lib/src/lib/@components/task-status/task-status.html b/ui/dashboard/projects/utask-lib/src/lib/@components/task-status/task-status.html
@@ -0,0 +1,9 @@
+<div class="wrapper {{task.state}}" *ngIf="task">
+  <div class="status">
+    <div class="text">{{task.state}}</div>
+  </div>
+  <div class="progress" *ngIf="percentage < 100 && percentage > 0">
+    <div class="bar" [ngStyle]="{ 'width': percentage + '%' }"></div>
+    <div class="text">{{percentage}}%</div>
+  </div>
+</div>
diff --git a/ui/dashboard/projects/utask-lib/src/lib/@components/task-status/task-status.sass b/ui/dashboard/projects/utask-lib/src/lib/@components/task-status/task-status.sass
@@ -0,0 +1,57 @@
+$color-danger: #dc3545
+$color-warning: #fd7e14
+$color-success: #28a745
+$color-primary: #007bff
+
+.wrapper
+  display: flex
+  flex-direction: column
+  color: #FFFFFF
+  height: 35px
+  width: 120px
+
+  &.DONE
+    background: $color-success
+  &.RUNNING
+    background-color: $color-primary
+    background-image: linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%)
+    background-size: 4rem 2rem, 100% 100%, 100% 100%
+    animation: animate-state-running 1s linear infinite
+  &.CANCELLED, &.WONTFIX
+    background: $color-warning
+  &.BLOCKED
+    background: $color-danger
+  &.TODO
+    background: $color-primary
+
+  .status
+    flex: 1
+    display: flex
+    flex-direction: row
+    align-items: center
+    .text
+      width: 100%
+      text-align: center
+      font-weight: bold
+
+  .progress
+    position: relative
+    height: 13px
+    width: 100%
+    .text
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+      position: absolute
+      font-size: 11px
+      line-height: 13px
+      text-align: center
+      font-weight: bold
+
+    .bar
+      position: relative
+      background: #000000
+      height: 100%
+      transition: width 0.25s
+      opacity: 0.2