Skip to content

Commit a07f73f

Browse files
Zdravko BranzovZdravko Branzov
Zdravko Branzov
authored and
Zdravko Branzov
committed
Merge branch 'master' into release
2 parents 2270715 + ffaea3d commit a07f73f

21 files changed

+555
-30
lines changed

Diff for: ‎sdkAngular/app/app.routing.ts

+28
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,34 @@ let APP_ROUTES: Routes = [
2626
"title": "Getting Started"
2727
}
2828
},
29+
{
30+
path: "ListViewDataOperationsFilteringComponent",
31+
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
32+
data: {
33+
"title": "Filtering"
34+
}
35+
},
36+
{
37+
path: "ListViewDataOperationsSortingComponent",
38+
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
39+
data: {
40+
"title": "Sorting"
41+
}
42+
},
43+
{
44+
path: "ListViewDataOperationsGroupingComponent",
45+
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
46+
data: {
47+
"title": "Grouping"
48+
}
49+
},
50+
{
51+
path: "ListViewDataOperationsMultipleComponent",
52+
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
53+
data: {
54+
"title": "Multiple operations"
55+
}
56+
},
2957
{
3058
path: "ListViewHeaderFooterComponent",
3159
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',

Diff for: ‎sdkAngular/app/listview/dataItem.service.ts

+27-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Injectable } from '@angular/core';
22
import { DATAITEMS } from "./mock-dataItems";
33
import { DataItem } from "./dataItem";
4+
import { ObservableArray } from 'tns-core-modules/data/observable-array/observable-array';
45
var namesAndEmails = require("../listview/NamesAndEmails.json")
56
var posts = require("../listview/posts.json")
67
var listItems = require("../listview/item-layouts/listItems.json")
@@ -67,12 +68,31 @@ export class DataItemService {
6768
return result;
6869
}
6970

71+
getDataOperationsItems(): DataItem[] {
72+
return [
73+
new DataItem(89, "Special Item 89", "This is item category is: Category 1", null, null, null, false, null, "Category 1"),
74+
new DataItem(23, "Item 23", "This is item category is: Category 2", null, null, null, false, null, "Category 2"),
75+
new DataItem(1, "Item 1", "This is item category is: Category 1", null, null, null, false, null, "Category 1"),
76+
new DataItem(34, "Item 34", "This is item category is: Category 3", null, null, null, false, null, "Category 3"),
77+
new DataItem(55, "Special Item 55", "This is item category is: Category 3", null, null, null, false, null, "Category 3"),
78+
new DataItem(78, "Item 78", "This is item category is: Category 1", null, null, null, false, null, "Category 1"),
79+
new DataItem(5, "Item 5", "This is item category is: Category 1", null, null, null, false, null, "Category 1"),
80+
new DataItem(111, "Special Item 111", "This is item category is: Category 2", null, null, null, false, null, "Category 2"),
81+
new DataItem(665, "Special Item 665", "This is item category is: Category 2", null, null, null, false, null, "Category 2"),
82+
new DataItem(1134, "Item 1134", "This is item category is: Category 1", null, null, null, false, null, "Category 1"),
83+
new DataItem(22, "Special Item 22", "This is item category is: Category 3", null, null, null, false, null, "Category 3"),
84+
new DataItem(345, "Item 345", "This is item category is: Category 1", null, null, null, false, null, "Category 1"),
85+
new DataItem(80, "Item 80", "This is item category is: Category 1", null, null, null, false, null, "Category 1"),
86+
new DataItem(54, "Item 54", "This is item category is: Category 3", null, null, null, false, null, "Category 3"),
87+
];
88+
}
89+
7090
private getRandomLengthString() {
71-
var sentenceLength = Math.round((Math.random() * 15));
72-
var result = this._words[0];
73-
for (var i = 0; i < sentenceLength; i++) {
74-
result += (this._words[i % this._words.length] + " ");
75-
}
76-
return result;
77-
}
91+
var sentenceLength = Math.round((Math.random() * 15));
92+
var result = this._words[0];
93+
for (var i = 0; i < sentenceLength; i++) {
94+
result += (this._words[i % this._words.length] + " ");
95+
}
96+
return result;
97+
}
7898
}

Diff for: ‎sdkAngular/app/listview/dataItem.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// >> listview-angular-data-item
22
export class DataItem {
3-
constructor(public id?: number, public name?: string, public description?: string, public title?: string, public text?: string, public image?: string, public selected?: boolean, public type?: string) {
3+
constructor(public id?: number, public name?: string, public description?: string, public title?: string, public text?: string, public image?: string, public selected?: boolean, public type?: string, public category?: string) {
44
}
55
}
66
// << listview-angular-data-item

Diff for: ‎sdkAngular/app/listview/filtering/listview-data-operations-filtering.component.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.nameLabel {
2+
font-size: 20
3+
}
4+
5+
.descriptionLabel {
6+
font-size: 14;
7+
}

Diff for: ‎sdkAngular/app/listview/filtering/listview-data-operations-filtering.component.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<GridLayout tkExampleTitle tkToggleNavButton rows="auto, *">
2+
<StackLayout orientation="horizontal">
3+
<Button [text]="isEnabled ? 'Disable filtering' : 'Enable filtering'" (tap)="toggleFilter()"></Button>
4+
</StackLayout>
5+
<RadListView [items]="dataItems" row="1" #myListView [filteringFunction]="myFilteringFunc">
6+
<ng-template tkListItemTemplate let-item="item">
7+
<StackLayout orientation="vertical">
8+
<Label class="nameLabel" [text]="item.name"></Label>
9+
<Label class="descriptionLabel" [text]="item.description"></Label>
10+
</StackLayout>
11+
</ng-template>
12+
</RadListView>
13+
</GridLayout>

Diff for: ‎sdkAngular/app/listview/filtering/listview-data-operations-filtering.component.ts

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Component, OnInit, ViewChild } from "@angular/core";
2+
import { ObservableArray } from "tns-core-modules/data/observable-array";
3+
import { RadListViewComponent } from "nativescript-pro-ui/listview/angular";
4+
import { DataItem } from "../dataItem";
5+
import { DataItemService } from "../dataItem.service";
6+
7+
@Component({
8+
moduleId: module.id,
9+
selector: "tk-listview-data-operations-filtering",
10+
providers: [DataItemService],
11+
templateUrl: "listview-data-operations-filtering.component.html",
12+
styleUrls: ["listview-data-operations-filtering.component.css"]
13+
})
14+
export class ListViewDataOperationsFilteringComponent implements OnInit {
15+
private _dataItems: ObservableArray<DataItem>;
16+
private _isEnabled: boolean;
17+
private _myFilteringFunc: (item: any) => any;
18+
19+
@ViewChild("myListView") myListViewComponent: RadListViewComponent;
20+
21+
constructor(private _dataItemService: DataItemService) {
22+
// >> listview-data-operations-filtering-angular
23+
this.myFilteringFunc = (item: DataItem) => {
24+
return item.name.includes("Special Item");
25+
};
26+
// << listview-data-operations-filtering-angular
27+
this.isEnabled = true;
28+
}
29+
30+
get dataItems(): ObservableArray<DataItem> {
31+
return this._dataItems;
32+
}
33+
34+
get isEnabled() {
35+
return this._isEnabled;
36+
}
37+
38+
set isEnabled(value: boolean) {
39+
this._isEnabled = value;
40+
}
41+
42+
get myFilteringFunc(): (item: any) => any {
43+
return this._myFilteringFunc;
44+
}
45+
46+
set myFilteringFunc(value: (item: any) => any) {
47+
this._myFilteringFunc = value;
48+
}
49+
50+
ngOnInit() {
51+
this._dataItems = new ObservableArray(this._dataItemService.getDataOperationsItems());
52+
}
53+
54+
public toggleFilter() {
55+
let listView = this.myListViewComponent.listView;
56+
if (!listView.filteringFunction) {
57+
listView.filteringFunction = this.myFilteringFunc;
58+
this.isEnabled = true;
59+
} else {
60+
listView.filteringFunction = undefined;
61+
this.isEnabled = false;
62+
}
63+
}
64+
}

Diff for: ‎sdkAngular/app/listview/grouping/listview-data-operations-grouping.component.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.nameLabel {
2+
font-size: 20
3+
}
4+
5+
.descriptionLabel {
6+
font-size: 14;
7+
}

Diff for: ‎sdkAngular/app/listview/grouping/listview-data-operations-grouping.component.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<GridLayout tkExampleTitle tkToggleNavButton rows="auto, *">
2+
<StackLayout orientation="horizontal">
3+
<Button [text]="isEnabled ? 'Disable grouping' : 'Enable grouping'" (tap)="toggleGrouping()"></Button>
4+
</StackLayout>
5+
<RadListView [items]="dataItems" row="1" #myListView [groupingFunction]="myGroupingFunc">
6+
<ng-template tkListItemTemplate let-item="item">
7+
<StackLayout orientation="vertical">
8+
<Label class="nameLabel" [text]="item.name"></Label>
9+
<Label class="descriptionLabel" [text]="item.description"></Label>
10+
</StackLayout>
11+
</ng-template>
12+
</RadListView>
13+
</GridLayout>

Diff for: ‎sdkAngular/app/listview/grouping/listview-data-operations-grouping.component.ts

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Component, OnInit, ViewChild } from "@angular/core";
2+
import { ObservableArray } from "tns-core-modules/data/observable-array";
3+
import { RadListViewComponent } from "nativescript-pro-ui/listview/angular";
4+
import { DataItem } from "../dataItem";
5+
import { DataItemService } from "../dataItem.service";
6+
7+
@Component({
8+
moduleId: module.id,
9+
selector: "tk-listview-data-operations-grouping",
10+
providers: [DataItemService],
11+
templateUrl: "listview-data-operations-grouping.component.html",
12+
styleUrls: ["listview-data-operations-grouping.component.css"]
13+
})
14+
export class ListViewDataOperationsGroupingComponent implements OnInit {
15+
private _dataItems: ObservableArray<DataItem>;
16+
private _isEnabled: boolean;
17+
private _myGroupingFunc: (item: any) => any;
18+
19+
@ViewChild("myListView") myListViewComponent: RadListViewComponent;
20+
21+
constructor(private _dataItemService: DataItemService) {
22+
// >> listview-data-operations-grouping-angular
23+
this.myGroupingFunc = (item: DataItem) => {
24+
return item.category;
25+
};
26+
// << listview-data-operations-grouping-angular
27+
this.isEnabled = true;
28+
}
29+
30+
get dataItems(): ObservableArray<DataItem> {
31+
return this._dataItems;
32+
}
33+
34+
get isEnabled() {
35+
return this._isEnabled;
36+
}
37+
38+
set isEnabled(value: boolean) {
39+
this._isEnabled = value;
40+
}
41+
42+
get myGroupingFunc(): (item: any) => any {
43+
return this._myGroupingFunc;
44+
}
45+
46+
set myGroupingFunc(value: (item: any) => any) {
47+
this._myGroupingFunc = value;
48+
}
49+
50+
ngOnInit() {
51+
this._dataItems = new ObservableArray(this._dataItemService.getDataOperationsItems());
52+
}
53+
54+
public toggleGrouping() {
55+
let listView = this.myListViewComponent.listView;
56+
if (!listView.groupingFunction) {
57+
listView.groupingFunction = this.myGroupingFunc;
58+
this.isEnabled = true;
59+
} else {
60+
listView.groupingFunction = undefined;
61+
this.isEnabled = false;
62+
}
63+
}
64+
}

Diff for: ‎sdkAngular/app/listview/listview-examples.module.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ import { ListViewSwipeActionsMultipleComponent } from './swipe-actions/listview-
3535
import { ListViewSwipeActionsThresholdsComponent } from './swipe-actions/listview-swipe-actions-thresholds.component';
3636
import { ListViewSwipeActionsComponent } from './swipe-actions/listview-swipe-actions.component';
3737
import { ListViewSwipeDisableComponent } from './swipe-actions/listview-swipe-disable.component';
38+
import { ListViewDataOperationsFilteringComponent } from './filtering/listview-data-operations-filtering.component';
39+
import { ListViewDataOperationsGroupingComponent } from './grouping/listview-data-operations-grouping.component';
40+
import { ListViewDataOperationsMultipleComponent } from './multiple-operations/listview-data-operations-multiple.component';
41+
import { ListViewDataOperationsSortingComponent } from './sorting/listview-data-operations-sorting.component';
3842

3943
import { routes } from './listview-examples.routing';
4044
import { CommonDirectivesModule } from '../navigation/directives/common-directives.module';
@@ -79,7 +83,11 @@ import { CommonDirectivesModule } from '../navigation/directives/common-directiv
7983
ListViewSwipeActionsThresholdsComponent,
8084
ListViewSwipeActionsComponent,
8185
ListViewSwipeDisableComponent,
82-
ListViewScrollToIndexInitialComponent
86+
ListViewScrollToIndexInitialComponent,
87+
ListViewDataOperationsFilteringComponent,
88+
ListViewDataOperationsGroupingComponent,
89+
ListViewDataOperationsMultipleComponent,
90+
ListViewDataOperationsSortingComponent
8391
]
8492
})
8593
export class ListViewExamplesModule { }

Diff for: ‎sdkAngular/app/listview/listview-examples.routing.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ import { ListViewSwipeActionsMultipleComponent } from './swipe-actions/listview-
3131
import { ListViewSwipeActionsThresholdsComponent } from './swipe-actions/listview-swipe-actions-thresholds.component';
3232
import { ListViewSwipeActionsComponent } from './swipe-actions/listview-swipe-actions.component';
3333
import { ListViewSwipeDisableComponent } from './swipe-actions/listview-swipe-disable.component';
34+
import { ListViewDataOperationsFilteringComponent } from './filtering/listview-data-operations-filtering.component';
35+
import { ListViewDataOperationsGroupingComponent } from './grouping/listview-data-operations-grouping.component';
36+
import { ListViewDataOperationsMultipleComponent } from './multiple-operations/listview-data-operations-multiple.component';
37+
import { ListViewDataOperationsSortingComponent } from './sorting/listview-data-operations-sorting.component';
3438

3539
export const routes: Routes = [
3640
{ path: 'ListViewGettingStartedComponent', component: ListViewGettingStartedComponent },
@@ -62,5 +66,9 @@ export const routes: Routes = [
6266
{ path: 'ListViewSwipeActionsThresholdsComponent', component: ListViewSwipeActionsThresholdsComponent },
6367
{ path: 'ListViewSwipeActionsComponent', component: ListViewSwipeActionsComponent },
6468
{ path: 'ListViewSwipeDisableComponent', component: ListViewSwipeDisableComponent },
65-
{ path: 'ListViewScrollToIndexInitialComponent', component: ListViewScrollToIndexInitialComponent }
69+
{ path: 'ListViewScrollToIndexInitialComponent', component: ListViewScrollToIndexInitialComponent },
70+
{ path: 'ListViewDataOperationsFilteringComponent', component: ListViewDataOperationsFilteringComponent },
71+
{ path: 'ListViewDataOperationsGroupingComponent', component: ListViewDataOperationsGroupingComponent },
72+
{ path: 'ListViewDataOperationsMultipleComponent', component: ListViewDataOperationsMultipleComponent },
73+
{ path: 'ListViewDataOperationsSortingComponent', component: ListViewDataOperationsSortingComponent }
6674
];

Diff for: ‎sdkAngular/app/listview/multiple-operations/listview-data-operations-multiple.component.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* >> listview-angular-multiple-operations-css */
2+
.nameLabel {
3+
font-size: 20
4+
}
5+
6+
.descriptionLabel {
7+
font-size: 14;
8+
}
9+
/* << listview-angular-multiple-operations-css */

Diff for: ‎sdkAngular/app/listview/multiple-operations/listview-data-operations-multiple.component.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!-- >> listview-angular-multiple-operations-html -->
2+
<GridLayout tkExampleTitle tkToggleNavButton rows="*, *7">
3+
<StackLayout orientation="horizontal">
4+
<Button width="33%" [text]="isFilteringEnabled ? 'Disable filtering' : 'Enable filtering'" (tap)="toggleFilter()" ios:margin="5"></Button>
5+
<Button width="33%" [text]="isSortingEnabled ? 'Disable sorting' : 'Enable sorting'" (tap)="toggleSorting()" ios:margin="5"></Button>
6+
<Button width="33%" [text]="isGroupingEnabled ? 'Disable grouping' : 'Enable grouping'" (tap)="toggleGrouping()" ios:margin="5"></Button>
7+
</StackLayout>
8+
<RadListView [items]="dataItems" row="1" #myListView
9+
[sortingFunction]="mySortingFunc"
10+
[filteringFunction]="myFilteringFunc"
11+
[groupingFunction]="myGroupingFunc" >
12+
<ng-template tkListItemTemplate let-item="item">
13+
<StackLayout orientation="vertical">
14+
<Label class="nameLabel" [text]="item.name"></Label>
15+
<Label class="descriptionLabel" [text]="item.description"></Label>
16+
</StackLayout>
17+
</ng-template>
18+
</RadListView>
19+
</GridLayout>
20+
<!-- << listview-angular-multiple-operations-html -->

0 commit comments

Comments
 (0)