feat(container): render list of properties with correct type elements

src/component/app.tsx

@@ -9,11 +9,12 @@ import DevTools from 'mobx-react-devtools';
 import { PatternList } from './container/pattern_list';
 // import {PatternNavigation} from './container/pattern_navigation';
 import { ProjectList } from './container/project_list';
+import { PropertyList } from './container/property_list';
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Store } from '../store';
 import styledComponents from 'styled-components';
-import TabNavigation, {TabNavigationItem} from '../lsg/patterns/tab-navigation';
+import TabNavigation, { TabNavigationItem } from '../lsg/patterns/tab-navigation';
 
 const ElementPane = styledComponents.div`
 	display: flex;
@@ -44,10 +45,12 @@ class App extends React.Component<AppProps> {
 	private static PatternListID = 'patternlist';
 	private static PropertiesListID = 'propertieslist';
 	@observable protected activeTab: string = App.PatternListID;
-	@computed protected get isPatternListVisible(): boolean {
+	@computed
+	protected get isPatternListVisible(): boolean {
 		return Boolean(this.activeTab === App.PatternListID);
 	}
-	@computed protected get isPropertiesListVisible(): boolean {
+	@computed
+	protected get isPropertiesListVisible(): boolean {
 		return Boolean(this.activeTab === App.PropertiesListID);
 	}
 
@@ -72,23 +75,29 @@ class App extends React.Component<AppProps> {
 							<ProjectList store={this.props.store} />
 						</ProjectsPane>
 
-					<PatternsPane>
-						<Layout>
-							<TabNavigation>
-								<TabNavigationItem active={this.isPatternListVisible} onClick={event => this.handleTabNaviagtionClick(event, App.PatternListID)} tabText="Patterns" />
-								<TabNavigationItem active={this.isPropertiesListVisible} onClick={event => this.handleTabNaviagtionClick(event, App.PropertiesListID)} tabText="Properties" />
-							</TabNavigation>
-						</Layout>
-						{this.isPatternListVisible &&
-							<PatternList store={this.props.store} />
-						}
-						{this.isPropertiesListVisible &&
-							<div>
-								Properties
-							</div>
-						}
-					</PatternsPane >
-				</Layout>
+						<PatternsPane>
+							<Layout>
+								<TabNavigation>
+									<TabNavigationItem
+										active={this.isPatternListVisible}
+										onClick={event =>
+											this.handleTabNaviagtionClick(event, App.PatternListID)
+										}
+										tabText="Patterns"
+									/>
+									<TabNavigationItem
+										active={this.isPropertiesListVisible}
+										onClick={event =>
+											this.handleTabNaviagtionClick(event, App.PropertiesListID)
+										}
+										tabText="Properties"
+									/>
+								</TabNavigation>
+							</Layout>
+							{this.isPatternListVisible && <PatternList store={this.props.store} />}
+							{this.isPropertiesListVisible && <PropertyList store={this.props.store} />}
+						</PatternsPane>
+					</Layout>
 
 					<PreviewPane
 						dangerouslySetInnerHTML={{
@@ -102,13 +111,13 @@ class App extends React.Component<AppProps> {
 					</ElementPane>
 
 					<IconRegistry names={IconName} />
-
 				</Layout>
 				<DevTools />
 			</Layout>
 		);
 	}
-	@action protected handleTabNaviagtionClick(evt: React.MouseEvent<HTMLElement>, id: string): void {
+	@action
+	protected handleTabNaviagtionClick(evt: React.MouseEvent<HTMLElement>, id: string): void {
 		this.activeTab = id;
 	}
 }

src/component/container/property_list.tsx

@@ -0,0 +1,89 @@
+import { EnumProperty } from '../../store/pattern/property/enum_property';
+import { Property } from '../../store/pattern/property/index';
+import { BooleanItem } from '../../lsg/patterns/property-items/boolean-item/index';
+import { StringItem } from '../../lsg/patterns/property-items/string-item/index';
+import { EnumItem } from '../../lsg/patterns/property-items/enum-item/index';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { Store } from '../../store';
+
+export interface PropertyListProps {
+	store: Store;
+}
+
+@observer
+export class PropertyList extends React.Component<PropertyListProps> {
+	public constructor(props: PropertyListProps) {
+		super(props);
+	}
+
+	public render(): JSX.Element {
+		const selectedElement = this.props.store.getSelectedElement();
+
+		if (!selectedElement) {
+			return <div>No Element selected</div>;
+		}
+
+		const pattern = selectedElement.getPattern();
+
+		const properties: Property[] | undefined = pattern && pattern.getProperties();
+
+		if (!properties) {
+			return <div>This element has no properties</div>;
+		}
+
+		return (
+			<div>
+				{properties.map(property => {
+					const id = property.getId();
+					const name = property.getName();
+					const type = property.getType();
+					const value = selectedElement.getPropertyValue(id);
+
+					switch (type) {
+						case 'boolean':
+							return (
+								<BooleanItem
+									key={id}
+									label={name}
+									checked={value as boolean}
+									handleChange={event => {
+										selectedElement.setPropertyValue(id, !value);
+									}}
+								/>
+							);
+						case 'string':
+							return (
+								<StringItem
+									key={id}
+									label={name}
+									value={value as string}
+									handleChange={event => {
+										selectedElement.setPropertyValue(id, event.currentTarget.value);
+									}}
+								/>
+							);
+						case 'enum':
+							const options = (property as EnumProperty)
+								.getOptions()
+								.map(option => option.getName());
+
+							return (
+								<EnumItem
+									key={id}
+									label={name}
+									selectedValue={value as string}
+									values={options}
+									handleChange={event => {
+										selectedElement.setPropertyValue(id, event.currentTarget.value);
+									}}
+								/>
+							);
+						default:
+							return <div>Unknown type: {type}</div>;
+					}
+				})}
+			</div>
+		);
+	}
+}