[angular-material] ListWithDetail improvements

edgarmueller · edgarmueller · commit 11425cb20dab · 2018-11-23T14:24:53.000+01:00
* Implement default selection behavior
* Fixed with of master sidenav
* Delete buttons only shown on hover
diff --git a/packages/angular-material/src/other/master-detail/master.ts b/packages/angular-material/src/other/master-detail/master.ts
@@ -27,23 +27,30 @@ export const removeSchemaKeywords = (path: string) => {
     <mat-sidenav-container class="container" [fxHide]="hidden">
         <mat-sidenav mode="side" opened>
           <mat-nav-list>
+            <mat-list-item *ngIf="masterItems.length === 0">No items</mat-list-item>
             <mat-list-item
-                *ngFor="let item of masterItems; trackBy: trackElement"
+                *ngFor="let item of masterItems; let i = index; trackBy: trackElement"
                 [class.selected]="item === selectedItem"
-                (click)="onSelect(item)"
+                (click)="onSelect(item, i)"
+                (mouseover)="onListItemHover(i)"
+                (mouseout)="onListItemHover(undefined)"
             >
                 <a matLine>{{item.label}}</a>
-                <button mat-icon-button class="button" (click)="onDeleteClick(item)">
+                <button mat-icon-button
+                        class="button hide"
+                        (click)="onDeleteClick(item, i)"
+                        [ngClass]="{'show': highlightedIdx == i}"
+                >
                   <mat-icon mat-list-icon>delete</mat-icon>
                 </button>
             </mat-list-item>
           </mat-nav-list>
-           <button mat-fab color="primary" class="button" (click)="onAddClick()">
+           <button mat-fab color="primary" class="add-button" (click)="onAddClick()" >
                <mat-icon aria-label="Add item to list">add</mat-icon>
            </button>
         </mat-sidenav>
         <mat-sidenav-content class="content">
-          <jsonforms-detail [item]="selectedItem"></jsonforms-detail>
+          <jsonforms-detail *ngIf="selectedItem" [item]="selectedItem"></jsonforms-detail>
         </mat-sidenav-content>
     </mat-sidenav-container>`,
   styles: [`
@@ -53,24 +60,44 @@ export const removeSchemaKeywords = (path: string) => {
       .content {
         padding: 15px;
       }
+      .add-button {
+        float: right;
+        margin-top: 0.5em;
+        margin-right: 0.25em;
+      }
       .button {
         float: right;
         margin-right: 0.25em;
       }
+      .hide {
+        display: none;
+      }
+      .show {
+        display: inline-block;
+      }
+      mat-sidenav {
+        width: 20%;
+      }
     `]
 })
 export class MasterListComponent extends JsonFormsControl {
 
   masterItems: any[];
   selectedItem: any;
+  selectedItemIdx: number;
   addItem: (path: string) => () => void;
   removeItems: (path: string, toDelete: any[]) => () => void;
   propsPath: string;
+  highlightedIdx: number;
 
   constructor(ngRedux: NgRedux<JsonFormsState>) {
     super(ngRedux);
   }
 
+  onListItemHover(idx: number) {
+    this.highlightedIdx = idx;
+  }
+
   trackElement(_index: number, element: any) {
     return element ? element.label : null;
   }
@@ -106,17 +133,45 @@ export class MasterListComponent extends JsonFormsControl {
       return masterItem;
     });
     this.masterItems = masterItems;
+
+    // pre-select 1st entry
+    if (this.masterItems.length > 0 && this.selectedItem === undefined) {
+      this.selectedItem = this.masterItems[0];
+      this.selectedItemIdx = 0;
+    }
   }
 
-  onSelect(item: any): void {
+  onSelect(item: any, idx: number): void {
     this.selectedItem = item;
+    this.selectedItemIdx = idx;
   }
 
   onAddClick() {
     this.addItem(this.propsPath)();
   }
 
-  onDeleteClick(item: any) {
+  onDeleteClick(item: any, idx: number) {
+    this.deleteItem(item);
+    if (this.selectedItem.path === item.path && this.masterItems[idx]) {
+      // select next element, if possible
+      this.selectedItem = this.masterItems[idx];
+      this.selectedItemIdx = idx;
+    } else if (this.selectedItem.path === item.path && this.masterItems.length > 0) {
+      // select 1st entry, if no next element available
+      this.selectedItem = this.masterItems[0];
+      this.selectedItemIdx = 0;
+    } else if (this.selectedItemIdx >= idx) {
+      // selected index has changed
+      this.selectedItemIdx -= 1;
+      this.selectedItem = this.masterItems[this.selectedItemIdx];
+    } else if (this.masterItems.length === 0) {
+      // unset select if no elements anymore
+      this.selectedItemIdx = -1;
+      this.selectedItem = undefined;
+    }
+  }
+
+  deleteItem(item: any) {
     this.removeItems(this.propsPath, [item.data])();
   }
 }
diff --git a/packages/angular-material/test/master-detail.spec.ts b/packages/angular-material/test/master-detail.spec.ts
@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import {
@@ -36,14 +36,14 @@ import { NgRedux } from '@angular-redux/store';
 import { MockNgRedux } from '@angular-redux/store/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { JsonFormsOutlet, UnknownRenderer } from '@jsonforms/angular';
-import { MasterListComponent } from '../src/other/master-detail/master';
-import { JsonFormsDetailComponent } from '../src/other/master-detail/detail';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { DebugElement } from '@angular/core';
+import { MasterListComponent } from '../src/other/master-detail/master';
+import { JsonFormsDetailComponent } from '../src/other/master-detail/detail';
 
 describe('Master detail', () => {
 
-  let fixture: ComponentFixture<any>;
+  let fixture: ComponentFixture<MasterListComponent>;
   let component: any;
 
   const data = {
@@ -181,7 +181,7 @@ describe('Master detail', () => {
     });
   }));
 
-  it('remove a master item', async(() => {
+  it('remove an item', async(() => {
     const mockSubStore = MockNgRedux.getSelectorStub();
     component.uischema = uischema;
 
@@ -208,6 +208,218 @@ describe('Master detail', () => {
     });
   }));
 
+  it('remove an item with index < selected index', fakeAsync(() => {
+    const moreData = {
+      orders: [
+        {
+          customer: { name: 'Carrot Chipmunk' },
+          title: 'Carrots'
+        },
+        {
+          customer: { name: 'Banana Joe' },
+          title: 'Bananas'
+        },
+        {
+          customer: { name: 'Fry' },
+          title: 'Slurm'
+        }
+      ]
+    };
+    const mockSubStore = MockNgRedux.getSelectorStub();
+    component.uischema = uischema;
+
+    mockSubStore.next({
+      jsonforms: {
+        core: {
+          data: moreData,
+          schema,
+        }
+      }
+    });
+    component.ngOnInit();
+    fixture.detectChanges();
+    tick();
+
+    // select last element
+    const listItems: DebugElement[] = fixture.debugElement.queryAll(By.directive(MatListItem));
+    listItems[2].nativeElement.click();
+    fixture.detectChanges();
+    tick();
+
+    // delete 1st item
+    spyOn(component, 'deleteItem').and.callFake(() => {
+      mockSubStore.next({
+        jsonforms: {
+          core: {
+            data: { orders: moreData.orders.slice(1) },
+            schema,
+          }
+        }
+      });
+      mockSubStore.complete();
+      fixture.detectChanges();
+      tick();
+    });
+    const buttons: DebugElement[] = fixture.debugElement.queryAll(By.css('button'));
+    buttons[0].nativeElement.click();
+
+    expect(component.selectedItemIdx).toBe(1);
+    expect(component.selectedItem.data.title).toBe('Slurm');
+  }));
+
+  it('remove an item with index > selected index', fakeAsync(() => {
+    const moreData = {
+      orders: [
+        {
+          customer: { name: 'Carrot Chipmunk' },
+          title: 'Carrots'
+        },
+        {
+          customer: { name: 'Banana Joe' },
+          title: 'Bananas'
+        },
+        {
+          customer: { name: 'Fry' },
+          title: 'Slurm'
+        }
+      ]
+    };
+    const mockSubStore = MockNgRedux.getSelectorStub();
+    component.uischema = uischema;
+
+    mockSubStore.next({
+      jsonforms: {
+        core: {
+          data: moreData,
+          schema,
+        }
+      }
+    });
+    component.ngOnInit();
+    fixture.detectChanges();
+    tick();
+
+    // delete 2nd item
+    spyOn(component, 'deleteItem').and.callFake(() => {
+      const copy = moreData.orders.slice();
+      copy.splice(1, 1);
+      mockSubStore.next({
+        jsonforms: {
+          core: {
+            data: { orders: copy },
+            schema,
+          }
+        }
+      });
+      mockSubStore.complete();
+      fixture.detectChanges();
+      tick();
+    });
+    const buttons: DebugElement[] = fixture.debugElement.queryAll(By.css('button'));
+    buttons[1].nativeElement.click();
+
+    expect(component.selectedItemIdx).toBe(0);
+    expect(component.selectedItem.data.title).toBe('Carrots');
+  }));
+
+  it('remove an item with index == selected index', fakeAsync(() => {
+    const moreData = {
+      orders: [
+        {
+          customer: { name: 'Carrot Chipmunk' },
+          title: 'Carrots'
+        },
+        {
+          customer: { name: 'Banana Joe' },
+          title: 'Bananas'
+        },
+        {
+          customer: { name: 'Fry' },
+          title: 'Slurm'
+        }
+      ]
+    };
+    const mockSubStore = MockNgRedux.getSelectorStub();
+    component.uischema = uischema;
+
+    mockSubStore.next({
+      jsonforms: {
+        core: {
+          data: moreData,
+          schema,
+        }
+      }
+    });
+    component.ngOnInit();
+    fixture.detectChanges();
+    tick();
+
+    // delete 1st item
+    spyOn(component, 'deleteItem').and.callFake(() => {
+      mockSubStore.next({
+        jsonforms: {
+          core: {
+            data: { orders: moreData.orders.slice(1) },
+            schema,
+          }
+        }
+      });
+      mockSubStore.complete();
+      fixture.detectChanges();
+      tick();
+    });
+    const buttons: DebugElement[] = fixture.debugElement.queryAll(By.css('button'));
+    buttons[0].nativeElement.click();
+
+    expect(component.selectedItemIdx).toBe(0);
+    expect(component.selectedItem.data.title).toBe('Bananas');
+  }));
+
+  it('remove last item', fakeAsync(() => {
+    const moreData = {
+      orders: [
+        {
+          customer: { name: 'Carrot Chipmunk' },
+          title: 'Carrots'
+        }
+      ]
+    };
+    const mockSubStore = MockNgRedux.getSelectorStub();
+    component.uischema = uischema;
+
+    mockSubStore.next({
+      jsonforms: {
+        core: {
+          data: moreData,
+          schema,
+        }
+      }
+    });
+    component.ngOnInit();
+    fixture.detectChanges();
+    tick();
+
+    // delete item
+    spyOn(component, 'deleteItem').and.callFake(() => {
+      mockSubStore.next({
+        jsonforms: {
+          core: {
+            data: { orders: [] },
+            schema,
+          }
+        }
+      });
+      mockSubStore.complete();
+      fixture.detectChanges();
+      tick();
+    });
+    const buttons: DebugElement[] = fixture.debugElement.queryAll(By.css('button'));
+    buttons[0].nativeElement.click();
+
+    expect(component.selectedItemIdx).toBe(-1);
+    expect(component.selectedItem).toBe(undefined);
+  }));
+
   it('setting detail on click', async(() => {
     const mockSubStore = MockNgRedux.getSelectorStub();
     component.uischema = uischema;
@@ -251,7 +463,8 @@ describe('Master detail', () => {
                   scope: '#/properties/customer/properties/name'
                 }]
               }
-            }
+            },
+            0
           );
       });
     });
