vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

feat: Add energy point history component

Browse source
This commit is contained in:
Suraj Shetty 2019-03-31 17:23:51 +05:30
parent b62b9b5db2
commit ecae61e35a
2 changed files with 136 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
frappe/public/js/frappe/social/components/EnergyPointHistory.vue Normal file
View file

@ -0,0 +1,91 @@
<template>
<div>
<ul class="log-list">
<li class="history-log" v-for="log in history_logs" :key="log.name">
<span v-html="frappe.utils.get_points(log.points)"></span>
<span v-html="log_body(log)"></span>
<span>&nbsp;-&nbsp;</span>
<span v-html="frappe.datetime.comment_when(log.creation)"></span>
</li>
<li v-if="!history_logs.length" class="history-log">
{{__('No logs found')}}
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['user'],
data() {
return {
history_logs: []
}
},
created() {
frappe.db.get_list('Energy Point Log', {
filters: {
user: this.user,
type: ['!=', 'Review']
},
fields: ['*']
}).then(data => {
this.history_logs = data;
})
},
methods: {
log_body(log) {
const doc_link = frappe.utils.get_form_link(log.reference_doctype, log.reference_name, true)
const owner_name = frappe.user.full_name(log.owner).bold();
if (log.type === 'Appreciation') {
return __('{0} appreciated on {1}', [owner_name, doc_link])
}
if (log.type === 'Criticism') {
return __('{0} criticized on {1}', [owner_name, doc_link])
}
return __('via automatic rule {0} for {1}', [log.rule.bold(), doc_link])
}
}
}
</script>
<style lang="less">
@import "frappe/public/less/common";
.log-list {
padding: 15px;
padding-left: 0px;
position: relative;
}
.log-list:before {
content: " ";
border-left: 1px solid @border-color;
position: absolute;
top: 0px;
bottom: 0px;
left: 30px;
z-index: 0;
}
.history-log {
.text-muted;
.text-medium;
list-style: none;
padding: 10px;
padding-left: 50px;
display: flex;
span:nth-child(1) {
width: 40px;
text-align: right;
margin-right: 10px;
}
position: relative;
}
.history-log:before {
content: " ";
width: 7px;
height: 7px;
background-color: @border-color;
position: absolute;
border-radius: 50%;
left: 27px;
top: 16px;
}
</style>

66
frappe/public/js/frappe/social/pages/UserList.vue
View file

@ -16,40 +16,52 @@
</span>
</li>
<li
class="user-card"
v-for="user in filtered_users" :key="user.name"
@click="go_to_profile_page(user.name)">
<div class="user-details flex">
<span v-html="get_avatar(user.name)"></span>
<div>
<div>{{ user.fullname }}</div>
<div class="text-muted text-medium" :class="{'italic': !user.bio}">
{{ frappe.ellipsis(user.bio, 100) || 'No Bio'}}
</div>
v-for="user in filtered_users"
:key="user.name"
@click="toggle_log(user.name)">
<div class="user-card">
<div class="user-details flex">
<span v-html="get_avatar(user.name)"></span>
<span>
<a @click="go_to_profile_page(user.name)">{{ user.fullname }}</a>
<div class="text-muted text-medium" :class="{'italic': !user.bio}">
{{ frappe.ellipsis(user.bio, 100) || 'No Bio'}}
</div>
</span>
</div>
<span class="text-muted text-nowrap user-points">
{{ user.energy_points }}
</span>
<span class="text-muted text-nowrap user-points">
{{ user.review_points }}
</span>
<span class="text-muted text-nowrap user-points">
{{ user.given_points }}
</span>
</div>
<span class="text-muted text-nowrap user-points">
{{ user.energy_points }}
</span>
<span class="text-muted text-nowrap user-points">
{{ user.review_points }}
</span>
<span class="text-muted text-nowrap user-points">
{{ user.given_points }}
</span>
<energy-point-history
v-if="show_log_for===user.name"
class="energy-point-history"
:user="user.name">
</energy-point-history>
</li>
<li class="text-muted" v-if="!filtered_users.length">{{__('No user found')}}</li>
<li class="user-card text-muted" v-if="!filtered_users.length">{{__('No user found')}}</li>
</ul>
</div>
</template>
<script>
import EnergyPointHistory from '../components/EnergyPointHistory.vue';
export default {
components: {
EnergyPointHistory
},
data() {
return {
users: [],
filter_users_by: null,
sort_users_by: 'energy_points',
sort_order: 'desc',
show_log_for: null
}
},
computed: {
@ -117,6 +129,13 @@ export default {
return user;
});
});
},
toggle_log(user) {
if (this.show_log_for === user) {
this.show_log_for = null
} else {
this.show_log_for = user
}
}
}
}
@ -133,7 +152,6 @@ export default {
cursor: pointer;
padding: 12px 15px;
border-bottom: 1px solid @border-color;
.user-details {
flex: 1;
@ -165,6 +183,12 @@ export default {
width: 100%;
left: 0;
}
.energy-point-history {
border-bottom: 1px solid @border-color;
max-height: 300px;
overflow: scroll;
background-color: @light-bg;
}
</style>