started adding view logs via ui
the build failed Details

This commit is contained in:
konrad 2018-03-06 16:32:28 +01:00 committed by kolaente
parent 3de6ecf579
commit 0030372879
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
3 changed files with 233 additions and 0 deletions

View File

@ -0,0 +1,199 @@
<template>
<div v-if="user.authenticated">
<h1 v-lang.logs.title></h1>
<div class="fullscreen-loader-wrapper" v-if="loading">
<div class="half-circle-spinner">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
</div>
</div>
<div v-if="!loading">
<button @click="loadLogs()" class="ui teal labeled icon button" style="float: right;">
<i class="refresh icon"></i>
<span v-lang.general.refresh></span>
</button>
<form id="search">
<div class="ui icon input">
<input :placeholder="langGeneral.search" type="text" v-model="searchQuery" v-focus>
<i class="search icon"></i>
</div>
</form>
<paginate
name="logs"
:list="filteredData"
:per="35"
tag="div"
>
<grid
:data="paginated('logs')"
:columns="gridColumns"
>
</grid>
</paginate>
<div class="pagination-container">
<paginate-links
tag="div"
for="logs"
:hide-single-page="true"
:classes="{
'ul': ['ui', 'pagination', 'menu'],
'li': 'item',
'li a': 'pagination-link'
}"
>
</paginate-links>
<div v-if="$refs.paginator" v-lang.general.searchResultCount="$refs.paginator.pageItemsCount"></div>
</div>
</div>
</div>
</template>
<script>
import auth from '../auth'
import {HTTP} from '../http-common'
export default {
name: 'Logs',
data () {
return {
user: auth.user,
logs: [],
searchQuery: '',
gridColumns: [],
loading: false,
paginate: ['logs'],
allStatus: [],
showModal: false,
logActions: []
}
},
created () {
this.loadLogs()
// Grid
this.gridColumns = [
this.translate('logs').gridColumns.user,
this.translate('logs').gridColumns.action,
this.translate('logs').gridColumns.itemID,
this.translate('logs').gridColumns.date
]
// Build the list with all logactions
this.logActions = this.translate('logs').logActions
// Set the title
document.title = this.translate('nav').logs
},
watch: {
// call again the method if the route changes
'$route': 'loadLogs'
},
computed: {
filteredData: function () {
var filterKey = this.searchQuery && this.searchQuery.toLowerCase()
var data = this.logs
if (filterKey) {
data = data.filter(function (row) {
return Object.keys(row).some(function (key) {
if (row[key].content) {
return String(row[key].content).toLowerCase().indexOf(filterKey) > -1
} else {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
}
})
})
}
return data
},
langGeneral () {
return this.translate('general')
}
},
methods: {
errorNotification (e) {
// Build the notification text from error response
let err = e.message
if (e.response.data && e.response.data.message) {
err += '<br/>' + e.response.data.message
}
// Fire a notification
this.$notify({
type: 'error',
title: this.langGeneral.error,
text: err
})
},
loadLogs () {
this.loading = true
this.logs = []
HTTP.get(`logs`, { headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')} })
.then(response => {
let ls = response.data
let i = 0
// Loop throught the data we got from our API and prepare an array to display all authors
for (const l in ls) {
// Beautify the date
let c = new Date(ls[l].time * 1000)
let time = {
date: ('0' + c.getDate()).slice(-2) + '.' + ('0' + (c.getMonth() + 1)).slice(-2) + '.' + c.getFullYear(),
time: ('0' + c.getHours()).slice(-2) + ':' + ('0' + c.getMinutes()).slice(-2)
}
this.logs[i] = {
id: {content: ls[l].id, hide: true}, // Don't show the id
user: ls[l].userID,
log: this.logActions[ls[l].log],
item: ls[l].itemID,
time: time.date + ' ' + time.time
}
// increment dat shit
i++
}
this.loading = false
})
.catch(e => {
this.loading = false
this.errorNotification(e)
})
}
}
}
</script>
<style>
a.pagination-link{
margin: -5px -1.14286em -18px;
display: block;
position: absolute;
cursor: pointer;
padding: 0.928571em 1.14286em;
color: rgba(0,0,0,.87);
-webkit-transition: background-color 200ms; /* Safari */
transition: background-color 200ms;
}
a.pagination-link:hover{
background: rgba(0,0,0,.02);
}
.pagination{
padding: 0;
}
.pagination-container{
margin-top: 1rem;
text-align: center;
}
#search{
margin-bottom: 1rem;
}
</style>

View File

@ -98,5 +98,33 @@ export default {
errorNoTitle: 'Bitte gib mindestens einen Titel an.',
updatedSuccess: 'Der Artikel wurde erfolgreich geupdated!',
insertedSuccess: 'Der Artikel wurde erfolgreich erstellt!'
},
logs: {
title: 'Logs',
gridColumns: {
user: 'Benutzer',
action: 'Aktion',
itemID: 'Item',
date: 'Datum'
},
logActions: [
'',
'Buch hinzugefügt',
'Buch geändert',
'Buch gelöscht',
'Author hinzugefügt',
'Author geändert',
'Author gelöscht',
'Verlag hinzugefügt',
'Verlag geändert',
'Verlag gelöscht',
'Artikel hinzugefügt',
'Artikel geändert',
'Artikel gelöscht',
'Benutzer hinzugefügt',
'Benutzer geändert',
'Benutzer gelöscht',
'Benutzerpasswort geändert'
]
}
}

View File

@ -14,6 +14,7 @@ import PublisherOverview from '@/components/PublisherOverview'
import Items from '@/components/Items'
import ItemsOverview from '@/components/ItemOverview'
import ItemsAddEdit from '@/components/ItemsAddEdit'
import Logs from '@/components/Logs'
Vue.use(Router)
@ -108,6 +109,11 @@ export default new Router({
path: '/items/:id/edit',
name: 'item-edit',
component: ItemsAddEdit
},
{
path: '/logs',
name: 'view-logs',
component: Logs
}
]
})