From b3ea48c4f5b30747b1b28d159818c05341994bb4 Mon Sep 17 00:00:00 2001
From: CuriousMagpie <eilatan@gmail.com>
Date: Fri, 25 Aug 2023 15:52:41 -0400
Subject: [PATCH] WIP(profile): work on achievement component

---
 .../src/components/userMenu/profile.vue       | 13 ++-
 .../components/userMenu/profileAchievs.vue    | 81 ++++++++++++++++++-
 2 files changed, 89 insertions(+), 5 deletions(-)

diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index a45f37d9b0..833653b4df 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -383,7 +383,14 @@
       </div>
     </div>
     <!-- ACHIEVEMENTS -->
-    <div
+    <div>
+      <profileAchievs
+        v-show="selectedPage === 'achievements'"
+        :user="user"
+      />
+
+    </div>
+<!--     <div
       v-show="selectedPage === 'achievements'"
       v-if="user.achievements"
       id="achievements"
@@ -494,7 +501,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
     <!-- STATS -->
     <div>
       <profileStats
@@ -968,6 +975,7 @@ import markdown from '@/directives/markdown';
 import achievementsLib from '@/../../common/script/libs/achievements';
 import Content from '@/../../common/script/content';
 import profileStats from './profileStats';
+import profileAchievs from './profileAchievs';
 
 import message from '@/assets/svg/message.svg';
 import gift from '@/assets/svg/gift.svg';
@@ -996,6 +1004,7 @@ export default {
   components: {
     MemberDetails,
     profileStats,
+    profileAchievs,
     error404,
     closeX,
     toggle,
diff --git a/website/client/src/components/userMenu/profileAchievs.vue b/website/client/src/components/userMenu/profileAchievs.vue
index 1894f55658..06283bee38 100644
--- a/website/client/src/components/userMenu/profileAchievs.vue
+++ b/website/client/src/components/userMenu/profileAchievs.vue
@@ -1,9 +1,7 @@
 <template>
   <div
-    v-show="selectedPage === 'achievements'"
-    v-if="user.achievements"
     id="achievements"
-    class="standard-page container "
+    class="standard-page"
   >
     <div
       v-for="(category, key) in achievements"
@@ -187,3 +185,80 @@
     }
   }
 </style>
+
+<script>
+// import moment from 'moment';
+// import axios from 'axios';
+// import each from 'lodash/each';
+// import cloneDeep from 'lodash/cloneDeep';
+// import closeX from '../ui/closeX';
+
+import achievementsLib from '@/../../common/script/libs/achievements';
+import Content from '@/../../common/script/content';
+import error404 from '../404';
+// import { userCustomStateMixin } from '../../mixins/userState';
+
+export default {
+  components:
+    error404,
+  // closeX,
+  props: ['userId', 'startingPage'],
+  data () {
+    return {
+      selectedPage: 'achievements',
+      achievements: {},
+      achievementsCategories: {}, // number, open
+      content: Content,
+    };
+  },
+  methods: {
+    async loadUser () {
+      let user = null;
+
+      const profileUserId = this.userId;
+
+      if (profileUserId && profileUserId !== this.userLoggedIn._id) {
+        const response = await this.$store.dispatch('members:fetchMember', {
+          memberId: profileUserId,
+          unpack: false,
+        });
+        if (response.response && response.response.status === 404) {
+          user = null;
+          this.$store.dispatch('snackbars:add', {
+            title: 'Habitica',
+            text: this.$t('messageDeletedUser'),
+            type: 'error',
+            timeout: false,
+          });
+        } else if (response.status && response.status === 200) {
+          user = response.data.data;
+        }
+      } else {
+        user = this.userLoggedIn;
+      }
+
+      if (user) {
+        if (!user.achievements.quests) user.achievements.quests = {};
+        if (!user.achievements.challenges) user.achievements.challenges = {};
+        // @TODO: this common code should handle the above
+        this.achievements = achievementsLib.getAchievementsForProfile(user);
+
+        const achievementsCategories = {};
+        Object.keys(this.achievements).forEach(category => {
+          achievementsCategories[category] = {
+            open: false,
+            number: Object.keys(this.achievements[category].achievements).length,
+          };
+        });
+
+        this.achievementsCategories = achievementsCategories;
+
+        this.user = user;
+      }
+
+      this.userLoaded = true;
+    },
+  },
+};
+
+</script>