mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 14:47:53 +01:00
2e9bc2c31c
* add colors palette * add secondary menu component and style it * add box shadow to secondary menu * misc css, fixes for secondary menu * client: add equipment page with grouping, css: add some styles * add typography * more equipment * stable: fix linting * equipment: add styles (lots of general styles too) * remove duplicate google fonts loading * add dropdowns * design: white search input background, remove gray from items * start adding drawer and selected indicator * wip equipment * fix equipment * equipment: correctly bind new properties on items.gear.equipped * equipment: fix vue binding. version 2 * equipment: fix vue binding. version 3 * back to first fix for equip op, fix for sourcemaps, send http request when an item is equipped, load bootstrap-vue components where needed * checkboxes and radio buttons * correctly renders selected items in first postion during the first render * add search * general changes, constants part of app state, add popovers * add toggle switch, rename css * correct offset * upgrade deps * upgrade deps * drawer and lot of other work * update equipping mechanism * finish equipment * fix compilation and upgrade deps * use v-show in place of v-if to fix ui issues * v-show -> v-if * Start of guild syyles * fix linting in test/client * fix es6 compilation in test/client * fix babel compilation for tests * fix groupsUtilities mixin tests * More designs * Added public guild state * Added my guilds store * client: buttons * client: buttons: fix colors * Added join and leave * Began adding new guild form * Create form updates * Added search to local data * Added filtering * Added initial code for group create * Added more create checks * Added more guild routes * Added styles to guild page * Added more chat styles * Began porting over angular functions * Moved over group service functions * Added paging * Updated sidebar * Updated join/leave and minor text * Added new sidebar functions * Updated paging * Added some form updates * Added more translations and styles * Updated shrinkwrap * Removed features config * Lint cleanup * Added member modal * Added more member actions * Updated nav * Fixed filter toggling * Updated create guild * Added no guild page * Added sort select * Added more styles * Added update guild form * Removed extra css and other minor changes * Many css and syntax fixes * Fixed color and merge conflic * Removed paging from my guilds * Removed extra strings * Many requests updates * Small style fixes
118 lines
3.0 KiB
Vue
118 lines
3.0 KiB
Vue
<template lang="pug">
|
|
.row
|
|
sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
|
|
|
|
.col-10.no-guilds.standard-page(v-if='filteredGuilds.length === 0')
|
|
.no-guilds-wrapper
|
|
img(src='~assets/guilds/grey-badge.svg')
|
|
h2 {{$t('noGuildsTitle')}}
|
|
p {{$t('noGuildsParagraph1')}}
|
|
p {{$t('noGuildsParagraph2')}}
|
|
span(v-if='loading') {{ $t('loading') }}
|
|
|
|
.col-10.standard-page(v-if='filteredGuilds.length > 0')
|
|
.row
|
|
.col-md-12
|
|
h1.page-header.float-left(v-once) {{ $t('myGuilds') }}
|
|
.float-right
|
|
span.dropdown-label {{ $t('sortBy') }}
|
|
b-dropdown(:text="$t('sort')", right=true)
|
|
b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)') {{sortOption.text}}
|
|
.row
|
|
.col-md-12
|
|
public-guild-item(v-for="guild in filteredGuilds", :key='guild._id', :guild="guild", :display-gem-bank='true')
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~client/assets/scss/colors.scss';
|
|
.sort-select {
|
|
margin: 2em;
|
|
}
|
|
|
|
.no-guilds {
|
|
text-align: center;
|
|
color: $gray-200;
|
|
margin-top: 15em;
|
|
|
|
p {
|
|
font-size: 14px;
|
|
line-height: 1.43;
|
|
}
|
|
|
|
.no-guilds-wrapper {
|
|
width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { mapState } from 'client/libs/store';
|
|
import groupUtilities from 'client/mixins/groupsUtilities';
|
|
|
|
import MugenScroll from 'vue-mugen-scroll';
|
|
import bFormSelect from 'bootstrap-vue/lib/components/form-select';
|
|
import bDropdown from 'bootstrap-vue/lib/components/dropdown';
|
|
import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
|
|
|
|
import PublicGuildItem from './publicGuildItem';
|
|
import Sidebar from './sidebar';
|
|
|
|
export default {
|
|
mixins: [groupUtilities],
|
|
components: { PublicGuildItem, MugenScroll, Sidebar, bFormSelect, bDropdown, bDropdownItem },
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
search: '',
|
|
filters: {},
|
|
sort: 'none',
|
|
sortOptions: [
|
|
{
|
|
text: this.$t('none'),
|
|
value: 'none',
|
|
},
|
|
{
|
|
text: this.$t('memberCount'),
|
|
value: 'member_count',
|
|
},
|
|
{
|
|
text: this.$t('recentActivity'),
|
|
value: 'recent_activity',
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created () {
|
|
this.fetchGuilds();
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
guilds: 'myGuilds',
|
|
}),
|
|
filteredGuilds () {
|
|
let search = this.search;
|
|
let filters = this.filters;
|
|
let user = this.$store.state.user.data;
|
|
let filterGuild = this.filterGuild;
|
|
return this.guilds.filter((guild) => {
|
|
return filterGuild(guild, filters, search, user);
|
|
});
|
|
},
|
|
},
|
|
methods: {
|
|
updateSearch (eventData) {
|
|
this.search = eventData.searchTerm;
|
|
},
|
|
updateFilters (eventData) {
|
|
this.filters = eventData;
|
|
},
|
|
async fetchGuilds () {
|
|
this.loading = true;
|
|
await this.$store.dispatch('guilds:getMyGuilds');
|
|
this.loading = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|