Implemented detail view for items and containers

This commit is contained in:
Thaum
2015-02-02 10:48:56 +00:00
parent 5d9d72df00
commit 786e7cd769
14 changed files with 217 additions and 168 deletions

View File

@@ -1,31 +1,34 @@
<template name="containerDialog">
{{#with container}}
<!--Delete button-->
<paper-menu-button>
<paper-icon-button role="button" tabindex="0" icon="delete" aria-label="Delete Container" noink></paper-icon-button>
<paper-dropdown class="dropdown">
<paper-button id="deleteContainer">Delete Container</paper-button>
<paper-button>Cancel</paper-button>
</paper-dropdown>
</paper-menu-button>
<div class="containerDialogWidth"></div>
<!--Name and plural name-->
<paper-input id="containerNameInput" label="Name" floatinglabel value={{name}}></paper-input>
<!--Weight-->
<paper-input-decorator label="Weight" floatinglabel>
<input id="weightInput" type="number" value={{weight}}>
</paper-input-decorator>
<!--Value-->
<paper-input-decorator label="Value" floatinglabel>
<input id="valueInput" type="number" value={{value}}>
</paper-input-decorator>
<!--Description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="containerDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<core-header-panel fit>
<core-toolbar hero-id="toolbar" hero>
<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
<div flex>{{name}}</div>
<paper-icon-button id="deleteContainer"
role="button"
tabindex="0"
icon="delete"
aria-label="Delete Feature"
noink></paper-icon-button>
</core-toolbar>
<div class="detailContent">
<!--Name and plural name-->
<paper-input id="containerNameInput" label="Name" floatinglabel value={{name}}></paper-input>
<!--Weight-->
<paper-input-decorator label="Weight" floatinglabel>
<input id="weightInput" type="number" value={{weight}}>
</paper-input-decorator>
<!--Value-->
<paper-input-decorator label="Value" floatinglabel>
<input id="valueInput" type="number" value={{value}}>
</paper-input-decorator>
<!--Description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="containerDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
</div>
</core-header-panel>
{{/with}}
<paper-button affirmative>Done</paper-button>
</template>

View File

@@ -1,17 +1,29 @@
Template.containerDialog.rendered = function(){
var self = this;
this.autorun(function(){
var container = Containers.findOne(Template.currentData().containerId, {fields: {name: 1}});
if(container) Session.set("global.ui.dialogHeader", container.name);
//update all autogrows after they've been filled
var pata = this.$("paper-autogrow-textarea");
pata.each(function(index, el){
el.update($(el).children().get(0));
})
//update all input fields as well
var input = this.$("paper-input");
input.each(function(index, el){
el.valueChanged();
})
//after the dialog is built, open it
_.defer(function(){GlobalUI.dialog.open()});
if (!this.alreadyRendered){
Session.set("global.ui.detailShow", true);
this.alreadyRendered = true;
}
}
Template.containerDialog.events({
"tap #backButton": function(){
GlobalUI.closeDetail();
},
"tap #deleteContainer": function(){
Containers.remove(this._id);
GlobalUI.closeDialog()
GlobalUI.closeDetail();
},
//TODO clean up String -> num here so they don't need casting by Schema.clean
//TODO validate input (integer, non-negative, etc) for these inputs and give validation errors