create translation crud

app/Http/Controllers/TranslationController.php

@@ -5,9 +5,61 @@ namespace App\Http\Controllers;
 use App\Http\Controllers\Controller;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\File;
+use Inertia\Inertia;
+use Throwable;
 
 class TranslationController extends Controller
 {
+  /**
+   * @return string
+   */
+  private function path()
+  {
+    return lang_path(app()->getLocale() . '.json');
+  }
+
+  /**
+   * @return \Illuminate\Http\Response
+   */
+  public function index()
+  {
+    return Inertia::render('Translation/Index')->with([
+      'translations' => $this->all(),
+    ]);
+  }
+
+  /**
+   * @param \Illuminate\Http\Request $request
+   * @return \Illuminate\Http\Response
+   */
+  public function update(Request $request)
+  {
+    $request->validate([
+      'key' => 'required|string',
+      'value' => 'required|string',
+    ]);
+
+    $all = $this->all();
+    $all[$request->key] = $request->value;
+
+    try {
+      File::put($this->path(), json_encode(
+        $all, JSON_PRETTY_PRINT
+      ));
+
+      return redirect()->back()->with('success', __(
+        '`:key` has been translated to `:value`', [
+          'key' => $request->key,
+          'value' => $request->value,
+        ],
+      ));
+    } catch (Throwable $e) {
+      return redirect()->back()->with('error', __(
+        $e->getMessage()
+      ));
+    }
+  }
+
   /**
    * @param string $locale
    * @return \Illuminate\Http\Response
@@ -16,19 +68,15 @@ class TranslationController extends Controller
   {
     app()->setLocale($locale);
     
-    return $this->all() ?? '{}';
+    return $this->all() ?: '{}';
   }
 
   /**
    * @return array|null
    */
-  public function all()
+  private function all()
   {
-    $path = lang_path(app()->getLocale() . '.json');
-
-    if (File::exists($path)) {
-      return json_decode(File::get($path), true);
-    }
+    return File::exists($this->path()) ? json_decode(File::get($this->path()), true) : [];
   }
 
   /**
@@ -44,15 +92,13 @@ class TranslationController extends Controller
 
     app()->setLocale($locale);
 
-    $all = $this->all() ?? [];
+    $all = $this->all();
 
     if (!array_key_exists($request->text, $all)) {
       $all[$request->text] = $request->text;
     }
 
-    $path = lang_path($locale . '.json');
-
-    return File::put($path, json_encode(
+    return File::put($this->path(), json_encode(
       $all, JSON_PRETTY_PRINT
     ));
   }

resources/js/Pages/Translation/Index.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref } from 'vue'
+import DashboardLayout from '@/Layouts/DashboardLayout.vue'
+import Card from '@/Components/Card.vue'
+import Icon from '@/Components/Icon.vue'
+import Input from '@/Components/Input.vue'
+import { useForm } from '@inertiajs/inertia-vue3'
+import { Inertia } from '@inertiajs/inertia'
+
+const { translations } = defineProps({
+  translations: Object,
+})
+
+const search = ref(null)
+
+const update = (key, value) => {
+  return useForm({key, value}).patch(route('superuser.translation.update'), {
+    // onFinish: () => Inertia.get(route(route().current()))
+  })
+}
+
+const sorted = () => Object.keys(translations).sort().map(key => ({
+  key: key,
+  value: translations[key],
+}))
+</script>
+
+<template>
+  <DashboardLayout
+    :title="__('translation')"
+  >
+    <Card class="bg-white dark:bg-gray-700 dark:text-gray-200">
+      <template #header>
+        <div class="flex items-center space-x-1 justify-between bg-gray-200 dark:bg-gray-800 p-2">
+          <p class="lowercase first-letter:capitalize">
+            {{ __('you can change translation on this page') }}
+          </p>
+
+          <Input
+            v-model="search"
+            :placeholder="__('search')"
+            type="search"
+            class="max-w-xs text-sm"
+          />
+        </div>
+      </template>
+
+      <template #body>
+        <div class="flex flex-col space-y-2 p-4 h-screen max-h-96 overflow-auto">
+          <TransitionGroup
+            enterActiveClass="transition-all duration-300"
+            leaveActiveClass="transition-all duration-300"
+            enterFromClass="opacity-0 -translate-y-full bg-white"
+            leaveToClass="opacity-0 -translate-y-full bg-white"
+          >
+            <template
+              v-for="(translation, i) in sorted().filter(t => t.key.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase()))"
+              :key="i"
+            >
+              <div class="flex flex-col space-y-1 px-2 rounded-md">
+                <div class="flex items-center space-x-1">
+                  <label :for="`${translation.key}`" class="flex-none w-1/3">
+                    {{ translation.key }}
+                  </label>
+
+                  <Input
+                    :value="translation.value"
+                    @change.prevent="$event.target.value.trim() && update(translation.key, $event.target.value)"
+                    type="text"
+                    required
+                  />
+                </div>
+              </div>
+            </template>
+          </TransitionGroup>
+        </div>
+      </template>
+    </Card>
+  </DashboardLayout>
+</template>

routes/web.php

@@ -43,6 +43,11 @@ Route::middleware(['auth:sanctum', config('jetstream.auth_session'), 'verified']
         Route::resource('menu', App\Http\Controllers\Superuser\MenuController::class)->only([
             'index', 'store', 'update', 'destroy',
         ])->middleware(['permission:read menu']);
+
+        Route::prefix('/translation')->name('translation.')->controller(App\Http\Controllers\TranslationController::class)->group(function () {
+            Route::get('/', 'index')->name('index');
+            Route::patch('/', 'update')->name('update');
+        });
         
         Route::get('/activity/login', [App\Http\Controllers\ActivityController::class, 'login'])->name('activity.login');
     });