begin building group admin panel

HabitRPG · phillipthelen · May 13, 2025 · May 13, 2025 · May 29, 2025 · May 13, 2025
commit 91ccba9e8ac75a8444fb878959230fe0a812c1d3
diff --git a/website/client/src/components/admin/admin-panel/search.vue b/website/client/src/components/admin/admin-panel/search.vue
@@ -81,7 +81,7 @@ export default {
   watch: {
     userIdentifier () {
       this.isSearching = true;
-      this.$store.dispatch('adminPanel:searchUsers', { userIdentifier: this.userIdentifier }).then(users => {
+      this.$store.dispatch('admin:searchUsers', { userIdentifier: this.userIdentifier }).then(users => {
         this.isSearching = false;
         if (users.length === 1) {
           this.loadUser(users[0]._id);

diff --git a/website/client/src/components/admin/admin-panel/user-support/partyAndQuest.vue b/website/client/src/components/admin/admin-panel/user-support/partyAndQuest.vue
@@ -37,7 +37,11 @@
             Party ID
           </label>
           <strong class="col-sm-9 col-form-label">
+            <router-link
+              :to="{'name': 'groupAdminGroup', 'params': {'groupId': groupPartyData._id}}"
+            >
             {{ groupPartyData._id }}
+            </router-link>
           </strong>
         </div>
         <div class="form-group row">

diff --git a/website/client/src/components/admin/admin-panel/user-support/subscriptionAndPerks.vue b/website/client/src/components/admin/admin-panel/user-support/subscriptionAndPerks.vue
@@ -722,7 +722,7 @@ export default {
       this.hero.purchased.plan.owner = '';
     },
     getSubscriptionPaymentDetails () {
-      this.$store.dispatch('adminPanel:getSubscriptionPaymentDetails', { userIdentifier: this.hero._id })
+      this.$store.dispatch('admin:getSubscriptionPaymentDetails', { userIdentifier: this.hero._id })
         .then(details => {
           if (details) {
             this.paymentDetails = details;

diff --git a/website/client/src/components/admin/admin-panel/user-support/userHistory.vue b/website/client/src/components/admin/admin-panel/user-support/userHistory.vue
@@ -226,7 +226,7 @@ export default {
       }
     },
     async retrieveUserHistory () {
-      const history = await this.$store.dispatch('adminPanel:getUserHistory', { userIdentifier: this.hero._id });
+      const history = await this.$store.dispatch('admin:getUserHistory', { userIdentifier: this.hero._id });
       this.armoire = history.armoire;
       this.questInviteResponses = history.questInviteResponses;
       this.cron = history.cron;

diff --git a/website/client/src/components/admin/container.vue b/website/client/src/components/admin/container.vue
@@ -8,6 +8,13 @@
       >
         {{ $t('adminPanel') }}
       </router-link>
+      <router-link
+        v-if="hasPermission(user, 'groupSupport')"
+        class="nav-link"
+        :to="{name: 'groupAdmin'}"
+      >
+        {{ $t('groupAdmin') }}
+      </router-link>
       <router-link
         v-if="hasPermission(user, 'accessControl')"
         class="nav-link"

diff --git a/website/client/src/components/admin/formRow.vue b/website/client/src/components/admin/formRow.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="form-group row">
+    <label class="col-sm-3 col-form-label"><slot name="label">{{ label }}</slot></label>
+    <div class="col-sm-9">
+      <slot>
+        <textarea
+          v-if="inputType === 'textarea'"
+          :value="value"
+          class="form-control"
+          @input="$emit('input', $event.target.value)"
+          :rows="rows"
+        ></textarea>
+        <input
+          v-else
+          :value="value"
+          class="form-control"
+          :type="inputType"
+          @input="$emit('input', $event.target.value)"
+        >
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+  props: {
+    label: {
+      type: String,
+    },
+    value: {
+      type: [String, Boolean],
+    },
+    inputType: {
+      type: String,
+      default: 'text',
+    },
+    rows: {
+      default: 3,
+    },
+  },
+}
+</script>
diff --git a/website/client/src/components/admin/groups/group-support/groupData.vue b/website/client/src/components/admin/groups/group-support/groupData.vue
@@ -0,0 +1,43 @@
+<template>
+  <form>
+    <form-row
+      v-model="group.name"
+      :label="$t('groupName')"
+      />
+    <form-row
+      v-model="group.summary || ''"
+      :label="$t('guildSummary')"
+      inputType="textarea"
+      />
+    <form-row
+      v-model="group.description || ''"
+      :label="$t('groupDescription')"
+      inputType="textarea"
+      rows="6"
+      />
+    <form-row
+      v-model="group.bannedWordsAllowed || false"
+      :label="$t('bannedWordsAllowed')"
+      inputType="checkbox" />
+    <form-row
+      v-model="group.leaderOnly.challenges || false"
+      :label="$t('leaderOnlyChallenges')"
+      inputType="checkbox" />
+  </form>
+</template>
+
+<script>
+import formRow from '@/components/admin/formRow.vue';
+
+export default {
+  components: {
+    formRow,
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/admin/groups/group-support/index.vue b/website/client/src/components/admin/groups/group-support/index.vue
@@ -0,0 +1,65 @@
+<template>
+  <div v-if="hasPermission(user, 'groupSupport')">
+    <h2>{{ group.name }}</h2>
+    <supportContainer
+      :title="$t('groupData')">
+      <groupData
+        :group="group" />
+    </supportContainer>
+    <supportContainer
+      :title="$t('groupPlanSubscription')">
+    </supportContainer>
+    <supportContainer
+      v-if="group.type === 'party'"
+      :title="$t('questDetails')">
+    </supportContainer>
+    <supportContainer
+      :title="$t('members')">
+      <members
+        :group="group" />
+    </supportContainer>
+  </div>
+</template>
+
+<script>
+import { userStateMixin } from '../../../../mixins/userState';
+import supportContainer from '../../supportContainer.vue';
+import groupData from './groupData.vue';
+import members from './members.vue';
+
+export default {
+    components: {
+      supportContainer,
+      groupData,
+      members,
+    },
+  mixins: [userStateMixin],
+  data () {
+    return {
+      groupId: '',
+      group: {},
+    };
+  },
+  watch: {
+    groupId () {
+      this.loadGroup(this.groupId);
+    },
+  },
+  mounted () {
+    this.groupId = this.$route.params.groupId;
+  },
+  methods: {
+    clearData () {
+      this.group = {};
+    },
+    async loadGroup (groupId) {
+        this.$emit('changeGroupId', groupId);
+        this.group = await this.$store.dispatch('admin:getGroup', { groupId });
+    },
+    async updateGroup () {
+      await this.$store.dispatch('admin:updateGroup', { group: this.group });
+      this.$emit('groupSaved', this.group);
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/admin/groups/group-support/members.vue b/website/client/src/components/admin/groups/group-support/members.vue
@@ -0,0 +1,27 @@
+<template>
+  <form-row
+    :label="$t('groupLeader')">
+    <strong class="col-form-label">
+      <router-link
+        :to="{'name': 'adminPanelUser', 'params': {'userIdentifier':  group.leader }}">
+        {{ group.leader }}
+      </router-link>
+    </strong>
+  </form-row>
+</template>
+
+<script>
+import formRow from '@/components/admin/formRow.vue';
+
+export default {
+  components: {
+    formRow,
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/admin/groups/index.vue b/website/client/src/components/admin/groups/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="row standard-page col-12 d-flex justify-content-center">
+    <div class="group-admin-content">
+      <h1>{{ $t("groupAdmin") }}</h1>
+      <form
+        class="form-inline"
+        @submit.prevent="loadGroup(groupID)"
+      >
+        <div class="input-group col pl-0 pr-0">
+          <input
+            v-model="groupID"
+            class="form-control"
+            type="text"
+            placeholder="Group ID"
+          >
+          <div class="input-group-append">
+            <button
+              class="btn btn-primary"
+              type="button"
+                :disabled="!groupID"
+              @click="loadGroup(groupID)"
+            >
+              Load
+            </button>
+          </div>
+        </div>
+      </form>
+
+      <router-view
+        class="mt-3"
+        @changeGroupId="changeGroupId"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .uidField {
+    min-width: 45ch;
+  }
+
+  .input-group-append {
+    width:auto;
+  }
+
+  .group-admin-content {
+    flex: 0 0 800px;
+    max-width: 800px;
+  }
+</style>
+
+<script>
+import VueRouter from 'vue-router';
+import { mapState } from '@/libs/store';
+
+const { isNavigationFailure, NavigationFailureType } = VueRouter;
+
+export default {
+  data () {
+    return {
+      groupID: '',
+    };
+  },
+  computed: {
+    ...mapState({ user: 'user.data' }),
+  },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('groupAdmin'),
+    });
+  },
+  methods: {
+    changeGroupId (id) {
+      this.groupID = id;
+    },
+    async loadGroup (groupId) {
+      if (this.$router.currentRoute.name === 'groupAdminGroup') {
+        await this.$router.push({
+          name: 'groupAdmin',
+        });
+      }
+      await this.$router.push({
+        name: 'groupAdminGroup',
+        params: { groupId },
+      }).catch(failure => {
+        if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+          this.$router.go();
+        }
+      });
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/admin/supportContainer.vue b/website/client/src/components/admin/supportContainer.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="card mt-2">
+    <div class="card-header">
+      <h3
+        class="mb-0 mt-0"
+        :class="{'open': expand}"
+        @click="expand = !expand"
+      >
+        <slot name="title">{{ title }}</slot>
+      </h3>
+    </div>
+    <div
+      v-if="expand"
+      class="card-body"
+    >
+    <slot></slot>
+    </div>
+    <div
+        v-if="expand && onSave"
+        class="card-footer"
+      >
+        <button
+          class="btn btn-primary mt-1"
+          @click="onSave"
+        >
+          {{ $t('save') }}
+        </button>
+      </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    title: {
+      type: String,
+      required: false,
+    },
+    onSave: {
+      type: Function,
+      required: false,
+    },
+  },
+  data () {
+    return {
+      expand: false,
+    };
+  },
+}
+</script>