<commit_before><template>
	<div class="row">
		<div class="col-md-12">
			<div class="row">
				<div class="col-md-12">
					<bs-page-header :title="users.length + ' users'"></bs-page-header>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<ul class="nav nav-tabs">
						<li class="active"><a>Réputation</a></li>
						<li><a>New users</a></li>
						<li><a>Voters</a></li>
						<li><a>Editors</a></li>
						<li><a>Moderators</a></li>
					</ul>
				</div>
			</div>
			<div class="row v-user-view">
				<div style="margin-bottom:1em;" class="col-md-3" v-for="user in sortedUsers">
					<div class="media">
						<div class="media-left">
							<a v-link="'/users/profile/view/' + user.ID">
								<img class="media-object" :src="user.Avatar" width="60" height="60" alt="Avatar">
							</a>
						</div>
						<div class="media-body">
							<div class="v-user-heading">
								<div class="v-user-name"><a v-link="'/users/profile/view/' + user.ID">{{ user.DisplayedName }}</a></div>
								<div class="v-user-reput">
									{{ user.VAction }} VActions
									<!-- TODO cestmoche {{ user.VCoins }} VCoins -->
								</div>
							</div>
							<p>{{ user.Motto }}</p>
							<div class="v-user-date">member since {{ user.CreatedAt | fromNow true }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/babel">
	import {
		usersApi,
	} from '../../utils/resources';
	import BsPageHeader from '../bootstrap/BsPageHeader.vue';

	export default {
		data() {
			return {
				users: []
			};
		},
		computed: {
			sortedUsers: function () {
				return this.users.sort((a, b) => {
					if (a.VReputation > b.VReputation)
						return -1;
					if (a.VReputation === b.VReputation)
						return 0;
					return 1;
				})
			}
		},
		components: {
			BsPageHeader
		},
		route: {
			data() {
				return {
					users: usersApi.get().then(users => users.json()),
				};
			},
		},
	}
</script>

<style lang="scss">
	.v-user-box {
		margin-top: 1em;
	}
	.v-user-view {
		margin-top: 1.2em;
	}
	.v-user-heading {
		display: flex;
		flex-direction: row;
		align-items: baseline;
	}
	.v-user-name {
		font-size: 16px;
	}
	.v-user-reput {
		text-align: right;
		flex-grow: 1;
	}
	.v-user-date {
		font-size: 10px;
	}
</style><commit_msg>VON-54 Add time filter in user list<commit_after><template>
	<div class="row">
		<div class="col-md-12">
			<div class="row">
				<div class="col-md-12">
					<bs-page-header :title="users.length + ' users'"></bs-page-header>
				</div>
			</div>
			<div class="row user-list-filters">
				<a class="user-list-filter" @click.prevent="this.since = 'day'">today</a> | <a class="user-list-filter" @click.prevent="this.since = 'week'">week</a> | <a class="user-list-filter" @click.prevent="this.since = 'month'">month</a> | <a class="user-list-filter" @click.prevent="this.since = false">all</a>
			</div>
			<div class="row v-user-view">
				<div style="margin-bottom:1em;" class="col-md-3" v-for="user in users | filter | byCreation">
					<div class="media">
						<div class="media-left">
							<a v-link="'/users/profile/view/' + user.ID">
								<img class="media-object" :src="user.Avatar" width="60" height="60" alt="Avatar">
							</a>
						</div>
						<div class="media-body">
							<div class="v-user-heading">
								<div class="v-user-name"><a v-link="'/users/profile/view/' + user.ID">{{ user.DisplayedName }}</a></div>
								<div class="v-user-reput">
									{{ user.VAction }} VActions
									<!-- TODO cestmoche {{ user.VCoins }} VCoins -->
								</div>
							</div>
							<p>{{ user.Motto }}</p>
							<div class="v-user-date">member since {{ user.CreatedAt | fromNow true }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/babel">
	import BsPageHeader from '../bootstrap/BsPageHeader.vue';
	import { usersApi } from '../../utils/resources';
	import moment from 'moment';

	export default {
		data() {
			return {
				users: [],
				since: false
			};
		},
		route: {
			data() {
				return {
					users: usersApi.get().then(users => users.json()),
				};
			},
		},
		components: {
			BsPageHeader
		},
		filters: {
			filter(users) {
				return !this.since ? users : users.filter(e =>
					moment(e.CreatedAt).isAfter(moment().subtract(1, this.since))
				);
			}
		}
	}
</script>

<style lang="scss">
	.v-user-view {
		margin-top: 1.2em;
	}
	.v-user-heading {
		display: flex;
		flex-direction: row;
		align-items: baseline;
	}
	.v-user-name {
		font-size: 16px;
	}
	.v-user-reput {
		text-align: right;
		flex-grow: 1;
	}
	.v-user-date {
		font-size: 10px;
	}

	.user-list-filters {
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 14px;
	}
	.user-list-filter {
		cursor: pointer;
	}
</style>
{'fraction_non_alphanumeric': 0.21376433785192908, 'fraction_numerical': 0.010218978102189781, 'mean_word_length': 2.5032870708546384, 'pattern_counts': {'":': 0, '<': 123, '<?xml version=': 0, '>': 128, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4102859', 'n_tokens_mistral': 2334, 'n_tokens_neox': 1829, 'n_words': 335}