feat(step-by-step): add groupPriority to sort components within a g…

…roup #303

Also bumping the Grid in Ignite UI for Angular back on top of the group

lib/BaseComponent.ts

@@ -5,6 +5,7 @@ export class BaseComponent implements Component {
 	public templates: Template[];
 	public name: string;
 	public group: string;
+	public groupPriority = 0;
 	private basePath: string = __dirname;
 
 	/**

lib/BaseProjectLibrary.ts

@@ -99,6 +99,7 @@ export class BaseProjectLibrary implements ProjectLibrary {
 
 				const component: Component = {
 					group: template.controlGroup,
+					groupPriority: 0,
 					name: newComponent,
 					templates: []
 				};
@@ -145,7 +146,9 @@ export class BaseProjectLibrary implements ProjectLibrary {
 	}
 
 	public getComponentNamesByGroup(group: string): string[] {
-		return this.components.filter(x => x.group === group).map(x => x.name);
+		return this.components.filter(x => x.group === group)
+			.sort((a, b) => b.groupPriority - a.groupPriority)
+			.map(x => x.name);
 	}
 
 	/**

lib/MultiTemplateComponent.ts

@@ -1,6 +1,7 @@
 export abstract class MultiTemplateComponent<T extends Template> implements Component {
 	public name: string;
 	public group: string;
+	public groupPriority = 0;
 
 	get templates(): T[] {
 		// TODO: prop-full

lib/types/Component.d.ts

@@ -2,10 +2,15 @@
  * A set of Templates for a common component
  */
 interface Component {
-	/** Name of the parent group, e.g. Data Visualization */
-	group: string;
 	/** Component name, e.g. Pie Chart or Grid  */
 	name: string;
+	/** Name of the parent group, e.g. Data Visualization */
+	group: string;
+	/**
+	 * Controls the position of the component within the group.
+	 * Step by step mode lists components with higher values first.
+	 */
+	groupPriority: number;
 
 	templates: Template[];
 }

spec/unit/BaseProjectLibrary-spec.ts

@@ -273,6 +273,24 @@ describe("Unit - Base project library ", () => {
 		done();
 	});
 
+	it("should sort component in a group based on priority", async done => {
+		spyOnProperty(BaseProjectLibrary.prototype, "components").and.returnValue([
+			{ name: "Component1", group: "commonGroup", groupPriority: 1 },
+			{ name: "Component2", group: "commonGroup", groupPriority: 20 },
+			{ name: "Component3", group: "commonGroup", groupPriority: 13 },
+			{ name: "Component4", group: "commonGroup", groupPriority: 4 },
+			{ name: "Component5", group: "commonGroup", groupPriority: -4 },
+			{ name: "Component6", group: "commonGroup", groupPriority: 0 },
+			{ name: "Component7", group: "commonGroup", groupPriority: 0 }
+		] as Component[]);
+
+		const library = new BaseProjectLibrary(__dirname);
+		expect(library.getComponentNamesByGroup("commonGroup")).toEqual(
+			["Component2", "Component3", "Component4", "Component1", "Component6", "Component7", "Component5"]
+		);
+		done();
+	});
+
 	it("gets correct project", async done => {
 		spyOn(Util, "getDirectoryNames").and.returnValues(["chart", "combo", "grid"]);
 

templates/angular/igx-ts/grid/index.ts

@@ -9,6 +9,7 @@ class IgxGridComponent extends BaseComponent {
 		super(__dirname);
 		this.name  = "Grid";
 		this.group = "Grids & Lists";
+		this.groupPriority = 10;
 	}
 }
 module.exports = new IgxGridComponent();