<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//documention-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//documention-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//documention-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//documention-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//documention-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ais-one/pen/mAxKpp?depth=everything&order=popularity&page=28&q=vue&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style class="cp-pen-styles"></style></head><body>
<div class="container">
<h1>HRE Deal Flow Document Center</h1>
<main id="app">
<router-view></router-view>
</main>
</div>
<template id="document">
<div>
<h2>{{ document.name }}</h2>
<b>Description: </b>
<div>{{ document.description }}</div>
<b>Price:</b>
<div>{{ document.price }}<span class="glyphicon glyphicon-hourglass"></span></div>
<br/>
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
<a><router-link to="/">Back to document list</router-link></a>
</div>
</template>
<template id="document-list"><div>
<div class="actions">
<a class="btn btn-default" >
<router-link :to="{path: '/add-document'}">
<span class="glyphicon glyphicon-plus"></span>
Add document
</router-link>
</a>
</div>
<div class="filters row">
<div class="form-group col-sm-3">
<label for="search-element">New Document Name</label>
<input v-model="searchKey" class="form-control" id="search-element" requred/>
<label for="search-element">New Document Description</label>
<input v-model="searchKey" class="form-control" id="search-element" requred/>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Document Description</th>
<th>Status</th>
<th class="col-sm-2">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="document in filtereddocuments">
<!-- tr v-for="document in documents" -->
<!-- tr v-for="document in documents | filterBy searchKey in 'name'" -->
<td>
<a><router-link :to="{name: 'document', params: {document_id: document.id}}">{{ document.name }}</router-link></a>
</td>
<td>{{ document.description }}</td>
<td>
{{ document.status }}
<span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>
</td>
<td>
<a class="btn btn-warning btn-xs"><router-link :to="{name: 'document-edit', params: {document_id: document.id}}">Edit</router-link></a>
<a class="btn btn-danger btn-xs"><router-link :to="{name: 'document-delete', params: {document_id: document.id}}">Delete</router-link></a>
<a class="btn btn-danger btn-xs"><router-link :to="{name: 'document-delete', params: {document_id: document.id}}">Save</router-link></a
</td>
</tr>
</tbody>
</table>
</div></template>
<template id="add-document">
<div>
<h2>Add new document</h2>
<form v-on:submit="createdocument">
<div class="form-group">
<label for="add-name">Name</label>
<input class="form-control" id="add-name" v-model="document.name" required/>
</div>
<div class="form-group">
<label for="add-description">Description</label>
<textarea class="form-control" id="add-description" rows="10" v-model="document.description"></textarea>
</div>
<div class="form-group">
<label for="add-price">Price, <span class="glyphicon glyphicon-euro"></span></label>
<input type="number" class="form-control" id="add-price" v-model="document.price"/>
</div>
<button type="submit" class="btn btn-primary">Create</button>
<a class="btn btn-default"><router-link to="/">Cancel</router-link></a>
</form>
</div>
</template>
<template id="document-edit">
<div>
<h2>Edit document</h2>
<form v-on:submit="updatedocument">
<div class="form-group">
<label for="edit-name">Name</label>
<input class="form-control" id="edit-name" v-model="document.name" required/>
</div>
<div class="form-group">
<label for="edit-description">Description</label>
<textarea class="form-control" id="edit-description" rows="3" v-model="document.description"></textarea>
</div>
<div class="form-group">
<label for="edit-price">Price, <span class="glyphicon glyphicon-euro"></span></label>
<input type="number" class="form-control" id="edit-price" v-model="document.price"/>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<a class="btn btn-default"><router-link to="/">Cancel</router-link></a>
</form>
</div>
</template>
<template id="document-delete">
<div>
<h2>Delete document {{ document.name }}</h2>
<form v-on:submit="deletedocument">
<p>The action cannot be undone.</p>
<button type="submit" class="btn btn-danger">Delete</button>
<a class="btn btn-default"><router-link to="/">Cancel</router-link></a>
</form>
</div>
</template>
<script src='//documention-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://unpkg.com/vue@2.0.0/dist/vue.js'></script><script src='https://unpkg.com/vue-router@2.0.0/dist/vue-router.js'></script>
<script >var documents = [
{id: 1, name: 'Escrow Release Letter', description: 'Provide notification to get your clients deposit back.', price: 100},
{id: 2, name: 'Commission Settlement Statement', description: 'Letter to closing attorney. Confirm office commission is correct. Verify.', price: 100},
{id: 3, name: 'Closing Report.', description: 'The document to close out. Add deal contact info. Calculate your commission.', price: 100},
];
function finddocument (documentId) {
return documents[finddocumentKey(documentId)];
};
function finddocumentKey (documentId) {
for (var key = 0; key < documents.length; key++) {if (window.CP.shouldStopExecution(1)){break;}
if (documents[key].id == documentId) {
return key;
}
}
window.CP.exitedLoop(1);
};
var List = Vue.extend({
template: '#document-list',
data: function () {
return {documents: documents, searchKey: ''};
},
computed: {
filtereddocuments() {
return this.documents.filter( (document) => {
return document.name.indexOf(this.searchKey) > -1
//return !document.name.indexOf(this.searchKey)
})
}
}
});
var document = Vue.extend({
template: '#document',
data: function () {
return {document: finddocument(this.$route.params.document_id)};
}
});
var documentEdit = Vue.extend({
template: '#document-edit',
data: function () {
return {document: finddocument(this.$route.params.document_id)};
},
methods: {
updatedocument: function () {
//Obsolete, document is available directly from data...
let document = this.document; //var document = this.$get('document');
documents[finddocumentKey(document.id)] = {
id: document.id,
name: document.name,
description: document.description,
price: document.price
};
router.push('/');
}
}
});
var documentDelete = Vue.extend({
template: '#document-delete',
data: function () {
return {document: finddocument(this.$route.params.document_id)};
},
methods: {
deletedocument: function () {
documents.splice(finddocumentKey(this.$route.params.document_id), 1);
router.push('/');
}
}
});
var Adddocument = Vue.extend({
template: '#add-document',
data: function () {
return {document: {name: '', description: '', price: ''}
}
},
methods: {
createdocument: function() {
//Obsolete, document is available directly from data...
let document = this.document; //var document = this.$get('document');
documents.push({
id: Math.random().toString().split('.')[1],
name: document.name,
description: document.description,
price: document.price
});
router.push('/');
}
}
});
var router = new VueRouter({
routes: [
{path: '/', component: List},
{path: '/document/:document_id', component: document, name: 'document'},
{path: '/add-document', component: Adddocument},
{path: '/document/:document_id/edit', component: documentEdit, name: 'document-edit'},
{path: '/document/:document_id/delete', component: documentDelete, name: 'document-delete'}
]
});
var App = {}
new Vue({
router
}).$mount('#app')
//# sourceURL=pen.js
</script>
</body></html>
