MetaMorformizr VersionOne -- CoffeeScript, BROKEN on purpose
by JoshGough
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="https://raw.github.com/versionone/VersionOne.Requestor.NET/master/VersionOne.FeatureRequestor/Scripts/backbone-v1.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/backbone-forms.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/editors/list.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/adapters/backbone.bootstrap-modal.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/templates/bootstrap.js"></script>
<html>
<head>
<title>VersionOne MetaMorformizr User Story Editor</title>
</head>
<body>
<h1>VersionOne MetaMorformizr User Story Editor</h1>
An intermediate / advanced example of using the VersionOne HTTP API with
the open source jQuery, Backbone, and Backbone Forms libraries.
<br/>
<br/>This example uses all three core VersionOne APIs: Meta, Localization,
and Data.
<a href="http://community.versionone.com/sdk/documentation/coreapi.aspx"
target="_blank">Learn more here about the APIs</a>.
<br/>
<br/>
<div style='border: 1px solid darkgray;padding:5px;background:linen'>
<h3>Instructions</h3>
<ol>
<li>1: Click <code>Load Story</code>
<br/>
<blockquote><i><span>Result</span>: Story details should load with values for the attributes selected in the <code>Which attributes?</code> list</i>
</blockquote>
</li>
<li>2: Modify the story and click <code>Save Story</code>
<br/>
<blockquote><i><span>Result</span>: Story will be saved back...
CSS
body {
padding: 5px;
font-family: sans-serif;
}
#editor {
padding: 10px;
border: 1px solid darkblue;
background: whitesmoke;
display: none;
margin-bottom: 15px;
}
label { color: darkblue }
textarea { height: 100px }
#message {
font-weight: bold;
color: darkgreen;
}
/* From Backbone Forms github site */
/* Date */
.bbf-date .bbf-date { width: 4em }
.bbf-date .bbf-month { width: 9em }
.bbf-date .bbf-year { width: 5em }
/* DateTime */
.bbf-datetime select { width: 4em }
/* List */
.bbf-list .bbf-add,
.bbf-load { margin-top: -10px }
.bbf-list li { margin-bottom: 5px }
.bbf-list .bbf-del { margin-left: 4px }
/* List.Modal */
.bbf-list-modal {
cursor: pointer;
border: 1px solid #ccc;
width: 208px;
border-radius: 3px;
padding: 4px;
color: #555;
}
/* Custom */
#spinner,
#saveSpinner { display: none }
blockquote {
font-size: 75%;
font-weight: bold;
}
blockquote code {
font-size: 75%;
background: beige;
}
blockquote span { color: darkgreen }
.editorDiv {
margin-top: 10px;
padding: 10px;
border: 2px solid darkgray;
}
CoffeeScript
readQueryString = (key) ->
"Name,Description,Estimate"
loadMeta = (callback) ->
formSchema = {}
attributes = getSelectedAttributesNames()
$.ajax(metaUrl).done (data) ->
titleRequests = []
attributeNames = _.map(attributes, (fieldName) ->
"Story." + fieldName
)
attribs = _.pick(data.Attributes, attributeNames)
_.each attribs, (item, index) ->
field = {}
mixThemInProps = v1AtttributeTypeToBackboneFormsFieldMap[item.AttributeType]
_.extend field, mixThemInProps
isRequired = item.IsRequired
if isRequired
field.validators = [] unless field.validators
field.validators.push "required"
formSchema[item.Name] = field
titleRequest = ->
formField = field
$.ajax(l10nUrl + "?" + item.DisplayName).done (data) ->
formField.title = data
titleRequests.push titleRequest
$.when.apply(null, titleRequests).done ->
callback()
createForm = (model) ->
finish = ->
form = new Backbone.Form(settings)
$("#editorFields").empty()
$("#editorFields").append form.render().el
$("#editor").fadeIn()
settings = schema: formSchema
if model
model.fetch().done ->
settings.model = model
finish()
else
finish()
storyGet = ->
$("#storyGet").attr "disabled", "disabled"
$("#editor").fadeOut()
$("#spinner").fadeIn()
loadMeta ->
model.id = $("#StoryId").val()
return if model.id is ""
createForm model
$("#editor").delay(1e3).fadeIn()
$("#spinner").fadeOut ->
$("#storyGet").removeAttr "disabled"
storySave = ->
return if form.validate() isnt null
form.commit()
$("#save").attr "disabled", true
$("#message").hide()
$("#saveSpinner").fadeIn()
xhr = model.save(form.getValue()).done((data) ->
$("#saveSpinner").fadeOut ->
$("#save").attr "disabled", false
$("#message").text("Save successful!").fadeIn().delay(1500).fadeOut 1500
)
getSelectedAttributesNames = ->
...