webui: share region pretty name between clans and strategus

src/WebUI/src/components/ClanForm.vue

@@ -3,22 +3,20 @@
     <div class="container">
       <form @submit.prevent="onSubmit">
         <b-field label="Region">
-          <b-dropdown @change="setRegion" aria-role="menu">
-            <template #trigger>
-              <a class="navbar-item" role="button">
-                <span>{{ translatedRegion.translation }}</span>
-                <b-icon icon="caret-down"></b-icon>
-              </a>
-            </template>
-
-            <b-dropdown-item
-              v-for="translatedRegion in translatedRegions"
-              :value="translatedRegion"
-              :key="translatedRegion.region"
+          <b-select
+            placeholder="Select a region"
+            :icon="selectedRegionIcon"
+            required
+            v-model="formModel.region"
+          >
+            <option
+              v-for="[regionValue, regionStr] in regions"
+              :value="regionValue"
+              :key="regionValue"
             >
-              {{ translatedRegion.translation }}
-            </b-dropdown-item>
-          </b-dropdown>
+              {{ regionStr }}
+            </option>
+          </b-select>
         </b-field>
 
         <b-field grouped>
@@ -79,10 +77,10 @@
 <script lang="ts">
 import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
 import Constants from '../../../../data/constants.json';
-import Region, { TranslatedRegion } from '@/models/region';
+import Region from '@/models/region';
 import { ClanEditionModes, ClanEditionMode } from '@/models/clan-edition';
 import Clan from '@/models/clan';
-import { getTranslatedRegions } from '@/services/region-service';
+import { regionIcons, regionToStr } from '@/services/region-service';
 
 @Component
 export default class ClanFormComponent extends Vue {
@@ -124,22 +122,17 @@ export default class ClanFormComponent extends Vue {
   bannerKeyMaxLength: number = Constants.clanBannerKeyMaxLength;
   bannerKeyRegex: string = Constants.clanBannerKeyRegex;
 
-  translatedRegions = getTranslatedRegions();
-
   constructor() {
     super();
     this.formModel = { ...this.clan };
   }
 
-  get translatedRegion(): TranslatedRegion {
-    return (
-      this.translatedRegions.find(tr => tr.region === this.formModel.region) ||
-      this.translatedRegions[0]
-    );
+  get regions(): [string, string][] {
+    return Object.entries(regionToStr);
   }
 
-  setRegion(val: TranslatedRegion): void {
-    this.formModel.region = val.region;
+  get selectedRegionIcon(): string {
+    return regionIcons[this.formModel.region];
   }
 
   @Emit('submit')

src/WebUI/src/components/strategus/RegistrationDialog.vue

@@ -13,7 +13,7 @@
       <b-field>
         <b-select
           placeholder="Select a region"
-          :icon="regionIcon"
+          :icon="selectedRegionIcon"
           required
           v-model="selectedRegion"
         >
@@ -40,30 +40,21 @@
 
 <script lang="ts">
 import { Vue, Component } from 'vue-property-decorator';
-import * as strategusService from '@/services/strategus-service';
 import strategusModule from '@/store/strategus-module';
 import Region from '@/models/region';
+import { regionToStr, regionIcons } from '@/services/region-service';
 
 @Component
 export default class RegistrationDialog extends Vue {
   selectedRegion: Region | null = null;
   registering = false;
 
   get regions(): [string, string][] {
-    return Object.entries(strategusService.regionToStr);
+    return Object.entries(regionToStr);
   }
 
-  get regionIcon(): string {
-    switch (this.selectedRegion) {
-      case Region.Europe:
-        return 'globe-europe';
-      case Region.NorthAmerica:
-        return 'globe-americas';
-      case Region.Asia:
-        return 'globe-asia';
-      default:
-        return 'globe';
-    }
+  get selectedRegionIcon(): string {
+    return this.selectedRegion !== null ? regionIcons[this.selectedRegion] : '';
   }
 
   onSubmit() {

src/WebUI/src/models/region.ts

@@ -3,9 +3,5 @@ export enum Region {
   NorthAmerica = 'NorthAmerica',
   Asia = 'Asia',
 }
-export interface TranslatedRegion {
-  region: Region;
-  translation: string;
-}
 
 export default Region;

src/WebUI/src/services/region-service.ts

@@ -1,9 +1,13 @@
-import Region, { TranslatedRegion } from '@/models/region';
+import Region from '@/models/region';
 
-export function getTranslatedRegions(): TranslatedRegion[] {
-  return Object.values(Region)
-    .map(r => {
-      return { region: r, translation: r } as TranslatedRegion;
-    })
-    .sort((r1, r2) => (r1.translation > r2.translation ? 1 : -1));
-}
+export const regionToStr: Record<Region, string> = {
+  [Region.Europe]: 'Europe',
+  [Region.NorthAmerica]: 'North America',
+  [Region.Asia]: 'Asia',
+};
+
+export const regionIcons: Record<Region, string> = {
+  [Region.Europe]: 'globe-europe',
+  [Region.NorthAmerica]: 'globe-americas',
+  [Region.Asia]: 'globe-asia',
+};

src/WebUI/src/services/strategus-service.ts

@@ -7,12 +7,6 @@ import Party from '@/models/party';
 import PartyStatusUpdateRequest from '@/models/party-status-update-request';
 import PartyStatus from '@/models/party-status';
 
-export const regionToStr: Record<Region, string> = {
-  [Region.Europe]: 'Europe',
-  [Region.NorthAmerica]: 'North America',
-  [Region.Asia]: 'Asia',
-};
-
 export const inSettlementStatuses = new Set<PartyStatus>([
   PartyStatus.IdleInSettlement,
   PartyStatus.RecruitingInSettlement,

src/WebUI/src/views/ClanCreation.vue

@@ -17,7 +17,6 @@ import { notify } from '@/services/notifications-service';
 import * as clanService from '@/services/clan-service';
 import { ClanEditionModes, ClanEditionMode } from '@/models/clan-edition';
 import Clan from '@/models/clan';
-
 import ClanFormComponent from '@/components/ClanForm.vue';
 
 @Component({

src/WebUI/src/views/Clans.vue

@@ -41,10 +41,10 @@
 
       <b-tabs v-model="activeRegionTab">
         <b-tab-item
-          v-for="translatedRegion in translatedRegions"
-          :value="translatedRegion.translation"
-          :key="translatedRegion.region"
-          :label="translatedRegion.translation"
+          v-for="[regionValue, regionStr] in regions"
+          :value="regionValue"
+          :key="regionValue"
+          :label="regionStr"
         >
           <b-table
             id="clansTable"
@@ -139,15 +139,19 @@ import Clan from '@/models/clan';
 import userModule from '@/store/user-module';
 import ClanWithMemberCount from '@/models/clan-with-member-count';
 import { argbIntToRgbHexColor } from '@/utils/color';
-import { getTranslatedRegions } from '@/services/region-service';
+import { regionToStr } from '@/services/region-service';
+import Region from '@/models/region';
 
 @Component
 export default class Clans extends Vue {
   clanSearchQuery = '';
   clansLoading = false;
   clansPerPage = 20;
-  translatedRegions = getTranslatedRegions();
-  activeRegionTab = 0;
+  activeRegionTab = Region.Europe;
+
+  get regions(): [string, string][] {
+    return Object.entries(regionToStr);
+  }
 
   get userClan(): Clan | null {
     return userModule.clan;
@@ -159,7 +163,7 @@ export default class Clans extends Vue {
 
   get filteredClans(): ClanWithMemberCount[] {
     const filteredClans = clanModule.clans.filter(
-      clan => clan.clan.region === this.translatedRegions[this.activeRegionTab].region
+      clan => clan.clan.region === this.activeRegionTab
     );
     if (this.clanSearchQuery.length === 0) {
       return filteredClans;
@@ -175,14 +179,13 @@ export default class Clans extends Vue {
     const currentPage = this.$route.query.page
       ? parseInt(this.$route.query.page as string, 10)
       : undefined;
-
     if (!currentPage) {
-      this.$router.replace('clans?page=' + 1);
       return 1;
     }
+
     const minPage = Math.ceil(this.filteredClans.length / this.clansPerPage);
     if (currentPage > minPage) {
-      this.$router.replace('clans?page=' + minPage);
+      this.$router.replace({ name: 'clan', params: { page: minPage.toString() } });
       return minPage;
     }
     return currentPage;