Performance: My Challenges (#11065)

* use the same paging for "myChallenges" only loads 10 per call * challenges: show loading above the load-more button (instead at the top) * purple loading message and flat load-more button * remove comment * show loadMore button only when the request has 10 entries * challenge card ui
2025-12-17 06:37:23 +01:00 · 2019-04-10 22:09:04 +02:00
parent eeddd3f366
commit 4289becccc
8 changed files with 253 additions and 104 deletions
--- a/website/client/assets/scss/categories.scss
+++ b/website/client/assets/scss/categories.scss
@@ -13,14 +13,19 @@
  min-width: 100px;
  border-radius: 100px;
  background-color: $gray-600;
-  padding: .5em;
+  padding: 4px 12px;
  display: inline-block;
-  margin: .25em;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.33;
+  margin-right: 4px;
+  margin-top: 8px;
  text-align: center;
-  color: $gray-300;
+
+  font-size: 12px;
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.33;
+  letter-spacing: normal;
+  color: $gray-100;
 }

 .category-label-purple {
--- a/website/client/assets/svg/official.svg
+++ b/website/client/assets/svg/official.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#6133B4" d="M10 18.5l-3.09 1.01-1.906-2.633-3.094-1 .006-3.25L0 10l1.916-2.627-.006-3.25 3.094-1L6.91.49 10 1.5 13.09.49l1.906 2.633 3.094 1-.006 3.25L20 10l-1.916 2.627.006 3.25-3.094 1-1.906 2.634z"/>
+        <path fill="#FFF" d="M8.994 13.333a.795.795 0 0 1-.563-.233l-2.598-2.598L6.96 9.376l1.99 1.989 4.026-4.698 1.21 1.036L9.6 13.055a.801.801 0 0 1-.575.278h-.03"/>
+    </g>
+</svg>
--- a/website/client/components/challenges/challengeItem.vue
+++ b/website/client/components/challenges/challengeItem.vue
@@ -4,12 +4,19 @@
    .number
      span.svg-icon(v-html="icons.gemIcon")
      span.value {{challenge.prize}}
-    .label {{ $t('challengePrize') }}
+    .label {{ $t('prize') }}
  .challenge-header
    router-link(
      :to="{ name: 'challenge', params: { challengeId: challenge._id } }"
    )
      h3.challenge-title(v-markdown='challenge.name')
+    .meta-info
+      .member-count
+        .svg-icon.user-icon(v-html="icons.memberIcon")
+        span.count-label {{challenge.memberCount}}
+      .divider
+      .official(v-if="isOfficial")
+        .svg-icon.user-icon(v-html="icons.officialIcon")
      .owner(v-if="fullLayout")
        .owner-item
          strong {{ $t('createdBy') }}:
@@ -17,15 +24,6 @@
        .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}}
  category-tags.challenge-categories(
    :categories="challenge.categories",
    :owner="isOwner",
@@ -42,16 +40,23 @@
 </template>

 <style lang="scss">
+  @import '~client/assets/scss/colors.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-word;
+    font-size: 20px;
+    font-weight: bold;
+    font-style: normal;
+    font-stretch: condensed;
+    line-height: 1.4;
+    letter-spacing: normal;
+    color: $gray-10;
  }
 </style>

@@ -84,36 +89,90 @@
      font-size: .9em;
    }

+    .official {
+      margin-right: 8px;
+    }
+
    .challenge-prize {
      text-align: center;
      color: $gems-color;
      display: inline-block;
      float: right;
-      padding: 1em 1.5em;
+      padding: 18px 24px;
      margin-left: 1em;
-      background: #eefaf6;
+      background: #24cc8f19;
      border-bottom-left-radius: 4px;
+      width: 107px;
+      height: 80px;

      .svg-icon {
-        width: 32px;
+        width: 24px;
+        height: 24px;
+        object-fit: contain;
+      }
+
+      .value {
+        margin-left: 8px;
+        font-size: 20px;
+        font-weight: bold;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 1.4;
+        letter-spacing: normal;
+        color: #1ca372;
+      }
+
+      .label {
+        margin-top: 4px;
+        font-size: 12px;
+        font-weight: bold;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 1.33;
+        letter-spacing: normal;
+        text-align: center;
+        color: #1ca372;
      }
    }

-    .challenge-header,
-    .well-wrapper {
-      padding: 1em 1.5em;
+    .divider {
+      width: 1px;
+      height: 16px;
+      background-color: $gray-600;
+      margin-right: 12px;
+      margin-left: 12px;
    }

    .challenge-header {
-      padding-bottom: .5em;
+      padding: 16px 20px;
    }

-    .owner {
-      margin: 1em 0 .5em;
+    .well-wrapper {
+      padding: 16px 20px 20px;
    }

-    .meta, .owner {
-      display: flex;
+    .challenge-header {
+      padding-bottom: 0;
+    }
+
+    .meta-info {
+      height: 24px;
+      margin-bottom: 8px;
+    }
+
+    .count-label {
+      font-size: 14px;
+      font-weight: normal;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 1.71;
+      letter-spacing: normal;
+      color: $gray-50;
+      margin-left: 4px;
+    }
+
+    .meta-info, .owner, .member-count {
+      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
    }
@@ -134,7 +193,7 @@
    .challenge-categories {
      clear: right;
      display: flex;
-      padding: 0 1.5em 1em;
+      padding: 0 20px 16px;
      flex-wrap: wrap;
    }

@@ -159,9 +218,16 @@
    }

    .challenge-description {
-      color: $gray-200;
-      margin: 0 1.5em;
+      margin: 0 20px 0;
      word-break: break-word;
+
+      font-size: 14px;
+      font-weight: normal;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 1.71;
+      letter-spacing: normal;
+      color: $gray-50;
    }

    .well {
@@ -170,22 +236,65 @@
      justify-content: space-evenly;
      background-color: $gray-700;
      text-align: center;
-      padding: 1em;
+      padding: 16px;
      border-radius: .25em;

      > div {
-        color: $gray-200;
+        .value {
+          font-size: 20px;
+          font-weight: bold;
+          font-style: normal;
+          font-stretch: normal;
+          line-height: 1.4;
+          letter-spacing: normal;
+          color: $gray-50;
+        }
+
+        .label {
+          font-size: 12px;
+          font-weight: bold;
+          font-style: normal;
+          font-stretch: normal;
+          line-height: 1.33;
+          letter-spacing: normal;
+          text-align: center;
+          color: $gray-100;
+        }

        .svg-icon {
-          color: $gray-300;
+          object-fit: contain;
+          color: $gray-100;
        }
      }

      > div.muted {
-        color: $gray-400;
+        .value {
+          opacity: 0.5;
+          font-size: 20px;
+          font-weight: bold;
+          font-style: normal;
+          font-stretch: normal;
+          line-height: 1.4;
+          letter-spacing: normal;
+          color: $gray-50;
+        }
+
+        .label {
+          opacity: 0.5;
+          font-size: 12px;
+          font-weight: bold;
+          font-style: normal;
+          font-stretch: normal;
+          line-height: 1.33;
+          letter-spacing: normal;
+          text-align: center;
+          color: $gray-100;
+        }

        .svg-icon {
-          color: $gray-500;
+          object-fit: contain;
+          opacity: 0.5;
+          color: $gray-100;
        }
      }
    }
@@ -208,6 +317,7 @@
  import todoIcon from 'assets/svg/todo.svg';
  import dailyIcon from 'assets/svg/daily.svg';
  import rewardIcon from 'assets/svg/reward.svg';
+  import officialIcon from 'assets/svg/official.svg';

  export default {
    props: {
@@ -232,6 +342,7 @@
          gemIcon,
          memberIcon,
          calendarIcon,
+          officialIcon,
        }),
      };
    },
@@ -243,6 +354,9 @@
      isMember () {
        return this.user.challenges.indexOf(this.challenge._id) !== -1;
      },
+      isOfficial () {
+        return this.challenge.official || this.challenge.categories.map(category => category.slug).includes('habitica_official');
+      },
      tasksData () {
        return [
          {
--- a/website/client/components/challenges/findChallenges.vue
+++ b/website/client/components/challenges/findChallenges.vue
@@ -6,7 +6,6 @@
    .row.header-row
      .col-md-8.text-left
        h1(v-once) {{$t('findChallenges')}}
-        h2(v-if='loading') {{ $t('loading') }}
      .col-md-4
        // @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}
          b-dropdown(:text="$t('sort')", right=true)
@@ -24,8 +23,11 @@
        challenge-item(:challenge='challenge')

    .row
-      .col-12.text-center(v-if='!loading && filteredChallenges.length > 0')
-        button.btn.btn-secondary(@click='loadMore()') {{ $t('loadMore') }}
+      h2.col-12.loading(v-if='loading') {{ $t('loading') }}
+
+    .row
+      .col-12.text-center(v-if='showLoadMore && !loading && filteredChallenges.length > 0')
+        button.btn.btn-flat.btn-show-more(@click='loadMore()') {{ $t('loadMore') }}
 </template>

 <style lang='scss' scoped>
@@ -56,6 +58,11 @@
      color: $gray-200;
    }
  }
+
+  .loading {
+    text-align: center;
+    color: $purple-300;
+  }
 </style>

 <script>
@@ -78,6 +85,7 @@ export default {
  data () {
    return {
      loading: true,
+      showLoadMore: true,
      icons: Object.freeze({
        positiveIcon,
      }),
@@ -111,7 +119,7 @@ export default {
    };
  },
  mounted () {
-    this.loadchallanges();
+    this.loadChallenges();
  },
  computed: {
    ...mapState({user: 'user.data'}),
@@ -123,17 +131,17 @@ export default {
    updateSearch (eventData) {
      this.search = eventData.searchTerm;
      this.page = 0;
-      this.loadchallanges();
+      this.loadChallenges();
    },
    updateFilters (eventData) {
      this.filters = eventData;
      this.page = 0;
-      this.loadchallanges();
+      this.loadChallenges();
    },
    createChallenge () {
      this.$root.$emit('bv::show::modal', 'challenge-modal');
    },
-    async loadchallanges () {
+    async loadChallenges () {
      this.loading = true;

      let categories = '';
@@ -160,6 +168,9 @@ export default {
        this.challenges = this.challenges.concat(challenges);
      }

+      // only show the load more Button if the max count was returned
+      this.showLoadMore = challenges.length === 10;
+
      this.loading = false;
    },
    challengeCreated (challenge) {
@@ -167,7 +178,7 @@ export default {
    },
    async loadMore () {
      this.page += 1;
-      this.loadchallanges();
+      this.loadChallenges();
    },
  },
 };
--- a/website/client/components/challenges/myChallenges.vue
+++ b/website/client/components/challenges/myChallenges.vue
@@ -7,7 +7,6 @@
    .row.header-row
      .col-md-8.text-left
        h1(v-once) {{$t('myChallenges')}}
-        h2(v-if='loading && challenges.length === 0') {{ $t('loading') }}
      .col-md-4
        // @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}
          b-dropdown(:text="$t('sort')", right=true)
@@ -30,6 +29,13 @@
    .row
      .col-12.col-md-6(v-for='challenge in filteredChallenges')
        challenge-item(:challenge='challenge')
+
+    .row
+      h2.col-12.loading(v-if='loading') {{ $t('loading') }}
+
+    .row
+      .col-12.text-center(v-if='showLoadMore && !loading && filteredChallenges.length > 0')
+        button.btn.btn-flat.btn-show-more(@click='loadMore()') {{ $t('loadMore') }}
 </template>

 <style lang='scss' scoped>
@@ -66,9 +72,15 @@
      margin: 1em auto;
    }
  }
+
+  .loading {
+    text-align: center;
+    color: $purple-300;
+  }
 </style>

 <script>
+import { mapState } from 'client/libs/store';
 import Sidebar from './sidebar';
 import ChallengeItem from './challengeItem';
 import challengeModal from './challengeModal';
@@ -91,6 +103,7 @@ export default {
        positiveIcon,
      }),
      loading: false,
+      showLoadMore: true,
      challenges: [],
      sort: 'none',
      sortOptions: [
@@ -117,29 +130,44 @@ export default {
      ],
      search: '',
      filters: {},
+      page: 0,
    };
  },
  mounted () {
    this.loadChallenges();
  },
  computed: {
+    ...mapState({user: 'user.data'}),
    filteredChallenges () {
-      let search = this.search;
-      let filters = this.filters;
-      let user = this.$store.state.user.data;
+      const filters = this.filters;
+      const user = this.user;

-      // @TODO: Move this to the server
-      return this.challenges.filter((challenge) => {
-        return this.filterChallenge(challenge, filters, search, user);
+      return this.challenges.filter(challenge => {
+        let isMember = true;
+
+        let filteringRole = filters.roles && filters.roles.length > 0;
+        if (filteringRole && filters.roles.indexOf('participating') !== -1) {
+          isMember = this.isMemberOfChallenge(user, challenge);
+        }
+
+        if (filteringRole && filters.roles.indexOf('not_participating') !== -1) {
+          isMember = !this.isMemberOfChallenge(user, challenge);
+        }
+
+        return isMember;
      });
    },
  },
  methods: {
    updateSearch (eventData) {
      this.search = eventData.searchTerm;
+      this.page = 0;
+      this.loadChallenges();
    },
    updateFilters (eventData) {
      this.filters = eventData;
+      this.page = 0;
+      this.loadChallenges();
    },
    createChallenge () {
      this.$store.state.challengeOptions.workingChallenge = {};
@@ -147,14 +175,44 @@ export default {
    },
    async loadChallenges () {
      this.loading = true;
-      this.challenges = await this.$store.dispatch('challenges:getUserChallenges', {
+
+      let categories = '';
+      if (this.filters.categories) {
+        categories = this.filters.categories.join(',');
+      }
+
+      let owned = '';
+      // @TODO: we skip ownership === 2 because it is the same as === 0 right now
+      if (this.filters.ownership && this.filters.ownership.length === 1) {
+        owned = this.filters.ownership[0];
+      }
+
+      const challenges = await this.$store.dispatch('challenges:getUserChallenges', {
+        page: this.page,
+        search: this.search,
+        categories,
+        owned,
        member: true,
      });
+
+      if (this.page === 0) {
+        this.challenges = challenges;
+      } else {
+        this.challenges = this.challenges.concat(challenges);
+      }
+
+      // only show the load more Button if the max count was returned
+      this.showLoadMore = challenges.length === 10;
+
      this.loading = false;
    },
    challengeCreated (challenge) {
      this.challenges.push(challenge);
    },
+    async loadMore () {
+      this.page += 1;
+      this.loadChallenges();
+    },
  },
 };
 </script>
--- a/website/client/components/userLink.vue
+++ b/website/client/components/userLink.vue
@@ -11,10 +11,6 @@
 <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;
--- a/website/client/mixins/challengeUtilities.js
+++ b/website/client/mixins/challengeUtilities.js
@@ -1,48 +1,7 @@
-import intersection from 'lodash/intersection';
-
 export default {
  methods: {
    isMemberOfChallenge (user, challenge) {
      return user.challenges.indexOf(challenge._id) !== -1;
    },
-    isLeaderOfChallenge (user, challenge) {
-      return challenge.leader && user._id === challenge.leader._id;
-    },
-    filterChallenge (challenge, filters, search, user) {
-      let passedSearch = true;
-      let hasCategories = true;
-      let isMember = true;
-      let isLeader = true;
-      let ownerShip = true;
-
-      if (search) {
-        passedSearch = challenge.name.toLowerCase().indexOf(search.toLowerCase()) >= 0;
-      }
-
-      if (filters.categories && filters.categories.length > 0) {
-        let challengeCategories = challenge.categories.map(chal => chal.slug);
-        let intersectingCats = intersection(filters.categories, challengeCategories);
-        hasCategories = intersectingCats.length > 0;
-      }
-
-      let filteringRole = filters.roles && filters.roles.length > 0;
-      if (filteringRole && filters.roles.indexOf('participating') !== -1) {
-        isMember = this.isMemberOfChallenge(user, challenge);
-      }
-
-      if (filteringRole && filters.roles.indexOf('not_participating') !== -1) {
-        isMember = !this.isMemberOfChallenge(user, challenge);
-      }
-
-      if (filters.ownership && filters.ownership.indexOf('not_owned') !== -1) {
-        ownerShip = !this.isLeaderOfChallenge(user, challenge);
-      }
-
-      if (filters.ownership && filters.ownership.indexOf('owned') !== -1) {
-        ownerShip = this.isLeaderOfChallenge(user, challenge);
-      }
-
-      return passedSearch && hasCategories && isMember && isLeader && ownerShip;
-    },
  },
 };
--- a/website/server/controllers/api-v3/challenges.js
+++ b/website/server/controllers/api-v3/challenges.js
@@ -410,7 +410,7 @@ api.getUserChallenges = {
    // Instead of populate we make a find call manually because of https://github.com/Automattic/mongoose/issues/3833
    await Promise.all(resChals.map((chal, index) => {
      return Promise.all([
-        User.findById(chal.leader).select(nameFields).exec(),
+        User.findById(chal.leader).select(`${nameFields} backer contributor`).exec(),
        Group.findById(chal.group).select(basicGroupFields).exec(),
      ]).then(populatedData => {
        resChals[index].leader = populatedData[0] ? populatedData[0].toJSON({minimize: true}) : null;