From 9b677af8697923cd6379e48cde2746c82153f325 Mon Sep 17 00:00:00 2001
From: Coenen Benjamin <benjamin.coenen@hotmail.com>
Date: Tue, 11 Sep 2018 13:30:33 +0200
Subject: [PATCH] fix(ui): better label modals (#3309)

* fix(ui): better label modals

close #3286
Signed-off-by: Benjamin Coenen <benjamin.coenen@corp.ovh.com>
---
 .../labels/edit/labels.edit.component.html    | 23 ++++++++++++++++---
 .../labels/edit/labels.edit.component.scss    |  4 +++-
 .../labels/edit/labels.edit.component.ts      | 21 ++++++++++++++---
 .../labels/workflow.list.labels.component.ts  |  2 ++
 ui/src/assets/i18n/en.json                    |  1 +
 ui/src/assets/i18n/fr.json                    |  1 +
 6 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/ui/src/app/shared/labels/edit/labels.edit.component.html b/ui/src/app/shared/labels/edit/labels.edit.component.html
index 9f0c799576..c192a7b88a 100644
--- a/ui/src/app/shared/labels/edit/labels.edit.component.html
+++ b/ui/src/app/shared/labels/edit/labels.edit.component.html
@@ -1,7 +1,8 @@
 <ng-template let-context let-modal="modal" #labelsEditModal>
     <div class="header">{{ 'common_labels' | translate }}</div>
-    <div class="content">
+    <div class="content labels-edit">
         <div class="ui form">
+          <div class="ui info message" *ngIf="!labels || labels.length === 0">{{ 'project_label_no' | translate }}</div>
           <div class="inline fields" *ngFor="let label of labels">
             <label>{{'common_name' | translate}}</label>
             <div class="field">
@@ -18,11 +19,27 @@
               <app-delete-button (event)="deleteLabel(label)"></app-delete-button>
             </div>
           </div>
+          <div class="inline fields" [class.mt5]="!labels || labels.length === 0">
+            <label>{{'common_name' | translate}}</label>
+            <div class="field">
+              <input type="text" [placeholder]="'common_name' | translate" [(ngModel)]="newLabel.name">
+            </div>
+            <label>{{'common_color' | translate}}</label>
+            <div class="field">
+              <input type="text" placeholder="#FF0000" [(ngModel)]="newLabel.color">
+            </div>
+            <div class="field">
+              <i class="circle icon" [style.color]="newLabel.color"></i>
+            </div>
+            <div class="field">
+              <button class="ui green button" [disabled]="loading" [class.loading]="loading" (click)="createLabel()"><i class="plus icon"></i>{{ 'btn_add' | translate}}</button>
+            </div>
+          </div>
         </div>
     </div>
     <div class="actions">
-        <button class="ui grey button" [disabled]="loading" (click)="modal.approve(true)">{{ 'common_close' | translate }}</button>
-        <button class="ui green button" *ngIf="project.permission === permission.READ_WRITE_EXECUTE" [disabled]="loading" [class.loading]="loading" (click)="saveLabels()">
+        <button class="ui grey button" [disabled]="loading" [class.loading]="loading" (click)="modal.approve(true)">{{ 'common_close' | translate }}</button>
+        <button class="ui green button" *ngIf="project.permission === permission.READ_WRITE_EXECUTE" [disabled]="loading" [class.loading]="loading" (click)="saveLabels(true)">
             {{ 'btn_save' | translate }}
         </button>
     </div>
diff --git a/ui/src/app/shared/labels/edit/labels.edit.component.scss b/ui/src/app/shared/labels/edit/labels.edit.component.scss
index c26fcd9181..5a0393767e 100644
--- a/ui/src/app/shared/labels/edit/labels.edit.component.scss
+++ b/ui/src/app/shared/labels/edit/labels.edit.component.scss
@@ -1,3 +1,5 @@
 .labels-edit {
-  
+  .mt5 {
+    margin-top: 5px;
+  }
 }
diff --git a/ui/src/app/shared/labels/edit/labels.edit.component.ts b/ui/src/app/shared/labels/edit/labels.edit.component.ts
index 21ce8e664e..a7eb5b6779 100644
--- a/ui/src/app/shared/labels/edit/labels.edit.component.ts
+++ b/ui/src/app/shared/labels/edit/labels.edit.component.ts
@@ -21,6 +21,7 @@ export class LabelsEditComponent {
     modalConfig: TemplateModalConfig<boolean, boolean, void>;
 
     labels: Label[];
+    newLabel: Label;
     permission = PermissionValue;
     loading = false;
 
@@ -32,6 +33,7 @@ export class LabelsEditComponent {
         if (!this.project) {
             return;
         }
+        this.newLabel = new Label();
         this.labels = cloneDeep(this.project.labels);
         this.modalConfig = new TemplateModalConfig<boolean, boolean, void>(this.labelsEditModal);
         this.modalConfig.mustScroll = true;
@@ -42,13 +44,26 @@ export class LabelsEditComponent {
         this.labels = this.labels.filter((lbl) => lbl.name !== label.name);
     }
 
-    saveLabels() {
+    createLabel() {
+        if (!this.labels) {
+            this.labels = [];
+        }
+        this.labels.push(this.newLabel);
+        this.saveLabels();
+    }
+
+    saveLabels(close?: boolean) {
         this.loading = true;
         this._projectStore.updateLabels(this.project.key, this.labels)
-            .pipe(finalize(() => this.loading = false))
+            .pipe(finalize(() => {
+                this.loading = false;
+                this.newLabel = new Label();
+            }))
             .subscribe((proj) => {
                 this.project.labels = proj.labels;
-                this.modal.approve(true);
+                if (close) {
+                    this.modal.approve(true);
+                }
             });
     }
 }
diff --git a/ui/src/app/views/project/show/workflow/labels/workflow.list.labels.component.ts b/ui/src/app/views/project/show/workflow/labels/workflow.list.labels.component.ts
index ffc9b8bcb8..54d5cf28e5 100644
--- a/ui/src/app/views/project/show/workflow/labels/workflow.list.labels.component.ts
+++ b/ui/src/app/views/project/show/workflow/labels/workflow.list.labels.component.ts
@@ -33,6 +33,8 @@ export class ProjectWorkflowListLabelsComponent {
   @Input('workflows')
   set workflows(workflows: IdName[]) {
     this._workflows = workflows;
+    this.workflowLabelsMap = {};
+    this.workflowLabelsMapByLabels = {};
     if (workflows) {
       workflows.forEach((wf) => {
         this.workflowLabelsMap[wf.name] = {};
diff --git a/ui/src/assets/i18n/en.json b/ui/src/assets/i18n/en.json
index 3602fdb161..678c232036 100644
--- a/ui/src/assets/i18n/en.json
+++ b/ui/src/assets/i18n/en.json
@@ -587,6 +587,7 @@
   "project_variable_list_title": "List of project variables: ",
   "project_variable_form_title": "Add a new variable: ",
   "project_workflows_list": "List of workflows in the project: ",
+  "project_label_no": "There is no label configured in this project.",
 
   "platform_add_title" : "Link a platform: ",
   "platform_list_title" : "Linked platform list: ",
diff --git a/ui/src/assets/i18n/fr.json b/ui/src/assets/i18n/fr.json
index e83f71d9dc..40b6a9fcdc 100644
--- a/ui/src/assets/i18n/fr.json
+++ b/ui/src/assets/i18n/fr.json
@@ -587,6 +587,7 @@
   "project_variable_list_title": "Liste des variables du projet: ",
   "project_variable_form_title": "Ajouter une nouvelle variable: ",
   "project_workflows_list": "Liste des workflows du projet : ",
+  "project_label_no": "Il n'y a pas de label configuré dans ce projet.",
 
   "platform_add_title" : "Lier une plateforme : ",
   "platform_list_title" : "Liste des plateformes liées : ",