[WIP] New client challenges (#8842)

* 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

website/client/components/challenges/myChallenges.vue

@@ -0,0 +1,142 @@
+<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
+          .svg-icon.positive-icon(v-html="icons.positiveIcon")
+          span(v-once, @click='createChallenge()') {{$t('createChallenge')}}
+
+    .row
+      .no-challenges.text-center.col-md-6.offset-3(v-if='challenges.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 challenges')
+        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 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: [
+        // {
+        //   _id: 1,
+        //   title: 'I am the Night! (Official TAKE THIS Challenge June 2017)',
+        //   memberCount: 5261,
+        //   endDate: '2017-04-04',
+        //   tags: ['Habitica Official', 'Tag'],
+        //   prize: 10,
+        //   description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.',
+        //   counts: {
+        //     habit: 0,
+        //     dailies: 2,
+        //     todos: 2,
+        //     rewards: 0,
+        //   },
+        // },
+        // {
+        //   _id: 2,
+        //   title: '30-Day Money Cleanse 💰',
+        //   memberCount: 112,
+        //   endDate: '2017-04-05',
+        //   tags: ['Owned', 'Tag'],
+        //   prize: 10,
+        //   description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.',
+        //   counts: {
+        //     habit: 0,
+        //     dailies: 2,
+        //     todos: 30,
+        //     rewards: 0,
+        //   },
+        // },
+      ],
+      sortOptions: [],
+    };
+  },
+  mounted () {
+    this.loadchallanges();
+  },
+  methods: {
+    updateSearch () {
+
+    },
+    updateFilters () {
+
+    },
+    createChallenge () {
+      this.$root.$emit('show::modal', 'challenge-modal');
+    },
+    async loadchallanges () {
+      this.challenges = await this.$store.dispatch('challenges:getUserChallenges');
+    },
+  },
+};
+</script>