@adminforth/i18n 1.0.4 → 1.0.6

package/custom/LanguageInUserMenu.vue

@@ -1,35 +1,48 @@
 <template>
-  <p class="text-gray-500 dark:text-gray-400 font-sm text-left mt-3 flex items-center justify-center">
-    <Select
-      v-model="selectedLanguage"
-      :options="options"
-      :placeholder="$t('Select language')"
+  <div>
+    <div class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black 
+      hover:bg-html dark:text-darkSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive 
+      w-full select-none	"
+      :class="{ 'bg-black bg-opacity-10	': showDropdown }"
+      @click="showDropdown = !showDropdown"
     >
-      <template #item="{ option }">
-        <span class="mr-1">
-          <span class="flag-icon"
-            :class="`flag-icon-${getCountryCodeFromLangCode(option.value)}`"
-          ></span> 
-
-        </span>
-        <span>{{ option.label }}</span>
-      </template>
-
-      <template #selected-item="{option}">
-        <span class="mr-1">
-          <span class="flag-icon"
-            :class="`flag-icon-${getCountryCodeFromLangCode(option.value)}`"
-          ></span>
-        </span>
-        <span>{{ option.label }}</span>
-      </template>
-    </Select>
-  </p>
+      <span class="mr-1">
+        <span class="flag-icon"
+          :class="`flag-icon-${getCountryCodeFromLangCode(selectedOption.value)}`"
+        ></span>
+      </span>
+      <span>{{ selectedOption.label }}</span>
+
+      <IconCaretDownSolid class="h-5 w-5 text-lightPrimary dark:text-gray-400 opacity-50 transition duration-150 ease-in"
+          :class="{ 'transform rotate-180': showDropdown }"
+      />
+    </div>
+
+    <div v-if="showDropdown" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm 
+      text-black dark:text-darkSidebarTextHover
+      bg-black bg-opacity-10	
+      hover:bg-html dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive 
+      w-full text-select-none pl-5 select-none"
+      v-for="option in options.filter((opt) => opt.value !== selectedOption.value)"
+      @click="doChangeLang(option.value)"
+    >
+      <span class="mr-1">
+        <span class="flag-icon"
+          :class="`flag-icon-${getCountryCodeFromLangCode(option.value)}`"
+        ></span>
+      </span>
+      <span>{{ option.label }}</span>
+    
+    </div>
+
+   
+  </div>
 </template>
 
 <script setup>
-import Select from '@/afcl/Select.vue';
 import 'flag-icon-css/css/flag-icons.min.css';
+import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
+
 import { setLang, getCountryCodeFromLangCode, getLocalLang } from './langCommon';
 
 import { computed, ref, onMounted, watch } from 'vue';
@@ -37,15 +50,17 @@ import { useI18n } from 'vue-i18n';
 
 const { setLocaleMessage, locale } = useI18n();
 
-
+const showDropdown = ref(false);
 const props = defineProps(['meta', 'resource']);
 
 const selectedLanguage = ref('');
 
+function doChangeLang(lang) {
+  setLang({ setLocaleMessage, locale }, props.meta.pluginInstanceId, lang);
+  // unfortunately, we need this to recall all APIs
+  document.location.reload();
 
-watch(() => selectedLanguage.value, (newVal) => {
-  setLang({ setLocaleMessage, locale }, props.meta.pluginInstanceId, newVal);
-});
+}
 
 
 const options = computed(() => {
@@ -57,6 +72,14 @@ const options = computed(() => {
   });
 });
 
+const selectedOption = computed(() => {
+  const val = options.value.find((option) => option.value === selectedLanguage.value);
+  if (val) {
+    return val;
+  }
+  return options.value[0];
+});
+
 
 onMounted(() => {
   console.log('Language In user menu mounted', props.meta.supportedLanguages);

package/dist/custom/LanguageInUserMenu.vue

@@ -1,35 +1,48 @@
 <template>
-  <p class="text-gray-500 dark:text-gray-400 font-sm text-left mt-3 flex items-center justify-center">
-    <Select
-      v-model="selectedLanguage"
-      :options="options"
-      :placeholder="$t('Select language')"
+  <div>
+    <div class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black 
+      hover:bg-html dark:text-darkSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive 
+      w-full select-none	"
+      :class="{ 'bg-black bg-opacity-10	': showDropdown }"
+      @click="showDropdown = !showDropdown"
     >
-      <template #item="{ option }">
-        <span class="mr-1">
-          <span class="flag-icon"
-            :class="`flag-icon-${getCountryCodeFromLangCode(option.value)}`"
-          ></span> 
-
-        </span>
-        <span>{{ option.label }}</span>
-      </template>
-
-      <template #selected-item="{option}">
-        <span class="mr-1">
-          <span class="flag-icon"
-            :class="`flag-icon-${getCountryCodeFromLangCode(option.value)}`"
-          ></span>
-        </span>
-        <span>{{ option.label }}</span>
-      </template>
-    </Select>
-  </p>
+      <span class="mr-1">
+        <span class="flag-icon"
+          :class="`flag-icon-${getCountryCodeFromLangCode(selectedOption.value)}`"
+        ></span>
+      </span>
+      <span>{{ selectedOption.label }}</span>
+
+      <IconCaretDownSolid class="h-5 w-5 text-lightPrimary dark:text-gray-400 opacity-50 transition duration-150 ease-in"
+          :class="{ 'transform rotate-180': showDropdown }"
+      />
+    </div>
+
+    <div v-if="showDropdown" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm 
+      text-black dark:text-darkSidebarTextHover
+      bg-black bg-opacity-10	
+      hover:bg-html dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive 
+      w-full text-select-none pl-5 select-none"
+      v-for="option in options.filter((opt) => opt.value !== selectedOption.value)"
+      @click="doChangeLang(option.value)"
+    >
+      <span class="mr-1">
+        <span class="flag-icon"
+          :class="`flag-icon-${getCountryCodeFromLangCode(option.value)}`"
+        ></span>
+      </span>
+      <span>{{ option.label }}</span>
+    
+    </div>
+
+   
+  </div>
 </template>
 
 <script setup>
-import Select from '@/afcl/Select.vue';
 import 'flag-icon-css/css/flag-icons.min.css';
+import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
+
 import { setLang, getCountryCodeFromLangCode, getLocalLang } from './langCommon';
 
 import { computed, ref, onMounted, watch } from 'vue';
@@ -37,15 +50,17 @@ import { useI18n } from 'vue-i18n';
 
 const { setLocaleMessage, locale } = useI18n();
 
-
+const showDropdown = ref(false);
 const props = defineProps(['meta', 'resource']);
 
 const selectedLanguage = ref('');
 
+function doChangeLang(lang) {
+  setLang({ setLocaleMessage, locale }, props.meta.pluginInstanceId, lang);
+  // unfortunately, we need this to recall all APIs
+  document.location.reload();
 
-watch(() => selectedLanguage.value, (newVal) => {
-  setLang({ setLocaleMessage, locale }, props.meta.pluginInstanceId, newVal);
-});
+}
 
 
 const options = computed(() => {
@@ -57,6 +72,14 @@ const options = computed(() => {
   });
 });
 
+const selectedOption = computed(() => {
+  const val = options.value.find((option) => option.value === selectedLanguage.value);
+  if (val) {
+    return val;
+  }
+  return options.value[0];
+});
+
 
 onMounted(() => {
   console.log('Language In user menu mounted', props.meta.supportedLanguages);

package/dist/index.js

@@ -131,7 +131,7 @@ export default class I18N extends AdminForthPlugin {
                 // if showIn is not defined, add it as empty
                 column.showIn = [];
                 // add virtual field for incomplete
-                resourceConfig.columns.push({
+                resourceConfig.columns.unshift({
                     name: 'fully_translated',
                     label: 'Fully translated',
                     virtual: true,
@@ -257,6 +257,28 @@ export default class I18N extends AdminForthPlugin {
                 });
             }
             ;
+            // if there is menu item with resourceId, add .badge function showing number of untranslated strings
+            const addBadgeCountToMenuItem = (menuItem) => {
+                console.log('🪲menuItem, registring ', menuItem);
+                menuItem.badge = () => __awaiter(this, void 0, void 0, function* () {
+                    const resource = adminforth.resource(menuItem.resourceId);
+                    const count = yield resource.count([Filters.NEQ(this.options.completedFieldName, this.fullCompleatedFieldValue)]);
+                    return `${count}`;
+                });
+                menuItem.badgeTooltip = 'Untranslated count';
+            };
+            adminforth.config.menu.forEach((menuItem) => {
+                if (menuItem.resourceId === resourceConfig.resourceId) {
+                    addBadgeCountToMenuItem(menuItem);
+                }
+                if (menuItem.children) {
+                    menuItem.children.forEach((child) => {
+                        if (child.resourceId === resourceConfig.resourceId) {
+                            addBadgeCountToMenuItem(child);
+                        }
+                    });
+                }
+            });
         });
     }
     bulkTranslate(_a) {
@@ -376,6 +398,9 @@ ${JSON.stringify(strings.reduce((acc, s) => {
                 if (exists) {
                     return;
                 }
+                if (!key) {
+                    throw new Error(`Faced an empty key in Fronted messages, file ${file}`);
+                }
                 const record = Object.assign({ [this.enFieldName]: key, [this.options.categoryFieldName]: category }, (this.options.sourceFieldName ? { [this.options.sourceFieldName]: file } : {}));
                 try {
                     yield adminforth.resource(this.resourceConfig.resourceId).create(record);
@@ -450,6 +475,9 @@ ${JSON.stringify(strings.reduce((acc, s) => {
                 const resource = adminforth.resource(resourceConfig.resourceId);
                 const translation = yield resource.get([Filters.EQ(this.enFieldName, msg), Filters.EQ(this.options.categoryFieldName, category)]);
                 if (!translation) {
+                    if (!msg) {
+                        throw Error(`Empty string passed to tr function during translation`);
+                    }
                     yield resource.create({
                         [this.enFieldName]: msg,
                         [this.options.categoryFieldName]: category,

package/index.ts

@@ -1,5 +1,5 @@
 import AdminForth, { AdminForthPlugin, Filters, suggestIfTypo, AdminForthDataTypes } from "adminforth";
-import type { IAdminForth, IHttpServer, AdminForthComponentDeclaration, AdminForthResourceColumn, AdminForthResource, BeforeLoginConfirmationFunction } from "adminforth";
+import type { IAdminForth, IHttpServer, AdminForthComponentDeclaration, AdminForthResourceColumn, AdminForthResource, BeforeLoginConfirmationFunction, AdminForthConfigMenuItem } from "adminforth";
 import type { PluginOptions } from './types.js';
 import iso6391, { LanguageCode } from 'iso-639-1';
 import path from 'path';
@@ -147,7 +147,7 @@ export default class I18N extends AdminForthPlugin {
       column.showIn = [];
 
       // add virtual field for incomplete
-      resourceConfig.columns.push({
+      resourceConfig.columns.unshift({
         name: 'fully_translated',
         label: 'Fully translated',
         virtual: true,
@@ -294,6 +294,31 @@ export default class I18N extends AdminForthPlugin {
         }
       );  
     };
+
+
+    // if there is menu item with resourceId, add .badge function showing number of untranslated strings
+    
+    const addBadgeCountToMenuItem = (menuItem: AdminForthConfigMenuItem) => {
+      console.log('🪲menuItem, registring ', menuItem);
+      menuItem.badge = async () => {
+        const resource = adminforth.resource(menuItem.resourceId);
+        const count = await resource.count([Filters.NEQ(this.options.completedFieldName, this.fullCompleatedFieldValue)]);
+        return `${count}`;
+      };
+      menuItem.badgeTooltip = 'Untranslated count';
+    }
+    adminforth.config.menu.forEach((menuItem) => {
+      if (menuItem.resourceId === resourceConfig.resourceId) {
+        addBadgeCountToMenuItem(menuItem);
+      }
+      if (menuItem.children) {
+        menuItem.children.forEach((child) => {
+          if (child.resourceId === resourceConfig.resourceId) {
+            addBadgeCountToMenuItem(child);
+          }
+        });
+      }
+    });
   }
 
   async bulkTranslate({ selectedIds }: { selectedIds: string[] }) {
@@ -450,6 +475,9 @@ ${
       if (exists) {
         return;
       }
+      if (!key) {
+        throw new Error(`Faced an empty key in Fronted messages, file ${file}`);
+      }
       const record = {
         [this.enFieldName]: key,
         [this.options.categoryFieldName]: category,
@@ -535,6 +563,10 @@ ${
         const resource = adminforth.resource(resourceConfig.resourceId);
         const translation = await resource.get([Filters.EQ(this.enFieldName, msg), Filters.EQ(this.options.categoryFieldName, category)]);
         if (!translation) {
+
+          if (!msg) {
+            throw Error(`Empty string passed to tr function during translation`);
+          }
           await resource.create({
             [this.enFieldName]: msg,
             [this.options.categoryFieldName]: category,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/i18n",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",