Sept 14 2017 (#9037)

* Added new message count

* Added route change for group plan

* Added fix for quest value of 0

* Fixed guild summary limit, guild and challenge height

* Added task sorting

* Added api buy armoire

* Fixed linting

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "habitica",
-  "version": "3.111.5",
+  "version": "3.113.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -68,6 +68,15 @@
         "@types/mime": "1.3.1"
       }
     },
+    "JSONStream": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
+      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
+      "requires": {
+        "jsonparse": "1.3.1",
+        "through": "2.3.8"
+      }
+    },
     "abbrev": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
@@ -2325,9 +2334,9 @@
       "resolved": "https://registry.npmjs.org/browser-pack/-/browser-pack-6.0.2.tgz",
       "integrity": "sha1-+GzWzvT1MAyOY+B6TVEvZfv/RTE=",
       "requires": {
+        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "defined": "1.0.0",
-        "JSONStream": "1.3.1",
         "through2": "2.0.3",
         "umd": "3.0.1"
       }
@@ -2357,6 +2366,7 @@
       "resolved": "https://registry.npmjs.org/browserify/-/browserify-12.0.2.tgz",
       "integrity": "sha1-V/IeXm4wj/WYfE2v1EhAsrmPehk=",
       "requires": {
+        "JSONStream": "1.3.1",
         "assert": "1.3.0",
         "browser-pack": "6.0.2",
         "browser-resolve": "1.11.2",
@@ -2378,7 +2388,6 @@
         "inherits": "2.0.3",
         "insert-module-globals": "7.0.1",
         "isarray": "0.0.1",
-        "JSONStream": "1.3.1",
         "labeled-stream-splicer": "2.0.0",
         "module-deps": "4.1.1",
         "os-browserify": "0.1.2",
@@ -7389,13 +7398,6 @@
             }
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
@@ -7405,6 +7407,13 @@
             "strip-ansi": "3.0.1"
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "stringstream": {
           "version": "0.0.5",
           "bundled": true,
@@ -10353,10 +10362,10 @@
       "resolved": "https://registry.npmjs.org/insert-module-globals/-/insert-module-globals-7.0.1.tgz",
       "integrity": "sha1-wDv04BywhtW15azorQr+eInWOMM=",
       "requires": {
+        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "concat-stream": "1.5.2",
         "is-buffer": "1.1.5",
-        "JSONStream": "1.3.1",
         "lexical-scope": "1.2.0",
         "process": "0.11.10",
         "through2": "2.0.3",
@@ -11349,15 +11358,6 @@
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
       "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk="
     },
-    "JSONStream": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
-      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
-      "requires": {
-        "jsonparse": "1.3.1",
-        "through": "2.3.8"
-      }
-    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -13257,6 +13257,7 @@
       "resolved": "https://registry.npmjs.org/module-deps/-/module-deps-4.1.1.tgz",
       "integrity": "sha1-IyFYM/HaE/1gbMuAh7RIUty4If0=",
       "requires": {
+        "JSONStream": "1.3.1",
         "browser-resolve": "1.11.2",
         "cached-path-relative": "1.0.1",
         "concat-stream": "1.5.2",
@@ -13264,7 +13265,6 @@
         "detective": "4.5.0",
         "duplexer2": "0.1.4",
         "inherits": "2.0.3",
-        "JSONStream": "1.3.1",
         "parents": "1.0.1",
         "readable-stream": "2.0.6",
         "resolve": "1.4.0",
@@ -17234,22 +17234,6 @@
         }
       }
     },
-    "require_optional": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/require_optional/-/require_optional-1.0.1.tgz",
-      "integrity": "sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g==",
-      "requires": {
-        "resolve-from": "2.0.0",
-        "semver": "5.4.1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "5.4.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
-          "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg=="
-        }
-      }
-    },
     "require-again": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/require-again/-/require-again-2.0.0.tgz",
@@ -17289,6 +17273,22 @@
         }
       }
     },
+    "require_optional": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/require_optional/-/require_optional-1.0.1.tgz",
+      "integrity": "sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g==",
+      "requires": {
+        "resolve-from": "2.0.0",
+        "semver": "5.4.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.4.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
+          "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg=="
+        }
+      }
+    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -18223,6 +18223,11 @@
         "is-plain-obj": "1.1.0"
       }
     },
+    "sortablejs": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.6.1.tgz",
+      "integrity": "sha1-0SDRA/u59gx9sngUoThAcubG4IM="
+    },
     "source-list-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.0.tgz",
@@ -18650,11 +18655,6 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
-    "string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
-    },
     "string-length": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-0.1.2.tgz",
@@ -18688,6 +18688,11 @@
         "strip-ansi": "3.0.1"
       }
     },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+    },
     "stringify-object": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-1.0.1.tgz",

package.json

@@ -113,6 +113,7 @@
     "sass-loader": "^6.0.2",
     "serve-favicon": "^2.3.0",
     "shelljs": "^0.7.6",
+    "sortablejs": "^1.6.1",
     "stripe": "^4.2.0",
     "superagent": "^3.4.3",
     "svg-inline-loader": "^0.7.1",

website/client/components/appMenu.vue

@@ -68,7 +68,9 @@ div
           a.dropdown-item.edit-avatar.dropdown-separated(@click='showAvatar()')
             h3 {{ user.profile.name }}
             span.small-text {{ $t('editAvatar') }}
-          a.nav-link.dropdown-item(@click.prevent='showInbox()') {{ $t('messages') }}
+          a.nav-link.dropdown-item(@click.prevent='showInbox()')
+            | {{ $t('messages') }}
+            span.message-count(v-if='user.inbox.newMessages > 0') {{user.inbox.newMessages}}
           a.dropdown-item(@click='showAvatar("backgrounds", "2017")') {{ $t('backgrounds') }}
           a.dropdown-item(@click='showProfile("stats")') {{ $t('stats') }}
           a.dropdown-item(@click='showProfile("achievements")') {{ $t('achievements') }}
@@ -261,9 +263,22 @@ div
   .gem:hover {
     cursor: pointer;
   }
+
+  .message-count {
+    background-color: #46a7d9;
+    border-radius: 50%;
+    height: 20px;
+    width: 20px;
+    float: right;
+    color: #fff;
+    text-align: center;
+    font-weight: bold;
+    font-size: 12px;
+  }
 </style>
 
 <script>
+import axios from 'axios';
 import bNavToggle from 'bootstrap-vue/lib/components/nav-toggle';
 import bCollapse from 'bootstrap-vue/lib/components/collapse';
 
@@ -278,6 +293,7 @@ import InboxModal from './userMenu/inbox.vue';
 import notificationMenu from './notificationMenu';
 import creatorIntro from './creatorIntro';
 import profile from './userMenu/profile';
+import markPMSRead from 'common/script/ops/markPMSRead';
 
 export default {
   components: {
@@ -317,6 +333,8 @@ export default {
       this.$store.dispatch('auth:logout');
     },
     showInbox () {
+      markPMSRead(this.user);
+      axios.post('/api/v3/user/mark-pms-read');
       this.$root.$emit('show::modal', 'inbox-modal');
     },
     showAvatar (startingPage, subpage) {

website/client/components/challenges/challengeItem.vue

@@ -55,7 +55,7 @@
     background-color: $white;
     box-shadow: 0 2px 2px 0 $gray-600, 0 1px 4px 0 $gray-600;
     padding: 2em;
-    height: 325px;
+    height: 350px;
     margin-bottom: 1em;
 
     .gem {
@@ -107,6 +107,7 @@
       margin-top: 1em;
       margin-bottom: 1em;
       overflow: hidden;
+      height: 80px;
     }
 
     .well-wrapper {

website/client/components/group-plans/taskInformation.vue

@@ -255,6 +255,7 @@ export default {
   },
   data () {
     return {
+      searchId: '',
       columns: ['habit', 'daily', 'todo', 'reward'],
       tasksByType: {
         habit: [],
@@ -284,27 +285,17 @@ export default {
       group: {},
     };
   },
-  async mounted () {
+  watch: {
-    this.group = await this.$store.dispatch('guilds:getGroup', {
+    // call again the method if the route changes (when this route is already active)
-      groupId: this.groupId,
+    $route: 'load',
-    });
+  },
-
+  beforeRouteUpdate (to, from, next) {
-    let members = await this.$store.dispatch('members:getGroupMembers', {groupId: this.groupId});
+    this.$set(this, 'searchId', to.params.groupId);
-    this.group.members = members;
+    next();
-
+  },
-    let tasks = await this.$store.dispatch('tasks:getGroupTasks', {
+  mounted () {
-      groupId: this.groupId,
+    if (!this.searchId) this.searchId = this.groupId;
-    });
+    this.load();
-
-    let approvalRequests = await this.$store.dispatch('tasks:getGroupApprovals', {
-      groupId: this.groupId,
-    });
-    let groupedApprovals = groupBy(approvalRequests, 'group.taskId');
-
-    tasks.forEach((task) => {
-      task.approvals = groupedApprovals[task._id];
-      this.tasksByType[task.type].push(task);
-    });
   },
   computed: {
     ...mapState({user: 'user.data'}),
@@ -339,6 +330,35 @@ export default {
     },
   },
   methods: {
+    async load () {
+      this.tasksByType = {
+        habit: [],
+        daily: [],
+        todo: [],
+        reward: [],
+      };
+
+      this.group = await this.$store.dispatch('guilds:getGroup', {
+        groupId: this.searchId,
+      });
+
+      let members = await this.$store.dispatch('members:getGroupMembers', {groupId: this.searchId});
+      this.group.members = members;
+
+      let tasks = await this.$store.dispatch('tasks:getGroupTasks', {
+        groupId: this.searchId,
+      });
+
+      let approvalRequests = await this.$store.dispatch('tasks:getGroupApprovals', {
+        groupId: this.searchId,
+      });
+      let groupedApprovals = groupBy(approvalRequests, 'group.taskId');
+
+      tasks.forEach((task) => {
+        task.approvals = groupedApprovals[task._id];
+        this.tasksByType[task.type].push(task);
+      });
+    },
     editTask (task) {
       this.taskFormPurpose = 'edit';
       this.editingTask = cloneDeep(task);

website/client/components/groups/publicGuildItem.vue

@@ -3,18 +3,19 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
   .card
     .card-block
       .row
-        .col-md-2
+        .col-md-2.badge-column
-          .svg-icon.shield(v-html="icons.goldGuildBadge", v-if='guild.memberCount > 1000')
+          .shield-wrap
-          .svg-icon.shield(v-html="icons.silverGuildBadgeIcon", v-if='guild.memberCount > 100 && guild.memberCount < 999')
+            .svg-icon.shield(v-html="icons.goldGuildBadge", v-if='guild.memberCount > 1000')
-          .svg-icon.shield(v-html="icons.bronzeGuildBadgeIcon", v-if='guild.memberCount < 100')
+            .svg-icon.shield(v-html="icons.silverGuildBadgeIcon", v-if='guild.memberCount > 100 && guild.memberCount < 999')
-          .member-count {{guild.memberCount}}
+            .svg-icon.shield(v-html="icons.bronzeGuildBadgeIcon", v-if='guild.memberCount < 100')
+            .member-count {{guild.memberCount}}
         .col-md-10
           .row
             .col-md-8
                 router-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
                   h3 {{ guild.name }}
-                p(v-if='guild.summary', v-markdown='guild.summary')
+                p.summary(v-if='guild.summary') {{guild.summary.substr(0, MAX_SUMMARY_SIZE_FOR_GUILDS)}}
-                p(v-else) {{ guild.name }}
+                p.summary(v-else) {{ guild.name }}
             .col-md-2.cta-container
               button.btn.btn-danger(v-if='isMember && displayLeave' @click='leave()', v-once) {{ $t('leave') }}
               button.btn.btn-success(v-if='!isMember'  @click='join()', v-once) {{ $t('join') }}
@@ -41,7 +42,7 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
   }
 
   .card {
-    height: 160px;
+    min-height: 160px;
     border-radius: 4px;
     background-color: $white;
     box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
@@ -73,8 +74,17 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
 
     .shield {
       width: 70px;
-      margin: 0 auto;
+    }
-      margin-top: 2em;
+
+    .badge-column {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .shield-wrap {
+        display: inline-block;
+        height: 70px;
+      }
     }
 
     .guild-bank {
@@ -117,6 +127,7 @@ import gemIcon from 'assets/svg/gem.svg';
 import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge-large.svg';
 import silverGuildBadgeIcon from 'assets/svg/silver-guild-badge-large.svg';
 import bronzeGuildBadgeIcon from 'assets/svg/bronze-guild-badge-large.svg';
+import { MAX_SUMMARY_SIZE_FOR_GUILDS } from 'common/script/constants';
 
 export default {
   mixins: [groupUtilities],
@@ -132,6 +143,7 @@ export default {
   },
   data () {
     return {
+      MAX_SUMMARY_SIZE_FOR_GUILDS,
       icons: Object.freeze({
         gem: gemIcon,
         goldGuildBadge: goldGuildBadgeIcon,

website/client/components/groups/startQuestModal.vue

@@ -3,7 +3,7 @@
     .left-panel.content
       h3.text-center Quests
       .row
-        .col-4.quest-col(v-for='(value, key, index) in user.items.quests', @click='selectQuest(key)', :class="{selected: key === selectedQuest}")
+        .col-4.quest-col(v-for='(value, key, index) in user.items.quests', @click='selectQuest(key)', :class="{selected: key === selectedQuest}", v-if='value > 0')
           .quest-wrapper
             .quest(:class="'inventory_quest_scroll_' + key")
       .row
@@ -80,6 +80,7 @@
     left: -22em;
     z-index: -1;
     padding: 2em;
+    overflow: scroll;
 
     h3 {
       color: $white;

website/client/components/tasks/column.vue

@@ -9,7 +9,7 @@
         :class="{active: activeFilter.label === filter.label}",
         @click="activateFilter(type, filter)",
       ) {{ $t(filter.label) }}
-  .tasks-list(ref="taskList")
+  .tasks-list(ref="taskList", v-sortable='', @onsort='sorted')
     task(
       v-for="task in taskList",
       :key="task.id", :task="task",
@@ -171,6 +171,7 @@ import rewardIcon from 'assets/svg/reward.svg';
 import bModal from 'bootstrap-vue/lib/components/modal';
 import shopItem from '../shops/shopItem';
 import throttle from 'lodash/throttle';
+import sortable from 'client/directives/sortable.directive';
 
 export default {
   components: {
@@ -178,6 +179,9 @@ export default {
     bModal,
     shopItem,
   },
+  directives: {
+    sortable,
+  },
   props: ['type', 'isUser', 'searchText', 'selectedTags', 'taskListOverride', 'group'], // @TODO: maybe we should store the group on state?
   data () {
     const types = Object.freeze({
@@ -268,6 +272,20 @@ export default {
   },
   methods: {
     ...mapActions({loadCompletedTodos: 'tasks:fetchCompletedTodos'}),
+    sorted (data) {
+      const sorting = this.taskList;
+      const taskIdToMove = this.taskList[data.oldIndex]._id;
+
+      if (sorting) {
+        const deleted = sorting.splice(data.oldIndex, 1);
+        sorting.splice(data.newIndex, 0, deleted[0]);
+      }
+
+      this.$store.dispatch('tasks:move', {
+        taskId: taskIdToMove,
+        position: data.newIndex,
+      });
+    },
     editTask (task) {
       this.$emit('editTask', task);
     },

website/client/directives/sortable.directive.js

@@ -0,0 +1,23 @@
+import Sortable from 'sortablejs';
+
+let emit = (vnode, eventName, data) => {
+  let handlers = vnode.data && vnode.data.on ||
+    vnode.componentOptions && vnode.componentOptions.listeners;
+
+  if (handlers && handlers[eventName]) {
+    handlers[eventName].fns(data);
+  }
+};
+
+export default {
+  bind (el, binding, vnode) {
+    Sortable.create(el, {
+      onSort: (evt) => {
+        emit(vnode, 'onsort', {
+          oldIndex: evt.oldIndex,
+          newIndex: evt.newIndex,
+        });
+      },
+    });
+  },
+};

website/client/store/actions/shops.js

@@ -86,6 +86,7 @@ export function genericPurchase (store, params) {
         });
       }
 
+      axios.post('/api/v3/user/buy-armoire');
       return;
     case 'marketGear':
       return buyItem(store, params);

website/client/store/actions/tasks.js

@@ -195,3 +195,8 @@ export async function unlinkAllTasks (store, payload) {
   let response = await axios.post(`/api/v3/tasks/unlink-all/${payload.challengeId}?keep=${payload.keep}`);
   return response.data.data;
 }
+
+export async function move (store, payload) {
+  let response = await axios.post(`/api/v3/tasks/${payload.taskId}/move/to/${payload.position}`);
+  return response.data.data;
+}

website/common/script/constants.js

@@ -6,7 +6,7 @@ export const MAX_INCENTIVES = 500;
 
 export const TAVERN_ID = '00000000-0000-4000-A000-000000000000';
 export const LARGE_GROUP_COUNT_MESSAGE_CUTOFF = 5000;
-export const MAX_SUMMARY_SIZE_FOR_GUILDS = 500;
+export const MAX_SUMMARY_SIZE_FOR_GUILDS = 250;
 export const MAX_SUMMARY_SIZE_FOR_CHALLENGES = 250;
 export const MIN_SHORTNAME_SIZE_FOR_CHALLENGES = 3;