JSFiddle - React, Tailwind, and code Playground

by boneskull

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="MyModule" ng-controller="ProjectCtrl">
<edit-project-dialog 
    id="modal-psb-status-change" ng-model="project.status_comment">
    <div class="project-statuses">
        <div rel="tooltip" class="status-icon" data-original-title="{{status.name}}"
            ng-repeat="status in STATUSES"
            ng-click="change(status.value)"
            ng-class="{selected:status.selected}">
            <i class="{{status.value}}">{{status.value}}</i>
        </div>
    </div>
    <div class="project-comments">
        <h3>Add status comment</h3>
            <textarea></textarea>
            <br />
            <button data-dismiss="modal" class="btn btn-primary" ng-click="save()" >Save</button>
            <button data-dismiss="modal" class="btn btn-secondary">Cancel</button>
        <pre>{{project.status_comment}}</pre>        
    </div>
</edit-project-dialog>
</div>

JavaScript

'use strict';

/* Controllers */

var myModule = angular.module('MyModule', []);

function ProjectCtrl($scope) {
    $scope.ONDECK = ['onDeck'];
    $scope.COMPLETED = ['completed', 'cancelled'];
    $scope.ACTIVE = ['onTrack', 'offTrack', 'needsAttention'];
    $scope.STATUSES = [
        {name: "On Track", value: "onTrack"},
        {name: "Needs Attention", value: "needsAttention"},
        {name: "Off Track", value: "offTrack"},
        {name: "Completed", value: "completed"},
        {name: "Cancelled", value: "cancelled"}
    ];

    $scope.data = {
        projects: [
            {
                status: 'onTrack',
                name: 'Project Status Board',
                description: "PSB will redefine multi-project collaboration and tracking",
                msg: 'working on filtering and data referencing',
                iterations: [
                    {
                        due: '7/1/2012',
                        msg: 'design'
                    },
                    {
                        due: '7/4/2012',
                        msg: 'generate markup'
                    },
                    {
                        due: '7/11/2012',
                        msg: 'edit'
                    }
                ],
                currentIteration: 1, // zero based
                team: {
                    owner: 'seth',
                    everyone: 'nathan, ken, mike, seth'
                },
                fogbugz: {
                    parent: 12197,
                    children: [1, 2, 3, 4, 5]
                },
                updated: {
                    who: 'seth',
                    when: '15d'
                }
            },
            {
                status: 'onTrack',
                name: 'Dashboard v2',
                description: "Merge ComScore features into general Dashboard",
                msg: 'Needs input from stakeholder!',
                iterations: [
                    {
                       ...