mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 22:57:21 +01:00
fix conflicts and remove extra dependency
This commit is contained in:
Matteo Pagliazzi
65
test/client/unit/specs/components/categories/categoryTags.js
Normal file
65
test/client/unit/specs/components/categories/categoryTags.js
Normal file
@@ -0,0 +1,65 @@
|
||||
import {shallow} from '@vue/test-utils';
|
||||
|
||||
import CategoryTags from 'client/components/categories/categoryTags.vue';
|
||||
|
||||
describe('Category Tags', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(function () {
|
||||
wrapper = shallow(CategoryTags, {
|
||||
propsData: {
|
||||
categories: [],
|
||||
},
|
||||
slots: {
|
||||
default: '<p>This is a slot.</p>',
|
||||
},
|
||||
mocks: {
|
||||
$t: (string) => string,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('displays a category', () => {
|
||||
wrapper.setProps({
|
||||
categories: [
|
||||
{
|
||||
name: 'test',
|
||||
},
|
||||
],
|
||||
});
|
||||
expect(wrapper.contains('.category-label')).to.eq(true);
|
||||
expect(wrapper.find('.category-label').text()).to.eq('test');
|
||||
});
|
||||
|
||||
it('displays a habitica official in purple', () => {
|
||||
wrapper.setProps({
|
||||
categories: [
|
||||
{
|
||||
name: 'habitica_official',
|
||||
},
|
||||
],
|
||||
});
|
||||
expect(wrapper.contains('.category-label-purple')).to.eq(true);
|
||||
expect(wrapper.find('.category-label').text()).to.eq('habitica_official');
|
||||
});
|
||||
|
||||
it('displays owner label', () => {
|
||||
wrapper.setProps({
|
||||
owner: true,
|
||||
});
|
||||
expect(wrapper.contains('.category-label-blue')).to.eq(true);
|
||||
expect(wrapper.find('.category-label').text()).to.eq('owned');
|
||||
});
|
||||
|
||||
it('displays member label', () => {
|
||||
wrapper.setProps({
|
||||
member: true,
|
||||
});
|
||||
expect(wrapper.contains('.category-label-green')).to.eq(true);
|
||||
expect(wrapper.find('.category-label').text()).to.eq('joined');
|
||||
});
|
||||
|
||||
it('displays additional content at the end', () => {
|
||||
expect(wrapper.find('p').text()).to.eq('This is a slot.');
|
||||
});
|
||||
});
|
||||
54
test/client/unit/specs/components/sidebarSection.js
Normal file
54
test/client/unit/specs/components/sidebarSection.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import {shallow} from '@vue/test-utils';
|
||||
|
||||
import SidebarSection from 'client/components/sidebarSection.vue';
|
||||
|
||||
describe('Sidebar Section', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(function () {
|
||||
wrapper = shallow(SidebarSection, {
|
||||
propsData: {
|
||||
title: 'Hello World',
|
||||
},
|
||||
slots: {
|
||||
default: '<p>This is a test.</p>',
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('displays title', () => {
|
||||
expect(wrapper.find('h3').text()).to.eq('Hello World');
|
||||
});
|
||||
|
||||
it('displays contents', () => {
|
||||
expect(wrapper.find('.section-body').find('p').text()).to.eq('This is a test.');
|
||||
});
|
||||
|
||||
it('displays tooltip icon', () => {
|
||||
expect(wrapper.contains('.section-info')).to.eq(false);
|
||||
wrapper.setProps({tooltip: 'This is a test'});
|
||||
expect(wrapper.contains('.section-info')).to.eq(true);
|
||||
});
|
||||
|
||||
it('hides contents', () => {
|
||||
expect(wrapper.find('.section-body').element.style.display).to.not.eq('none');
|
||||
wrapper.find('.section-toggle').trigger('click');
|
||||
expect(wrapper.find('.section-body').element.style.display).to.eq('none');
|
||||
wrapper.find('.section-toggle').trigger('click');
|
||||
expect(wrapper.find('.section-body').element.style.display).to.not.eq('none');
|
||||
});
|
||||
|
||||
it('can hide contents by default', () => {
|
||||
wrapper = shallow(SidebarSection, {
|
||||
propsData: {
|
||||
title: 'Hello World',
|
||||
show: false,
|
||||
},
|
||||
slots: {
|
||||
default: '<p>This is a test.</p>',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.section-body').element.style.display).to.eq('none');
|
||||
});
|
||||
});
|
||||
@@ -15,7 +15,7 @@
|
||||
background-color: $gray-600;
|
||||
padding: .5em;
|
||||
display: inline-block;
|
||||
margin-right: .5em;
|
||||
margin: .25em;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.33;
|
||||
@@ -23,6 +23,21 @@
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.category-label-purple {
|
||||
color: white;
|
||||
background: $purple-300;
|
||||
}
|
||||
|
||||
.category-label-blue {
|
||||
color: white;
|
||||
background: $blue-50;
|
||||
}
|
||||
|
||||
.category-label-green {
|
||||
color: white;
|
||||
background: $green-50;
|
||||
}
|
||||
|
||||
.category-select {
|
||||
border-radius: 2px;
|
||||
background-color: $white;
|
||||
|
||||
34
website/client/components/categories/categoryTags.vue
Normal file
34
website/client/components/categories/categoryTags.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template lang="pug">
|
||||
.categories
|
||||
span.category-label.category-label-blue(v-if='owner')
|
||||
| {{ $t('owned') }}
|
||||
span.category-label.category-label-green(v-if='member')
|
||||
| {{ $t('joined') }}
|
||||
span.category-label(
|
||||
v-for='category in categories',
|
||||
:class="{'category-label-purple':isOfficial(category)}"
|
||||
)
|
||||
| {{ $t(category.name) }}
|
||||
slot
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
categories: {
|
||||
required: true,
|
||||
},
|
||||
owner: {
|
||||
default: false,
|
||||
},
|
||||
member: {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isOfficial (category) {
|
||||
return category.name === 'habitica_official';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -6,11 +6,15 @@
|
||||
challenge-member-progress-modal(:memberId='progressMemberId', :challengeId='challenge._id')
|
||||
.col-12.col-md-8.standard-page
|
||||
.row
|
||||
.col-12.col-md-8
|
||||
.col-12.col-md-6
|
||||
h1(v-markdown='challenge.name')
|
||||
div
|
||||
strong(v-once) {{$t('createdBy')}}:
|
||||
span(v-if='challenge.leader && challenge.leader.profile') {{challenge.leader.profile.name}}
|
||||
span.mr-1.ml-0
|
||||
strong(v-once) {{ $t('createdBy') }}:
|
||||
user-link.mx-1(:user="challenge.leader")
|
||||
span.mr-1.ml-0(v-if="challenge.group && challenge.group.name !== 'Tavern'")
|
||||
strong(v-once) {{ $t(challenge.group.type) }}:
|
||||
group-link.mx-1(:group="challenge.group")
|
||||
// @TODO: make challenge.author a variable inside the createdBy string (helps with RTL languages)
|
||||
// @TODO: Implement in V2 strong.margin-left(v-once)
|
||||
.svg-icon.calendar-icon(v-html="icons.calendarIcon")
|
||||
@@ -19,7 +23,7 @@
|
||||
// span {{challenge.endDate}}
|
||||
.tags
|
||||
span.tag(v-for='tag in challenge.tags') {{tag}}
|
||||
.col-12.col-md-4
|
||||
.col-12.col-md-6.text-right
|
||||
.box(@click="showMemberModal()")
|
||||
.svg-icon.member-icon(v-html="icons.memberIcon")
|
||||
| {{challenge.memberCount}}
|
||||
@@ -29,10 +33,10 @@
|
||||
| {{challenge.prize}}
|
||||
.details(v-once) {{$t('prize')}}
|
||||
.row.challenge-actions
|
||||
.col-12.col-md-7.offset-md-5
|
||||
span.view-progress
|
||||
strong {{ $t('viewProgressOf') }}
|
||||
.col-12.col-md-6
|
||||
strong.view-progress {{ $t('viewProgressOf') }}
|
||||
member-search-dropdown(:text="$t('selectParticipant')", :members='members', :challengeId='challengeId', @member-selected='openMemberProgressModal')
|
||||
.col-12.col-md-6.text-right
|
||||
span(v-if='isLeader || isAdmin')
|
||||
b-dropdown.create-dropdown(:text="$t('addTaskToChallenge')", :variant="'success'")
|
||||
b-dropdown-item(v-for="type in columns", :key="type", @click="createTask(type)")
|
||||
@@ -56,24 +60,23 @@
|
||||
v-on:editTask="editTask",
|
||||
v-if='tasksByType[column].length > 0')
|
||||
.col-12.col-md-4.sidebar.standard-page
|
||||
.acitons
|
||||
div(v-if='canJoin')
|
||||
button.btn.btn-success(v-once, @click='joinChallenge()') {{$t('joinChallenge')}}
|
||||
div(v-if='isMember')
|
||||
button.btn.btn-danger(v-once, @click='leaveChallenge()') {{$t('leaveChallenge')}}
|
||||
div(v-if='isLeader || isAdmin')
|
||||
button.btn.btn-secondary(v-once, @click='edit()') {{$t('editChallenge')}}
|
||||
div(v-if='isLeader || isAdmin')
|
||||
button.btn.btn-danger(v-once, @click='closeChallenge()') {{$t('endChallenge')}}
|
||||
div(v-if='isLeader || isAdmin')
|
||||
button.btn.btn-secondary(v-once, @click='exportChallengeCsv()') {{$t('exportChallengeCsv')}}
|
||||
div(v-if='isLeader || isAdmin')
|
||||
button.btn.btn-secondary(v-once, @click='cloneChallenge()') {{$t('clone')}}
|
||||
.description-section
|
||||
h2 {{$t('challengeSummary')}}
|
||||
p(v-markdown='challenge.summary')
|
||||
h2 {{$t('challengeDescription')}}
|
||||
p(v-markdown='challenge.description')
|
||||
.button-container(v-if='canJoin')
|
||||
button.btn.btn-success(v-once, @click='joinChallenge()') {{$t('joinChallenge')}}
|
||||
.button-container(v-if='isLeader || isAdmin')
|
||||
button.btn.btn-primary(v-once, @click='edit()') {{$t('editChallenge')}}
|
||||
.button-container(v-if='isLeader || isAdmin')
|
||||
button.btn.btn-primary(v-once, @click='cloneChallenge()') {{$t('clone')}}
|
||||
.button-container(v-if='isLeader || isAdmin')
|
||||
button.btn.btn-primary(v-once, @click='exportChallengeCsv()') {{$t('exportChallengeCsv')}}
|
||||
.button-container(v-if='isLeader || isAdmin')
|
||||
button.btn.btn-danger(v-once, @click='closeChallenge()') {{$t('endChallenge')}}
|
||||
div
|
||||
sidebar-section(:title="$t('challengeSummary')")
|
||||
p(v-markdown='challenge.summary')
|
||||
sidebar-section(:title="$t('challengeDescription')")
|
||||
p(v-markdown='challenge.description')
|
||||
.text-center(v-if='isMember')
|
||||
button.btn.btn-danger(v-once, @click='leaveChallenge()') {{$t('leaveChallenge')}}
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@@ -91,6 +94,14 @@
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin-bottom: 1em;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-icon {
|
||||
width: 12px;
|
||||
display: inline-block;
|
||||
@@ -138,23 +149,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.acitons {
|
||||
width: 100%;
|
||||
|
||||
div, button {
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: .5em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.description-section {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.challenge-actions {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 2em;
|
||||
|
||||
.view-progress {
|
||||
margin-right: .5em;
|
||||
@@ -162,14 +163,6 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.create-dropdown button {
|
||||
width: 100%;
|
||||
font-size: 16px !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const TASK_KEYS_TO_REMOVE = ['_id', 'completed', 'date', 'dateCompleted', 'history', 'id', 'streak', 'createdAt', 'challenge'];
|
||||
|
||||
@@ -189,7 +182,9 @@ import challengeModal from './challengeModal';
|
||||
import challengeMemberProgressModal from './challengeMemberProgressModal';
|
||||
import challengeMemberSearchMixin from 'client/mixins/challengeMemberSearch';
|
||||
import leaveChallengeModal from './leaveChallengeModal';
|
||||
|
||||
import sidebarSection from '../sidebarSection';
|
||||
import userLink from '../userLink';
|
||||
import groupLink from '../groupLink';
|
||||
import taskDefaults from 'common/script/libs/taskDefaults';
|
||||
|
||||
import gemIcon from 'assets/svg/gem.svg';
|
||||
@@ -208,8 +203,11 @@ export default {
|
||||
challengeModal,
|
||||
challengeMemberProgressModal,
|
||||
memberSearchDropdown,
|
||||
sidebarSection,
|
||||
TaskColumn: Column,
|
||||
TaskModal,
|
||||
userLink,
|
||||
groupLink,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -1,187 +1,278 @@
|
||||
<template lang="pug">
|
||||
.card
|
||||
.row
|
||||
router-link.col-12(:to="{ name: 'challenge', params: { challengeId: challenge._id } }")
|
||||
h3(v-markdown='challenge.name')
|
||||
.row
|
||||
.col-6
|
||||
div.details
|
||||
span
|
||||
.svg-icon.member-icon(v-html="icons.memberIcon")
|
||||
span {{challenge.memberCount}}
|
||||
// @TODO: Add in V2
|
||||
span
|
||||
.svg-icon.calendar-icon(v-html="icons.calendarIcon")
|
||||
span
|
||||
strong End Date:
|
||||
.challenge
|
||||
.challenge-prize
|
||||
.number
|
||||
span.svg-icon(v-html="icons.gemIcon")
|
||||
span.value {{challenge.prize}}
|
||||
.label {{ $t('challengePrize') }}
|
||||
.challenge-header
|
||||
router-link(
|
||||
:to="{ name: 'challenge', params: { challengeId: challenge._id } }"
|
||||
)
|
||||
h3.challenge-title(v-markdown='challenge.name')
|
||||
.owner(v-if="fullLayout")
|
||||
.owner-item
|
||||
strong {{ $t('createdBy') }}:
|
||||
user-link.mx-1(:user="challenge.leader")
|
||||
.owner-item(v-if="challenge.group && !isTavern(challenge.group)")
|
||||
strong {{ $t(challenge.group.type) }}:
|
||||
group-link.mx-1(:group="challenge.group")
|
||||
.meta
|
||||
.meta-item
|
||||
.svg-icon.user-icon(v-html="icons.memberIcon")
|
||||
span.mx-1 {{challenge.memberCount}}
|
||||
// @TODO: add end date
|
||||
.meta-item
|
||||
.svg-icon(v-html="icons.calendarIcon")
|
||||
strong.mx-1 {{ $t('endDate')}}:
|
||||
span {{challenge.endDate}}
|
||||
div.tags
|
||||
span.tag(v-for='tag in challenge.tags') {{tag}}
|
||||
.col-6.prize-section
|
||||
div
|
||||
span.svg-icon.gem(v-html="icons.gemIcon")
|
||||
span.prize {{challenge.prize}}
|
||||
div Challenge Prize
|
||||
.row.description
|
||||
.col-12
|
||||
| {{challenge.summary}}
|
||||
.well.row
|
||||
.col-3
|
||||
.count-details
|
||||
.svg-icon.habit-icon(v-html="icons.habitIcon")
|
||||
span.count {{challenge.tasksOrder.habits.length}}
|
||||
div {{$t('habit')}}
|
||||
.col-3
|
||||
.count-details
|
||||
.svg-icon.daily-icon(v-html="icons.dailyIcon")
|
||||
span.count {{challenge.tasksOrder.dailys.length}}
|
||||
div {{$t('daily')}}
|
||||
.col-3
|
||||
.count-details
|
||||
.svg-icon.todo-icon(v-html="icons.todoIcon")
|
||||
span.count {{challenge.tasksOrder.todos.length}}
|
||||
div {{$t('todo')}}
|
||||
.col-3
|
||||
.count-details
|
||||
.svg-icon.reward-icon(v-html="icons.rewardIcon")
|
||||
span.count {{challenge.tasksOrder.rewards.length}}
|
||||
div {{$t('reward')}}
|
||||
category-tags.challenge-categories(
|
||||
:categories="challenge.categories",
|
||||
:owner="isOwner",
|
||||
:member="isMember",
|
||||
v-once
|
||||
)
|
||||
.challenge-description {{challenge.summary}}
|
||||
.well-wrapper(v-if="fullLayout")
|
||||
.well
|
||||
div(v-for="task in tasksData", :class="{'muted': task.value === 0}", v-once)
|
||||
.number
|
||||
.svg-icon(v-html="task.icon", :class="task.label + '-icon'")
|
||||
span.value {{ task.value }}
|
||||
.label {{$t(task.label)}}
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
// Have to use this, because v-markdown creates p element in h3. Scoping doesn't work with it.
|
||||
.challenge-title > p {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
max-height: 3em;
|
||||
line-height: 1.5em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.card {
|
||||
.challenge {
|
||||
background-color: $white;
|
||||
box-shadow: 0 2px 2px 0 $gray-600, 0 1px 4px 0 $gray-600;
|
||||
padding: 2em;
|
||||
height: 350px;
|
||||
box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
|
||||
margin-bottom: 1em;
|
||||
border-radius: 4px;
|
||||
padding-bottom: .5em;
|
||||
|
||||
.gem {
|
||||
width: 32px;
|
||||
.number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.svg-icon {
|
||||
margin-top: -.2em;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-left: .5em;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.member-icon {
|
||||
.label {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.challenge-prize {
|
||||
text-align: center;
|
||||
color: $gems-color;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
padding: 1em 1.5em;
|
||||
margin-left: 1em;
|
||||
background: #eefaf6;
|
||||
border-bottom-left-radius: 4px;
|
||||
|
||||
.svg-icon {
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.challenge-header,
|
||||
.well-wrapper {
|
||||
padding: 1em 1.5em;
|
||||
}
|
||||
|
||||
.challenge-header {
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
|
||||
.owner {
|
||||
margin: 1em 0 .5em;
|
||||
}
|
||||
|
||||
.meta, .owner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.meta-item, .owner-item {
|
||||
display: inline-flex;
|
||||
color: $gray-200;
|
||||
align-items: center;
|
||||
margin-right: 1em;
|
||||
white-space: nowrap;
|
||||
|
||||
.svg-icon {
|
||||
color: $gray-300;
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.challenge-categories {
|
||||
clear: right;
|
||||
display: flex;
|
||||
padding: 0 1.5em 1em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
width: 20px !important;
|
||||
}
|
||||
|
||||
.habit-icon {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.todo-icon {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.calendar-icon {
|
||||
width: 14px;
|
||||
.daily-icon {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
.reward-icon {
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.challenge-description {
|
||||
color: $gray-200;
|
||||
margin-right: 1em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.details {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.tags {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.tag {
|
||||
border-radius: 30px;
|
||||
background-color: $gray-600;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.prize {
|
||||
color: $gray-100;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.prize-section {
|
||||
text-align: right;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: $gray-200;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.well-wrapper {
|
||||
padding: .8em;
|
||||
margin: 0 1.5em;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.well {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
background-color: $gray-700;
|
||||
text-align: center;
|
||||
padding: 2em;
|
||||
border-radius: 4px;
|
||||
margin-left: .2em;
|
||||
margin-right: .2em;
|
||||
padding: 1em;
|
||||
border-radius: .25em;
|
||||
|
||||
.svg-icon {
|
||||
display: inline-block;
|
||||
margin-left: .5em;
|
||||
> div {
|
||||
color: $gray-200;
|
||||
|
||||
.svg-icon {
|
||||
color: $gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
.habit-icon {
|
||||
width: 30px;
|
||||
}
|
||||
> div.muted {
|
||||
color: $gray-400;
|
||||
|
||||
.todo-icon {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.daily-icon {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.reward-icon {
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.count-details span {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 20px;
|
||||
margin-left: .5em;
|
||||
.svg-icon {
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import gemIcon from 'assets/svg/gem.svg';
|
||||
import memberIcon from 'assets/svg/member-icon.svg';
|
||||
import calendarIcon from 'assets/svg/calendar.svg';
|
||||
import habitIcon from 'assets/svg/habit.svg';
|
||||
import todoIcon from 'assets/svg/todo.svg';
|
||||
import dailyIcon from 'assets/svg/daily.svg';
|
||||
import rewardIcon from 'assets/svg/reward.svg';
|
||||
import markdownDirective from 'client/directives/markdown';
|
||||
import { TAVERN_ID } from '../../../common/script/constants';
|
||||
import userLink from '../userLink';
|
||||
import groupLink from '../groupLink';
|
||||
import categoryTags from '../categories/categoryTags';
|
||||
import markdownDirective from 'client/directives/markdown';
|
||||
import {mapState} from 'client/libs/store';
|
||||
|
||||
export default {
|
||||
props: ['challenge'],
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
gemIcon,
|
||||
memberIcon,
|
||||
calendarIcon,
|
||||
habitIcon,
|
||||
todoIcon,
|
||||
dailyIcon,
|
||||
rewardIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
directives: {
|
||||
markdown: markdownDirective,
|
||||
},
|
||||
};
|
||||
import gemIcon from 'assets/svg/gem.svg';
|
||||
import memberIcon from 'assets/svg/member-icon.svg';
|
||||
import calendarIcon from 'assets/svg/calendar.svg';
|
||||
import habitIcon from 'assets/svg/habit.svg';
|
||||
import todoIcon from 'assets/svg/todo.svg';
|
||||
import dailyIcon from 'assets/svg/daily.svg';
|
||||
import rewardIcon from 'assets/svg/reward.svg';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
challenge: {
|
||||
required: true,
|
||||
},
|
||||
fullLayout: {
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
userLink,
|
||||
groupLink,
|
||||
categoryTags,
|
||||
},
|
||||
directives: {
|
||||
markdown: markdownDirective,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
gemIcon,
|
||||
memberIcon,
|
||||
calendarIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
isOwner () {
|
||||
return this.challenge.leader && this.challenge.leader._id === this.user._id;
|
||||
},
|
||||
isMember () {
|
||||
return this.user.challenges.indexOf(this.challenge._id) !== -1;
|
||||
},
|
||||
tasksData () {
|
||||
return [
|
||||
{
|
||||
icon: habitIcon,
|
||||
label: 'habit',
|
||||
value: this.challenge.tasksOrder.habits.length,
|
||||
},
|
||||
{
|
||||
icon: dailyIcon,
|
||||
label: 'daily',
|
||||
value: this.challenge.tasksOrder.dailys.length,
|
||||
},
|
||||
{
|
||||
icon: todoIcon,
|
||||
label: 'todo',
|
||||
value: this.challenge.tasksOrder.todos.length,
|
||||
},
|
||||
{
|
||||
icon: rewardIcon,
|
||||
label: 'reward',
|
||||
value: this.challenge.tasksOrder.rewards.length,
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isTavern (group) {
|
||||
return group._id === TAVERN_ID;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
.svg-icon.positive-icon(v-html="icons.positiveIcon")
|
||||
span(v-once) {{$t('createChallenge')}}
|
||||
.row
|
||||
.col-12.col-md-6(v-for='challenge in filteredChallenges', v-if='!memberOf(challenge)')
|
||||
.col-12.col-md-6(v-for='challenge in filteredChallenges')
|
||||
challenge-item(:challenge='challenge')
|
||||
.row
|
||||
.col-12.text-center
|
||||
@@ -105,9 +105,6 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
memberOf (challenge) {
|
||||
return this.user.challenges.indexOf(challenge._id) !== -1;
|
||||
},
|
||||
updateSearch (eventData) {
|
||||
this.search = eventData.searchTerm;
|
||||
this.page = 0;
|
||||
|
||||
@@ -6,131 +6,87 @@ div
|
||||
.svg-icon.challenge-icon(v-html="icons.challengeIcon")
|
||||
h4(v-once) {{ $t('haveNoChallenges') }}
|
||||
p(v-once) {{ $t('challengeDetails') }}
|
||||
router-link.title(:to="{ name: 'challenge', params: { challengeId: challenge._id } }", v-for='challenge in challenges',:key='challenge._id')
|
||||
.col-12.challenge-item
|
||||
.row
|
||||
.col-9
|
||||
router-link.title(:to="{ name: 'challenge', params: { challengeId: challenge._id } }")
|
||||
strong(v-markdown='challenge.name')
|
||||
p(v-markdown='challenge.summary || challenge.name')
|
||||
div
|
||||
.svg-icon.member-icon(v-html="icons.memberIcon")
|
||||
.member-count {{challenge.memberCount}}
|
||||
.col-3
|
||||
div
|
||||
span.svg-icon.gem(v-html="icons.gemIcon")
|
||||
span.prize {{challenge.prize}}
|
||||
div.prize-title Prize
|
||||
.col-12.text-center
|
||||
button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
|
||||
button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
|
||||
template(v-else)
|
||||
challenge-item(v-for='challenge in challenges',:challenge='challenge',:key='challenge._id',:fullLayout='false')
|
||||
.col-12.text-center
|
||||
button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
color: #4E4A57;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
.member-icon {
|
||||
display: inline-block;
|
||||
width: 20px !important;
|
||||
vertical-align: bottom;
|
||||
height: 16px !important;
|
||||
}
|
||||
|
||||
.member-count {
|
||||
width: 21px;
|
||||
height: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
color: #878190;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.challenge-icon {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin-bottom: 2em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gem {
|
||||
width: 26px;
|
||||
vertical-align: bottom;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.prize {
|
||||
color: #686274;
|
||||
font-size: 18px;
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.prize-title {
|
||||
padding-left: .7em;
|
||||
}
|
||||
|
||||
.challenge-item {
|
||||
border-radius: 2px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
|
||||
margin-bottom: 1em;
|
||||
.no-quest-section {
|
||||
padding: 2em;
|
||||
color: $gray-300;
|
||||
|
||||
h4 {
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import challengeModal from './challengeModal';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import markdownDirective from 'client/directives/markdown';
|
||||
import challengeModal from './challengeModal';
|
||||
import {mapState} from 'client/libs/store';
|
||||
import markdownDirective from 'client/directives/markdown';
|
||||
|
||||
import challengeIcon from 'assets/svg/challenge.svg';
|
||||
import gemIcon from 'assets/svg/gem.svg';
|
||||
import memberIcon from 'assets/svg/member-icon.svg';
|
||||
import challengeItem from './challengeItem';
|
||||
import challengeIcon from 'assets/svg/challenge.svg';
|
||||
|
||||
export default {
|
||||
props: ['groupId'],
|
||||
components: {
|
||||
challengeModal,
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
challenges: [],
|
||||
icons: Object.freeze({
|
||||
challengeIcon,
|
||||
memberIcon,
|
||||
gemIcon,
|
||||
}),
|
||||
groupIdForChallenges: '',
|
||||
};
|
||||
},
|
||||
directives: {
|
||||
markdown: markdownDirective,
|
||||
},
|
||||
mounted () {
|
||||
this.loadChallenges();
|
||||
},
|
||||
watch: {
|
||||
async groupId () {
|
||||
export default {
|
||||
props: ['groupId'],
|
||||
components: {
|
||||
challengeModal,
|
||||
challengeItem,
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
challenges: [],
|
||||
icons: Object.freeze({
|
||||
challengeIcon,
|
||||
}),
|
||||
groupIdForChallenges: '',
|
||||
};
|
||||
},
|
||||
directives: {
|
||||
markdown: markdownDirective,
|
||||
},
|
||||
mounted () {
|
||||
this.loadChallenges();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async loadChallenges () {
|
||||
this.groupIdForChallenges = this.groupId;
|
||||
if (this.groupId === 'party' && this.user.party._id) this.groupIdForChallenges = this.user.party._id;
|
||||
this.challenges = await this.$store.dispatch('challenges:getGroupChallenges', {groupId: this.groupIdForChallenges});
|
||||
watch: {
|
||||
async groupId () {
|
||||
this.loadChallenges();
|
||||
},
|
||||
},
|
||||
createChallenge () {
|
||||
this.$root.$emit('bv::show::modal', 'challenge-modal');
|
||||
methods: {
|
||||
async loadChallenges () {
|
||||
this.groupIdForChallenges = this.groupId;
|
||||
if (this.groupId === 'party' && this.user.party._id) this.groupIdForChallenges = this.user.party._id;
|
||||
this.challenges = await this.$store.dispatch('challenges:getGroupChallenges', {groupId: this.groupIdForChallenges});
|
||||
},
|
||||
createChallenge () {
|
||||
this.$root.$emit('bv::show::modal', 'challenge-modal');
|
||||
},
|
||||
challengeCreated (challenge) {
|
||||
if (challenge.group._id !== this.groupIdForChallenges) return;
|
||||
this.challenges.push(challenge);
|
||||
},
|
||||
},
|
||||
challengeCreated (challenge) {
|
||||
if (challenge.group._id !== this.groupIdForChallenges) return;
|
||||
this.challenges.push(challenge);
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -63,8 +63,6 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'client/libs/store';
|
||||
|
||||
import Sidebar from './sidebar';
|
||||
import ChallengeItem from './challengeItem';
|
||||
import challengeModal from './challengeModal';
|
||||
@@ -111,24 +109,18 @@ export default {
|
||||
},
|
||||
],
|
||||
search: '',
|
||||
filters: {
|
||||
roles: ['participating'], // This is required for my challenges
|
||||
},
|
||||
filters: {},
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.loadchallanges();
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
filteredChallenges () {
|
||||
let search = this.search;
|
||||
let filters = this.filters;
|
||||
let user = this.$store.state.user.data;
|
||||
|
||||
// Always filter by member on this page:
|
||||
filters.roles = ['participating'];
|
||||
|
||||
// @TODO: Move this to the server
|
||||
return this.challenges.filter((challenge) => {
|
||||
return this.filterChallenge(challenge, filters, search, user);
|
||||
@@ -136,9 +128,6 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
memberOf (challenge) {
|
||||
return this.user.challenges.indexOf(challenge._id) !== -1;
|
||||
},
|
||||
updateSearch (eventData) {
|
||||
this.search = eventData.searchTerm;
|
||||
},
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
form
|
||||
h2(v-once) {{ $t('filter') }}
|
||||
.form-group
|
||||
h3 Category
|
||||
h3 {{ $t('category') }}
|
||||
.form-check(
|
||||
v-for="group in categoryOptions",
|
||||
:key="group.key",
|
||||
@@ -14,7 +14,7 @@
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters", :id="group.key")
|
||||
label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
|
||||
.form-group(v-if='$route.name !== "findChallenges"')
|
||||
h3 Membership
|
||||
h3 {{ $t('membership') }}
|
||||
.form-check(
|
||||
v-for="group in roleOptions",
|
||||
:key="group.key",
|
||||
@@ -23,7 +23,7 @@
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters", :id="group.key")
|
||||
label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
|
||||
.form-group
|
||||
h3 Ownership
|
||||
h3 {{ $t('ownership') }}
|
||||
.form-check(
|
||||
v-for="group in ownershipOptions",
|
||||
:key="group.key",
|
||||
|
||||
25
website/client/components/groupLink.vue
Normal file
25
website/client/components/groupLink.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template lang="pug">
|
||||
b-link(
|
||||
v-if='group',
|
||||
@click.prevent='goToGroup'
|
||||
) {{group.name}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TAVERN_ID } from '../../common/script/constants';
|
||||
|
||||
export default {
|
||||
props: ['group'],
|
||||
methods: {
|
||||
goToGroup () {
|
||||
if (this.group.type === 'party') {
|
||||
this.$router.push({name: 'party'});
|
||||
} else if (this.group._id === TAVERN_ID) {
|
||||
this.$router.push({name: 'tavern'});
|
||||
} else {
|
||||
this.$router.push({name: 'guild', params: {groupId: this.group._id}});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -9,8 +9,10 @@
|
||||
.row
|
||||
.col-12.col-md-6.title-details
|
||||
h1 {{group.name}}
|
||||
strong.float-left(v-once) {{$t('groupLeader')}}
|
||||
span.leader.float-left(v-if='group.leader.profile', @click='showMemberProfile(group.leader)') : {{group.leader.profile.name}}
|
||||
div
|
||||
span.mr-1.ml-0
|
||||
strong(v-once) {{$t('groupLeader')}}:
|
||||
user-link.mx-1(:user="group.leader")
|
||||
.col-12.col-md-6
|
||||
.row.icon-row
|
||||
.col-4.offset-4(v-bind:class="{ 'offset-8': isParty }")
|
||||
@@ -61,47 +63,16 @@
|
||||
// @TODO: V2 button.btn.btn-primary(v-once, v-if='!isLeader') {{$t('messageGuildLeader')}} // Suggest making the button visible to the leader too - useful for them to test how the feature works or to send a note to themself. -- Alys
|
||||
.button-container
|
||||
// @TODO: V2 button.btn.btn-primary(v-once, v-if='isMember && !isParty') {{$t('donateGems')}} // Suggest removing the isMember restriction - it's okay if non-members donate to a public guild. Also probably allow it for parties if parties can buy imagery. -- Alys
|
||||
.section-header(v-if='isParty')
|
||||
quest-sidebar-section(@toggle='toggleQuestSection', :show='sections.quest', :group='group')
|
||||
.section-header(v-if='!isParty')
|
||||
.row
|
||||
.col-10
|
||||
h3(v-once) {{ $t('guildSummary') }}
|
||||
.col-2
|
||||
.toggle-up(@click="sections.summary = !sections.summary", v-if="sections.summary")
|
||||
.svg-icon(v-html="icons.upIcon")
|
||||
.toggle-down(@click="sections.summary = !sections.summary", v-if="!sections.summary")
|
||||
.svg-icon(v-html="icons.downIcon")
|
||||
.section(v-if="sections.summary")
|
||||
div
|
||||
quest-sidebar-section(:group='group', v-if='isParty')
|
||||
sidebar-section(:title="$t('guildSummary')", v-if='!isParty')
|
||||
p(v-markdown='group.summary')
|
||||
.section-header
|
||||
.row
|
||||
.col-10
|
||||
h3 {{ $t('groupDescription') }}
|
||||
.col-2
|
||||
.toggle-up(@click="sections.description = !sections.description", v-if="sections.description")
|
||||
.svg-icon(v-html="icons.upIcon")
|
||||
.toggle-down(@click="sections.description = !sections.description", v-if="!sections.description")
|
||||
.svg-icon(v-html="icons.downIcon")
|
||||
.section(v-if="sections.description")
|
||||
sidebar-section(:title="$t('groupDescription')")
|
||||
p(v-markdown='group.description')
|
||||
.section-header.challenge
|
||||
.row
|
||||
.col-10.information-header
|
||||
h3(v-once)
|
||||
| {{ $t('challenges') }}
|
||||
#groupPrivateDescOrChallengeInfo.icon.tooltip-wrapper(:title="isParty ? $t('challengeDetails') : $t('privateDescription')")
|
||||
.svg-icon(v-html='icons.information')
|
||||
b-tooltip(
|
||||
:title="isParty ? $t('challengeDetails') : $t('privateDescription')",
|
||||
target="groupPrivateDescOrChallengeInfo",
|
||||
)
|
||||
.col-2
|
||||
.toggle-up(@click="sections.challenges = !sections.challenges", v-if="sections.challenges")
|
||||
.svg-icon(v-html="icons.upIcon")
|
||||
.toggle-down(@click="sections.challenges = !sections.challenges", v-if="!sections.challenges")
|
||||
.svg-icon(v-html="icons.downIcon")
|
||||
.section(v-if="sections.challenges")
|
||||
sidebar-section(
|
||||
:title="$t('challenges')",
|
||||
:tooltip="isParty ? $t('challengeDetails') : $t('privateDescription')"
|
||||
)
|
||||
group-challenges(:groupId='searchId')
|
||||
div.text-center
|
||||
button.btn.btn-danger(v-if='isMember', @click='clickLeave()') {{ isParty ? $t('leaveParty') : $t('leaveGroup') }}
|
||||
@@ -124,10 +95,6 @@
|
||||
color: $purple-200;
|
||||
}
|
||||
|
||||
.leader:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin-bottom: 1em;
|
||||
|
||||
@@ -270,29 +237,6 @@
|
||||
margin-right: .3em;
|
||||
}
|
||||
|
||||
.information-header {
|
||||
h3, .tooltip-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip-wrapper {
|
||||
width: 15px;
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
border-top: 1px solid #e1e0e3;
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.section-header.challenge {
|
||||
border-bottom: 1px solid #e1e0e3;
|
||||
margin-bottom: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.hr {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
@@ -334,6 +278,8 @@ import groupGemsModal from 'client/components/groups/groupGemsModal';
|
||||
import questSidebarSection from 'client/components/groups/questSidebarSection';
|
||||
import markdownDirective from 'client/directives/markdown';
|
||||
import communityGuidelines from './communityGuidelines';
|
||||
import sidebarSection from '../sidebarSection';
|
||||
import userLink from '../userLink';
|
||||
|
||||
import deleteIcon from 'assets/svg/delete.svg';
|
||||
import copyIcon from 'assets/svg/copy.svg';
|
||||
@@ -342,10 +288,7 @@ import likedIcon from 'assets/svg/liked.svg';
|
||||
import reportIcon from 'assets/svg/report.svg';
|
||||
import gemIcon from 'assets/svg/gem.svg';
|
||||
import questIcon from 'assets/svg/quest.svg';
|
||||
import informationIcon from 'assets/svg/information.svg';
|
||||
import questBackground from 'assets/svg/quest-background-border.svg';
|
||||
import upIcon from 'assets/svg/up.svg';
|
||||
import downIcon from 'assets/svg/down.svg';
|
||||
import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge-small.svg';
|
||||
import silverGuildBadgeIcon from 'assets/svg/silver-guild-badge-small.svg';
|
||||
import bronzeGuildBadgeIcon from 'assets/svg/bronze-guild-badge-small.svg';
|
||||
@@ -365,6 +308,8 @@ export default {
|
||||
groupGemsModal,
|
||||
questSidebarSection,
|
||||
communityGuidelines,
|
||||
sidebarSection,
|
||||
userLink,
|
||||
},
|
||||
directives: {
|
||||
markdown: markdownDirective,
|
||||
@@ -381,22 +326,13 @@ export default {
|
||||
gem: gemIcon,
|
||||
liked: likedIcon,
|
||||
questIcon,
|
||||
information: informationIcon,
|
||||
questBackground,
|
||||
upIcon,
|
||||
downIcon,
|
||||
goldGuildBadgeIcon,
|
||||
silverGuildBadgeIcon,
|
||||
bronzeGuildBadgeIcon,
|
||||
}),
|
||||
members: [],
|
||||
selectedQuest: {},
|
||||
sections: {
|
||||
quest: true,
|
||||
summary: true,
|
||||
description: true,
|
||||
challenges: true,
|
||||
},
|
||||
chat: {
|
||||
submitDisable: false,
|
||||
submitTimeout: null,
|
||||
@@ -714,19 +650,9 @@ export default {
|
||||
}
|
||||
// $rootScope.$state.go('options.inventory.quests');
|
||||
},
|
||||
async showMemberProfile (leader) {
|
||||
let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: leader._id });
|
||||
this.$root.$emit('habitica:show-profile', {
|
||||
user: heroDetails.data.data,
|
||||
startingPage: 'profile',
|
||||
});
|
||||
},
|
||||
showGroupGems () {
|
||||
this.$root.$emit('bv::show::modal', 'group-gems-modal');
|
||||
},
|
||||
toggleQuestSection () {
|
||||
this.sections.quest = !this.sections.quest;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -24,9 +24,7 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
|
||||
span.count {{ guild.balance * 4 }}
|
||||
div.guild-bank(v-if='displayGemBank', v-once) {{$t('guildBank')}}
|
||||
.row
|
||||
.col-md-12
|
||||
.category-label(v-for="category in guild.categorySlugs")
|
||||
| {{$t(category)}}
|
||||
category-tags.col-md-12(:categories="guild.categories", :owner="isOwner", v-once)
|
||||
span.recommend-text(v-if='showSuggested(guild._id)') Suggested because you’re new to Habitica.
|
||||
</template>
|
||||
|
||||
@@ -128,6 +126,7 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import categoryTags from '../categories/categoryTags';
|
||||
import groupUtilities from 'client/mixins/groupsUtilities';
|
||||
import markdown from 'client/directives/markdown';
|
||||
import gemIcon from 'assets/svg/gem.svg';
|
||||
@@ -142,8 +141,14 @@ export default {
|
||||
markdown,
|
||||
},
|
||||
props: ['guild', 'displayLeave', 'displayGemBank'],
|
||||
components: {
|
||||
categoryTags,
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
isOwner () {
|
||||
return this.guild.leader && this.guild.leader === this.user._id;
|
||||
},
|
||||
isMember () {
|
||||
return this.isMemberOfGroup(this.user, this.guild);
|
||||
},
|
||||
|
||||
@@ -1,74 +1,65 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
.row
|
||||
.col-10
|
||||
h3(v-once) {{ $t('questDetailsTitle') }}
|
||||
sidebar-section(:title="$t('questDetailsTitle')")
|
||||
.row.no-quest-section(v-if='!onPendingQuest && !onActiveQuest')
|
||||
.col-12.text-center
|
||||
.svg-icon(v-html="icons.questIcon")
|
||||
h4(v-once) {{ $t('youAreNotOnQuest') }}
|
||||
p(v-once) {{ $t('questDescription') }}
|
||||
button.btn.btn-secondary(v-once, @click="openStartQuestModal()") {{ $t('startAQuest') }}
|
||||
.row.quest-active-section(v-if='onPendingQuest && !onActiveQuest')
|
||||
.col-2
|
||||
.toggle-up(@click="toggle()", v-if="show")
|
||||
.svg-icon(v-html="icons.upIcon")
|
||||
.toggle-down(@click="toggle()", v-if="!show")
|
||||
.svg-icon(v-html="icons.downIcon")
|
||||
.section(v-if="show")
|
||||
.row.no-quest-section(v-if='!onPendingQuest && !onActiveQuest')
|
||||
.col-12.text-center
|
||||
.svg-icon(v-html="icons.questIcon")
|
||||
h4(v-once) {{ $t('youAreNotOnQuest') }}
|
||||
p(v-once) {{ $t('questDescription') }}
|
||||
button.btn.btn-secondary(v-once, @click="openStartQuestModal()") {{ $t('startAQuest') }}
|
||||
.row.quest-active-section(v-if='onPendingQuest && !onActiveQuest')
|
||||
.col-2
|
||||
.quest(:class='`inventory_quest_scroll_${questData.key}`')
|
||||
.col-6.titles
|
||||
strong {{ questData.text() }}
|
||||
p {{acceptedCount}} / {{group.memberCount}}
|
||||
.col-4
|
||||
button.btn.btn-secondary(@click="openQuestDetails()") {{ $t('details') }}
|
||||
.row.quest-active-section.quest-invite(v-if='user.party.quest && user.party.quest.RSVPNeeded')
|
||||
span {{ $t('wouldYouParticipate') }}
|
||||
button.btn.btn-primary.accept(@click='questAccept(group._id)') {{$t('accept')}}
|
||||
button.btn.btn-primary.reject(@click='questReject(group._id)') {{$t('reject')}}
|
||||
.row.quest-active-section(v-if='!onPendingQuest && onActiveQuest')
|
||||
.col-12.text-center
|
||||
.quest-boss(:class="'quest_' + questData.key")
|
||||
h3(v-once) {{ questData.text() }}
|
||||
.quest-box
|
||||
.collect-info(v-if='questData.collect')
|
||||
.row(v-for='(value, key) in questData.collect')
|
||||
.col-2
|
||||
div(:class="'quest_' + questData.key + '_' + key")
|
||||
.col-10
|
||||
strong {{value.text()}}
|
||||
.grey-progress-bar
|
||||
.collect-progress-bar(:style="{width: (group.quest.progress.collect[key] / value.count) * 100 + '%'}")
|
||||
strong {{group.quest.progress.collect[key]}} / {{value.count}}
|
||||
div.text-right {{parseFloat(user.party.quest.progress.collectedItems) || 0}} items found
|
||||
.boss-info(v-if='questData.boss')
|
||||
.row
|
||||
.quest(:class='`inventory_quest_scroll_${questData.key}`')
|
||||
.col-6.titles
|
||||
strong {{ questData.text() }}
|
||||
p {{acceptedCount}} / {{group.memberCount}}
|
||||
.col-4
|
||||
button.btn.btn-secondary(@click="openQuestDetails()") {{ $t('details') }}
|
||||
.row.quest-active-section.quest-invite(v-if='user.party.quest && user.party.quest.RSVPNeeded')
|
||||
span {{ $t('wouldYouParticipate') }}
|
||||
button.btn.btn-primary.accept(@click='questAccept(group._id)') {{$t('accept')}}
|
||||
button.btn.btn-primary.reject(@click='questReject(group._id)') {{$t('reject')}}
|
||||
.row.quest-active-section(v-if='!onPendingQuest && onActiveQuest')
|
||||
.col-12.text-center
|
||||
.quest-boss(:class="'quest_' + questData.key")
|
||||
h3(v-once) {{ questData.text() }}
|
||||
.quest-box
|
||||
.collect-info(v-if='questData.collect')
|
||||
.row(v-for='(value, key) in questData.collect')
|
||||
.col-2
|
||||
div(:class="'quest_' + questData.key + '_' + key")
|
||||
.col-10
|
||||
strong {{value.text()}}
|
||||
.grey-progress-bar
|
||||
.collect-progress-bar(:style="{width: (group.quest.progress.collect[key] / value.count) * 100 + '%'}")
|
||||
strong {{group.quest.progress.collect[key]}} / {{value.count}}
|
||||
div.text-right {{parseFloat(user.party.quest.progress.collectedItems) || 0}} items found
|
||||
.boss-info(v-if='questData.boss')
|
||||
.row
|
||||
.col-6
|
||||
h4.float-left(v-once) {{ questData.boss.name() }}
|
||||
.col-6
|
||||
span.float-right(v-once) {{ $t('participantsTitle') }}
|
||||
.row
|
||||
.col-12
|
||||
.grey-progress-bar
|
||||
.boss-health-bar(:style="{width: bossHpPercent + '%'}")
|
||||
.row.boss-details
|
||||
.col-6
|
||||
span.float-left
|
||||
| {{ Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100 }} / {{ parseFloat(questData.boss.hp).toFixed(2) }}
|
||||
// current boss hp uses ceil so you don't underestimate damage needed to end quest
|
||||
.col-6(v-if='userIsOnQuest')
|
||||
// @TODO: Why do we not sync quest progress on the group doc? Each user could have different progress.
|
||||
span.float-right {{ user.party.quest.progress.up | floor(10) }} {{ $t('pendingDamageLabel') }}
|
||||
// player's pending damage uses floor so you don't overestimate damage you've already done
|
||||
.row.rage-bar-row(v-if='questData.boss.rage')
|
||||
.col-12
|
||||
.grey-progress-bar
|
||||
.boss-health-bar.rage-bar(:style="{width: (group.quest.progress.rage / questData.boss.rage.value) * 100 + '%'}")
|
||||
.row.boss-details.rage-details(v-if='questData.boss.rage')
|
||||
.col-6
|
||||
h4.float-left(v-once) {{ questData.boss.name() }}
|
||||
.col-6
|
||||
span.float-right(v-once) {{ $t('participantsTitle') }}
|
||||
.row
|
||||
.col-12
|
||||
.grey-progress-bar
|
||||
.boss-health-bar(:style="{width: (group.quest.progress.hp / questData.boss.hp) * 100 + '%'}")
|
||||
.row.boss-details
|
||||
.col-6
|
||||
span.float-left
|
||||
| {{ Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100 }} / {{ parseFloat(questData.boss.hp).toFixed(2) }}
|
||||
// current boss hp uses ceil so you don't underestimate damage needed to end quest
|
||||
.col-6(v-if='userIsOnQuest')
|
||||
// @TODO: Why do we not sync quest progress on the group doc? Each user could have different progress.
|
||||
span.float-right {{ user.party.quest.progress.up | floor(10) }} {{ $t('pendingDamageLabel') }}
|
||||
// player's pending damage uses floor so you don't overestimate damage you've already done
|
||||
.row.rage-bar-row(v-if='questData.boss.rage')
|
||||
.col-12
|
||||
.grey-progress-bar
|
||||
.boss-health-bar.rage-bar(:style="{width: (group.quest.progress.rage / questData.boss.rage.value) * 100 + '%'}")
|
||||
.row.boss-details.rage-details(v-if='questData.boss.rage')
|
||||
.col-6
|
||||
span.float-left {{ $t('rage') }} {{ parseFloat(group.quest.progress.rage).toFixed(2) }} / {{ questData.boss.rage.value }}
|
||||
button.btn.btn-secondary(v-once, @click="questAbort()", v-if='canEditQuest') {{ $t('abort') }}
|
||||
span.float-left {{ $t('rage') }} {{ parseFloat(group.quest.progress.rage).toFixed(2) }} / {{ questData.boss.rage.value }}
|
||||
button.btn.btn-secondary(v-once, @click="questAbort()", v-if='canEditQuest') {{ $t('abort') }}
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -193,18 +184,18 @@ import { mapState } from 'client/libs/store';
|
||||
|
||||
import quests from 'common/script/content/quests';
|
||||
import percent from 'common/script/libs/percent';
|
||||
import sidebarSection from '../sidebarSection';
|
||||
|
||||
import upIcon from 'assets/svg/up.svg';
|
||||
import downIcon from 'assets/svg/down.svg';
|
||||
import questIcon from 'assets/svg/quest.svg';
|
||||
|
||||
export default {
|
||||
props: ['show', 'group'],
|
||||
props: ['group'],
|
||||
components: {
|
||||
sidebarSection,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
upIcon,
|
||||
downIcon,
|
||||
questIcon,
|
||||
}),
|
||||
};
|
||||
@@ -261,9 +252,6 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggle () {
|
||||
this.$emit('toggle');
|
||||
},
|
||||
openStartQuestModal () {
|
||||
this.$root.$emit('bv::show::modal', 'start-quest-modal');
|
||||
},
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
form
|
||||
h2(v-once) {{ $t('filter') }}
|
||||
.form-group
|
||||
h3 Category
|
||||
h3 {{ $t('category') }}
|
||||
.form-check(
|
||||
v-for="group in categoryOptions",
|
||||
:key="group.key",
|
||||
@@ -15,7 +15,7 @@
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters", :id="group.key")
|
||||
label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
|
||||
.form-group
|
||||
h3 Role
|
||||
h3 {{ $t('role') }}
|
||||
.form-check(
|
||||
v-for="group in roleOptions",
|
||||
:key="group.key",
|
||||
@@ -24,7 +24,7 @@
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters", :id="group.key")
|
||||
label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
|
||||
.form-group
|
||||
h3 Guild Size
|
||||
h3 {{ $t('guildSize') }}
|
||||
.form-check(
|
||||
v-for="group in guildSizeOptions",
|
||||
:key="group.key",
|
||||
|
||||
@@ -102,18 +102,9 @@
|
||||
li(v-once) {{ $t('sleepBullet4') }}
|
||||
button.btn.btn-secondary.pause-button(v-if='!user.preferences.sleep', @click='toggleSleep()', v-once) {{ $t('pauseDailies') }}
|
||||
button.btn.btn-secondary.pause-button(v-if='user.preferences.sleep', @click='toggleSleep()', v-once) {{ $t('unpauseDailies') }}
|
||||
|
||||
.below-header-sections
|
||||
.section-header
|
||||
.px-3
|
||||
sidebar-section(:title="$t('staffAndModerators')")
|
||||
.row
|
||||
.col-10
|
||||
h3(v-once) {{ $t('staffAndModerators') }}
|
||||
.col-2
|
||||
.toggle-up(@click="sections.staff = !sections.staff", v-if="sections.staff")
|
||||
.svg-icon(v-html="icons.upIcon")
|
||||
.toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
|
||||
.svg-icon(v-html="icons.downIcon")
|
||||
.section.row(v-if="sections.staff")
|
||||
.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}}
|
||||
@@ -122,50 +113,33 @@
|
||||
.svg-icon.npc-icon(v-html="icons.tierNPC", v-if='user.name === "It\'s Bailey"')
|
||||
.type {{user.type}}
|
||||
|
||||
.section-header
|
||||
.row
|
||||
.col-10
|
||||
h3(v-once) {{ $t('helpfulLinks') }}
|
||||
.col-2
|
||||
.toggle-up(@click="sections.helpfulLinks = !sections.helpfulLinks", v-if="sections.helpfulLinks")
|
||||
.svg-icon(v-html="icons.upIcon")
|
||||
.toggle-down(@click="sections.helpfulLinks = !sections.helpfulLinks", v-if="!sections.helpfulLinks")
|
||||
.svg-icon(v-html="icons.downIcon")
|
||||
.section.row(v-if="sections.helpfulLinks")
|
||||
ul
|
||||
li
|
||||
a(href='', @click.prevent='modForm()') {{ $t('contactForm') }}
|
||||
li
|
||||
router-link(to='/static/community-guidelines', v-once) {{ $t('communityGuidelinesLink') }}
|
||||
li
|
||||
router-link(to="/groups/guild/f2db2a7f-13c5-454d-b3ee-ea1f5089e601") {{ $t('lookingForGroup') }}
|
||||
li
|
||||
router-link(to='/static/faq', v-once) {{ $t('faq') }}
|
||||
li
|
||||
a(href='', v-html="$t('glossary')")
|
||||
li
|
||||
a(href='http://habitica.wikia.com/wiki/Habitica_Wiki', v-once) {{ $t('wiki') }}
|
||||
li
|
||||
a(href='https://oldgods.net/habitrpg/habitrpg_user_data_display.html', v-once) {{ $t('dataDisplayTool') }}
|
||||
li
|
||||
router-link(to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac") {{ $t('reportProblem') }}
|
||||
li
|
||||
a(href='https://trello.com/c/odmhIqyW/440-read-first-table-of-contents', v-once) {{ $t('requestFeature') }}
|
||||
li
|
||||
a(href='', v-html="$t('communityForum')")
|
||||
li
|
||||
router-link(to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a") {{ $t('askQuestionGuild') }}
|
||||
sidebar-section(:title="$t('helpfulLinks')")
|
||||
ul
|
||||
li
|
||||
a(href='', @click.prevent='modForm()') {{ $t('contactForm') }}
|
||||
li
|
||||
router-link(to='/static/community-guidelines', v-once) {{ $t('communityGuidelinesLink') }}
|
||||
li
|
||||
router-link(to="/groups/guild/f2db2a7f-13c5-454d-b3ee-ea1f5089e601") {{ $t('lookingForGroup') }}
|
||||
li
|
||||
router-link(to='/static/faq', v-once) {{ $t('faq') }}
|
||||
li
|
||||
a(href='', v-html="$t('glossary')")
|
||||
li
|
||||
a(href='http://habitica.wikia.com/wiki/Habitica_Wiki', v-once) {{ $t('wiki') }}
|
||||
li
|
||||
a(href='https://oldgods.net/habitrpg/habitrpg_user_data_display.html', v-once) {{ $t('dataDisplayTool') }}
|
||||
li
|
||||
router-link(to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac") {{ $t('reportProblem') }}
|
||||
li
|
||||
a(href='https://trello.com/c/odmhIqyW/440-read-first-table-of-contents', v-once) {{ $t('requestFeature') }}
|
||||
li
|
||||
a(href='', v-html="$t('communityForum')")
|
||||
li
|
||||
router-link(to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a") {{ $t('askQuestionGuild') }}
|
||||
|
||||
.section-header
|
||||
sidebar-section(:title="$t('playerTiers')")
|
||||
.row
|
||||
.col-10
|
||||
h3(v-once) {{ $t('playerTiers') }}
|
||||
.col-2
|
||||
.toggle-up(@click="sections.playerTiers = !sections.playerTiers", v-if="sections.playerTiers")
|
||||
.svg-icon(v-html="icons.upIcon")
|
||||
.toggle-down(@click="sections.playerTiers = !sections.playerTiers", v-if="!sections.playerTiers")
|
||||
.svg-icon(v-html="icons.downIcon")
|
||||
.section.row(v-if="sections.playerTiers")
|
||||
.col-12
|
||||
p(v-once) {{ $t('playerTiersDesc') }}
|
||||
ul.tier-list
|
||||
@@ -287,10 +261,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.grassy-meadow-backdrop {
|
||||
background-image: url('~assets/images/npc/#{$npc_tavern_flavor}/tavern_background.png');
|
||||
background-repeat: repeat-x;
|
||||
@@ -545,17 +515,16 @@ import autocomplete from '../chat/autoComplete';
|
||||
import communityGuidelines from './communityGuidelines';
|
||||
import worldBossInfoModal from '../world-boss/worldBossInfoModal';
|
||||
import worldBossRageModal from '../world-boss/worldBossRageModal';
|
||||
import sidebarSection from '../sidebarSection';
|
||||
|
||||
import challengeIcon from 'assets/svg/challenge.svg';
|
||||
import chevronIcon from 'assets/svg/chevron-red.svg';
|
||||
import downIcon from 'assets/svg/down.svg';
|
||||
import gemIcon from 'assets/svg/gem.svg';
|
||||
import healthIcon from 'assets/svg/health.svg';
|
||||
import informationIconRed from 'assets/svg/information-red.svg';
|
||||
import questBackground from 'assets/svg/quest-background-border.svg';
|
||||
import rageIcon from 'assets/svg/rage.svg';
|
||||
import swordIcon from 'assets/svg/sword.svg';
|
||||
import upIcon from 'assets/svg/up.svg';
|
||||
|
||||
import tier1 from 'assets/svg/tier-1.svg';
|
||||
import tier2 from 'assets/svg/tier-2.svg';
|
||||
@@ -577,6 +546,7 @@ export default {
|
||||
communityGuidelines,
|
||||
worldBossInfoModal,
|
||||
worldBossRageModal,
|
||||
sidebarSection,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -584,7 +554,6 @@ export default {
|
||||
icons: Object.freeze({
|
||||
challengeIcon,
|
||||
chevronIcon,
|
||||
downIcon,
|
||||
gem: gemIcon,
|
||||
healthIcon,
|
||||
informationIcon: informationIconRed,
|
||||
@@ -601,7 +570,6 @@ export default {
|
||||
tierMod,
|
||||
tierNPC,
|
||||
tierStaff,
|
||||
upIcon,
|
||||
}),
|
||||
chat: {
|
||||
submitDisable: false,
|
||||
@@ -611,9 +579,6 @@ export default {
|
||||
chat: [],
|
||||
},
|
||||
sections: {
|
||||
staff: true,
|
||||
helpfulLinks: true,
|
||||
playerTiers: true,
|
||||
worldBoss: true,
|
||||
},
|
||||
staff: [
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
label.custom-control-label(v-once, :for="mountGroup.key") {{ mountGroup.label }}
|
||||
|
||||
div.form-group.clearfix
|
||||
h3.float-left Hide Missing
|
||||
h3.float-left {{ $t('hideMissing') }}
|
||||
toggle-switch.float-right(
|
||||
:checked="hideMissing",
|
||||
@change="updateHideMissing"
|
||||
|
||||
91
website/client/components/sidebarSection.vue
Normal file
91
website/client/components/sidebarSection.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template lang="pug">
|
||||
.section
|
||||
.section-header.d-flex.align-items-center
|
||||
h3.mb-0(v-once)
|
||||
| {{ title }}
|
||||
.section-info.mx-1(
|
||||
v-if="tooltip !== null"
|
||||
)
|
||||
.svg-icon(
|
||||
v-html='icons.information',
|
||||
:id="tooltipId",
|
||||
:title="tooltip"
|
||||
)
|
||||
b-tooltip(
|
||||
:title="tooltip",
|
||||
:target="tooltipId",
|
||||
)
|
||||
.section-toggle.ml-auto(@click="toggle")
|
||||
.svg-icon(v-html="icons.upIcon", v-if="visible")
|
||||
.svg-icon(v-html="icons.downIcon", v-else)
|
||||
.section-body(v-show="visible")
|
||||
slot
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section {
|
||||
border-top: 1px solid #e1e0e3;
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.section:last-of-type {
|
||||
border-bottom: 1px solid #e1e0e3;
|
||||
margin-bottom: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.section-body {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.section-toggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.section-info {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.section-info .svg-icon,
|
||||
.section-toggle .svg-icon {
|
||||
width: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import uuid from 'uuid/v4';
|
||||
import upIcon from 'assets/svg/up.svg';
|
||||
import downIcon from 'assets/svg/down.svg';
|
||||
import informationIcon from 'assets/svg/information.svg';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
required: true,
|
||||
},
|
||||
tooltip: {
|
||||
default: null,
|
||||
},
|
||||
show: {
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tooltipId: uuid(),
|
||||
visible: this.show,
|
||||
icons: {
|
||||
upIcon,
|
||||
downIcon,
|
||||
information: informationIcon,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggle () {
|
||||
this.visible = !this.visible;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
21
website/client/components/userLink.vue
Normal file
21
website/client/components/userLink.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template lang="pug">
|
||||
b-link(
|
||||
v-if='user && user.profile',
|
||||
@click.prevent='showProfile(user)'
|
||||
) {{user.profile.name}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['user'],
|
||||
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',
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -13,7 +13,8 @@
|
||||
"challengeWinner": "Was the winner in the following challenges",
|
||||
"challenges": "Challenges",
|
||||
"challengesLink": "<a href='http://habitica.wikia.com/wiki/Challenges' target='_blank'>Challenges</a>",
|
||||
|
||||
"challengePrize": "Challenge Prize",
|
||||
"endDate": "Ends",
|
||||
"noChallenges": "No challenges yet, visit",
|
||||
"toCreate": "to create one.",
|
||||
|
||||
@@ -25,7 +26,9 @@
|
||||
"filter": "Filter",
|
||||
"groups": "Groups",
|
||||
"noNone": "None",
|
||||
"category": "Category",
|
||||
"membership": "Membership",
|
||||
"ownership": "Ownership",
|
||||
"participating": "Participating",
|
||||
"notParticipating": "Not Participating",
|
||||
"either": "Either",
|
||||
|
||||
@@ -371,9 +371,11 @@
|
||||
"recentActivity": "Recent Activity",
|
||||
"myGuilds": "My Guilds",
|
||||
"guildsDiscovery": "Discover Guilds",
|
||||
"role": "Role",
|
||||
"guildOrPartyLeader": "Leader",
|
||||
"guildLeader": "Guild Leader",
|
||||
"member": "Member",
|
||||
"guildSize": "Guild Size",
|
||||
"goldTier": "Gold Tier",
|
||||
"silverTier": "Silver Tier",
|
||||
"bronzeTier": "Bronze Tier",
|
||||
|
||||
@@ -53,6 +53,7 @@
|
||||
"featuredItems": "Featured Items!",
|
||||
"hideLocked": "Hide locked",
|
||||
"hidePinned": "Hide pinned",
|
||||
"hideMissing": "Hide Missing",
|
||||
"amountExperience": "<%= amount %> Experience",
|
||||
"amountGold": "<%= amount %> Gold",
|
||||
"namedHatchingPotion": "<%= type %> Hatching Potion",
|
||||
|
||||
Reference in New Issue
Block a user