Moved default Language to General

Signed-off-by: Thomas Schauer-Köckeis <[email protected]>
DependencyTrack · Sep 17, 2024 · da0ad49 · da0ad49
1 parent 8582449
commit da0ad49
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 167 deletions.
diff --git a/src/i18n/index.js b/src/i18n/index.js
@@ -7,7 +7,7 @@ Vue.use(VueI18n);
 
 async function getDefaultLanguage() {
   try {
-    let url = `${api.BASE_URL}/${api.URL_CONFIG_PROPERTY}/public/general/default.language`;
+    let url = `${api.BASE_URL}/${api.URL_CONFIG_PROPERTY}/public/general/default.locale`;
     let response = await axios.get(url);
     return decodeURIComponent(response.data.propertyValue);
   } catch (error) {

diff --git a/src/router/index.js b/src/router/index.js
@@ -28,8 +28,6 @@ const BomFormats = () =>
   import('@/views/administration/configuration/BomFormats');
 const WelcomeMessage = () =>
   import('@/views/administration/configuration/WelcomeMessage');
-const DefaultLanguage = () =>
-  import('@/views/administration/configuration/DefaultLanguage');
 const Email = () => import('@/views/administration/configuration/Email');
 const Jira = () => import('@/views/administration/configuration/JiraConfig');
 const InternalComponents = () =>
@@ -362,16 +360,6 @@ function configRoutes() {
                 permission: 'SYSTEM_CONFIGURATION',
               },
             },
-            {
-              path: 'configuration/defaultLanguage',
-              component: DefaultLanguage,
-              meta: {
-                title: i18n.t('message.administration'),
-                i18n: 'message.administration',
-                sectionPath: '/admin',
-                permission: 'SYSTEM_CONFIGURATION',
-              },
-            },
             {
               path: 'configuration/email',
               component: Email,

diff --git a/src/views/administration/AdminMenu.vue b/src/views/administration/AdminMenu.vue
@@ -91,11 +91,6 @@ export default {
               name: this.$t('admin.bom_formats'),
               route: 'configuration/bomFormats',
             },
-            {
-              component: 'DefaultLanguage',
-              name: this.$t('admin.default_language'),
-              route: 'configuration/defaultLanguage',
-            },
             {
               component: 'Email',
               name: this.$t('admin.email'),

diff --git a/src/views/administration/Administration.vue b/src/views/administration/Administration.vue
@@ -20,7 +20,6 @@ import AdminMenu from './AdminMenu';
 
 // Configuration plugins
 import BomFormats from './configuration/BomFormats';
-import DefaultLanguage from './configuration/DefaultLanguage';
 import Email from './configuration/Email';
 import General from './configuration/General';
 import InternalComponents from './configuration/InternalComponents';
@@ -76,7 +75,6 @@ export default {
     General,
     WelcomeMessage,
     BomFormats,
-    DefaultLanguage,
     Email,
     Jira,
     InternalComponents,

diff --git a/src/views/administration/configuration/DefaultLanguage.vue b/src/views/administration/configuration/DefaultLanguage.vue
diff --git a/src/views/administration/configuration/General.vue b/src/views/administration/configuration/General.vue
@@ -1,32 +1,79 @@
 <template>
   <b-card no-body :header="header">
     <b-card-body>
-      <b-validated-input-group-form-input
-        id="base_url"
-        :label="$t('admin.base_url')"
-        input-group-size="mb-3"
-        rules="required"
-        type="url"
-        v-model="baseUrl"
-        tooltip="This URL is used to construct links back to Dependency-Track from external systems."
-      />
-      <c-switch
-        id="isBadgesEnabled"
-        color="primary"
-        v-model="isBadgesEnabled"
-        label
-        v-bind="labelIcon"
-      />{{ $t('admin.enable_svg_badge') }}
+      <b-form-group>
+        <b-validated-input-group-form-input
+          id="base_url"
+          :label="$t('admin.base_url')"
+          input-group-size="mb-3"
+          rules="required"
+          type="url"
+          v-model="baseUrl"
+          tooltip="This URL is used to construct links back to Dependency-Track from external systems."
+        />
+        <c-switch
+          id="isBadgesEnabled"
+          color="primary"
+          v-model="isBadgesEnabled"
+          label
+          v-bind="labelIcon"
+        />{{ $t('admin.enable_svg_badge') }}
+      </b-form-group>
+      <b-form-group>
+        <b-form-group
+          :label="$t('admin.default_language')"
+          label-size="lg"
+          label-class="font-weight-bold pt-0 mb-2"
+        >
+          <p>{{ $t('admin.default_language_desc') }}</p>
+          <div id="customToolbar">
+            <c-switch
+              id="default-language-enabled"
+              color="primary"
+              v-model="isDefaultLanguageEnabled"
+              label
+              v-bind="labelIcon"
+            />{{ $t('admin.default_language_enable') }}
+          </div>
+        </b-form-group>
+        <b-input-group>
+          <b-input-group-prepend :title="this.$t('message.language')" is-text>
+            <span class="fa fa-language text-primary"></span>
+          </b-input-group-prepend>
+          <b-form-select
+            class="bg-widget"
+            v-model="defaultLanguage"
+            :disabled="!isDefaultLanguageEnabled"
+          >
+            <b-form-select-option
+              v-for="locale in $i18n.availableLocales"
+              :key="`locale-${locale}`"
+              :value="locale"
+              :title="$t(`language.${locale}`)"
+            >
+              <span class="mr-2">{{ localeToFlag(locale) }}</span>
+              {{ locale.toUpperCase() }}</b-form-select-option
+            >
+          </b-form-select>
+        </b-input-group>
+      </b-form-group>
     </b-card-body>
     <b-card-footer>
-      <b-button variant="outline-primary" class="px-4" @click="saveChanges">{{
-        $t('message.update')
-      }}</b-button>
+      <b-button
+        variant="outline-primary"
+        class="px-4"
+        @click="saveChanges"
+        :disabled="
+          this.isDefaultLanguageEnabled && this.defaultLanguage === ' '
+        "
+        >{{ $t('message.update') }}</b-button
+      >
     </b-card-footer>
   </b-card>
 </template>
 
 <script>
+import LocalePicker from '@/views/components/LocalePicker.vue';
 import { Switch as cSwitch } from '@coreui/vue';
 import { ValidationObserver } from 'vee-validate';
 import BValidatedInputGroupFormInput from '../../../forms/BValidatedInputGroupFormInput';
@@ -39,6 +86,7 @@ export default {
     header: String,
   },
   components: {
+    LocalePicker,
     cSwitch,
     ValidationObserver,
     BValidatedInputGroupFormInput,
@@ -47,6 +95,8 @@ export default {
     return {
       baseUrl: '',
       isBadgesEnabled: false,
+      isDefaultLanguageEnabled: false,
+      defaultLanguage: 'en',
       labelIcon: {
         dataOn: '\u2713',
         dataOff: '\u2715',
@@ -66,8 +116,35 @@ export default {
           propertyName: 'badge.enabled',
           propertyValue: this.isBadgesEnabled,
         },
+        {
+          groupName: 'general',
+          propertyName: 'default.locale',
+          propertyValue: encodeURIComponent(
+            this.isDefaultLanguageEnabled ? this.defaultLanguage : ' ',
+          ),
+        },
       ]);
     },
+    localeToFlag: function (locale) {
+      // Largely taken from wojtekmaj/country-code-to-flag-emoji. Adopted to be able to deal with locale codes as inputs.
+      // https://github.com/wojtekmaj/country-code-to-flag-emoji/blob/ff0d3d2dd9680b6f860d85fc9e713e93e396adb7/src/index.ts
+
+      let countryCode = locale.split('-').pop().toUpperCase();
+      if (countryCode === 'EN') {
+        countryCode = 'US'; // Sorry Britain!
+      } else if (countryCode === 'HI') {
+        countryCode = 'IN';
+      } else if (countryCode === 'JA') {
+        countryCode = 'JP';
+      } else if (countryCode === 'ZH') {
+        countryCode = 'CN';
+      }
+
+      return Array.from(countryCode)
+        .map((letter) => letter.toLowerCase().charCodeAt(0) + 127365)
+        .map((charCode) => String.fromCodePoint(charCode))
+        .join('');
+    },
   },
   created() {
     this.axios.get(this.configUrl).then((response) => {
@@ -86,6 +163,12 @@ export default {
         }
       }
     });
+    let url = `${this.$api.BASE_URL}/${this.$api.URL_CONFIG_PROPERTY}/public/general/default.locale`;
+    this.axios.get(url).then((response) => {
+      this.defaultLanguage = decodeURIComponent(response.data.propertyValue);
+      this.isDefaultLanguageEnabled =
+        decodeURIComponent(response.data.propertyValue) !== ' ';
+    });
   },
 };
 </script>