Move character groups config into tab in characters page (#849)

Author: Tim020

client/src/router/index.js

@@ -45,12 +45,6 @@ const routes = [
         component: () => import('../views/show/config/ConfigCharacters.vue'),
         meta: { requiresAuth: true, requiresShowAccess: true },
       },
-      {
-        name: 'show-config-character-groups',
-        path: 'character-groups',
-        component: () => import('../views/show/config/ConfigCharacterGroups.vue'),
-        meta: { requiresAuth: true, requiresShowAccess: true },
-      },
       {
         name: 'show-config-acts',
         path: 'acts',

client/src/views/show/ShowConfigView.vue

@@ -32,15 +32,6 @@
             >
               Characters
             </b-button>
-            <b-button
-              :disabled="!shouldViewShowConfig"
-              replace
-              :to="{ name: 'show-config-character-groups' }"
-              variant="outline-info"
-              active-class="active"
-            >
-              Character Groups
-            </b-button>
             <b-button
               :disabled="!shouldViewShowConfig"
               replace

client/src/views/show/config/ConfigCharacters.vue

@@ -53,6 +53,9 @@
               class="justify-content-center"
             />
           </b-tab>
+          <b-tab title="Character Groups">
+            <character-groups />
+          </b-tab>
           <b-tab title="Line Counts">
             <character-line-stats />
           </b-tab>
@@ -154,10 +157,11 @@ import { required } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import CharacterLineStats from '@/vue_components/show/config/characters/CharacterLineStats.vue';
 import log from 'loglevel';
+import CharacterGroups from '@/vue_components/show/config/characters/CharacterGroups.vue';
 
 export default {
   name: 'ConfigCharacters',
-  components: { CharacterLineStats },
+  components: { CharacterGroups, CharacterLineStats },
   data() {
     return {
       rowsPerPage: 15,

…ws/show/config/ConfigCharacterGroups.vue …ow/config/characters/CharacterGroups.vueclient/src/views/show/config/ConfigCharacterGroups.vue renamed to client/src/vue_components/show/config/characters/CharacterGroups.vue client/src/views/show/config/ConfigCharacterGroups.vue renamed to client/src/vue_components/show/config/characters/CharacterGroups.vue

@@ -1,61 +1,56 @@
 <template>
-  <b-container class="mx-0" fluid>
-    <b-row>
-      <b-col>
-        <h5>Character Groups</h5>
-        <b-table
-          id="character-group-table"
-          :items="CHARACTER_GROUP_LIST"
-          :fields="characterGroupFields"
-          :per-page="rowsPerPage"
-          :current-page="currentPage"
-          show-empty
-        >
-          <template #head(btn)="data">
-            <b-button v-if="IS_SHOW_EDITOR" v-b-modal.new-character-group variant="outline-success">
-              New Character Group
-            </b-button>
-          </template>
-          <template #cell(characters)="data">
-            <div style="overflow-wrap: break-word">
-              <p>
-                {{
-                  CHARACTER_LIST.filter((c) => data.item.characters.includes(c.id))
-                    .map((c) => c.name)
-                    .join(', ')
-                }}
-              </p>
-            </div>
-          </template>
-          <template #cell(btn)="data">
-            <b-button-group v-if="IS_SHOW_EDITOR">
-              <b-button
-                variant="warning"
-                :disabled="submittingEditGroup || deletingGroup"
-                @click="openEditForm(data)"
-              >
-                Edit
-              </b-button>
-              <b-button
-                variant="danger"
-                :disabled="submittingEditGroup || deletingGroup"
-                @click="deleteCharacterGroup(data)"
-              >
-                Delete
-              </b-button>
-            </b-button-group>
-          </template>
-        </b-table>
-        <b-pagination
-          v-show="CHARACTER_GROUP_LIST.length > rowsPerPage"
-          v-model="currentPage"
-          :total-rows="CHARACTER_GROUP_LIST.length"
-          :per-page="rowsPerPage"
-          aria-controls="character-group-table"
-          class="justify-content-center"
-        />
-      </b-col>
-    </b-row>
+  <span v-if="!loading">
+    <b-table
+      id="character-group-table"
+      :items="CHARACTER_GROUP_LIST"
+      :fields="characterGroupFields"
+      :per-page="rowsPerPage"
+      :current-page="currentPage"
+      show-empty
+    >
+      <template #head(btn)="data">
+        <b-button v-if="IS_SHOW_EDITOR" v-b-modal.new-character-group variant="outline-success">
+          New Character Group
+        </b-button>
+      </template>
+      <template #cell(characters)="data">
+        <div style="overflow-wrap: break-word">
+          <p>
+            {{
+              CHARACTER_LIST.filter((c) => data.item.characters.includes(c.id))
+                .map((c) => c.name)
+                .join(', ')
+            }}
+          </p>
+        </div>
+      </template>
+      <template #cell(btn)="data">
+        <b-button-group v-if="IS_SHOW_EDITOR">
+          <b-button
+            variant="warning"
+            :disabled="submittingEditGroup || deletingGroup"
+            @click="openEditForm(data)"
+          >
+            Edit
+          </b-button>
+          <b-button
+            variant="danger"
+            :disabled="submittingEditGroup || deletingGroup"
+            @click="deleteCharacterGroup(data)"
+          >
+            Delete
+          </b-button>
+        </b-button-group>
+      </template>
+    </b-table>
+    <b-pagination
+      v-show="CHARACTER_GROUP_LIST.length > rowsPerPage"
+      v-model="currentPage"
+      :total-rows="CHARACTER_GROUP_LIST.length"
+      :per-page="rowsPerPage"
+      aria-controls="character-group-table"
+      class="justify-content-center"
+    />
     <b-modal
       id="new-character-group"
       ref="new-character"
@@ -155,7 +150,10 @@
         </b-form-group>
       </b-form>
     </b-modal>
-  </b-container>
+  </span>
+  <div v-else class="text-center py-5">
+    <b-spinner label="Loading" />
+  </div>
 </template>
 
 <script>
@@ -164,9 +162,10 @@ import { required } from 'vuelidate/lib/validators';
 import log from 'loglevel';
 
 export default {
-  name: 'ConfigCharacterGroups',
+  name: 'CharacterGroups',
   data() {
     return {
+      loading: true,
       characterGroupFields: ['name', 'description', 'characters', { key: 'btn', label: '' }],
       rowsPerPage: 15,
       currentPage: 1,
@@ -210,6 +209,7 @@ export default {
   async mounted() {
     await this.GET_CHARACTER_LIST();
     await this.GET_CHARACTER_GROUP_LIST();
+    this.loading = false;
   },
   methods: {
     newSelectChanged(value, id) {