src/legacy/StoryBoardApp.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Copyright (c) 2010  Rally Software Development Corp.  All rights reserved -->
<html>
<head>
<title>Story Board</title>
<meta name="Name" content="App: Story Board"/>
<meta name="Version" content="2012.01.14"/>
<meta name="Vendor" content="Rally Software"/>
<script type="text/javascript" src="/apps/1.33/sdk.js?apiVersion=1.32"></script>

<script type="text/javascript">
StoryBoard = function () {

    function createLayout(element) {
        var optionsDiv = document.createElement("div");
        dojo.addClass(optionsDiv, "optionsContainer");
        element.appendChild(optionsDiv);

        var controlDiv = document.createElement("div");
        dojo.addClass(controlDiv, "controlContainer");
        optionsDiv.appendChild(controlDiv);

        var dropdownContainerDiv = document.createElement("div");
        dojo.addClass(dropdownContainerDiv, "dropdownContainer");
        controlDiv.appendChild(dropdownContainerDiv);

        var checkBoxContainerDiv = document.createElement("div");
        dojo.addClass(checkBoxContainerDiv, "typeFilterContainer");
        controlDiv.appendChild(checkBoxContainerDiv);

        clearDiv = document.createElement("div");
        dojo.addClass(clearDiv, "clearFloats");
        optionsDiv.appendChild(clearDiv);

        var dropdownDiv = document.createElement("div");
        dropdownDiv.id = "dropdown";
        dropdownContainerDiv.appendChild(dropdownDiv);

        var showSpan = document.createElement("span");
        showSpan.appendChild(document.createTextNode("Show:"));
        checkBoxContainerDiv.appendChild(showSpan);

        var userStoriesSpan = document.createElement("span");
        userStoriesSpan.id = "userStories";
        checkBoxContainerDiv.appendChild(userStoriesSpan);

        var defectsSpan = document.createElement("span");
        defectsSpan.id = "defects";
        checkBoxContainerDiv.appendChild(defectsSpan);

        var defectSuitesSpan = document.createElement("span");
        defectSuitesSpan.id = "defectSuites";
        checkBoxContainerDiv.appendChild(defectSuitesSpan);

        var addNewDiv = document.createElement("div");
        addNewDiv.id = "addNew";
        optionsDiv.appendChild(addNewDiv);

        var addNewUserStorySpan = document.createElement("span");
        addNewUserStorySpan.id = "addNewUserStory";
        addNewDiv.appendChild(addNewUserStorySpan);

        var storyBoardDiv = document.createElement("div");
        storyBoardDiv.id = "storyBoard";
        dojo.addClass(storyBoardDiv, "storyBoard");
        element.appendChild(storyBoardDiv);
    }

    this.display = function (element) {
        var that = this;

        rally.sdk.ui.AppHeader.setHelpTopic("251");
        rally.sdk.ui.AppHeader.showPageTools(true);

        //Build app layout
        createLayout(element);

        var rallyDataSource = new rally.sdk.data.RallyDataSource('__WORKSPACE_OID__',
                '__PROJECT_OID__',
                '__PROJECT_SCOPING_UP__',
                '__PROJECT_SCOPING_DOWN__');

        rallyDataSource.find({
            key: 'enabledTypeDefs',
            type: 'TypeDefinition',
            fetch: 'Name,ElementName',
            query: this._buildTypeDefQuery()
        }, function (typeDefs) {
            that._draw(typeDefs, rallyDataSource);
        });
    };

    this._draw = function (typeDefs, rallyDataSource) {
        var cardboard,
                enabledTypeDefs = this._getEnabledTypeDefs(typeDefs),
                checkBoxes = this._drawCheckboxes(enabledTypeDefs);

        function refreshBoard() {
            var cardboardConfig = {
                types: [],
                attribute: "ScheduleState",
                sortAscending: true,
                order: "Rank"
            };

            //Build types based on checkbox selections
            dojo.forEach(checkBoxes, function (checkBox) {
                if (checkBox.getChecked()) {
                    cardboardConfig.types.push(checkBox.getValue());
                }
            });

            cardboardConfig.query = dropdown.getQueryFromSelected();

            if (!cardboard) {
                if (cardboardConfig.types.length === 0) {
                    var activeCheckBox = checkBoxes[0];
                    if (activeCheckBox) {
                        activeCheckBox.setChecked(true);
                        cardboardConfig.types.push(activeCheckBox.getValue());
                    }
                }
                cardboard = new rally.sdk.ui.CardBoard(cardboardConfig, rallyDataSource);
                cardboard.display("storyBoard");
            } else {
                cardboard.refresh(cardboardConfig);
            }
        }

        var dropdownConfig = {
            label: 'Iteration:',
            showLabel: true
        };
        var dropdown = new rally.sdk.ui.IterationDropdown(dropdownConfig, rallyDataSource);
        dropdown.addEventListener("onChange", refreshBoard);
        dropdown.addEventListener("onLoad", refreshBoard);
        dropdown.display("dropdown");

        function onAddNewPreCreate(addNewUserStory, eventArgs) {
            var selectedOid = dropdown.getSelectedItem().ObjectID;
            if (selectedOid) {
                if (eventArgs.withDetails === true) {
                    eventArgs.item.iteration = selectedOid;
                } else {
                    eventArgs.item.Iteration = ('/iteration/' + selectedOid);
                }
            }
        }

        var addWithDetails = function () {
            var type = dojo.query('#addNewUserStoryAddNewDropdownInnerDiv')[0].value.toLowerCase().replace(' ', '');
            var name = dojo.query('#addNewUserStoryAddNewNameInnerDiv')[0].value;
            var iterationRef = '/iteration/' + dropdown.getSelectedItem().ObjectID;
            window.parent.Rally.nav.Manager.create(type, {defaultName: name, Iteration: iterationRef});
            return false;
        };

        var rewireAddWithDetails = function () {
            var oldButton = dojo.query('.button')[2];
            var newButton = oldButton.cloneNode(true);
            oldButton.parentNode.replaceChild(newButton, oldButton);
            newButton.addEventListener('click', addWithDetails);
        };

        var addNewUserStory = this._drawAddNew(enabledTypeDefs, rallyDataSource);
        addNewUserStory.addEventListener('onAdd', refreshBoard);
        addNewUserStory.addEventListener("onPreCreate", onAddNewPreCreate);
        addNewUserStory.addEventListener("onExpand", rewireAddWithDetails);

        //Wire up events
        dojo.forEach(checkBoxes, function (checkBox) {
            checkBox.addEventListener('onChange', refreshBoard);
        });
    };

    this._drawCheckboxes = function (enabledTypes) {
        var checkBoxes = [];

        if (enabledTypes.hasOwnProperty('HierarchicalRequirement')) {
            var userStoriesCheckBox = new rally.sdk.ui.basic.CheckBox({
                showLabel: true,
                label: "User Stories",
                labelPosition: "after",
                value: "HierarchicalRequirement",
                checked: true
            });
            checkBoxes.push(userStoriesCheckBox);
            userStoriesCheckBox.display("userStories");
        }

        if (enabledTypes.hasOwnProperty('Defect')) {
            var defectsCheckBox = new rally.sdk.ui.basic.CheckBox({
                showLabel: true,
                label: "Defects",
                labelPosition: "after",
                value: "Defect"
            });
            checkBoxes.push(defectsCheckBox);
            defectsCheckBox.display("defects");
        }

        if (enabledTypes.hasOwnProperty('DefectSuite')) {
            var defectSuitesCheckBox = new rally.sdk.ui.basic.CheckBox({
                showLabel: true,
                label: "Defect Suites",
                labelPosition: "after",
                value: "DefectSuite"
            });
            checkBoxes.push(defectSuitesCheckBox);
            defectSuitesCheckBox.display("defectSuites");
        }

        return checkBoxes;
    };

    this._drawAddNew = function (enabledTypeDefs, rallyDataSource) {
        var artifactTypes = dojo.filter(['HierarchicalRequirement', 'Defect', 'DefectSuite'], function (artifactType) {
            if (enabledTypeDefs.hasOwnProperty(artifactType)) {
                return true;
            } else {
                return false;
            }
        });

        var addNewUserStory = new rally.sdk.ui.AddNewArtifact({types: artifactTypes}, rallyDataSource);
        addNewUserStory.display('addNewUserStory');
        return addNewUserStory;
    };

    this._buildTypeDefQuery = function () {
        var query = '';
        dojo.forEach(['Hierarchical Requirement', 'Defect', 'Defect Suite'], function (typeDef) {
            var filter = '(Name = "' + typeDef + '")';
            if (query.length > 0) {
                query = '(' + query + ' OR ' + filter + ')';
            } else {
                query = filter;
            }
        });
        return query;
    };

    this._getEnabledTypeDefs = function (typeDefs) {
        var enabledTypes = {};
        dojo.forEach(typeDefs.enabledTypeDefs, function (typeDef) {
            enabledTypes[typeDef.ElementName] = typeDef;
        });
        return enabledTypes;
    };
};

</script>

<style type="text/css">
    .appHeaderContainer {
        margin-top: 0;
        margin-bottom: 0;
    }

    .appHeader {
        position: relative;
    }

    .controlContainer {
        margin-top: 10px;
        margin-right: 20px;
        float: right;
    }

    .typeFilterContainer {
        float: left;
        margin-left: 3px;
    }

    .dropdownContainer {
        float: left;
        margin-left: 3px;
        margin-right: 10px;
    }

    #addNew {
        clear: both;
        padding-top: 10px;
    }

    .storyBoard {
        clear: both;
    }

</style>

<script type="text/javascript">

    function onLoad() {
        var storyBoard = new StoryBoard();
        storyBoard.display(dojo.body());
    }

    rally.addOnLoad(onLoad);

</script>
</head>
<body>
</body>
</html>