Localize roles and genders

Author: d3m37r4

resources/js/Components/Navbar.vue

@@ -36,7 +36,7 @@ import RoleBadge from "@/Components/RoleBadge.vue";
                             <p class="truncate">
                                 {{ $page.props.auth.user.login }}
                             </p>
-                            <RoleBadge :role="$page.props.auth.user.role.name" />
+                            <RoleBadge :role="$page.props.auth.user.role" />
                         </div>
                     </div>
                     <nav class="grid space-y-1 pt-2">

resources/js/Components/RoleBadge.vue

@@ -1,21 +1,16 @@
 <script setup>
-import { computed } from 'vue';
-import { trans } from 'laravel-vue-i18n';
+import { getRoleName } from "@/Utils/role.js";
 
 const props = defineProps({
     role: {
-        type: String,
+        type: Object,
         required: true,
     },
 });
-
-const roleName = computed(() => {
-    return trans(`role.name.${props.role.toLowerCase()}`, 'role.name.unknown');
-});
 </script>
 
 <template>
     <div class="badge badge-secondary rounded">
-        {{ roleName }}
+        {{ getRoleName(role) }}
     </div>
 </template>

resources/js/Pages/Dashboard/Users/Create.vue

@@ -2,6 +2,8 @@
 import DashboardLayout from '@/Layouts/Dashboard.vue';
 import { useForm } from '@inertiajs/vue3';
 import { ref, watch, computed } from 'vue';
+import { getRoleName } from '@/Utils/role';
+import { getGenderName } from "@/Utils/gender";
 import BackButton from "@/Components/Buttons/BackButton.vue";
 import CreateButton from "@/Components/Buttons/CreateButton.vue";
 import InputError from "@/Components/InputError.vue";
@@ -146,7 +148,7 @@ const store = () => {
                             class="select select-bordered w-full focus:ring-1 focus:ring-offset-2 focus:ring-offset-base-200 focus:ring-orange-500"
                             v-model="form.role">
                             <option disabled value="">{{ ('Назначьте роль пользователю') }}</option>
-                            <option v-for="role in roles" :key="role.id" :value="role.id">{{ role.name }}</option>
+                            <option v-for="role in roles" :key="role.id" :value="role.id">{{ getRoleName(role) }}</option>
                         </select>
                         <InputError :message="form.errors.role" />
                     </div>
@@ -225,7 +227,7 @@ const store = () => {
                             class="select select-bordered w-full focus:ring-1 focus:ring-offset-2 focus:ring-offset-base-200 focus:ring-orange-500"
                             v-model="form.gender">
                             <option disabled value="">{{ ('Укажите пол пользователя') }}</option>
-                            <option v-for="gender in genders" :value="gender.id">{{ gender.name }}</option>
+                            <option v-for="gender in genders" :value="gender.id">{{ getGenderName(gender) }}</option>
                         </select>
                         <InputError :message="form.errors.gender" />
                     </div>

resources/js/Pages/Dashboard/Users/Edit.vue

@@ -2,6 +2,8 @@
 import DashboardLayout from '@/Layouts/Dashboard.vue';
 import { useForm } from '@inertiajs/vue3';
 import { ref, watch, computed } from 'vue';
+import { getRoleName } from '@/Utils/role';
+import { getGenderName } from "@/Utils/gender";
 import BackButton from "@/Components/Buttons/BackButton.vue";
 import UpdateButton from "@/Components/Buttons/UpdateButton.vue";
 import InputError from "@/Components/InputError.vue";
@@ -139,7 +141,7 @@ function update() {
                             v-model="form.role"
                             required>
                             <option disabled>{{ ('Назначьте роль пользователю...') }}</option>
-                            <option v-for="role in roles" :key="role.id" :value="role.id">{{ role.name }}</option>
+                            <option v-for="role in roles" :key="role.id" :value="role.id">{{ getRoleName(role) }}</option>
                         </select>
                         <InputError :message="form.errors.role"/>
                     </div>
@@ -218,7 +220,7 @@ function update() {
                             class="select select-bordered w-full focus:ring-1 focus:ring-offset-2 focus:ring-offset-base-200 focus:ring-orange-500"
                             v-model="form.gender">
                             <option disabled value="">{{ ('Укажите пол пользователя') }}</option>
-                            <option v-for="gender in genders" :value="gender.id">{{ gender.name }}</option>
+                            <option v-for="gender in genders" :value="gender.id">{{ getGenderName(gender) }}</option>
                         </select>
                         <InputError :message="form.errors.gender" />
                     </div>

resources/js/Pages/Dashboard/Users/Index.vue

@@ -116,7 +116,7 @@ const confirmDeleteUser = (id) => {
                                 </div>
                             </td>
                             <td>
-                                <RoleBadge :role="user.role.name" />
+                                <RoleBadge :role="user.role" />
                             </td>
                             <td>{{ user.created_at }}</td>
                             <td>

resources/js/Utils/gender.js

@@ -0,0 +1,12 @@
+import { trans } from 'laravel-vue-i18n';
+
+export const getGenderName = (gender, separator = '-') => {
+    if (!gender?.name) {
+        return trans('gender.name.unknown');
+    }
+
+    const formattedgenderName = gender.name.toLowerCase().replace(/\s+/g, separator);
+    const translation = trans(`gender.name.${formattedgenderName}`);
+
+    return translation === `gender.name.${formattedgenderName}` ? gender.name : translation;
+};

resources/js/Utils/role.js

@@ -0,0 +1,12 @@
+import { trans } from 'laravel-vue-i18n';
+
+export const getRoleName = (role, separator = '-') => {
+    if (!role?.name) {
+        return trans('role.name.unknown');
+    }
+
+    const formattedRoleName = role.name.toLowerCase().replace(/\s+/g, separator);
+    const translation = trans(`role.name.${formattedRoleName}`);
+
+    return translation === `role.name.${formattedRoleName}` ? role.name : translation;
+};

resources/lang/en.json

@@ -25,6 +25,10 @@
     "role.name.user": "User",
     "role.name.unknown": "Unknown role",
 
+    "gender.name.male": "Male",
+    "gender.name.female": "Female",
+    "gender.name.not-specified": "Not specified",
+
     "dashboard.page.main.title": "Dashboard",
     "dashboard.page.settings.title": "System settings",
 

resources/lang/en/genders.php

@@ -25,6 +25,10 @@
     "role.name.user": "Пользователь",
     "role.name.unknown": "Неизвестная роль",
 
+    "gender.name.male": "Мужской",
+    "gender.name.female": "Женский",
+    "gender.name.not-specified": "Не указано",
+
     "dashboard.page.main.title": "Панель управления",
     "dashboard.page.settings.title": "Настройки системы",