Improve Adminpanel with local logs (#15404)

* log armoire, quoest response and cron events to history

* show user history in admin panel

* allow stats to be edited from admin panel

* Improve admin panel stats input

* improve setting client in history

* fix tests

* fix lint

* fix armoire buying issue

* Improve hero saving

* Formatting fix

* Improve user history logging

* allow class to be changed from admin panel

* make terminating subscriptions easier

* support decimal extraMonths

* Fix editing some achievements in admin panel

* log if a user invites party to quest

* Log more quest events into user history

* make userhistory length configurable

* fix some numbered achievements

* fix extraMonths field

* Automatically set up group plan subs with admin panel

* show party info nicer in admin panel

* improve admin panel sub handling

* add missing brace

* display when there are unsaved changes

* fix setting group plan

* fix showing group id

* Display group plan info in admin panel

* fix setting hourglass promo date

* Improve termination handling in admin panel

* reload data after certain save events in admin panel

* remove console

* fix plan.extraMonths not being reset if terminating a sub

* add more options when cancelling subs

* reload data after group plan change

* Add a way to remove users from a party

* fix issue with removing user from party

* pass party id correctly

* correctly call async function

* Improve sub display in admin panel

* fix line length

* fix line

* shorter

* plaid

* fix(lint): vue code style

---------

Co-authored-by: Kalista Payne <sabrecat@gmail.com>

website/client/src/components/admin-panel/user-support/index.vue

@@ -15,10 +15,17 @@
         <privileges-and-gems
           :hero="hero"
           :reset-counter="resetCounter"
+          :has-unsaved-changes="hasUnsavedChanges([hero.flags, unModifiedHero.flags],
+                                                 [hero.auth, unModifiedHero.auth],
+                                                 [hero.balance, unModifiedHero.balance],
+                                                 [hero.secret, unModifiedHero.secret])"
         />
 
         <subscription-and-perks
           :hero="hero"
+          :group-plans="groupPlans"
+          :has-unsaved-changes="hasUnsavedChanges([hero.purchased.plan,
+                                                   unModifiedHero.purchased.plan])"
         />
 
         <cron-and-auth
@@ -29,6 +36,7 @@
         <user-profile
           :hero="hero"
           :reset-counter="resetCounter"
+          :has-unsaved-changes="hasUnsavedChanges([hero.profile, unModifiedHero.profile])"
         />
 
         <party-and-quest
@@ -47,6 +55,12 @@
           :preferences="hero.preferences"
         />
 
+        <stats
+          :hero="hero"
+          :has-unsaved-changes="hasUnsavedChanges([hero.stats, unModifiedHero.stats])"
+          :reset-counter="resetCounter"
+        />
+
         <items-owned
           :hero="hero"
           :reset-counter="resetCounter"
@@ -67,8 +81,18 @@
           :reset-counter="resetCounter"
         />
 
+        <user-history
+          :hero="hero"
+          :reset-counter="resetCounter"
+        />
+
         <contributor-details
           :hero="hero"
+          :hasUnsavedChanges="hasUnsavedChanges(
+            [hero.contributor, unModifiedHero.contributor],
+            [hero.permissions, unModifiedHero.permissions],
+            [hero.secret, unModifiedHero.secret],
+          )"
           :reset-counter="resetCounter"
           @clear-data="clearData"
         />
@@ -109,6 +133,7 @@
 </style>
 
 <script>
+import isEqualWith from 'lodash/isEqualWith';
 import BasicDetails from './basicDetails';
 import ItemsOwned from './itemsOwned';
 import CronAndAuth from './cronAndAuth';
@@ -121,6 +146,8 @@ import Transactions from './transactions';
 import SubscriptionAndPerks from './subscriptionAndPerks';
 import CustomizationsOwned from './customizationsOwned.vue';
 import Achievements from './achievements.vue';
+import UserHistory from './userHistory.vue';
+import Stats from './stats.vue';
 
 import { userStateMixin } from '../../../mixins/userState';
 
@@ -135,6 +162,8 @@ export default {
     PrivilegesAndGems,
     ContributorDetails,
     Transactions,
+    UserHistory,
+    Stats,
     SubscriptionAndPerks,
     UserProfile,
     Achievements,
@@ -148,8 +177,10 @@ export default {
     return {
       userIdentifier: '',
       resetCounter: 0,
+      unModifiedHero: {},
       hero: {},
       party: {},
+      groupPlans: [],
       hasParty: false,
       partyNotExistError: false,
       adminHasPrivForParty: true,
@@ -168,6 +199,7 @@ export default {
   },
   methods: {
     clearData () {
+      this.unModifiedHero = {};
       this.hero = {};
     },
 
@@ -176,6 +208,7 @@ export default {
       this.$emit('changeUserIdentifier', id); // change user identifier in Admin Panel's form
 
       this.hero = await this.$store.dispatch('hall:getHero', { uuid: id });
+      this.unModifiedHero = JSON.parse(JSON.stringify(this.hero));
 
       if (!this.hero.flags) {
         this.hero.flags = {
@@ -206,8 +239,38 @@ export default {
         }
       }
 
+      if (this.hero.purchased.plan.planId === 'group_plan_auto') {
+        try {
+          this.groupPlans = await this.$store.dispatch('hall:getHeroGroupPlans', { heroId: this.hero._id });
+        } catch (e) {
+          this.groupPlans = [];
+        }
+      }
+
       this.resetCounter += 1; // tell child components to reinstantiate from scratch
     },
+    hasUnsavedChanges (...comparisons) {
+      for (const index in comparisons) {
+        if (index && comparisons[index]) {
+          const objs = comparisons[index];
+          const obj1 = objs[0];
+          const obj2 = objs[1];
+          if (!isEqualWith(obj1, obj2, (x, y) => {
+            if (typeof x === 'object' && typeof y === 'object') {
+              return undefined;
+            }
+            if (x === false && y === undefined) {
+              // Special case for checkboxes
+              return true;
+            }
+            return x == y; // eslint-disable-line eqeqeq
+          })) {
+            return true;
+          }
+        }
+      }
+      return false;
+    },
   },
 };
 </script>