Update projects

Author: AlisherAmonulloev

Angular/src/app/app.component.html

@@ -1,3 +1,30 @@
-<div class="default-style">
-  <dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
+<div id="container">
+  <dx-lookup
+    [dataSource]="dataSource"
+    valueExpr="ID"
+    displayExpr="Subject"
+    searchMode="contains"
+    [searchExpr]="['Assignee', 'Subject']"
+    [minSearchLength]="2"
+    [showDataBeforeSearch]="true"
+    (onValueChanged)="onValueChanged($event)"
+    [grouped]="true"
+    groupTemplate="listGroup"
+    pageLoadMode="nextButton"
+    nextButtonText="More"
+    itemTemplate="listItem"
+  >
+    <dxo-drop-down-options [hideOnOutsideClick]="true" [showTitle]="false">
+    </dxo-drop-down-options>
+    <div *dxTemplate="let data of 'listGroup'">
+      {{ data.key + " (" + data.items.length + " tasks)" }}
+    </div>
+    <div *dxTemplate="let itemData of 'listItem'">
+      {{
+        itemData.disabled
+          ? "\u274C " + itemData.Subject
+          : "\u2705 " + itemData.Subject
+      }}
+    </div>
+  </dx-lookup>
 </div>

Angular/src/app/app.component.scss

@@ -1,4 +1,5 @@
-.default-style {
-  margin: 50px;
-  width: 90vw;
+#container {
+  width: 500px;
+  height: 500px;
+  padding-top: 5px;
 }

Angular/src/app/app.component.ts

@@ -1,20 +1,33 @@
 import { Component } from '@angular/core';
-import { ClickEvent } from 'devextreme/ui/button';
+import notify from 'devextreme/ui/notify';
+import DataSource from 'devextreme/data/data_source';
+import { DxLookupTypes } from 'devextreme-angular/ui/lookup';
+import { Task } from './app.types';
+import { AppService } from './app.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  providers: [AppService],
 })
 export class AppComponent {
-  title = 'Angular';
+  employeesTasks: Task[];
 
-  counter = 0;
+  dataSource: DataSource;
 
-  buttonText = 'Click count: 0';
+  constructor(private readonly appService: AppService) {
+    this.employeesTasks = this.appService.getTasks();
+    this.dataSource = new DataSource({
+      store: this.employeesTasks,
+      key: 'ID',
+      group: 'Assignee',
+      paginate: true,
+      pageSize: 2,
+    });
+  }
 
-  onClick(e: ClickEvent): void {
-    this.counter++;
-    this.buttonText = `Click count: ${this.counter}`;
+  onValueChanged(e: DxLookupTypes.ValueChangedEvent): void {
+    notify(`Previous: ${e.previousValue}, Current: ${e.value}`, 'info', 2000);
   }
 }

Angular/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { DxButtonModule } from 'devextreme-angular/ui/button';
+import { DxLookupModule } from 'devextreme-angular/ui/lookup';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -11,7 +11,7 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    DxButtonModule,
+    DxLookupModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

Angular/src/app/app.service.ts

@@ -0,0 +1,78 @@
+import { Injectable } from '@angular/core';
+import { Task } from './app.types';
+
+const employeesTasks: Task[] = [
+  {
+    ID: 1,
+    Assignee: 'Mr. John Heart',
+    Subject: 'Choose between PPO and HMO Health Plan',
+    disabled: true,
+  }, {
+    ID: 2,
+    Assignee: 'Mr. John Heart',
+    Subject: 'Google AdWords Strategy',
+  }, {
+    ID: 3,
+    Assignee: 'Mr. John Heart',
+    Subject: 'New Brochures',
+  }, {
+    ID: 4,
+    Assignee: 'Mr. John Heart',
+    Subject: 'Update NDA Agreement',
+  }, {
+    ID: 5,
+    Assignee: 'Mr. John Heart',
+    Subject: 'Review Product Recall Report by Engineering Team',
+  }, {
+    ID: 6,
+    Assignee: 'Mrs. Olivia Peyton',
+    Subject: 'Update Personnel Files',
+  }, {
+    ID: 7,
+    Assignee: 'Mrs. Olivia Peyton',
+    Subject: 'Review Health Insurance Options Under the Affordable Care Act',
+  }, {
+    ID: 8,
+    Assignee: 'Mrs. Olivia Peyton',
+    Subject: 'Non-Compete Agreements',
+  }, {
+    ID: 9,
+    Assignee: 'Mrs. Olivia Peyton',
+    Subject: 'Give Final Approval for Refunds',
+  }, {
+    ID: 10,
+    Assignee: 'Mr. Robert Reagan',
+    Subject: 'Deliver R&D Plans for 2013',
+  }, {
+    ID: 11,
+    Assignee: 'Mr. Robert Reagan',
+    Subject: 'Decide on Mobile Devices to Use in the Field',
+  }, {
+    ID: 12,
+    Assignee: 'Mr. Robert Reagan',
+    Subject: 'Try New Touch-Enabled WinForms Apps',
+  }, {
+    ID: 13,
+    Assignee: 'Mr. Robert Reagan',
+    Subject: 'Approval on Converting to New HDMI Specification',
+  }, {
+    ID: 14,
+    Assignee: 'Ms. Greta Sims',
+    Subject: 'Approve Hiring of John Jeffers',
+  }, {
+    ID: 15,
+    Assignee: 'Ms. Greta Sims',
+    Subject: 'Update Employee Files with New NDA',
+  }, {
+    ID: 16,
+    Assignee: 'Ms. Greta Sims',
+    Subject: 'Provide New Health Insurance Docs',
+  },
+];
+
+@Injectable()
+export class AppService {
+  getTasks(): Task[] {
+    return employeesTasks;
+  }
+}

Angular/src/app/app.types.ts

@@ -0,0 +1,6 @@
+export interface Task {
+  ID: number;
+  Assignee: string;
+  Subject: string;
+  disabled?: boolean;
+}