create translation crud

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>