mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-16 22:27:26 +01:00
Implement URL handling for profile modal (#10844)
* Implement URL handling for profile modal * Fix issue where paths would break when using back button * move tiers import to index
This commit is contained in:
Phillip Thelen
committed by
Matteo Pagliazzi
Matteo Pagliazzi
parent
93290ec6d5
commit
63f5773172
@@ -35,3 +35,4 @@
|
||||
@import './pin';
|
||||
@import './animals';
|
||||
@import './iconalert';
|
||||
@import './tiers';
|
||||
|
||||
@@ -4,14 +4,7 @@ div
|
||||
.message-hidden(v-if='msg.flagCount === 1 && user.contributor.admin') Message flagged once, not hidden
|
||||
.message-hidden(v-if='msg.flagCount > 1 && user.contributor.admin') Message hidden
|
||||
.card-body
|
||||
h3.leader(
|
||||
:class='userLevelStyle(msg)',
|
||||
@click="showMemberModal(msg.uuid)",
|
||||
v-b-tooltip.hover.top="tierTitle",
|
||||
v-if="msg.user"
|
||||
)
|
||||
| {{msg.user}}
|
||||
.svg-icon(v-html="tierIcon")
|
||||
user-link(:userId="msg.uuid", :name="msg.user", :backer="msg.backer", :contributor="msg.contributor")
|
||||
p.time
|
||||
span.mr-1(v-if="msg.username") @{{ msg.username }}
|
||||
span.mr-1(v-if="msg.username") •
|
||||
@@ -79,22 +72,6 @@ div
|
||||
.card-body {
|
||||
padding: 0.75rem 1.25rem 0.75rem 1.25rem;
|
||||
|
||||
.leader {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h3 { // this is the user name
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
|
||||
.svg-icon {
|
||||
width: 10px;
|
||||
display: inline-block;
|
||||
margin-left: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: #878190;
|
||||
@@ -145,29 +122,17 @@ import max from 'lodash/max';
|
||||
|
||||
import habiticaMarkdown from 'habitica-markdown';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import styleHelper from 'client/mixins/styleHelper';
|
||||
|
||||
import achievementsLib from '../../../common/script/libs/achievements';
|
||||
import userLink from '../userLink';
|
||||
|
||||
import deleteIcon from 'assets/svg/delete.svg';
|
||||
import copyIcon from 'assets/svg/copy.svg';
|
||||
import likeIcon from 'assets/svg/like.svg';
|
||||
import likedIcon from 'assets/svg/liked.svg';
|
||||
import reportIcon from 'assets/svg/report.svg';
|
||||
import tier1 from 'assets/svg/tier-1.svg';
|
||||
import tier2 from 'assets/svg/tier-2.svg';
|
||||
import tier3 from 'assets/svg/tier-3.svg';
|
||||
import tier4 from 'assets/svg/tier-4.svg';
|
||||
import tier5 from 'assets/svg/tier-5.svg';
|
||||
import tier6 from 'assets/svg/tier-6.svg';
|
||||
import tier7 from 'assets/svg/tier-7.svg';
|
||||
import tier8 from 'assets/svg/tier-mod.svg';
|
||||
import tier9 from 'assets/svg/tier-staff.svg';
|
||||
import tierNPC from 'assets/svg/tier-npc.svg';
|
||||
|
||||
export default {
|
||||
props: ['msg', 'inbox', 'groupId'],
|
||||
mixins: [styleHelper],
|
||||
components: {userLink},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
@@ -176,16 +141,6 @@ export default {
|
||||
report: reportIcon,
|
||||
delete: deleteIcon,
|
||||
liked: likedIcon,
|
||||
tier1,
|
||||
tier2,
|
||||
tier3,
|
||||
tier4,
|
||||
tier5,
|
||||
tier6,
|
||||
tier7,
|
||||
tier8,
|
||||
tier9,
|
||||
tierNPC,
|
||||
}),
|
||||
};
|
||||
},
|
||||
@@ -235,18 +190,6 @@ export default {
|
||||
}
|
||||
return likeCount;
|
||||
},
|
||||
tierIcon () {
|
||||
const message = this.msg;
|
||||
const isNPC = Boolean(message.backer && message.backer.npc);
|
||||
if (isNPC) {
|
||||
return this.icons.tierNPC;
|
||||
}
|
||||
return this.icons[`tier${message.contributor.level}`];
|
||||
},
|
||||
tierTitle () {
|
||||
const message = this.msg;
|
||||
return achievementsLib.getContribText(message.contributor, message.backer) || '';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async like () {
|
||||
@@ -294,9 +237,6 @@ export default {
|
||||
chatId: message.id,
|
||||
});
|
||||
},
|
||||
showMemberModal (memberId) {
|
||||
this.$emit('show-member-modal', memberId);
|
||||
},
|
||||
atHighlight (text) {
|
||||
const escapedDisplayName = escapeRegExp(this.user.profile.name);
|
||||
const escapedUsername = escapeRegExp(this.user.auth.local.username);
|
||||
|
||||
@@ -239,10 +239,7 @@ export default {
|
||||
|
||||
// Open the modal only if the data is available
|
||||
if (profile && !profile.rejected) {
|
||||
this.$root.$emit('habitica:show-profile', {
|
||||
user: profile,
|
||||
startingPage: 'profile',
|
||||
});
|
||||
this.$router.push({name: 'userProfile', params: {userId: profile._id}});
|
||||
}
|
||||
},
|
||||
messageLiked (message) {
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
.row
|
||||
.col-4.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
|
||||
div
|
||||
a.title(@click="viewStaffProfile(user.uuid)") {{user.name}}
|
||||
router-link.title(:to="{'name': 'userProfile', 'params': {'userId': user.uuid}}") {{user.name}}
|
||||
.svg-icon.staff-icon(v-html="icons.tierStaff", v-if='user.type === "Staff"')
|
||||
.svg-icon.mod-icon(v-html="icons.tierMod", v-if='user.type === "Moderator" && user.name !== "It\'s Bailey"')
|
||||
.svg-icon.npc-icon(v-html="icons.tierNPC", v-if='user.name === "It\'s Bailey"')
|
||||
@@ -542,15 +542,6 @@ export default {
|
||||
this.$root.$emit('bv::show::modal', 'world-boss-rage');
|
||||
}
|
||||
},
|
||||
|
||||
async viewStaffProfile (staffId) {
|
||||
let staffDetails = await this.$store.dispatch('members:fetchMember', { memberId: staffId });
|
||||
this.$root.$emit('habitica:show-profile', {
|
||||
user: staffDetails.data.data,
|
||||
startingPage: 'profile',
|
||||
});
|
||||
},
|
||||
|
||||
async fetchRecentMessages () {
|
||||
this.group = await this.$store.dispatch('guilds:getGroup', {groupId: TAVERN_ID});
|
||||
},
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
.row
|
||||
.form.col-6(v-if='hero && hero.profile', submit='saveHero(hero)')
|
||||
a(@click='clickMember(hero, true)')
|
||||
router-link(:to="{'name': 'userProfile', 'params': {'userId': msg.uuid}}")
|
||||
h3 {{hero.profile.name}}
|
||||
.form-group
|
||||
input.form-control(type='text', v-model='hero.contributor.text', :placeholder="$t('contribTitle')")
|
||||
@@ -197,13 +197,6 @@ export default {
|
||||
window.scrollTo(0, 200);
|
||||
this.loadHero(id, index);
|
||||
},
|
||||
async clickMember (hero) {
|
||||
let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: hero._id });
|
||||
this.$root.$emit('habitica:show-profile', {
|
||||
user: heroDetails.data.data,
|
||||
startingPage: 'profile',
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
div
|
||||
inbox-modal
|
||||
creator-intro
|
||||
profile
|
||||
profileModal
|
||||
b-navbar.topbar.navbar-inverse.static-top.navbar-expand-lg(type="dark", :class="navbarZIndexClass")
|
||||
b-navbar-brand.brand
|
||||
.logo.svg-icon.d-none.d-xl-block(v-html="icons.logo")
|
||||
@@ -346,7 +346,7 @@ import logo from 'assets/svg/logo.svg';
|
||||
import InboxModal from '../userMenu/inbox.vue';
|
||||
import notificationMenu from './notificationsDropdown';
|
||||
import creatorIntro from '../creatorIntro';
|
||||
import profile from '../userMenu/profile';
|
||||
import profileModal from '../userMenu/profileModal';
|
||||
import userDropdown from './userDropdown';
|
||||
|
||||
export default {
|
||||
@@ -355,7 +355,7 @@ export default {
|
||||
InboxModal,
|
||||
notificationMenu,
|
||||
creatorIntro,
|
||||
profile,
|
||||
profileModal,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -35,11 +35,8 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
action () {
|
||||
this.$root.$emit('habitica:show-profile', {
|
||||
user: this.$store.state.user.data,
|
||||
startingPage: 'stats',
|
||||
});
|
||||
this.$router.push({name: 'stats'});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -102,10 +102,7 @@ export default {
|
||||
this.$root.$emit('bv::show::modal', 'inbox-modal');
|
||||
},
|
||||
showProfile (startingPage) {
|
||||
this.$root.$emit('habitica:show-profile', {
|
||||
user: this.user,
|
||||
startingPage,
|
||||
});
|
||||
this.$router.push({name: startingPage});
|
||||
},
|
||||
showBuyGemsModal (startingPage) {
|
||||
this.$store.state.gemModalOptions.startingPage = startingPage;
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
:hide-class-badge="classBadgePosition !== 'under-avatar'",
|
||||
)
|
||||
.member-stats(:class="{'col-8': !expanded && !isHeader}")
|
||||
.d-flex.align-items-center
|
||||
.d-flex.align-items-center.profile-first-row
|
||||
class-badge(v-if="classBadgePosition === 'next-to-name'", :member-class="member.stats.class")
|
||||
.d-flex.flex-column.profile-name-character
|
||||
h3.character-name
|
||||
@@ -95,9 +95,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.profile-first-row {
|
||||
margin-bottom: .5em
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
margin-left: 4px;
|
||||
margin-bottom: .5em;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.progress-container > span {
|
||||
@@ -111,7 +116,6 @@
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.progress-container > .progress {
|
||||
@@ -130,7 +134,7 @@
|
||||
|
||||
.progress-container .svg-icon, .progress-container .progress, .progress-container .small-text {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Condensed version
|
||||
@@ -249,10 +253,7 @@ export default {
|
||||
methods: {
|
||||
percent,
|
||||
showMemberModal (member) {
|
||||
this.$root.$emit('habitica:show-profile', {
|
||||
user: member,
|
||||
startingPage: 'profile',
|
||||
});
|
||||
this.$router.push({name: 'userProfile', params: {userId: member._id}});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
|
||||
@@ -1,21 +1,113 @@
|
||||
<template lang="pug">
|
||||
b-link(
|
||||
v-if='user && user.profile',
|
||||
@click.prevent='showProfile(user)'
|
||||
) {{user.profile.name}}
|
||||
router-link.leader(
|
||||
:to="{'name': 'userProfile', 'params': {'userId': id}}",
|
||||
:class='levelStyle()',
|
||||
v-b-tooltip.hover.top="tierTitle",
|
||||
v-if='displayName')
|
||||
| {{displayName}}
|
||||
.svg-icon(v-html="tierIcon()")
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
a {
|
||||
color: $gray-50;
|
||||
}
|
||||
|
||||
a.leader { // this is the user name
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
|
||||
.svg-icon {
|
||||
width: 10px;
|
||||
display: inline-block;
|
||||
margin-left: .5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
import styleHelper from 'client/mixins/styleHelper';
|
||||
|
||||
import achievementsLib from '../../common/script/libs/achievements';
|
||||
|
||||
import tier1 from 'assets/svg/tier-1.svg';
|
||||
import tier2 from 'assets/svg/tier-2.svg';
|
||||
import tier3 from 'assets/svg/tier-3.svg';
|
||||
import tier4 from 'assets/svg/tier-4.svg';
|
||||
import tier5 from 'assets/svg/tier-5.svg';
|
||||
import tier6 from 'assets/svg/tier-6.svg';
|
||||
import tier7 from 'assets/svg/tier-7.svg';
|
||||
import tier8 from 'assets/svg/tier-mod.svg';
|
||||
import tier9 from 'assets/svg/tier-staff.svg';
|
||||
import tierNPC from 'assets/svg/tier-npc.svg';
|
||||
|
||||
export default {
|
||||
props: ['user'],
|
||||
props: ['user', 'userId', 'name', 'backer', 'contributor'],
|
||||
mixins: [styleHelper],
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
tier1,
|
||||
tier2,
|
||||
tier3,
|
||||
tier4,
|
||||
tier5,
|
||||
tier6,
|
||||
tier7,
|
||||
tier8,
|
||||
tier9,
|
||||
tierNPC,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
displayName () {
|
||||
if (this.name) {
|
||||
return this.name;
|
||||
} else if (this.user && this.user.profile) {
|
||||
return this.user.profile.name;
|
||||
}
|
||||
},
|
||||
level () {
|
||||
if (this.contributor) {
|
||||
return this.contributor.level;
|
||||
} else if (this.user && this.user.contributor) {
|
||||
return this.user.contributor.level;
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
isNPC () {
|
||||
if (this.backer) {
|
||||
return this.backer.level;
|
||||
} else if (this.user && this.user.backer) {
|
||||
return this.user.backer.level;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
id () {
|
||||
return this.userId || this.user._id;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async showProfile (user) {
|
||||
let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: user._id });
|
||||
this.$root.$emit('habitica:show-profile', {
|
||||
user: heroDetails.data.data,
|
||||
startingPage: 'profile',
|
||||
});
|
||||
tierIcon () {
|
||||
if (this.isNPC) {
|
||||
return this.icons.tierNPC;
|
||||
}
|
||||
return this.icons[`tier${this.level}`];
|
||||
},
|
||||
tierTitle () {
|
||||
return achievementsLib.getContribText(this.level, this.isNPC) || '';
|
||||
},
|
||||
levelStyle () {
|
||||
return this.userLevelStyleFromLevel(this.level, this.isNPC);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -1,150 +1,148 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
b-modal#profile(title="Profile", size='lg', :hide-footer="true")
|
||||
.header(slot='modal-header')
|
||||
.profile-actions
|
||||
button.btn.btn-secondary.message-icon(@click='sendMessage()', v-b-tooltip.hover.left="$t('sendMessage')")
|
||||
.svg-icon.message-icon(v-html="icons.message")
|
||||
button.btn.btn-secondary.gift-icon(@click='openSendGemsModal()', v-b-tooltip.hover.bottom="$t('sendGems')")
|
||||
.svg-icon.gift-icon(v-html="icons.gift")
|
||||
button.btn.btn-secondary.remove-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1',
|
||||
@click="blockUser()", v-b-tooltip.hover.right="$t('blockWarning')")
|
||||
.svg-icon.remove-icon(v-html="icons.remove")
|
||||
button.btn.btn-secondary.positive-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1',
|
||||
@click="unblockUser()", v-b-tooltip.hover.right="$t('unblock')")
|
||||
.svg-icon.positive-icon(v-html="icons.positive")
|
||||
button.btn.btn-secondary.positive-icon(v-if='this.userLoggedIn.contributor.admin && !adminToolsLoaded',
|
||||
@click="loadAdminTools()", v-b-tooltip.hover.right="'Admin - Load Tools'")
|
||||
.svg-icon.positive-icon(v-html="icons.edit")
|
||||
span(v-if='this.userLoggedIn.contributor.admin && adminToolsLoaded')
|
||||
button.btn.btn-secondary.positive-icon(v-if='!hero.flags || (hero.flags && !hero.flags.chatRevoked)',
|
||||
@click="adminRevokeChat()", v-b-tooltip.hover.bottom="'Admin - Revoke Chat Privileges'")
|
||||
.svg-icon.positive-icon(v-html="icons.megaphone")
|
||||
button.btn.btn-secondary.positive-icon(v-if='hero.flags && hero.flags.chatRevoked',
|
||||
@click="adminReinstateChat()", v-b-tooltip.hover.bottom="'Admin - Reinstate Chat Privileges'")
|
||||
.svg-icon.positive-icon(v-html="icons.challenge")
|
||||
button.btn.btn-secondary.positive-icon(v-if='!hero.auth.blocked',
|
||||
@click="adminBlockUser()", v-b-tooltip.hover.right="'Admin - Ban User'")
|
||||
.svg-icon.positive-icon(v-html="icons.lock")
|
||||
button.btn.btn-secondary.positive-icon(v-if='hero.auth.blocked',
|
||||
@click="adminUnblockUser()", v-b-tooltip.hover.right="'Admin - Unblock User'")
|
||||
.svg-icon.positive-icon(v-html="icons.member")
|
||||
.row
|
||||
.col-12
|
||||
member-details(:member="user")
|
||||
.profile(v-if='user')
|
||||
.header
|
||||
.profile-actions
|
||||
button.btn.btn-secondary.message-icon(@click='sendMessage()', v-b-tooltip.hover.left="$t('sendMessage')")
|
||||
.svg-icon.message-icon(v-html="icons.message")
|
||||
button.btn.btn-secondary.gift-icon(@click='openSendGemsModal()', v-b-tooltip.hover.bottom="$t('sendGems')")
|
||||
.svg-icon.gift-icon(v-html="icons.gift")
|
||||
button.btn.btn-secondary.remove-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1',
|
||||
@click="blockUser()", v-b-tooltip.hover.right="$t('blockWarning')")
|
||||
.svg-icon.remove-icon(v-html="icons.remove")
|
||||
button.btn.btn-secondary.positive-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1',
|
||||
@click="unblockUser()", v-b-tooltip.hover.right="$t('unblock')")
|
||||
.svg-icon.positive-icon(v-html="icons.positive")
|
||||
button.btn.btn-secondary.positive-icon(v-if='this.userLoggedIn.contributor.admin && !adminToolsLoaded',
|
||||
@click="loadAdminTools()", v-b-tooltip.hover.right="'Admin - Load Tools'")
|
||||
.svg-icon.positive-icon(v-html="icons.edit")
|
||||
span(v-if='this.userLoggedIn.contributor.admin && adminToolsLoaded')
|
||||
button.btn.btn-secondary.positive-icon(v-if='!hero.flags || (hero.flags && !hero.flags.chatRevoked)',
|
||||
@click="adminRevokeChat()", v-b-tooltip.hover.bottom="'Admin - Revoke Chat Privileges'")
|
||||
.svg-icon.positive-icon(v-html="icons.megaphone")
|
||||
button.btn.btn-secondary.positive-icon(v-if='hero.flags && hero.flags.chatRevoked',
|
||||
@click="adminReinstateChat()", v-b-tooltip.hover.bottom="'Admin - Reinstate Chat Privileges'")
|
||||
.svg-icon.positive-icon(v-html="icons.challenge")
|
||||
button.btn.btn-secondary.positive-icon(v-if='!hero.auth.blocked',
|
||||
@click="adminBlockUser()", v-b-tooltip.hover.right="'Admin - Ban User'")
|
||||
.svg-icon.positive-icon(v-html="icons.lock")
|
||||
button.btn.btn-secondary.positive-icon(v-if='hero.auth.blocked',
|
||||
@click="adminUnblockUser()", v-b-tooltip.hover.right="'Admin - Unblock User'")
|
||||
.svg-icon.positive-icon(v-html="icons.member")
|
||||
.row
|
||||
.col-12.text-center.nav
|
||||
.nav-item(@click='selectPage("profile")', :class="{active: selectedPage === 'profile'}") {{ $t('profile') }}
|
||||
.nav-item(@click='selectPage("stats")', :class="{active: selectedPage === 'stats'}") {{ $t('stats') }}
|
||||
.nav-item(@click='selectPage("achievements")', :class="{active: selectedPage === 'achievements'}") {{ $t('achievements') }}
|
||||
#userProfile.standard-page(v-show='selectedPage === "profile"', v-if='user.profile')
|
||||
.row
|
||||
.col-12.col-md-8
|
||||
.header.mb-3
|
||||
h1 {{user.profile.name}}
|
||||
div
|
||||
.name(v-if='user.auth && user.auth.local && user.auth.local.username') @{{ user.auth.local.username }}
|
||||
div
|
||||
.name {{ user._id }}
|
||||
.col-12.col-md-4
|
||||
button.btn.btn-secondary(v-if='user._id === userLoggedIn._id', @click='editing = !editing') {{ $t('edit') }}
|
||||
.row(v-if='!editing')
|
||||
.col-12.col-md-8
|
||||
.about
|
||||
h2 {{ $t('about') }}
|
||||
p(v-if='user.profile.blurb', v-markdown='user.profile.blurb')
|
||||
p(v-else) {{ $t('noDescription') }}
|
||||
.photo
|
||||
h2 {{ $t('photo') }}
|
||||
img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
|
||||
p(v-else) {{ $t('noPhoto') }}
|
||||
.col-12
|
||||
member-details(:member="user")
|
||||
.row
|
||||
.col-12.col-md-6.offset-md-3.text-center.nav
|
||||
.nav-item(@click='selectPage("profile")', :class="{active: selectedPage === 'profile'}") {{ $t('profile') }}
|
||||
.nav-item(@click='selectPage("stats")', :class="{active: selectedPage === 'stats'}") {{ $t('stats') }}
|
||||
.nav-item(@click='selectPage("achievements")', :class="{active: selectedPage === 'achievements'}") {{ $t('achievements') }}
|
||||
#userProfile.standard-page(v-show='selectedPage === "profile"', v-if='user.profile')
|
||||
.row
|
||||
.col-12.col-md-8
|
||||
.header.mb-3
|
||||
h1 {{user.profile.name}}
|
||||
.name(v-if='user.auth && user.auth.local && user.auth.local.username') @{{ user.auth.local.username }}
|
||||
.col-12.col-md-4
|
||||
button.btn.btn-secondary(v-if='user._id === userLoggedIn._id', @click='editing = !editing', style='float:right;') {{ $t('edit') }}
|
||||
.row(v-if='!editing')
|
||||
.col-12.col-md-8
|
||||
.about.profile-section
|
||||
h2 {{ $t('about') }}
|
||||
p(v-if='user.profile.blurb', v-markdown='user.profile.blurb')
|
||||
p(v-else) {{ $t('noDescription') }}
|
||||
.photo.profile-section
|
||||
h2 {{ $t('photo') }}
|
||||
img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
|
||||
p(v-else) {{ $t('noPhoto') }}
|
||||
|
||||
.col-12.col-md-4
|
||||
.info
|
||||
h2 {{ $t('info') }}
|
||||
div
|
||||
strong {{ $t('joined') }}:
|
||||
| {{userJoinedDate}}
|
||||
div
|
||||
strong {{ $t('latestCheckin') }}:
|
||||
| {{userLastLoggedIn}}
|
||||
div
|
||||
strong {{ $t('totalLogins') }}:
|
||||
span {{ $t('totalCheckins', {count: user.loginIncentives}) }}
|
||||
div
|
||||
| {{getProgressDisplay()}}
|
||||
.progress
|
||||
.progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
|
||||
span.sr-only {{ incentivesProgress }}% {{$t('complete')}}
|
||||
// @TODO: Implement in V2 .social
|
||||
.col-12.col-md-4
|
||||
.info.profile-section
|
||||
h2 {{ $t('info') }}
|
||||
.info-item
|
||||
.info-item-label {{ $t('joined') }}:
|
||||
.info-item-value {{userJoinedDate}}
|
||||
.info-item
|
||||
.info-item-label {{ $t('totalLogins') }}:
|
||||
.info-item-value {{ user.loginIncentives }}
|
||||
.info-item
|
||||
.info-item-label {{ $t('latestCheckin') }}:
|
||||
.info-item-value {{userLastLoggedIn}}
|
||||
.info-item
|
||||
| {{getProgressDisplay()}}
|
||||
.progress
|
||||
.progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
|
||||
span.sr-only {{ incentivesProgress }}% {{$t('complete')}}
|
||||
// @TODO: Implement in V2 .social
|
||||
|
||||
.row(v-if='editing')
|
||||
h1 {{$t('editProfile')}}
|
||||
.col-12
|
||||
.alert.alert-info.alert-sm(v-html='$t("communityGuidelinesWarning", managerEmail)')
|
||||
.row(v-if='editing')
|
||||
h1 {{$t('editProfile')}}
|
||||
.col-12
|
||||
.alert.alert-info.alert-sm(v-html='$t("communityGuidelinesWarning", managerEmail)')
|
||||
|
||||
// TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
|
||||
.form-group
|
||||
label {{ $t('displayName') }}
|
||||
input.form-control(type='text', :placeholder="$t('fullName')", v-model='editingProfile.name')
|
||||
.form-group
|
||||
label {{ $t('photoUrl') }}
|
||||
input.form-control(type='url', v-model='editingProfile.imageUrl', :placeholder="$t('imageUrl')")
|
||||
.form-group
|
||||
label {{ $t('about') }}
|
||||
textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
|
||||
// include ../../shared/formatting-help
|
||||
//- .form-group
|
||||
//- label Facebook
|
||||
//- input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.facebook')
|
||||
//- .form-group
|
||||
//- label Instagram
|
||||
//- input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.instagram')
|
||||
//- .form-group
|
||||
//- label Twitter
|
||||
//- input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.twitter')
|
||||
// TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
|
||||
.form-group
|
||||
label {{ $t('displayName') }}
|
||||
input.form-control(type='text', :placeholder="$t('fullName')", v-model='editingProfile.name')
|
||||
.form-group
|
||||
label {{ $t('photoUrl') }}
|
||||
input.form-control(type='url', v-model='editingProfile.imageUrl', :placeholder="$t('imageUrl')")
|
||||
.form-group
|
||||
label {{ $t('about') }}
|
||||
textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
|
||||
// include ../../shared/formatting-help
|
||||
//- .form-group
|
||||
//- label Facebook
|
||||
//- input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.facebook')
|
||||
//- .form-group
|
||||
//- label Instagram
|
||||
//- input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.instagram')
|
||||
//- .form-group
|
||||
//- label Twitter
|
||||
//- input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.twitter')
|
||||
|
||||
.col-12.text-center
|
||||
button.btn.btn-primary(@click='save()') {{ $t("save") }}
|
||||
button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
|
||||
#achievements.standard-page.container(v-show='selectedPage === "achievements"', v-if='user.achievements')
|
||||
.row(v-for='(category, key) in achievements')
|
||||
h2.col-12.text-center {{ $t(key+'Achievs') }}
|
||||
.col-12.col-md-3.text-center(v-for='(achievement, key) in category.achievements')
|
||||
.box.achievement-container(:id='key + "-achievement"', :class='{"achievement-unearned": !achievement.earned}')
|
||||
b-popover(
|
||||
:target="'#' + key + '-achievement'",
|
||||
triggers="hover",
|
||||
placement="top",
|
||||
)
|
||||
h4.popover-content-title {{ achievement.title }}
|
||||
div.popover-content-text(v-html="achievement.text")
|
||||
.achievement(:class='achievement.icon + "2x"', v-if='achievement.earned')
|
||||
.counter.badge.badge-info.stack-count(v-if='achievement.optionalCount') {{achievement.optionalCount}}
|
||||
.achievement.achievement-unearned(class='achievement-unearned2x', v-if='!achievement.earned')
|
||||
hr.col-12
|
||||
.row
|
||||
.col-12.col-md-6(v-if='user.achievements.challenges')
|
||||
.achievement-icon.achievement-karaoke
|
||||
h2.text-center {{$t('challengesWon')}}
|
||||
div(v-for='chal in user.achievements.challenges')
|
||||
span(v-markdown='chal')
|
||||
hr
|
||||
.col-12.col-md-6(v-if='user.achievements.quests')
|
||||
.achievement-icon.achievement-alien
|
||||
h2.text-center {{$t('questsCompleted')}}
|
||||
div(v-for='(value, key) in user.achievements.quests')
|
||||
span {{ content.quests[key].text() }} ({{ value }})
|
||||
profileStats(
|
||||
:user='user',
|
||||
v-show='selectedPage === "stats"',
|
||||
:showAllocation='showAllocation()',
|
||||
v-if='user.preferences')
|
||||
.col-12.text-center
|
||||
button.btn.btn-primary(@click='save()') {{ $t("save") }}
|
||||
button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
|
||||
#achievements.standard-page.container(v-show='selectedPage === "achievements"', v-if='user.achievements')
|
||||
.row(v-for='(category, key) in achievements')
|
||||
h2.col-12.text-center {{ $t(key+'Achievs') }}
|
||||
.col-12.col-md-3.text-center(v-for='(achievement, key) in category.achievements')
|
||||
.box.achievement-container(:id='key + "-achievement"', :class='{"achievement-unearned": !achievement.earned}')
|
||||
b-popover(
|
||||
:target="'#' + key + '-achievement'",
|
||||
triggers="hover",
|
||||
placement="top",
|
||||
)
|
||||
h4.popover-content-title {{ achievement.title }}
|
||||
div.popover-content-text(v-html="achievement.text")
|
||||
.achievement(:class='achievement.icon + "2x"', v-if='achievement.earned')
|
||||
.counter.badge.badge-info.stack-count(v-if='achievement.optionalCount') {{achievement.optionalCount}}
|
||||
.achievement.achievement-unearned(class='achievement-unearned2x', v-if='!achievement.earned')
|
||||
hr.col-12
|
||||
.row
|
||||
.col-12.col-md-6(v-if='user.achievements.challenges')
|
||||
.achievement-icon.achievement-karaoke
|
||||
h2.text-center {{$t('challengesWon')}}
|
||||
div(v-for='chal in user.achievements.challenges')
|
||||
span(v-markdown='chal')
|
||||
hr
|
||||
.col-12.col-md-6(v-if='user.achievements.quests')
|
||||
.achievement-icon.achievement-alien
|
||||
h2.text-center {{$t('questsCompleted')}}
|
||||
div(v-for='(value, key) in user.achievements.quests')
|
||||
span {{ content.quests[key].text() }} ({{ value }})
|
||||
profileStats(
|
||||
:user='user',
|
||||
v-show='selectedPage === "stats"',
|
||||
:showAllocation='showAllocation()',
|
||||
v-if='user.preferences')
|
||||
send-gems-modal(:userReceivingGems='userReceivingGems')
|
||||
</template>
|
||||
|
||||
<style lang="scss" >
|
||||
#profile {
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.profile {
|
||||
.member-details {
|
||||
.character-name, small, .small-text {
|
||||
color: #878190;
|
||||
@@ -159,6 +157,20 @@ div
|
||||
color: white;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.progress-container > .progress {
|
||||
background-color: $gray-500 !important;
|
||||
height: 16px !important;
|
||||
vertical-align: middle !important;
|
||||
|
||||
.progress-bar {
|
||||
height: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-name-character {
|
||||
margin-left: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.message-icon svg {
|
||||
@@ -218,7 +230,7 @@ div
|
||||
.header {
|
||||
h1 {
|
||||
color: $purple-200;
|
||||
margin-bottom: 0rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@@ -307,7 +319,65 @@ div
|
||||
}
|
||||
}
|
||||
|
||||
.member-details {
|
||||
.character-name, small, .small-text {
|
||||
color: #878190;
|
||||
}
|
||||
|
||||
.progress-container > .progress {
|
||||
background-color: $gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
.gearTitle {
|
||||
color: white;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.profile-section {
|
||||
h2 {
|
||||
overflow: hidden;
|
||||
size: 16px;
|
||||
color: $gray-50;
|
||||
}
|
||||
h2:after {
|
||||
background-color: $gray-500;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 1px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: 90%;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
|
||||
.info-item {
|
||||
color: $gray-200;
|
||||
size: 14px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.info-item-label {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.info-item-value {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 8px;
|
||||
|
||||
.progress-bar {
|
||||
background-color: $green-10 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -339,6 +409,7 @@ import member from 'assets/svg/member-icon.svg';
|
||||
import edit from 'assets/svg/edit.svg';
|
||||
|
||||
export default {
|
||||
props: ['userId', 'startingPage'],
|
||||
directives: {
|
||||
markdown,
|
||||
},
|
||||
@@ -377,20 +448,9 @@ export default {
|
||||
selectedPage: 'profile',
|
||||
achievements: {},
|
||||
content: Content,
|
||||
user: undefined,
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.$root.$on('habitica:show-profile', (data) => {
|
||||
if (!data.user || !data.startingPage) return;
|
||||
// @TODO: We may be able to remove the need for store
|
||||
this.$store.state.profileUser = data.user;
|
||||
this.$store.state.profileOptions.startingPage = data.startingPage;
|
||||
this.$root.$emit('bv::show::modal', 'profile');
|
||||
});
|
||||
},
|
||||
destroyed () {
|
||||
this.$root.$off('habitica:show-profile');
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
userLoggedIn: 'user.data',
|
||||
@@ -408,34 +468,6 @@ export default {
|
||||
costumeItems () {
|
||||
return this.user.items.gear.costume;
|
||||
},
|
||||
user () {
|
||||
let user = this.userLoggedIn;
|
||||
|
||||
// Reset editing when user is changed. Move to watch or is this good?
|
||||
this.editing = false;
|
||||
this.hero = {};
|
||||
this.adminToolsLoaded = false;
|
||||
|
||||
let profileUser = this.$store.state.profileUser;
|
||||
|
||||
if (profileUser._id && profileUser._id !== this.userLoggedIn._id) {
|
||||
user = profileUser;
|
||||
}
|
||||
|
||||
this.editingProfile.name = user.profile.name;
|
||||
this.editingProfile.imageUrl = user.profile.imageUrl;
|
||||
this.editingProfile.blurb = user.profile.blurb;
|
||||
|
||||
if (!user.achievements.quests) user.achievements.quests = {};
|
||||
if (!user.achievements.challenges) user.achievements.challenges = {};
|
||||
// @TODO: this common code should handle the above
|
||||
this.achievements = achievementsLib.getAchievementsForProfile(user);
|
||||
|
||||
// @TODO For some reason markdown doesn't seem to be handling numbers or maybe undefined?
|
||||
user.profile.blurb = user.profile.blurb ? `${user.profile.blurb}` : '';
|
||||
|
||||
return user;
|
||||
},
|
||||
incentivesProgress () {
|
||||
return this.getIncentivesProgress();
|
||||
},
|
||||
@@ -457,16 +489,50 @@ export default {
|
||||
return this.$store.getters['members:hasClass'](this.userLoggedIn);
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.loadUser();
|
||||
},
|
||||
watch: {
|
||||
startingPageOption () {
|
||||
this.selectedPage = this.$store.state.profileOptions.startingPage;
|
||||
startingPage () {
|
||||
this.selectedPage = this.startingPage;
|
||||
},
|
||||
async userId () {
|
||||
this.loadUser();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async loadUser () {
|
||||
let user = this.userLoggedIn;
|
||||
|
||||
// Reset editing when user is changed. Move to watch or is this good?
|
||||
this.editing = false;
|
||||
this.hero = {};
|
||||
this.adminToolsLoaded = false;
|
||||
|
||||
let profileUserId = this.userId;
|
||||
|
||||
if (profileUserId && profileUserId !== this.userLoggedIn._id) {
|
||||
let response = await this.$store.dispatch('members:fetchMember', { memberId: profileUserId });
|
||||
user = response.data.data;
|
||||
}
|
||||
|
||||
this.editingProfile.name = user.profile.name;
|
||||
this.editingProfile.imageUrl = user.profile.imageUrl;
|
||||
this.editingProfile.blurb = user.profile.blurb;
|
||||
|
||||
if (!user.achievements.quests) user.achievements.quests = {};
|
||||
if (!user.achievements.challenges) user.achievements.challenges = {};
|
||||
// @TODO: this common code should handle the above
|
||||
this.achievements = achievementsLib.getAchievementsForProfile(user);
|
||||
|
||||
// @TODO For some reason markdown doesn't seem to be handling numbers or maybe undefined?
|
||||
user.profile.blurb = user.profile.blurb ? `${user.profile.blurb}` : '';
|
||||
|
||||
this.user = user;
|
||||
},
|
||||
selectPage (page) {
|
||||
this.selectedPage = page;
|
||||
// @TODO: rename this property?
|
||||
this.$store.state.profileOptions.startingPage = page;
|
||||
history.replaceState(null, null, '');
|
||||
},
|
||||
sendMessage () {
|
||||
this.$root.$emit('habitica::new-inbox-message', {
|
||||
@@ -562,7 +628,6 @@ export default {
|
||||
showAllocation () {
|
||||
return this.user._id === this.userLoggedIn._id && this.hasClass;
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
50
website/client/components/userMenu/profileModal.vue
Normal file
50
website/client/components/userMenu/profileModal.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template lang="pug">
|
||||
b-modal#profile(size='lg', :hide-footer="true", :hide-header="true", @hidden="onHidden", @shown="onShown()")
|
||||
profile(:userId='userId', :startingPage='startingPage', style="margin-top:24px;")
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import profile from './profile';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
profile,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
userId: undefined,
|
||||
startingPage: undefined,
|
||||
path: undefined,
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.$root.$on('habitica:show-profile', (data) => {
|
||||
this.userId = data.userId;
|
||||
this.startingPage = data.startingPage || 'profile';
|
||||
this.path = data.path;
|
||||
this.$root.$emit('bv::show::modal', 'profile');
|
||||
});
|
||||
},
|
||||
destroyed () {
|
||||
this.$root.$off('habitica:show-profile');
|
||||
},
|
||||
methods: {
|
||||
onShown () {
|
||||
history.pushState('', null, this.path);
|
||||
},
|
||||
onHidden () {
|
||||
if (this.$route.path !== window.location.pathname) {
|
||||
this.$router.go(-1);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,21 +1,24 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
// @TODO: profile modal is pulled in on the header. So.. seems a little odd to depend on it that way, but for now let's depend
|
||||
.container
|
||||
.standard-page
|
||||
profile(:userId='userId', :startingPage='startingPage')
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import profile from './profile';
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
profile,
|
||||
},
|
||||
mounted () {
|
||||
// @TODO: Do we need this page?
|
||||
this.$root.$emit('habitica:show-profile', {
|
||||
user: {},
|
||||
startingPage: 'profile',
|
||||
});
|
||||
},
|
||||
};
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import profile from './profile';
|
||||
|
||||
export default {
|
||||
props: ['userId', 'startingPage'],
|
||||
components: {
|
||||
profile,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -107,6 +107,15 @@ const router = new VueRouter({
|
||||
{ name: 'logout', path: '/logout', component: Logout },
|
||||
{ name: 'resetPassword', path: '/reset-password', component: RegisterLoginReset, meta: {requiresLogin: false} },
|
||||
{ name: 'tasks', path: '/', component: UserTasks },
|
||||
{
|
||||
name: 'userProfile',
|
||||
path: '/profile/:userId',
|
||||
component: ProfilePage,
|
||||
props: true,
|
||||
children: [
|
||||
{ name: 'userProfilePage', path: ':startingPage', component: ProfilePage },
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/inventory',
|
||||
component: InventoryContainer,
|
||||
@@ -354,6 +363,31 @@ router.beforeEach(function routerGuard (to, from, next) {
|
||||
page: to.name || to.path,
|
||||
});
|
||||
|
||||
if ((to.name === 'userProfile' || to.name === 'userProfilePage') && from.name !== null) {
|
||||
let startingPage = 'profile';
|
||||
if (to.params.startingPage !== undefined) {
|
||||
startingPage = to.params.startingPage;
|
||||
}
|
||||
router.app.$emit('habitica:show-profile', {
|
||||
userId: to.params.userId,
|
||||
startingPage,
|
||||
path: to.path,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if ((to.name === 'stats' || to.name === 'achievements' || to.name === 'profile') && from.name !== null) {
|
||||
router.app.$emit('habitica:show-profile', {
|
||||
startingPage: to.name,
|
||||
path: to.path,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (from.name === 'userProfile' || from.name === 'userProfilePage' || from.name === 'stats' || from.name === 'achievements' || from.name === 'profile') {
|
||||
router.app.$root.$emit('bv::hide::modal', 'profile');
|
||||
}
|
||||
|
||||
next();
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user