New client random catchup (#8891)

* Added initial challenge pages * Added challenge item and find guilds page * Added challenge detail * Added challenge modals * Ported over challenge service code * Ported over challenge ctrl code * Added styles and column * Minor modal updates * Removed duplicate keys * Fixed casing * Added initial chat component * Added copy as todo modal * Added sync * Added chat to groups * Fixed lint * Added notification service * Added tag services * Added notifications * Added hall * Added analytics * Added http interceptor * Added initial autocomplete * Added initial footer component * Began coding and designing footer * Added inital hall * Ported over inital group plan ctrl code * Added initial invite modal * Added initial member detail modal * Added initial notification menu * Ported over inital notification code * Fixed import line * Fixed autocomplete import casing
2025-12-19 15:48:04 +01:00 · 2017-07-25 08:24:40 -06:00
parent 86a07a4949
commit 16b244d5c6
49 changed files with 2126 additions and 54 deletions
--- a/website/client/components/groups/discovery.vue
+++ b/website/client/components/groups/discovery.vue
@@ -0,0 +1,104 @@
+<template lang="pug">
+.row
+  sidebar(@search="updateSearch", @filter="updateFilters")
+
+  .standard-page
+    .clearfix
+        h1.page-header.float-left(v-once) {{ $t('publicGuilds') }}
+        .float-right
+          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}}
+    .col-md-12
+      public-guild-item(v-for="guild in filteredGuilds", :key='guild._id', :guild="guild", :display-leave='true')
+      mugen-scroll(
+        :handler="fetchGuilds",
+        :should-handle="!loading && !this.hasLoadedAllGuilds",
+        :handle-on-mount="false",
+        v-show="loading",
+      )
+        span(v-once) {{ $t('loading') }}
+</template>
+
+<style>
+.sort-select {
+  margin: 2em;
+}
+</style>
+
+<script>
+import MugenScroll from 'vue-mugen-scroll';
+import PublicGuildItem from './publicGuildItem';
+import Sidebar from './sidebar';
+import groupUtilities from 'client/mixins/groupsUtilities';
+
+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';
+
+export default {
+  mixins: [groupUtilities],
+  components: { PublicGuildItem, MugenScroll, Sidebar, bFormSelect, bDropdown, bDropdownItem },
+  data () {
+    return {
+      loading: false,
+      hasLoadedAllGuilds: false,
+      lastPageLoaded: 0,
+      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',
+        },
+      ],
+      guilds: [],
+    };
+  },
+  created () {
+    if (!this.$store.state.publicGuilds) this.fetchGuilds();
+  },
+  computed: {
+    filteredGuilds () {
+      let search = this.search;
+      let filters = this.filters;
+      let user = this.$store.state.user.data;
+      let filterGuild = this.filterGuild;
+      // @TODO: Move this to the server
+      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 () {
+      // We have the data cached
+      if (this.lastPageLoaded === 0 && this.guilds.length > 0) return;
+
+      this.loading = true;
+      let guilds = await this.$store.dispatch('guilds:getPublicGuilds', {page: this.lastPageLoaded});
+      if (guilds.length === 0) this.hasLoadedAllGuilds = true;
+
+      this.guilds.push(...guilds);
+
+      this.lastPageLoaded++;
+      this.loading = false;
+    },
+  },
+};
+</script>