add translations and language and labels

Author: Romper9

dev-demo/custom/Dash.vue

@@ -9,7 +9,7 @@
         <div class="flex justify-between">
           <div>
             <h5 class="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">{{ data.totalAparts }}</h5>
-            <p class="text-base font-normal text-gray-500 dark:text-gray-400">{{  $t('Apartment last 7 days | Apartments last 7 days', data.totalAparts) }}</p>
+            <p class="text-base font-normal text-gray-500 dark:text-gray-400">{{  $t('Apartment last 7 days | Apartments last 7 days') }}</p>
           </div>
 
         </div>

live-demo/app/custom/Dashboard.vue

@@ -1,8 +1,6 @@
 <template>
     <div class="px-4 py-8 bg-blue-50 dark:bg-gray-900 dark:shadow-none min-h-[calc(100vh-56px)]">
-      <h1 class="mb-4 text-xl font-extrabold text-gray-900 dark:text-white md:text-2xl lg:text-3xl"><span
-          class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">{{$t('Apartments')}}</span>
-        {{$t('Statistics.')}}</h1>
+      <h1 class="mb-4 text-xl font-extrabold text-gray-900 dark:text-white md:text-2xl lg:text-3xl"v-html='$t("<span class=\"text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400\">Apartments</span> Statistics.")'></h1>
 
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
         <div class="max-w-md w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-6" v-if="data">

live-demo/app/migrations/20241226145811_init/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "translations" ADD COLUMN "de_string" TEXT;

live-demo/app/resources/translations.ts

@@ -31,14 +31,15 @@ export default {
   },
   plugins: [
     new I18nPlugin({
-      supportedLanguages: ['en', 'uk', 'ja', 'fr'],
+      supportedLanguages: ['en', 'uk', 'ja', 'fr', 'de'],
 
       // names of the fields in the resource which will store translations
       translationFieldNames: {
         en: 'en_string',
         uk: 'uk_string',
         ja: 'ja_string',
         fr: 'fr_string',
+        de: 'de_string',
       },
 
       // name of the field which will store the category of the string
@@ -77,6 +78,7 @@ export default {
     {
       name: "en_string",
       type: AdminForthDataTypes.STRING,
+      label: 'English',
     },
     {
       name: "created_at",
@@ -85,14 +87,22 @@ export default {
     {
       name: "uk_string",
       type: AdminForthDataTypes.STRING,
+      label: 'Ukrainian',
     },
     {
       name: "ja_string",
       type: AdminForthDataTypes.STRING,
+      label: 'Japanese',
     },
     {
       name: "fr_string",
       type: AdminForthDataTypes.STRING,
+      label: 'French',
+    },
+    {
+      name: "de_string",
+      type: AdminForthDataTypes.STRING,
+      label: 'German',
     },
     {
       name: "completedLangs",

live-demo/app/schema.prisma

@@ -47,6 +47,7 @@ model translations {
     ja_string       String?  // translation for Japanese language
     fr_string       String?  // translation for French language
     es_string       String?  // translation for Spanish language
+    de_string       String?
     category        String
     source          String?
     completedLangs   String?