refactor(structure): remove usage of Vuex ORM for groups, roles and p…

…eople

components/national-teams/st-national-teams.prop.ts

@@ -1,4 +1,4 @@
-import { Gender } from '~/models/person.model';
+import { Gender, Role } from '~/plugins/cms-service';
 import { DirectusImage } from '~/plugins/directus';
 
 export interface Player {
@@ -54,7 +54,7 @@ export interface NationalTeam {
   /**
    * Array of role IDs
    */
-  staff: number[];
+  staff: Role[];
   results: NationalTeamResult[];
   nationsCupResults: {
     [year: string]: string;

components/national-teams/st-player.vue

@@ -11,7 +11,7 @@
 import Vue, { PropType } from 'vue';
 import stPerson, { PersonDetail } from '~/components/people/st-person.vue';
 import { Player } from '~/components/national-teams/st-national-teams.prop';
-import { Gender } from '~/models/person.model';
+import { Gender } from '~/plugins/cms-service';
 
 export default Vue.extend({
   components: { stPerson },

components/people/st-role.vue

@@ -1,11 +1,11 @@
 <template>
   <div v-if="role.holders && role.holders.length" class="c-role">
-    <h3 v-if="!roleAsSubname" class="c-role__title t-headline-2">{{ role.nameForHolders }}</h3>
+    <h3 v-if="!roleAsSubname" class="c-role__title t-headline-2">{{ nameForHolders }}</h3>
     <st-person
       v-for="holder in role.holders"
       :key="holder.id"
       :name="`${holder.first_name} ${holder.last_name}`"
-      :sub-name="roleAsSubname ? role.nameForHolders : null"
+      :sub-name="roleAsSubname ? nameForHolders : null"
       :avatar-asset-id="holder.portrait_square_head"
       :details="getHolderDetails(holder)"
       class="c-role__person"
@@ -17,8 +17,7 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import stPerson, { PersonDetail } from '~/components/people/st-person.vue';
-import Person from '~/models/person.model';
-import Role from '~/models/role.model';
+import { Gender, Person, Role } from '~/plugins/cms-service';
 
 export default Vue.extend({
   components: { stPerson },
@@ -29,6 +28,17 @@ export default Vue.extend({
     },
     roleAsSubname: Boolean,
   },
+  computed: {
+    nameForHolders(): string {
+      if (this.role.name_feminine && this.role.holders?.every((holder) => holder.gender === Gender.Female)) {
+        return this.role.name_feminine;
+      }
+      if (this.role.name_masculine && this.role.holders?.every((holder) => holder.gender === Gender.Male)) {
+        return this.role.name_masculine;
+      }
+      return this.role.name;
+    },
+  },
   methods: {
     getHolderDetails(holder: Person): PersonDetail[] {
       const details = [];

components/people/st-staff-person.vue

@@ -13,7 +13,7 @@
           class="c-staff-person__role"
           :class="{ 'c-staff-person__role--main': (role.pivot && role.pivot.main) || roles.length === 1 }"
         >
-          {{ role.getNameForPerson(person) }}
+          {{ getRoleNameForPerson(role, person) }}
         </li>
       </ul>
     </template>
@@ -23,8 +23,7 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import stPerson, { PersonDetail } from '~/components/people/st-person.vue';
-import Person from '~/models/person.model';
-import Role from '~/models/role.model';
+import { Gender, Person, Role } from '~/plugins/cms-service';
 
 export default Vue.extend({
   components: { stPerson },
@@ -76,6 +75,14 @@ export default Vue.extend({
     },
   },
   methods: {
+    getRoleNameForPerson(role: Role, person: Person): string {
+      if (person.gender === Gender.Female) {
+        return role.name_feminine || role.name;
+      } else if (person.gender === Gender.Male) {
+        return role.name_masculine || role.name;
+      }
+      return role.name;
+    },
     getTooltipForRole(role: Role) {
       if (!role.group) {
         return;

components/st-simple-page.vue

@@ -20,8 +20,7 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue';
-import Role from '~/models/role.model';
-import { Resource } from '~/plugins/cms-service';
+import { Resource, Role } from '~/plugins/cms-service';
 import stRole from '~/components/people/st-role.vue';
 import StResourceList from '~/components/resources/st-resource-list.vue';
 

database/index.ts

@@ -7,10 +7,6 @@ import Round from '~/models/round.model';
 import Faceoff from '~/models/faceoff.model';
 import Match from '~/models/match.model';
 import Facility from '~/models/facility.model';
-import Group from '~/models/group.model';
-import Role from '~/models/role.model';
-import Person from '~/models/person.model';
-import RolePerson from '~/models/role-person.model';
 
 const database = new Database();
 
@@ -24,10 +20,4 @@ database.register(Faceoff);
 database.register(Match);
 database.register(Facility);
 
-// Staff models
-database.register(Group);
-database.register(Role);
-database.register(Person);
-database.register(RolePerson);
-
 export default database;