ISMAIL MASSERAN
112 lines
3.2 KiB
Vue
112 lines
3.2 KiB
Vue
<template>
|
|
<div class="panel panel-default">
|
|
<div class="panel-body">
|
|
<div class="clearfix">
|
|
<h4 class="pull-left" style="margin-top: 0;">Activity Log</h4>
|
|
<button class="btn btn-default btn-sm pull-right" @click="refresh" :disabled="loading">
|
|
<i class="fa fa-refresh" :class="{ 'fa-spin': loading }"></i> Refresh
|
|
</button>
|
|
</div>
|
|
|
|
<div class="row" style="margin-top: 12px; margin-bottom: 12px;">
|
|
<div class="col-sm-8 col-md-6">
|
|
<div class="input-group">
|
|
<input v-model.trim="searchText" type="text" class="form-control"
|
|
placeholder="Cari aktiviti (description)…" @keyup.enter="refresh" />
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-primary" @click="refresh" :disabled="loading">
|
|
Cari
|
|
</button>
|
|
<button class="btn btn-default" @click="clearSearch" :disabled="loading || !searchText">
|
|
Clear
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<admin-data-table :headers="headers" :items="items" :loading="loading" :items-per-page="25"
|
|
:show-pagination="true" empty-text="Tiada activity log" :exportable="true"
|
|
export-file-name="activity-log">
|
|
<template v-slot:item-id="{ value }">
|
|
<span style="white-space: nowrap;">{{ value }}</span>
|
|
</template>
|
|
<template v-slot:item-created_at="{ value }">
|
|
<span style="white-space: nowrap;">{{ value }}</span>
|
|
</template>
|
|
<template v-slot:item-properties="{ value }">
|
|
<pre
|
|
style="margin: 0; white-space: pre-wrap; word-break: break-word; background: transparent; border: 0; padding: 0;">{{ stringify(value) }}</pre>
|
|
</template>
|
|
</admin-data-table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import AdminDataTable from '../../../AdminDataTable.vue';
|
|
|
|
export default {
|
|
components: { AdminDataTable },
|
|
|
|
data: function () {
|
|
return {
|
|
loading: false,
|
|
searchText: '',
|
|
items: [],
|
|
headers: [
|
|
{ title: 'Aktiviti', key: 'description', sortable: true },
|
|
{ title: 'Subject Type', key: 'subject_type', sortable: true },
|
|
{ title: 'Subject ID', key: 'subject_id', sortable: true },
|
|
{ title: 'Causer Type', key: 'causer_type', sortable: true },
|
|
{ title: 'Causer ID', key: 'causer_id', sortable: true },
|
|
{ title: 'Properties', key: 'properties', sortable: false },
|
|
{ title: 'Masa', key: 'created_at', sortable: true },
|
|
]
|
|
};
|
|
},
|
|
|
|
created: function () {
|
|
this.refresh();
|
|
},
|
|
|
|
methods: {
|
|
stringify: function (v) {
|
|
if (v == null) return '';
|
|
try {
|
|
return JSON.stringify(v, null, 2);
|
|
} catch (e) {
|
|
return String(v);
|
|
}
|
|
},
|
|
refresh: function () {
|
|
var vm = this;
|
|
vm.loading = true;
|
|
|
|
var params = { per_page: 200 };
|
|
if (vm.searchText) {
|
|
params.description = vm.searchText;
|
|
}
|
|
|
|
axios.get(config.API + 'admin/activity-log', { params: params })
|
|
.then(function (response) {
|
|
vm.items = (response && response.data && response.data.data) ? response.data.data : [];
|
|
})
|
|
.catch(function (error) {
|
|
vm.items = [];
|
|
if (vm.util && typeof vm.util.showResult === 'function') {
|
|
vm.util.showResult(error, 'error');
|
|
}
|
|
})
|
|
.finally(function () {
|
|
vm.loading = false;
|
|
});
|
|
},
|
|
clearSearch: function () {
|
|
this.searchText = '';
|
|
this.refresh();
|
|
}
|
|
}
|
|
};
|
|
</script>
|