Few other minor changes on the front-end for entities (#99)

* Fix return type to prevent promise error * Fix routing issues in Entities component
alfredfrancis · Aug 1, 2018 · 1b41cda · 1b41cda
1 parent dda6c62
commit 1b41cda
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 21 deletions.
diff --git a/frontend/src/app/agent/agent-routing.module.ts b/frontend/src/app/agent/agent-routing.module.ts
@@ -12,7 +12,7 @@ import {EntityResolverService} from '../services/entities.service'
 import {IntentResolverService} from '../services/intent-resolver.service';
 
 const routes: Routes = [
-  { path: '', redirectTo: 'intents'},  
+  { path: '', redirectTo: 'intents'},
   {
     path: 'intents', component: IntentsComponent,
   },

diff --git a/frontend/src/app/agent/entities/entities.component.html b/frontend/src/app/agent/entities/entities.component.html
@@ -7,11 +7,18 @@
   </div>
 
   <div class="entities">
-    <div  *ngFor="let entity of entities;let i=index" class="entity">
-      <div routerLink="/agent/default/edit-entity/{{entity._id.$oid}}">{{entity.name}}</div>
-      <button mat-icon-button (click)="deleteEntity(entity._id.$oid,i)" color="warn">
-          <mat-icon aria-label="Delete this intent">delete</mat-icon>
-      </button>
+    <div *ngFor="let entity of entities;let i=index" fxLayout="row" fxLayoutAlign=" center" class="entity-container">
+      <div fxFlex="60">
+        {{entity.name}}
+      </div>
+      <div fxFlex="40">
+        <button mat-icon-button (click)="edit(entity)" color="accent">
+          <mat-icon aria-label="Edit this entity">edit</mat-icon>
+        </button>
+        <button mat-icon-button (click)="deleteEntity(entity._id.$oid,i)" color="warn">
+            <mat-icon aria-label="Delete this entity">delete</mat-icon>
+          </button>
+      </div>
     </div>
   </div>
-</mat-card>
+</mat-card>
diff --git a/frontend/src/app/agent/entities/entities.component.scss b/frontend/src/app/agent/entities/entities.component.scss
@@ -15,5 +15,9 @@ mat-card{
               cursor: pointer;
           }
       }
+      .entity-container{
+        border-bottom: 1px solid lightgray;
+        padding:10px;
+      }
 }
 
diff --git a/frontend/src/app/agent/entities/entities.component.ts b/frontend/src/app/agent/entities/entities.component.ts
@@ -1,13 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 import { EntitiesService } from '../../services/entities.service'
+import {Router} from "@angular/router";
+import {UtilsService} from "../../services/utils.service";
 @Component({
   selector: 'app-entities',
   templateUrl: './entities.component.html',
   styleUrls: ['./entities.component.scss']
 })
 export class EntitiesComponent implements OnInit {
 
-  constructor(private entitiesService: EntitiesService) { }
+  constructor(private _router: Router, private coreService:UtilsService, private entitiesService: EntitiesService) { }
 
   entities = []
 
@@ -20,6 +22,10 @@ export class EntitiesComponent implements OnInit {
   }
 
   newEntity(name) {
+    if (this.entities.find(x => x.name === name)) {
+      alert("Entity already exist");
+      return;
+    }
     this.entitiesService.create_entity({ "name": name }).then(
       (result) => {
         this.entities.push({
@@ -32,12 +38,20 @@ export class EntitiesComponent implements OnInit {
     )
   }
 
+  edit(entity) {
+    this._router.navigate(["/agent/default/edit-entity", entity._id.$oid])
+  }
+
   deleteEntity(id,i){
-    this.entitiesService.delete_entity(id).then(
-      ()=>{
-        this.entities.splice(i,1)
-      }
-    )
+    if (confirm('Are u sure want to delete this entity?')) {
+      this.coreService.displayLoader(true);
+      this.entitiesService.delete_entity(id).then(
+        () => {
+          this.entities.splice(i, 1);
+          this.ngOnInit();
+          this.coreService.displayLoader(false);
+      });
+    }
   }
 
 }
diff --git a/frontend/src/app/agent/entity/entity.component.html b/frontend/src/app/agent/entity/entity.component.html
@@ -9,7 +9,7 @@
       </button>
     </div>
   </div>
-  
+
   <mat-divider></mat-divider>
 
   <div fxLayout="row" fxLayoutAlign="space-evenly center" style="margin-top:10px;">
@@ -45,4 +45,4 @@ <h3>{{value.value}}</h3>
   </div>
 
 
-</mat-card>
+</mat-card>
diff --git a/frontend/src/app/agent/intents/intents.component.html b/frontend/src/app/agent/intents/intents.component.html
@@ -18,7 +18,7 @@ <h1 fxFlex>List of Intents
     <div fxFlex="40">
       <button mat-button (click)="train(intent)" color="primary">Train</button>
       <button mat-icon-button (click)="edit(intent)" color="accent">
-        <mat-icon aria-label="Delete this intent">edit</mat-icon>
+        <mat-icon aria-label="Edit this intent">edit</mat-icon>
       </button>
       <button mat-icon-button (click)="delete(intent)" color="warn" *ngIf="intent.userDefined">
         <mat-icon aria-label="Delete this intent">delete</mat-icon>
@@ -27,4 +27,4 @@ <h1 fxFlex>List of Intents
   </div>
   <br>
 
-</mat-card>
+</mat-card>
diff --git a/frontend/src/app/services/entities.service.ts b/frontend/src/app/services/entities.service.ts
@@ -42,18 +42,18 @@ import {Resolve, Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapsho
 export class EntityResolverService implements Resolve<any>  {
 
     constructor(private _router: Router,private entityService: EntitiesService) { }
-    
+
     resolve(route: ActivatedRouteSnapshot): Promise<any> | boolean {
         return new Promise((resolve,reject)=>{
             this.entityService.getEntity(route.params['entity_id']).then(
             (result) => {
-                console.log("intent details resolved")
-              resolve(result)
+              console.log("intent details resolved");
+              resolve(result);
             },
             (err)=>{
               new Error("Could'nt get intent details")
             }
           )
         });
     }
-}
+}