<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>
