mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 14:47:53 +01:00
c5e0bcfb0e
* View party now opens member modal * Clicking member in header opens member detail modal * Began sticky header * Added sleep * Removed extra inbox and added name styles * Lint fixes * Added member filter * Added task counts * Updated quest start modal * Updated members modal style * Fixed editing party * Updated tavern * Updated my guilds * More guild styles * Many challenge styles and fixes * Fixed notification menu display * Added initial styles to groupplans * Added syncing with inbox * Fixed lint * Added new edit profile layout * Added initial achievement layout * Began adding new stats layout * Removed duplicate: * fix(CI): attempt to address Travis Mongo connection issue * fix(CI): don't strand us in Mongo shell * Travis updates * Try percise
127 lines
3.0 KiB
Vue
127 lines
3.0 KiB
Vue
<template lang="pug">
|
|
.row
|
|
challenge-modal
|
|
sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
|
|
|
|
.col-10.standard-page
|
|
.row.header-row
|
|
.col-md-8.text-left
|
|
h1(v-once) {{$t('myChallenges')}}
|
|
.col-md-4
|
|
span.dropdown-label {{ $t('sortBy') }}
|
|
b-dropdown(:text="$t('sort')", right=true)
|
|
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
|
|
button.btn.btn-secondary.create-challenge-button(@click='createChallenge()')
|
|
.svg-icon.positive-icon(v-html="icons.positiveIcon")
|
|
span(v-once) {{$t('createChallenge')}}
|
|
|
|
.row
|
|
.no-challenges.text-center.col-md-6.offset-3(v-if='filteredChallenges.length === 0')
|
|
.svg-icon(v-html="icons.challengeIcon")
|
|
h2(v-once) {{$t('noChallengeTitle')}}
|
|
p(v-once) {{$t('challengeDescription1')}}
|
|
p(v-once) {{$t('challengeDescription2')}}
|
|
|
|
.row
|
|
.col-6(v-for='challenge in filteredChallenges')
|
|
challenge-item(:challenge='challenge')
|
|
</template>
|
|
|
|
<style lang='scss' scoped>
|
|
@import '~client/assets/scss/colors.scss';
|
|
|
|
.header-row {
|
|
h1 {
|
|
color: $purple-200;
|
|
}
|
|
|
|
.create-challenge-button {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
.positive-icon {
|
|
color: $green-10;
|
|
width: 10px;
|
|
display: inline-block;
|
|
margin-right: .5em;
|
|
}
|
|
}
|
|
|
|
.no-challenges {
|
|
color: $gray-300;
|
|
margin-top: 10em;
|
|
|
|
h2 {
|
|
color: $gray-300;
|
|
}
|
|
|
|
.svg-icon {
|
|
width: 88.7px;
|
|
margin: 1em auto;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { mapState } from 'client/libs/store';
|
|
|
|
import bDropdown from 'bootstrap-vue/lib/components/dropdown';
|
|
import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
|
|
import Sidebar from './sidebar';
|
|
import ChallengeItem from './challengeItem';
|
|
import challengeModal from './challengeModal';
|
|
|
|
import challengeIcon from 'assets/svg/challenge.svg';
|
|
import positiveIcon from 'assets/svg/positive.svg';
|
|
|
|
export default {
|
|
components: {
|
|
Sidebar,
|
|
ChallengeItem,
|
|
challengeModal,
|
|
bDropdown,
|
|
bDropdownItem,
|
|
},
|
|
data () {
|
|
return {
|
|
icons: Object.freeze({
|
|
challengeIcon,
|
|
positiveIcon,
|
|
}),
|
|
challenges: [],
|
|
sortOptions: [],
|
|
};
|
|
},
|
|
mounted () {
|
|
this.loadchallanges();
|
|
},
|
|
computed: {
|
|
...mapState({user: 'user.data'}),
|
|
filteredChallenges () {
|
|
return this.challenges.filter((challenge) => {
|
|
let isMember = this.memberOf(challenge);
|
|
// @TODO: Other filters
|
|
return isMember;
|
|
});
|
|
},
|
|
},
|
|
methods: {
|
|
memberOf (challenge) {
|
|
return this.user.challenges.indexOf(challenge._id) !== -1;
|
|
},
|
|
updateSearch () {
|
|
|
|
},
|
|
updateFilters () {
|
|
|
|
},
|
|
createChallenge () {
|
|
this.$root.$emit('show::modal', 'challenge-modal');
|
|
},
|
|
async loadchallanges () {
|
|
this.challenges = await this.$store.dispatch('challenges:getUserChallenges');
|
|
},
|
|
},
|
|
};
|
|
</script>
|