split profile and profileStats (#10185)

website/client/components/userMenu/profile.vue

@@ -134,146 +134,11 @@ div
           h2.text-center {{$t('questsCompleted')}}
           div(v-for='(value, key) in user.achievements.quests')
             span {{ content.quests[key].text() }} ({{ value }})
-    #stats.standard-page(v-show='selectedPage === "stats"', v-if='user.preferences')
-      .row
-        .col-12.col-md-6
-          h2.text-center {{$t('equipment')}}
-          .well
-            .col-12.col-md-4.item-wrapper(v-for="(label, key) in equipTypes")
-              .box(
-                :id="key",
-                v-if="label !== 'skip'",
-                :class='{white: equippedItems[key] && equippedItems[key].indexOf("base_0") === -1}'
-              )
-                div(:class="`shop_${equippedItems[key]}`")
-              b-popover(
-                v-if="label !== 'skip' && equippedItems[key] && equippedItems[key].indexOf('base_0') === -1",
-                :target="key",
-                triggers="hover",
-                :placement="'bottom'",
-                :preventOverflow="false",
-              )
-                h4.gearTitle {{ getGearTitle(equippedItems[key]) }}
-                attributesGrid.attributesGrid(
-                  :item="content.gear.flat[equippedItems[key]]",
-                )
-
-              h3(v-if="label !== 'skip'") {{ label }}
-        .col-12.col-md-6
-          h2.text-center {{$t('costume')}}
-          .well
-            // Use similar for loop for costume items, except show background if label is 'skip'.
-            .col-12.col-md-4.item-wrapper(v-for="(label, key) in equipTypes")
-              // Append a "C" to the key name since HTML IDs have to be unique.
-              .box(
-                :id="key + 'C'",
-                v-if="label !== 'skip'",
-                :class='{white: costumeItems[key] && costumeItems[key].indexOf("base_0") === -1}'
-              )
-                div(:class="`shop_${costumeItems[key]}`")
-              // Show background on 8th tile rather than a piece of equipment.
-              .box(v-if="label === 'skip'",
-                :class='{white: user.preferences.background}', style="overflow:hidden"
-              )
-                div(:class="'icon_background_' + user.preferences.background")
-              b-popover(
-                v-if="label !== 'skip' && costumeItems[key] && costumeItems[key].indexOf('base_0') === -1",
-                :target="key + 'C'",
-                triggers="hover",
-                :placement="'bottom'",
-                :preventOverflow="false",
-              )
-                h4.gearTitle {{ getGearTitle(costumeItems[key]) }}
-                attributesGrid.attributesGrid(
-                  :item="content.gear.flat[costumeItems[key]]",
-                )
-
-              h3(v-if="label !== 'skip'") {{ label }}
-              h3(v-else) {{ $t('background') }}
-
-      .row.pet-mount-row
-        .col-12.col-md-6
-          h2.text-center(v-once) {{ $t('pets') }}
-          .well.pet-mount-well
-            .row.col-12
-              .col-12.col-md-4
-                .box(:class='{white: user.items.currentPet}')
-                  .Pet(:class="`Pet-${user.items.currentPet}`")
-              .col-12.col-md-8
-                div
-                  | {{ formatAnimal(user.items.currentPet, 'pet') }}
-                div
-                  strong {{ $t('petsFound') }}:
-                  | {{ totalCount(user.items.pets) }}
-                div
-                  strong {{ $t('beastMasterProgress') }}:
-                  | {{ beastMasterProgress(user.items.pets) }}
-        .col-12.col-md-6
-          h2.text-center(v-once) {{ $t('mounts') }}
-          .well.pet-mount-well
-            .row.col-12
-              .col-12.col-md-4
-                .box(:class='{white: user.items.currentMount}')
-                  .mount(:class="`Mount_Icon_${user.items.currentMount}`")
-              .col-12.col-md-8
-                div
-                  | {{ formatAnimal(user.items.currentMount, 'mount') }}
-                div
-                  strong {{ $t('mountsTamed') }}:
-                  span {{ totalCount(user.items.mounts) }}
-                div
-                  strong {{ $t('mountMasterProgress') }}:
-                  span {{ mountMasterProgress(user.items.mounts) }}
-      #attributes.row
-        hr.col-12
-        h2.col-12 {{$t('attributes')}}
-        .col-12.col-md-6(v-for="(statInfo, stat) in stats")
-          .row.col-12.stats-column
-            .col-12.col-md-4.attribute-label
-              span.hint(:popover-title='$t(statInfo.title)', popover-placement='right',
-                :popover='$t(statInfo.popover)', popover-trigger='mouseenter')
-              .stat-title(:class='stat') {{ $t(statInfo.title) }}
-              strong.number {{ statsComputed[stat] | floorWholeNumber }}
-            .col-12.col-md-6
-              ul.bonus-stats
-                li
-                  strong {{$t('level')}}:
-                  | {{statsComputed.levelBonus[stat]}}
-                li
-                  strong {{$t('equipment')}}:
-                  | {{statsComputed.gearBonus[stat]}}
-                li
-                  strong {{$t('class')}}:
-                  | {{statsComputed.classBonus[stat]}}
-                li
-                  strong {{$t('allocated')}}:
-                  | {{user.stats[stat]}}
-                li
-                  strong {{$t('buffs')}}:
-                  | {{user.stats.buffs[stat]}}
-      #allocation(v-if='user._id === userLoggedIn._id && hasClass')
-        .row.title-row
-          .col-12.col-md-6
-            h3(v-if='userLevel100Plus', v-once, v-html="$t('noMoreAllocate')")
-            h3(v-if='user.stats.points || userLevel100Plus')
-              | {{$t('pointsAvailable')}}
-              .counter.badge(v-if='user.stats.points || userLevel100Plus')
-                | {{user.stats.points}} 
-          .col-12.col-md-6
-            .float-right
-              toggle-switch(:label="$t('autoAllocation')",
-                v-model='user.preferences.automaticAllocation',
-                @change='userset({"preferences.automaticAllocation": Boolean(user.preferences.automaticAllocation), "preferences.allocationMode": "taskbased"})')
-
-        .row
-          .col-12.col-md-3(v-for='(statInfo, stat) in allocateStatsList')
-            .box.white.row.col-12
-              .col-12
-                div(:class='stat') {{ $t(stats[stat].title) }}
-                .number {{ user.stats[stat] }}
-                .points {{$t('pts')}}
-              .col-12.col-md-4
-                .up(v-if='user.stats.points', @click='allocate(stat)')
+    profileStats(
+      :user='user',
+      v-show='selectedPage === "stats"',
+      :showAllocation='showAllocation()',
+      v-if='user.preferences')
   send-gems-modal(:userReceivingGems='userReceivingGems')
 </template>
 
@@ -345,15 +210,6 @@ div
     color: #686274;
   }
 
-  .pet-mount-row {
-    margin-top: 2em;
-    margin-bottom: 2em;
-  }
-
-  .mount {
-    margin-top: -0.2em !important;
-  }
-
   .photo img {
     max-width: 100%;
   }
@@ -385,33 +241,6 @@ div
     cursor: pointer;
   }
 
-  #attributes {
-    .number {
-      font-size: 64px;
-      font-weight: bold;
-      color: #686274;
-    }
-
-    .attribute-label {
-      text-align: center;
-    }
-  }
-
-  .well {
-    background-color: #edecee;
-    border-radius: 2px;
-    padding: 0.4em;
-    padding-top: 1em;
-  }
-
-  .well.pet-mount-well {
-    padding-bottom: 1em;
-
-    strong {
-      margin-right: .2em;
-    }
-  }
-
   #achievements {
     .box {
       margin: 0 auto;
@@ -470,107 +299,7 @@ div
     }
   }
 
-  #stats {
-    .box div {
-      margin: 0 auto;
-      margin-top: 1em;
-    }
-  }
 
-  .stats-column {
-    border-radius: 2px;
-    background-color: #ffffff;
-    padding: .5em;
-    margin-bottom: 1em;
-
-    ul {
-      list-style-type: none;
-
-      li strong {
-        margin-right: .3em;
-      }
-    }
-  }
-
-  .stat-title {
-    text-transform: uppercase;
-  }
-
-  .str {
-    color: #f74e52;
-  }
-
-  .int {
-    color: #2995cd;
-  }
-
-  .con {
-    color: #ffa623;
-  }
-
-  .per {
-    color: #4f2a93;
-  }
-
-  #allocation {
-    .title-row {
-      margin-top: 1em;
-      margin-bottom: 1em;
-    }
-
-    .counter.badge {
-      position: relative;
-      top: -0.25em;
-      left: 0.5em;
-      color: #fff;
-      background-color: #ff944c;
-      box-shadow: 0 1px 1px 0 rgba(26, 24, 29, 0.12);
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-    }
-
-    .box {
-      width: 148px;
-      height: 84px;
-      padding: .5em;
-      margin: 0 auto;
-
-      div {
-        margin-top: 0;
-      }
-
-      .number {
-        font-size: 40px;
-        text-align: left;
-        color: #686274;
-        display: inline-block;
-      }
-
-      .points {
-        display: inline-block;
-        font-weight: bold;
-        line-height: 1.67;
-        text-align: left;
-        color: #878190;
-        margin-left: .5em;
-      }
-
-      .up {
-        border: solid #a5a1ac;
-        border-width: 0 3px 3px 0;
-        display: inline-block;
-        padding: 3px;
-        transform: rotate(-135deg);
-        -webkit-transform: rotate(-135deg);
-        margin-top: 1em;
-      }
-
-      .up:hover {
-        cursor: pointer;
-      }
-    }
-  }
 </style>
 
 <script>
@@ -578,25 +307,17 @@ import moment from 'moment';
 import axios from 'axios';
 import each from 'lodash/each';
 import { mapState } from 'client/libs/store';
-import size from 'lodash/size';
-import keys from 'lodash/keys';
 import cloneDeep from 'lodash/cloneDeep';
-import { beastMasterProgress, mountMasterProgress } from '../../../common/script/count';
-import statsComputed from  '../../../common/script/libs/statsComputed';
-import autoAllocate from '../../../common/script/fns/autoAllocate';
-import allocate from  '../../../common/script/ops/stats/allocate';
 
 import MemberDetails from '../memberDetails';
 import sendGemsModal from 'client/components/payments/sendGemsModal';
 import markdown from 'client/directives/markdown';
-import toggleSwitch from 'client/components/ui/toggleSwitch';
 import achievementsLib from '../../../common/script/libs/achievements';
 // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
 const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
 import Content from '../../../common/script/content';
-import attributesGrid from 'client/components/inventory/equipment/attributesGrid';
-const DROP_ANIMALS = keys(Content.pets);
-const TOTAL_NUMBER_OF_DROP_ANIMALS = DROP_ANIMALS.length;
+import profileStats from './profileStats';
+
 
 import message from 'assets/svg/message.svg';
 import gift from 'assets/svg/gift.svg';
@@ -616,8 +337,7 @@ export default {
   components: {
     sendGemsModal,
     MemberDetails,
-    toggleSwitch,
-    attributesGrid,
+    profileStats,
   },
   data () {
     return {
@@ -649,41 +369,6 @@ export default {
       selectedPage: 'profile',
       achievements: {},
       content: Content,
-      equipTypes: {
-        eyewear: this.$t('eyewear'),
-        head: this.$t('headgearCapitalized'),
-        headAccessory: this.$t('headAccess'),
-        back: this.$t('backAccess'),
-        armor: this.$t('armorCapitalized'),
-        body: this.$t('bodyAccess'),
-        weapon: this.$t('mainHand'),
-        _skip: 'skip',
-        shield: this.$t('offHand'),
-      },
-      stats: {
-        str: {
-          title: 'strength',
-          popover: 'strengthText',
-        },
-        int: {
-          title: 'intelligence',
-          popover: 'intText',
-        },
-        con: {
-          title: 'constitution',
-          popover: 'conText',
-        },
-        per: {
-          title: 'perception',
-          popover: 'perText',
-        },
-      },
-      allocateStatsList: {
-        str: { title: 'allocateStr', popover: 'strengthText', allocatepop: 'allocateStrPop' },
-        int: { title: 'allocateInt', popover: 'intText', allocatepop: 'allocateIntPop' },
-        con: { title: 'allocateCon', popover: 'conText', allocatepop: 'allocateConPop' },
-        per: { title: 'allocatePer', popover: 'perText', allocatepop: 'allocatePerPop' },
-      },
     };
   },
   mounted () {
@@ -746,12 +431,7 @@ export default {
     incentivesProgress () {
       return this.getIncentivesProgress();
     },
-    statsComputed () {
-      return statsComputed(this.user);
-    },
-    userLevel100Plus () {
-      return this.user.stats.lvl >= 100;
-    },
+
     classText () {
       let classTexts = {
         warrior: this.$t('warrior'),
@@ -786,9 +466,6 @@ export default {
         userName: this.user.profile.name,
       });
     },
-    getGearTitle (key) {
-      return this.flatGear[key].text();
-    },
     getProgressDisplay () {
       // let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
       // if (!currentLoginDay) return this.$t('checkinReceivedAllRewardsMessage');
@@ -828,60 +505,6 @@ export default {
 
       this.editing = false;
     },
-    formatAnimal (animalName, type) {
-      if (type === 'pet') {
-        if (Content.petInfo.hasOwnProperty(animalName)) {
-          return Content.petInfo[animalName].text();
-        } else {
-          return this.$t('noActivePet');
-        }
-      } else if (type === 'mount') {
-        if (Content.mountInfo.hasOwnProperty(animalName)) {
-          return Content.mountInfo[animalName].text();
-        } else {
-          return this.$t('noActiveMount');
-        }
-      }
-    },
-    formatBackground (background) {
-      let bg = Content.appearances.background;
-
-      if (bg.hasOwnProperty(background)) {
-        return `${bg[background].text()} (${this.$t(bg[background].set.text)})`;
-      }
-
-      return this.$t('noBackground');
-    },
-    totalCount (objectToCount) {
-      let total = size(objectToCount);
-      return total;
-    },
-    beastMasterProgress (pets) {
-      let dropPetsFound = beastMasterProgress(pets);
-      let display = this.formatOutOfTotalDisplay(dropPetsFound, TOTAL_NUMBER_OF_DROP_ANIMALS);
-
-      return display;
-    },
-    mountMasterProgress (mounts) {
-      let dropMountsFound = mountMasterProgress(mounts);
-      let display = this.formatOutOfTotalDisplay(dropMountsFound, TOTAL_NUMBER_OF_DROP_ANIMALS);
-
-      return display;
-    },
-    formatOutOfTotalDisplay (stat, totalStat) {
-      let display = `${stat}/${totalStat}`;
-      return display;
-    },
-    allocate (stat) {
-      allocate(this.user, {query: { stat }});
-      axios.post(`/api/v3/user/allocate?stat=${stat}`);
-    },
-    allocateNow () {
-      autoAllocate(this.user);
-    },
-    userset (settings) {
-      this.$store.dispatch('user:set', settings);
-    },
     blockUser () {
       this.userLoggedIn.inbox.blocks.push(this.user._id);
       axios.post(`/api/v3/user/block/${this.user._id}`);
@@ -925,6 +548,10 @@ export default {
       this.hero = await this.$store.dispatch('hall:getHero', { uuid: this.user._id });
       this.adminToolsLoaded = true;
     },
+    showAllocation () {
+      return this.user._id === this.userLoggedIn._id && this.hasClass;
+    },
+
   },
 };
 </script>