Brick Manager

.gitignore

@@ -0,0 +1,5 @@
+npm-debug.log
+node_modules
+.idea/
+.env
+*.iml

README.md

@@ -0,0 +1,65 @@
+# Lightning Design System and React Reference Application 
+
+This repository is the home of **Lightning Realty**, a reference application built with [React](http://facebook.github.io/react/) and the [Lightning Design System](http://www.lightningdesignsystem.com). 
+
+Check out this video for a quick walkthrough:
+
+[![Video](http://img.youtube.com/vi/UZtvQazYX8A/0.jpg)](http://www.youtube.com/watch?v=UZtvQazYX8A)
+
+The back-end is built with **Node.js** using a **Postgres** database. 
+
+## Automatic Deployment to Heroku
+
+1. Make sure you are logged in to the [Heroku Dashboard](https://dashboard.heroku.com)
+
+2. Click the Button below to deploy the application on Heroku.
+
+[![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy)
+
+Your own instance of the application is automatically deployed, and your own Postgres database is populated with sample data.
+
+## Local Installation
+
+Follow the instructions below if you prefer to install the application on your local machine:
+
+1. Install [Postgres](http://www.postgresql.org/) locally and create a database called **realty**.
+
+1. Clone this repository or download and unzip [this](https://github.com/ccoenraets/lightning-react-app/archive/master.zip) zip file.
+
+1. Navigate to the **lightning-react-app** directory and install the project dependencies:
+
+    ```
+    npm install
+    ```
+
+1. Open **server/config.js** and make sure the **databaseURL** matches your configuration (use your user name)
+
+1. Type the following command to build the client application:
+
+    ```
+    npm run webpack
+    ```
+    
+    The project is written using ECMAScript 6 including ECMAScript 6 modules.
+
+1. Type the following command to start the server:
+    
+    ```
+    npm start
+    ```
+    
+    The database is automatically populated
+    
+1. Open a browser and access [http://localhost:5000](http://localhost:5000)    
+
+## Work in Progress
+
+This project is work in progress. For example, here are some items that still need work:
+
+- Make components more robust and general purpose
+- Create more components
+- Fix React keys throughout the project
+- Improved navigation system
+- etc.
+
+

app.json

@@ -0,0 +1,6 @@
+{
+  "name": "brick-manager",
+  "description": "SteelBrick Package Manager",
+  "repository": "https://git.soma.salesforce.com/Steelbrick/brick-manager"
+  "addons": ["heroku-postgresql:hobby-dev"]
+}

client/js/activities/ActivityCard.js

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import * as activityService from '../services/ActivityService';
+
+import DataGrid from "../components/DataGrid";
+import {Icon, ButtonIcon} from "../components/Icons";
+
+export default React.createClass({
+
+    contactLinkHandler(activity) {
+        window.location.hash = "#contact/" + activity.contact_id;
+    },
+
+    propertyLinkHandler(activity) {
+        window.location.hash = "#property/" + activity.property_id;
+    },
+
+    actionHandler(data, value, label) {
+        if (label === "Delete") {
+            this.props.onDelete(data);
+        }
+    },
+
+    render() {
+
+        return (
+            <div className="slds-card">
+                <header className="slds-card__header slds-grid">
+                    <div className="slds-media slds-media--center slds-has-flexi-truncate">
+                        <div className="slds-media__figure">
+                            <Icon name="feed" size="small"/>
+                        </div>
+                        <div className="slds-media__body">
+                            <h3 className="slds-text-heading--small slds-truncate">Activities</h3>
+                        </div>
+                    </div>
+                    <div className="slds-no-flex">
+                        <div className="slds-button-group">
+                            <button className="slds-button slds-button--neutral slds-button--small" onClick={this.props.onNew}>New</button>
+                            <button className="slds-button slds-button--icon-border-filled">
+                                <ButtonIcon name="down"/>
+                                <span className="slds-assistive-text">Show More</span>
+                            </button>
+                        </div>
+                    </div>
+                </header>
+
+                <section className="slds-card__body">
+                    <DataGrid data={this.props.activities} onAction={this.actionHandler}>
+                        <div header="Type" field="activity_name" sortable={true}/>
+                        <div header="Date" field="activity_date" sortable={true} format="date"/>
+                        {this.props.showContact ? <div header="Contact" field="contact" onLink={this.contactLinkHandler}/> : ''}
+                        {this.props.showProperty ? <div header="Property" field="address" onLink={this.propertyLinkHandler}/> : ''}
+                        <div header="Price" field="price" sortable={true} format="currency"/>
+                    </DataGrid>
+                </section>
+
+                <footer className="slds-card__footer"><a href="#">View All</a></footer>
+            </div>
+        );
+    }
+
+});

client/js/activities/ActivityTimeline.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import moment from 'moment';
+
+import * as activityService from '../services/ActivityService';
+
+import {Icon, ButtonIcon} from "../components/Icons";
+
+let getActivityTheme =  (activityName) => {
+    if (activityName === "Listed") {
+        return "event"
+    } else if (activityName === "Open House") {
+        return "event";
+    } else if (activityName === "Inquiry") {
+        return "email";
+    } else if (activityName === "Offer") {
+        return "email";
+    } else if (activityName === "Price Reduction") {
+        return "task";
+    }
+};
+
+let ActivityListItem = React.createClass({
+
+    render() {
+        return (
+            <li className="slds-timeline__item">
+                <span className="slds-assistive-text">Email</span>
+                <div className="slds-media slds-media--reverse">
+                    <div className="slds-media__body">
+                        <div className={"slds-media slds-media--timeline slds-timeline__media--" + this.props.theme}>
+                            <div className="slds-media__figure">
+                                <Icon name={this.props.theme}/>
+                            </div>
+                            <div className="slds-media__body">
+                                <div className="slds-tile">
+                                    <p className="tile__title slds-truncate">{this.props.activity.activity_name}</p>
+                                    {this.props.showContact && this.props.activity.contact_id ?
+                                    <ul className="slds-list--horizontal slds-text-body--medium">
+                                        <li className="slds-list__item">
+                                            <dl className="slds-dl--inline">
+                                                <dt className="slds-dl--inline__label">From:</dt>
+                                                <dd className="slds-dl--inline__detail"><a href={'#contact/' + this.props.activity.contact_id}>{this.props.activity.contact}</a></dd>
+                                            </dl>
+                                        </li>
+                                    </ul> : ""}
+                                    {this.props.showProperty ?
+                                    <ul className="slds-list--horizontal slds-text-body--medium">
+                                        <li className="slds-list__item">
+                                            <dl className="slds-dl--inline">
+                                                <dt className="slds-dl--inline__label">Property:</dt>
+                                                <dd className="slds-dl--inline__detail"><a href={'#property/' + this.props.activity.property_id}>{this.props.activity.address}</a></dd>
+                                            </dl>
+                                        </li>
+                                    </ul> : ""}
+                                    <p className="slds-truncate slds-text-body--small">{this.props.activity.comment}</p>
+                                    <div className="tile__detail">
+                                        <ul className="slds-list--horizontal slds-text-body--small">
+                                            <li className="slds-list__item slds-m-right--large">
+                                                <dl className="slds-dl--inline">
+                                                    <dt className="slds-dl--inline__label">Date:</dt>
+                                                    <dd className="slds-dl--inline__detail">{moment(this.props.activity.activity_date).format("MMMM Do YYYY")}</dd>
+                                                </dl>
+                                            </li>
+                                            <li className="slds-list__item slds-m-right--large">
+                                                <dl className="slds-dl--inline">
+                                                    <dt className="slds-dl--inline__label">Price:</dt>
+                                                    <dd className="slds-dl--inline__detail">{parseFloat(this.props.activity.price).toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</dd>
+                                                </dl>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </li>
+        );
+    }
+
+});
+
+export default React.createClass({
+
+    render() {
+        let items = this.props.activities.map(activity => {
+            let theme = getActivityTheme(activity.activity_name)
+            return (
+                <ActivityListItem key={activity.activity_id} activity={activity} theme={theme} showContact={this.props.showContact} showProperty={this.props.showProperty}/>
+            );
+        });
+        return (
+            <ul className="slds-timeline">
+                {items}
+            </ul>
+        );
+    }
+
+});

client/js/activities/ActivityTypePickList.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import * as activityTypeService from '../services/ActivityTypeService';
+
+import PickList from "../components/PickList";
+
+export default React.createClass({
+
+    getInitialState() {
+        return {activityTypes: []};
+    },
+
+    componentDidMount() {
+        activityTypeService.findAll().then(activityTypes => this.setState({activityTypes: activityTypes}));
+    },
+
+    render() {
+        return (
+            <PickList valueField="activity_type_id" labelField="name" label="Select an activity..." items={this.state.activityTypes} onChange={this.props.onChange}/>
+        );
+    }
+
+});

client/js/activities/NewActivityWindow.js

@@ -0,0 +1,124 @@
+import React from 'react';
+
+import ActivityTypePickList from './ActivityTypePickList';
+import PropertyQuickFind from './../properties/PropertyQuickFind';
+import ContactQuickFind from './../contacts/ContactQuickFind';
+import {Icon} from "../components/Icons";
+
+import SLDSDateInput from '../slds/SLDSDateInput';
+
+export default React.createClass({
+
+    getInitialState() {
+        return {property_id: this.props.propertyId, contact_id: this.props.contactId, price: this.props.price, activity_type_id: undefined, activity_date: new Date(), comment: ""};
+    },
+
+    propertyChange(data, label) {
+        this.setState({property_id: data});
+    },
+
+    contactChange(data, label) {
+        this.setState({contact_id: data});
+    },
+
+    activityTypeChange(value, label) {
+        this.setState({activity_type_id: value});
+    },
+
+    activityDateChange(event) {
+        this.setState({activity_date: event.target.value});
+    },
+
+    priceChange(event) {
+        this.setState({price: event.target.value});
+    },
+
+    commentChange(event) {
+        this.setState({comment: event.target.value});
+    },
+
+    onSave() {
+        this.props.onSave(this.state);
+    },
+
+    render() {
+        return (
+            <div>
+                <div aria-hidden="false" role="dialog" className="slds-modal slds-fade-in-open">
+                    <div className="slds-modal__container">
+                        <div className="slds-modal__header">
+                            <h2 className="slds-text-heading--medium">New Activity</h2>
+                            <button className="slds-button slds-modal__close">
+                                <svg aria-hidden="true" className="slds-button__icon slds-button__icon--inverse slds-button__icon--large">
+                                </svg>
+                                <span className="slds-assistive-text">Close</span>
+                            </button>
+                        </div>
+                        <div className="slds-modal__content">
+
+                            <div className="slds-form--stacked">
+
+                                {this.props.propertyId ? "" :
+                                    <div className="slds-form-element">
+                                        <label className="slds-form-element__label" htmlFor="sample1">Property</label>
+                                        <div className="slds-form-element__control">
+                                            <PropertyQuickFind onChange={this.propertyChange}/>
+                                        </div>
+                                    </div>
+                                }
+
+                                {this.props.contactId ? "" :
+                                    <div className="slds-form-element">
+                                        <label className="slds-form-element__label" htmlFor="sample1">Contact</label>
+
+                                        <div className="slds-form-element__control">
+                                            <ContactQuickFind onChange={this.contactChange}/>
+                                        </div>
+                                    </div>
+                                }
+
+                                <div className="slds-form-element">
+                                    <label className="slds-form-element__label" htmlFor="sample1">Type</label>
+                                    <div className="slds-form-element__control">
+                                        <ActivityTypePickList onChange={this.activityTypeChange}/>
+                                    </div>
+                                </div>
+
+                                <div className="slds-form-element">
+                                    <label className="slds-form-element__label" htmlFor="sample1">Date</label>
+                                    <div className="slds-form-element__control">
+                                        <SLDSDateInput/>
+                                    </div>
+                                </div>
+
+                                <div className="slds-form-element">
+                                    <label className="slds-form-element__label" htmlFor="sample1">Price</label>
+                                    <div className="slds-form-element__control">
+                                        <input className="slds-input" type="text" value={this.state.price} onChange={this.priceChange}/>
+                                    </div>
+                                </div>
+
+                                <div className="slds-form-element">
+                                    <label className="slds-form-element__label" htmlFor="sample2">Comment</label>
+                                    <div className="slds-form-element__control">
+                                        <textarea id="description" className="slds-textarea" value={this.state.comment} onChange={this.commentChange}></textarea>
+                                    </div>
+                                </div>
+
+                            </div>
+
+                        </div>
+                        <div className="slds-modal__footer">
+                            <button className="slds-button slds-button--neutral" onClick={this.props.onCancel}>Cancel</button>
+                            <button className="slds-button slds-button--neutral slds-button--brand" onClick={this.onSave}>Save</button>
+                        </div>
+                    </div>
+                </div>
+                <div className="slds-modal-backdrop slds-modal-backdrop--open"></div>
+                <br/>
+                <br/>
+            </div>
+        );
+    }
+
+});