[CORD-1653] Adding a debug tab in model details

Change-Id: I6c3be4227309cbeb2dd7ab6252c1312dfd00fb18
diff --git a/src/app/views/crud/crud.html b/src/app/views/crud/crud.html
index b650520..adeaaa4 100644
--- a/src/app/views/crud/crud.html
+++ b/src/app/views/crud/crud.html
@@ -48,6 +48,11 @@
                 <xos-form ng-model="vm.model" config="vm.formCfg"></xos-form>
             </div>
         </uib-tab>
+        <uib-tab ng-if="vm.debugTab" heading="Debug">
+            <div class="panel-body">
+                <xos-debug-model ng-model="vm.model"></xos-debug-model>
+            </div>
+        </uib-tab>
         <uib-tab ng-if="vm.getRelatedItemId(r, vm.model)" ng-repeat="r in vm.related.manytoone" heading="{{r.model}} {{vm.getHumanReadableOnField(r)}}">
             <div class="panel-body">
                 <xos-form ng-model="vm.relatedModels.manytoone[r.model][r.on_field].model" config="vm.relatedModels.manytoone[r.model][r.on_field].formConfig"></xos-form>
diff --git a/src/app/views/crud/crud.ts b/src/app/views/crud/crud.ts
index 9599823..325790f 100644
--- a/src/app/views/crud/crud.ts
+++ b/src/app/views/crud/crud.ts
@@ -25,6 +25,8 @@
 import {IXosModelDiscovererService} from '../../datasources/helpers/model-discoverer.service';
 import './crud.scss';
 import {IXosCrudRelationService} from './crud.relations.service';
+import {IXosDebugService, IXosDebugStatus} from '../../core/debug/debug.service';
+import {IXosKeyboardShortcutService} from '../../core/services/keyboard-shortcut';
 
 export interface IXosModelRelation {
   model: string;
@@ -43,7 +45,9 @@
     'ModelRest',
     'StoreHelpers',
     'XosModelDiscoverer',
-    'XosCrudRelation'
+    'XosCrudRelation',
+    'XosDebug',
+    'XosKeyboardShortcut'
   ];
 
   // bindings
@@ -64,6 +68,7 @@
     manytoone: {},
     onetomany: {}
   };
+  public debugTab: boolean;
 
   constructor(
     private $scope: angular.IScope,
@@ -75,7 +80,9 @@
     private ModelRest: IXosResourceService,
     private StoreHelpers: IStoreHelpersService,
     private XosModelDiscovererService: IXosModelDiscovererService,
-    private XosCrudRelation: IXosCrudRelationService
+    private XosCrudRelation: IXosCrudRelationService,
+    private XosDebug: IXosDebugService,
+    private XosKeyboardShortcut: IXosKeyboardShortcutService
   ) {
     this.$log.info('[XosCrud] Setup', $state.current.data);
 
@@ -88,10 +95,15 @@
     // TODO get the proper URL from model discoverer
     this.baseUrl = '#/' + this.model.clientUrl.replace(':id?', '');
 
-
     this.tableCfg = this.model.tableCfg;
     this.formCfg = this.model.formCfg;
 
+    this.debugTab = this.XosDebug.status.modelsTab;
+    this.$scope.$on('xos.debug.status', (e, status: IXosDebugStatus) => {
+      this.debugTab = status.modelsTab;
+      this.$scope.$apply();
+    });
+
     this.store.query(this.data.model)
       .subscribe(
         (event) => {
@@ -122,9 +134,76 @@
         const resource = this.ModelRest.getResource(endpoint);
         this.model = new resource({});
       }
+
+      this.XosKeyboardShortcut.registerKeyBinding({
+        key: 'A',
+        cb: () => this.XosDebug.toggleDebug('modelsTab'),
+        description: 'Toggle Debug tab in model details view'
+      }, 'view');
+
+      this.XosKeyboardShortcut.registerKeyBinding({
+        key: 'delete',
+        cb: () => {
+          this.$state.go(this.$state.current.name, {id: null});
+        },
+        description: 'Go back to the list view'
+      }, 'view');
+    }
+    // list page
+    else {
+      this.tableCfg.selectedRow = -1;
+
+      this.XosKeyboardShortcut.registerKeyBinding({
+        key: 'Tab',
+        cb: () => this.iterateItems(),
+        description: 'Iterate trough items in the list'
+      }, 'view');
+
+      this.XosKeyboardShortcut.registerKeyBinding({
+        key: 'Enter',
+        cb: () => {
+          if (this.tableCfg.selectedRow < 0) {
+            return;
+          }
+          this.$state.go(this.$state.current.name, {id: this.tableCfg.filteredData[this.tableCfg.selectedRow].id});
+        },
+        description: 'View details of selected item'
+      }, 'view');
+
+      this.XosKeyboardShortcut.registerKeyBinding({
+        key: 'Delete',
+        cb: () => {
+          if (this.tableCfg.selectedRow < 0) {
+            return;
+          }
+          const deleteFn = _.find(this.tableCfg.actions, {label: 'delete'});
+          deleteFn.cb(this.tableCfg.filteredData[this.tableCfg.selectedRow]);
+        },
+        description: 'View details of selected item'
+      }, 'view');
+
+      // FIXME XosKeyboardShortcut modifiers does not look to work
+      // this.XosKeyboardShortcut.registerKeyBinding({
+      //   key: 'Tab',
+      //   modifiers: ['alt'],
+      //   cb: () => {
+      //     this.tableCfg.selectedRow = -1;
+      //   },
+      //   description: 'Clear selected item'
+      // }, 'view');
     }
   }
 
+  public iterateItems() {
+    const rowCount = this.tableCfg.filteredData.length > this.tableCfg.pagination.pageSize ? this.tableCfg.pagination.pageSize : this.tableCfg.filteredData.length;
+    if ((this.tableCfg.selectedRow + 1) < rowCount) {
+      this.tableCfg.selectedRow++;
+    }
+    else {
+      this.tableCfg.selectedRow = 0;
+    }
+    this.$scope.$apply();
+  }
 
   public getRelatedItemId(relation: IXosModelRelation, item: any): boolean {
     return this.XosCrudRelation.existsRelatedItem(relation, item);