Create separate component for record list
This commit is contained in:
Martin Kleinschrodt
parent
84699de7ce
commit
07552ceadb
|
|
@ -9,6 +9,7 @@
|
|||
<script src="bower_components/polymer/polymer.min.js"></script>
|
||||
<link rel="import" href="src/components/app.html">
|
||||
<link rel="import" href="src/components/record-item.html">
|
||||
<link rel="import" href="src/components/list-view.html">
|
||||
<link rel="import" href="src/components/record-view.html">
|
||||
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -27,49 +27,7 @@
|
|||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.list-view safe-record-item:nth-child(3) {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
background: rgb(245, 245, 245);
|
||||
display: -webkit-box;
|
||||
-webkit-box-align: center;
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.list-header > input {
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
-webkit-appearance: none;
|
||||
padding: 6px;
|
||||
display: block;
|
||||
-webkit-box-flex: 1;
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.list-header > button {
|
||||
display: block;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 30px;
|
||||
font-family: inherit;
|
||||
font-weight: 100;
|
||||
line-height: 15px;
|
||||
color: #000;
|
||||
margin-left: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::-webkit-search-cancel-button {
|
||||
|
|
@ -80,48 +38,35 @@
|
|||
outline: none;
|
||||
}
|
||||
</style>
|
||||
<div class="view list-view" id="list" on-scroll="{{ scroll }}" on-touchmove="{{ drag }}">
|
||||
<div id="listHeader" class="list-header">
|
||||
<input value="{{ filterString }}" type="search" placeholder="type to filter..." />
|
||||
<button on-click="{{ addRecord }}">+</button>
|
||||
</div>
|
||||
<template repeat="{{ record, i in filteredRecords}}">
|
||||
<safe-record-item record="{{ record }}" on-click="{{ recordClicked }}" on-delete="{{ deleteClicked }}" index="{{ i }}"></safe-record-item>
|
||||
</template>
|
||||
</div>
|
||||
<safe-record-view id="recordView" on-back="{{ back }}" style="display: none;"></safe-record-view>
|
||||
<safe-list-view id="listView" class="view" collection="{{ collection }}" on-select-record="{{ selectRecord }}" on-delete-record="{{ deleteRecord }}" on-add-record="{{ addRecord }}"></safe-list-view>
|
||||
<safe-record-view id="recordView" class="view" on-back="{{ back }}" style="display: none;"></safe-record-view>
|
||||
</template>
|
||||
<script>
|
||||
Polymer("safe-app", {
|
||||
observe: {
|
||||
filterString: "applyFilter",
|
||||
"collection.records": "applyFilter"
|
||||
},
|
||||
ready: function() {
|
||||
var self = this;
|
||||
require(["safe/model"], function(model) {
|
||||
self.collection = new model.Collection();
|
||||
self.collection.fetch();
|
||||
var coll = new model.Collection();
|
||||
coll.fetch();
|
||||
self.collection = coll;
|
||||
});
|
||||
},
|
||||
recordClicked: function(event, detail, sender) {
|
||||
this.openRecord(sender.templateInstance.model.record);
|
||||
selectRecord: function(event, detail, sender) {
|
||||
this.openRecord(detail.record);
|
||||
},
|
||||
deleteClicked: function(event, detail, sender) {
|
||||
this.deleteRecord(sender.templateInstance.model.record);
|
||||
deleteRecord: function(event, detail, sender) {
|
||||
console.log("** delete ***", arguments);
|
||||
this.collection.remove(detail.record);
|
||||
this.collection.save();
|
||||
},
|
||||
openRecord: function(record) {
|
||||
this.$.recordView.record = record;
|
||||
this.$.list.style.display = "none";
|
||||
this.$.listView.style.display = "none";
|
||||
this.$.recordView.style.display = "block";
|
||||
},
|
||||
deleteRecord: function(record) {
|
||||
this.collection.remove(record);
|
||||
this.collection.save();
|
||||
},
|
||||
back: function(event, detail, sender) {
|
||||
this.$.recordView.style.display = "none";
|
||||
this.$.list.style.display = "block";
|
||||
this.$.listView.style.display = "block";
|
||||
var record = this.$.recordView.record;
|
||||
if (record.name || record.fields.length) {
|
||||
record.name = record.name || "Unnamed";
|
||||
|
|
@ -130,12 +75,6 @@
|
|||
this.collection.remove(record);
|
||||
}
|
||||
},
|
||||
applyFilter: function() {
|
||||
var fs = this.filterString;
|
||||
this.filteredRecords = fs ? this.collection.records.filter(function(rec) {
|
||||
return rec.name.toLowerCase().search(fs.toLowerCase()) != -1;
|
||||
}) : this.collection.records;
|
||||
},
|
||||
addRecord: function() {
|
||||
var record = {
|
||||
name: "",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
<polymer-element name="safe-list-view" attributes="collection">
|
||||
<template>
|
||||
<style>
|
||||
.list-header {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
background: rgb(245, 245, 245);
|
||||
display: -webkit-box;
|
||||
-webkit-box-align: center;
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.list-header > input {
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
-webkit-appearance: none;
|
||||
padding: 6px;
|
||||
display: block;
|
||||
-webkit-box-flex: 1;
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.list-header > button {
|
||||
display: block;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 30px;
|
||||
font-family: inherit;
|
||||
font-weight: 100;
|
||||
line-height: 15px;
|
||||
color: #000;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-top: 50px;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
<div id="listHeader" class="list-header">
|
||||
<input value="{{ filterString }}" type="search" placeholder="type to filter..." />
|
||||
<button on-click="{{ addRecordClicked }}">+</button>
|
||||
</div>
|
||||
<div id="list" class="list">
|
||||
<template repeat="{{ record, i in filteredRecords}}">
|
||||
<safe-record-item record="{{ record }}" on-click="{{ recordClicked }}" on-delete="{{ deleteClicked }}" index="{{ i }}"></safe-record-item>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
Polymer('safe-list-view', {
|
||||
observe: {
|
||||
filterString: "applyFilter",
|
||||
"collection.records": "applyFilter"
|
||||
},
|
||||
applyFilter: function() {
|
||||
var fs = this.filterString;
|
||||
this.filteredRecords = fs ? this.collection.records.filter(function(rec) {
|
||||
return rec.name.toLowerCase().search(fs.toLowerCase()) != -1;
|
||||
}) : this.collection.records;
|
||||
},
|
||||
recordClicked: function(event, detail, sender) {
|
||||
this.fire("select-record", {record: sender.templateInstance.model.record});
|
||||
},
|
||||
deleteClicked: function(event, detail, sender) {
|
||||
console.log("*** delete clicked ***", arguments);
|
||||
this.fire("delete-record", {record: sender.templateInstance.model.record});
|
||||
},
|
||||
addRecordClicked: function() {
|
||||
this.fire("add-record");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
Loading…
Reference in New Issue