fix(ui): better label modals (#3309)

* fix(ui): better label modals close #3286 Signed-off-by: Benjamin Coenen <benjamin.coenen@corp.ovh.com>
ovh · Sep 11, 2018 · 9b677af · 9b677af
1 parent 0476cc2
commit 9b677af
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 : ",