@adminforth/i18n 1.0.4 → 1.0.5

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) {

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[] }) {

package/package.json

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