Enyo Tutorial - To Do Application

app.css

.todo-list {
    width:50%;
    background:#fff;
}

.todo-list .task-row {
    height:40px;
    background:#ccf;
    border-bottom:1px solid #eef;
}

.todo-list .task-row > * {
    display:inline-block;
    margin:3px;
}

.todo-details {
    width:50%;
    background:#fff;
}

.todo-details .delete-button {
    float:right;
    background-color: #C51616;
    color: #F2F2F2;
}

.todo-details .save-button {
    background-color: #91BA07;
    color: #F2F2F2;
}

.todo-details .onyx-groupbox {
    margin:6px;
}

app.js

enyo.kind({
    name:"ToDo.App",
    classes:"enyo-unselectable",
    components:[
        {kind:"Panels", arrangerKind:"CollapsingArranger", narrowFit:false, realtimeFit:true, classes:"enyo-fit", components:[
            {name:"list", kind:"ToDo.List", onAddItem:"addItem", onViewItem:"viewItem", onChangeItemStatus:"itemStatusChanged"},
            {name:"detail", kind:"ToDo.Detail", onSaveItem:"itemSaved", onDeleteItem:"itemDeleted"}
        ]},
        {name:"data", kind:"ToDo.Model"}
    ],
    create:function() {
        this.inherited(arguments);
        var items = this.$.data.getItems();
        this.$.list.setItems(items);
    },
    addItem:function(source, event) {
        var i = this.$.data.addItem("New Task");
        this.$.detail.setItem(i);
        this.$.list.refresh();
    },
    viewItem:function(source, event) {
        this.$.detail.setItem(event.item);
    },
    itemSaved:function(source, event) {
        this.$.list.refresh();
    },
    itemDeleted:function(source, event) {
        this.$.data.removeItem(event.item);
        this.$.list.refresh();
    },
    itemStatusChanged:function(source, event) {
        if(event.item === this.$.detail.getItem()) {
            this.$.detail.updateItemStatus(event.item.status);
        }
    }
});

enyo.kind({
    name:"ToDo.List",
    kind:"FittableRows",
    classes:"todo-list",
    published:{
        items:""
    },
    events:{
        onViewItem:"",
        onAddItem:"",
        onChangeItemStatus:""
    },
    components:[
        {name:"list", kind:"List", onSetupItem:"setupItem", fit:true, components:[
            {classes:"task-row", components:[
                {name:"cb", kind:"onyx.Checkbox", onchange:"cbTapped"},
                {name:"taskName", ontap:"taskTapped"}
            ]}
        ]},
        {kind:"onyx.Toolbar", components:[
            {kind:"onyx.Button", content:"Add Task", ontap:"doAddItem"}
        ]}
    ],
    create:function() {
        this.inherited(arguments);
        this.itemsChanged();
    },
    itemsChanged:function() {
         if(this.items) {
             this.$.list.setCount(this.items.length)
         } else {
             this.$.list.setCount(0);
         }
    },
    setupItem:function(source, event) {
        this.$.cb.setChecked(this.items[event.index].status === 2);
        this.$.taskName.setContent(this.items[event.index].name);
    },
    taskTapped:function(source, event) {
        this.doViewItem({item:this.items[event.index], index:event.index});
    },
    cbTapped:function(source, event) {
        this.items[event.index].status = (this.items[event.index].status < 2) ? 2 : 0;
        this.$.list.renderRow(event.index);
        
        this.doChangeItemStatus({item:this.items[event.index], index:event.index});
    },
    refresh:function(index) {
        this.itemsChanged();
        this.$.list.refresh();
    }
});

enyo.kind({
    name:"ToDo.Detail",
    kind:"FittableRows",
    classes:"todo-details",
    published:{
        item:""
    },
    events:{
        onSaveItem:"",
        onDeleteItem:""
    },
    components:[
        {kind:"Scroller", fit:true, components:[
            {name:"details", kind:"onyx.Groupbox", components:[
                {kind:"onyx.GroupboxHeader", content:"Item Details"},
                {kind:"onyx.InputDecorator", components:[
                    {name:"name", kind:"onyx.Input", placeholder:"Task Name", style:"width:100%", selectOnFocus:true}
                ]},
                {kind:"onyx.InputDecorator", components:[
                    {name:"description", kind:"onyx.TextArea", placeholder:"Description", style:"width:100%;height:6em;"}
                ]},
                {kind:"onyx.InputDecorator", layoutKind:"FittableColumnsLayout", components:[
                    {content:"Due", fit:true},
                    {name:"due", kind:"onyx.DatePicker"}
                ]},
                {kind:"onyx.InputDecorator", layoutKind:"FittableColumnsLayout", components:[
                    {content:"Status", fit:true},
                    {kind:"onyx.PickerDecorator", style:"width:120px", components:[
                        {style:"width:100%"},
                        {name:"status", kind:"onyx.Picker",  components:[
                            {content:"Not Started", value:0},
                            {content:"In Progress", value:1},
                            {content:"Complete", value:2}
                        ]}
                    ]}
                ]}
            ]}
        ]},
        {kind:"onyx.Toolbar", components:[
            {kind:"onyx.Grabber"},
            {name:"save", kind:"onyx.Button", content:"Save", classes:"save-button", ontap:"saveTapped"},
            {name:"remove", kind:"onyx.Button", content:"Delete", classes:"delete-button", ontap:"removeTapped"}
        ]}
    ],
    create:function() {
        this.inherited(arguments);
        this.itemChanged();
    },
    itemChanged:function() {
        if(!this.item) {
            this.$.save.hide();
            this.$.remove.hide();
            this.$.details.hide();
        } else {
            this.$.save.show();
            this.$.remove.show();
            this.$.details.show();
            
            this.resized(); // fix fittables
            
            this.$.name.setValue(this.item.name || "");
            this.$.description.setValue(this.item.description || "");
            this.$.due.setValue(this.item.due || new Date());
            this.$.status.setSelected(this.$.status.getClientControls()[this.item.status]);
            
            this.$.name.focus();
        }
    },
    saveTapped:function() {
	var i = this.item;
        i.name = this.$.name.getValue();
        i.description = this.$.description.getValue();
        i.due = this.$.due.getValue();
        i.status = this.$.status.getSelected().value;

        this.setItem();
        this.doSaveItem({item:i});
    },
    removeTapped:function() {
        var i = this.item;

        this.setItem();
        this.doDeleteItem({item:i});
    },
    updateItemStatus:function(status) {
        this.$.status.setSelected(this.$.status.getClientControls()[status]);
    }
});

enyo.kind({
    name:"ToDo.Model",
    kind:"Component",
    published:{
        items:""
    },
    create:function() {
        this.inherited(arguments);
        this.items = [];
    },
    addItem:function(name, description, dueDate) {
        var i = {
            name:name,
            description:description,
            due:dueDate,
            status:0
        };
        
        this.items.push(i);
        
        return i;
    },
    removeItem:function(itemOrIndex) {
        var item = itemOrIndex;
        if(itemOrIndex instanceof Object) {
            enyo.remove(itemOrIndex, this.items);
        } else {
            item = this.items.splice(index, 1);
        }
        
        return item;
    }
});    

new ToDo.App().renderInto(document.body);