Merge pull request #305 from TIBCOSoftware/app-model/extra

Style details and small features updated.
project-flogo · Jan 31, 2017 · 1b4905e · 1b4905e
2 parents 98c95e2 + 2838964
commit 1b4905e
Show file tree

Hide file tree

Showing 26 changed files with 268 additions and 129 deletions.
diff --git a/src/client/app/flogo.apps.details/components/application.component.less b/src/client/app/flogo.apps.details/components/application.component.less
@@ -72,6 +72,7 @@
   text-transform: uppercase;
   min-width: 124px;
   height: 40px;
+  display: none;
   &:nth-child(2) {
     margin: 0 15px;
   }

diff --git a/src/client/app/flogo.apps.details/components/application.component.ts b/src/client/app/flogo.apps.details/components/application.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input, Output, SimpleChanges, OnChanges, OnInit, ViewChild, EventEmitter } from '@angular/core';
+
 import { TranslateService } from 'ng2-translate/ng2-translate';
 import { IFlogoApplicationModel, IFlogoApplicationFlowModel } from '../../../common/application.model';
 import { AppDetailService, ApplicationDetail, ApplicationDetailState } from '../../flogo.apps/services/apps.service';
@@ -22,6 +23,7 @@ export class FlogoApplicationComponent implements OnChanges, OnInit {
 
   @Output() flowSelected: EventEmitter<IFlogoApplicationFlowModel> = new EventEmitter<IFlogoApplicationFlowModel>();
   @Output() flowAdded: EventEmitter<IFlogoApplicationFlowModel> = new EventEmitter<IFlogoApplicationFlowModel>();
+  @Output() flowDeleted: EventEmitter<IFlogoApplicationModel> = new EventEmitter<IFlogoApplicationModel>();
   @Output() onDeletedApp: EventEmitter<IFlogoApplicationModel> = new EventEmitter<IFlogoApplicationModel>();
 
   application: IFlogoApplicationModel;
@@ -128,6 +130,10 @@ export class FlogoApplicationComponent implements OnChanges, OnInit {
     this.flowSelected.emit(flow);
   }
 
+  onFlowDelete(flow){
+    this.flowDeleted.emit(flow);
+  }
+
   onFlowImportSuccess(result: any) {
     let message = this.translate.instant('FLOWS:SUCCESS-MESSAGE-IMPORT');
     notification(message, 'success', 3000);

diff --git a/src/client/app/flogo.apps.details/components/application.tpl.html b/src/client/app/flogo.apps.details/components/application.tpl.html
@@ -49,6 +49,7 @@
       </button>
       <button class="flogo-button flogo-button--default">{{ 'DETAILS:BUILD' | translate }}</button>
       <div class="flogo-flow-detail-menu">
+        <i class="flogo-icon-kebabmenu"></i>
         <div class="flogo-flow-detail-menu-list-wrapper">
           <ul class="flogo-flow-detail-menu-list">
             <li class="flogo-flow-detail-menu-item">
@@ -90,7 +91,7 @@
 
 
     <div class="flogo-app-content__flows">
-      <flogo-apps-flows [flows]="flows" (flowSelected)="onFlowSelected($event)"></flogo-apps-flows>
+      <flogo-apps-flows [flows]="flows" (flowSelected)="onFlowSelected($event)" (deleteFlow)="onFlowDelete($event)"></flogo-apps-flows>
     </div>
 
   </div>

diff --git a/src/client/app/flogo.apps.details/components/container.component.ts b/src/client/app/flogo.apps.details/components/container.component.ts
@@ -71,6 +71,12 @@ export class FlogoApplicationContainerComponent implements OnInit, OnDestroy {
     this.appService.reload();
   }
 
+  public onFlowDeleted(flow){
+    this.flowsService.deleteFlow(flow.id).then(()=>{
+      this.appService.reload();
+    });
+  }
+
   private initSubscribe() {
     this.subscriptions = [
       this.postService.subscribe(_.assign({}, SUB_EVENTS.addFlow, { callback: this.onAddFlow.bind(this) }))

diff --git a/src/client/app/flogo.apps.details/components/container.tpl.html b/src/client/app/flogo.apps.details/components/container.tpl.html
@@ -1,3 +1,4 @@
 <flogo-apps-details-application [appDetail]="appDetail"
                                 (flowSelected)="onFlowSelected($event)"
+                                (flowDeleted)="onFlowDeleted($event)"
                                 (flowAdded)="onFlowAdded($event)"></flogo-apps-details-application>
diff --git a/src/client/app/flogo.apps.flows/components/flows.component.less b/src/client/app/flogo.apps.flows/components/flows.component.less
@@ -1,3 +1,4 @@
+@import "_variables";
 .flogo-flow {
   position: relative;
   opacity: 0;
@@ -75,7 +76,6 @@
         position: absolute;
         top: -7px;
         right: 15px;
-        height: 94px;
         width: 129px;
         z-index: 1;
         transform: scale(0, 0);
@@ -91,8 +91,12 @@
           list-style: none;
           font-size: .875em;
           margin: 0;
+          padding: 0;
           .flogo-flow-menu__options__list__element {
-            padding: 3px 0;
+            padding: 3px 0 5px 20px;
+            &:hover{
+              color: @color-secondary;
+            }
           }
         }
       }

diff --git a/src/client/app/flogo.apps.flows/components/flows.component.spec.ts b/src/client/app/flogo.apps.flows/components/flows.component.spec.ts
@@ -5,6 +5,7 @@ import {TranslateModule, TranslateLoader, TranslateStaticLoader} from 'ng2-trans
 import {ModalComponent} from 'ng2-bs3-modal/ng2-bs3-modal';
 import {Http} from '@angular/http';
 import {FlogoApplicationFlowsComponent} from './flows.component';
+import { FlogoModal } from '../../../common/services/modal.service';
 
 @Component({
   selector: 'container',
@@ -17,6 +18,33 @@ import {FlogoApplicationFlowsComponent} from './flows.component';
 class Container {
   @Output() changes = new EventEmitter();
   flows: Array<any> = [
+    {
+      id: '879',
+      name: 'Log temperature',
+      description: 'A complex flow for apietusam faccum esequi berum. Hentias porerum ent omniend itatempoer porem uga. Luptati optaquisist quibus rem quam unt',
+      createdAt: new Date()
+    },
+    {
+      id: '869',
+      name: 'Log temperature 2',
+      description: 'A complex flow for apietusam faccum esequi berum. Hentias porerum ent omniend itatempoer porem uga. Luptati optaquisist quibus rem quam unt',
+      createdAt: new Date()
+    },
+    {
+      id: '897',
+      name: 'Manually adjust temperature',
+      description: 'A flow for apietusam faccum esequi berum. Hentias porerum ent omniend itatempoer porem uga. Luptati optaquisist quibus rem quam unt Hentias porerum ent omniend itatempoer porem uga. Luptati optaquisist quibus rem quam unt Luptas oilsksd as asdfwo',
+      createdAt: new Date()
+    },
+    {
+      id: '987',
+      name: 'Raise temperature & notifiy operator',
+      description: 'A basic flow for apietusam',
+      createdAt: new Date()
+    }
+  ];
+
+  flowsDisorder: Array<any> = [
     {
       id: '897',
       name: 'Manually adjust temperature',
@@ -37,7 +65,7 @@ class Container {
     },
     {
       id: '869',
-      name: 'Log temperature 2',
+      name: 'Try to find pet',
       description: 'A complex flow for apietusam faccum esequi berum. Hentias porerum ent omniend itatempoer porem uga. Luptati optaquisist quibus rem quam unt',
       createdAt: new Date()
     }
@@ -63,10 +91,25 @@ describe('Application flows', () => {
         useFactory: (http: Http) => new TranslateStaticLoader(http, '/base/dist/public/assets/i18n', '.json'),
         deps: [Http]
       })],
-      declarations: [ FlogoApplicationFlowsComponent, ModalComponent, Container ] // declare the test component
+      declarations: [ FlogoApplicationFlowsComponent, ModalComponent, Container ], // declare the test component
+      providers: [FlogoModal]
     });
   });
 
+  it('Should order the flows in alphabetical order', done => {
+    compileComponent()
+      .then(() => {
+        fixture = TestBed.createComponent(Container);
+        let comp = fixture.componentInstance;
+        comp.flows = comp.flowsDisorder;
+        fixture.detectChanges();
+        let res = fixture.debugElement.queryAll(By.css('.flogo-flow-name'));
+        let nameList = res.map(element => element.nativeElement.innerHTML);
+        expect(nameList).toEqual(['Log temperature', 'Manually adjust temperature', 'Raise temperature &amp; notifiy operator', 'Try to find pet']);
+        done();
+      });
+  });
+
   it('Should render 4 flows', done => {
     compileComponent()
       .then(() => {
@@ -85,7 +128,7 @@ describe('Application flows', () => {
         fixture.detectChanges();
         de = fixture.debugElement.query(By.css('.flogo-flow-name:nth-of-type(1)'));
         el = de.nativeElement;
-        expect(el.innerText).toEqual('Manually Adjust Temperature');
+        expect(el.innerText).toEqual('Log Temperature');
         done();
       });
   });
@@ -96,7 +139,7 @@ describe('Application flows', () => {
         fixture = TestBed.createComponent(Container);
         fixture.detectChanges();
         let res: Array<DebugElement> = fixture.debugElement.queryAll(By.css('.flogo-flow-description'));
-        el = res[1].nativeElement;
+        el = res[3].nativeElement;
         expect(el.innerText).toEqual('A basic flow for apietusam');
         done();
       });

diff --git a/src/client/app/flogo.apps.flows/components/flows.component.ts b/src/client/app/flogo.apps.flows/components/flows.component.ts
@@ -1,25 +1,44 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { TranslateService } from 'ng2-translate/ng2-translate';
-
-import { IFlogoApplicationFlowModel as FlowModel } from './../../../common/application.model';
+import {Component, Input, Output, EventEmitter, OnChanges, SimpleChanges} from '@angular/core';
+import {TranslateService} from 'ng2-translate/ng2-translate';
+import { FlogoModal } from '../../../common/services/modal.service';
+import {IFlogoApplicationFlowModel as FlowModel} from './../../../common/application.model';
 
 @Component({
   selector: 'flogo-apps-flows',
   moduleId: module.id,
   templateUrl: 'flows.tpl.html',
   styleUrls: ['flows.component.css']
 })
-export class FlogoApplicationFlowsComponent {
+export class FlogoApplicationFlowsComponent implements OnChanges{
   @Input()
   public flows: Array<FlowModel> = [];
   @Output()
   public flowSelected: EventEmitter<FlowModel> = new EventEmitter<FlowModel>();
+  @Output()
+  public deleteFlow: EventEmitter<FlowModel> = new EventEmitter<FlowModel>();
+
+  constructor(public translate: TranslateService, public flogoModal: FlogoModal) {
+  }
 
-  constructor(public translate: TranslateService) {
+  ngOnChanges(changes:SimpleChanges){
+    this.flows = _.sortBy(this.flows, flow => flow.name.toLowerCase());
   }
 
-  select(flow: FlowModel) {
+  trackByFlowId(index: number, flow: FlowModel) {
+    return flow ? flow.id : null;
+  }
+
+  onSelect(flow: FlowModel) {
     this.flowSelected.emit(flow);
   }
 
+  onDeleteFlow(event: Event, flow: FlowModel) {
+    event.stopPropagation();
+    let message = this.translate.instant('FLOWS:CONFIRM_DELETE', {flowName: flow.name});
+    this.flogoModal.confirmDelete(message).then((res) => {
+      if (res) {
+        this.deleteFlow.emit(flow);
+      }
+    });
+  }
 }
diff --git a/src/client/app/flogo.apps.flows/components/flows.tpl.html b/src/client/app/flogo.apps.flows/components/flows.tpl.html
@@ -1,4 +1,5 @@
-<div *ngFor="let flow of flows; let i = index" class="flogo-flow" (click)="select(flow)" [ngStyle]="{'animation-delay': (200 * i) + 'ms' }">
+<div *ngFor="let flow of flows; let i = index; trackBy: trackByFlowId" class="flogo-flow" (click)="onSelect(flow)"
+     [ngStyle]="{'animation-delay': (200 * i) + 'ms' }">
   <div class="flogo-flow-trigger">
     <i class="flogo-icon-trigger"></i>
   </div>
@@ -10,18 +11,23 @@
       <div class="flogo-flow-menu">
         <div class="flogo-flow-menu__options">
           <ul class="flogo-flow-menu__options__list">
+            <!--
             <li class="flogo-flow-menu__options__list__element">
-              <a href=""><i class="flogo-icon flogo-icon-edit"></i>Rename</a>
+              <i class="flogo-icon flogo-icon-edit"></i>
+              {{ 'FLOWS:OPTION-RENAME' | translate}}
             </li>
             <li class="flogo-flow-menu__options__list__element">
-              <a href=""><i class="flogo-icon flogo-icon-export"></i>Export</a>
+              <i class="flogo-icon flogo-icon-export"></i>
+              {{ 'FLOWS:OPTION-EXPORT' | translate}}
             </li>
-            <li class="flogo-flow-menu__options__list__element">
-              <a href=""><i class="flogo-icon flogo-icon-delete"></i>Delete</a>
+            -->
+            <li class="flogo-flow-menu__options__list__element" (click)="onDeleteFlow($event, flow)">
+              <i class="flogo-icon flogo-icon-delete"></i>
+              {{ 'FLOWS:OPTION-DELETE' | translate}}
             </li>
           </ul>
         </div>
-        <span class="glyphicon glyphicon-option-vertical menu__btn"> </span>
+        <i class="flogo-icon-kebabmenu menu__btn"> </i>
       </div>
     </div>
 

diff --git a/src/client/app/flogo.apps.list/components/app.list.tpl.html b/src/client/app/flogo.apps.list/components/app.list.tpl.html
@@ -3,9 +3,11 @@
   <div class="flogo-app-list__header">
     <div class="title">{{ 'APP-LIST:MY-APPS' | translate }}</div>
     <div>
+      <!--
       <button class="flogo-button--import-app">
-        <i class="flogo-icon flogo-icon-download"></i><span>Import</span>
+        <i class="flogo-icon flogo-icon-import"></i><span>Import</span>
       </button>
+      -->
       <button class="flogo-button--add-app" (click)="onAdd($event)"><i class="flogo-icon-add"></i></button>
     </div>
   </div>

diff --git a/src/client/app/flogo.apps.main/components/main.component.ts b/src/client/app/flogo.apps.main/components/main.component.ts
@@ -2,9 +2,11 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { RESTAPIApplicationsService } from '../../../common/services/restapi/applications-api.service';
 import { IFlogoApplicationModel, IFlogoApplicationFlowModel } from '../../../common/application.model';
+import { RESTAPIFlowsService } from '../../../common/services/restapi/flows-api.service';
+import { TranslateService } from 'ng2-translate/ng2-translate';
 
 import { FlogoModal } from '../../../common/services/modal.service';
-import {flogoIDEncode} from "../../../common/utils";
+import { flogoIDEncode, notification } from "../../../common/utils";
 
 
 @Component( {
@@ -22,24 +24,14 @@ export class FlogoMainComponent implements OnInit {
     constructor(
         private _flogoModal: FlogoModal,
         private router: Router,
+        public translate: TranslateService,
+        private flowsService: RESTAPIFlowsService,
         public applicationServiceAPI: RESTAPIApplicationsService
     ) {
     }
 
     ngOnInit() {
-        this.applicationServiceAPI.recentFlows()
-            .then((flows: Array<any>)=> {
-              flows = flows.length <= 3 ? flows : flows.slice(0,3);
-              flows.forEach(flow=>{flow.encodedId = flogoIDEncode(flow.id)});
-              this.recent = flows;
-            });
-
-        this.applicationServiceAPI.allFlows()
-            .then((flows: Array<IFlogoApplicationFlowModel>)=> {
-                this.originalFlows = flows;
-                this.flows = this.getOriginalFlows();
-            });
-
+      this.loadFlows();
     }
 
     onChangedSearch(search) {
@@ -66,8 +58,40 @@ export class FlogoMainComponent implements OnInit {
         });
     }
 
+  loadFlows() {
+    this.applicationServiceAPI.recentFlows()
+      .then((flows: Array<any>) => {
+        flows = flows.length <= 3 ? flows : flows.slice(0, 3);
+        flows.forEach(flow => {
+          flow.encodedId = flogoIDEncode(flow.id)
+        });
+        this.recent = flows;
+      });
+
+    this.applicationServiceAPI.allFlows()
+      .then((flows: Array<IFlogoApplicationFlowModel>) => {
+        this.originalFlows = flows;
+        this.flows = this.getOriginalFlows();
+      });
+  }
+
   onFlowSelected(flow) {
     this.router.navigate(['/flows', flogoIDEncode(flow._id)]);
   }
 
+  onFlowDeleted(flow) {
+    this.flowsService.deleteFlow(flow._id)
+      .then(() => {
+        let message = this.translate.instant('FLOWS:SUCCESS-MESSAGE-FLOW-DELETED');
+        notification(message, 'success', 3000)
+      })
+      .then(() => {
+        this.loadFlows();
+      })
+      .catch(err => {
+        let message = this.translate.instant('FLOWS:ERROR-MESSAGE-REMOVE-FLOW', err);
+        notification(message, 'error', 3000);
+        console.error(err);
+      })
+  }
 }
diff --git a/src/client/app/flogo.apps.main/components/main.tpl.html b/src/client/app/flogo.apps.main/components/main.tpl.html
@@ -42,7 +42,7 @@ <h3 class="flogo-main__subtitle">{{ 'FLOWS:ALL' | translate }}</h3>
             </div>
           </div>
 
-        <flogo-apps-flows [flows]="flows" (flowSelected)="onFlowSelected($event)"></flogo-apps-flows>
+        <flogo-apps-flows [flows]="flows" (flowSelected)="onFlowSelected($event)" (deleteFlow)="onFlowDeleted($event)"></flogo-apps-flows>
       </div>
-Original file line number
+Diff line change
@@ Expand Up @@
                 </div>
               </div>
-            <flogo-apps-flows [flows]="flows" (flowSelected)="onFlowSelected($event)"></flogo-apps-flows>
+            <flogo-apps-flows [flows]="flows" (flowSelected)="onFlowSelected($event)" (deleteFlow)="onFlowDeleted($event)"></flogo-apps-flows>
           </div>
@@ Expand Down @@