From 665b934e35911efc378f6692256b570e8261ba29 Mon Sep 17 00:00:00 2001
From: Phillip Thelen <phillip@habitica.com>
Date: Tue, 3 Sep 2024 13:11:53 +0200
Subject: [PATCH] Improve admin panel stats input

---
 .../admin-panel/user-support/stats-row.vue    |  70 +++++
 .../admin-panel/user-support/stats.vue        | 280 ++++++++----------
 .../user-support/subscriptionAndPerks.vue     |   1 +
 .../admin-panel/user-support/userProfile.vue  |   5 +-
 4 files changed, 201 insertions(+), 155 deletions(-)
 create mode 100644 website/client/src/components/admin-panel/user-support/stats-row.vue

diff --git a/website/client/src/components/admin-panel/user-support/stats-row.vue b/website/client/src/components/admin-panel/user-support/stats-row.vue
new file mode 100644
index 0000000000..ceec653771
--- /dev/null
+++ b/website/client/src/components/admin-panel/user-support/stats-row.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="form-group row">
+    <label class="col-sm-3 col-form-label"
+    :class="color">{{ label }}</label>
+    <div class="col-sm-9">
+      <input
+        v-bind:value="value"
+        v-on:input="$emit('input', parseInt($event.target.value, 10))"
+        class="form-control"
+        type="number"
+        :step="step"
+        :max="max"
+        :min="min"
+      >
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .about-row {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
+  .red-label {
+    color: $red_100;
+  }
+  .blue-label {
+    color: $blue_100;
+  }
+  .purple-label {
+    color: $purple_300;
+  }
+  .yellow-label {
+    color: $yellow_50;
+  }
+</style>
+
+<script>
+export default {
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    color: {
+      type: String,
+      default: 'text-label',
+    },
+    value: {
+      type: Number,
+      required: true,
+    },
+    step: {
+      type: String,
+      default: 'any',
+    },
+    min: {
+    },
+    max: {
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/admin-panel/user-support/stats.vue b/website/client/src/components/admin-panel/user-support/stats.vue
index 023cf39e0b..6a654dd5d6 100644
--- a/website/client/src/components/admin-panel/user-support/stats.vue
+++ b/website/client/src/components/admin-panel/user-support/stats.vue
@@ -14,151 +14,107 @@
         v-if="expand"
         class="card-body"
       >
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label red-label">Health</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.stats.hp"
-              class="form-control"
-              type="number"
-            >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label yellow-label">Experience</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.stats.exp"
-              class="form-control"
-              type="number"
-            >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label blue-label">Mana</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.stats.mp"
-              class="form-control"
-              type="number"
-            >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Level</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.stats.lvl"
-              class="form-control"
-              type="number"
-            >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Gold</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.stats.gp"
-              class="form-control"
-              type="number"
-            >
-          </div>
-        </div>
+        <stats-row
+          label="Health"
+          color="red-label"
+          :max="maxHealth"
+          v-model="hero.stats.hp" />
+        <stats-row
+          label="Experience"
+          color="yellow-label"
+          min="0"
+          :max="maxFieldHardCap"
+          v-model="hero.stats.exp" />
+        <stats-row
+          label="Mana"
+          color="blue-label"
+          min="0"
+          :max="maxFieldHardCap"
+          v-model="hero.stats.mp" />
+        <stats-row
+          label="Level"
+          step="1"
+          min="0"
+          :max="maxLevelHardCap"
+          v-model="hero.stats.lvl" />
+        <stats-row
+          label="Gold"
+          min="0"
+          :max="maxFieldHardCap"
+          v-model="hero.stats.gp" />
         <h3>Stat Points</h3>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">Unallocated</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.stats.points"
-              class="form-control"
-              type="number"
-            >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label red-label">Strength</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.stats.str"
-              class="form-control"
-              type="number"
-            >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label blue-label">Intelligence</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.stats.int"
-              class="form-control"
-              type="number"
-            >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label purple-label">Perception</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.stats.per"
-              class="form-control"
-              type="number"
-            >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label yellow-label">Constitution</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.stats.con"
-              class="form-control"
-              type="number"
-            >
-          </div>
-        </div>
+        <stats-row
+          label="Unallocated"
+          min="0"
+          step="1"
+          :max="maxStatPoints"
+          v-model="hero.stats.points" />
+        <stats-row
+          label="Strength"
+          color="red-label"
+          min="0"
+          :max="maxStatPoints"
+          step="1"
+          v-model="hero.stats.str" />
+        <stats-row
+          label="Intelligence"
+          color="blue-label"
+          min="0"
+          :max="maxStatPoints"
+          step="1"
+          v-model="hero.stats.int" />
+        <stats-row
+          label="Perception"
+          color="purple-label"
+          min="0"
+          :max="maxStatPoints"
+          step="1"
+          v-model="hero.stats.per" />
+        <stats-row
+          label="Constitution"
+          color="yellow-label"
+          min="0"
+          :max="maxStatPoints"
+          step="1"
+          v-model="hero.stats.con" />
         <div class="form-group row" v-if="statPointsIncorrect">
-          <label class="col-sm-3 col-form-label"></label>
-          <div class="col-sm-9 red-label">Error: Sum of stat points should equal the users level
+          <div class="offset-sm-3 col-sm-9 red-label">
+            Error: Sum of stat points should equal the users level
           </div>
         </div>
         <h3>Buffs</h3>
+        <stats-row
+          label="Strength"
+          color="red-label"
+          min="0"
+          step="1"
+          v-model="hero.stats.buffs.str" />
+        <stats-row
+          label="Intelligence"
+          color="blue-label"
+          min="0"
+          step="1"
+          v-model="hero.stats.buffs.int" />
+        <stats-row
+          label="Perception"
+          color="purple-label"
+          min="0"
+          step="1"
+          v-model="hero.stats.buffs.per" />
+        <stats-row
+          label="Constitution"
+          color="yellow-label"
+          min="0"
+          step="1"
+          v-model="hero.stats.buffs.con" />
         <div class="form-group row">
-          <label class="col-sm-3 col-form-label red-label">Strength</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.stats.buffs.str"
-              class="form-control"
-              type="number"
-            >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label blue-label">Intelligence</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.stats.buffs.int"
-              class="form-control"
-              type="number"
-            >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label purple-label">Perception</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.stats.buffs.per"
-              class="form-control"
-              type="number"
-            >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label yellow-label">Constitution</label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.stats.buffs.con"
-              class="form-control"
-              type="number"
-            >
+          <div class="offset-sm-3 col-sm-9">
+            <button
+              type="button"
+              class="btn btn-warning btn-sm"
+              @click="resetBuffs">
+              Reset Buffs
+            </button>
           </div>
         </div>
       </div>
@@ -183,28 +139,23 @@
     margin-left: 0px;
     margin-right: 0px;
   }
-
-  .red-label {
-    color: $red_100;
-  }
-  .blue-label {
-    color: $blue_100;
-  }
-  .purple-label {
-    color: $purple_300;
-  }
-  .yellow-label {
-    color: $yellow_50;
-  }
 </style>
 
 <script>
+import {
+  MAX_HEALTH,
+  MAX_STAT_POINTS,
+  MAX_LEVEL_HARD_CAP,
+  MAX_FIELD_HARD_CAP,
+} from '@/../../common/script/constants';
 import markdownDirective from '@/directives/markdown';
 import saveHero from '../mixins/saveHero';
 
 import { mapState } from '@/libs/store';
 import { userStateMixin } from '../../../mixins/userState';
 
+import StatsRow from './stats-row';
+
 function resetData (self) {
   self.expand = false;
 }
@@ -213,6 +164,9 @@ export default {
   directives: {
     markdown: markdownDirective,
   },
+  components: {
+    StatsRow,
+  },
   mixins: [
     userStateMixin,
     saveHero,
@@ -244,6 +198,10 @@ export default {
   data () {
     return {
       expand: false,
+      maxHealth: MAX_HEALTH,
+      maxStatPoints: MAX_STAT_POINTS,
+      maxLevelHardCap: MAX_LEVEL_HARD_CAP,
+      maxFieldHardCap: MAX_FIELD_HARD_CAP,
     };
   },
   watch: {
@@ -259,8 +217,22 @@ export default {
       if (this.statPointsIncorrect) {
         return;
       }
-      this.saveHero({hero: { stats: this.hero.stats }, msg: 'Stats'})
+      this.saveHero({
+        hero: {
+          _id: this.hero._id,
+          stats: this.hero.stats,
+        },
+        msg: 'Stats',
+      });
     },
-  }
+    resetBuffs () {
+      this.hero.stats.buffs = {
+        str: 0,
+        int: 0,
+        per: 0,
+        con: 0,
+      };
+    },
+  },
 };
 </script>
diff --git a/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue b/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
index 27e9105a6c..267daa8364 100644
--- a/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
+++ b/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
@@ -1,5 +1,6 @@
 <template>
   <form @submit.prevent="saveHero({ hero: {
+    _id: hero._id,
     purchased: hero.purchased
     }, msg: 'Subscription Perks' })">
     <div class="card mt-2">
diff --git a/website/client/src/components/admin-panel/user-support/userProfile.vue b/website/client/src/components/admin-panel/user-support/userProfile.vue
index 1baf3cf15e..50c5db2bcd 100644
--- a/website/client/src/components/admin-panel/user-support/userProfile.vue
+++ b/website/client/src/components/admin-panel/user-support/userProfile.vue
@@ -1,5 +1,8 @@
 <template>
-  <form @submit.prevent="saveHero({hero: { profile: hero.profile }, msg: 'Users Profile'})">
+  <form @submit.prevent="saveHero({hero: {
+      _id: hero._id,
+      profile: hero.profile
+    }, msg: 'Users Profile'})">
     <div class="card mt-2">
       <div class="card-header">
         <h3