<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>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properties -->
<title>vuetable - Semantic</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<style type="text/css">
.ui.vertical.stripe h3 {
font-size: 2em;
}
.secondary.pointing.menu .toc.item {
display: none;
}
.vuetable {
margin-top: 1em !important;
}
.vuetable-wrapper.ui.basic.segment {
padding: 0em;
}
.vuetable button.ui.button {
padding: .5em .5em;
font-weight: 400;
}
.vuetable button.ui.button i.icon {
margin: 0;
}
.vuetable th.sortable:hover {
color: #2185d0;
cursor: pointer;
}
.vuetable-actions, .custom-action {
width: 15%;
padding: 12px 0px;
text-align: center;
}
.vuetable-pagination {
background: #f9fafb !important;
}
.vuetable-pagination-info {
margin-top: auto;
margin-bottom: auto;
}
[v-cloak] {
display: none;
}
.highlight {
background-color: yellow;
}
.vuetable-detail-row {
height: 200px;
}
.detail-row {
margin-left: 40px;
}
.expand-transition {
transition: all .5s ease;
}
.expand-enter, .expand-leave {
height: 0;
opacity: 0;
}
tr.odd {
background-color: #e6f5ff;
}
body {
overflow-y: scroll;
}
</style>
</head>
<body>
<!-- Page Contents -->
<div class="ui inverted vertical masthead center aligned segment">
<div class="ui container">
<div class="ui large secondary inverted pointing menu">
<a class="toc item">
<i class="sidebar icon"></i>
</a>
<a class="active item">Home</a>
<a class="item">Work</a>
<a class="item">Company</a>
<a class="item">Careers</a>
<div class="right item">
<a class="ui inverted button">Log in</a>
<a class="ui inverted button">Sign Up</a>
</div>
</div>
</div>
</div>
<div id="app" class="ui vertical stripe segment">
<div class="ui container">
<div id="content" class="ui basic segment">
<h3 class="ui header">List of Users</h3>
<div class="ui grid">
<div class="ui left aligned nine wide column">
<div class="ui labeled icon input">
<div class="ui label">Search:</div>
<input v-model="searchFor" class="ui input" @keyup.enter="setFilter">
<i class="search icon"></i>
</div>
<button class="ui button primary" @click="setFilter">Go</button>
<button class="ui button" @click="resetFilter">Reset</button>
</div>
<div class="ui right aligned seven wide column">
<button class="ui basic button" id="settingsBtn">
<i class="setting icon"></i>
Settings
</button>
</div>
</div>
<div class="ui small modal" id="settingsModal">
<div class="header">Settings</div>
<div class="content ui form">
<div class="field">
<div class="ui checkbox">
<input type="checkbox" v-model="multiSort">
<label>Multisort (use Alt+Click)</label>
</div>
</div>
<div class="ui divider"></div>
<div class="field">
<label>Pagination:</label>
<select class="ui simple dropdown" v-model="paginationComponent">
<option value="vuetable-pagination">vuetable-pagination</option>
<option value="vuetable-pagination-dropdown">vuetable-pagination-dropdown</option>
</select>
</div>
<div class="field">
<label>Per Page:</label>
<select class="ui simple dropdown" v-model="perPage">
<option value=10>10</option>
<option value=15>15</option>
<option value=20>20</option>
<option value=25>25</option>
</select>
</div>
<div class="ui fluid card">
<div class="content">
<div class="header">Visible fields</div>
</div>
<div class="content">
<div v-for="field in fields" class="field">
<div class="ui checkbox">
<input type="checkbox" v-model="field.visible">
<label>{{ field.title == '' ? field.name.replace('__', '') : field.title | capitalize}}</label>
</div>
</div>
</div>
</div>
</div>
<div class="actions">
<div class="ui cancel button">Close</div>
</div>
</div>
<vuetable v-ref:vuetable
api-url="http://vuetable.ratiw.net/api/users"
pagination-path=""
:pagination-component="paginationComponent"
wrapper-class="vuetable-wrapper ui basic segment"
table-wrapper=".vuetable-wrapper"
:fields="fields"
:sort-order="sortOrder"
:multi-sort="multiSort"
:item-actions="itemActions"
:per-page="perPage"
:append-params="moreParams"
detail-row-component="my-detail-row"
detail-row-id="id"
detail-row-transition="expand"
row-class-callback="rowClassCB"
></vuetable>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.min.js"></script>
<script src="/js/vue-table.js"></script>
<script>
$('#settingsModal').modal({
detachable: false,
onVisible: function() {
$('.ui.checkbox').checkbox()
}
}).modal('attach events', '#settingsBtn', 'show')
var tableColumns = [
{
name: 'id',
title: '',
dataClass: 'center aligned',
callback: 'showDetailRow'
},
{
name: 'name',
title: 'Full Name',
sortField: 'name'
},
{
name: 'email',
sortField: 'email',
visible: true
},
{
name: 'nickname',
sortField: 'nickname',
callback: 'allCap'
},
{
name: 'birthdate',
sortField: 'birthdate',
callback: 'formatDate|D/MM/Y'
},
{
name: 'gender',
sortField: 'gender',
titleClass: 'center aligned',
dataClass: 'center aligned',
callback: 'gender'
},
{
name: '__component:custom-action',
title: "Component",
titleClass: 'center aligned',
dataClass: 'custom-action center aligned',
},
{
name: '__actions',
dataClass: 'center aligned',
}
]
Vue.config.debug = true
var E_SERVER_ERROR = 'Error communicating with the server'
Vue.component('custom-action', {
template: [
'<div>',
'<button class="ui red button" @click="itemAction(\'view-item\', rowData)"><i class="zoom icon"></i></button>',
'<button class="ui blue button" @click="itemAction(\'edit-item\', rowData)"><i class="edit icon"></i></button>',
'<button class="ui green button" @click="itemAction(\'delete-item\', rowData)"><i class="delete icon"></i></button>',
'</div>'
].join(''),
props: {
rowData: {
type: Object,
required: true
}
},
methods: {
itemAction: function(action, data) {
sweetAlert('custom-action: ' + action, data.name)
},
onClick: function(event) {
console.log('custom-action: on-click', event.target)
},
onDoubleClick: function(event) {
console.log('custom-action: on-dblclick', event.target)
}
}
})
Vue.component('my-detail-row', {
template: [
'<div class="detail-row ui form" @click="onClick($event)">',
'<div class="inline field">',
'<label>Name: </label>',
'<span>{{rowData.name}}</span>',
'</div>',
'<div class="inline field">',
'<label>Email: </label>',
'<span>{{rowData.email}}</span>',
'</div>',
'<div class="inline field">',
'<label>Nickname: </label>',
'<span>{{rowData.nickname}}</span>',
'</div>',
'<div class="inline field">',
'<label>Birthdate: </label>',
'<span>{{rowData.birthdate}}</span>',
'</div>',
'<div class="inline field">',
'<label>Gender: </label>',
'<span>{{rowData.gender}}</span>',
'</div>',
'</div>',
].join(''),
props: {
rowData: {
type: Object,
required: true
}
},
methods: {
onClick: function(event) {
console.log('my-detail-row: on-click')
}
},
})
new Vue({
el: '#app',
data: {
searchFor: '',
moreParams: [],
fields: tableColumns,
sortOrder: [{
field: 'name',
direction: 'asc',
}],
multiSort: true,
paginationComponent: 'vuetable-pagination',
perPage: 10,
// paginationInfoTemplate: 'แสดง {from} ถึง {to} จากทั้งหมด {total} รายการ',
itemActions: [
{ name: 'view-item', label: '', icon: 'zoom icon', class: 'ui teal button' },
{ name: 'edit-item', label: '', icon: 'edit icon', class: 'ui orange button'},
{ name: 'delete-item', label: '', icon: 'delete icon', class: 'ui red button' }
]
},
watch: {
'perPage': function(val, oldVal) {
this.$broadcast('vuetable:refresh')
},
'paginationComponent': function(val, oldVal) {
this.$broadcast('vuetable:load-success', this.$refs.vuetable.tablePagination)
}
},
methods: {
/**
* Callback functions
*/
allCap: function(value) {
return value.toUpperCase()
},
gender: function(value) {
return value == 'M'
? '<span class="ui teal label"><i class="male icon"></i>Male</span>'
: '<span class="ui pink label"><i class="female icon"></i>Female</span>'
},
formatDate: function(value, fmt) {
if (value == null) return ''
fmt = (typeof fmt == 'undefined') ? 'D MMM YYYY' : fmt
return moment(value, 'YYYY-MM-DD').format(fmt)
},
showDetailRow: function(value) {
var icon = this.$refs.vuetable.isVisibleDetailRow(value) ? 'down' : 'right'
return [
'<a class="show-detail-row">',
'<i class="chevron circle ' + icon + ' icon"></i>',
'</a>'
].join('')
},
setFilter: function() {
this.moreParams = [
'filter=' + this.searchFor
]
this.$nextTick(function() {
this.$broadcast('vuetable:refresh')
})
},
resetFilter: function() {
this.searchFor = ''
this.setFilter()
},
changePaginationComponent: function() {
this.$broadcast('vuetable:load-success', this.$refs.vuetable.tablePagination)
},
preg_quote: function( str ) {
// http://kevin.vanzonneveld.net
// + original by: booeyOH
// + improved by: Ates Goral (http://magnetiq.com)
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Onno Marsman
// * example 1: preg_quote("$40");
// * returns 1: '\$40'
// * example 2: preg_quote("*RRRING* Hello?");
// * returns 2: '\*RRRING\* Hello\?'
// * example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");
// * returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:'
return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
},
highlight: function(needle, haystack) {
return haystack.replace(
new RegExp('(' + this.preg_quote(needle) + ')', 'ig'),
'<span class="highlight">$1</span>'
)
},
rowClassCB: function(data, index) {
return (index % 2) === 0 ? 'odd' : 'even'
},
// -------------------------------------------------------------------------------------------
// You can change how sort params string is constructed by overriding getSortParam() like this
// -------------------------------------------------------------------------------------------
// getSortParam: function(sortOrder) {
// console.log('parent getSortParam:', JSON.stringify(sortOrder))
// return sortOrder.map(function(sort) {
// return (sort.direction === 'desc' ? '+' : '') + sort.field
// }).join(',')
// }
},
events: {
'vuetable:row-changed': function(data) {
console.log('row-changed:', data.name)
},
'vuetable:row-clicked': function(data, event) {
console.log('row-clicked:', data.name)
},
'vuetable:cell-clicked': function(data, field, event) {
console.log('cell-clicked:', field.name)
if (field.name !== '__actions') {
this.$broadcast('vuetable:toggle-detail', data.id)
}
},
'vuetable:action': function(action, data) {
console.log('vuetable:action', action, data)
if (action == 'view-item') {
sweetAlert(action, data.name)
} else if (action == 'edit-item') {
sweetAlert(action, data.name)
} else if (action == 'delete-item') {
sweetAlert(action, data.name)
}
},
'vuetable:load-success': function(response) {
var data = response.data.data
if (this.searchFor !== '') {
for (n in data) {
data[n].name = this.highlight(this.searchFor, data[n].name)
data[n].email = this.highlight(this.searchFor, data[n].email)
}
}
},
'vuetable:load-error': function(response) {
if (response.status == 400) {
sweetAlert('Something\'s Wrong!', response.data.message, 'error')
} else {
sweetAlert('Oops', E_SERVER_ERROR, 'error')
}
}
}
})
</script>
</body>
</html>
