Merge pull request #38 from czeckd/simple-arrays

Simple string array support

Author: czeckd

README.md

@@ -34,19 +34,17 @@ Basic usage is:
 ```
 The following parameters can be set on a dual-list: 
 - **key** - The unique identifier field of each object in the `source` and 
-`destination` arrays, default is ``_id``.
+`destination` arrays, default is ``_id``. (With a source of an array of strings, each string is its own id.)
 - **display** - The field of each object for displaying the object each the
-lists, default is ``_name``.
+lists, default is ``_name``. (With a source of an array of strings, each string is its own display.)
 - **height** - The height of the lists, default is ``100px``.
 - **format** - A format object, default is ``{ add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: 'left-to-right' }``
-- **filter** - A boolean whether or not to display a filter for the lists,
-default is ``false``.
-- **sort** - A boolean whether or not to keep the lists sorted, default is 
-``false``.
+- **filter** - A boolean whether or not to display a filter for the lists, default is ``false``.
+- **sort** - A boolean whether or not to keep the lists sorted, default is ``false``.
 - **compare** - A compare function to be used for sorting the lists. Note if
 sort is not set and compare is set, then sort will be set ``true``.
-- **source** - The source array of objects for the list. This is the universal, master list of all possible objects.
-- **destination** The destination array of objects selected from the list.
+- **source** - The source array of objects or strings for the list. (This is the universal, master list of all possible objects.)
+- **destination** The destination array of objects or strings selected from the source.
 Note, the ``destination`` array can have prexisting elements.
 
 For more usage examples, see the [`demo-app.component.ts`](https://github.com/czeckd/angular-dual-listbox/blob/master/app/demo-app.component.ts).

app/demo-app.component.ts

@@ -73,12 +73,25 @@ import { DualListComponent } from 'angular-dual-listbox';
 					</form>
 				</div>
 			</div>
+			<div class="row">
+				<div class="col-sm-12">
+					<label>Array source</label>
+					<form class="form well">
+						<div class="radio" *ngFor="let item of arrayType">
+							<label>
+								<input type="radio" name="sourceType" [value]="item.value" [(ngModel)]="type" (change)="swapSource()">
+								{{item.name}} &mdash; {{item.detail}}
+							</label>
+						</div>
+					</form>
+				</div>
+			</div>
+
 			<div class="row">
 				<div class="col-sm-12">
 					<label>General</label><br/>
 					<form class="form-inline well">
 						<button class="btn btn-default" (click)="doFilter()">{{filterBtn()}}</button>
-						<button class="btn btn-default" (click)="doSwap()">Swap source</button>
 						<button class="btn btn-primary" (click)="doReset()">Reset</button>
 					</form>
 				</div>
@@ -102,13 +115,21 @@ export class DemoAppComponent implements OnInit {
 	sourceLeft = true;
 	format:any = DualListComponent.DEFAULT_FORMAT;
 
+	private sourceTube:Array<string>;
 	private sourceStations:Array<any>;
 	private sourceChessmen:Array<any>;
 
+	private confirmedTube:Array<string>;
 	private confirmedStations:Array<any>;
 	private confirmedChessmen:Array<any>;
 
-	private toggle = true;
+	arrayType = [
+		{ name: 'Rio Grande', detail: '(object array)', value: 'station' },
+		{ name: 'Chessmen', detail: '(object array)', value: 'chess' },
+		{ name: 'Underground', detail: '(string array)', value: 'tube' }
+	];
+
+	type = this.arrayType[0].value;
 
 	private stations:Array<any> = [
 		{ key: 1, station: 'Antonito', state: 'CO' },
@@ -154,47 +175,99 @@ export class DemoAppComponent implements OnInit {
 		{ _id: 6, name: 'King' }
 	];
 
+	private tube:Array<string> = [
+		'Harrow & Wealdstone',
+		'Kenton',
+		'South Kenton',
+		'North Wembley',
+		'Wembley Central',
+		'Stonebridge Park',
+		'Harlesden',
+		'Willesden Junction',
+		'Kensal Green',
+		"Queen's Park",
+		'Kilburn Park',
+		'Maida Vale',
+		'Warwick Avenue',
+		'Paddington',
+		'Edgware Road',
+		'Marylebone',
+		'Baker Street',
+		"Regent's Park",
+		'Oxford Circus',
+		'Piccadilly Circus',
+		'Charing Cross',
+		'Embankment',
+		'Waterloo',
+		'Lambeth North',
+		'Elephant & Castle'
+	];
+
 	ngOnInit() {
 		this.doReset();
 	}
 
 	private useStations() {
-		this.toggle = true;
 		this.key = 'key';
-		this.display = 'station';
+		this.display = 'station'; //[ 'station', 'state' ];
 		this.keepSorted = true;
 		this.source = this.sourceStations;
 		this.confirmed = this.confirmedStations;
 	}
 
 	private useChessmen() {
-		this.toggle = false;
 		this.key = '_id';
 		this.display = 'name';
 		this.keepSorted = false;
 		this.source = this.sourceChessmen;
 		this.confirmed = this.confirmedChessmen;
 	}
 
-	doSwap() {
-		if (this.toggle) {
-			this.useChessmen();
-		} else {
+	private useTube() {
+		this.key = undefined;
+		this.display = undefined;
+		this.keepSorted = false;
+		this.source = this.sourceTube;
+		this.confirmed = this.confirmedTube;
+	}
+
+	swapSource() {
+		switch (this.type) {
+		case this.arrayType[0].value:
 			this.useStations();
+			break;
+		case this.arrayType[1].value:
+			this.useChessmen();
+			break;
+		case this.arrayType[2].value:
+			this.useTube();
+			break
 		}
 	}
 
 	doReset() {
 		this.sourceChessmen = JSON.parse(JSON.stringify(this.chessmen));
 		this.sourceStations = JSON.parse(JSON.stringify(this.stations));
+		this.sourceTube = JSON.parse(JSON.stringify(this.tube));
 		this.confirmedChessmen = new Array<any>();
 		this.confirmedStations = new Array<any>();
+		this.confirmedTube = new Array<string>();
+
+		// Preconfirm some items.
+		this.confirmedStations.push( this.stations[31] );
+		this.confirmedTube.push( this.tube[13] );
+		this.confirmedTube.push( this.tube[23] );
 
-		if (this.toggle) {
+		switch (this.type) {
+		case this.arrayType[0].value:
 			this.useStations();
-			this.confirmedStations.push( { key: 32, station: 'Eureka', state: 'CO' } );
-		} else {
+			break;
+		case this.arrayType[1].value:
 			this.useChessmen();
+			break;
+		case this.arrayType[2].value:
+			this.useTube();
+			break;
 		}
 	}
 
@@ -205,17 +278,21 @@ export class DemoAppComponent implements OnInit {
 	}
 
 	doCreate() {
-		let o:any = {};
-		o[this.key] = this.source.length + 1;
-		o[this.display] = this.userAdd;
-		this.source.push( o );
+		if (typeof this.source[0] === 'object') {
+			let o:any = {};
+			o[this.key] = this.source.length + 1;
+			o[this.display] = this.userAdd;
+			this.source.push( o );
+		} else {
+			this.source.push(this.userAdd);
+		}
 		this.userAdd = '';
 	}
 
 	doAdd() {
 		for (let i = 0, len = this.source.length; i < len; i += 1) {
 			let o = this.source[i];
-			let found = this.confirmed.find( (e:any) => e[this.key] === o[this.key] );
+			let found = this.confirmed.find( (e:any) => e === o );
 			if (!found) {
 				this.confirmed.push(o);
 				break;

lib/dual-list.component.html

@@ -27,7 +27,6 @@
 		</div>
 	</div>
 
-<!-- style="margin-left:10px;" -->
 	<div class="listbox" [ngStyle]="{ 'order' : direction() ? 2 : 1, 'margin-left' : direction() ? '10px' : 0 }">
 		<button type="button" name="removeBtn" class="btn btn-primary btn-block"
 			(click)="moveItem(confirmed, available)" [ngClass]="direction() ? 'point-left' : 'point-right'"

lib/dual-list.component.ts

@@ -119,7 +119,7 @@ export class DualListComponent implements DoCheck, OnChanges {
 			sourceChanges.forEachAddedItem((r:any) => {
 				// Do not add duplicates even if source has duplicates.
 				if (this.findItemIndex(this.available.list, r.item, this.key) === -1) {
-					this.available.list.push( { _id: r.item[this.key], _name: this.makeName(r.item) });
+					this.available.list.push( { _id: this.makeId(r.item), _name: this.makeName(r.item) });
 				}
 			});
 
@@ -200,7 +200,7 @@ export class DualListComponent implements DoCheck, OnChanges {
 			this.selectItem(list.pick, item);
 		}
 		list.dragStart = true;
-		event.dataTransfer.setData('text', item[this.key]);
+		event.dataTransfer.setData('text', item['_id']);
 	}
 
 	allowDrop(event:DragEvent, list:BasicList) {
@@ -223,10 +223,7 @@ export class DualListComponent implements DoCheck, OnChanges {
 
 		let id = event.dataTransfer.getData('text');
 
-		/* tslint:disable triple-equals */
-		// Use coercion to filter.
-		let mv = list.list.filter( (e:any) => e[this.key] == id );
-		/* tslint:enable triple-equals */
+		let mv = list.list.filter( (e:any) => e._id === id );
 		if (mv.length > 0) {
 			for (let i = 0, len = mv.length; i < len; i += 1) {
 				list.pick.push( mv[i] );
@@ -239,30 +236,46 @@ export class DualListComponent implements DoCheck, OnChanges {
 		}
 	}
 
-	trueUp() {
+	private trueUp() {
 		let changed = false;
 
 		// Clear removed items.
 		let pos = this.destination.length;
 		while ((pos -= 1) >= 0) {
 			let mv = this.confirmed.list.filter( conf => {
-				return conf._id === this.destination[pos][this.key];
+				if (typeof this.destination[pos] === 'object') {
+					return conf._id === this.destination[pos][this.key];
+				} else {
+					return conf._id === this.destination[pos];
+				}
 			});
-
 			if (mv.length === 0) {
 				// Not found so remove.
 				this.destination.splice(pos, 1);
 				changed = true;
 			}
 		}
 
+
 		// Push added items.
 		for (let i = 0, len = this.confirmed.list.length; i < len; i += 1) {
-			let mv = this.destination.filter( (d:any) => { return (d[this.key] === this.confirmed.list[i]._id); });
+			let mv = this.destination.filter( (d:any) => {
+				if (typeof d === 'object') {
+					return (d[this.key] === this.confirmed.list[i]._id);
+				} else {
+					return (d === this.confirmed.list[i]._id);
+				}
+			});
 
 			if (mv.length === 0) {
 				// Not found so add.
-				mv = this.source.filter( (o:any) => { return (o[this.key] === this.confirmed.list[i]._id); });
+				mv = this.source.filter( (o:any) => {
+					if (typeof o === 'object') {
+						return (o[this.key] === this.confirmed.list[i]._id);
+					} else {
+						return (o === this.confirmed.list[i]._id);
+					}
+				});
 
 				if (mv.length > 0) {
 					this.destination.push(mv[0]);
@@ -279,14 +292,28 @@ export class DualListComponent implements DoCheck, OnChanges {
 	findItemIndex(list:Array<any>, item:any, key:any = '_id') {
 		let idx = -1;
 
-		// Assumption is that the arrays do not have duplicates.
-		list.filter( (e:any) => {
+		function matchObject(e:any) {
 			if (e._id === item[key]) {
 				idx = list.indexOf(e);
 				return true;
 			}
 			return false;
-		});
+		}
+
+		function match(e:any) {
+			if (e._id === item) {
+				idx = list.indexOf(e);
+				return true;
+			}
+			return false;
+		}
+
+		// Assumption is that the arrays do not have duplicates.
+		if (typeof item === 'object') {
+			list.filter(matchObject);
+		} else {
+			list.filter(match);
+		}
 
 		return idx;
 	}
@@ -451,9 +478,34 @@ export class DualListComponent implements DoCheck, OnChanges {
 		}
 	}
 
+	private makeId(item:any) : string | number {
+		if (typeof item === 'object') {
+			return item[this.key];
+		} else {
+			return item;
+		}
+	}
+
 	// Allow for complex names by passing an array of strings.
 	// Example: [display]="[ '_type.substring(0,1)', '_name' ]"
-	makeName(item:any) : string {
+	private makeName(item:any) : string {
+		const display = this.display;
+
+		function fallback(item:any) {
+			switch (Object.prototype.toString.call(item)) {
+			case '[object Number]':
+				return item;
+			case '[object String]':
+				return item;
+			default:
+				if (item !== undefined) {
+					return item[display];
+				} else {
+					return 'undefined';
+				}
+			}
+		}
+
 		let str = '';
 
 		if (this.display !== undefined) {
@@ -498,20 +550,11 @@ export class DualListComponent implements DoCheck, OnChanges {
 				}
 				return str;
 			} else {
-				return item[this.display];
+				return fallback(item);
 			}
 		}
 
-		switch (Object.prototype.toString.call(item)) {
-		case '[object Number]':
-			return item;
-		case '[object String]':
-			return item;
-		default:
-			if (item !== undefined) {
-				return item[this.display];
-			}
-		}
+		return fallback(item);
 	}
 
 }