Merge pull request #48 from IgniteUI/rkolev/implementingPanLeftAndRig…

…htOperations

Implementing "quick complete" and "cannot complete" features

README.md

@@ -6,13 +6,18 @@ A showcase application built using [Ignite UI for Angular](https://github.com/Ig
 
 | Component/Directive   |     | Used in (*screen*)                                      |
 | :-:                   | :-: | :-:                                                     |
+| igx-bottom-nav        |     | Active Orders, Archived Orders                          |
 | igx-checkbox          |     | Order                                                   |
-| igx-circular-progress |     | Active Orders                                           |
-| igx-list              |     | Active Orders, Archived Orders                          |
-| igx-navbar            |     | Active Orders, Archived Orders, Orders, Add Order, Scan |
-| igx-tabbar            |     | Active Orders, Archived Orders                          |
-| igxButton             |     | Active Orders, Archived Orders, Order, Add Order, Scan  |
-| igxInput              |     | Active Orders, Add Order                                |
+| igx-circular-bar      |     | Active Orders                                           |
+| igx-drop-down         |     | Add Order                                               |
+| igx-icon              |     | Active Orders, Orders                                   |
+| igx-list              |     | Active Orders, Archived Orders, Order                   |
+| igx-navbar            |     | Active Orders, Add Order, Order                         |
+| igx-snackbar          |     | Active Orders                                           |
+| igx-toast             |     | Active Orders, Add Order                                |
+| igxButton             |     | Active Orders, Add Order, Order                         |
+| igxInput              |     | Active Orders                                           |
+| igxRipple             |     | Order                                                   |
 
 ## Install
 To get started follow the respective package manager installation:

src/app/addorder/addorder.component.html

@@ -20,7 +20,7 @@
 
 <div class="actionButtons">
     <button igxButton="raised" igxButtonColor="white" igxButtonBackground="#1276BC" class="actionButton"
-        (click)="btnAddOrderHandler()" [disabled]="selectedOrder == null">
+        (click)="btnAddOrderHandler()" [disabled]="selectedOrderId == null">
         {{ "lblAddOrder" | translate }}
     </button>
 </div>

src/app/addorder/addorder.component.ts

@@ -22,9 +22,21 @@ export class AddOrderComponent implements OnInit {
     @ViewChild(IgxDropDownComponent)
     private igxDropDown: IgxDropDownComponent;
 
-    private toastMessage: string;
-    private ordersAvailable = [];
-    private selectedOrderId = null;
+    public toastMessage: string;
+    public ordersAvailable = [];
+    public selectedOrderId = null;
+
+    private _positionSettings = {
+        horizontalStartPoint: HorizontalAlignment.Left,
+        verticalStartPoint: VerticalAlignment.Bottom
+    };
+
+    private _overlaySettings = {
+        closeOnOutsideClick: true,
+        modal: false,
+        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
+        scrollStrategy: new CloseScrollStrategy()
+    };
 
     constructor(private ordersService: OrdersService,
         private translate: TranslateService,
@@ -46,25 +58,13 @@ export class AddOrderComponent implements OnInit {
         this.location.back();
     }
 
-    private _positionSettings = {
-        horizontalStartPoint: HorizontalAlignment.Left,
-        verticalStartPoint: VerticalAlignment.Bottom
-    };
-
-    private _overlaySettings = {
-        closeOnOutsideClick: true,
-        modal: false,
-        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
-        scrollStrategy: new CloseScrollStrategy()
-    };
-
     public toggleDropDown(eventArgs) {
         this._overlaySettings.positionStrategy.settings.target = eventArgs.target;
         this.igxDropDown.toggle(this._overlaySettings);
     }
 
     get selectOrderButtonCaption(): string {
-        if (this.ordersAvailable == null || this.ordersAvailable.length == 0) {
+        if (this.ordersAvailable == null || this.ordersAvailable.length === 0) {
             return this.translate.instant("lblNoOrders");
         } else {
             if (this.selectedOrderId == null) {

src/app/app.module.ts

@@ -17,6 +17,7 @@ import { IgxInputGroupModule } from "igniteui-angular";
 import { IgxListModule } from "igniteui-angular";
 import { IgxNavbarModule } from "igniteui-angular";
 import { IgxProgressBarModule } from "igniteui-angular";
+import { IgxSnackbarModule } from "igniteui-angular";
 import { IgxToastModule } from "igniteui-angular";
 
 import { AddOrderComponent } from "./addorder/addorder.component";
@@ -63,6 +64,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     IgxListModule,
     IgxNavbarModule,
     IgxProgressBarModule,
+    IgxSnackbarModule,
     IgxToastModule,
     RouterModule.forRoot(appRoutes, {enableTracing: false}),
     HttpClientModule,

src/app/board/board.component.css

@@ -12,7 +12,8 @@
 }
 
 .igx-list {
-    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 .emptyListContainer {
@@ -66,6 +67,26 @@
 .addOrderButton {
     z-index: 3;
     position: absolute;
-    right: 50px;
-    bottom: 90px;
+    right: 70px;
+    bottom: 150px;
+}
+
+.listItemLeftPanningStyle {
+    display: flex;
+    flex-direction: row-reverse;
+    background-color:limegreen;
+    color: white;
+    width: 100%;
+    padding-right: 10px;
+    align-items: center;
+}
+
+.listItemRightPanningStyle {
+    display: flex;
+    flex-direction: row;
+    background-color:red;
+    color: white;
+    width: 100%;
+    padding-left: 10px;
+    align-items: center;
 }

src/app/board/board.component.html

@@ -14,16 +14,24 @@
             placeholder="{{ 'lblSearchBoxDefaultText' | translate }}"
             [(ngModel)]="searchCriteriaValue" (ngModelChange)="searchBoxKeyDown($event)" />
           <igx-prefix>
-              <igx-icon>search</igx-icon>
+              <igx-icon fontSet="material">search</igx-icon>
           </igx-prefix>
           <igx-suffix *ngIf="searchBox.value.length > 0" (click)="clearSearchInputClicked()">
-              <igx-icon fontSet="material" name="clear"></igx-icon>
+              <igx-icon fontSet="material">clear</igx-icon>
           </igx-suffix>
       </igx-input-group>
     </div>
 
     <!-- The active orders list -->
-    <igx-list (onItemClicked)="activeListItemClicked($event)" id="activeIgxList">
+    <igx-list (onItemClicked)="activeListItemClicked($event)" [style.height.px]="activeIgxListHeight"
+      [allowLeftPanning]="true" [allowRightPanning]="true"
+      (onLeftPan)="onLeftPanHandler($event)" (onRightPan)="onRightPanHandler($event)">
+      <ng-template igxListItemLeftPanning>
+          <div class="listItemLeftPanningStyle">{{ "lblQuickComplete" | translate }}</div>
+      </ng-template>
+      <ng-template igxListItemRightPanning>
+          <div class="listItemRightPanningStyle">{{ "lblCannotComplete" | translate }}</div>
+      </ng-template>
       <ng-template igxEmptyList>
         <div class="emptyListContainer">
           <span class="emptyListHeader">{{ "emptyListTemplateHeader" | translate }}</span>
@@ -39,10 +47,11 @@
           <br />{{ "lblCreatedOn" | translate }} {{ order.date }}
         </div>
       </igx-list-item>
+      <igx-snackbar #snackbar1 actionText="{{ 'btnUndo' | translate }}" (onAction)="performUndo()">{{ snackBarActionMessage }}</igx-snackbar>
     </igx-list>
 
     <button igxButton="fab" igxRipple="#FBB13C" class="addOrderButton" (click)="addOrderClicked()">
-      <igx-icon fontSet="material" name="add_circle_outline" style="font-size:46px; width:46px; height:46px;"></igx-icon>
+      <igx-icon fontSet="material" style="font-size:46px; width:46px; height:46px;">add</igx-icon>
     </button>
 
   </igx-tab-panel>
@@ -53,7 +62,7 @@
     </igx-navbar>
 
     <!-- The archive orders list -->
-    <igx-list (onItemClicked)="archiveListItemClicked($event)" id="archiveIgxList">
+    <igx-list (onItemClicked)="archiveListItemClicked($event)" [style.height.px]="archiveIgxListHeight">
 
       <igx-list-item isHeader="true">{{ "lblCompleted" | translate }}</igx-list-item>  
       <igx-list-item *ngFor="let order of ordersCompleted">

src/app/board/board.component.ts

@@ -4,10 +4,11 @@ import { Router, ActivatedRoute, ParamMap } from "@angular/router";
 import { MessagesService } from "../messages-service/messages.service";
 import { MessageTarget } from "../messages-service/messageTarget";
 import { OrdersService } from "../orders-service/orders.service";
+import { OrderStatus } from "../orders-service/orderStatus";
 
 import { TranslateService, LangChangeEvent } from "@ngx-translate/core";
-import { IgxBottomNavComponent } from "igniteui-angular";
-import { IgxToastComponent } from "igniteui-angular";
+import { IgxBottomNavComponent, IgxListPanState, IgxSnackbarComponent, IgxToastComponent } from "igniteui-angular";
+import { Order } from "../orders-service/order";
 
 @Component({
   selector: "app-board",
@@ -16,14 +17,28 @@ import { IgxToastComponent } from "igniteui-angular";
 })
 export class BoardComponent implements OnInit, AfterViewInit {
 
-  @ViewChild("toastComp") toastComp: IgxToastComponent;
-  @ViewChild("mainTabBar") mainTabBar: IgxBottomNavComponent;
-  searchCriteriaValue: string = "";
+  @ViewChild("toastComp")
+  toastComp: IgxToastComponent;
+
+  @ViewChild("mainTabBar")
+  mainTabBar: IgxBottomNavComponent;
+
+  @ViewChild("snackbar1")
+  snackbar1: IgxSnackbarComponent;
+
+  searchCriteriaValue = "";
   ordersActive = [];
   ordersCompleted = [];
   ordersIncompleted = [];
   componentMessages: string[];
-  toastMessage: string = "";
+  toastMessage = "";
+  snackBarActionMessage = "";
+  activeIgxListHeight = 0;
+  archiveIgxListHeight = 0;
+
+  // for undo operation
+  undoOrder: Order = null;
+  undoOrderIndex: number;
 
   constructor(private ordersService: OrdersService,
               private translate: TranslateService,
@@ -35,9 +50,9 @@ export class BoardComponent implements OnInit, AfterViewInit {
     // internationalization
     translate.addLangs(["en", "jp"]);
     translate.setDefaultLang("en");
-    let browserLang = translate.getBrowserLang();
+    const browserLang = translate.getBrowserLang();
     translate.use(browserLang.match(/en|jp/) ? browserLang : "en");
-    //translate.use("jp");
+    // translate.use("jp");
   }
 
   ngOnInit() {
@@ -51,11 +66,11 @@ export class BoardComponent implements OnInit, AfterViewInit {
 
     // obtain messages for this component
     this.componentMessages = this.messagesService.obtainMessages(MessageTarget.Board);
-    
+
     // show a toast message if there is such request
     for (let i = 0; i < this.componentMessages.length; i++) {
       if (this.componentMessages[i].startsWith("showToast:")) {
-        let msgStr = this.componentMessages[i].substr(10);
+        const msgStr = this.componentMessages[i].substr(10);
         this.toastMessage = msgStr;
         this.toastComp.show();
         this.componentMessages.splice(i, 1);
@@ -67,13 +82,13 @@ export class BoardComponent implements OnInit, AfterViewInit {
     // switch selected tab if there is such request
     for (let i = 0; i < this.componentMessages.length; i++) {
       if (this.componentMessages[i].startsWith("switchTab:")) {
-        let requestedTabStr = this.componentMessages[i].substr(10);
-        if (requestedTabStr == "Active") {
-          let aTab = this.mainTabBar.tabs.toArray()[0];
+        const requestedTabStr = this.componentMessages[i].substr(10);
+        if (requestedTabStr === "Active") {
+          const aTab = this.mainTabBar.tabs.toArray()[0];
           aTab.select();
         } else
-        if (requestedTabStr == "Archive") {
-          let aTab = this.mainTabBar.tabs.toArray()[1];
+        if (requestedTabStr === "Archive") {
+          const aTab = this.mainTabBar.tabs.toArray()[1];
           aTab.select();
         }
         this.cdr.detectChanges();
@@ -88,8 +103,8 @@ export class BoardComponent implements OnInit, AfterViewInit {
   }
 
   activeListItemClicked(evt) {
-    if (evt.item) {
-      let orderId = this.ordersActive[evt.item.index].id;
+    if (evt.item && evt.direction === IgxListPanState.NONE) {
+      const orderId = this.ordersActive[evt.item.index].id;
       this.router.navigate(['/order', orderId]);
     }
   }
@@ -119,20 +134,88 @@ export class BoardComponent implements OnInit, AfterViewInit {
   // used to resize the IgxLists when resizing the browser window
   @HostListener("window:resize", ["$event"])
   onResize(evt) {
-    let theActiveIgxList = document.getElementById("activeIgxList");
-    if (theActiveIgxList) {
-      let newHeight = (window.innerHeight - 226) + "px";
-      theActiveIgxList.style.height = newHeight;
-    }
-    let theArchiveIgxList = document.getElementById("archiveIgxList");
-    if (theArchiveIgxList) {
-      let newHeight = (window.innerHeight - 139) + "px";
-      theArchiveIgxList.style.height = newHeight;
-    }
+    this.activeIgxListHeight = window.innerHeight - 226;
+    this.archiveIgxListHeight = window.innerHeight - 139;
   }
 
   addOrderClicked() {
     this.router.navigateByUrl("/addorder");
   }
 
+  public onLeftPanHandler(args) {
+    args.keepItem = true;
+
+    // cloning order befor it is changed
+    this.undoOrder = this.ordersActive[args.item.index].clone();
+    this.undoOrderIndex = args.item.index;
+
+    // remove from active list
+    const extractedOrder = this.ordersActive.splice(args.item.index, 1)[0];
+
+    // update the order by setting all order's items as found
+    for (const orderItem of extractedOrder.items) {
+      if (!orderItem.Found) {
+        orderItem.Found = true;
+      }
+    }
+
+    // set order's state to complete
+    extractedOrder.status = OrderStatus.Complete;
+
+    // add order to completed list
+    this.ordersCompleted.push(extractedOrder);
+
+    // update order status in the data source service
+    this.ordersService.updateOrderStatus(extractedOrder.id, OrderStatus.Complete);
+
+    // show an information snackbar with UNDO option
+    this.snackBarActionMessage = this.translate.instant("lblMovedToCompleted");
+    this.snackbar1.show();
+  }
+
+  public onRightPanHandler(args) {
+    args.keepItem = true;
+
+    // cloning order befor it is changed
+    this.undoOrder = this.ordersActive[args.item.index].clone();
+    this.undoOrderIndex = args.item.index;
+
+    // remove from active list
+    const extractedOrder = this.ordersActive.splice(args.item.index, 1)[0];
+
+    // set order's state to complete
+    extractedOrder.status = OrderStatus.Incomplete;
+
+    // add order to incompleted list
+    this.ordersIncompleted.push(extractedOrder);
+
+    // update order status in the data source service
+    this.ordersService.updateOrderStatus(extractedOrder.id, OrderStatus.Incomplete);
+
+    // show an information snackbar with UNDO option
+    this.snackBarActionMessage = this.translate.instant("lblMovedToIncompleted");
+    this.snackbar1.show();
+  }
+
+  public performUndo() {
+    this.snackbar1.hide();
+    if (this.undoOrder != null) {
+      // search for order with this id in both local completed list and local incompleted list and remove it
+      if (this.ordersCompleted[this.ordersCompleted.length - 1].id === this.undoOrder.id) {
+        this.ordersCompleted.pop();
+      } else if (this.ordersIncompleted[this.ordersIncompleted.length - 1].id === this.undoOrder.id) {
+        this.ordersIncompleted.pop();
+      }
+
+      // insert back the removed order in the active list
+      this.ordersActive.splice(this.undoOrderIndex, 0, this.undoOrder);
+
+      // update order status in the data source service
+      this.ordersService.updateOrderStatus(this.undoOrder.id, OrderStatus.Active);
+
+      this.undoOrder = null;
+      this.undoOrderIndex = 0;
+    }
+  }
+
 }